diff --git a/components/icons.tsx b/components/icons.tsx
index 6560170..28f8a06 100644
--- a/components/icons.tsx
+++ b/components/icons.tsx
@@ -26,6 +26,7 @@ export const Key = memo(icons.Key, equal);
 export const Link = memo(icons.Link2, equal);
 export const Maximize = memo(icons.Maximize2, equal);
 export const Minimize = memo(icons.Minimize2, equal);
+export const Menu = memo(icons.Menu, equal);
 export const PackagePlus = memo(icons.PackagePlus, equal);
 export const Paintbrush = memo(icons.Paintbrush2, equal);
 export const Rows = memo(icons.Rows, equal);
diff --git a/components/site-header.tsx b/components/site-header.tsx
index 4b1b72c..322a9fd 100644
--- a/components/site-header.tsx
+++ b/components/site-header.tsx
@@ -1,18 +1,29 @@
+import { useCallback } from "react";
 import Link from "next/link";
 
 import { siteConfig } from "@/config/site";
 import { cn } from "@/lib/style";
 import * as icons from "@/components/icons";
+import { Menu } from "@/components/icons";
 import { ThemeToggle } from "@/components/theme-toggle";
 
 type Props = {
   className?: string;
+  isMenuOpen?: boolean;
+  onMenuToggle?: (newValue: boolean) => void;
 };
 
-export function SiteHeader({ className }: Props) {
+export function SiteHeader({ className, isMenuOpen, onMenuToggle }: Props) {
+  const handleMenuToggle = useCallback(() => {
+    onMenuToggle?.(!isMenuOpen);
+  }, [isMenuOpen, onMenuToggle]);
+
   return (
     <header className={cn("flex items-center justify-between px-4", className)}>
       <div className="flex items-baseline gap-x-2.5">
+        <button type="button" className="flex items-center self-center" onClick={handleMenuToggle}>
+          <Menu />
+        </button>
         <Link className="text-lg" href="/">
           {siteConfig.name}
         </Link>