diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx
index 83f3f045..d91ef2b0 100644
--- a/src/components/Popup.tsx
+++ b/src/components/Popup.tsx
@@ -23,52 +23,53 @@ const Popup: React.FC = () => {
       aria-live="assertive"
       className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
     >
-      <Transition
-        show={isOpen}
-        className="flex w-full flex-col items-center space-y-4 sm:items-end"
-        enter="ease-out duration-300"
-        enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-        enterTo="opacity-100 translate-y-0 sm:scale-100"
-        leave="ease-in duration-200"
-        leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-        leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-      >
-        <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-light-400 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in dark:border-dark-300 dark:bg-dark-200 data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0">
-          <div className="p-4">
-            <div className="flex items-start">
-              <div className="flex-shrink-0">
-                <HiOutlineExclamationCircle
-                  aria-hidden="true"
-                  className="h-6 w-6 text-red-400"
-                />
-              </div>
-              <div className="ml-3 w-0 flex-1 pt-0.5">
-                <p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
-                  {popupHeader}
-                </p>
-                <p className="mt-1 text-sm text-neutral-500 dark:text-dark-900">
-                  {popupMessage}
-                </p>
-              </div>
-              <div className="ml-4 flex flex-shrink-0">
-                <button
-                  type="button"
-                  onClick={() => {
-                    hidePopup();
-                  }}
-                  className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-100 dark:hover:bg-dark-400"
-                >
-                  <span className="sr-only">Close</span>
-                  <HiXMark
+      <div className="flex w-full flex-col items-center space-y-4 sm:items-end">
+        <Transition
+          show={isOpen}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          enterTo="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+          leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg border border-light-400 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 transition data-[closed]:data-[enter]:translate-y-2 data-[enter]:transform data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-100 data-[enter]:ease-out data-[leave]:ease-in dark:border-dark-300 dark:bg-dark-200 data-[closed]:data-[enter]:sm:translate-x-2 data-[closed]:data-[enter]:sm:translate-y-0">
+            <div className="p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0">
+                  <HiOutlineExclamationCircle
                     aria-hidden="true"
-                    className="h-5 w-5 text-dark-900"
+                    className="h-6 w-6 text-red-400"
                   />
-                </button>
+                </div>
+                <div className="ml-3 w-0 flex-1 pt-0.5">
+                  <p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">
+                    {popupHeader}
+                  </p>
+                  <p className="mt-1 text-sm text-neutral-500 dark:text-dark-900">
+                    {popupMessage}
+                  </p>
+                </div>
+                <div className="ml-4 flex flex-shrink-0">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      hidePopup();
+                    }}
+                    className="mx-1 inline-flex h-fit items-center rounded-md p-1 px-1 text-sm font-semibold text-dark-50 hover:bg-light-100 dark:hover:bg-dark-400"
+                  >
+                    <span className="sr-only">Close</span>
+                    <HiXMark
+                      aria-hidden="true"
+                      className="h-5 w-5 text-dark-900"
+                    />
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      </Transition>
+        </Transition>
+      </div>
     </div>
   );
 };
diff --git a/src/views/home/components/Header.tsx b/src/views/home/components/Header.tsx
new file mode 100644
index 00000000..a4e8c70a
--- /dev/null
+++ b/src/views/home/components/Header.tsx
@@ -0,0 +1,72 @@
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import Button from "~/components/Button";
+import { twMerge } from "tailwind-merge";
+
+const Header = ({ isLoggedIn }: { isLoggedIn: boolean }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 0);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={twMerge(
+          "z-50 m-auto flex w-full max-w-[1100px] px-4 pt-4",
+          isScrolled && "fixed",
+        )}
+      >
+        <div
+          className={twMerge(
+            "m-auto flex h-[4rem] min-h-[4rem] w-full rounded-3xl border border-transparent px-5 py-2 align-middle transition-colors duration-200",
+            isScrolled &&
+              "rounded-2xl border border-light-300 bg-dark-100 bg-light-50/80 shadow-sm backdrop-blur-[10px] dark:border-dark-300 dark:bg-dark-50/90",
+          )}
+        >
+          <div className="flex w-full items-center justify-between px-2">
+            <div className="my-auto flex items-center justify-between pl-2">
+              <h1 className="w-[200px] text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
+                kan.bn
+              </h1>
+            </div>
+            <div className="flex justify-center gap-10 dark:text-dark-1000">
+              <Link href="/roadmap" className="text-sm font-bold">
+                Roadmap
+              </Link>
+              <Link href="#features" className="text-sm font-bold">
+                Features
+              </Link>
+              <Link href="#pricing" className="text-sm font-bold">
+                Pricing
+              </Link>
+              <Link href="/docs" className="text-sm font-bold">
+                Docs
+              </Link>
+            </div>
+            <div className="flex w-[200px] justify-end gap-2">
+              {isLoggedIn ? (
+                <Button href="/boards">Go to app</Button>
+              ) : (
+                <>
+                  <Button href="/login" variant="ghost">
+                    Sign in
+                  </Button>
+                  <Button href="/signup">Get started</Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+      {isScrolled && <div className="h-[4rem] min-h-[4rem]"></div>}
+    </>
+  );
+};
+
+export default Header;
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx
index 9a7a12d6..fffd5791 100644
--- a/src/views/home/index.tsx
+++ b/src/views/home/index.tsx
@@ -6,7 +6,9 @@ import { IoLogoGithub } from "react-icons/io";
 import Button from "~/components/Button";
 import PatternedBackground from "~/components/PatternedBackground";
 
+import Header from "./components/Header";
 import Pricing from "./components/Pricing";
+
 import { api } from "~/utils/api";
 import { env } from "~/env.mjs";
 
@@ -38,40 +40,7 @@ export default function HomeView() {
       <div className="mx-auto flex h-full min-h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
         <PatternedBackground />
         <div className="z-10 mx-auto h-full w-full max-w-[1100px]">
-          <div className="m-auto flex h-24 min-h-24 w-full items-center justify-between px-5 py-2 align-middle dark:border-dark-400">
-            <div className="my-auto flex items-center justify-between">
-              <h1 className="w-[100px] text-xl font-bold tracking-tight text-neutral-900 dark:text-dark-1000">
-                kan.bn
-              </h1>
-            </div>
-            <div className="flex w-full justify-center gap-10 dark:text-dark-1000">
-              <Link href="/roadmap" className="text-sm font-bold">
-                Roadmap
-              </Link>
-              <Link href="#features" className="text-sm font-bold">
-                Features
-              </Link>
-              <Link href="#pricing" className="text-sm font-bold">
-                Pricing
-              </Link>
-              <Link href="/docs" className="text-sm font-bold">
-                Docs
-              </Link>
-            </div>
-            <div className="flex w-[100px] gap-2">
-              {isLoggedIn ? (
-                <Button href="/boards">Go to app</Button>
-              ) : (
-                <>
-                  <Button href="/login" variant="ghost">
-                    Sign in
-                  </Button>
-                  <Button href="/signup">Get started</Button>
-                </>
-              )}
-            </div>
-          </div>
-
+          <Header isLoggedIn={isLoggedIn} />
           <div className="flex h-full w-full flex-col">
             <div className="w-full py-32">
               <div className="my-10 flex h-full w-full flex-col items-center justify-center ">