diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index f8877330d..a649f330a 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -22,8 +22,8 @@ export function Header() {
   );
 
   const rightContent = (
-    <nav className="flex items-center gap-2">
-      <div className="flex items-center gap-4">
+    <nav className="flex items-center gap-1 justify-center">
+      <div className="flex items-center gap-3">
         <Link href="/blog">
           <Button variant="text" className="text-sm p-0">
             Blog
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 8302a19c6..e7c1a0f1e 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -1,8 +1,8 @@
 "use client";
-
 import { Button } from "./ui/button";
 import { Sun, Moon } from "lucide-react";
 import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
 
 interface ThemeToggleProps {
   className?: string;
@@ -10,16 +10,26 @@ interface ThemeToggleProps {
 
 export function ThemeToggle({ className }: ThemeToggleProps) {
   const { theme, setTheme } = useTheme();
+  const [isClient, setIsClient] = useState(false);
 
+  useEffect(() => {
+    setIsClient(true)
+  }, []) // this will see that the client side is rendered or not.
+  
+  // if the client side is rendered then only render the button
   return (
-    <Button
-      size="icon"
-      variant="text"
-      className="h-7"
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-    >
-      <Sun className="!size-[1.1rem]" />
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
-    </Button>
+    <>
+      {
+        isClient && <Button
+          size="icon"
+          variant="text"
+          className="h-7"
+          onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        >
+          {theme === "dark" ? <Sun className="!size-[1.1rem]" /> : <Moon className="!size-[1.1rem]" />}
+          <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+        </Button>
+      } 
+    </>
   );
 }