diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
index 4ca4ff121a..a1700955d1 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/page-client.tsx
@@ -71,7 +71,7 @@ function WorkspaceLinks() {
       <AddEditTagModal />
       <div className="flex w-full items-center pt-3">
         <MaxWidthWrapper className="flex flex-col gap-y-3">
-          <div className="flex flex-wrap items-center justify-between gap-2 md:flex-nowrap">
+          <div className="flex flex-wrap items-center justify-between gap-2 lg:flex-nowrap">
             <div className="flex w-full grow gap-2 md:w-auto">
               <div className="grow basis-0 md:grow-0">
                 <LinkDisplay />
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout-client.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout-client.tsx
deleted file mode 100644
index 9e42daf6d3..0000000000
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout-client.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-"use client";
-
-import useWorkspace from "@/lib/swr/use-workspace";
-import SettingsLayout from "@/ui/layout/settings-layout";
-import {
-  CircleInfo,
-  ConnectedDots,
-  CubeSettings,
-  Gear2,
-  Gift,
-  Globe,
-  Key,
-  Receipt2,
-  ShieldCheck,
-  Tag,
-  Users6,
-} from "@dub/ui/src/icons";
-import { Webhook } from "lucide-react";
-import { ReactNode, useMemo } from "react";
-
-export default function WorkspaceSettingsLayoutClient({
-  children,
-}: {
-  children: ReactNode;
-}) {
-  const { flags } = useWorkspace();
-
-  const tabs = useMemo(
-    () => [
-      // Workspace Settings
-      {
-        group: "Workspace Settings",
-        tabs: [
-          {
-            name: "General",
-            icon: Gear2,
-            segment: null,
-          },
-          {
-            name: "Domains",
-            icon: Globe,
-            segment: "domains",
-          },
-          {
-            name: "Tags",
-            icon: Tag,
-            segment: "tags",
-          },
-          {
-            name: "Billing",
-            icon: Receipt2,
-            segment: "billing",
-          },
-          {
-            name: "People",
-            icon: Users6,
-            segment: "people",
-          },
-          {
-            name: "Integrations",
-            icon: ConnectedDots,
-            segment: "integrations",
-          },
-          {
-            name: "Security",
-            icon: ShieldCheck,
-            segment: "security",
-          },
-          ...(flags?.referrals
-            ? [{ name: "Referrals", icon: Gift, segment: "referrals" }]
-            : []),
-        ],
-      },
-
-      // Developer Settings
-      {
-        group: "Developer Settings",
-        tabs: [
-          {
-            name: "API Keys",
-            icon: Key,
-            segment: "tokens",
-          },
-          {
-            name: "OAuth Apps",
-            icon: CubeSettings,
-            segment: "oauth-apps",
-          },
-          ...(flags?.webhooks
-            ? [
-                {
-                  name: "Webhooks",
-                  icon: Webhook,
-                  segment: "webhooks",
-                },
-              ]
-            : []),
-        ],
-      },
-
-      // Account Settings
-      {
-        group: "Account Settings",
-        tabs: [
-          {
-            name: "Notifications",
-            icon: CircleInfo,
-            segment: "notifications",
-          },
-        ],
-      },
-    ],
-    [flags],
-  );
-
-  return (
-    <SettingsLayout tabs={tabs} tabContainerClassName="top-16">
-      {children}
-    </SettingsLayout>
-  );
-}
diff --git a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
index bc2ecb0794..173a5c5fec 100644
--- a/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/[slug]/settings/layout.tsx
@@ -1,12 +1,10 @@
 import { ReactNode } from "react";
-import WorkspaceSettingsLayoutClient from "./layout-client";
+import SettingsLayout from "../../../../../ui/layout/settings-layout";
 
 export default function WorkspaceSettingsLayout({
   children,
 }: {
   children: ReactNode;
 }) {
-  return (
-    <WorkspaceSettingsLayoutClient>{children}</WorkspaceSettingsLayoutClient>
-  );
+  return <SettingsLayout>{children}</SettingsLayout>;
 }
diff --git a/apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx b/apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx
index 8b23f97f71..1254680b89 100644
--- a/apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/account/settings/layout.tsx
@@ -1,5 +1,4 @@
 import SettingsLayout from "@/ui/layout/settings-layout";
-import { Gear2, Key, ShieldCheck } from "@dub/ui";
 import { ReactNode } from "react";
 
 export default function PersonalSettingsLayout({
@@ -7,32 +6,5 @@ export default function PersonalSettingsLayout({
 }: {
   children: ReactNode;
 }) {
-  const tabs = [
-    {
-      group: "",
-      tabs: [
-        {
-          name: "General",
-          icon: Gear2,
-          segment: null,
-        },
-        {
-          name: "Security",
-          icon: ShieldCheck,
-          segment: "security",
-        },
-        {
-          name: "API Keys",
-          icon: Key,
-          segment: "tokens",
-        },
-      ],
-    },
-  ];
-
-  return (
-    <SettingsLayout tabs={tabs} tabContainerClassName="top-[105px]">
-      {children}
-    </SettingsLayout>
-  );
+  return <SettingsLayout>{children}</SettingsLayout>;
 }
diff --git a/apps/web/app/app.dub.co/(dashboard)/layout.tsx b/apps/web/app/app.dub.co/(dashboard)/layout.tsx
index 15393dda32..141d2d31ad 100644
--- a/apps/web/app/app.dub.co/(dashboard)/layout.tsx
+++ b/apps/web/app/app.dub.co/(dashboard)/layout.tsx
@@ -12,7 +12,7 @@ export const metadata = constructMetadata();
 export default async function Layout({ children }: { children: ReactNode }) {
   return (
     <Providers>
-      <div className="min-h-screen w-full bg-gray-50/80">
+      <div className="min-h-screen w-full bg-white">
         <MainNav toolContent={<HelpButtonRSC />}>{children}</MainNav>
       </div>
       {/* <UserSurveyPopup /> */}
diff --git a/apps/web/ui/layout/main-nav.tsx b/apps/web/ui/layout/main-nav.tsx
index 47642ed2fa..0d95963080 100644
--- a/apps/web/ui/layout/main-nav.tsx
+++ b/apps/web/ui/layout/main-nav.tsx
@@ -49,14 +49,14 @@ export function MainNav({
   useKeyboardShortcut("n", () => setIsOpen((o) => !o));
 
   return (
-    <div className="min-h-screen sm:grid sm:grid-cols-[240px_minmax(0,1fr)]">
+    <div className="min-h-screen md:grid md:grid-cols-[240px_minmax(0,1fr)]">
       {/* Side nav backdrop */}
       <div
         className={cn(
-          "scrollbar-hide fixed left-0 top-0 z-50 h-screen w-full overflow-y-auto transition-[background-color,backdrop-filter] sm:sticky sm:z-auto sm:bg-transparent",
+          "scrollbar-hide fixed left-0 top-0 z-50 h-screen w-full overflow-y-auto transition-[background-color,backdrop-filter] md:sticky md:z-auto md:bg-transparent",
           isOpen
             ? "bg-black/20 backdrop-blur-sm"
-            : "bg-transparent max-sm:pointer-events-none",
+            : "bg-transparent max-md:pointer-events-none",
         )}
         onClick={(e) => {
           if (e.target === e.currentTarget) {
@@ -68,7 +68,7 @@ export function MainNav({
         {/* Side nav */}
         <nav
           className={cn(
-            "relative h-full w-[240px] max-w-full bg-neutral-100 transition-transform sm:translate-x-0",
+            "relative h-full w-[240px] max-w-full bg-neutral-100 transition-transform md:translate-x-0",
             !isOpen && "-translate-x-full",
           )}
         >
@@ -84,7 +84,7 @@ export function MainNav({
         </nav>
       </div>
       <div className="bg-neutral-100">
-        <div className="relative min-h-full bg-neutral-100 pt-px sm:rounded-tl-[16px] sm:bg-white">
+        <div className="relative min-h-full bg-neutral-100 pt-px md:rounded-tl-[16px] md:bg-white">
           <SideNavContext.Provider value={{ isOpen, setIsOpen }}>
             {children}
           </SideNavContext.Provider>
diff --git a/apps/web/ui/layout/page-content/index.tsx b/apps/web/ui/layout/page-content/index.tsx
index a4731c02c6..f379ff4a2f 100644
--- a/apps/web/ui/layout/page-content/index.tsx
+++ b/apps/web/ui/layout/page-content/index.tsx
@@ -9,22 +9,22 @@ export function PageContent({
   children,
 }: PropsWithChildren<{ title: ReactNode }>) {
   return (
-    <div className="bg-neutral-100 sm:bg-white">
-      <MaxWidthWrapper className="mt-3 sm:mt-6 sm:py-3">
+    <div className="bg-neutral-100 md:bg-white">
+      <MaxWidthWrapper className="mt-3 md:mt-6 md:py-3">
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-4">
             <NavButton />
-            <h1 className="text-xl font-semibold leading-7 text-neutral-900 sm:text-2xl">
+            <h1 className="text-xl font-semibold leading-7 text-neutral-900 md:text-2xl">
               {title}
             </h1>
           </div>
-          <div className="flex items-center gap-4 sm:hidden">
+          <div className="flex items-center gap-4 md:hidden">
             <HelpButtonRSC />
             <UserDropdown />
           </div>
         </div>
       </MaxWidthWrapper>
-      <div className="bg-white pt-2.5 max-sm:mt-3 max-sm:rounded-t-[16px]">
+      <div className="bg-white pt-2.5 max-md:mt-3 max-md:rounded-t-[16px]">
         {children}
       </div>
     </div>
diff --git a/apps/web/ui/layout/page-content/nav-button.tsx b/apps/web/ui/layout/page-content/nav-button.tsx
index ee5fc2759a..5de38376a4 100644
--- a/apps/web/ui/layout/page-content/nav-button.tsx
+++ b/apps/web/ui/layout/page-content/nav-button.tsx
@@ -14,7 +14,7 @@ export function NavButton() {
       variant="outline"
       onClick={() => setIsOpen((o) => !o)}
       icon={<LayoutSidebar className="size-4" />}
-      className="h-auto w-fit p-1 sm:hidden"
+      className="h-auto w-fit p-1 md:hidden"
     />
   );
 }
diff --git a/apps/web/ui/layout/settings-layout.tsx b/apps/web/ui/layout/settings-layout.tsx
index 824ea642c6..e667f1466c 100644
--- a/apps/web/ui/layout/settings-layout.tsx
+++ b/apps/web/ui/layout/settings-layout.tsx
@@ -1,67 +1,15 @@
-import { Icon, MaxWidthWrapper } from "@dub/ui";
-import { cn } from "@dub/utils";
-import { ReactNode } from "react";
-import NavLink from "./settings-nav-link";
-import { SettingsNavMobile } from "./settings-nav-mobile";
+import { MaxWidthWrapper } from "@dub/ui";
+import { PropsWithChildren } from "react";
+import { PageContent } from "./page-content";
 
-interface Tab {
-  name: string;
-  icon: Icon;
-  segment: string | null;
-}
-
-export interface SettingsLayoutProps {
-  tabs: {
-    group: string;
-    tabs: Tab[];
-  }[];
-  tabContainerClassName?: string;
-  children: ReactNode;
-}
-
-export default function SettingsLayout({
-  tabs,
-  tabContainerClassName,
-  children,
-}: SettingsLayoutProps) {
+export default function SettingsLayout({ children }: PropsWithChildren) {
   return (
-    <div className="relative min-h-[calc(100vh-16px)] bg-white">
-      <MaxWidthWrapper className="grid items-start gap-8 py-10 lg:grid-cols-5">
-        <div className="lg:hidden">
-          <SettingsNavMobile tabs={tabs}>
-            <Tabs tabs={tabs} />
-          </SettingsNavMobile>
-        </div>
-        <div
-          className={cn(
-            "hidden flex-wrap gap-4 lg:sticky lg:flex lg:grid",
-            tabContainerClassName,
-          )}
-        >
-          <Tabs tabs={tabs} />
-        </div>
-        <div className="grid gap-5 lg:col-span-4">{children}</div>
-      </MaxWidthWrapper>
-    </div>
-  );
-}
-
-function Tabs({ tabs }: Pick<SettingsLayoutProps, "tabs">) {
-  return (
-    <>
-      {tabs.map(({ group, tabs }) => (
-        <div key={group} className="flex flex-col gap-y-0.5">
-          {group && (
-            <span className="pb-1.5 text-sm text-gray-500">{group}</span>
-          )}
-
-          {tabs.map(({ name, icon, segment }) => (
-            <NavLink key={name} segment={segment} icon={icon}>
-              {name}
-            </NavLink>
-          ))}
-        </div>
-      ))}
-    </>
+    <PageContent title="">
+      <div className="relative min-h-[calc(100vh-16px)]">
+        <MaxWidthWrapper className="pb-10 pt-3">
+          <div className="grid gap-5">{children}</div>
+        </MaxWidthWrapper>
+      </div>
+    </PageContent>
   );
 }
diff --git a/apps/web/ui/layout/settings-nav-link.tsx b/apps/web/ui/layout/settings-nav-link.tsx
deleted file mode 100644
index 95351e63d6..0000000000
--- a/apps/web/ui/layout/settings-nav-link.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import { Icon } from "@dub/ui";
-import { cn } from "@dub/utils";
-import Link from "next/link";
-import { useParams, useSelectedLayoutSegment } from "next/navigation";
-import { ReactNode } from "react";
-
-export default function NavLink({
-  segment,
-  icon: Icon,
-  children,
-}: {
-  segment: string | null;
-  icon: Icon;
-  children: ReactNode;
-}) {
-  const selectedLayoutSegment = useSelectedLayoutSegment();
-  const { slug } = useParams() as {
-    slug?: string;
-  };
-
-  const href = `${slug ? `/${slug}` : "/account"}/settings${
-    segment ? `/${segment}` : ""
-  }`;
-
-  const isSelected = selectedLayoutSegment === segment;
-
-  return (
-    <Link
-      key={href}
-      href={href}
-      className={cn(
-        "flex items-center gap-2.5 whitespace-nowrap rounded-lg p-2 text-sm text-gray-950 outline-none transition-all duration-75",
-        "ring-black/50 focus-visible:ring-2",
-        isSelected
-          ? "bg-gray-950/5"
-          : "hover:bg-gray-950/5 active:bg-gray-950/10",
-      )}
-    >
-      {Icon && (
-        <Icon
-          className={cn(
-            "h-4 w-4 shrink-0",
-            isSelected ? "text-gray-950" : "text-gray-700",
-          )}
-        />
-      )}
-      {children}
-    </Link>
-  );
-}
diff --git a/apps/web/ui/layout/sidebar/icons/cursor-rays.tsx b/apps/web/ui/layout/sidebar/icons/cursor-rays.tsx
index 6624c349ec..46314e283f 100644
--- a/apps/web/ui/layout/sidebar/icons/cursor-rays.tsx
+++ b/apps/web/ui/layout/sidebar/icons/cursor-rays.tsx
@@ -5,7 +5,7 @@ export function CursorRays({
   isActive,
   className,
   ...rest
-}: { isActive: boolean } & SVGProps<SVGSVGElement>) {
+}: { isActive?: boolean } & SVGProps<SVGSVGElement>) {
   const cursorRef = useRef<SVGGElement>(null);
   const raysRef = useRef<SVGGElement>(null);
 
diff --git a/apps/web/ui/layout/sidebar/icons/hyperlink.tsx b/apps/web/ui/layout/sidebar/icons/hyperlink.tsx
index 07da83df95..e7899b54ed 100644
--- a/apps/web/ui/layout/sidebar/icons/hyperlink.tsx
+++ b/apps/web/ui/layout/sidebar/icons/hyperlink.tsx
@@ -3,7 +3,7 @@ import { SVGProps, useEffect, useRef } from "react";
 export function Hyperlink({
   isActive,
   ...rest
-}: { isActive: boolean } & SVGProps<SVGSVGElement>) {
+}: { isActive?: boolean } & SVGProps<SVGSVGElement>) {
   const ref = useRef<SVGSVGElement>(null);
 
   useEffect(() => {
diff --git a/apps/web/ui/layout/sidebar/icons/lines-y.tsx b/apps/web/ui/layout/sidebar/icons/lines-y.tsx
index 52f290bc04..770568c532 100644
--- a/apps/web/ui/layout/sidebar/icons/lines-y.tsx
+++ b/apps/web/ui/layout/sidebar/icons/lines-y.tsx
@@ -7,7 +7,7 @@ export function LinesY({
   isActive,
   className,
   ...rest
-}: { isActive: boolean } & SVGProps<SVGSVGElement>) {
+}: { isActive?: boolean } & SVGProps<SVGSVGElement>) {
   const line1Ref = useRef<SVGLineElement>(null);
   const line2Ref = useRef<SVGLineElement>(null);
   const line3Ref = useRef<SVGLineElement>(null);
diff --git a/apps/web/ui/layout/sidebar/items.ts b/apps/web/ui/layout/sidebar/items.ts
new file mode 100644
index 0000000000..4d80e28e06
--- /dev/null
+++ b/apps/web/ui/layout/sidebar/items.ts
@@ -0,0 +1,174 @@
+import { BetaFeatures } from "@/lib/types";
+import {
+  CircleInfo,
+  ConnectedDots,
+  CubeSettings,
+  Gear2,
+  Gift,
+  Globe,
+  Key,
+  Receipt2,
+  ShieldCheck,
+  Tag,
+  Users6,
+} from "@dub/ui/src/icons";
+import { Webhook } from "lucide-react";
+import { ComponentType, SVGProps } from "react";
+import { CursorRays } from "./icons/cursor-rays";
+import { Hyperlink } from "./icons/hyperlink";
+import { LinesY } from "./icons/lines-y";
+
+type NavItem = {
+  name: string;
+  icon: ComponentType<SVGProps<SVGSVGElement> & { isActive?: boolean }>;
+  href: string;
+  exact?: boolean;
+};
+
+export const ITEMS: Record<
+  string,
+  {
+    name?: string;
+    items: (args: {
+      slug: string;
+      flags?: Record<BetaFeatures, boolean>;
+    }) => NavItem[];
+  }[]
+> = {
+  // Top-level
+  default: [
+    {
+      items: ({ slug }) => [
+        {
+          name: "Links",
+          icon: Hyperlink,
+          href: `/${slug}`,
+          exact: true,
+        },
+        {
+          name: "Analytics",
+          icon: LinesY,
+          href: `/${slug}/analytics`,
+        },
+        {
+          name: "Events",
+          icon: CursorRays,
+          href: `/${slug}/events`,
+        },
+      ],
+    },
+  ],
+
+  // Workspace settings
+  workspaceSettings: [
+    {
+      name: "Workspace",
+      items: ({ slug, flags }) => [
+        {
+          name: "General",
+          icon: Gear2,
+          href: `/${slug}/settings`,
+          exact: true,
+        },
+        {
+          name: "Domains",
+          icon: Globe,
+          href: `/${slug}/settings/domains`,
+        },
+        {
+          name: "Tags",
+          icon: Tag,
+          href: `/${slug}/settings/tags`,
+        },
+        {
+          name: "Billing",
+          icon: Receipt2,
+          href: `/${slug}/settings/billing`,
+        },
+        {
+          name: "People",
+          icon: Users6,
+          href: `/${slug}/settings/people`,
+        },
+        {
+          name: "Integrations",
+          icon: ConnectedDots,
+          href: `/${slug}/settings/integrations`,
+        },
+        {
+          name: "Security",
+          icon: ShieldCheck,
+          href: `/${slug}/settings/security`,
+        },
+        ...(flags?.referrals
+          ? [
+              {
+                name: "Referrals",
+                icon: Gift,
+                href: `/${slug}/settings/referrals`,
+              },
+            ]
+          : []),
+      ],
+    },
+    {
+      name: "Developer",
+      items: ({ slug, flags }) => [
+        {
+          name: "API Keys",
+          icon: Key,
+          href: `/${slug}/settings/tokens`,
+        },
+        {
+          name: "OAuth Apps",
+          icon: CubeSettings,
+          href: `/${slug}/settings/oauth-apps`,
+        },
+        ...(flags?.webhooks
+          ? [
+              {
+                name: "Webhooks",
+                icon: Webhook,
+                href: `/${slug}/settings/webhooks`,
+              },
+            ]
+          : []),
+      ],
+    },
+    {
+      name: "Account",
+      items: ({ slug }) => [
+        {
+          name: "Notifications",
+          icon: CircleInfo,
+          href: `/${slug}/settings/notifications`,
+        },
+      ],
+    },
+  ],
+
+  // User settings
+  userSettings: [
+    {
+      name: "Account",
+      items: () => [
+        {
+          name: "General",
+          icon: Gear2,
+          href: "/account/settings",
+          exact: true,
+        },
+        {
+          name: "Security",
+          icon: ShieldCheck,
+          href: "/account/settings/security",
+        },
+        {
+          name: "API Keys",
+          icon: Key,
+          href: "/account/settings/tokens",
+        },
+      ],
+    },
+  ],
+};
diff --git a/apps/web/ui/layout/sidebar/sidebar-nav.tsx b/apps/web/ui/layout/sidebar/sidebar-nav.tsx
index 91f544f89c..d78f3f3328 100644
--- a/apps/web/ui/layout/sidebar/sidebar-nav.tsx
+++ b/apps/web/ui/layout/sidebar/sidebar-nav.tsx
@@ -1,65 +1,121 @@
+import useWorkspace from "@/lib/swr/use-workspace";
 import { Wordmark } from "@dub/ui";
 import { cn } from "@dub/utils";
+import { AnimatePresence, motion } from "framer-motion";
+import { ChevronLeft } from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { ReactNode, Suspense, useMemo } from "react";
-import { CursorRays } from "./icons/cursor-rays";
-import { Hyperlink } from "./icons/hyperlink";
-import { LinesY } from "./icons/lines-y";
+import { ITEMS } from "./items";
 import UserDropdown from "./user-dropdown";
 import { WorkspaceDropdown } from "./workspace-dropdown";
 
 export function SidebarNav({ toolContent }: { toolContent?: ReactNode }) {
   const { slug } = useParams() as { slug?: string };
+  const { flags } = useWorkspace();
   const pathname = usePathname();
 
-  const tabs = useMemo(
-    () => [
-      { name: "Links", icon: Hyperlink, href: `/${slug}` },
-      { name: "Analytics", icon: LinesY, href: `/${slug}/analytics` },
-      { name: "Events", icon: CursorRays, href: `/${slug}/events` },
-    ],
-    [slug],
-  );
+  const area = useMemo(() => {
+    return pathname.startsWith("/account/settings")
+      ? "userSettings"
+      : pathname.startsWith(`/${slug}/settings`)
+        ? "workspaceSettings"
+        : "default";
+  }, [slug, pathname]);
+
+  const itemGroups = useMemo(() => ITEMS[area], [area]);
 
   return (
     <div className="relative p-3 text-gray-500">
-      <div className="flex items-start justify-between gap-1">
-        <Wordmark className="ml-1 h-6" />
-        <div className="hidden items-center gap-3 sm:flex">
+      <div className="relative mb-7 flex items-start justify-between gap-1">
+        <AnimatePresence>
+          <motion.div
+            key={area}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{
+              opacity: 0,
+              position: "absolute",
+            }}
+            transition={{ duration: 0.15, ease: "easeInOut" }}
+          >
+            {area === "default" ? (
+              <Wordmark className="ml-1 h-6" />
+            ) : (
+              <Link
+                href={slug ? `/${slug}` : "/"}
+                className="group -my-1 flex items-center gap-2 py-2 text-sm font-medium text-neutral-900"
+              >
+                <ChevronLeft className="size-4 text-neutral-500 transition-transform duration-100 group-hover:-translate-x-0.5" />
+                Settings
+              </Link>
+            )}
+          </motion.div>
+        </AnimatePresence>
+        <div className="hidden items-center gap-3 md:flex">
           <Suspense fallback={null}>{toolContent}</Suspense>
           <UserDropdown />
         </div>
       </div>
+      <div className="relative w-full">
+        <AnimatePresence>
+          <motion.div
+            key={area}
+            className="relative left-0 top-0 w-full"
+            initial={{ opacity: 0, x: area === "default" ? "-100%" : "100%" }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{
+              opacity: 0,
+              position: "absolute",
+              x: area === "default" ? "-100%" : "100%",
+            }}
+            transition={{ duration: 0.15, ease: "easeInOut" }}
+          >
+            {area === "default" && (
+              <div className="mt-7">
+                <WorkspaceDropdown />
+              </div>
+            )}
 
-      <div className="mt-7">
-        <WorkspaceDropdown />
-      </div>
-
-      <div className="mt-4 flex flex-col gap-0.5">
-        {tabs.map(({ name, icon: Icon, href }) => {
-          const isActive =
-            href === `/${slug}` ? pathname === href : pathname.startsWith(href);
+            <div className="mt-4 flex flex-col gap-4">
+              {itemGroups.map(({ name, items }, idx) => (
+                <div key={`${name}-${idx}`} className="flex flex-col gap-0.5">
+                  {name && (
+                    <div className="mb-2 pl-1 text-sm text-neutral-500">
+                      {name}
+                    </div>
+                  )}
+                  {items({ slug: slug || "", flags }).map(
+                    ({ name, icon: Icon, href, exact }) => {
+                      const isActive = exact
+                        ? pathname === href
+                        : pathname.startsWith(href);
 
-          return (
-            <Link
-              key={href}
-              href={href}
-              data-active={isActive}
-              className={cn(
-                "group flex items-center gap-2.5 rounded-md p-2 text-sm text-neutral-600 transition-[color,font-weight] duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80",
-                isActive &&
-                  "bg-blue-100/50 font-medium text-blue-600 hover:bg-blue-100/80 active:bg-blue-100",
-              )}
-            >
-              <Icon
-                className="size-4 text-neutral-500 transition-colors duration-75 group-data-[active=true]:text-blue-600"
-                isActive={isActive}
-              />
-              {name}
-            </Link>
-          );
-        })}
+                      return (
+                        <Link
+                          key={href}
+                          href={href}
+                          data-active={isActive}
+                          className={cn(
+                            "group flex items-center gap-2.5 rounded-md p-2 text-sm leading-none text-neutral-600 transition-[color,font-weight] duration-75 hover:bg-neutral-200/50 active:bg-neutral-200/80",
+                            isActive &&
+                              "bg-blue-100/50 font-medium text-blue-600 hover:bg-blue-100/80 active:bg-blue-100",
+                          )}
+                        >
+                          <Icon
+                            className="size-4 text-neutral-500 transition-colors duration-75 group-data-[active=true]:text-blue-600"
+                            isActive={isActive}
+                          />
+                          {name}
+                        </Link>
+                      );
+                    },
+                  )}
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        </AnimatePresence>
       </div>
     </div>
   );
diff --git a/apps/web/ui/layout/sidebar/workspace-dropdown.tsx b/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
index dc7b9a24ec..2653c87b18 100644
--- a/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
+++ b/apps/web/ui/layout/sidebar/workspace-dropdown.tsx
@@ -15,16 +15,29 @@ import { ChevronsUpDown } from "lucide-react";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
-import { useCallback, useContext, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 export function WorkspaceDropdown() {
   const { workspaces } = useWorkspaces();
   const { data: session, status } = useSession();
-  const { slug, key } = useParams() as {
+  const { slug: currentSlug, key } = useParams() as {
     slug?: string;
     key?: string;
   };
 
+  // Prevent slug from changing to empty to avoid UI switching during nav animation
+  const [slug, setSlug] = useState(currentSlug);
+  useEffect(() => {
+    if (currentSlug) setSlug(currentSlug);
+  }, [currentSlug]);
+
   const selected = useMemo(() => {
     const selectedWorkspace = workspaces?.find(
       (workspace) => workspace.slug === slug,
@@ -175,8 +188,6 @@ function WorkspaceList({
     [domain, key, pathname, selected.slug],
   );
 
-  console.log(scrollProgress);
-
   return (
     <div className="relative w-full">
       <div