diff --git a/src/App.vue b/src/App.vue
index 3aca384..e9684f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,7 +28,7 @@ onMounted(() => {
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
         class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <DevicePreview class="basis-1/3 flex-col flex border-solid border-0 border-r" />
+      <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
     </div>
diff --git a/src/assets/icons/ico-cd.svg b/src/assets/icons/iconCoarseDetents.svg
similarity index 100%
rename from src/assets/icons/ico-cd.svg
rename to src/assets/icons/iconCoarseDetents.svg
diff --git a/src/assets/icons/ico-fd.svg b/src/assets/icons/iconFineDetents.svg
similarity index 100%
rename from src/assets/icons/ico-fd.svg
rename to src/assets/icons/iconFineDetents.svg
diff --git a/src/assets/icons/ico-key-d.svg b/src/assets/icons/iconKeyDark.svg
similarity index 100%
rename from src/assets/icons/ico-key-d.svg
rename to src/assets/icons/iconKeyDark.svg
diff --git a/src/assets/icons/ico-key-g.svg b/src/assets/icons/iconKeyGrey.svg
similarity index 100%
rename from src/assets/icons/ico-key-g.svg
rename to src/assets/icons/iconKeyGrey.svg
diff --git a/src/assets/icons/ico-key-o.svg b/src/assets/icons/iconKeyOrange.svg
similarity index 100%
rename from src/assets/icons/ico-key-o.svg
rename to src/assets/icons/iconKeyOrange.svg
diff --git a/src/assets/icons/ico-key.svg b/src/assets/icons/iconKeyWhite.svg
similarity index 100%
rename from src/assets/icons/ico-key.svg
rename to src/assets/icons/iconKeyWhite.svg
diff --git a/src/assets/icons/ico-rc.svg b/src/assets/icons/iconReturnToCenter.svg
similarity index 100%
rename from src/assets/icons/ico-rc.svg
rename to src/assets/icons/iconReturnToCenter.svg
diff --git a/src/assets/icons/ico-vf.svg b/src/assets/icons/iconViscousRotation.svg
similarity index 100%
rename from src/assets/icons/ico-vf.svg
rename to src/assets/icons/iconViscousRotation.svg
diff --git a/src/assets/images/nano_render.png b/src/assets/images/nano_render.png
deleted file mode 100644
index 1f63f39..0000000
Binary files a/src/assets/images/nano_render.png and /dev/null differ
diff --git a/src/assets/images/renderNano.png b/src/assets/images/renderNano.png
new file mode 100644
index 0000000..c7b671a
Binary files /dev/null and b/src/assets/images/renderNano.png differ
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
deleted file mode 100644
index 7565660..0000000
--- a/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
diff --git a/src/assets/icons/ico-midi-logo.svg b/src/assets/logos/logoMidi.svg
similarity index 100%
rename from src/assets/icons/ico-midi-logo.svg
rename to src/assets/logos/logoMidi.svg
diff --git a/src/assets/icons/ico-usb-logo.svg b/src/assets/logos/logoUsb.svg
similarity index 100%
rename from src/assets/icons/ico-usb-logo.svg
rename to src/assets/logos/logoUsb.svg
diff --git a/src/components/config/pages/HapticConfig.vue b/src/components/config/pages/HapticConfig.vue
index 64682c1..c91af60 100644
--- a/src/components/config/pages/HapticConfig.vue
+++ b/src/components/config/pages/HapticConfig.vue
@@ -47,10 +47,10 @@ import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import SteppedSlider from '@/components/config/SteppedSlider.vue'
 import { ref } from 'vue'
-import FdIcon from '@/assets/icons/ico-fd.svg'
-import CdIcon from '@/assets/icons/ico-cd.svg'
-import VfIcon from '@/assets/icons/ico-vf.svg'
-import RcIcon from '@/assets/icons/ico-rc.svg'
+import FdIcon from '@/assets/icons/iconFineDetents.svg'
+import CdIcon from '@/assets/icons/iconCoarseDetents.svg'
+import VfIcon from '@/assets/icons/iconViscousRotation.svg'
+import RcIcon from '@/assets/icons/iconReturnToCenter.svg'
 import FeedbackTypeButton from '@/components/config/FeedbackTypeButton.vue'
 
 const feedbackType = ref('fineDetents') // TODO: replace with actual value
diff --git a/src/components/config/pages/MappingConfig.vue b/src/components/config/pages/MappingConfig.vue
index eb3b663..88f2aa8 100644
--- a/src/components/config/pages/MappingConfig.vue
+++ b/src/components/config/pages/MappingConfig.vue
@@ -140,10 +140,10 @@ import {
 import { Slider } from '@/components/ui/slider/index.js'
 import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, Play, Pause } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-import KeyO from '@/assets/icons/ico-key-o.svg'
-import Key from '@/assets/icons/ico-key.svg'
-import KeyG from '@/assets/icons/ico-key-g.svg'
-import KeyD from '@/assets/icons/ico-key-d.svg'
+import KeyO from '@/assets/icons/iconKeyOrange.svg'
+import Key from '@/assets/icons/iconKeyWhite.svg'
+import KeyG from '@/assets/icons/iconKeyGrey.svg'
+import KeyD from '@/assets/icons/iconKeyDark.svg'
 import { ref } from 'vue'
 import KeySelectButton from '@/components/config/KeySelectButton.vue'
 
diff --git a/src/components/config/pages/ProfileConfig.vue b/src/components/config/pages/ProfileConfig.vue
index c4521c6..04d93a3 100644
--- a/src/components/config/pages/ProfileConfig.vue
+++ b/src/components/config/pages/ProfileConfig.vue
@@ -32,8 +32,8 @@ import { Cable, Replace, Type } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
 import { Separator } from '@/components/ui/separator/index.js'
 import { ref } from 'vue'
-import UsbIcon from '@/assets/icons/ico-usb-logo.svg'
-import MidiIcon from '@/assets/icons/ico-midi-logo.svg'
+import UsbIcon from '@/assets/logos/logoUsb.svg'
+import MidiIcon from '@/assets/logos/logoMidi.svg'
 import ConnectionTypeButton from '@/components/config/ConnectionTypeButton.vue'
 import { Badge } from '@/components/ui/badge'
 import WIP from '@/components/WIP.vue'
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index a516a0e..2da827c 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,31 +1,9 @@
 <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(src/assets/icons/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/icons/ico-midi-logo.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 style="background-image: url(../../assets/images/renderNano.png)">
+    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading text-lg">
+      {{ $t('preview.title') }}
     </div>
   </div>
 </template>
 <script setup>
-import DeviceBar from '@/components/device/DeviceBar.vue'
-import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
 </script>
\ No newline at end of file
diff --git a/src/components/old/DevicePreviewOld.vue b/src/components/old/DevicePreviewOld.vue
new file mode 100644
index 0000000..f7e81ea
--- /dev/null
+++ b/src/components/old/DevicePreviewOld.vue
@@ -0,0 +1,31 @@
+<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/icons/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 '@/components/device/DeviceBar.vue'
+import DeviceBackground from '@/assets/icons/xl-bg-ico.svg'
+</script>
\ No newline at end of file