diff --git a/src/components/config/HapticConfig.vue b/src/components/config/HapticConfig.vue
index 577b525..75fc1dd 100644
--- a/src/components/config/HapticConfig.vue
+++ b/src/components/config/HapticConfig.vue
@@ -203,15 +203,11 @@
     </div>
   </TabsContent>
 </template>
-<script>
+<script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
 import { Slider } from '@/components/ui/slider/index.js'
-
-export default {
-  name: 'HapticConfig',
-  components: { Slider, Tabs, ScrollArea },
-}
+import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,
diff --git a/src/components/config/LEDsConfig.vue b/src/components/config/LEDsConfig.vue
index 37af787..0a6fcf9 100644
--- a/src/components/config/LEDsConfig.vue
+++ b/src/components/config/LEDsConfig.vue
@@ -182,10 +182,11 @@
     </div>
   </TabsContent>
 </template>
-<script>
-export default {
-  name: 'LEDsConfig',
-}
+<script setup>
+import { ScrollArea } from '@/components/ui/scroll-area/index.js'
+import { Tabs } from '@/components/ui/tabs/index.js'
+import { Slider } from '@/components/ui/slider/index.js'
+import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,
diff --git a/src/components/config/MappingConfig.vue b/src/components/config/MappingConfig.vue
index 6d05e92..d62b3a1 100644
--- a/src/components/config/MappingConfig.vue
+++ b/src/components/config/MappingConfig.vue
@@ -247,7 +247,7 @@
     </div>
   </TabsContent>
 </template>
-<script>
+<script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Badge } from '@/components/ui/badge/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
@@ -260,11 +260,7 @@ import {
   CommandList, CommandSeparator,
 } from '@/components/ui/command/index.js'
 import { Slider } from '@/components/ui/slider/index.js'
-
-export default {
-  name: 'MappingConfig',
-  components: { Slider, CommandSeparator, CommandGroup, CommandItem, CommandInput, CommandEmpty, CommandList, Command, Tabs, Badge, ScrollArea },
-}
+import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, AudioLines, Power } from 'lucide-vue-next'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,
diff --git a/src/components/config/ProgramConfig.vue b/src/components/config/ProgramConfig.vue
index 6c472d5..dd15e20 100644
--- a/src/components/config/ProgramConfig.vue
+++ b/src/components/config/ProgramConfig.vue
@@ -22,7 +22,7 @@
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.program_settings.connection_type.usb')
-                    }}</span>
+                  }}</span>
               </div>
             </TabsTrigger>
             <TabsTrigger value="cd">
@@ -83,7 +83,7 @@
             <Label
               for="airplane-mode"
               class="text-xs text-muted-foreground">{{
-              $t('config_options.program_settings.profile_properties.show_description')
+                $t('config_options.program_settings.profile_properties.show_description')
               }}</Label>
           </div>
         </div>
@@ -110,7 +110,7 @@
           {{ $t('config_options.program_settings.internal_profile_toggle.subtitle') }}
           <Separator class="mt-4" />
           <span class="space-y-4">{{ $t('config_options.program_settings.internal_profile_toggle.operation')
-              }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
+            }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
               class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
           <Separator class="my-4" />
           <span>{{ $t('config_options.program_settings.internal_profile_toggle.warning') }}</span>
@@ -124,10 +124,12 @@
     </div>
   </TabsContent>
 </template>
-<script>
-export default {
-  name: 'ProgramConfig',
-}
+<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'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,