diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 03d2630..d830c29 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,7 +33,8 @@ import { ThemeProvider } from "@/components/ThemeProvider";
 import { CompareProvider } from "@/context/CompareContext";
 import CompareBar from "@/components/CompareBar";
 import MouseAnimation from "@/components/MouseAnimation";
-import HeaderWrapper from "@/components/HeaderWrapper";
+import HeaderClient from "@/components/HeaderClient";
+// import HeaderWrapper from "@/components/HeaderWrapper";
 
 export default function RootLayout({
   children,
@@ -60,7 +61,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <CompareProvider>
-            <HeaderWrapper />
+            <HeaderClient />
             {children}
             <CompareBar />
             {/* <MouseAnimation /> */}
diff --git a/src/components/HeaderClient.tsx b/src/components/HeaderClient.tsx
new file mode 100644
index 0000000..03bbf0e
--- /dev/null
+++ b/src/components/HeaderClient.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const Header = dynamic(() => import("./Header"), {
+  ssr: false,
+});
+
+export default function HeaderClient() {
+  return <Header />;
+}
diff --git a/src/components/HeaderWrapper.tsx b/src/components/HeaderWrapper.tsx
deleted file mode 100644
index 030e431..0000000
--- a/src/components/HeaderWrapper.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-import Header from "./Header";
-
-export default function HeaderWrapper() {
-    const [mounted, setMounted] = useState(false);
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) return null;
-
-    return <Header />;
-}