UPD: Styling

src/components/Navbar.vue

@@ -40,6 +40,9 @@
           </MenubarItem>
         </MenubarContent>
       </MenubarMenu>
+      <span class="pl-14 inline-block">STATUS: <b class="font-heading text-lg">CONNECTED</b></span>
+      <span class="text-muted-foreground px-5 inline-block">///</span>
+      <p>SYNCING...</p>
     </Menubar>
   </div>
 </template>

src/components/ProfileManager.vue

@@ -23,7 +23,7 @@
           v-model="filter"
           :placeholder="$t('profiles.filter_placeholder')"
           class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
-        <button class="h-full flex justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-900">
+        <button class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
           <Plus />
         </button>
       </div>

src/components/config/pages/ProfileConfig.vue

@@ -1,33 +1,22 @@
 <template>
-  <TabsContent value="prog-config" class="mt-0">
+  <div class="w-96">
-    <div class="w-96 bg-zinc-900 bg-opacity-40">
-      <ScrollArea class="h-[720px]">
     <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
-          <Tabs default-value="fd">
+      <div class="w-full flex text-muted-foreground">
-            <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
+        <button
-              <TabsTrigger value="fd">
+          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
-                <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
-                  <div class="w-24 size-w mb-2">
-                    <img src="../../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
-                  </div>
           <span
             class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
             }}</span>
+        </button>
+        <button
+          class="hover:bg-zinc-900 grow flex flex-col justify-center items-center py-4">
+          <img class="w-24 size-w mb-2" src="@/assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
+          <span
+            class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.midi')
+            }}</span>
+        </button>
       </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" alt="midi-logo">
-                  </div>
-                  <span class="text-xs leading-3 text-wrap">
-                              {{ $t('config_options.profile_settings.connection_type.midi') }}
-                            </span>
-                </div>
-              </TabsTrigger>
-            </TabsList>
-
-          </Tabs>
     </ConfigSection>
     <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
       <div class="flex flex-col p-8 py-4">
@@ -76,23 +65,18 @@
         <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
       </p>
     </ConfigSection>
-
-
-      </ScrollArea>
-      <Separator />
-
-
   </div>
-  </TabsContent>
 </template>
 <script setup>
-import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Tabs } from '@/components/ui/tabs/index.js'
 import { Label } from '@/components/ui/label/index.js'
 import { Switch } from '@/components/ui/switch/index.js'
-import { Replace, Type, Cable, Power } from 'lucide-vue-next'
+import { Replace, Type, Cable } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Separator } from '@/components/ui/separator/index.js'
+import { ref } from 'vue'
+
+const connectionType = ref('usb')
+
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,