diff --git a/package.json b/package.json
index 2a2199f..f9f16db 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
       }
     },
     "rules": {
+      "indent": "off",
       "camelcase": "off",
       "space-before-function-paren": "off",
       "object-curly-spacing": "off",
@@ -94,5 +95,12 @@
       ]
     }
   },
+  "prettier": {
+    "trailingComma": "es5",
+    "printWidth": 120,
+    "tabWidth": 2,
+    "semi": false,
+    "singleQuote": true
+  },
   "type": "module"
 }
diff --git a/src/App.vue b/src/App.vue
index cee4671..1308b1c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,14 +8,32 @@ import { Slider } from '@/components/ui/slider'
 import { Textarea } from '@/components/ui/textarea'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Separator } from '@/components/ui/separator'
-import { computed } from 'vue';
-import { Replace, Type, Cable, KeyboardMusic, Squircle, Keyboard, Bolt, GaugeCircle, AudioLines, AudioWaveform, Binary, Power, Bold, Italic, Underline, FileDigit, FileX } from 'lucide-vue-next'
+import { computed } from 'vue'
+import {
+  Replace,
+  Type,
+  Cable,
+  KeyboardMusic,
+  Squircle,
+  Keyboard,
+  Bolt,
+  GaugeCircle,
+  AudioLines,
+  AudioWaveform,
+  Binary,
+  Power,
+  Bold,
+  Italic,
+  Underline,
+  FileDigit,
+  FileX,
+} from 'lucide-vue-next'
 
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
 import { Toggle } from '@/components/ui/toggle'
 import Pop from '@/components/patterns/Pop.vue'
-import QuickPreview from '@/components/patterns/QuickPreview.vue' 
+import QuickPreview from '@/components/patterns/QuickPreview.vue'
 
 import {
   Menubar,
@@ -41,10 +59,8 @@ import {
 
 import { ref } from 'vue'
 import { reactive } from 'vue'
-const state = reactive({ count: 12 });
- 
 
- 
+const state = reactive({ count: 12 })
 
 
 // Import JSON make it available for all components and views
@@ -52,866 +68,943 @@ const state = reactive({ count: 12 });
 </script>
 
 <template>
-  
- 
+
+
   <main>
-  
-  <div class="w-screen select-none ">
-  <div class="flex">
-  <Menubar class="w-full rounded-none bg-zinc-950">
-    <MenubarMenu>
-      <MenubarTrigger v-t="'navbar.device.title'"></MenubarTrigger>
-      <MenubarContent>
-        <!-- TODO: Switch keyboard shortcut icons based on platform -->
-        <MenubarItem>
-          {{$t('navbar.device.disconnect')}} <MenubarShortcut>⌘D</MenubarShortcut>
-        </MenubarItem>
-        <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>{{ $t('navbar.device.export') }}<MenubarShortcut>⌘E</MenubarShortcut></MenubarItem>
-        <MenubarItem>{{ $t('navbar.device.import') }}<MenubarShortcut>⌘I</MenubarShortcut></MenubarItem>
-        <MenubarSeparator />
-        <MenubarItem>{{ $t('navbar.device.quit') }}<MenubarShortcut>⌘Q</MenubarShortcut></MenubarItem>
-      </MenubarContent>
-    </MenubarMenu>
-  </Menubar>
-  </div>
-  <div class="flex flex-row">
-  <div class="border-solid border-0 border-r w-80 flex-none bg-zinc-900 bg-opacity-30">
-   <div>
-    <div class="space-y-1 p-6 pb-0">
-      <h2 class="text-md leading-none">
-       Profiles
-      </h2>
-      <p class="text-xs text-muted-foreground">
-        An open-source UI component library.
-      </p>
-    </div>
-    <Separator class="my-4" />
-  </div>
-  <Pop/>
 
-  </div>
-  <div class="border-0 shrink-0 border-r bg-zinc-900 bg-opacity-30">
-    
+    <div class="w-screen select-none ">
+      <div class="flex">
+        <Menubar class="w-full rounded-none bg-zinc-950">
+          <MenubarMenu>
+            <MenubarTrigger v-t="'navbar.device.title'"></MenubarTrigger>
+            <MenubarContent>
+              <!-- TODO: Switch keyboard shortcut icons based on platform -->
+              <MenubarItem>
+                {{ $t('navbar.device.disconnect') }}
+                <MenubarShortcut>⌘D</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>{{ $t('navbar.device.export') }}
+                <MenubarShortcut>⌘E</MenubarShortcut>
+              </MenubarItem>
+              <MenubarItem>{{ $t('navbar.device.import') }}
+                <MenubarShortcut>⌘I</MenubarShortcut>
+              </MenubarItem>
+              <MenubarSeparator />
+              <MenubarItem>{{ $t('navbar.device.quit') }}
+                <MenubarShortcut>⌘Q</MenubarShortcut>
+              </MenubarItem>
+            </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+      </div>
+      <div class="flex flex-row">
+        <div class="border-solid border-0 border-r w-80 flex-none bg-zinc-900 bg-opacity-30">
+          <div>
+            <div class="space-y-1 p-6 pb-0">
+              <h2 class="text-md leading-none">
+                Profiles
+              </h2>
+              <p class="text-xs text-muted-foreground">
+                An open-source UI component library.
+              </p>
+            </div>
+            <Separator class="my-4" />
+          </div>
+          <Pop />
 
-    <Tabs default-value="haptic-config" orientation="vertical" class="flex flex-row">
+        </div>
+        <div class="border-0 shrink-0 border-r bg-zinc-900 bg-opacity-30">
 
-    
-  <!-- Tab Col 1 -->
-  <div id="tablistmid" class="flex">
-    <TabsList class="flex flex-col px-0 gap-0 w-96 py-0">
-    <div class="flex flex-col">
-      <div class="space-y-1 p-6">
-        <h1 class="leading-none text-lg">
-         Quick Preview
-        </h1>
-        <!-- <p class="text-xs text-muted-foreground">
-          Pre-rendered preview with live feedback from current position.
-        </p> -->
-      </div>
-      <QuickPreview/>
-      
-    </div>
-      <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><Bolt class="h-4 w-4" /></div>
-    <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Configuration Options</h2></div>
-    
-    </div>
 
-      <TabsTrigger value="prog-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-        <div class="p-4">
-        <h1 class="leading-none text-lg">
-         Program Settings
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Operation mode and Profile Naming
-        </p>
-        
-      </div>
-      </TabsTrigger>
+          <Tabs default-value="haptic-config" orientation="vertical" class="flex flex-row">
 
-      <TabsTrigger value="haptic-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-        <div class="p-4">
-        <h1 class="leading-none text-lg pb-1">
-         Feedback Designer
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Feedback mode selector and parameter adjustment
-        </p>
-        
-      </div>
-      </TabsTrigger>
-      <TabsTrigger value="map-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-        <div class="p-4">
-        <h1 class="leading-none text-lg">
-         Mapping Configuration
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Assign function to Knob and Keys
-        </p>
-        
-      </div>
-      </TabsTrigger>
 
-      
+            <!-- Tab Col 1 -->
+            <div id="tablistmid" class="flex">
+              <TabsList class="flex flex-col px-0 gap-0 w-96 py-0">
+                <div class="flex flex-col">
+                  <div class="space-y-1 p-6">
+                    <h1 class="leading-none text-lg">
+                      Quick Preview
+                    </h1>
+                    <!-- <p class="text-xs text-muted-foreground">
+                      Pre-rendered preview with live feedback from current position.
+                    </p> -->
+                  </div>
+                  <QuickPreview />
 
-      <TabsTrigger value="led-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-        <div class="p-4">
-        <h1 class="leading-none text-lg">
-         Light Designer
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Adjust behavior of LED Ring. Turn On/Off.
-        </p>
-        
-      </div>
-      </TabsTrigger>
-      <TabsTrigger value="gui-config" class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none" disabled="true">
-        <div class="p-4">
-        <Badge class="font-mono h-4 mb-1 rounded-full">COMING SOON</badge>
-        <h1 class="leading-none text-muted-foreground text-lg">
-         GUI Designer 
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Adjust graphic interface parameters
-        </p>
-        
-      </div>
-      </TabsTrigger>
-    </TabsList>
-    </div>
-    <!-- End Tab Col 1 -->
-    <!-- Tab Col 2 -->
-    <div id="tabcontentend" class="flex border-l-1 border-solid border-l">
-    <TabsContent value="haptic-config" class="mt-0">
-      <div class="w-96 bg-zinc-900 bg-opacity-40">
-  
-      <div class="space-y-1 p-6">
-        <h1 class="leading-none text-lg">
-         Feedback Designer
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Create or tune device haptic response
-        </p>
-        
-      </div>
-    
-    <Separator/>
-    <ScrollArea class="h-[720px]">
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
-    <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
-    
-    </div>
-    <Separator/>
-  
-      <Tabs default-value="fd">
-    <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-      <TabsTrigger value="fd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-fd.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                </div>
+                <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                  <div class="flex-none">
+                    <Bolt class="h-4 w-4" />
+                  </div>
+                  <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Configuration Options</h2></div>
+
+                </div>
+
+                <TabsTrigger
+                  value="prog-config"
+                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
+                  <div class="p-4">
+                    <h1 class="leading-none text-lg">
+                      Program Settings
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Operation mode and Profile Naming
+                    </p>
+
+                  </div>
+                </TabsTrigger>
+
+                <TabsTrigger
+                  value="haptic-config"
+                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
+                  <div class="p-4">
+                    <h1 class="leading-none text-lg pb-1">
+                      Feedback Designer
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Feedback mode selector and parameter adjustment
+                    </p>
+
+                  </div>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="map-config"
+                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
+                  <div class="p-4">
+                    <h1 class="leading-none text-lg">
+                      Mapping Configuration
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Assign function to Knob and Keys
+                    </p>
+
+                  </div>
+                </TabsTrigger>
+
+
+                <TabsTrigger
+                  value="led-config"
+                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
+                  <div class="p-4">
+                    <h1 class="leading-none text-lg">
+                      Light Designer
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Adjust behavior of LED Ring. Turn On/Off.
+                    </p>
+
+                  </div>
+                </TabsTrigger>
+                <TabsTrigger
+                  value="gui-config"
+                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none"
+                  disabled="true">
+                  <div class="p-4">
+                    <Badge class="font-mono h-4 mb-1 rounded-full">COMING SOON</badge>
+                    <h1 class="leading-none text-muted-foreground text-lg">
+                      GUI Designer
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Adjust graphic interface parameters
+                    </p>
+
+                  </div>
+                </TabsTrigger>
+              </TabsList>
+            </div>
+            <!-- End Tab Col 1 -->
+            <!-- Tab Col 2 -->
+            <div id="tabcontentend" class="flex border-l-1 border-solid border-l">
+              <TabsContent value="haptic-config" class="mt-0">
+                <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+                  <div class="space-y-1 p-6">
+                    <h1 class="leading-none text-lg">
+                      Feedback Designer
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Create or tune device haptic response
+                    </p>
+
+                  </div>
+
+                  <Separator />
+                  <ScrollArea class="h-[720px]">
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <GaugeCircle class="h-4 w-4" />
+                      </div>
+                      <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
+
+                    </div>
+                    <Separator />
+
+                    <Tabs default-value="fd">
+                      <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+                        <TabsTrigger value="fd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-fd.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Fine Detents
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="cd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-cd.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="cd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-cd.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Coarse Detents
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="vr">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-vf.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="vr">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-vf.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="rt">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-rc.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="rt">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-rc.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Return to Center
       </span>
-        </div>
-      </TabsTrigger>
-    </TabsList>
-    
-  </Tabs>
+                          </div>
+                        </TabsTrigger>
+                      </TabsList>
 
-    <Separator/>
-  <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
-    
-      <div class="flex w-full max-w-sm items-center gap-0">
-      <Button @click="state.count--" type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold">
-      -
-    </Button>
-    <Input id="positions" class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0" type="number" placeholder="10" max="65535" min="10" v-model="state.count"/>
-    <Button @click="state.count++" type="submit" class="rounded-none text-xl font-pixellg font-bold">
-      +
-    </Button>
-  </div>
-      
-    </div>
-    <Separator/>
-    
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><AudioWaveform class="h-4 w-4" /></div>
-    <div class="grow">
-      <h2 class="text-sm px-2 py-4">Haptic Response</h2>
-    </div>
-    <div class="flex-none">
-      <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    
-    </div>
-    <Separator/>
-    
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><AudioLines class="h-4 w-4" /></div>
-    <div class="grow"><h2 class="text-sm px-2 py-4">  Auditory Response</h2></div>
-    <div class="flex-none">
-    <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    
-    <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
-    <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-        <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-      </div>
-      
-      
-    </div>
-    </ScrollArea>
-    <Separator/>
-      
-    
-    
-    
- 
-  </div>
-    </TabsContent>
-    <TabsContent value="map-config" class="mt-0">
-      <div class="w-96 bg-zinc-900 bg-opacity-40">
-  
-      <div class="space-y-1 p-6">
-        <h1 class="leading-none text-lg">
-         Mapping Configuration
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Create or tune device haptic response
-        </p>
-        
-      </div>
-    
-    <Separator/>
-    <ScrollArea class="h-[720px]">
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><Keyboard class="h-4 w-4" /></div>
-    <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Key Mapping</h2></div>
-    
-    </div>
-    <Separator/>
-  
-      <Tabs default-value="fd">
-    <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-      <TabsTrigger value="fd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-key-o.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                    </Tabs>
+
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
+
+                      <div class="flex w-full max-w-sm items-center gap-0">
+                        <Button
+                          type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
+                          @click="state.count--">
+                          -
+                        </Button>
+                        <Input
+                          id="positions"
+                          v-model="state.count"
+                          class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
+                          type="number" placeholder="10" max="65535" min="10" />
+                        <Button
+                          type="submit" class="rounded-none text-xl font-pixellg font-bold"
+                          @click="state.count++">
+                          +
+                        </Button>
+                      </div>
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <AudioWaveform class="h-4 w-4" />
+                      </div>
+                      <div class="grow">
+                        <h2 class="text-sm px-2 py-4">Haptic Response</h2>
+                      </div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
+                      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <AudioLines class="h-4 w-4" />
+                      </div>
+                      <div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
+                      </div>
+
+
+                    </div>
+                  </ScrollArea>
+                  <Separator />
+
+
+                </div>
+              </TabsContent>
+              <TabsContent value="map-config" class="mt-0">
+                <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+                  <div class="space-y-1 p-6">
+                    <h1 class="leading-none text-lg">
+                      Mapping Configuration
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Create or tune device haptic response
+                    </p>
+
+                  </div>
+
+                  <Separator />
+                  <ScrollArea class="h-[720px]">
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <Keyboard class="h-4 w-4" />
+                      </div>
+                      <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Key Mapping</h2></div>
+
+                    </div>
+                    <Separator />
+
+                    <Tabs default-value="fd">
+                      <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+                        <TabsTrigger value="fd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-key-o.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Switch A
         <Badge class="bg-orange-400 mt-2">Shift</Badge>
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="cd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-key.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="cd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-key.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Switch B
         <Badge class="bg-zinc-400 mt-2">Fn1</Badge>
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="vr">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-key-g.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="vr">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-key-g.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Switch C
         <Badge class="bg-zinc-400 mt-2">Fn2</Badge>
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="rt">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-key-d.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="rt">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-key-d.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Switch D
         <Badge class="bg-zinc-400 mt-2">M0</Badge>
       </span>
-        </div>
-      </TabsTrigger>
-    </TabsList>
-    
-  </Tabs>
+                          </div>
+                        </TabsTrigger>
+                      </TabsList>
 
-    <Separator/>
-  <Command>
-    
-    <CommandList>
-      <CommandEmpty>Key or function not found :(
-          
-        </CommandEmpty>
-      <CommandInput placeholder="Find Key, Function or Macro..." />
-      <CommandGroup heading="Common">
-        <CommandItem value="backspace">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Backspace
-        </CommandItem>
-        <CommandItem value="delete">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Delete
-        </CommandItem>
-        <CommandItem value="enter">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Enter
-        </CommandItem>
-        <CommandItem value="end">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> End
-        </CommandItem>
-        <CommandItem value="arrow up">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Up
-        </CommandItem>
-        <CommandItem value="arrow down">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Down
-        </CommandItem>
-        <CommandItem value="arrow left">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Left
-        </CommandItem>
-        <CommandItem value="arrow right">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Arrow Right
-        </CommandItem>
-      </CommandGroup>
-      <CommandSeparator />
-      <CommandGroup heading="MIDI Control Changes">
-        <CommandItem value="cc0">
-          <KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Bank Select (CC0)
-        </CommandItem>
-        <CommandItem value="cc2">
-          <KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Modulation (CC1)
-        </CommandItem>
-        <CommandItem value="cc3">
-          <KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Foot Controller (CC4)
-        </CommandItem>
-        <CommandItem value="cc4">
-          <KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Portamento (CC5)
-        </CommandItem>
-        <CommandItem value="cc5">
-          <KeyboardMusic color="grey" class="w-4 h-4 mr-2"/> Volume (CC7)
-        </CommandItem>
-      </CommandGroup>
-      <CommandGroup heading="Macros">
-        <CommandItem value="Page Scroll">
-          <Squircle color="grey" class="w-4 h-4 mr-2"/> Page Scroller (M0)
-        </CommandItem>
-      </CommandGroup>
-    </CommandList>
-    <CommandSeparator/>
-    
-  </Command>
-    <Separator/>
-    
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
-    <div class="grow">
-      <h2 class="text-sm px-2 py-4">Knob Mapping</h2>
-    </div>
-    <div class="flex-none">
-      <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    
-    </div>
-    <Separator/>
-    
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><AudioLines class="h-4 w-4" /></div>
-    <div class="grow"><h2 class="text-sm px-2 py-4">  Auditory Response</h2></div>
-    <div class="flex-none">
-    <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    
-    <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
-    <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-        <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-      </div>
-      
-      
-    </div>
-    </ScrollArea>
-    <Separator/>
-      
-    
-    
-    
- 
-  </div>
-    </TabsContent>
-    <TabsContent value="prog-config" class="mt-0">
-      <div class="w-96 bg-zinc-900 bg-opacity-40">
-  
-      <div class="space-y-1 p-6">
-        <h1 class="leading-none text-lg">
-         Program Settings
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Create or tune device haptic response
-        </p>
-        
-      </div>
-    
-    <Separator/>
-    <ScrollArea class="h-[720px]">
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><Cable class="h-4 w-4" /></div>
-    <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Connection Type</h2></div>
-    
-    </div>
-    <Separator/>
-  
-      <Tabs default-value="fd">
-    <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
-      <TabsTrigger value="fd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-      <div class="w-24 size-w mb-2">
-      <img src="@/assets/gui-ico/ico-usb-logo.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                    </Tabs>
+
+                    <Separator />
+                    <Command>
+
+                      <CommandList>
+                        <CommandEmpty>Key or function not found :(
+
+                        </CommandEmpty>
+                        <CommandInput placeholder="Find Key, Function or Macro..." />
+                        <CommandGroup heading="Common">
+                          <CommandItem value="backspace">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Backspace
+                          </CommandItem>
+                          <CommandItem value="delete">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Delete
+                          </CommandItem>
+                          <CommandItem value="enter">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Enter
+                          </CommandItem>
+                          <CommandItem value="end">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            End
+                          </CommandItem>
+                          <CommandItem value="arrow up">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Arrow Up
+                          </CommandItem>
+                          <CommandItem value="arrow down">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Arrow Down
+                          </CommandItem>
+                          <CommandItem value="arrow left">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Arrow Left
+                          </CommandItem>
+                          <CommandItem value="arrow right">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Arrow Right
+                          </CommandItem>
+                        </CommandGroup>
+                        <CommandSeparator />
+                        <CommandGroup heading="MIDI Control Changes">
+                          <CommandItem value="cc0">
+                            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                            Bank Select (CC0)
+                          </CommandItem>
+                          <CommandItem value="cc2">
+                            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                            Modulation (CC1)
+                          </CommandItem>
+                          <CommandItem value="cc3">
+                            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                            Foot Controller (CC4)
+                          </CommandItem>
+                          <CommandItem value="cc4">
+                            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                            Portamento (CC5)
+                          </CommandItem>
+                          <CommandItem value="cc5">
+                            <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                            Volume (CC7)
+                          </CommandItem>
+                        </CommandGroup>
+                        <CommandGroup heading="Macros">
+                          <CommandItem value="Page Scroll">
+                            <Squircle color="grey" class="w-4 h-4 mr-2" />
+                            Page Scroller (M0)
+                          </CommandItem>
+                        </CommandGroup>
+                      </CommandList>
+                      <CommandSeparator />
+
+                    </Command>
+                    <Separator />
+
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <GaugeCircle class="h-4 w-4" />
+                      </div>
+                      <div class="grow">
+                        <h2 class="text-sm px-2 py-4">Knob Mapping</h2>
+                      </div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
+                      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <AudioLines class="h-4 w-4" />
+                      </div>
+                      <div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
+                      </div>
+
+
+                    </div>
+                  </ScrollArea>
+                  <Separator />
+
+
+                </div>
+              </TabsContent>
+              <TabsContent value="prog-config" class="mt-0">
+                <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+                  <div class="space-y-1 p-6">
+                    <h1 class="leading-none text-lg">
+                      Program Settings
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Create or tune device haptic response
+                    </p>
+
+                  </div>
+
+                  <Separator />
+                  <ScrollArea class="h-[720px]">
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <Cable class="h-4 w-4" />
+                      </div>
+                      <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Connection Type</h2></div>
+
+                    </div>
+                    <Separator />
+
+                    <Tabs default-value="fd">
+                      <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
+                        <TabsTrigger value="fd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                            <div class="w-24 size-w mb-2">
+                              <img src="@/assets/gui-ico/ico-usb-logo.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         USB (Virtual HID)
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="cd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="w-24 size-w mb-2">
-      <img src="@/assets/gui-ico/ico-midi-logo.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="cd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="w-24 size-w mb-2">
+                              <img src="@/assets/gui-ico/ico-midi-logo.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Standalone MIDI I/O
       </span>
-        </div>
-      </TabsTrigger>
-    </TabsList>
-    
-  </Tabs>
+                          </div>
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </Tabs>
 
 
-    <Separator/>
-    
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><Type class="h-4 w-4" /></div>
-    <div class="grow">
-      <h2 class="text-sm px-2 py-4">Profile Properties</h2>
-    </div>
-    
-    
-    </div>
-    <Separator/>
-    
-    <div class="flex flex-col p-8 py-4">
-      <span class="text-sm text-muted-foreground font-mono pb-4">Program Name</span>
-      <Input type="text" placeholder="Program Name" class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase" defaultValue="Oscillator 1" maxlength="20"/>
-      
-      <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
-   </div>
-    <Separator/>
-    <div class="flex flex-col p-8 py-4">
-      <span class="text-sm text-muted-foreground font-mono pb-4">Program Description</span>
-      <Textarea class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase" placeholder="Program Description" defaultValue="Adjust Korg Oscillator Waveform " rows="2" maxlength="50"/>
-      <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
-      <div class="flex items-center space-x-4 space-y-1">
-    <Switch id="airplane-mode" defaultChecked="true"/>
-    <Label for="airplane-mode" class="text-xs text-muted-foreground">Show Description in GUI</Label>
-  </div>
-      </div>
-    <Separator/>
-    
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><Replace class="h-4 w-4" /></div>
-    <div class="grow"><h2 class="text-sm px-2 py-4">Internal Profile Toggle</h2></div>
-    <div class="flex-none">
-    <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
+                    <Separator />
 
-    
-    </div>
-    <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
-    Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.
-    <Separator class="mt-4"/>
-    <span class="space-y-4">Operation: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-    <Separator class="my-4"/>
-    <span>Warning: Overrides software defined macro if combination is the same</span>
-    </p>
-    
-    
-    </ScrollArea>
-    <Separator/>
-      
-    
-    
-    
- 
-  </div>
-    </TabsContent>
-    <TabsContent value="led-config" class="mt-0">
-      <div class="w-96 bg-zinc-900 bg-opacity-40">
-  
-      <div class="space-y-1 p-6">
-        <h1 class="leading-none text-lg">
-         Light Designer
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          Create or tune device haptic response
-        </p>
-        
-      </div>
-    
-    <Separator/>
-    <ScrollArea class="h-[720px]">
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><GaugeCircle class="h-4 w-4" /></div>
-    <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
-    
-    </div>
-    <Separator/>
-  
-      <Tabs default-value="fd">
-    <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-      <TabsTrigger value="fd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-fd.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <Type class="h-4 w-4" />
+                      </div>
+                      <div class="grow">
+                        <h2 class="text-sm px-2 py-4">Profile Properties</h2>
+                      </div>
+
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-col p-8 py-4">
+                      <span class="text-sm text-muted-foreground font-mono pb-4">Program Name</span>
+                      <Input
+                        type="text" placeholder="Program Name"
+                        class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
+                        default-value="Oscillator 1" maxlength="20" />
+
+                      <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 py-4">
+                      <span class="text-sm text-muted-foreground font-mono pb-4">Program Description</span>
+                      <Textarea
+                        class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
+                        placeholder="Program Description" default-value="Adjust Korg Oscillator Waveform " rows="2"
+                        maxlength="50" />
+                      <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
+                      <div class="flex items-center space-x-4 space-y-1">
+                        <Switch id="airplane-mode" default-checked="true" />
+                        <Label for="airplane-mode" class="text-xs text-muted-foreground">Show Description in GUI</Label>
+                      </div>
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <Replace class="h-4 w-4" />
+                      </div>
+                      <div class="grow"><h2 class="text-sm px-2 py-4">Internal Profile Toggle</h2></div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+
+
+                    </div>
+                    <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
+                      Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you
+                      want to operate device in Standalone mode.
+                      <Separator class="mt-4" />
+                      <span class="space-y-4">Operation: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
+                        class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
+                      <Separator class="my-4" />
+                      <span>Warning: Overrides software defined macro if combination is the same</span>
+                    </p>
+
+
+                  </ScrollArea>
+                  <Separator />
+
+
+                </div>
+              </TabsContent>
+              <TabsContent value="led-config" class="mt-0">
+                <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+                  <div class="space-y-1 p-6">
+                    <h1 class="leading-none text-lg">
+                      Light Designer
+                    </h1>
+                    <p class="text-xs text-muted-foreground">
+                      Create or tune device haptic response
+                    </p>
+
+                  </div>
+
+                  <Separator />
+                  <ScrollArea class="h-[720px]">
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <GaugeCircle class="h-4 w-4" />
+                      </div>
+                      <div clas="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
+
+                    </div>
+                    <Separator />
+
+                    <Tabs default-value="fd">
+                      <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+                        <TabsTrigger value="fd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-fd.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Fine Detents
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="cd">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-cd.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="cd">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-cd.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Coarse Detents
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="vr">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-vf.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="vr">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-vf.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
       </span>
-        </div>
-      </TabsTrigger>
-      <TabsTrigger value="rt">
-        <div class="grid grid-flow-row auto-rows-max justify-items-center">
-      <div class="size-16 mb-2">
-      <img src="@/assets/gui-ico/ico-rc.svg"/>
-      </div>
-      <span class="text-xs leading-3 text-wrap">
+                          </div>
+                        </TabsTrigger>
+                        <TabsTrigger value="rt">
+                          <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                            <div class="size-16 mb-2">
+                              <img src="@/assets/gui-ico/ico-rc.svg" />
+                            </div>
+                            <span class="text-xs leading-3 text-wrap">
         Return to Center
       </span>
-        </div>
-      </TabsTrigger>
-    </TabsList>
-    
-  </Tabs>
+                          </div>
+                        </TabsTrigger>
+                      </TabsList>
+
+                    </Tabs>
+
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
+
+                      <div class="flex w-full max-w-sm items-center gap-0">
+                        <Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
+                          -
+                        </Button>
+                        <Input
+                          id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
+                          default-value="60" max="65535" min="10" />
+                        <Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
+                          +
+                        </Button>
+                      </div>
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <AudioWaveform class="h-4 w-4" />
+                      </div>
+                      <div class="grow">
+                        <h2 class="text-sm px-2 py-4">Haptic Response</h2>
+                      </div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+
+                    </div>
+                    <Separator />
+
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
+                      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+
+                    </div>
+                    <Separator />
+                    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+
+                      <div class="flex-none">
+                        <AudioLines class="h-4 w-4" />
+                      </div>
+                      <div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</h2></div>
+                      <div class="flex-none">
+                        <Toggle
+                          class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
+                          size="sm" default-value="true" aria-label="EnablePrimary">
+                          <Power class="w-4 h-4" />
+                        </Toggle>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+                      </div>
+                    </div>
+                    <Separator />
+                    <div class="flex flex-col p-8 pt-4">
+
+                      <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
+                      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+                      <div class="flex flex-row px-1 py-1.5">
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
+                        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
+                      </div>
+
+
+                    </div>
+                  </ScrollArea>
+                  <Separator />
+
+
+                </div>
+              </TabsContent>
+            </div>
+          </Tabs>
+
+        </div>
+
 
-    <Separator/>
-  <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
-    
-      <div class="flex w-full max-w-sm items-center gap-0">
-      <Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
-      -
-    </Button>
-    <Input id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10" defaultValue="60" max="65535" min="10"/>
-    <Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
-      +
-    </Button>
-  </div>
-      
-    </div>
-    <Separator/>
-    
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><AudioWaveform class="h-4 w-4" /></div>
-    <div class="grow">
-      <h2 class="text-sm px-2 py-4">Haptic Response</h2>
-    </div>
-    <div class="flex-none">
-      <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    
-    </div>
-    <Separator/>
-    
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
       </div>
     </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-      <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-      
-    </div>
-    <Separator/>
-    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-    
-    <div class="flex-none"><AudioLines class="h-4 w-4" /></div>
-    <div class="grow"><h2 class="text-sm px-2 py-4">  Auditory Response</h2></div>
-    <div class="flex-none">
-    <Toggle class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline" size="sm" defaultValue="true" aria-label="EnablePrimary">
-        <Power class="w-4 h-4" />
-      </Toggle>
-    </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
-      <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-      <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-      </div>
-    </div>
-    <Separator/>
-    <div class="flex flex-col p-8 pt-4">
-    
-    <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
-    <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-        <div class="flex flex-row px-1 py-1.5">
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-        <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-      </div>
-      
-      
-    </div>
-    </ScrollArea>
-    <Separator/>
-      
-    
-    
-    
- 
-  </div>
-    </TabsContent>
-    </div>
-  </Tabs>
-    
-  </div>
-  
-  
-</div>
-</div>
-   
+
   </main>
 </template>
 
diff --git a/src/components/patterns/Pop.vue b/src/components/patterns/Pop.vue
index a3a9600..1e1464f 100644
--- a/src/components/patterns/Pop.vue
+++ b/src/components/patterns/Pop.vue
@@ -16,125 +16,128 @@ import { Input } from '@/components/ui/input'
 
 <template>
 
-<input
-      type="text"
-      v-model="defaultName"
-      @keyup.enter="addNewProfile"
-      aria-label="Add Profile"
-      placeholder="add Profile"
-    />
+  <input
+    v-model="defaultName"
+    type="text"
+    aria-label="Add Profile"
+    placeholder="add Profile"
+    @keyup.enter="addNewProfile"
+  />
   <Command>
-  
+
     <CommandList>
-      
-      <CommandInput placeholder="Search Profile..." /> 
-      <CommandEmpty>No profile found</CommandEmpty>  
+
+      <CommandInput placeholder="Search Profile..." />
+      <CommandEmpty>No profile found</CommandEmpty>
       <CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
-        <CommandItem class="cursor-pointer" v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" :value="name.id">
-          <FileDigit color="grey" class="w-4 h-4 mr-2"/> {{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
-      </CommandItem>
+        <CommandItem
+          v-for="(name, id, innerIndex) in names(profileTag)" :key="innerIndex" class="cursor-pointer"
+          :value="name.id">
+          <FileDigit color="grey" class="w-4 h-4 mr-2" />
+          {{ name.name }} <span class="text-xs pl-2 text-muted-foreground text-right">uID: {{ name.id }} </span>
+        </CommandItem>
       </CommandGroup>
     </CommandList>
-    <CommandSeparator/>
-    
+    <CommandSeparator />
+
   </Command>
-  
+
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
 
 export default {
-  name: "nanoConfig",
+  name: 'NanoConfig',
   data() {
     return {
       profiles: [],
-    };
-  },
-  async created() {
-    try {
-        const res = await axios.get('http://localhost:3001/profiles');
-        this.profiles = res.data;
-    } catch (e) {
-        console.error(e);
     }
   },
   computed: {
     tags() {
-        const tags = new Set();
-        this.profiles.forEach(tag => tags.add(tag.profileTag));
-        return Array.from(tags);
+      const tags = new Set()
+      this.profiles.forEach(tag => tags.add(tag.profileTag))
+      return Array.from(tags)
+    },
+  },
+  async created() {
+    try {
+      const res = await axios.get('http://localhost:3001/profiles')
+      this.profiles = res.data
+    } catch (e) {
+      console.error(e)
     }
   },
   methods: {
     names(profileTag) {
-        return this.profiles
+      return this.profiles
         .filter(tag => tag.profileTag === profileTag)
-        .map(tag => ({name: tag.name, id: tag.id}));
+        .map(tag => ({ name: tag.name, id: tag.id }))
     },
     async addNewProfile() {
-        try {
-            const res = await axios.post('http://localhost:3001/profiles', 
-            { 
-                
-                name: this.defaultName,
-                profileTag: "Uncategorized",
-                profileConfig: {
-                  profileDesc: "",
-                  profileType: 1,
-                  showDesc: true,
-                },
-                feedbackConfig: {
-                  feedbackEn: true,
-                  feedbackType: "fd",
-                  multiRev: false,
-                  feedbackStrength: 1,
-                  endstopStrength: 1,
-                  outputRamp: 10000,
-                  minMaxPos: [0, 156],
-                  secondaryHaptic: true,
-                  secondaryVol: 5,
-                },
-                mappingConfig: {
-                  internalMacro: false,
-                  knobMap: "arrL",
-                  switchA: "shift",
-                  switchB: "ctrl",
-                  switchC: "alt",
-                  switchD: "esc",
-                },
-                ledConfig: {
-                  ledEnable: true,
-                  ledMode: 1,
-                  primary: {
-                    h: 100,
-                    s: 100,
-                    l: 100,
-                  },
-                  secondary: {
-                    h: 120,
-                    s: 120,
-                    l: 120,
-                  },
-                  pointer: {
-                    h: 255,
-                    s: 255,
-                    l: 255,
-                  },
-                },
-                guiConfig: {
-                  guiEnable: true,
-                } 
-            });
+      try {
+        const res = await axios.post('http://localhost:3001/profiles',
+          {
 
-            this.profiles = [...this.profiles, res.data];
+            name: this.defaultName,
+            profileTag: 'Uncategorized',
+            profileConfig: {
+              profileDesc: '',
+              profileType: 1,
+              showDesc: true,
+            },
+            feedbackConfig: {
+              feedbackEn: true,
+              feedbackType: 'fd',
+              multiRev: false,
+              feedbackStrength: 1,
+              endstopStrength: 1,
+              outputRamp: 10000,
+              minMaxPos: [0, 156],
+              secondaryHaptic: true,
+              secondaryVol: 5,
+            },
+            mappingConfig: {
+              internalMacro: false,
+              knobMap: 'arrL',
+              switchA: 'shift',
+              switchB: 'ctrl',
+              switchC: 'alt',
+              switchD: 'esc',
+            },
+            ledConfig: {
+              ledEnable: true,
+              ledMode: 1,
+              primary: {
+                h: 100,
+                s: 100,
+                l: 100,
+              },
+              secondary: {
+                h: 120,
+                s: 120,
+                l: 120,
+              },
+              pointer: {
+                h: 255,
+                s: 255,
+                l: 255,
+              },
+            },
+            guiConfig: {
+              guiEnable: true,
+            },
+          })
 
-            this.defaultName = "";
-        } catch (e) {
-            console.error(e);
-        }
-        
-    }
-  }
+        this.profiles = [...this.profiles, res.data]
+
+        this.defaultName = ''
+      } catch (e) {
+        console.error(e)
+      }
+
+    },
+  },
 }
 </script>
\ No newline at end of file
diff --git a/src/components/patterns/QuickPreview.vue b/src/components/patterns/QuickPreview.vue
index 178f943..0b51093 100644
--- a/src/components/patterns/QuickPreview.vue
+++ b/src/components/patterns/QuickPreview.vue
@@ -3,39 +3,44 @@
 </script>
 
 <template>
-<div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
-        <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
-          <div class="self-center w-8 mb-1 opacity-50">
-            <img src="@/assets/gui-ico/ico-midi-logo.svg"/>
-          </div>
-            <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
-          
-          <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
-          <div id="scales" class="flex self-center text-xs py-0"></div>
-          
-          <div v-for="profileConfig in profiles" class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">{{ profileConfig.profileDesc }}</div>
-        </div>
+  <div class="flex self-center bg-cover w-72 h-72 mb-7" style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
+    <div v-if="profiles" class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
+      <div class="self-center w-8 mb-1 opacity-50">
+        <img src="@/assets/gui-ico/ico-midi-logo.svg" />
       </div>
+      <h2 v-for="feedbackConfig in profiles" class="self-center font-pixellg text-5xl ">{{ feedbackConfig.pos }}</h2>
+
+      <div class="self-center font-pixelsm text-md pt-1 pb-2">{{ profiles.name }}</div>
+      <div id="scales" class="flex self-center text-xs py-0"></div>
+
+      <div
+        v-for="profileConfig in profiles"
+        class="self-center text-center text-muted-foreground font-pixelsm text-xs pt-0.5 w-40">
+        {{ profileConfig.profileDesc }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import axios from "axios";
+import axios from 'axios'
+
 export default {
+  name: 'NanoConfig',
   props: ['id'],
-  name: "nanoConfig",
   data() {
     return {
-      profiles: []
-    };
+      profiles: [],
+    }
   },
   async created() {
     try {
-        const res = await axios.get('http://localhost:3001/profiles/5867');
-        this.profiles = res.data;
+      const res = await axios.get('http://localhost:3001/profiles/5867')
+      this.profiles = res.data
     } catch (e) {
-        console.error(e);
+      console.error(e)
     }
-  }
+  },
 }
 
 
@@ -50,7 +55,6 @@ export default {
 //     //....
 
 
-
 // // Quick Preview GUI indicator Render
 // var scale = document.getElementById("scale");
 
@@ -69,7 +73,7 @@ export default {
 //     }
 //   }   
 
-   	
+
 // }
 // });
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 24fd3f4..e3e6130 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,7 @@
 import './assets/main.css'
 
-import {createApp} from 'vue'
-import {createI18n} from 'vue-i18n'
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 
 import en from './lang/en.json'
 
@@ -9,9 +9,9 @@ import App from './App.vue'
 
 // Create VueI18n instance with locales loaded from /lang directory
 const i18n = createI18n({
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: {en: en}
+  locale: 'en',
+  fallbackLocale: 'en',
+  messages: { en: en },
 })
 
 const app = createApp(App)
@@ -19,31 +19,31 @@ const app = createApp(App)
 app.use(i18n)
 app.mount('#app')
 
-var startPos = 0;
-var totalPos = 360;
-var currentPos = 156;
-var minRange = 0;
-var maxRange = 40;
+var startPos = 0
+var totalPos = 360
+var currentPos = 156
+var minRange = 0
+var maxRange = 40
 
-document.addEventListener("DOMContentLoaded", function () {
-    //....
+document.addEventListener('DOMContentLoaded', function() {
+  //....
 
 // Quick Preview GUI indicator Render
-    var scale = document.getElementById("scale");
+  var scale = document.getElementById('scale')
 
-    Number.prototype.map = function (in_min, in_max, out_min, out_max) {
-        return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+  Number.prototype.map = function(in_min, in_max, out_min, out_max) {
+    return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min
+  }
+  var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange))
+
+  for (var i = 0; i < 40; i = i + 1) {
+    scale.innerHTML += '<div class=\'bg-white\'></div>'
+    if (i - 1 < guiCurrentPos) {
+      scale.getElementsByTagName('div')[i].classList.add('active')
+      if (i == guiCurrentPos) {
+        scale.getElementsByTagName('div')[guiCurrentPos].classList.add('current')
+      }
     }
-    var guiCurrentPos = Math.round(currentPos.map(startPos, totalPos, minRange, maxRange));
 
-    for (var i = 0; i < 40; i = i + 1) {
-        scale.innerHTML += "<div class='bg-white'></div>";
-        if (i - 1 < guiCurrentPos) {
-            scale.getElementsByTagName("div")[i].classList.add("active");
-            if (i == guiCurrentPos) {
-                scale.getElementsByTagName("div")[guiCurrentPos].classList.add("current");
-            }
-        }
-
-    }
-});
\ No newline at end of file
+  }
+})
\ No newline at end of file