diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index ae71eb0..933b281 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -1,13 +1,13 @@
 'use client';
 
 import { cn } from '@/lib/utils';
-import useStore from '@/hooks/use-store';
+import { useStore } from '@/hooks/use-store';
 import { EdgeStoreProvider } from '@/lib/edgestore';
-import Footer from '@/components/admin-panel/footer';
+import { Footer } from '@/components/admin-panel/footer';
 import Navbar from '@/components/admin-panel/navbar';
 import Sidebar from '@/components/admin-panel/sidebar';
 import ModalProvider from '@/providers/modal-provider';
-import useSidebarToggle from '@/hooks/use-sidebar-toggle';
+import { useSidebarToggle } from '@/hooks/use-sidebar-toggle';
 
 export default function AdminLayout({
   children
diff --git a/app/auth/layout.tsx b/app/auth/layout.tsx
index c803435..31cca59 100644
--- a/app/auth/layout.tsx
+++ b/app/auth/layout.tsx
@@ -1,5 +1,5 @@
-import ViewWebsite from '@/components/view-website';
 import { ModeToggle } from '@/components/mode-toggle';
+import { ViewWebsite } from '@/components/view-website';
 
 export default async function AuthLayout({
   children
diff --git a/components/admin-panel/collapse-menu-button.tsx b/components/admin-panel/collapse-menu-button.tsx
new file mode 100644
index 0000000..3ac80bc
--- /dev/null
+++ b/components/admin-panel/collapse-menu-button.tsx
@@ -0,0 +1,181 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { ChevronDown, Dot, LucideIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { DropdownMenuArrow } from '@radix-ui/react-dropdown-menu';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@/components/ui/collapsible';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider
+} from '@/components/ui/tooltip';
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSeparator
+} from '@/components/ui/dropdown-menu';
+
+type Submenu = {
+  href: string;
+  label: string;
+  active: boolean;
+  onlyTitle?: boolean;
+};
+
+interface CollapseMenuButtonProps {
+  icon: LucideIcon;
+  label: string;
+  active: boolean;
+  submenus: Submenu[];
+  isOpen: boolean | undefined;
+}
+
+export function CollapseMenuButton({
+  icon: Icon,
+  label,
+  active,
+  submenus,
+  isOpen
+}: CollapseMenuButtonProps) {
+  const isSubmenuActive = submenus.some((submenu) => submenu.active);
+  const [isCollapsed, setIsCollapsed] = useState<boolean>(isSubmenuActive);
+
+  return isOpen ? (
+    <Collapsible
+      open={isCollapsed}
+      onOpenChange={setIsCollapsed}
+      className='w-full'
+    >
+      <CollapsibleTrigger
+        className='[&[data-state=open]>div>div>svg]:rotate-180 mb-1'
+        asChild
+      >
+        <Button
+          variant={active ? 'secondary' : 'ghost'}
+          className='w-full justify-start h-10'
+        >
+          <div className='w-full items-center flex justify-between'>
+            <div className='flex items-center'>
+              <span className='mr-4'>
+                <Icon size={18} />
+              </span>
+              <p
+                className={cn(
+                  'max-w-[150px] truncate',
+                  isOpen
+                    ? 'translate-x-0 opacity-100'
+                    : '-translate-x-96 opacity-0'
+                )}
+              >
+                {label}
+              </p>
+            </div>
+            <div
+              className={cn(
+                'whitespace-nowrap',
+                isOpen
+                  ? 'translate-x-0 opacity-100'
+                  : '-translate-x-96 opacity-0'
+              )}
+            >
+              <ChevronDown
+                size={18}
+                className='transition-transform duration-200'
+              />
+            </div>
+          </div>
+        </Button>
+      </CollapsibleTrigger>
+      <CollapsibleContent className='overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down'>
+        {submenus
+          .filter((submenu) => !submenu.onlyTitle)
+          .map(({ href, label, active }, index) => (
+            <Button
+              key={index}
+              variant={active ? 'secondary' : 'ghost'}
+              className='w-full justify-start h-10 mb-1'
+              asChild
+            >
+              <Link href={href}>
+                <span className='mr-4 ml-2'>
+                  <Dot size={18} />
+                </span>
+                <p
+                  className={cn(
+                    'max-w-[170px] truncate',
+                    isOpen
+                      ? 'translate-x-0 opacity-100'
+                      : '-translate-x-96 opacity-0'
+                  )}
+                >
+                  {label}
+                </p>
+              </Link>
+            </Button>
+          ))}
+      </CollapsibleContent>
+    </Collapsible>
+  ) : (
+    <DropdownMenu>
+      <TooltipProvider disableHoverableContent>
+        <Tooltip delayDuration={100}>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant={active ? 'secondary' : 'ghost'}
+                className='w-full justify-start h-10 mb-1'
+              >
+                <div className='w-full items-center flex justify-between'>
+                  <div className='flex items-center'>
+                    <span className={cn(isOpen === false ? '' : 'mr-4')}>
+                      <Icon size={18} />
+                    </span>
+                    <p
+                      className={cn(
+                        'max-w-[200px] truncate',
+                        isOpen === false ? 'opacity-0' : 'opacity-100'
+                      )}
+                    >
+                      {label}
+                    </p>
+                  </div>
+                </div>
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side='right' align='start' alignOffset={2}>
+            {label}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <DropdownMenuContent side='right' sideOffset={25} align='start'>
+        <DropdownMenuLabel className='max-w-[190px] truncate'>
+          {label}
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {submenus
+          .filter((submenu) => !submenu.onlyTitle)
+          .map(({ href, label }, index) => (
+            <DropdownMenuItem key={index} asChild>
+              <Link className='cursor-pointer' href={href}>
+                <p className='max-w-[180px] truncate'>{label}</p>
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        <DropdownMenuArrow className='fill-border' />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/components/admin-panel/footer.tsx b/components/admin-panel/footer.tsx
index 2ae30a3..7cd7484 100644
--- a/components/admin-panel/footer.tsx
+++ b/components/admin-panel/footer.tsx
@@ -1,4 +1,4 @@
-export default function Footer() {
+export function Footer() {
   return (
     <div className='supports-backdrop-blur:bg-background/60 z-20 w-full shadow bg-background/95 backdrop-blur'>
       <div className='mx-8 flex h-14 items-center'>
diff --git a/components/admin-panel/menu.tsx b/components/admin-panel/menu.tsx
index 98cd211..cfe15bd 100644
--- a/components/admin-panel/menu.tsx
+++ b/components/admin-panel/menu.tsx
@@ -1,24 +1,14 @@
 'use client';
 
 import Link from 'next/link';
-import { signOut } from 'next-auth/react';
 import { usePathname } from 'next/navigation';
-import {
-  Book,
-  User,
-  List,
-  Text,
-  LogOut,
-  FileText,
-  FolderGit2,
-  LayoutGrid,
-  GraduationCap,
-  ClipboardCheck,
-  TerminalSquare
-} from 'lucide-react';
+import { Ellipsis, LogOut } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
+import { getPages } from '@/lib/pages';
 import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { CollapseMenuButton } from '@/components/admin-panel/collapse-menu-button';
 import {
   Tooltip,
   TooltipTrigger,
@@ -30,140 +20,119 @@ interface MenuProps {
   isOpen: boolean | undefined;
 }
 
-export default function Menu({ isOpen }: MenuProps) {
+export function Menu({ isOpen }: MenuProps) {
   const pathname = usePathname();
-
-  const routes = [
-    {
-      href: '/dashboard',
-      label: 'Dashboard',
-      active: pathname.includes('/dashboard'),
-      icon: <LayoutGrid size={18} />
-    },
-    {
-      href: '/about',
-      label: 'About',
-      active: pathname.includes('/about'),
-      icon: <Text size={18} />
-    },
-    {
-      href: '/experience',
-      label: 'Experience',
-      active: pathname.includes('/experience'),
-      icon: <Book size={18} />
-    },
-    {
-      href: '/expertise',
-      label: 'Expertise',
-      active: pathname.includes('/expertise'),
-      icon: <ClipboardCheck size={18} />
-    },
-    {
-      href: '/qualification',
-      label: 'Qualification',
-      active: pathname.includes('/qualification'),
-      icon: <GraduationCap size={20} />
-    },
-    {
-      href: '/portfolio',
-      label: 'Portfolio',
-      active: pathname.includes('/portfolio'),
-      icon: <FolderGit2 size={18} />
-    },
-    {
-      href: '/miscellaneous',
-      label: 'Miscellaneous',
-      active: pathname.includes('/miscellaneous'),
-      icon: <List size={18} />
-    },
-    {
-      href: '/tool',
-      label: 'Tool & Apps',
-      active: pathname.includes('/tool'),
-      icon: <TerminalSquare size={18} />
-    },
-    {
-      href: '/resume',
-      label: 'Resume',
-      active: pathname.includes('/resume'),
-      icon: <FileText size={18} />
-    },
-    {
-      href: '/account',
-      label: 'Account',
-      active: pathname.includes('/account'),
-      icon: <User size={18} />
-    }
-  ];
+  const pages = getPages(pathname);
 
   return (
-    <nav className='mt-8 h-full'>
-      <ul className='flex flex-col h-full items-start space-y-1 px-2'>
-        {routes.map((route) => (
-          <li className='w-full' key={route.href}>
+    <ScrollArea className='[&>div>div[style]]:!block'>
+      <nav className='mt-8 h-full w-full'>
+        <ul className='flex flex-col min-h-[calc(100vh-48px-36px-16px-32px)] lg:min-h-[calc(100vh-32px-40px-32px)] items-start space-y-1 px-2'>
+          {pages.map(({ groupLabel, menus }, index) => (
+            <li className={cn('w-full', groupLabel ? 'pt-5' : '')} key={index}>
+              {(isOpen && groupLabel) || isOpen === undefined ? (
+                <p className='text-sm font-medium text-muted-foreground px-4 pb-2 max-w-[248px] truncate'>
+                  {groupLabel}
+                </p>
+              ) : !isOpen && isOpen !== undefined && groupLabel ? (
+                <TooltipProvider>
+                  <Tooltip delayDuration={100}>
+                    <TooltipTrigger className='w-full'>
+                      <div className='w-full flex justify-center items-center'>
+                        <Ellipsis className='h-5 w-5' />
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent side='right'>
+                      <p>{groupLabel}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : (
+                <p className='pb-2'></p>
+              )}
+              {menus.map(
+                ({ href, label, icon: Icon, active, submenus }, index) =>
+                  submenus.length === 0 ? (
+                    <div className='w-full' key={index}>
+                      <TooltipProvider disableHoverableContent>
+                        <Tooltip delayDuration={100}>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant={active ? 'secondary' : 'ghost'}
+                              className='w-full justify-start h-10 mb-1'
+                              asChild
+                            >
+                              <Link href={href}>
+                                <span
+                                  className={cn(isOpen === false ? '' : 'mr-4')}
+                                >
+                                  <Icon size={18} />
+                                </span>
+                                <p
+                                  className={cn(
+                                    'max-w-[200px] truncate',
+                                    isOpen === false
+                                      ? '-translate-x-96 opacity-0'
+                                      : 'translate-x-0 opacity-100'
+                                  )}
+                                >
+                                  {label}
+                                </p>
+                              </Link>
+                            </Button>
+                          </TooltipTrigger>
+                          {isOpen === false && (
+                            <TooltipContent side='right'>
+                              {label}
+                            </TooltipContent>
+                          )}
+                        </Tooltip>
+                      </TooltipProvider>
+                    </div>
+                  ) : (
+                    <div className='w-full' key={index}>
+                      <CollapseMenuButton
+                        icon={Icon}
+                        label={label}
+                        active={active}
+                        submenus={submenus}
+                        isOpen={isOpen}
+                      />
+                    </div>
+                  )
+              )}
+            </li>
+          ))}
+          <li className='w-full grow flex items-end'>
             <TooltipProvider disableHoverableContent>
               <Tooltip delayDuration={100}>
                 <TooltipTrigger asChild>
                   <Button
-                    variant={route.active ? 'secondary' : 'ghost'}
-                    className='w-full justify-start h-10'
-                    asChild
+                    onClick={() => {}}
+                    variant='outline'
+                    className='w-full justify-center h-10 mt-4'
                   >
-                    <Link href={route.href}>
-                      <span className={cn(isOpen === false ? '' : 'mr-4')}>
-                        {route.icon}
-                      </span>
-                      <p
-                        className={cn(
-                          'whitespace-nowrap transition-[transform,opacity] ease-in-out duration-300',
-                          isOpen === false
-                            ? '-translate-x-96 opacity-0'
-                            : 'translate-x-0 opacity-100'
-                        )}
-                      >
-                        {route.label}
-                      </p>
-                    </Link>
+                    <span className={cn(isOpen === false ? '' : 'mr-4')}>
+                      <LogOut size={18} />
+                    </span>
+                    <p
+                      className={cn(
+                        'whitespace-nowrap',
+                        isOpen === false ? 'opacity-0 hidden' : 'opacity-100'
+                      )}
+                    >
+                      Sign out
+                    </p>
                   </Button>
                 </TooltipTrigger>
                 {isOpen === false && (
-                  <TooltipContent side='right'>{route.label}</TooltipContent>
+                  <TooltipContent side='right'>Sign out</TooltipContent>
                 )}
               </Tooltip>
             </TooltipProvider>
           </li>
-        ))}
-        <li className='w-full grow flex items-end'>
-          <TooltipProvider disableHoverableContent>
-            <Tooltip delayDuration={100}>
-              <TooltipTrigger asChild>
-                <Button
-                  onClick={() => signOut()}
-                  variant='outline'
-                  className='w-full justify-center h-10 mt-4'
-                >
-                  <span className={cn(isOpen === false ? '' : 'mr-4')}>
-                    <LogOut size={18} />
-                  </span>
-                  <p
-                    className={cn(
-                      'whitespace-nowrap transition-[transform,opacity] ease-in-out duration-300',
-                      isOpen === false
-                        ? '-translate-x-96 opacity-0 hidden'
-                        : 'translate-x-0 opacity-100'
-                    )}
-                  >
-                    Sign out
-                  </p>
-                </Button>
-              </TooltipTrigger>
-              {isOpen === false && (
-                <TooltipContent side='right'>Sign out</TooltipContent>
-              )}
-            </Tooltip>
-          </TooltipProvider>
-        </li>
-      </ul>
-    </nav>
+        </ul>
+      </nav>
+    </ScrollArea>
   );
 }
diff --git a/components/admin-panel/navbar.tsx b/components/admin-panel/navbar.tsx
index 742bde4..fb6bcf8 100644
--- a/components/admin-panel/navbar.tsx
+++ b/components/admin-panel/navbar.tsx
@@ -1,8 +1,8 @@
-import ViewWebsite from '@/components/view-website';
 import { ModeToggle } from '@/components/mode-toggle';
-import UserNav from '@/components/admin-panel/user-nav';
-import PageTitle from '@/components/admin-panel/page-title';
-import SheetMenu from '@/components/admin-panel/sheet-menu';
+import { ViewWebsite } from '@/components/view-website';
+import { UserNav } from '@/components/admin-panel/user-nav';
+import { PageTitle } from '@/components/admin-panel/page-title';
+import { SheetMenu } from '@/components/admin-panel/sheet-menu';
 
 export default function Navbar() {
   return (
diff --git a/components/admin-panel/page-title.tsx b/components/admin-panel/page-title.tsx
index 22fcdf8..448d62f 100644
--- a/components/admin-panel/page-title.tsx
+++ b/components/admin-panel/page-title.tsx
@@ -1,33 +1,18 @@
 'use client';
 
+import { getPages } from '@/lib/pages';
 import { usePathname } from 'next/navigation';
 
-export default function PageTitle() {
+export function PageTitle() {
   const pathname = usePathname();
+  const pages = getPages(pathname);
 
-  let pageTitle = '';
-
-  if (pathname === '/dashboard') {
-    pageTitle = 'Dashboard';
-  } else if (pathname.includes('/about')) {
-    pageTitle = 'About';
-  } else if (pathname.includes('/experience')) {
-    pageTitle = 'Experience';
-  } else if (pathname.includes('/expertise')) {
-    pageTitle = 'Expertise';
-  } else if (pathname.includes('/qualification')) {
-    pageTitle = 'Qualification';
-  } else if (pathname.includes('/portfolio')) {
-    pageTitle = 'Portfolio';
-  } else if (pathname.includes('/miscellaneous')) {
-    pageTitle = 'Miscellaneous';
-  } else if (pathname.includes('/tool')) {
-    pageTitle = 'Tool & Apps';
-  } else if (pathname.includes('/resume')) {
-    pageTitle = 'Resume';
-  } else if (pathname.includes('/account')) {
-    pageTitle = 'Account';
-  }
+  const pageTitle = pages.map(({ menus }) => {
+    const activeMenu = menus.find((menu) => menu.active);
+    return activeMenu?.submenus && activeMenu.submenus.length > 0
+      ? activeMenu.submenus.find((submenu) => submenu.active)?.label
+      : activeMenu?.label ?? '';
+  });
 
   return <h1 className='font-bold'>{pageTitle}</h1>;
 }
diff --git a/components/admin-panel/sheet-menu.tsx b/components/admin-panel/sheet-menu.tsx
index 6e89bf4..deb6561 100644
--- a/components/admin-panel/sheet-menu.tsx
+++ b/components/admin-panel/sheet-menu.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { LayoutTemplate, MenuIcon } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
-import Menu from '@/components/admin-panel/menu';
+import { Menu } from '@/components/admin-panel/menu';
 import {
   Sheet,
   SheetHeader,
@@ -10,7 +10,7 @@ import {
   SheetContent
 } from '@/components/ui/sheet';
 
-export default function SheetMenu() {
+export function SheetMenu() {
   return (
     <Sheet>
       <SheetTrigger className='lg:hidden' asChild>
diff --git a/components/admin-panel/sidebar-toggle.tsx b/components/admin-panel/sidebar-toggle.tsx
index 766e343..8bb41fd 100644
--- a/components/admin-panel/sidebar-toggle.tsx
+++ b/components/admin-panel/sidebar-toggle.tsx
@@ -8,10 +8,7 @@ interface SidebarToggleProps {
   setIsOpen?: () => void;
 }
 
-export default function SidebarToggle({
-  isOpen,
-  setIsOpen
-}: SidebarToggleProps) {
+export function SidebarToggle({ isOpen, setIsOpen }: SidebarToggleProps) {
   return (
     <div className='invisible lg:visible absolute top-[12px] -right-[16px] z-20 bg-white dark:bg-primary-foreground'>
       <Button
diff --git a/components/admin-panel/sidebar.tsx b/components/admin-panel/sidebar.tsx
index 8a06b6e..e54f21b 100644
--- a/components/admin-panel/sidebar.tsx
+++ b/components/admin-panel/sidebar.tsx
@@ -2,11 +2,11 @@ import Link from 'next/link';
 import { LayoutTemplate } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
-import useStore from '@/hooks/use-store';
+import { useStore } from '@/hooks/use-store';
 import { Button } from '@/components/ui/button';
-import Menu from '@/components/admin-panel/menu';
-import useSidebarToggle from '@/hooks/use-sidebar-toggle';
-import SidebarToggle from '@/components/admin-panel/sidebar-toggle';
+import { Menu } from '@/components/admin-panel/menu';
+import { useSidebarToggle } from '@/hooks/use-sidebar-toggle';
+import { SidebarToggle } from '@/components/admin-panel/sidebar-toggle';
 
 export default function Sidebar() {
   const sidebar = useStore(useSidebarToggle, (state) => state);
diff --git a/components/admin-panel/user-nav.tsx b/components/admin-panel/user-nav.tsx
index 391bfe3..b4c908c 100644
--- a/components/admin-panel/user-nav.tsx
+++ b/components/admin-panel/user-nav.tsx
@@ -23,7 +23,7 @@ import {
   DropdownMenuSeparator
 } from '@/components/ui/dropdown-menu';
 
-export default function UserNav() {
+export function UserNav() {
   const user = useCurrentUser();
 
   return (
diff --git a/components/ui/collapsible.tsx b/components/ui/collapsible.tsx
new file mode 100644
index 0000000..86ab87d
--- /dev/null
+++ b/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
diff --git a/components/ui/scroll-area.tsx b/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..100b888
--- /dev/null
+++ b/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className='h-full w-full rounded-[inherit]'>
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
diff --git a/components/view-website.tsx b/components/view-website.tsx
index 3d28e64..860a8d6 100644
--- a/components/view-website.tsx
+++ b/components/view-website.tsx
@@ -13,7 +13,7 @@ interface ViewWebsiteProps {
   newTab?: boolean;
 }
 
-export default function ViewWebsite({ newTab = false }: ViewWebsiteProps) {
+export function ViewWebsite({ newTab = false }: ViewWebsiteProps) {
   return (
     <TooltipProvider disableHoverableContent>
       <Tooltip delayDuration={100}>
diff --git a/hooks/use-sidebar-toggle.tsx b/hooks/use-sidebar-toggle.tsx
index f77b359..26fa3cf 100644
--- a/hooks/use-sidebar-toggle.tsx
+++ b/hooks/use-sidebar-toggle.tsx
@@ -6,7 +6,7 @@ interface useSidebarToggleStore {
   setIsOpen: () => void;
 }
 
-const useSidebarToggle = create(
+export const useSidebarToggle = create(
   persist<useSidebarToggleStore>(
     (set, get) => ({
       isOpen: true,
@@ -20,5 +20,3 @@ const useSidebarToggle = create(
     }
   )
 );
-
-export default useSidebarToggle;
diff --git a/hooks/use-store.tsx b/hooks/use-store.tsx
index 439fcef..8b35768 100644
--- a/hooks/use-store.tsx
+++ b/hooks/use-store.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-const useStore = <T, F>(
+export const useStore = <T, F>(
   store: (callback: (state: T) => unknown) => unknown,
   callback: (state: T) => F
 ) => {
@@ -13,5 +13,3 @@ const useStore = <T, F>(
 
   return data;
 };
-
-export default useStore;
diff --git a/lib/pages.ts b/lib/pages.ts
new file mode 100644
index 0000000..8865a8c
--- /dev/null
+++ b/lib/pages.ts
@@ -0,0 +1,171 @@
+import {
+  User,
+  List,
+  Book,
+  FileText,
+  BadgeInfo,
+  FolderGit2,
+  LayoutGrid,
+  GraduationCap,
+  ClipboardCheck,
+  TerminalSquare
+} from 'lucide-react';
+
+type Submenu = {
+  href: string;
+  label: string;
+  active: boolean;
+  onlyTitle?: boolean;
+};
+
+type Menu = {
+  href: string;
+  label: string;
+  active: boolean;
+  icon: any;
+  submenus: Submenu[];
+};
+
+type Group = {
+  groupLabel: string;
+  menus: Menu[];
+};
+
+export function getPages(pathname: string): Group[] {
+  return [
+    {
+      groupLabel: '',
+      menus: [
+        {
+          href: '/dashboard',
+          label: 'Dashboard',
+          active: pathname.includes('/dashboard'),
+          icon: LayoutGrid,
+          submenus: []
+        }
+      ]
+    },
+    {
+      groupLabel: 'Informations',
+      menus: [
+        {
+          href: '/about',
+          label: 'About',
+          active: pathname.includes('/about'),
+          icon: BadgeInfo,
+          submenus: []
+        },
+        {
+          href: '/miscellaneous',
+          label: 'Miscellaneous',
+          active: pathname.includes('/miscellaneous'),
+          icon: List,
+          submenus: []
+        }
+      ]
+    },
+    {
+      groupLabel: 'Skills',
+      menus: [
+        {
+          href: '/experience',
+          label: 'Experience',
+          active: pathname.includes('/experience'),
+          icon: Book,
+          submenus: []
+        },
+        {
+          href: '/expertise',
+          label: 'Expertise',
+          active: pathname.includes('/expertise'),
+          icon: ClipboardCheck,
+          submenus: []
+        }
+      ]
+    },
+    {
+      groupLabel: 'Career',
+      menus: [
+        {
+          href: '',
+          label: 'Portfolio',
+          active: pathname.includes('/portfolio'),
+          icon: FolderGit2,
+          submenus: [
+            {
+              href: '/portfolio',
+              label: 'All Projects',
+              active: pathname === '/portfolio'
+            },
+            {
+              href: '/portfolio/create',
+              label: 'New Project',
+              active: pathname === '/portfolio/create'
+            },
+            {
+              href: '',
+              label: 'Edit Project',
+              active: new RegExp('^/portfolio/.+/edit$').test(pathname),
+              onlyTitle: true
+            }
+          ]
+        },
+        {
+          href: '/qualification',
+          label: 'Qualification',
+          active: pathname.includes('/qualification'),
+          icon: GraduationCap,
+          submenus: []
+        }
+      ]
+    },
+    {
+      groupLabel: 'Resources',
+      menus: [
+        {
+          href: '/resume',
+          label: 'Resume',
+          active: pathname.includes('/resume'),
+          icon: FileText,
+          submenus: []
+        },
+        {
+          href: '/tool',
+          label: 'Tool & Apps',
+          active: pathname.includes('/tool'),
+          icon: TerminalSquare,
+          submenus: [
+            {
+              href: '/tool',
+              label: 'All Tools',
+              active: pathname === '/tool'
+            },
+            {
+              href: '/tool/create',
+              label: 'New Tool',
+              active: pathname === '/tool/create'
+            },
+            {
+              href: '',
+              label: 'Edit Tool',
+              active: new RegExp('^/tool/.+/edit$').test(pathname),
+              onlyTitle: true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      groupLabel: 'Settings',
+      menus: [
+        {
+          href: '/account',
+          label: 'Account',
+          active: pathname.includes('/account'),
+          icon: User,
+          submenus: []
+        }
+      ]
+    }
+  ];
+}
diff --git a/package.json b/package.json
index 5ef4d7e..1bdeba4 100644
--- a/package.json
+++ b/package.json
@@ -18,11 +18,13 @@
     "@radix-ui/react-aspect-ratio": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f30c536..d1d7fd1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@radix-ui/react-checkbox':
         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-collapsible':
+        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-dialog':
         specifier: ^1.0.5
         version: 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -50,6 +53,9 @@ importers:
       '@radix-ui/react-popover':
         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)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.0.5
+        version: 1.0.5(@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-select':
         specifier: ^2.0.0
         version: 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -1352,6 +1358,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-scroll-area@1.0.5':
+    resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-select@2.0.0':
     resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==}
     peerDependencies:
@@ -5175,19 +5194,19 @@ snapshots:
 
   '@radix-ui/number@1.0.1':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
 
   '@radix-ui/primitive@1.0.0':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
 
   '@radix-ui/primitive@1.0.1':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
 
   '@radix-ui/react-arrow@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-primitive': 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)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5237,7 +5256,7 @@ snapshots:
 
   '@radix-ui/react-collapsible@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5254,7 +5273,7 @@ snapshots:
 
   '@radix-ui/react-collection@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 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)
@@ -5267,31 +5286,31 @@ snapshots:
 
   '@radix-ui/react-compose-refs@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
 
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-context@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
 
   '@radix-ui/react-context@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-dialog@1.0.0(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-context': 1.0.0(react@18.3.1)
@@ -5336,14 +5355,14 @@ snapshots:
 
   '@radix-ui/react-direction@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-dismissable-layer@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.0
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -5354,7 +5373,7 @@ snapshots:
 
   '@radix-ui/react-dismissable-layer@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 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)
@@ -5368,7 +5387,7 @@ snapshots:
 
   '@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 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)
@@ -5398,19 +5417,19 @@ snapshots:
 
   '@radix-ui/react-focus-guards@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
 
   '@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-focus-scope@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
@@ -5419,7 +5438,7 @@ snapshots:
 
   '@radix-ui/react-focus-scope@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-primitive': 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-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5435,13 +5454,13 @@ snapshots:
 
   '@radix-ui/react-id@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
       react: 18.3.1
 
   '@radix-ui/react-id@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -5459,7 +5478,7 @@ snapshots:
 
   '@radix-ui/react-menu@2.0.6(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-collection': 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-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5510,7 +5529,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.1.2(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-arrow': 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-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5529,7 +5548,7 @@ snapshots:
 
   '@radix-ui/react-popper@1.1.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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@floating-ui/react-dom': 2.0.8(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-arrow': 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-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5548,14 +5567,14 @@ snapshots:
 
   '@radix-ui/react-portal@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-primitive': 1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
   '@radix-ui/react-portal@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-primitive': 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)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5565,7 +5584,7 @@ snapshots:
 
   '@radix-ui/react-portal@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-primitive': 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)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5575,7 +5594,7 @@ snapshots:
 
   '@radix-ui/react-presence@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.0.0(react@18.3.1)
       react: 18.3.1
@@ -5583,7 +5602,7 @@ snapshots:
 
   '@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -5594,14 +5613,14 @@ snapshots:
 
   '@radix-ui/react-primitive@1.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-slot': 1.0.0(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
   '@radix-ui/react-primitive@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-slot': 1.0.2(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5611,7 +5630,7 @@ snapshots:
 
   '@radix-ui/react-roving-focus@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-collection': 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-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5627,6 +5646,24 @@ snapshots:
       '@types/react': 18.3.1
       '@types/react-dom': 18.3.0
 
+  '@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.24.5
+      '@radix-ui/number': 1.0.1
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-presence': 1.0.1(@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-primitive': 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-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.1
+      '@types/react-dom': 18.3.0
+
   '@radix-ui/react-select@2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.23.9
@@ -5669,7 +5706,7 @@ snapshots:
 
   '@radix-ui/react-slot@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-compose-refs': 1.0.0(react@18.3.1)
       react: 18.3.1
 
@@ -5721,7 +5758,7 @@ snapshots:
 
   '@radix-ui/react-toggle-group@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-direction': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5737,7 +5774,7 @@ snapshots:
 
   '@radix-ui/react-toggle@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-primitive': 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-use-controllable-state': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5749,7 +5786,7 @@ snapshots:
 
   '@radix-ui/react-tooltip@1.0.6(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/primitive': 1.0.1
       '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       '@radix-ui/react-context': 1.0.1(@types/react@18.3.1)(react@18.3.1)
@@ -5791,25 +5828,25 @@ snapshots:
 
   '@radix-ui/react-use-callback-ref@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
 
   '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-use-controllable-state@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
       react: 18.3.1
 
   '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -5817,13 +5854,13 @@ snapshots:
 
   '@radix-ui/react-use-escape-keydown@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-callback-ref': 1.0.0(react@18.3.1)
       react: 18.3.1
 
   '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -5831,26 +5868,26 @@ snapshots:
 
   '@radix-ui/react-use-layout-effect@1.0.0(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
 
   '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-use-previous@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.1
 
   '@radix-ui/react-use-rect@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/rect': 1.0.1
       react: 18.3.1
     optionalDependencies:
@@ -5858,7 +5895,7 @@ snapshots:
 
   '@radix-ui/react-use-size@1.0.1(@types/react@18.3.1)(react@18.3.1)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.1)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
@@ -5866,7 +5903,7 @@ snapshots:
 
   '@radix-ui/react-visually-hidden@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)':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       '@radix-ui/react-primitive': 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)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -5876,7 +5913,7 @@ snapshots:
 
   '@radix-ui/rect@1.0.1':
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
 
   '@react-email/body@0.0.8(react@18.3.1)':
     dependencies:
@@ -7241,7 +7278,7 @@ snapshots:
 
   eslint-plugin-jsx-a11y@6.8.0(eslint@8.57.0):
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
       aria-query: 5.3.0
       array-includes: 3.1.7
       array.prototype.flatmap: 1.3.2
@@ -8640,7 +8677,7 @@ snapshots:
 
   tailwind-merge@2.2.0:
     dependencies:
-      '@babel/runtime': 7.23.9
+      '@babel/runtime': 7.24.5
 
   tailwind-merge@2.3.0:
     dependencies:
diff --git a/tailwind.config.ts b/tailwind.config.ts
index afdefab..28f934f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -72,6 +72,14 @@ module.exports = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: 0 }
         },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' }
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' }
+        },
         'infinite-scroll': {
           from: { transform: 'translateX(0)' },
           to: { transform: 'translateX(-100%)' }
@@ -80,6 +88,8 @@ module.exports = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        'collapsible-down': 'collapsible-down 0.2s ease-out',
+        'collapsible-up': 'collapsible-up 0.2s ease-out',
         'infinite-scroll': 'infinite-scroll 25s linear infinite'
       },
       transitionDuration: {