diff --git a/apps/app/src/actions/sidebar.ts b/apps/app/src/actions/sidebar.ts
deleted file mode 100644
index 16d12e8e8..000000000
--- a/apps/app/src/actions/sidebar.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-'use server';
-
-import { addYears } from 'date-fns';
-import { createSafeActionClient } from 'next-safe-action';
-import { cookies } from 'next/headers';
-import { z } from 'zod';
-
-const schema = z.object({
-  isCollapsed: z.boolean(),
-});
-
-export const updateSidebarState = createSafeActionClient()
-  .inputSchema(schema)
-  .action(async ({ parsedInput }) => {
-    const cookieStore = await cookies();
-
-    cookieStore.set({
-      name: 'sidebar-collapsed',
-      value: JSON.stringify(parsedInput.isCollapsed),
-      expires: addYears(new Date(), 1),
-    });
-
-    return { success: true };
-  });
diff --git a/apps/app/src/app/(app)/[orgId]/layout.tsx b/apps/app/src/app/(app)/[orgId]/layout.tsx
index c54c4ac87..9ee8bdaf2 100644
--- a/apps/app/src/app/(app)/[orgId]/layout.tsx
+++ b/apps/app/src/app/(app)/[orgId]/layout.tsx
@@ -1,10 +1,9 @@
-import { AnimatedLayout } from '@/components/animated-layout';
+import { AppSidebar } from '@/components/app-sidebar';
 import { CheckoutCompleteDialog } from '@/components/dialogs/checkout-complete-dialog';
 import { Header } from '@/components/header';
 import { AssistantSheet } from '@/components/sheets/assistant-sheet';
-import { Sidebar } from '@/components/sidebar';
 import { TriggerTokenProvider } from '@/components/trigger-token-provider';
-import { SidebarProvider } from '@/context/sidebar-context';
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
 import { auth } from '@/utils/auth';
 import { db } from '@db';
 import dynamic from 'next/dynamic';
@@ -29,7 +28,7 @@ export default async function Layout({
   const { orgId: requestedOrgId } = await params;
 
   const cookieStore = await cookies();
-  const isCollapsed = cookieStore.get('sidebar-collapsed')?.value === 'true';
+  const defaultOpen = cookieStore.get('sidebar_state')?.value !== 'false';
   let publicAccessToken = cookieStore.get('publicAccessToken')?.value || undefined;
 
   // Check if user has access to this organization
@@ -89,8 +88,9 @@ export default async function Layout({
       triggerJobId={onboarding?.triggerJobId || undefined}
       initialToken={publicAccessToken || undefined}
     >
-      <SidebarProvider initialIsCollapsed={isCollapsed}>
-        <AnimatedLayout sidebar={<Sidebar organization={organization} />} isCollapsed={isCollapsed}>
+      <SidebarProvider defaultOpen={defaultOpen}>
+        <AppSidebar organization={organization} />
+        <SidebarInset>
           {onboarding?.triggerJobId && <ConditionalOnboardingTracker onboarding={onboarding} />}
           <Header organizationId={organization.id} />
           <ConditionalPaddingWrapper>
@@ -100,7 +100,7 @@ export default async function Layout({
           <Suspense fallback={null}>
             <CheckoutCompleteDialog orgId={organization.id} />
           </Suspense>
-        </AnimatedLayout>
+        </SidebarInset>
         <HotKeys />
       </SidebarProvider>
     </TriggerTokenProvider>
diff --git a/apps/app/src/components/animated-layout.tsx b/apps/app/src/components/animated-layout.tsx
deleted file mode 100644
index a41fc493d..000000000
--- a/apps/app/src/components/animated-layout.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { cn } from '@comp/ui/cn';
-
-interface AnimatedLayoutProps {
-  children: React.ReactNode;
-  sidebar: React.ReactNode;
-  isCollapsed: boolean;
-  blurred?: boolean;
-}
-
-export function AnimatedLayout({ children, sidebar, isCollapsed, blurred }: AnimatedLayoutProps) {
-  return (
-    <div className="flex h-dvh w-full overflow-hidden">
-      <div
-        className={cn(
-          'bg-background hidden h-full shrink-0 overflow-y-auto border-r duration-300 ease-in-out md:block',
-          isCollapsed ? 'w-[80px]' : 'w-[240px]',
-          blurred ? 'pointer-events-none blur-xs select-none' : '',
-        )}
-      >
-        {sidebar}
-      </div>
-      <div className="bg-background flex-1 overflow-y-auto">{children}</div>
-    </div>
-  );
-}
diff --git a/apps/app/src/components/app-sidebar.tsx b/apps/app/src/components/app-sidebar.tsx
new file mode 100644
index 000000000..18137e100
--- /dev/null
+++ b/apps/app/src/components/app-sidebar.tsx
@@ -0,0 +1,33 @@
+import { getOrganizations } from '@/data/getOrganizations';
+import type { Organization } from '@db';
+import { MainMenu } from './main-menu';
+import { OrganizationSwitcher } from './organization-switcher';
+import { SidebarCollapseButton } from './sidebar-collapse-button';
+import { SidebarLogo } from './sidebar-logo';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarRail } from './ui/sidebar';
+
+export async function AppSidebar({ organization }: { organization: Organization | null }) {
+  const { organizations } = await getOrganizations();
+
+  return (
+    <Sidebar collapsible="icon" className="bg-card overflow-x-clip">
+      <SidebarHeader className="p-4 gap-0">
+        <div className="flex items-center justify-start h-10">
+          <SidebarLogo />
+        </div>
+        <div className="mt-2 flex flex-col gap-2">
+          <OrganizationSwitcher organizations={organizations} organization={organization} />
+          <MainMenu organizationId={organization?.id ?? ''} organization={organization} />
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent className="flex-1" />
+
+      <SidebarFooter className="p-0">
+        <SidebarCollapseButton />
+      </SidebarFooter>
+
+      <SidebarRail />
+    </Sidebar>
+  );
+}
diff --git a/apps/app/src/components/layout/app-shell.tsx b/apps/app/src/components/layout/app-shell.tsx
new file mode 100644
index 000000000..68a209489
--- /dev/null
+++ b/apps/app/src/components/layout/app-shell.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { cn } from '@comp/ui/cn';
+import { useEffect, useState } from 'react';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar-collapsed';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 365; // 1 year
+
+interface AppShellProps {
+  children: React.ReactNode;
+  sidebar: React.ReactNode;
+  defaultCollapsed?: boolean;
+}
+
+export function AppShell({ children, sidebar, defaultCollapsed = false }: AppShellProps) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+    const savedState = localStorage.getItem(SIDEBAR_COOKIE_NAME);
+    if (savedState !== null) {
+      setIsCollapsed(savedState === 'true');
+    }
+  }, []);
+
+  const toggleSidebar = () => {
+    const newState = !isCollapsed;
+    setIsCollapsed(newState);
+    localStorage.setItem(SIDEBAR_COOKIE_NAME, String(newState));
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${newState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+  };
+
+  return (
+    <div
+      className="grid h-dvh w-full overflow-hidden md:grid-cols-[80px_1fr]"
+      data-sidebar-collapsed={isCollapsed}
+    >
+      {/* Sidebar Container - Fixed width rail on desktop */}
+      <div
+        className={cn(
+          'bg-card relative hidden overflow-hidden border-r md:block',
+          'transition-none', // No transition on container
+          // Mobile: full overlay
+          'md:w-[80px]',
+        )}
+      >
+        {/* Sidebar Panel - Slides in/out */}
+        <aside
+          className={cn(
+            'bg-card absolute inset-0 w-[240px] overflow-y-auto overflow-x-hidden border-r',
+            'transform-gpu transition-transform duration-200 ease-out will-change-transform',
+            // Collapsed: slide left so only 80px rail is visible
+            isCollapsed && 'md:-translate-x-[160px]',
+            // Prevent flash before mount
+            !isMounted && 'invisible',
+          )}
+        >
+          {sidebar}
+        </aside>
+
+        {/* Toggle button in rail */}
+        <button
+          onClick={toggleSidebar}
+          className={cn(
+            'absolute bottom-2 z-10 flex h-8 w-8 items-center justify-center rounded-xs transition-all hover:bg-accent',
+            isCollapsed ? 'left-1/2 -translate-x-1/2' : 'right-2',
+          )}
+          aria-label="Toggle sidebar"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={cn(
+              'transition-transform duration-200 ease-in-out',
+              isCollapsed && 'rotate-180',
+            )}
+          >
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Main Content */}
+      <main className="bg-background overflow-y-auto">{children}</main>
+    </div>
+  );
+}
diff --git a/apps/app/src/components/main-menu.tsx b/apps/app/src/components/main-menu.tsx
index a165522dd..c4eb437e4 100644
--- a/apps/app/src/components/main-menu.tsx
+++ b/apps/app/src/components/main-menu.tsx
@@ -1,10 +1,13 @@
 'use client';
 
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from '@/components/ui/sidebar';
 import { Badge } from '@comp/ui/badge';
-import { Button } from '@comp/ui/button';
-import { cn } from '@comp/ui/cn';
 import { Icons } from '@comp/ui/icons';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@comp/ui/tooltip';
 import {
   FlaskConical,
   Gauge,
@@ -39,17 +42,11 @@ interface ItemProps {
   item: MenuItem;
   isActive: boolean;
   disabled: boolean;
-  isCollapsed?: boolean;
   onItemClick?: () => void;
   itemRef: (el: HTMLDivElement | null) => void;
 }
 
-export function MainMenu({
-  organizationId,
-  organization,
-  isCollapsed = false,
-  onItemClick,
-}: Props) {
+export function MainMenu({ organizationId, organization, onItemClick }: Props) {
   const pathname = usePathname();
   const [activeStyle, setActiveStyle] = useState({ top: '0px', height: '0px' });
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
@@ -203,120 +200,77 @@ export function MainMenu({
   }, [activeIndex]);
 
   return (
-    <nav className="relative space-y-1">
-      {/* Active Indicator */}
+    <div className="relative">
       <div
-        className="bg-primary absolute -right-4 w-0.5 rounded-l-xs transition-all duration-300 ease-out"
+        aria-hidden
+        className="pointer-events-none bg-primary absolute -right-4 z-20 w-0.5 rounded-l-xs transition-all duration-300 ease-out group-data-[collapsible=icon]:hidden"
         style={activeStyle}
       />
-
-      {visibleItems.map((item, index) => {
-        const isActive = isPathActive(item.path);
-        return (
-          <Item
-            key={item.id}
-            organizationId={organizationId ?? ''}
-            item={item}
-            isActive={isActive}
-            disabled={item.disabled}
-            isCollapsed={isCollapsed}
-            onItemClick={onItemClick}
-            itemRef={(el) => {
-              itemRefs.current[index] = el;
-            }}
-          />
-        );
-      })}
-    </nav>
+      <SidebarMenu>
+        {visibleItems.map((item, index) => {
+          const isActive = isPathActive(item.path);
+          return (
+            <Item
+              key={item.id}
+              organizationId={organizationId ?? ''}
+              item={item}
+              isActive={isActive}
+              disabled={item.disabled}
+              onItemClick={onItemClick}
+              itemRef={(el) => {
+                itemRefs.current[index] = el;
+              }}
+            />
+          );
+        })}
+      </SidebarMenu>
+    </div>
   );
 }
 
-const Item = ({
-  organizationId,
-  item,
-  isActive,
-  disabled,
-  isCollapsed = false,
-  onItemClick,
-  itemRef,
-}: ItemProps) => {
+const Item = ({ organizationId, item, isActive, disabled, onItemClick, itemRef }: ItemProps) => {
   const Icon = item.icon;
   const linkDisabled = disabled || item.disabled;
   const itemPath = item.path.replace(':organizationId', organizationId ?? '');
+  const { isMobile, setOpen } = useSidebar();
+
+  const handleClick = () => {
+    if (isMobile) {
+      setOpen(false);
+    }
+    onItemClick?.();
+  };
 
   if (linkDisabled) {
     return (
-      <div ref={itemRef}>
-        <TooltipProvider>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Button
-                variant="default"
-                size={isCollapsed ? 'icon' : 'default'}
-                className={cn(
-                  'w-full cursor-not-allowed opacity-50',
-                  isCollapsed ? 'justify-center' : 'justify-start',
-                )}
-                disabled
-              >
-                <Icon size={16} />
-                {!isCollapsed && <span className="ml-2 truncate">Coming Soon</span>}
-              </Button>
-            </TooltipTrigger>
-            {isCollapsed && <TooltipContent side="right">Coming Soon</TooltipContent>}
-          </Tooltip>
-        </TooltipProvider>
-      </div>
+      <SidebarMenuItem ref={itemRef}>
+        <SidebarMenuButton disabled tooltip="Coming Soon">
+          <Icon size={16} />
+          <span>Coming Soon</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
     );
   }
 
   return (
-    <div ref={itemRef}>
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              variant={isActive ? 'secondary' : 'ghost'}
-              size={isCollapsed ? 'icon' : 'default'}
-              className={cn('w-full', isCollapsed ? 'justify-center' : 'justify-start')}
-              asChild
-            >
-              <Link href={itemPath} onClick={onItemClick}>
-                <Icon size={16} />
-                {!isCollapsed && (
-                  <>
-                    <span className="ml-2 flex-1 truncate text-left">{item.name}</span>
-                    {item.badge && (
-                      <Badge variant={item.badge.variant} className="ml-auto text-xs">
-                        {item.badge.text}
-                      </Badge>
-                    )}
-                  </>
-                )}
-              </Link>
-            </Button>
-          </TooltipTrigger>
-          {isCollapsed && (
-            <TooltipContent side="right" sideOffset={8}>
-              <div className="flex items-center gap-2">
-                {item.name}
-                {item.badge && (
-                  <Badge variant={item.badge.variant} className="text-xs">
-                    {item.badge.text}
-                  </Badge>
-                )}
-              </div>
-            </TooltipContent>
+    <SidebarMenuItem ref={itemRef}>
+      <SidebarMenuButton asChild isActive={isActive} tooltip={item.name}>
+        <Link href={itemPath} onClick={handleClick}>
+          <Icon size={16} />
+          <span>{item.name}</span>
+          {item.badge && (
+            <Badge variant={item.badge.variant} className="ml-auto text-xs">
+              {item.badge.text}
+            </Badge>
           )}
-        </Tooltip>
-      </TooltipProvider>
-    </div>
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
   );
 };
 
 type Props = {
   organizationId?: string;
   organization?: { advancedModeEnabled?: boolean } | null;
-  isCollapsed?: boolean;
   onItemClick?: () => void;
 };
diff --git a/apps/app/src/components/mobile-menu.tsx b/apps/app/src/components/mobile-menu.tsx
index 2eeeef227..3d911d5c6 100644
--- a/apps/app/src/components/mobile-menu.tsx
+++ b/apps/app/src/components/mobile-menu.tsx
@@ -10,7 +10,6 @@ import { OrganizationSwitcher } from './organization-switcher';
 
 interface MobileMenuProps {
   organizations: Organization[];
-  isCollapsed?: boolean;
   organizationId?: string;
 }
 
@@ -40,11 +39,7 @@ export function MobileMenu({ organizationId, organizations }: MobileMenuProps) {
           <Icons.Logo />
         </div>
         <div className="flex flex-col gap-2">
-          <OrganizationSwitcher
-            organizations={organizations}
-            organization={currentOrganization}
-            isCollapsed={false}
-          />
+          <OrganizationSwitcher organizations={organizations} organization={currentOrganization} />
           <MainMenu
             organizationId={organizationId}
             organization={currentOrganization}
diff --git a/apps/app/src/components/organization-switcher.tsx b/apps/app/src/components/organization-switcher.tsx
index b5bea0042..e699ef655 100644
--- a/apps/app/src/components/organization-switcher.tsx
+++ b/apps/app/src/components/organization-switcher.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useSidebar } from '@/components/ui/sidebar';
 import { changeOrganizationAction } from '@/actions/change-organization';
 import { Button } from '@comp/ui/button';
 import { cn } from '@comp/ui/cn';
@@ -24,7 +25,6 @@ import { useEffect, useState } from 'react';
 interface OrganizationSwitcherProps {
   organizations: Organization[];
   organization: Organization | null;
-  isCollapsed?: boolean;
 }
 
 interface OrganizationInitialsAvatarProps {
@@ -84,8 +84,9 @@ function OrganizationInitialsAvatar({
 export function OrganizationSwitcher({
   organizations,
   organization,
-  isCollapsed = false,
 }: OrganizationSwitcherProps) {
+  const { state, isMobile } = useSidebar();
+  const isCollapsed = !isMobile && state === 'collapsed';
   const router = useRouter();
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [pendingOrgId, setPendingOrgId] = useState<string | null>(null);
@@ -174,8 +175,7 @@ export function OrganizationSwitcher({
             variant="ghost"
             size={isCollapsed ? 'icon' : 'default'}
             className={cn(
-              'w-full',
-              isCollapsed ? 'justify-center' : 'h-10 justify-start p-1 pr-2',
+              isCollapsed ? 'justify-center' : 'w-full h-10 justify-start p-1 pr-2',
               status === 'executing' && 'cursor-not-allowed opacity-50',
             )}
             disabled={status === 'executing'}
diff --git a/apps/app/src/components/sidebar-collapse-button.tsx b/apps/app/src/components/sidebar-collapse-button.tsx
index 00ab06bc6..0b841b0f3 100644
--- a/apps/app/src/components/sidebar-collapse-button.tsx
+++ b/apps/app/src/components/sidebar-collapse-button.tsx
@@ -1,46 +1,28 @@
 'use client';
 
-import { updateSidebarState } from '@/actions/sidebar';
-import { useSidebar } from '@/context/sidebar-context';
+import { useSidebar } from '@/components/ui/sidebar';
 import { Button } from '@comp/ui/button';
 import { cn } from '@comp/ui/cn';
 import { ArrowLeftFromLine } from 'lucide-react';
-import { useAction } from 'next-safe-action/hooks';
 
-interface SidebarCollapseButtonProps {
-  isCollapsed: boolean;
-}
-
-export function SidebarCollapseButton({ isCollapsed }: SidebarCollapseButtonProps) {
-  const { setIsCollapsed } = useSidebar();
-
-  const { execute } = useAction(updateSidebarState, {
-    onError: () => {
-      // Revert the optimistic update if the server action fails
-      setIsCollapsed(isCollapsed);
-    },
-  });
-
-  const handleToggle = () => {
-    // Update local state immediately for responsive UI
-    setIsCollapsed(!isCollapsed);
-    // Update server state (cookie) in the background
-    execute({ isCollapsed: !isCollapsed });
-  };
+export function SidebarCollapseButton() {
+  const { state, toggleSidebar } = useSidebar();
 
   return (
-    <Button
-      variant="ghost"
-      size="icon"
-      className={cn('h-8 w-8 rounded-xs', !isCollapsed && 'mr-4 ml-auto')}
-      onClick={handleToggle}
-    >
-      <ArrowLeftFromLine
-        className={cn(
-          'h-4 w-4 shrink-0 transition-transform duration-400 ease-in-out',
-          isCollapsed && 'rotate-180',
-        )}
-      />
-    </Button>
+    <div className="flex justify-center py-2">
+      <Button
+        variant="ghost"
+        size="icon"
+        className={cn('h-8 w-8 rounded-xs', state !== 'collapsed' && 'mr-4 ml-auto')}
+        onClick={toggleSidebar}
+      >
+        <ArrowLeftFromLine
+          className={cn(
+            'h-4 w-4 shrink-0 transition-transform duration-400 ease-in-out',
+            state === 'collapsed' && 'rotate-180',
+          )}
+        />
+      </Button>
+    </div>
   );
 }
diff --git a/apps/app/src/components/sidebar-logo.tsx b/apps/app/src/components/sidebar-logo.tsx
index 1b5ecd027..64a86889a 100644
--- a/apps/app/src/components/sidebar-logo.tsx
+++ b/apps/app/src/components/sidebar-logo.tsx
@@ -1,13 +1,10 @@
-import { cn } from '@comp/ui/cn';
 import { Icons } from '@comp/ui/icons';
 import Link from 'next/link';
 
-export function SidebarLogo({ isCollapsed }: { isCollapsed: boolean }) {
+export function SidebarLogo() {
   return (
-    <div className={cn('flex items-center transition-all duration-300')}>
-      <Link href="/" suppressHydrationWarning>
-        <Icons.Logo width={40} height={40} className={cn('transition-transform duration-300')} />
-      </Link>
-    </div>
+    <Link href="/" suppressHydrationWarning className="flex items-center">
+      <Icons.Logo width={40} height={40} />
+    </Link>
   );
 }
diff --git a/apps/app/src/components/sidebar.tsx b/apps/app/src/components/sidebar.tsx
deleted file mode 100644
index d0fca391e..000000000
--- a/apps/app/src/components/sidebar.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { getOrganizations } from '@/data/getOrganizations';
-import { cn } from '@comp/ui/cn';
-import type { Organization } from '@db';
-import { cookies } from 'next/headers';
-import { MainMenu } from './main-menu';
-import { OrganizationSwitcher } from './organization-switcher';
-import { SidebarCollapseButton } from './sidebar-collapse-button';
-import { SidebarLogo } from './sidebar-logo';
-
-export async function Sidebar({
-  organization,
-  collapsed = false,
-}: {
-  organization: Organization | null;
-  collapsed?: boolean;
-}) {
-  const cookieStore = await cookies();
-  const isCollapsed = collapsed || cookieStore.get('sidebar-collapsed')?.value === 'true';
-  const { organizations } = await getOrganizations();
-
-  return (
-    <div className="bg-card flex h-full flex-col gap-0 overflow-x-clip">
-      <div className="flex flex-col gap-2 p-4">
-        <div className={cn('flex items-center justify-start', isCollapsed && 'justify-center')}>
-          <SidebarLogo isCollapsed={isCollapsed} />
-        </div>
-        <div className="mt-2 flex flex-col gap-2">
-          <OrganizationSwitcher
-            organizations={organizations}
-            organization={organization}
-            isCollapsed={isCollapsed}
-          />
-          <MainMenu
-            organizationId={organization?.id ?? ''}
-            organization={organization}
-            isCollapsed={isCollapsed}
-          />
-        </div>
-      </div>
-      <div className="flex-1" />
-
-      <div className="flex justify-center py-2">
-        <SidebarCollapseButton isCollapsed={isCollapsed} />
-      </div>
-    </div>
-  );
-}
diff --git a/apps/app/src/components/ui/sidebar.tsx b/apps/app/src/components/ui/sidebar.tsx
new file mode 100644
index 000000000..ecf853a86
--- /dev/null
+++ b/apps/app/src/components/ui/sidebar.tsx
@@ -0,0 +1,669 @@
+'use client';
+
+import { Slot } from '@radix-ui/react-slot';
+import { PanelLeftIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { useIsMobile } from '@/hooks/use-mobile';
+import { Button } from '@comp/ui/button';
+import { cn } from '@comp/ui/cn';
+import { Input } from '@comp/ui/input';
+import { Separator } from '@comp/ui/separator';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@comp/ui/sheet';
+import { Skeleton } from '@comp/ui/skeleton';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@comp/ui/tooltip';
+
+const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = '240px';
+const SIDEBAR_WIDTH_MOBILE = '18rem';
+const SIDEBAR_WIDTH_ICON = '80px';
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+type SidebarContextProps = {
+  state: 'expanded' | 'collapsed';
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider.');
+  }
+
+  return context;
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === 'function' ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? 'expanded' : 'collapsed';
+
+  const contextValue = React.useMemo<SidebarContextProps>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH,
+              '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            'group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+}
+
+function Sidebar({
+  side = 'left',
+  variant = 'sidebar',
+  collapsible = 'offcanvas',
+  className,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  side?: 'left' | 'right';
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === 'none') {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          'bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <SheetHeader className="sr-only">
+            <SheetTitle>Sidebar</SheetTitle>
+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+          </SheetHeader>
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === 'collapsed' ? collapsible : ''}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        data-slot="sidebar-gap"
+        className={cn(
+          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+          'group-data-[collapsible=offcanvas]:w-0',
+          'group-data-[side=right]:rotate-180',
+          variant === 'floating' || variant === 'inset'
+            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
+        )}
+      />
+      <div
+        data-slot="sidebar-container"
+        className={cn(
+          'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+          side === 'left'
+            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+          // Adjust the padding for floating and inset variants.
+          variant === 'floating' || variant === 'inset'
+            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          data-slot="sidebar-inner"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn('size-7', className)}
+      onClick={(event) => {
+        onClick?.(event);
+        toggleSidebar();
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
+  const { toggleSidebar } = useSidebar();
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
+        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+        'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+        '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+        '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        'bg-background relative flex w-full flex-1 flex-col',
+        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn('bg-background h-8 w-full shadow-none', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn('flex flex-col gap-2 p-2', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn('bg-sidebar-border mx-2 w-auto', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        'flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto overflow-x-visible group-data-[collapsible=icon]:overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn('relative flex w-full min-w-0 flex-col p-2 overflow-visible', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'div'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'div';
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn('w-full text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn('flex w-full min-w-0 flex-col gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn('group/menu-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  isActive?: boolean;
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+}) {
+  const Comp = asChild ? Slot : 'button';
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      className={cn(
+        'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 h-8 text-left text-sm outline-hidden transition-colors',
+        'hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring active:bg-muted',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:p-2',
+        '[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        isActive && 'bg-muted font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === 'string') {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== 'collapsed' || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  );
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<'button'> & {
+  asChild?: boolean;
+  showOnHover?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'button';
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+        // Increases the hit area of the button on mobile.
+        'after:absolute after:-inset-2 md:after:hidden',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        showOnHover &&
+          'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+        'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+        'peer-data-[size=sm]/menu-button:top-1',
+        'peer-data-[size=default]/menu-button:top-1.5',
+        'peer-data-[size=lg]/menu-button:top-2.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showIcon?: boolean;
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            '--skeleton-width': width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn('group/menu-sub-item relative', className)}
+      {...props}
+    />
+  );
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = 'md',
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+  size?: 'sm' | 'md';
+  isActive?: boolean;
+}) {
+  const Comp = asChild ? Slot : 'a';
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+        size === 'sm' && 'text-xs',
+        size === 'md' && 'text-sm',
+        'group-data-[collapsible=icon]:hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
diff --git a/apps/app/src/context/sidebar-context.tsx b/apps/app/src/context/sidebar-context.tsx
deleted file mode 100644
index 76441af7d..000000000
--- a/apps/app/src/context/sidebar-context.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client';
-
-import { createContext, useContext, useEffect, useState } from 'react';
-
-interface SidebarContextType {
-  isCollapsed: boolean;
-  setIsCollapsed: (isCollapsed: boolean) => void;
-}
-
-const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
-
-export function SidebarProvider({
-  children,
-  initialIsCollapsed = false,
-}: {
-  children: React.ReactNode;
-  initialIsCollapsed?: boolean;
-}) {
-  const [isCollapsed, setIsCollapsed] = useState(initialIsCollapsed);
-
-  // Update state if server value changes
-  useEffect(() => {
-    setIsCollapsed(initialIsCollapsed);
-  }, [initialIsCollapsed]);
-
-  return (
-    <SidebarContext.Provider value={{ isCollapsed, setIsCollapsed }}>
-      {children}
-    </SidebarContext.Provider>
-  );
-}
-
-export function useSidebar() {
-  const context = useContext(SidebarContext);
-  if (context === undefined) {
-    throw new Error('useSidebar must be used within a SidebarProvider');
-  }
-  return context;
-}
diff --git a/bun.lock b/bun.lock
index 875ee85f7..ef6d3aff5 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "comp",