diff --git a/website/public/images/screenshot-placeholder.svg b/website/public/images/screenshot-placeholder.svg
deleted file mode 100644
index 5cfc385..0000000
--- a/website/public/images/screenshot-placeholder.svg
+++ /dev/null
@@ -1,31 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="800" viewBox="0 0 1280 800">
-  <rect width="1280" height="800" rx="12" fill="#18181b"/>
-  <rect x="1" y="1" width="1278" height="798" rx="11" fill="none" stroke="#3f3f46" stroke-width="2"/>
-  <!-- Title bar -->
-  <rect x="1" y="1" width="1278" height="40" rx="11" fill="#27272a"/>
-  <rect x="1" y="30" width="1278" height="11" fill="#27272a"/>
-  <circle cx="24" cy="21" r="6" fill="#ef4444" opacity="0.7"/>
-  <circle cx="44" cy="21" r="6" fill="#eab308" opacity="0.7"/>
-  <circle cx="64" cy="21" r="6" fill="#22c55e" opacity="0.7"/>
-  <text x="640" y="25" text-anchor="middle" fill="#a1a1aa" font-family="system-ui" font-size="13">Aryx — Your Screenshot Here</text>
-  <!-- Sidebar -->
-  <rect x="1" y="41" width="260" height="758" fill="#09090b"/>
-  <line x1="261" y1="41" x2="261" y2="799" stroke="#3f3f46" stroke-width="1"/>
-  <!-- Sidebar items -->
-  <rect x="16" y="60" width="230" height="32" rx="6" fill="#27272a"/>
-  <rect x="16" y="100" width="230" height="32" rx="6" fill="#18181b"/>
-  <rect x="16" y="140" width="230" height="32" rx="6" fill="#18181b"/>
-  <!-- Main content area -->
-  <rect x="280" y="60" width="700" height="24" rx="4" fill="#27272a"/>
-  <rect x="280" y="100" width="500" height="16" rx="4" fill="#27272a" opacity="0.5"/>
-  <rect x="280" y="140" width="680" height="120" rx="8" fill="#27272a" opacity="0.3"/>
-  <rect x="280" y="280" width="600" height="16" rx="4" fill="#27272a" opacity="0.5"/>
-  <rect x="280" y="310" width="660" height="120" rx="8" fill="#27272a" opacity="0.3"/>
-  <!-- Activity panel -->
-  <line x1="1000" y1="41" x2="1000" y2="799" stroke="#3f3f46" stroke-width="1"/>
-  <rect x="1016" y="60" width="248" height="24" rx="4" fill="#27272a"/>
-  <rect x="1016" y="100" width="248" height="80" rx="6" fill="#27272a" opacity="0.3"/>
-  <rect x="1016" y="196" width="248" height="80" rx="6" fill="#27272a" opacity="0.3"/>
-  <!-- Center text -->
-  <text x="640" y="500" text-anchor="middle" fill="#71717a" font-family="system-ui" font-size="16">Replace with actual screenshot: website/public/images/screenshot.png</text>
-</svg>
diff --git a/website/public/images/screenshot.png b/website/public/images/screenshot.png
new file mode 100644
index 0000000..6fb5df7
Binary files /dev/null and b/website/public/images/screenshot.png differ
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 60fac6a..a3c6c2d 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -61,7 +61,7 @@ import Base from '../layouts/Base.astro';
         <div class="relative rounded-2xl border border-zinc-800 bg-zinc-900/50 p-2 shadow-2xl shadow-black/40 ring-1 ring-white/5">
           <div class="overflow-hidden rounded-xl">
             <img
-              src="/images/screenshot-placeholder.svg"
+              src="/images/screenshot.png"
               alt="Aryx application screenshot showing the workspace with chat, sidebar, and activity panel"
               class="w-full"
               width="1280"