diff --git a/src/assets/images/renderNano.png b/src/assets/images/renderNano.png
index c7b671a..292b63c 100644
Binary files a/src/assets/images/renderNano.png and b/src/assets/images/renderNano.png differ
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 2da827c..f59be99 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,9 +1,17 @@
 <template>
-  <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 class="aspect-[800/1100]">
+    <div
+      class="bg-contain bg-top bg-no-repeat h-full w-full relative"
+      :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%), url(${RenderNano})`}">
+      <div class="flex px-4 pt-5 pb-3 items-baseline font-heading text-lg">
+        {{ $t('preview.title') }}
+      </div>
+      <div
+        class="rounded-full aspect-square absolute h-[30%] top-[30.5%]  left-0 right-0 mx-auto overflow-hidden"
+        style="background: linear-gradient(45deg, black 30%, #252525 50%, #232323 60%, black)" />
     </div>
   </div>
 </template>
 <script setup>
+import RenderNano from '@/assets/images/renderNano.png'
 </script>
\ No newline at end of file