diff --git a/.vscode/cspell.json b/.vscode/cspell.json
index ec0264db..2f2e3597 100644
--- a/.vscode/cspell.json
+++ b/.vscode/cspell.json
@@ -22,6 +22,7 @@
     "nuxt",
     "nuxthq",
     "nuxtjs",
+    "partialize",
     "pinia",
     "Pinia",
     "planetscale",
@@ -30,6 +31,7 @@
     "ratelimit",
     "Ratelimiter",
     "RPID",
+    "shadcn",
     "Shortcode",
     "simplewebauthn",
     "starttls",
@@ -49,6 +51,7 @@
     "unvalidated",
     "vueuse",
     "waitlist",
+    "zustand",
     "zxcvbn"
   ],
   "ignoreWords": ["ABCDEFGHJKMNPQRSTVWXYZ"],
diff --git a/apps/web/package.json b/apps/web/package.json
index a0698d48..653c6e6f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,6 +14,8 @@
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toggle": "^1.0.3",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/themes": "^3.0.2",
     "@simplewebauthn/browser": "^10.0.0",
diff --git a/apps/web/src/app/[orgShortCode]/_components/atoms.ts b/apps/web/src/app/[orgShortCode]/_components/atoms.ts
new file mode 100644
index 00000000..365b84a7
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/_components/atoms.ts
@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const sidebarSubmenuOpenAtom = atom<boolean>(false);
diff --git a/apps/web/src/app/[orgShortCode]/_components/sidebar-content.tsx b/apps/web/src/app/[orgShortCode]/_components/sidebar-content.tsx
new file mode 100644
index 00000000..3b92bd08
--- /dev/null
+++ b/apps/web/src/app/[orgShortCode]/_components/sidebar-content.tsx
@@ -0,0 +1,425 @@
+'use client';
+
+import useLoading from '@/src/hooks/use-loading';
+import { cn, generateAvatarUrl, getInitials } from '@/src/lib/utils';
+import { useGlobalStore } from '@/src/providers/global-store-provider';
+import { Button } from '@/src/components/shadcn-ui/button';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from '@/src/components/shadcn-ui/avatar';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+  DropdownMenuGroup
+} from '@/src/components/shadcn-ui/dropdown-menu';
+
+import {
+  Check,
+  AddressBook,
+  SignOut,
+  ChatCircle,
+  MoonStars,
+  Gear,
+  SpinnerGap,
+  Sun,
+  CaretRight,
+  CaretLeft,
+  SquaresFour,
+  Shield,
+  CaretUp,
+  Book,
+  QuestionMark,
+  MapPin,
+  Activity,
+  Megaphone,
+  PushPin,
+  CaretDoubleLeft,
+  CaretUpDown,
+  Plus,
+  Palette,
+  Monitor,
+  Question,
+  Paperclip,
+  User
+} from '@phosphor-icons/react';
+import { env } from 'next-runtime-env';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useMemo } from 'react';
+import { toast } from 'sonner';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+import { SidebarNavButton } from './sidebar-nav-button';
+import { useTheme } from 'next-themes';
+import { sidebarSubmenuOpenAtom } from './atoms';
+import { useAtom } from 'jotai';
+import { usePreferencesState } from '@/src/stores/preferences-store';
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from '@/src/components/shadcn-ui/toggle-group';
+
+export default function SidebarContent() {
+  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  return (
+    <div
+      className={cn(
+        'bg-slate-3 border-slate-5 z-40 flex h-full w-full min-w-56 resize-x flex-col items-start gap-4 rounded-2xl border p-2'
+      )}>
+      <OrgMenu />
+      <div
+        className={cn(
+          'flex w-full grow flex-col items-start justify-start gap-4 p-0'
+        )}>
+        <div className="flex w-full flex-col gap-0 p-0">
+          <span className="text-slate-10 p-1 text-[10px] font-semibold uppercase">
+            Spaces
+          </span>
+          <Link
+            className="hover:bg-slate-1 flex w-full max-w-full flex-row items-center gap-2 truncate rounded-lg p-1.5"
+            href={`/${orgShortCode}/convo`}>
+            <div className="bg-blue-4 text-blue-9 flex h-6 w-6 items-center justify-center rounded-sm">
+              <User
+                weight="bold"
+                className={'h-4 w-4'}
+              />
+            </div>
+            <span className="text-slate-12 font-medium">My personal space</span>
+          </Link>
+        </div>
+      </div>
+      <div className="flex w-full flex-row items-center justify-between p-1">
+        <span className={cn('font-display text-slate-11 text-sm')}>
+          UnInbox
+        </span>
+        <span className={cn('text-slate-11 text-xs')}>v0.1.23</span>
+      </div>
+    </div>
+  );
+}
+
+const PLATFORM_URL = env('NEXT_PUBLIC_PLATFORM_URL');
+
+function OrgMenu() {
+  const setCurrentOrg = useGlobalStore((state) => state.setCurrentOrg);
+  const currentOrg = useGlobalStore((state) => state.currentOrg);
+  const username = useGlobalStore((state) => state.user.username);
+  const orgs = useGlobalStore((state) => state.orgs);
+  const queryClient = useQueryClient();
+  const [, setSidebarSubmenuOpen] = useAtom(sidebarSubmenuOpenAtom);
+
+  const { theme, setTheme } = useTheme();
+  const router = useRouter();
+
+  const orgAvatarUrl = useMemo(
+    () =>
+      generateAvatarUrl({
+        publicId: currentOrg.publicId,
+        avatarTimestamp: currentOrg.avatarTimestamp,
+        size: '5xl'
+      }),
+    [currentOrg.publicId, currentOrg.avatarTimestamp]
+  );
+
+  const userAvatarUrl = useMemo(
+    () =>
+      generateAvatarUrl({
+        publicId: currentOrg.orgMemberProfile.publicId,
+        avatarTimestamp: currentOrg.orgMemberProfile.avatarTimestamp,
+        size: '5xl'
+      }),
+    [
+      currentOrg.orgMemberProfile.publicId,
+      currentOrg.orgMemberProfile.avatarTimestamp
+    ]
+  );
+
+  const { run: logOut, loading: loggingOut } = useLoading(
+    async () => {
+      await fetch(`${PLATFORM_URL}/auth/logout`, {
+        method: 'POST',
+        credentials: 'include'
+      });
+      queryClient.removeQueries();
+      router.replace('/');
+    },
+    {
+      onError: (error) => {
+        if (error) toast.error(error.message);
+      }
+    }
+  );
+
+  const displayName =
+    `${currentOrg.orgMemberProfile.firstName ?? username} ${currentOrg.orgMemberProfile.lastName}`.trim();
+
+  return (
+    <div className={'w-full'}>
+      <DropdownMenu onOpenChange={(open) => setSidebarSubmenuOpen(open)}>
+        <DropdownMenuTrigger
+          className={
+            'bg-slate-1 border-slate-5 hover:bg-slate-2 flex w-full flex-row items-center justify-between gap-2 rounded-lg border p-3 shadow-sm'
+          }>
+          <div className={'flex flex-row items-center gap-2'}>
+            <Avatar className="h-8 w-8">
+              <AvatarImage src={orgAvatarUrl ?? undefined} />
+              <AvatarFallback className={'text-sm font-semibold'}>
+                {getInitials(currentOrg.name)}
+              </AvatarFallback>
+            </Avatar>
+            <div className={'flex flex-col items-start justify-start'}>
+              <span className={cn('text-sm font-semibold leading-none')}>
+                {currentOrg.name}
+              </span>
+              <span
+                className={cn(
+                  'text-slate-11 text-xs font-medium leading-none'
+                )}>
+                {displayName}
+              </span>
+            </div>
+          </div>
+
+          <div className={'h-5 w-5 p-0.5'}>
+            <CaretUpDown className={'h-4 w-4'} />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="bg-slate-1 border-slate-5 flex w-[214px] flex-col gap-0 p-0">
+          <DropdownMenuLabel className={'px-0 py-0'}>
+            <div className="flex flex-col items-start justify-start gap-2 p-3">
+              <span className={'text-slate-11 text-xs font-medium uppercase'}>
+                Signed in as
+              </span>
+              <div className={'flex flex-row gap-2'}>
+                <Avatar>
+                  <AvatarImage src={userAvatarUrl ?? undefined} />
+                  <AvatarFallback>{getInitials(displayName)}</AvatarFallback>
+                </Avatar>
+                <div className="flex flex-col items-start justify-center">
+                  <span
+                    className={
+                      'text-slate-12 text-sm font-medium leading-none'
+                    }>
+                    {displayName}
+                  </span>
+                  <span
+                    className={
+                      'text-slate-11 text-xs font-normal leading-none'
+                    }>
+                    @{username}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup
+            className={'flex flex-col items-start justify-start gap-2 p-3'}>
+            <DropdownMenuLabel className={'px-0 py-0'}>
+              <span
+                className={
+                  'text-slate-11 w-full text-left text-xs font-medium uppercase'
+                }>
+                Organizations
+              </span>
+            </DropdownMenuLabel>
+            {orgs.map((org) => (
+              <DropdownMenuItem
+                key={org.publicId}
+                className="focus:bg-slate-3 rounded-sm p-0"
+                asChild>
+                <div
+                  onClick={() => {
+                    setCurrentOrg(org.shortCode);
+                    router.push(`/${org.shortCode}/convo`);
+                  }}
+                  className={
+                    'flex w-full cursor-pointer flex-row items-center justify-between gap-2'
+                  }>
+                  <div className="flex flex-row items-center gap-2">
+                    <Avatar>
+                      <AvatarImage
+                        src={
+                          generateAvatarUrl({
+                            publicId: org.publicId,
+                            avatarTimestamp: org.avatarTimestamp,
+                            size: '5xl'
+                          }) ?? undefined
+                        }
+                      />
+                      <AvatarFallback>{getInitials(org.name)}</AvatarFallback>
+                    </Avatar>
+                    <span className={'text-slate-12 text-sm font-medium'}>
+                      {org.name}
+                    </span>
+                  </div>
+                  {org.shortCode === currentOrg.shortCode && <Check />}
+                </div>
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuItem
+              key={'addNewOrg'}
+              className="focus:bg-slate-3 rounded-sm p-0"
+              asChild>
+              <div
+                onClick={() => {
+                  router.push(`/join/org`);
+                }}
+                className={
+                  'flex w-full cursor-pointer flex-row items-center justify-between gap-2'
+                }>
+                <div className="flex flex-row items-center gap-2">
+                  <div
+                    className={
+                      'border-slate-5 flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-md border-2 border-dotted'
+                    }>
+                    <Plus
+                      weight="bold"
+                      className={'absolute h-4 w-4'}
+                    />
+                  </div>
+                  <span className={'text-slate-11 text-sm font-medium'}>
+                    Create Organization
+                  </span>
+                </div>
+              </div>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup className={'p-2'}>
+            <DropdownMenuItem asChild>
+              <Link
+                href={`/${currentOrg.shortCode}/settings`}
+                className="text-slate-11 flex w-full flex-row items-center gap-2 font-medium">
+                <Gear className={'h-4 w-4'} />
+                <span>Settings</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onSelect={(event) => {
+                event.preventDefault();
+              }}>
+              <div
+                className={
+                  'text-slate-11 flex w-full flex-row items-center justify-between'
+                }>
+                <div
+                  className={
+                    'text-slate-11 flex flex-row items-center gap-2 font-medium'
+                  }>
+                  <Palette className={'h-4 w-4'} />
+                  <span>Theme</span>
+                </div>
+
+                <ToggleGroup
+                  type="single"
+                  size="xs"
+                  className="gap-0"
+                  value={theme}
+                  onValueChange={(value: string) => {
+                    setTheme(value);
+                  }}>
+                  <ToggleGroupItem
+                    value="light"
+                    aria-label="Toggle light mode">
+                    <Sun className={'h-4 w-4'} />
+                  </ToggleGroupItem>
+                  <ToggleGroupItem
+                    value="dark"
+                    aria-label="Toggle dark mode">
+                    <MoonStars className={'h-4 w-4'} />
+                  </ToggleGroupItem>
+                  <ToggleGroupItem
+                    value="system"
+                    aria-label="Toggle system default">
+                    <Monitor className={'h-4 w-4'} />
+                  </ToggleGroupItem>
+                </ToggleGroup>
+              </div>
+            </DropdownMenuItem>
+            <DropdownMenuSub>
+              <DropdownMenuSubTrigger>
+                <div className="text-slate-11 flex w-full flex-row items-center gap-2 font-medium">
+                  <Question className={'h-4 w-4'} />
+                  <span>Help</span>
+                </div>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuPortal>
+                <DropdownMenuSubContent>
+                  <DropdownMenuItem>
+                    <div
+                      className={
+                        'text-slate-11 flex w-full flex-row items-center gap-2 font-medium'
+                      }>
+                      <Book className={'h-4 w-4'} />
+                      <span>Documentation</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <div
+                      className={
+                        'text-slate-11 flex w-full flex-row items-center gap-2 font-medium'
+                      }>
+                      <QuestionMark />
+                      <span>Support</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <div
+                      className={
+                        'text-slate-11 flex w-full flex-row items-center gap-2 font-medium'
+                      }>
+                      <MapPin className={'h-4 w-4'} />
+                      <span>Roadmap</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <div
+                      className={
+                        'text-slate-11 flex w-full flex-row items-center gap-2 font-medium'
+                      }>
+                      <Activity className={'h-4 w-4'} />
+                      <span>Status</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>
+                    <div
+                      className={
+                        'text-slate-11 flex w-full flex-row items-center gap-2 font-medium'
+                      }>
+                      <Megaphone className={'h-4 w-4'} />
+                      <span>Changelog</span>
+                    </div>
+                  </DropdownMenuItem>
+                </DropdownMenuSubContent>
+              </DropdownMenuPortal>
+            </DropdownMenuSub>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator className="" />
+          <DropdownMenuItem
+            onMouseDown={() => {
+              setSidebarSubmenuOpen(false);
+              logOut();
+            }}
+            disabled={loggingOut}
+            className="focus:bg-red-9 focus:text-slate-1 text-slate-11">
+            <div className={'flex flex-row items-center gap-2 p-2 font-medium'}>
+              <SignOut className={'h-4 w-4'} />
+              <span>Log out</span>
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
diff --git a/apps/web/src/app/[orgShortCode]/_components/sidebar-nav-button.tsx b/apps/web/src/app/[orgShortCode]/_components/sidebar-nav-button.tsx
index 99eff898..79d91a41 100644
--- a/apps/web/src/app/[orgShortCode]/_components/sidebar-nav-button.tsx
+++ b/apps/web/src/app/[orgShortCode]/_components/sidebar-nav-button.tsx
@@ -15,7 +15,6 @@ export function SidebarNavButton({
   icon,
   isActive,
   isExpanded,
-  sidebarCollapsed,
   disabled,
   badge,
   children,
@@ -29,7 +28,6 @@ export function SidebarNavButton({
   disabled?: boolean;
   badge?: ReactNode;
   children?: ReactNode;
-  sidebarCollapsed: boolean;
 }) {
   const [expanded, setExpanded] = useState(isExpanded);
   const [active, setActive] = useState(false);
@@ -56,7 +54,6 @@ export function SidebarNavButton({
       <div
         className={cn(
           'bg-sand-3 text-sand-12 flex w-full max-w-full flex-row items-center justify-start gap-0  overflow-hidden truncate rounded-md pl-1 text-left',
-          sidebarCollapsed ? 'aspect-square max-w-16' : '',
           active ? 'bg-sand-5' : '',
           disabled ? 'opacity-80' : 'hover:bg-sand-4'
         )}
@@ -99,11 +96,7 @@ export function SidebarNavButton({
               {icon}
             </div>
             <div className="text-sand-12 flex w-full max-w-full flex-row justify-between gap-2 overflow-hidden">
-              <span
-                className={cn(
-                  'text-sand-12 truncate text-sm',
-                  sidebarCollapsed ? 'hidden' : 'visible'
-                )}>
+              <span className={cn('text-sand-12 truncate text-sm')}>
                 {label}
               </span>
               {badge && <Badge variant={'secondary'}>{badge}</Badge>}
diff --git a/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx b/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx
index b2f19ca6..6bc81204 100644
--- a/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx
+++ b/apps/web/src/app/[orgShortCode]/_components/sidebar.tsx
@@ -1,369 +1,105 @@
 'use client';
 
-import useLoading from '@/src/hooks/use-loading';
-import { cn, generateAvatarUrl, getInitials } from '@/src/lib/utils';
-import { useGlobalStore } from '@/src/providers/global-store-provider';
-import { Button } from '@/src/components/shadcn-ui/button';
+import { cn } from '@/src/lib/utils';
+import { usePreferencesState } from '@/src/stores/preferences-store';
 import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage
-} from '@/src/components/shadcn-ui/avatar';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuPortal,
-  DropdownMenuGroup
-} from '@/src/components/shadcn-ui/dropdown-menu';
-
-import {
-  Check,
-  AddressBook,
-  SignOut,
-  ChatCircle,
-  MoonStars,
-  Gear,
-  SpinnerGap,
-  Sun,
-  CaretRight,
-  CaretLeft,
-  SquaresFour,
-  Shield,
-  CaretUp,
-  Book,
-  QuestionMark,
-  MapPin,
-  Activity,
-  Megaphone
+  CaretDoubleLeft,
+  CaretLineRight,
+  Cross,
+  PushPin,
+  X
 } from '@phosphor-icons/react';
-import { env } from 'next-runtime-env';
-import { useTheme } from 'next-themes';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useMemo, useState } from 'react';
-import { toast } from 'sonner';
-import { useQueryClient } from '@tanstack/react-query';
-import React from 'react';
-import { SidebarNavButton } from './sidebar-nav-button';
+import SidebarContent from './sidebar-content';
+import { sidebarSubmenuOpenAtom } from './atoms';
+import { useAtom } from 'jotai';
+import { useEffect } from 'react';
+import { useIsMobile } from '@/src/hooks/is-mobile';
 
 export default function Sidebar() {
-  const [collapsed, setCollapsed] = useState(false);
-  const orgShortCode = useGlobalStore((state) => state.currentOrg.shortCode);
+  const {
+    sidebarDocked,
+    sidebarExpanded,
+    setSidebarExpanded,
+    setSidebarDocking
+  } = usePreferencesState();
 
+  const [sidebarSubmenuOpen] = useAtom(sidebarSubmenuOpenAtom);
+  const isMobile = useIsMobile();
+  useEffect(() => {
+    setSidebarExpanded(true);
+
+    setTimeout(() => {
+      setSidebarExpanded(false);
+    }, 1000);
+  }, [setSidebarExpanded]);
   return (
     <div
       className={cn(
-        'bg-sand-3 flex h-full w-full resize-x flex-col items-start gap-4 p-2',
-        collapsed ? 'min-w-10' : 'min-w-72 max-w-72'
+        'flex h-full max-h-svh resize-x flex-row items-start gap-4 overflow-visible p-0 transition-all duration-500 ease-in-out',
+        !isMobile ? (sidebarDocked ? 'w-60' : 'w-0') : 'w-0'
       )}>
-      <div className="flex w-full flex-row items-center justify-between p-2">
-        <span
-          className={cn(
-            'font-display w-full select-none text-2xl',
-            collapsed ? 'mt-4 text-center' : ''
-          )}>
-          {collapsed ? 'Un' : 'UnInbox'}
-        </span>
-        <Button
-          variant="outline"
-          size="icon"
-          onClick={() => {
-            setCollapsed(!collapsed);
-          }}>
-          {collapsed ? (
-            <CaretRight className="h-4 w-4" />
-          ) : (
-            <CaretLeft className="h-4 w-4" />
-          )}
-        </Button>
-      </div>
       <div
         className={cn(
-          'flex w-full grow flex-col items-start justify-start gap-4 p-0'
-          // !collapsed && 'p-2'
-        )}>
-        <SidebarNavButton
-          link="/"
-          icon={<SquaresFour weight="duotone" />}
-          isActive={false}
-          isExpanded={true}
-          label="My Personal Space"
-          sidebarCollapsed={collapsed}>
-          <SidebarNavButton
-            link={`/${orgShortCode}/convo`}
-            icon={<ChatCircle weight="duotone" />}
-            isActive={false}
-            label="Conversations"
-            sidebarCollapsed={collapsed}></SidebarNavButton>
-
-          <SidebarNavButton
-            link="/contact"
-            icon={<AddressBook weight="duotone" />}
-            isActive={false}
-            label="Contacts"
-            disabled
-            badge="Soon"
-            sidebarCollapsed={collapsed}
-          />
-          <SidebarNavButton
-            link="/contact"
-            icon={<Shield weight="duotone" />}
-            isActive={false}
-            label="Screener"
-            disabled
-            badge="Soon"
-            sidebarCollapsed={collapsed}
-          />
-        </SidebarNavButton>
-      </div>
-      <OrgMenu collapsed={collapsed} />
-    </div>
-  );
-}
-
-const PLATFORM_URL = env('NEXT_PUBLIC_PLATFORM_URL');
-
-function OrgMenu({ collapsed }: { collapsed: boolean }) {
-  const setCurrentOrg = useGlobalStore((state) => state.setCurrentOrg);
-  const currentOrg = useGlobalStore((state) => state.currentOrg);
-  const username = useGlobalStore((state) => state.user.username);
-  const orgs = useGlobalStore((state) => state.orgs);
-  const queryClient = useQueryClient();
-
-  const { setTheme, resolvedTheme } = useTheme();
-  const router = useRouter();
-
-  const orgAvatarUrl = useMemo(
-    () =>
-      generateAvatarUrl({
-        publicId: currentOrg.publicId,
-        avatarTimestamp: currentOrg.avatarTimestamp,
-        size: '5xl'
-      }),
-    [currentOrg.publicId, currentOrg.avatarTimestamp]
-  );
-
-  const userAvatarUrl = useMemo(
-    () =>
-      generateAvatarUrl({
-        publicId: currentOrg.orgMemberProfile.publicId,
-        avatarTimestamp: currentOrg.orgMemberProfile.avatarTimestamp,
-        size: '5xl'
-      }),
-    [
-      currentOrg.orgMemberProfile.publicId,
-      currentOrg.orgMemberProfile.avatarTimestamp
-    ]
-  );
-
-  const { run: logOut, loading: loggingOut } = useLoading(
-    async () => {
-      await fetch(`${PLATFORM_URL}/auth/logout`, {
-        method: 'POST',
-        credentials: 'include'
-      });
-      queryClient.removeQueries();
-      router.replace('/');
-    },
-    {
-      onError: (error) => {
-        if (error) toast.error(error.message);
-      }
-    }
-  );
-
-  const displayName =
-    `${currentOrg.orgMemberProfile.firstName ?? username} ${currentOrg.orgMemberProfile.lastName}`.trim();
-
-  return (
-    <div className={'w-full'}>
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          className={'hover:bg-sand-4 w-full rounded-md p-2'}>
-          <div className=" flex w-full flex-row items-center justify-between">
-            <div className="flex flex-row items-center gap-2">
-              <Avatar className="h-8 w-8">
-                <AvatarImage src={orgAvatarUrl ?? undefined} />
-                <AvatarFallback className={'text-sm font-semibold'}>
-                  {getInitials(currentOrg.name)}
-                </AvatarFallback>
-              </Avatar>
-              <span
-                className={cn(
-                  'text-semibold text-sm',
-                  collapsed ? 'hidden' : ''
-                )}>
-                {currentOrg.name}
-              </span>
-            </div>
-            <div className={'h-5 w-5 p-0.5'}>
-              <CaretUp weight="duotone" />
+          'absolute z-[100] m-0 flex h-full flex-row items-start justify-center gap-0 p-2 transition-all duration-1000 ease-in-out',
+          !isMobile && sidebarDocked ? 'left-0 w-60 pr-0' : 'w-[252px] pr-3',
+          !sidebarDocked || isMobile
+            ? sidebarExpanded
+              ? 'left-0'
+              : '-left-[232px]'
+            : ''
+        )}
+        onMouseEnter={() => {
+          setSidebarExpanded(true);
+        }}
+        onMouseLeave={() => {
+          !sidebarSubmenuOpen && !isMobile && setSidebarExpanded(false);
+        }}
+        onFocus={() => {
+          setSidebarExpanded(true);
+        }}>
+        <SidebarContent />
+        {!isMobile && (
+          <div
+            className={cn(
+              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute top-[34px] z-[90] flex h-6 w-4 max-w-4 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out ',
+              sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0',
+              sidebarDocked ? '-right-[15px]' : '-right-[3px]'
+            )}>
+            <div
+              className={cn(
+                'hover:bg-slate-5 flex h-[22px] w-[22px] min-w-[22px] cursor-pointer items-center justify-center rounded-md transition-all duration-1000 ease-in-out',
+                sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0'
+              )}
+              onClick={() => setSidebarDocking(!sidebarDocked)}>
+              <div>
+                {sidebarDocked ? (
+                  <CaretDoubleLeft className="h-4 w-4" />
+                ) : (
+                  <PushPin className="h-4 w-4" />
+                )}
+              </div>
             </div>
           </div>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-fit p-2">
-          <DropdownMenuLabel className="">
-            <div className="flex flex-col gap-2">
-              <span className={'text-sand-11 text-xs uppercase'}>
-                Signed in as
-              </span>
-              <div className={'flex flex-row gap-2'}>
-                <Avatar>
-                  <AvatarImage src={userAvatarUrl ?? undefined} />
-                  <AvatarFallback>{getInitials(displayName)}</AvatarFallback>
-                </Avatar>
-                <div className="flex flex-col">
-                  <span className={'text-sand-12 text-sm font-medium'}>
-                    {displayName}
-                  </span>
-                  <span className={'text-sand-11 text-xs font-normal'}>
-                    @{username}
-                  </span>
-                </div>
+        )}
+        {isMobile && (
+          <div
+            className={cn(
+              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute -right-[19px] top-[26px] z-[90] flex h-10 w-8 max-w-8 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out ',
+              sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0'
+            )}>
+            <div
+              className={cn(
+                'hover:bg-slate-5 flex h-[38px] w-[38px] min-w-[38px] cursor-pointer items-center justify-center rounded-md transition-all duration-1000 ease-in-out',
+                sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0'
+              )}
+              onClick={() => setSidebarExpanded(false)}>
+              <div>
+                <X className="h-6 w-6" />
               </div>
             </div>
-          </DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <div className={'flex flex-col gap-4 py-2'}>
-            {orgs.map((org) => (
-              <DropdownMenuItem
-                key={org.publicId}
-                className="p-2"
-                asChild>
-                <Button
-                  variant="ghost"
-                  onClick={() => {
-                    setCurrentOrg(org.shortCode);
-                    router.push(`/${org.shortCode}/convo`);
-                  }}
-                  className="flex w-full flex-row items-center justify-between gap-2">
-                  <div className="flex flex-row items-center gap-2">
-                    <Avatar>
-                      <AvatarImage
-                        src={
-                          generateAvatarUrl({
-                            publicId: org.publicId,
-                            avatarTimestamp: org.avatarTimestamp,
-                            size: '5xl'
-                          }) ?? undefined
-                        }
-                      />
-                      <AvatarFallback>{getInitials(org.name)}</AvatarFallback>
-                    </Avatar>
-                    <span className={'text-sand-12 text-sm font-medium'}>
-                      {org.name}
-                    </span>
-                  </div>
-                  {org.shortCode === currentOrg.shortCode && <Check />}
-                </Button>
-              </DropdownMenuItem>
-            ))}
           </div>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup className={'p-0'}>
-            <DropdownMenuItem>
-              <Link
-                href={`/${currentOrg.shortCode}/settings`}
-                className="flex w-full flex-row items-center justify-between">
-                <span>Settings</span>
-                <Gear weight="duotone" />
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => {
-                setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
-              }}>
-              <div
-                className={
-                  'flex w-full flex-row items-center justify-between gap-2'
-                }>
-                <span>
-                  {resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}
-                </span>
-                {resolvedTheme === 'dark' ? (
-                  <Sun weight="duotone" />
-                ) : (
-                  <MoonStars weight="duotone" />
-                )}
-              </div>
-            </DropdownMenuItem>
-            <DropdownMenuSub>
-              <DropdownMenuSubTrigger>Help</DropdownMenuSubTrigger>
-              <DropdownMenuPortal>
-                <DropdownMenuSubContent>
-                  <DropdownMenuItem>
-                    <div
-                      className={
-                        'flex w-full flex-row items-center justify-between gap-8'
-                      }>
-                      <span>Documentation</span>
-                      <Book weight="duotone" />
-                    </div>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <div
-                      className={
-                        'flex w-full flex-row items-center justify-between gap-2'
-                      }>
-                      <span>Support</span>
-                      <QuestionMark />
-                    </div>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <div
-                      className={
-                        'flex w-full flex-row items-center justify-between gap-2'
-                      }>
-                      <span>Roadmap</span>
-                      <MapPin weight="duotone" />
-                    </div>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <div
-                      className={
-                        'flex w-full flex-row items-center justify-between gap-2'
-                      }>
-                      <span>Status</span>
-                      <Activity weight="duotone" />
-                    </div>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <div
-                      className={
-                        'flex w-full flex-row items-center justify-between gap-2'
-                      }>
-                      <span>Changelog</span>
-                      <Megaphone weight="duotone" />
-                    </div>
-                  </DropdownMenuItem>
-                </DropdownMenuSubContent>
-              </DropdownMenuPortal>
-            </DropdownMenuSub>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Button
-              variant="destructive"
-              onClick={() => logOut()}
-              disabled={loggingOut}
-              className="mt-2 w-full">
-              <span>Logout</span>
-              {loggingOut ? (
-                <SpinnerGap className=" animate-spin" />
-              ) : (
-                <SignOut />
-              )}
-            </Button>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
+        )}
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/context-panel.tsx b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/context-panel.tsx
index 991d5969..78b7d9a3 100644
--- a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/context-panel.tsx
+++ b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/context-panel.tsx
@@ -24,7 +24,7 @@ export function ContextPanel({
   const [participantOpen, setParticipantOpen] = useState(false);
 
   return (
-    <div className=" flex h-full w-80 min-w-80 flex-col">
+    <div className=" flex h-full min-w-64 max-w-80 flex-col">
       <div className="border-gray-11 flex h-full w-full flex-col">
         <div className="flex w-full flex-col">
           <div
diff --git a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/messages-panel.tsx b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/messages-panel.tsx
index 9ccc2085..12f1bfa2 100644
--- a/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/messages-panel.tsx
+++ b/apps/web/src/app/[orgShortCode]/convo/[convoId]/_components/messages-panel.tsx
@@ -73,9 +73,9 @@ export function MessagesPanel({
 
   const itemRenderer = useCallback(
     (index: number, message: (typeof allMessages)[number]) => (
-      <div className="h-full w-full px-8 py-4">
+      <div className="h-full w-full">
         {index === firstItemIndex && hasNextPage ? (
-          <div className="flex w-full items-center justify-center gap-2 p-2">
+          <div className="flex w-full items-center justify-center gap-2">
             <Spinner loading />
             <span>Loading...</span>
           </div>
@@ -95,20 +95,22 @@ export function MessagesPanel({
       Loading...
     </div>
   ) : (
-    <ScrollArea ref={setScrollParent}>
-      <Virtuoso
-        startReached={() => {
-          if (isFetchingNextPage || !hasNextPage) return;
-          void fetchNextPage();
-        }}
-        data={allMessages}
-        initialTopMostItemIndex={Math.max(0, allMessages.length - 1)}
-        firstItemIndex={firstItemIndex}
-        itemContent={itemRenderer}
-        customScrollParent={scrollParent ?? undefined}
-        style={{ overscrollBehavior: 'contain' }}
-      />
-    </ScrollArea>
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 p-4">
+      <ScrollArea ref={setScrollParent}>
+        <Virtuoso
+          startReached={() => {
+            if (isFetchingNextPage || !hasNextPage) return;
+            void fetchNextPage();
+          }}
+          data={allMessages}
+          initialTopMostItemIndex={Math.max(0, allMessages.length - 1)}
+          firstItemIndex={firstItemIndex}
+          itemContent={itemRenderer}
+          customScrollParent={scrollParent ?? undefined}
+          style={{ overscrollBehavior: 'contain' }}
+        />
+      </ScrollArea>
+    </div>
   );
 }
 
@@ -142,7 +144,7 @@ function MessageItem({
   return (
     <div
       className={cn(
-        'flex w-full flex-row gap-2',
+        'mb-8 flex w-full flex-row gap-2',
         isUserAuthor ? 'flex-row-reverse' : 'flex-row'
       )}>
       <Avatar
diff --git a/apps/web/src/app/[orgShortCode]/convo/_components/convo-list.tsx b/apps/web/src/app/[orgShortCode]/convo/_components/convo-list.tsx
index 1b5247b4..bcb2535f 100644
--- a/apps/web/src/app/[orgShortCode]/convo/_components/convo-list.tsx
+++ b/apps/web/src/app/[orgShortCode]/convo/_components/convo-list.tsx
@@ -57,7 +57,7 @@ export default function ConvoList() {
   ]);
 
   return (
-    <div className="bg-sand-1 flex h-full w-full min-w-64 max-w-96 flex-col border-r p-4">
+    <div className="bg-sand-1 flex h-full w-full  flex-col border-r p-4">
       {isLoading ? (
         <div className="w-full text-center font-bold">Loading...</div>
       ) : (
diff --git a/apps/web/src/app/[orgShortCode]/convo/layout.tsx b/apps/web/src/app/[orgShortCode]/convo/layout.tsx
index 9830fa37..28e4e323 100644
--- a/apps/web/src/app/[orgShortCode]/convo/layout.tsx
+++ b/apps/web/src/app/[orgShortCode]/convo/layout.tsx
@@ -1,13 +1,24 @@
 'use client';
+import { Button } from '@/src/components/shadcn-ui/button';
 import ConvoList from './_components/convo-list';
+import { usePreferencesState } from '@/src/stores/preferences-store';
 
 export default function Layout({
   children
 }: Readonly<{ children: React.ReactNode }>) {
+  const {
+    sidebarDocked,
+    sidebarExpanded,
+    setSidebarExpanded,
+    setSidebarDocking
+  } = usePreferencesState();
   return (
-    <div className="flex h-full w-full flex-row gap-0">
-      <ConvoList />
-      <div className="w-full">{children}</div>
+    <div className="grid h-full w-full grid-cols-3 gap-0">
+      <div className="bg-red-5 col-span-1 flex w-full flex-col">
+        {/* <Button onClick={() => setSidebarExpanded(true)}>Show</Button> */}
+        <ConvoList />
+      </div>
+      <div className="col-span-2 w-full">{children}</div>
     </div>
   );
 }
diff --git a/apps/web/src/app/[orgShortCode]/layout.tsx b/apps/web/src/app/[orgShortCode]/layout.tsx
index 3e25a181..120207c8 100644
--- a/apps/web/src/app/[orgShortCode]/layout.tsx
+++ b/apps/web/src/app/[orgShortCode]/layout.tsx
@@ -64,8 +64,8 @@ export default function Layout({
 
   return (
     <GlobalStoreProvider initialState={storeData}>
-      <div className="bg-sand-1 flex h-full w-full flex-row gap-0">
-        <div className="h-full w-fit">
+      <div className="bg-sand-1 max-w-svh flex h-full max-h-svh w-full flex-row gap-0 overflow-hidden p-0">
+        <div className="h-full max-h-full w-fit">
           <Sidebar />
         </div>
         <div className="flex h-full w-full flex-row p-0">{children}</div>
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index e1581ac1..c3546a7d 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -43,7 +43,11 @@ export default function RootLayout({
         <PublicEnvScript />
       </head>
       <body
-        className={cn(inter.variable, calSans.variable, 'h-full font-sans')}>
+        className={cn(
+          inter.variable,
+          calSans.variable,
+          'h-full max-h-svh overflow-hidden font-sans'
+        )}>
         <CookiesProvider>
           <ThemeProvider
             attribute="class"
diff --git a/apps/web/src/components/shadcn-ui/avatar.tsx b/apps/web/src/components/shadcn-ui/avatar.tsx
index a01469b1..9221512b 100644
--- a/apps/web/src/components/shadcn-ui/avatar.tsx
+++ b/apps/web/src/components/shadcn-ui/avatar.tsx
@@ -10,7 +10,7 @@ const Avatar = React.forwardRef<
   <AvatarPrimitive.Root
     ref={ref}
     className={cn(
-      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full',
+      'relative flex h-10 w-10 shrink-0 overflow-hidden rounded-md',
       className
     )}
     {...props}
@@ -37,7 +37,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      'bg-sand-5 text-semibold flex h-full w-full items-center justify-center rounded-full border',
+      'bg-sand-5 text-semibold flex h-full w-full items-center justify-center rounded-md border',
       className
     )}
     {...props}
diff --git a/apps/web/src/components/shadcn-ui/button.tsx b/apps/web/src/components/shadcn-ui/button.tsx
index 3f1f739b..e6a1ad0e 100644
--- a/apps/web/src/components/shadcn-ui/button.tsx
+++ b/apps/web/src/components/shadcn-ui/button.tsx
@@ -9,7 +9,7 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-sand-12 text-sand-12 hover:bg-sand-11',
+        default: 'bg-sand-12 text-sand-1 hover:bg-sand-11',
         destructive: 'bg-red-9 text-sand-1 hover:bg-red-8',
         outline:
           'border border-input bg-sand-1 hover:bg-sand-3 hover:text-sand-12',
diff --git a/apps/web/src/components/shadcn-ui/dropdown-menu.tsx b/apps/web/src/components/shadcn-ui/dropdown-menu.tsx
index 05d66a8d..a521960d 100644
--- a/apps/web/src/components/shadcn-ui/dropdown-menu.tsx
+++ b/apps/web/src/components/shadcn-ui/dropdown-menu.tsx
@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'focus:bg-sand-4 data-[state=open]:bg-sand-4 flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'focus:bg-slate-4 data-[state=open]:bg-slate-4 flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
       inset && 'pl-8',
       className
     )}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'bg-sand-2 text-sand-12 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+      'bg-slate-2 text-slate-12 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
       className
     )}
     {...props}
@@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'bg-sand-2 text-sand-12 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md',
+        'bg-slate-2 text-slate-12 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-lg border p-1 shadow-md',
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'focus:bg-sand-4 focus:text-sand-12 relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-slate-3 focus:text-slate-12 relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className
     )}
@@ -96,7 +96,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'focus:bg-sand-4 focus:text-sand-12 relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-slate-4 focus:text-slate-12 relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -119,7 +119,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'focus:bg-sand-4 focus:text-sand-12 relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'focus:bg-slate-4 focus:text-slate-12 relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}>
@@ -157,7 +157,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('bg-sand-6 -mx-1 my-1 h-px', className)}
+    className={cn('bg-slate-5 h-px', className)}
     {...props}
   />
 ));
diff --git a/apps/web/src/components/shadcn-ui/toggle-group.tsx b/apps/web/src/components/shadcn-ui/toggle-group.tsx
new file mode 100644
index 00000000..4669dc46
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/toggle-group.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/src/lib/utils';
+import { toggleVariants } from '@/src/components/shadcn-ui/toggle';
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: 'default',
+  variant: 'default'
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn('flex items-center justify-center gap-1', className)}
+    {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant ?? variant,
+          size: context.size ?? size
+        }),
+        className
+      )}
+      {...props}>
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
diff --git a/apps/web/src/components/shadcn-ui/toggle.tsx b/apps/web/src/components/shadcn-ui/toggle.tsx
new file mode 100644
index 00000000..5adfa378
--- /dev/null
+++ b/apps/web/src/components/shadcn-ui/toggle.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/src/lib/utils';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline:
+          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'
+      },
+      size: {
+        default: 'h-10 px-3',
+        xs: 'h-6 px-1.5',
+        sm: 'h-9 px-2.5',
+        lg: 'h-11 px-5'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/apps/web/src/hooks/is-mobile.ts b/apps/web/src/hooks/is-mobile.ts
new file mode 100644
index 00000000..51f280ff
--- /dev/null
+++ b/apps/web/src/hooks/is-mobile.ts
@@ -0,0 +1,8 @@
+'use client';
+import { useWindowSize } from '@uidotdev/usehooks';
+
+export function useIsMobile(): boolean {
+  const maxWidth = 768;
+  const { width } = useWindowSize();
+  return width ? width <= maxWidth : true;
+}
diff --git a/apps/web/src/stores/preferences-store.ts b/apps/web/src/stores/preferences-store.ts
new file mode 100644
index 00000000..fce3b3c4
--- /dev/null
+++ b/apps/web/src/stores/preferences-store.ts
@@ -0,0 +1,42 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export type PreferencesStoreState = {
+  sidebarDocked: boolean;
+  sidebarExpanded: boolean;
+};
+export type PreferencesStoreActions = {
+  setSidebarDocking: (docked: boolean) => void;
+  setSidebarExpanded: (expanded: boolean) => void;
+};
+
+const initialState: PreferencesStoreState = {
+  sidebarDocked: true,
+  sidebarExpanded: true
+};
+
+export const usePreferencesState = create<
+  PreferencesStoreState & PreferencesStoreActions
+>()(
+  persist(
+    (set) => ({
+      ...initialState,
+      setSidebarDocking: (docked: boolean) =>
+        set((state) => ({
+          ...state,
+          sidebarDocked: docked
+        })),
+      setSidebarExpanded: (expanded: boolean) =>
+        set((state) => ({
+          ...state,
+          sidebarExpanded: expanded
+        }))
+    }),
+    {
+      name: 'user-preferences',
+      partialize: (state) => ({
+        sidebarDocked: state.sidebarDocked
+      })
+    }
+  )
+);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dbfae58d..c20e280f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -272,6 +272,12 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.0.2
         version: 1.0.2(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-toggle':
+        specifier: ^1.0.3
+        version: 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-toggle-group':
+        specifier: ^1.0.4
+        version: 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.0.7
         version: 1.0.7(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)