diff --git a/bun.lockb b/bun.lockb
index f628cf9..9a1fbd5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 9bf39e6..b36bd97 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@next/env": "^14.2.13",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.1",
diff --git a/src/app/(private)/saved-themes/page.tsx b/src/app/(private)/saved-themes/page.tsx
index e004f9b..298d984 100644
--- a/src/app/(private)/saved-themes/page.tsx
+++ b/src/app/(private)/saved-themes/page.tsx
@@ -10,7 +10,7 @@ export default async function SavedThemesPage() {
   auth().protect()
 
   return (
-    <main className="mx-auto p-20">
+    <main className="mx-auto p-4 md:p-20">
       {themes.length === 0 ? (
         <div className="text-center py-8">
           <h2 className="text-2xl font-semibold mb-4">No Saved Themes</h2>
diff --git a/src/app/discover/page.tsx b/src/app/discover/page.tsx
index 80fca5c..5de385a 100644
--- a/src/app/discover/page.tsx
+++ b/src/app/discover/page.tsx
@@ -7,13 +7,15 @@ export default async function DiscoverPage() {
   const themes = await getPublicThemes()
   return (
     <div>
-      <main className="mx-auto">
+      <main className="mx-auto px-3 md:px-0">
         <div className="flex flex-col gap-10 items-center w-full">
           <div className="relative w-full">
             <DotPattern cr={0.3} className="absolute top-0 z-20" />
             <div className="h-[500px] flex flex-col items-center justify-center w-full">
-              <h1 className="text-5xl font-bold mb-4">Discover new themes</h1>
-              <h2 className="text-3xl font-semibold text-muted-foreground">
+              <h1 className="text-2xl md:text-5xl font-bold mb-4">
+                Discover new themes
+              </h1>
+              <h2 className="text-lg md:text-3xl font-semibold text-muted-foreground">
                 made by the community
               </h2>
             </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9c52f8b..aa27783 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -9,7 +9,7 @@ import { auth } from '@clerk/nextjs/server'
 import { dark } from '@clerk/themes'
 
 import { Toaster } from '@/components/ui/toaster'
-import Navigation from '@/components/Navigation'
+import { Navigation } from '@/components/Navigation'
 import { ThemeProvider as ThemeProviderContext } from '@/contexts/ThemeContext'
 
 import { Analytics } from '@vercel/analytics/react'
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e7e1828..7c62499 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,7 +24,7 @@ export default function Home() {
               Visual Studio Code.
             </p>
           </div>
-          <div className="flex items-stretch justify-center gap-10">
+          <div className="flex flex-wrap md:flex-nowrap items-stretch justify-center gap-10">
             <Card className="flex-1">
               <CardHeader>
                 <CardTitle>Discover Themes</CardTitle>
diff --git a/src/components/Discover.tsx b/src/components/Discover.tsx
index f8a09a5..b76cc0e 100644
--- a/src/components/Discover.tsx
+++ b/src/components/Discover.tsx
@@ -14,7 +14,7 @@ export default function Discover({ themes }: { themes: SavedTheme[] }) {
         <ThemePreviewSmall theme={selectedTheme} />
       </div>
 
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-16 p-20">
+      <div className="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-4 gap-16 p-0 md:p-20">
         {themes.map((theme) => (
           <ThemeCardPublic
             key={theme.id}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index cfeb671..10065a3 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,4 +1,8 @@
+'use client'
+
+import * as React from 'react'
 import Link from 'next/link'
+import { usePathname } from 'next/navigation'
 import {
   UserButton,
   SignInButton,
@@ -6,33 +10,167 @@ import {
   SignedIn,
   SignedOut,
 } from '@clerk/nextjs'
-import { Button } from './ui/button'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+import { Menu, X } from 'lucide-react'
+
+const routes = [
+  {
+    href: '/',
+    label: 'VSCode Themes Community',
+  },
+  {
+    href: '/discover',
+    label: 'Discover',
+  },
+  {
+    href: '/generator',
+    label: 'Create',
+  },
+  {
+    href: '/saved-themes',
+    label: 'Your Themes',
+  },
+]
+
+export function Navigation() {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const pathname = usePathname()
 
-const Navigation = () => {
   return (
-    <nav className="bg-background text-foreground p-4 sticky top-0 z-50 shadow-b-xl border-b border-border">
-      <div className="mx-auto flex justify-between items-center">
-        <Link href="/" className="text-xl font-bold">
-          VSCode Themes Community
-        </Link>
-        <div className="flex gap-4 items-center ">
-          <Link href="/discover">Discover</Link>
-          <Link href="/generator">Create</Link>
-          <SignedIn>
-            <Link href="/saved-themes">Your Themes</Link>
-            <UserButton />
-          </SignedIn>
-          <SignedOut>
-            <SignInButton mode="modal">
-              <Button>Sign In</Button>
-            </SignInButton>
-            <SignUpButton mode="modal">
-              <Button variant="secondary">Sign Up</Button>
-            </SignUpButton>
-          </SignedOut>
+    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="p-4">
+        <div className="hidden md:flex h-full justify-between items-center">
+          <Link href="/" className="font-bold">
+            VSCode Themes Community
+          </Link>
+          <div className="flex gap-4 items-center text-base">
+            <Link
+              className={cn(
+                'transition-colors hover:text-foreground/80',
+                pathname === '/discover'
+                  ? 'text-foreground'
+                  : 'text-foreground/60'
+              )}
+              href="/discover"
+            >
+              Discover
+            </Link>
+            <Link
+              className={cn(
+                'transition-colors hover:text-foreground/80',
+                pathname === '/generator'
+                  ? 'text-foreground'
+                  : 'text-foreground/60'
+              )}
+              href="/generator"
+            >
+              Create
+            </Link>
+            <SignedIn>
+              <Link
+                className={cn(
+                  'transition-colors hover:text-foreground/80',
+                  pathname === '/saved-themes'
+                    ? 'text-foreground'
+                    : 'text-foreground/60'
+                )}
+                href="/saved-themes"
+              >
+                Your Themes
+              </Link>
+              <UserButton />
+            </SignedIn>
+            <SignedOut>
+              <SignInButton mode="modal">
+                <Button size="sm">Sign In</Button>
+              </SignInButton>
+              <SignUpButton mode="modal">
+                <Button size="sm" variant="secondary">
+                  Sign Up
+                </Button>
+              </SignUpButton>
+            </SignedOut>
+          </div>
         </div>
+        <Sheet open={isOpen} onOpenChange={setIsOpen}>
+          <SheetTrigger asChild>
+            <Button
+              variant="ghost"
+              className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+            >
+              <Menu className="h-6 w-6" />
+              <span className="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="pr-0">
+            <MobileLink
+              href="/"
+              className="flex items-center"
+              onOpenChange={setIsOpen}
+            >
+              <span className="font-bold">VSCode Themes Community</span>
+            </MobileLink>
+            <div className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+              <div className="flex flex-col space-y-3">
+                <MobileLink href="/discover" onOpenChange={setIsOpen}>
+                  Discover
+                </MobileLink>
+                <MobileLink href="/generator" onOpenChange={setIsOpen}>
+                  Create
+                </MobileLink>
+                <SignedIn>
+                  <MobileLink href="/saved-themes" onOpenChange={setIsOpen}>
+                    Your Themes
+                  </MobileLink>
+                  <UserButton />
+                </SignedIn>
+                <SignedOut>
+                  <SignInButton mode="modal">
+                    <Button size="sm">Sign In</Button>
+                  </SignInButton>
+                  <SignUpButton mode="modal">
+                    <Button size="sm" variant="secondary">
+                      Sign Up
+                    </Button>
+                  </SignUpButton>
+                </SignedOut>
+              </div>
+            </div>
+          </SheetContent>
+        </Sheet>
       </div>
-    </nav>
+    </header>
+  )
+}
+
+interface MobileLinkProps extends React.PropsWithChildren {
+  href: string
+  onOpenChange?: (open: boolean) => void
+  className?: string
+}
+
+function MobileLink({
+  href,
+  onOpenChange,
+  className,
+  children,
+}: MobileLinkProps) {
+  const pathname = usePathname()
+  const isActive = pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={() => onOpenChange?.(false)}
+      className={cn(
+        className,
+        'text-foreground/70 transition-colors hover:text-foreground',
+        isActive && 'text-foreground'
+      )}
+    >
+      {children}
+    </Link>
   )
 }
-export default Navigation
diff --git a/src/components/SavedThemes.tsx b/src/components/SavedThemes.tsx
index e165c5e..4405f34 100644
--- a/src/components/SavedThemes.tsx
+++ b/src/components/SavedThemes.tsx
@@ -26,7 +26,7 @@ export function SavedThemesContent({
       <div className="sticky top-[3.5rem] py-5 z-20 bg-background/70 shadow-sm backdrop-blur backdrop w-full">
         <ThemePreviewSmall theme={selectedTheme} />
       </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-16">
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10 md:gap-16">
         {themes.map((theme) => (
           <ThemeCard
             key={theme.id}
diff --git a/src/components/SyntaxColorList.tsx b/src/components/SyntaxColorList.tsx
index 8a0ac32..ac15363 100644
--- a/src/components/SyntaxColorList.tsx
+++ b/src/components/SyntaxColorList.tsx
@@ -67,7 +67,7 @@ const ColorList: React.FC<ColorListProps> = ({ title, isThemeColors }) => {
           Unlock All
         </Button>
       </div>
-      <div className="grid grid-rows-4 grid-flow-col auto-cols-auto gap-3 w-full">
+      <div className="grid grid-cols-1 md:grid-rows-4 md:grid-flow-col md:auto-cols-auto gap-3 w-full">
         {Object.entries(displayColors).map(([key, value]) => (
           <div
             key={key}
diff --git a/src/components/ThemePreviewSmall.tsx b/src/components/ThemePreviewSmall.tsx
index 7d2f4d9..3061a6a 100644
--- a/src/components/ThemePreviewSmall.tsx
+++ b/src/components/ThemePreviewSmall.tsx
@@ -50,7 +50,7 @@ export default function ThemePreviewSmall({ theme }: { theme: SavedTheme }) {
           style={{ backgroundColor: theme.uiColors.BG1 }}
         >
           <div
-            className="pl-2 py-2 w-1/3 flex flex-col  items-end justify-center"
+            className="pl-2 py-2 w-1/3 flex flex-col  items-end justify-center overflow-hidden"
             style={{ backgroundColor: theme.uiColors.BG1 }}
           >
             <h2
diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx
new file mode 100644
index 0000000..417e7e1
--- /dev/null
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { Cross2Icon } from "@radix-ui/react-icons"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}