diff --git a/src/components/docs-layout.jsx b/src/components/docs-layout.jsx
index 0c5ffc3c..155f21ce 100644
--- a/src/components/docs-layout.jsx
+++ b/src/components/docs-layout.jsx
@@ -45,7 +45,7 @@ export default function DocumentPage({ children, metadata }) {
 			/>
 			<Disclosure
 				as="div"
-				className="sticky top-[84px] z-10 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden"
+				className="sticky top-[84px] z-5 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-xs md:hidden"
 			>
 				<DisclosureButton className="group flex items-center rounded-md px-2 py-1.5 text-white/70 hover:text-white">
 					<ChevronDownIcon className="relative z-20 hidden h-4 w-4 group-data-open:inline" />
diff --git a/src/components/primary-menu.jsx b/src/components/primary-menu.jsx
index cf6efad9..3060dfc4 100644
--- a/src/components/primary-menu.jsx
+++ b/src/components/primary-menu.jsx
@@ -1,105 +1,106 @@
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
+import {
+	Popover,
+	PopoverButton,
+	PopoverPanel,
+	CloseButton,
+} from "@headlessui/react";
 import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
-import { useState, useCallback } from "react";
-import CustomLink from "./link";
+import { forwardRef } from "react";
+import Link from "@/components/link";
+import { classNames } from "@/utils/strings";
 
-export default function PrimaryMenu() {
-	const [isMenuOpen, setIsMenuOpen] = useState(false);
-
-	// Use useCallback to memoize the toggle handler
-	const handleMenuToggle = useCallback(() => {
-		setIsMenuOpen((previous) => !previous);
-	}, []);
-
-	const handleMenuItemClick = useCallback(() => {
-		setIsMenuOpen(false);
-	}, []);
-
-	const navItemClass =
-		"text-gray-200 hover:text-white transition-colors duration-200";
+const navItemClass =
+	"text-gray-400 data-focus:text-purple-500 data-focus:outline rounded-md px-1";
 
+const CustomLink = forwardRef((props, reference) => {
 	return (
-		<nav className="flex items-center gap-8">
-			<div className="hidden items-center gap-8 md:flex">
-				<CustomLink
-					className={navItemClass}
-					noDefaultStyles
-					href="/docs/"
-					activeClassName="text-purple-500"
-				>
-					Docs
-				</CustomLink>
-				<CustomLink
-					className={navItemClass}
-					noDefaultStyles
-					href="/blog/"
-					activeClassName="text-purple-500"
-				>
-					Blog
-				</CustomLink>
-				<CustomLink
-					className={navItemClass}
-					noDefaultStyles
-					href="/showcase/"
-					activeClassName="text-purple-500"
-				>
-					Showcase
-				</CustomLink>
-			</div>
+		<li>
+			<CloseButton as={Link} {...props} ref={reference} noDefaultStyles />
+		</li>
+	);
+});
 
-			<Menu>
-				<MenuButton
+export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
+	return (
+		<nav className={classNames("flex items-center space-x-4", className)}>
+			<ul className="hidden flex-row space-x-4 pl-4 md:flex">
+				<li key="docs" className={navItemClass}>
+					<Link
+						className="block px-1"
+						href="/docs/"
+						noDefaultStyles
+						activeClassName="text-purple-500"
+					>
+						Docs
+					</Link>
+				</li>
+				<li key="blog" className={navItemClass}>
+					<Link
+						className="block px-1"
+						href="/blog/"
+						noDefaultStyles
+						activeClassName="text-purple-500"
+					>
+						Blog
+					</Link>
+				</li>
+				<li key="showcase" className={navItemClass}>
+					<Link
+						className="block px-1"
+						href="/showcase/"
+						noDefaultStyles
+						activeClassName="text-purple-500"
+					>
+						Showcase
+					</Link>
+				</li>
+			</ul>
+			<Popover>
+				<PopoverButton
 					className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
-					onClick={handleMenuToggle}
+					onClick={() => setIsMenuOpen(!isMenuOpen)}
 				>
-					<span className="sr-only">
-						{isMenuOpen ? "Close menu" : "Open menu"}
+					<span className="sr-only hidden group-data-open:block">
+						Open main nav
 					</span>
-					{isMenuOpen ? (
-						<XMarkIcon className="size-6" />
-					) : (
-						<Bars3Icon className="size-6" />
-					)}
-				</MenuButton>
-
-				{isMenuOpen && (
-					<MenuItems
-						static
-						className="absolute top-[84.5px] -left-4 flex w-full flex-col items-center justify-around gap-4 border-b-[.5px] border-gray-400 bg-gray-900/80 py-4 text-lg"
+					<XMarkIcon className="hidden size-6 group-data-open:block" />
+					<span className="sr-only group-data-open:hidden">Open main nav</span>
+					<Bars3Icon className="size-6 group-data-open:hidden" />
+				</PopoverButton>
+				<PopoverPanel
+					as="ul"
+					transition
+					className="container-blur-bg absolute top-[84.5px] right-0 left-0 flex w-full origin-top flex-col items-center justify-around gap-4 border-b-[.5px] border-gray-400 bg-gray-900/80 py-4 text-lg transition duration-200 ease-out focus-within:outline-hidden data-closed:-translate-y-10 data-closed:opacity-0 md:hidden"
+				>
+					<CustomLink
+						key="docs"
+						className={navItemClass}
+						noDefaultStyles
+						href="/docs/"
+						activeClassName="text-purple-500"
+					>
+						Docs
+					</CustomLink>
+					<CustomLink
+						key="blog"
+						className={navItemClass}
+						noDefaultStyles
+						href="/blog/"
+						activeClassName="text-purple-500"
+					>
+						Blog
+					</CustomLink>
+					<CustomLink
+						key="showcase"
+						className={navItemClass}
+						noDefaultStyles
+						href="/showcase/"
+						activeClassName="text-purple-500"
 					>
-						<MenuItem onClick={handleMenuItemClick}>
-							<CustomLink
-								className={navItemClass}
-								noDefaultStyles
-								href="/docs/"
-								activeClassName="text-purple-500"
-							>
-								Docs
-							</CustomLink>
-						</MenuItem>
-						<MenuItem onClick={handleMenuItemClick}>
-							<CustomLink
-								className={navItemClass}
-								noDefaultStyles
-								href="/blog/"
-								activeClassName="text-purple-500"
-							>
-								Blog
-							</CustomLink>
-						</MenuItem>
-						<MenuItem onClick={handleMenuItemClick}>
-							<CustomLink
-								className={navItemClass}
-								noDefaultStyles
-								href="/showcase/"
-								activeClassName="text-purple-500"
-							>
-								Showcase
-							</CustomLink>
-						</MenuItem>
-					</MenuItems>
-				)}
-			</Menu>
+						Showcase
+					</CustomLink>
+				</PopoverPanel>
+			</Popover>
 		</nav>
 	);
 }