diff --git a/components/dashboard/UtilityBar.tsx b/components/dashboard/ContentHeader.tsx
similarity index 70%
rename from components/dashboard/UtilityBar.tsx
rename to components/dashboard/ContentHeader.tsx
index d304451..26ba486 100644
--- a/components/dashboard/UtilityBar.tsx
+++ b/components/dashboard/ContentHeader.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import Link from 'next/link'
-import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp } from '@ciphera-net/ui'
+import { ThemeToggle, AppLauncher, UserMenu, type CipheraApp, MenuIcon } from '@ciphera-net/ui'
 import { useAuth } from '@/lib/auth/context'
 import { useSettingsModal } from '@/lib/settings-modal-context'
 import { getUserOrganizations, switchContext, type OrganizationMember } from '@/lib/api/organization'
@@ -38,7 +38,11 @@ const CIPHERA_APPS: CipheraApp[] = [
   },
 ]
 
-export default function UtilityBar() {
+export default function ContentHeader({
+  onMobileMenuOpen,
+}: {
+  onMobileMenuOpen: () => void
+}) {
   const auth = useAuth()
   const router = useRouter()
   const { openSettings } = useSettingsModal()
@@ -48,7 +52,7 @@ export default function UtilityBar() {
     if (auth.user) {
       getUserOrganizations()
         .then((organizations) => setOrgs(Array.isArray(organizations) ? organizations : []))
-        .catch(err => logger.error('Failed to fetch orgs for utility bar', err))
+        .catch(err => logger.error('Failed to fetch orgs', err))
     }
   }, [auth.user])
 
@@ -65,33 +69,22 @@ export default function UtilityBar() {
   }
 
   return (
-    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-8 py-3.5">
-      {/* Left: Pulse logo */}
+    <div className="shrink-0 flex items-center justify-between border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 px-4 sm:px-6 py-3.5">
+      {/* Left: mobile hamburger */}
       <div className="flex items-center gap-3">
-        <Link
-          href="/"
-          className="flex items-center gap-3 group relative"
+        <button
+          onClick={onMobileMenuOpen}
+          className="md:hidden p-2 -ml-2 text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"
+          aria-label="Open navigation"
         >
-          <div className="relative w-10 h-10 sm:w-11 sm:h-11 flex items-center justify-center shrink-0">
-            <img
-              src="/pulse_icon_no_margins.png"
-              alt="Pulse Logo"
-              className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300 transform-gpu will-change-transform [backface-visibility:hidden]"
-            />
-          </div>
-          <span className="text-xl sm:text-2xl font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-colors duration-300">
-            Pulse
-          </span>
-        </Link>
+          <MenuIcon className="w-5 h-5" />
+        </button>
       </div>
 
       {/* Right: actions */}
       <div className="flex items-center gap-3">
         <ThemeToggle />
-        <AppLauncher
-          apps={CIPHERA_APPS}
-          currentAppId="pulse"
-        />
+        <AppLauncher apps={CIPHERA_APPS} currentAppId="pulse" />
         <NotificationCenter />
         <UserMenu
           auth={auth}
diff --git a/components/dashboard/DashboardShell.tsx b/components/dashboard/DashboardShell.tsx
index a50b048..2e099f5 100644
--- a/components/dashboard/DashboardShell.tsx
+++ b/components/dashboard/DashboardShell.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import PulseSidebar from './Sidebar'
-import UtilityBar from './UtilityBar'
+import { useState, useCallback } from 'react'
+import Sidebar from './Sidebar'
+import ContentHeader from './ContentHeader'
 
 export default function DashboardShell({
   siteId,
@@ -10,12 +11,21 @@ export default function DashboardShell({
   siteId: string
   children: React.ReactNode
 }) {
+  const [mobileOpen, setMobileOpen] = useState(false)
+  const closeMobile = useCallback(() => setMobileOpen(false), [])
+  const openMobile = useCallback(() => setMobileOpen(true), [])
+
   return (
-    <div className="flex flex-col h-screen overflow-hidden">
-      <UtilityBar />
-      <div className="flex flex-1 overflow-hidden">
-        <PulseSidebar siteId={siteId} />
-        <main className="flex-1 min-w-0 overflow-y-auto">
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        siteId={siteId}
+        mobileOpen={mobileOpen}
+        onMobileClose={closeMobile}
+        onMobileOpen={openMobile}
+      />
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        <ContentHeader onMobileMenuOpen={openMobile} />
+        <main className="flex-1 overflow-y-auto">
           {children}
         </main>
       </div>
diff --git a/components/dashboard/Sidebar.tsx b/components/dashboard/Sidebar.tsx
index cf6bed2..84acc61 100644
--- a/components/dashboard/Sidebar.tsx
+++ b/components/dashboard/Sidebar.tsx
@@ -1,17 +1,10 @@
 'use client'
 
-import { useState, useEffect, useRef } from 'react'
+import { useState, useEffect, useRef, useCallback } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
-import { motion } from 'framer-motion'
 import { listSites, type Site } from '@/lib/api/sites'
 import { useAuth } from '@/lib/auth/context'
-import {
-  Sidebar as SidebarPrimitive,
-  SidebarBody,
-  SidebarLink,
-  useSidebar,
-} from '@/components/ui/sidebar'
 import {
   LayoutDashboardIcon,
   PathIcon,
@@ -21,14 +14,22 @@ import {
   CloudUploadIcon,
   HeartbeatIcon,
   SettingsIcon,
+  CollapseLeftIcon,
+  CollapseRightIcon,
   ChevronUpDownIcon,
   PlusIcon,
+  XIcon,
+  MenuIcon,
 } from '@ciphera-net/ui'
 
+const SIDEBAR_KEY = 'pulse_sidebar_collapsed'
+
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'
+
 interface NavItem {
   label: string
   href: (siteId: string) => string
-  icon: React.ComponentType<{ className?: string; weight?: 'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' }>
+  icon: React.ComponentType<{ className?: string; weight?: IconWeight }>
   matchPrefix?: boolean
 }
 
@@ -64,61 +65,72 @@ const SETTINGS_ITEM: NavItem = {
   matchPrefix: true,
 }
 
-function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
-  const { open: sidebarOpen } = useSidebar()
+// ─── Site Picker ────────────────────────────────────────────
+
+function SitePicker({
+  sites,
+  siteId,
+  collapsed,
+}: {
+  sites: Site[]
+  siteId: string
+  collapsed: boolean
+}) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const ref = useRef<HTMLDivElement>(null)
   const pathname = usePathname()
   const router = useRouter()
-
   const currentSite = sites.find((s) => s.id === siteId)
+  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
 
   useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
+    const handler = (e: MouseEvent) => {
       if (ref.current && !ref.current.contains(e.target as Node)) {
         setOpen(false)
         setSearch('')
       }
     }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
   }, [])
 
+  const switchSite = (id: string) => {
+    router.push(`/sites/${id}${pathname.replace(/^\/sites\/[^/]+/, '')}`)
+    setOpen(false)
+    setSearch('')
+  }
+
   const filtered = sites.filter(
     (s) =>
       s.name.toLowerCase().includes(search.toLowerCase()) ||
       s.domain.toLowerCase().includes(search.toLowerCase())
   )
 
-  const switchSite = (id: string) => {
-    const currentPageType = pathname.replace(/^\/sites\/[^/]+/, '')
-    router.push(`/sites/${id}${currentPageType}`)
-    setOpen(false)
-    setSearch('')
-  }
-
-  const initial = currentSite?.name?.charAt(0)?.toUpperCase() || '?'
-
   return (
-    <div className="relative mb-4" ref={ref}>
+    <div className="relative px-3 mb-4" ref={ref}>
       <button
         onClick={() => setOpen(!open)}
-        className="w-full flex items-center gap-2.5 rounded-lg px-1 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-white/10 dark:hover:bg-white/5"
+        className={`w-full flex items-center gap-2.5 rounded-lg px-2 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 ${
+          collapsed ? 'justify-center' : ''
+        }`}
+        title={collapsed ? currentSite?.name || 'Select site' : undefined}
       >
         <span className="w-7 h-7 rounded-md bg-brand-orange/10 text-brand-orange flex items-center justify-center text-xs font-bold shrink-0">
           {initial}
         </span>
-        {sidebarOpen && (
-          <>
-            <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
-            <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
-          </>
-        )}
+        <span
+          className={`flex items-center gap-1 min-w-0 flex-1 overflow-hidden transition-opacity duration-150 ${
+            collapsed ? 'opacity-0 w-0' : 'opacity-100'
+          }`}
+        >
+          <span className="truncate flex-1 text-left">{currentSite?.name || 'Select site'}</span>
+          <ChevronUpDownIcon className="w-4 h-4 text-neutral-400 shrink-0" />
+        </span>
       </button>
 
       {open && (
-        <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
+        <div className="absolute left-3 right-3 top-full mt-1 z-50 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-xl overflow-hidden min-w-[220px]">
           <div className="p-2">
             <input
               type="text"
@@ -169,110 +181,225 @@ function SitePicker({ sites, siteId }: { sites: Site[]; siteId: string }) {
   )
 }
 
-function SidebarContent({ siteId }: { siteId: string }) {
-  const { user } = useAuth()
-  const { open } = useSidebar()
+// ─── Nav Item ───────────────────────────────────────────────
+
+function NavLink({
+  item,
+  siteId,
+  collapsed,
+  onClick,
+}: {
+  item: NavItem
+  siteId: string
+  collapsed: boolean
+  onClick?: () => void
+}) {
   const pathname = usePathname()
+  const href = item.href(siteId)
+  const active = item.matchPrefix ? pathname.startsWith(href) : pathname === href
+
+  return (
+    <Link
+      href={href}
+      onClick={onClick}
+      title={collapsed ? item.label : undefined}
+      className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium ${
+        collapsed ? 'justify-center' : ''
+      } ${
+        active
+          ? 'bg-brand-orange/10 text-brand-orange'
+          : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+      }`}
+    >
+      <item.icon className="w-[18px] h-[18px] shrink-0" weight={active ? 'fill' : 'regular'} />
+      <span
+        className={`whitespace-nowrap overflow-hidden transition-opacity duration-150 ${
+          collapsed ? 'opacity-0 w-0' : 'opacity-100'
+        }`}
+      >
+        {item.label}
+      </span>
+    </Link>
+  )
+}
+
+// ─── Main Sidebar ───────────────────────────────────────────
+
+export default function Sidebar({
+  siteId,
+  mobileOpen,
+  onMobileClose,
+  onMobileOpen,
+}: {
+  siteId: string
+  mobileOpen: boolean
+  onMobileClose: () => void
+  onMobileOpen: () => void
+}) {
+  const { user } = useAuth()
   const canEdit = user?.role === 'owner' || user?.role === 'admin'
+  const pathname = usePathname()
   const [sites, setSites] = useState<Site[]>([])
+  const [collapsed, setCollapsed] = useState(() => {
+    if (typeof window === 'undefined') return false
+    return localStorage.getItem(SIDEBAR_KEY) === 'true'
+  })
 
   useEffect(() => {
     listSites().then(setSites).catch(() => {})
   }, [])
 
-  const isActive = (item: NavItem) => {
-    const href = item.href(siteId)
-    return item.matchPrefix ? pathname.startsWith(href) : pathname === href
+  // Close mobile on navigation
+  useEffect(() => {
+    onMobileClose()
+  }, [pathname, onMobileClose])
+
+  // Keyboard shortcut: [ to toggle
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === '[' && !e.metaKey && !e.ctrlKey && !e.altKey) {
+        const tag = (e.target as HTMLElement)?.tagName
+        if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return
+        e.preventDefault()
+        toggle()
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [collapsed])
+
+  const toggle = useCallback(() => {
+    setCollapsed((prev) => {
+      const next = !prev
+      localStorage.setItem(SIDEBAR_KEY, String(next))
+      return next
+    })
+  }, [])
+
+  const sidebarContent = (isMobile: boolean) => {
+    const isCollapsed = isMobile ? false : collapsed
+
+    return (
+      <div className="flex flex-col h-full overflow-x-hidden">
+        {/* Logo */}
+        <Link
+          href="/"
+          className={`flex items-center gap-3 px-5 py-5 shrink-0 group ${isCollapsed ? 'justify-center px-0' : ''}`}
+        >
+          <img
+            src="/pulse_icon_no_margins.png"
+            alt="Pulse"
+            className="w-8 h-8 shrink-0 object-contain group-hover:scale-105 transition-transform duration-200"
+          />
+          <span
+            className={`text-lg font-bold text-neutral-900 dark:text-white tracking-tight group-hover:text-brand-orange transition-all duration-150 whitespace-nowrap overflow-hidden ${
+              isCollapsed ? 'opacity-0 w-0' : 'opacity-100'
+            }`}
+          >
+            Pulse
+          </span>
+        </Link>
+
+        {/* Site Picker */}
+        <SitePicker sites={sites} siteId={siteId} collapsed={isCollapsed} />
+
+        {/* Nav Groups */}
+        <nav className="flex-1 overflow-y-auto overflow-x-hidden px-3 space-y-4">
+          {NAV_GROUPS.map((group) => (
+            <div key={group.label}>
+              <div
+                className={`overflow-hidden transition-all duration-150 ${
+                  isCollapsed ? 'h-2' : 'h-auto'
+                }`}
+              >
+                {!isCollapsed && (
+                  <p className="px-2.5 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider">
+                    {group.label}
+                  </p>
+                )}
+              </div>
+              <div className="space-y-0.5">
+                {group.items.map((item) => (
+                  <NavLink
+                    key={item.label}
+                    item={item}
+                    siteId={siteId}
+                    collapsed={isCollapsed}
+                    onClick={isMobile ? onMobileClose : undefined}
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </nav>
+
+        {/* Bottom */}
+        <div className="border-t border-neutral-200 dark:border-neutral-800 px-3 py-3 space-y-0.5 shrink-0">
+          {canEdit && (
+            <NavLink
+              item={SETTINGS_ITEM}
+              siteId={siteId}
+              collapsed={isCollapsed}
+              onClick={isMobile ? onMobileClose : undefined}
+            />
+          )}
+          {!isMobile && (
+            <button
+              onClick={toggle}
+              className={`flex items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium text-neutral-400 dark:text-neutral-500 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 w-full ${
+                isCollapsed ? 'justify-center' : ''
+              }`}
+              title={collapsed ? 'Expand sidebar (press [)' : 'Collapse sidebar (press [)'}
+            >
+              {collapsed ? (
+                <CollapseRightIcon className="w-[18px] h-[18px] shrink-0" />
+              ) : (
+                <>
+                  <CollapseLeftIcon className="w-[18px] h-[18px] shrink-0" />
+                  <span className="whitespace-nowrap overflow-hidden">Collapse</span>
+                </>
+              )}
+            </button>
+          )}
+        </div>
+      </div>
+    )
   }
 
   return (
     <>
-      <div className="flex flex-col flex-1 overflow-y-auto overflow-x-hidden">
-        {/* Site Picker */}
-        <SitePicker sites={sites} siteId={siteId} />
+      {/* Desktop */}
+      <aside
+        className="hidden md:flex flex-col shrink-0 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden"
+        style={{
+          width: collapsed ? 56 : 256,
+          transition: 'width 200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        }}
+      >
+        {sidebarContent(false)}
+      </aside>
 
-        {/* Nav Groups */}
-        {NAV_GROUPS.map((group) => (
-          <div key={group.label} className="mb-4">
-            {open && (
-              <motion.p
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                className="px-1 mb-1 text-[11px] font-semibold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider"
-              >
-                {group.label}
-              </motion.p>
-            )}
-            <div className="flex flex-col gap-0.5">
-              {group.items.map((item) => (
-                <SidebarLink
-                  key={item.label}
-                  active={isActive(item)}
-                  link={{
-                    label: item.label,
-                    href: item.href(siteId),
-                    icon: (
-                      <item.icon
-                        className={`h-5 w-5 flex-shrink-0 ${
-                          isActive(item)
-                            ? 'text-brand-orange'
-                            : 'text-neutral-700 dark:text-neutral-200'
-                        }`}
-                        weight={isActive(item) ? 'fill' : 'regular'}
-                      />
-                    ),
-                  }}
-                  className={
-                    isActive(item)
-                      ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                      : 'rounded-lg px-1'
-                  }
-                />
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Bottom: Settings */}
-      <div className="border-t border-neutral-700/30 pt-3">
-        {canEdit && (
-          <SidebarLink
-            active={isActive(SETTINGS_ITEM)}
-            link={{
-              label: SETTINGS_ITEM.label,
-              href: SETTINGS_ITEM.href(siteId),
-              icon: (
-                <SETTINGS_ITEM.icon
-                  className={`h-5 w-5 flex-shrink-0 ${
-                    isActive(SETTINGS_ITEM)
-                      ? 'text-brand-orange'
-                      : 'text-neutral-700 dark:text-neutral-200'
-                  }`}
-                  weight={isActive(SETTINGS_ITEM) ? 'fill' : 'regular'}
-                />
-              ),
-            }}
-            className={
-              isActive(SETTINGS_ITEM)
-                ? 'bg-brand-orange/10 text-brand-orange rounded-lg px-1'
-                : 'rounded-lg px-1'
-            }
+      {/* Mobile overlay */}
+      {mobileOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-40 bg-black/30 md:hidden"
+            onClick={onMobileClose}
           />
-        )}
-      </div>
+          <aside className="fixed inset-y-0 left-0 z-50 w-72 bg-white dark:bg-neutral-900 border-r border-neutral-200 dark:border-neutral-800 shadow-xl md:hidden animate-in slide-in-from-left duration-200">
+            <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-200 dark:border-neutral-800">
+              <span className="text-sm font-semibold text-neutral-900 dark:text-white">Navigation</span>
+              <button
+                onClick={onMobileClose}
+                className="p-1.5 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
+              >
+                <XIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {sidebarContent(true)}
+          </aside>
+        </>
+      )}
     </>
   )
 }
-
-export default function PulseSidebar({ siteId }: { siteId: string }) {
-  const [open, setOpen] = useState(false)
-
-  return (
-    <SidebarPrimitive open={open} setOpen={setOpen}>
-      <SidebarBody className="justify-between gap-6 border-r border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900">
-        <SidebarContent siteId={siteId} />
-      </SidebarBody>
-    </SidebarPrimitive>
-  )
-}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
deleted file mode 100644
index e7ab5dd..0000000
--- a/components/ui/sidebar.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import Link, { LinkProps } from "next/link";
-import React, { useState, createContext, useContext } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { List as Menu, X } from "@phosphor-icons/react";
-
-interface Links {
-  label: string;
-  href: string;
-  icon: React.JSX.Element | React.ReactNode;
-}
-
-interface SidebarContextProps {
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  animate: boolean;
-}
-
-const SidebarContext = createContext<SidebarContextProps | undefined>(
-  undefined
-);
-
-export const useSidebar = () => {
-  const context = useContext(SidebarContext);
-  if (!context) {
-    throw new Error("useSidebar must be used within a SidebarProvider");
-  }
-  return context;
-};
-
-export const SidebarProvider = ({
-  children,
-  open: openProp,
-  setOpen: setOpenProp,
-  animate = true,
-}: {
-  children: React.ReactNode;
-  open?: boolean;
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  animate?: boolean;
-}) => {
-  const [openState, setOpenState] = useState(false);
-
-  const open = openProp !== undefined ? openProp : openState;
-  const setOpen = setOpenProp !== undefined ? setOpenProp : setOpenState;
-
-  return (
-    <SidebarContext.Provider value={{ open, setOpen, animate }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-};
-
-export const Sidebar = ({
-  children,
-  open,
-  setOpen,
-  animate,
-}: {
-  children: React.ReactNode;
-  open?: boolean;
-  setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
-  animate?: boolean;
-}) => {
-  return (
-    <SidebarProvider open={open} setOpen={setOpen} animate={animate}>
-      {children}
-    </SidebarProvider>
-  );
-};
-
-export const SidebarBody = (props: React.ComponentProps<typeof motion.div>) => {
-  return (
-    <>
-      <DesktopSidebar {...props} />
-      <MobileSidebar {...(props as React.ComponentProps<"div">)} />
-    </>
-  );
-};
-
-export const DesktopSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof motion.div>) => {
-  const { open, setOpen, animate } = useSidebar();
-  return (
-    <motion.div
-      className={cn(
-        "h-full px-4 py-4 hidden md:flex md:flex-col bg-neutral-100 dark:bg-neutral-800 w-[300px] flex-shrink-0",
-        className
-      )}
-      animate={{
-        width: animate ? (open ? "300px" : "60px") : "300px",
-      }}
-      onMouseEnter={() => setOpen(true)}
-      onMouseLeave={() => setOpen(false)}
-      {...props}
-    >
-      {children}
-    </motion.div>
-  );
-};
-
-export const MobileSidebar = ({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<"div">) => {
-  const { open, setOpen } = useSidebar();
-  return (
-    <>
-      <div
-        className={cn(
-          "h-10 px-4 py-4 flex flex-row md:hidden items-center justify-between bg-neutral-100 dark:bg-neutral-800 w-full"
-        )}
-        {...props}
-      >
-        <div className="flex justify-end z-20 w-full">
-          <Menu
-            className="text-neutral-800 dark:text-neutral-200 cursor-pointer"
-            onClick={() => setOpen(!open)}
-          />
-        </div>
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              initial={{ x: "-100%", opacity: 0 }}
-              animate={{ x: 0, opacity: 1 }}
-              exit={{ x: "-100%", opacity: 0 }}
-              transition={{
-                duration: 0.3,
-                ease: "easeInOut",
-              }}
-              className={cn(
-                "fixed h-full w-full inset-0 bg-white dark:bg-neutral-900 p-10 z-[100] flex flex-col justify-between",
-                className
-              )}
-            >
-              <div
-                className="absolute right-10 top-10 z-50 text-neutral-800 dark:text-neutral-200 cursor-pointer"
-                onClick={() => setOpen(!open)}
-              >
-                <X />
-              </div>
-              {children}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-    </>
-  );
-};
-
-export const SidebarLink = ({
-  link,
-  className,
-  active,
-  ...props
-}: {
-  link: Links;
-  className?: string;
-  active?: boolean;
-  props?: LinkProps;
-}) => {
-  const { open, animate } = useSidebar();
-  return (
-    <Link
-      href={link.href}
-      className={cn(
-        "flex items-center justify-start gap-2 group/sidebar py-2",
-        active && "text-brand-orange",
-        className
-      )}
-      {...props}
-    >
-      {link.icon}
-      <motion.span
-        animate={{
-          display: animate ? (open ? "inline-block" : "none") : "inline-block",
-          opacity: animate ? (open ? 1 : 0) : 1,
-        }}
-        className="text-neutral-700 dark:text-neutral-200 text-sm group-hover/sidebar:translate-x-1 transition duration-150 whitespace-pre inline-block !p-0 !m-0"
-      >
-        {link.label}
-      </motion.span>
-    </Link>
-  );
-};
diff --git a/lib/sidebar-context.tsx b/lib/sidebar-context.tsx
deleted file mode 100644
index 482c3ba..0000000
--- a/lib/sidebar-context.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { createContext, useCallback, useContext, useState } from 'react'
-
-interface SidebarContextValue {
-  mobileOpen: boolean
-  openMobile: () => void
-  closeMobile: () => void
-}
-
-const SidebarContext = createContext<SidebarContextValue>({
-  mobileOpen: false,
-  openMobile: () => {},
-  closeMobile: () => {},
-})
-
-export function SidebarProvider({ children }: { children: React.ReactNode }) {
-  const [mobileOpen, setMobileOpen] = useState(false)
-  const openMobile = useCallback(() => setMobileOpen(true), [])
-  const closeMobile = useCallback(() => setMobileOpen(false), [])
-
-  return (
-    <SidebarContext.Provider value={{ mobileOpen, openMobile, closeMobile }}>
-      {children}
-    </SidebarContext.Provider>
-  )
-}
-
-export function useSidebar() {
-  return useContext(SidebarContext)
-}