diff --git a/src/components/mobile-sidebar.tsx b/src/components/mobile-sidebar.tsx
new file mode 100644
index 0000000..c033d27
--- /dev/null
+++ b/src/components/mobile-sidebar.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Sidebar } from "./sidebar";
+import { Button } from "./ui/button";
+import { MenuIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
+
+export const MobileSidebar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  return (
+    <Sheet modal={false} open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="secondary" className="lg:hidden">
+          <MenuIcon className="size-4" />
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="p-0">
+        <Sidebar />
+      </SheetContent>
+    </Sheet>
+  );
+};