diff --git a/src/renderer/src/components/old/ConfigSelect.vue b/src/renderer/src/components/old/ConfigSelect.vue
deleted file mode 100644
index 3526135..0000000
--- a/src/renderer/src/components/old/ConfigSelect.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <div
-      v-for="(config, index) in config_tabs"
-      :key="config"
-      :data-selected="current_tab===config.id"
-      class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
-      :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
-      @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
-      <div class="w-full">
-        <h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
-          <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
-          <Badge
-            v-if="config.hasOwnProperty('badgeKey')"
-            v-t="config.badgeKey"
-            class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
-        </h1>
-      </div>
-      <ChevronRight v-if="current_tab === config.id" class="float-right" />
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import ScrambleText from '@renderer/components/common/ScrambleText.vue'
-import { Badge } from '@renderer/components/ui/badge'
-import { ChevronRight } from 'lucide-vue-next'
-
-const config_tabs = ref([
-  { id: 'profile_settings' },
-  { id: 'feedback_designer' },
-  { id: 'mapping_configuration' },
-  { id: 'light_designer' },
-  {
-    id: 'gui_designer',
-    disabled: true,
-    badgeKey: 'common.coming_soon',
-  },
-  { id: 'dev_playground' },
-])
-
-const current_tab = defineModel({
-  type: String,
-  default: 'profile_settings',
-})
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/DevPlayground.vue b/src/renderer/src/components/old/DevPlayground.vue
deleted file mode 100644
index 391a50b..0000000
--- a/src/renderer/src/components/old/DevPlayground.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <WIP />
-  <DeviceLEDRing />
-</template>
-<script setup>
-import WIP from '@renderer/components/WIP.vue'
-import DeviceLEDRing from '@renderer/components/device/DeviceLEDRing.vue'
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/DevicePreviewOld.vue b/src/renderer/src/components/old/DevicePreviewOld.vue
deleted file mode 100644
index 6a95bd2..0000000
--- a/src/renderer/src/components/old/DevicePreviewOld.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div>
-    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
-      <span class="text-lg">{{ $t('preview.title') }}</span>
-      &nbsp;
-      <span class="text-zinc-600">(Nano_D++)</span>
-    </div>
-    <div class="flex justify-center">
-      <div
-        class="flex bg-cover mb-6 w-72 aspect-square"
-        style="background-image: url(../../assets/old/xl-bg-ico.svg)">
-        <div class="flex flex-col w-full justify-center m-9 rounded-full overflow-hidden">
-          <div class="self-center w-8 mb-1 opacity-50">
-            <img src="../../assets/logos/logoMidi.svg" alt="midi-logo">
-          </div>
-          <h2 class="self-center font-pixellg text-5xl ">1337</h2>
-          <div class="self-center font-pixelsm text-md pt-1 pb-2">Profile name</div>
-          <DeviceBar class="self-center" />
-          <span
-            class="self-center text-center w-48 font-pixelsm text-xs text-muted-foreground">
-            Profile description will go here! And hopefully it will be a long one! Much longer than this one! Actually, this is probably long enough. I don't think we need to make it any longer...
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import DeviceBar from '@renderer/components/device/DeviceBar.vue'
-import DeviceBackground from '@renderer/assets/old/xl-bg-ico.svg'
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/DragTest.vue b/src/renderer/src/components/old/DragTest.vue
deleted file mode 100644
index 8018295..0000000
--- a/src/renderer/src/components/old/DragTest.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-import draggable from 'vuedraggable'
-import { ref } from 'vue'
-
-const message = [
-  'vue.draggable',
-  'draggable',
-  'component',
-  'for',
-  'vue.js 2.0',
-  'based',
-  'on',
-  'Sortablejs',
-]
-
-const list = ref(
-  message.map((name, index) => {
-    return { name, order: index + 1 }
-  }),
-)
-
-const dragOptions = ref({
-  animation: 200,
-  group: 'description',
-  disabled: false,
-  ghostClass: 'ghost',
-})
-
-const drag = ref(false)
-
-const sort = () => {
-  console.log('here')
-  list.value = list.value.sort((a, b) => a.order - b.order)
-}
-</script>
-
-<template>
-  <div class="row">
-    <div class="col-2 flex">
-      <button class="btn btn-secondary button" @click="sort">
-        To original order
-      </button>
-    </div>
-
-    <div class="col-6 flex-col">
-      <h3>Transition</h3>
-      <transition-group>
-        <draggable
-          key="dragggable"
-          item-key="name"
-          :list="list"
-          v-bind="dragOptions"
-          @start="drag = true"
-          @end="drag = false"
-        >
-          <template #item="{ element }">
-            <li :key="element.name">
-              {{ element.name }}
-            </li>
-          </template>
-        </draggable>
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.button {
-  margin-top: 35px;
-}
-
-.ghost {
-  opacity: 0.5;
-  background: #c8ebfb;
-}
-</style>
diff --git a/src/renderer/src/components/old/HapticConfig.vue b/src/renderer/src/components/old/HapticConfig.vue
deleted file mode 100644
index bc91514..0000000
--- a/src/renderer/src/components/old/HapticConfig.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<template>
-  <ConfigSection
-    :title="$t('config_options.feedback_designer.feedback_type.title')"
-    :icon-component="GaugeCircle">
-    <TabSelect v-model="feedbackType" :options="feedbackTypeOptions" />
-  </ConfigSection>
-  <ConfigSection
-    :title="$t('config_options.feedback_designer.haptic_response.title')"
-    :icon-component="AudioWaveform"
-    :show-toggle="true">
-    <SteppedSlider
-      v-model="feedbackStrength"
-      :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
-    <Separator />
-    <SteppedSlider
-      v-model="bounceBackStrength"
-      :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
-    <Separator />
-    <SteppedSlider
-      v-model="outputRampDampening"
-      :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
-  </ConfigSection>
-  <ConfigSection
-    :title="$t('config_options.feedback_designer.auditory_response.title')"
-    :icon-component="AudioLines" :show-toggle="true">
-    <SteppedSlider
-      v-model="auditoryHapticLevel"
-      :label="$t('config_options.feedback_designer.auditory_response.haptic_level')" />
-    <Separator />
-    <SteppedSlider
-      v-model="auditoryMagnitude"
-      :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
-      :max="3"
-      :named-positions="[
-              {value:0, label: 'Faint'},
-              {value:1, label: 'Soft'},
-              {value:2, label: 'Normal'},
-              {value:3, label: 'Loud'}]" />
-  </ConfigSection>
-</template>
-<script setup>
-import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
-import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import SteppedSlider from '@renderer/components/common/SteppedSlider.vue'
-import { ref } from 'vue'
-import FdIcon from '@renderer/assets/icons/iconFineDetents.svg'
-import CdIcon from '@renderer/assets/icons/iconCoarseDetents.svg'
-import VfIcon from '@renderer/assets/icons/iconViscousRotation.svg'
-import RcIcon from '@renderer/assets/icons/iconReturnToCenter.svg'
-import TabSelect from '@renderer/components/common/TabSelect.vue'
-
-const feedbackType = ref('fineDetents') // TODO: replace with actual value
-
-const feedbackTypeOptions = {
-  fineDetents: {
-    icon: FdIcon,
-    titleKey: 'config_options.feedback_designer.feedback_type.fine_detents',
-  },
-  coarseDetents: {
-    icon: CdIcon,
-    titleKey: 'config_options.feedback_designer.feedback_type.coarse_detents',
-  },
-  viscousRotation: {
-    icon: VfIcon,
-    titleKey: 'config_options.feedback_designer.feedback_type.viscous_rotation',
-  },
-  returnToCenter: {
-    icon: RcIcon,
-    titleKey: 'config_options.feedback_designer.feedback_type.return_to_center',
-  },
-}
-
-const feedbackStrength = ref(2)
-const bounceBackStrength = ref(2)
-const outputRampDampening = ref(2)
-
-const auditoryHapticLevel = ref(2)
-const auditoryMagnitude = ref(2)
-
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/KeySelectButton.vue b/src/renderer/src/components/old/KeySelectButton.vue
deleted file mode 100644
index e1bc06e..0000000
--- a/src/renderer/src/components/old/KeySelectButton.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<template>
-  <button
-    class="flex-1 flex flex-col items-center py-2"
-    :class="{'text-black bg-zinc-200 hover:bg-zinc-100': selected,
-    'hover:bg-zinc-800 text-muted-foreground' : !selected}"
-    @click="$emit('select'); $refs.title.scramble()">
-    <img
-      draggable="false"
-      :src="icon" alt="connection-type-icon"
-      class="w-16 py-2"
-      :class="{'invert': invert && selected}">
-    <ScrambleText ref="title" :resize="false" class="text-xs text-wrap p-1" :text="title" />
-    <span>
-      <ArrowBigUp class="inline-block" />
-      <Badge
-        class="shadow-none text-wrap inline-block p-0.5 mx-1"
-        :class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">Space</Badge>+<Badge
-      class="shadow-none text-wrap inline-block p-0.5 mx-1"
-      :class="{'bg-orange-400': selected, 'bg-zinc-400': !selected}">E</Badge>
-    </span>
-  </button>
-</template>
-<script setup>
-import ScrambleText from '@renderer/components/common/ScrambleText.vue'
-import { Badge } from '@renderer/components/ui/badge'
-import { ArrowBigUp } from 'lucide-vue-next'
-
-defineEmits(['select'])
-
-defineProps({
-  title: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: [String, Object, Function],
-    default: '',
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-  invert: {
-    type: Boolean,
-    default: true,
-  },
-  badge: {
-    type: [String, Object, Function],
-    default: '',
-  },
-})
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/LEDsConfig.vue b/src/renderer/src/components/old/LEDsConfig.vue
deleted file mode 100644
index c050fca..0000000
--- a/src/renderer/src/components/old/LEDsConfig.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <ConfigSection
-    title="Ring Lights" :icon-component="Lightbulb"
-    :show-toggle="true">
-    <h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
-    <div class="px-6 py-2">
-      <Slider v-model="brightnessSliderModel" max="100" class="h-10" />
-    </div>
-  </ConfigSection>
-  <ConfigSection
-    title="Key Lights" :icon-component="Lightbulb"
-    :show-toggle="true">
-    <h2 class="p-6 inline-block">{{ $t('config_options.light_designer.led_mode') }}</h2> [TODO]
-    <div class="px-6 py-2">
-      <Slider v-model="brightnessSliderModel" max="100" class="h-10" />
-    </div>
-  </ConfigSection>
-  <ConfigSection title="Ring Colors" :icon-component="Circle">
-    <PaletteInput v-model="ringColors" />
-  </ConfigSection>
-  <ConfigSection title="Key Colors" :icon-component="PanelBottom">
-    <PaletteInput v-model="keyColors" />
-  </ConfigSection>
-  <ConfigSection title="Key Colors (Pressed)" :icon-component="PanelBottomClose">
-    <PaletteInput v-model="keyColors" />
-  </ConfigSection>
-</template>
-<script setup>
-import { Lightbulb, PanelBottomClose, Circle, PanelBottom } from 'lucide-vue-next'
-import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import PaletteInput from '@renderer/components/common/PaletteInput.vue'
-import Color from 'color'
-import { computed, ref } from 'vue'
-import { useStore } from '@renderer/store'
-import { Slider } from '@renderer/components/ui/slider'
-
-const store = useStore()
-
-const ledConfig = computed(() => store.selectedProfile.ledConfig)
-
-const brightnessSliderModel = computed({
-  get: () => [ledConfig.value.ledBrightness],
-  set: (val) => ledConfig.value.ledBrightness = val[0],
-})
-
-const ringColors = ref({
-  primary: {
-    key: 'config_options.light_designer.primary_color',
-    color: computed({
-      get: () => Color(ledConfig.value.primary),
-      set: (color) => [ledConfig.value.primary.h, ledConfig.value.primary.s, ledConfig.value.primary.v] = color.hsv().color,
-    }),
-  },
-  secondary: {
-    key: 'config_options.light_designer.secondary_color',
-    color: computed({
-      get: () => Color(ledConfig.value.secondary),
-      set: (color) => [ledConfig.value.secondary.h, ledConfig.value.secondary.s, ledConfig.value.secondary.v] = color.hsv().color,
-    }),
-  },
-  pointer: {
-    key: 'config_options.light_designer.pointer_color',
-    color: computed({
-      get: () => Color(ledConfig.value.pointer),
-      set: (color) => [ledConfig.value.pointer.h, ledConfig.value.pointer.s, ledConfig.value.pointer.v] = color.hsv().color,
-    }),
-  },
-})
-
-const keyColors = ref({
-  a: {
-    key: 'a',
-    color: Color('#ff2a7d'),
-  },
-  b: {
-    key: 'b',
-    color: Color('#f32a9c'),
-  },
-  c: {
-    key: 'c',
-    color: Color('#d12ab1'),
-  },
-  d: {
-    key: 'd',
-    color: Color('#a92ac3'),
-  },
-})
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/MappingConfig.vue b/src/renderer/src/components/old/MappingConfig.vue
deleted file mode 100644
index 0df6aa8..0000000
--- a/src/renderer/src/components/old/MappingConfig.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<template>
-  <ConfigSection title="Map some stuff idk" :icon-component="Keyboard">
-    <div v-if="false" class="flex font-heading">
-      <KeySelectButton
-        v-for="(option, key) in keySelectOptions" :key="key" :title="$t(option.titleKey)"
-        :invert="option.invert" :badge="option.badge"
-        :icon="option.icon" :selected="selectedKey===key" @select="selectedKey=key" />
-    </div>
-    <Separator />
-    <Command>
-
-      <CommandList>
-        <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
-
-        </CommandEmpty>
-        <CommandInput
-          :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
-        <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 />
-  </ConfigSection>
-</template>
-<script setup>
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList, CommandSeparator,
-} from '@renderer/components/ui/command'
-import { KeyboardMusic, Squircle, Keyboard } from 'lucide-vue-next'
-import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import KeyO from '@renderer/assets/icons/iconKeyOrange.svg'
-import Key from '@renderer/assets/icons/iconKeyWhite.svg'
-import KeyG from '@renderer/assets/icons/iconKeyGrey.svg'
-import KeyD from '@renderer/assets/icons/iconKeyDark.svg'
-import { ref } from 'vue'
-import KeySelectButton from '@renderer/components/old/KeySelectButton.vue'
-
-const selectedKey = ref('a') // TODO: replace with actual value
-
-const keySelectOptions = {
-  a: {
-    icon: KeyO,
-    titleKey: 'config_options.mapping_configuration.key_mapping.switch.a',
-    invert: false,
-  },
-  b: {
-    icon: Key,
-    titleKey: 'config_options.mapping_configuration.key_mapping.switch.b',
-    invert: true,
-  },
-  c: {
-    icon: KeyG,
-    titleKey: 'config_options.mapping_configuration.key_mapping.switch.c',
-    invert: true,
-  },
-  d: {
-    icon: KeyD,
-    titleKey: 'config_options.mapping_configuration.key_mapping.switch.d',
-    invert: true,
-  },
-}
-</script>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/SchemaTest.vue b/src/renderer/src/components/old/SchemaTest.vue
deleted file mode 100644
index 03e8a95..0000000
--- a/src/renderer/src/components/old/SchemaTest.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<script setup>
-import schema from '@renderer/data/profileSchema.json'
-import axios from 'axios'
-import { inject, ref } from 'vue'
-
-const ajv = inject('ajv')
-
-const message = ref('Waiting...')
-
-try {
-  const res = await axios.get('http://localhost:3001/profiles/5867')
-  const profiles = res.data
-  console.log(profiles)
-  const validate = ajv.compile(schema)
-  const valid = validate(profiles)
-  if (!valid) {
-    message.value = 'Invalid!'
-    console.log(validate.errors)
-  } else {
-    message.value = 'Valid!'
-    console.log('valid!!!!!!!!!!!!!!!1111elf')
-  }
-} catch (e) {
-  console.error(e)
-}
-</script>
-
-<template>
-  {{ message }}
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/renderer/src/components/old/VerticalConfigSelect.vue b/src/renderer/src/components/old/VerticalConfigSelect.vue
deleted file mode 100644
index 488895d..0000000
--- a/src/renderer/src/components/old/VerticalConfigSelect.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
-  <div>
-    <div
-      v-for="(config, index) in config_tabs"
-      :key="config"
-      :data-selected="current_tab===config.id"
-      class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
-      :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
-      @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
-      <div class="w-full">
-        <h1 class="text-lg text-nowrap" :class="{'text-muted-foreground': config.disabled}">
-          <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
-          <Badge
-            v-if="config.hasOwnProperty('badgeKey')"
-            v-t="config.badgeKey"
-            class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
-        </h1>
-        <p class="text-xs" :class="current_tab===config.id?'text-black' : 'text-muted-foreground'">
-          {{ $t(`config_options.${config.id}.subtitle`) }}
-        </p>
-      </div>
-      <ChevronRight v-if="current_tab === config.id" class="float-right" />
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue'
-import ScrambleText from '@renderer/components/common/ScrambleText.vue'
-import { Badge } from '@renderer/components/ui/badge'
-import { ChevronRight } from 'lucide-vue-next'
-
-const config_tabs = ref([
-  { id: 'profile_settings' },
-  { id: 'feedback_designer' },
-  { id: 'mapping_configuration' },
-  { id: 'light_designer' },
-  {
-    id: 'gui_designer',
-    disabled: true,
-    badgeKey: 'common.coming_soon',
-  },
-  { id: 'dev_playground' },
-])
-
-const current_tab = defineModel({
-  type: String,
-  default: 'profile_settings',
-})
-</script>
\ No newline at end of file