diff --git a/packages/website/src/components/Highlight.astro b/packages/website/src/components/Highlight.astro
index e8f0586b..a5e737cf 100644
--- a/packages/website/src/components/Highlight.astro
+++ b/packages/website/src/components/Highlight.astro
@@ -24,6 +24,7 @@
       height: 180vh;
     }
   }
+  
 </style>
 
 <div class="wrapper"></div>
diff --git a/packages/website/src/components/LandingPage.astro b/packages/website/src/components/LandingPage.astro
index a80a43ae..3650741b 100644
--- a/packages/website/src/components/LandingPage.astro
+++ b/packages/website/src/components/LandingPage.astro
@@ -3,6 +3,7 @@ import FeatureCard from './FeatureCard.astro';
 import Section from './Section.astro';
 import Highlight from './Highlight.astro';
 import AstroShowcase from './AstroShowcase.astro';
+import {Content as CodeBlock} from './codeblock.mdx';
 ---
 
 <Highlight />
@@ -12,7 +13,7 @@ import AstroShowcase from './AstroShowcase.astro';
     title="Navigate your errors with ease"
     description="  Sed a porttitor nulla. Nam tempus imperdiet fringilla. Maecenas et velit dui. Integer sit amet libero ut sapien congue volutpat et ut odio. Fusce viverra, nulla sit amet suscipit varius."
   >
-    <img class="block rounded-lg" src="/images/init.png" width="100%" style={{ maxWidth: 'unset' }} />
+  <CodeBlock />
   </FeatureCard>
 </Section>
 
diff --git a/packages/website/src/components/codeblock.mdx b/packages/website/src/components/codeblock.mdx
new file mode 100644
index 00000000..ce7e36d3
--- /dev/null
+++ b/packages/website/src/components/codeblock.mdx
@@ -0,0 +1,8 @@
+---
+title: Setup Codeblock
+---
+
+```js
+import * as Spotlight from '@spotlightjs/core';
+Spotlight.init();
+```