diff --git a/public/browser.png b/public/browser.png
new file mode 100644
index 0000000..d1f0bc8
Binary files /dev/null and b/public/browser.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 55aa50a..c93021f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Features from "@/components/features";
 import Footer from "@/components/footer";
 import Header from "@/components/header";
diff --git a/src/components/header.tsx b/src/components/header.tsx
index a92d809..da6a89f 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -1,5 +1,6 @@
+"use client";
+
 import { ny } from "@/lib/utils";
-import AnimatedGridPattern from "./ui/animated-grid-pattern";
 import AnimatedGradientText from "./ui/animated-gradient-text";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import WordPullUp from "./ui/word-pull-up";
@@ -10,66 +11,69 @@ import { FadeText } from "./ui/fade-text";
 
 export default function Header() {
   return (
-    <div className="w-full relative flex h-screen justify-center flex-col align-center">
-      <GridPattern  
-        numSquares={30}
-        maxOpacity={0.5}
-        height={50}
-        width={50}
-        duration={3}
-        repeatDelay={1}
-        x={-1}
-        y={-1}
-        strokeDasharray="4 2"
-        className={ny(
-            '[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]',
-            'w-full z-0',
-        )}
-      />
-      <div className="z-10 flex mb-10 items-center justify-center">
-        <a href="/download">
-         <AnimatedGradientText>
-            🎉
-            {' '}
-            <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />
-            {' '}
-            <span
-               className={ny(
-            `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
-               )}
-            >
-               Introducing Zen Beta
-            </span>
-            <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
-         </AnimatedGradientText>
-        </a>
+    <>
+      <div className="w-full relative flex h-screen justify-center flex-col align-center">
+        <GridPattern  
+          numSquares={30}
+          maxOpacity={0.5}
+          height={50}
+          width={50}
+          duration={3}
+          repeatDelay={1}
+          x={-1}
+          y={-1}
+          strokeDasharray="4 2"
+          className={ny(
+              '[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]',
+              'w-full z-0',
+          )}
+        />
+        <div className="z-10 flex mb-10 items-center justify-center">
+          <a href="/download">
+          <AnimatedGradientText>
+              🎉
+              {' '}
+              <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />
+              {' '}
+              <span
+                className={ny(
+              `inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
+                )}
+              >
+                Introducing Zen Beta
+              </span>
+              <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
+          </AnimatedGradientText>
+          </a>
+        </div>
+        <WordPullUp
+          className="text-3xl font-bold tracking-[-0.02em] text-black dark:text-white md:text-7xl md:leading-[5rem]"
+          words="Make It Yours"
+        />
+        <BlurIn
+          word="Firefox based browser with a focus on privacy and customization."
+          className="!text-xl text-muted-foreground !font-medium"
+        />
+        <div className="max-w-1/4 mt-10 flex items-center justify-center">
+          <a href="/docs" className="mr-5">
+            <FadeText
+                className="text-md font-medium text-black dark:text-white"
+                direction="up"
+                framerProps={{
+                  show: { transition: { delay: 0.2 } },
+                }}
+                text="Documentation"
+            />
+          </a>
+          <a href="/download">
+            <ShinyButton text="Download now" />
+          </a>
+        </div>
+        <ChevronDown className="absolute bottom-5 left-1/2 size-7 mb-10 animate-bounce" style={{
+          transform: 'translateX(-50%)',
+        }} />
       </div>
-      <WordPullUp
-         className="text-3xl font-bold tracking-[-0.02em] text-black dark:text-white md:text-7xl md:leading-[5rem]"
-         words="Make It Yours"
-      />
-      <BlurIn
-         word="Firefox based browser with a focus on privacy and customization."
-         className="!text-xl text-muted-foreground !font-medium"
-      />
-      <div className="max-w-1/4 mt-10 flex items-center justify-center">
-        <a href="/docs" className="mr-5">
-          <FadeText
-              className="text-md font-medium text-black dark:text-white"
-              direction="up"
-              framerProps={{
-                show: { transition: { delay: 0.2 } },
-              }}
-              text="Documentation"
-          />
-        </a>
-        <a href="/download">
-          <ShinyButton text="Download now" />
-        </a>
-      </div>
-      <ChevronDown className="absolute bottom-5 left-1/2 size-7 mb-10 animate-bounce" style={{
-        transform: 'translateX(-50%)',
-      }} />
-    </div>
+      <img src="/browser.png" className={ny('mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
+    </>
   )
 }