From 9810f1fe936df3442759ba26b3a41843849927b5 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 5 Sep 2026 18:52:43 -0700
Subject: [PATCH 1/2] feat(org): organization surface, app entry, and shared
 rail chrome
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the organization view at /o/[organizationId] — the viewer's own view of one
organization outside any workspace — and makes it the default landing for anyone
who belongs to an organization.

Organization surface
- Membership-gated layout with an explicit denial for non-members
- Sidebar mirroring the workspace rail: org header (empty menu for now), Search
  and Collapse, Home / Integrations / Skills / Workspaces tabs, Chats section,
  profile + help footer; the Workspaces tab grows a rail flyout when collapsed
- Empty pages for home, integrations, skills, workspaces, and chat/[chatId]

App entry
- New /home route resolves on the server to the organization home or the
  workspace picker; /o resolves the same way
- Every default post-auth destination now points at APP_ENTRY_PATH via
  lib/navigation/paths (proxy, login/signup/SSO/verify, OAuth callbacks,
  billing return URLs, invites, impersonation, emails, desktop start route)

Shared chrome
- WorkspaceChrome takes its sidebar as a prop and exposes collapse/peek state
  through a context, so both surfaces share one shell
- Flat hairline divider between rail and pane; no gutter, no radius, and no
  layout transitions on collapse, fullscreen, or disclosure
- emcn useScrollEdges + scrollFadeClass: one scroll-edge fade that only fires
  while content is hidden past an edge; dividers move to the neighboring block
- IdentityTile replaces every workspace/org avatar; no per-entity color in the
  product (the DB column stays), Workspaces icon drawn in the house style
- Sidebar default width 256px, capped at 400px; SidebarTooltip, isNavItemActive,
  getWorkspaceInitial, and the help URLs extracted to shared modules
---
 .claude/rules/emcn-components.md              |   1 +
 .claude/rules/sim-styling.md                  |   4 +
 apps/desktop/e2e/smoke.spec.ts                |   6 +-
 apps/desktop/src/main/app-routes.test.ts      |  12 +-
 apps/desktop/src/main/app-routes.ts           |  16 +-
 .../src/main/session-lifecycle.test.ts        |  10 +-
 apps/desktop/src/main/session-lifecycle.ts    |   9 +-
 apps/sim/app/(auth)/auth-redirect.test.ts     |   2 +-
 apps/sim/app/(auth)/auth-redirect.ts          |  15 +-
 .../components/social-login-buttons.tsx       |   3 +-
 apps/sim/app/(auth)/login/login-form.tsx      |   4 +-
 apps/sim/app/(auth)/signup/signup-form.tsx    |  11 +-
 .../sim/app/(auth)/verify/use-verification.ts |   9 +-
 .../components/error-state/error-state.tsx    |   5 +-
 .../components/auth-modal/auth-modal.tsx      |   3 +-
 .../_shell/desktop-title-bar-surfaces.test.ts |  15 +-
 apps/sim/app/_styles/globals.css              |  74 +---
 .../api/auth/oauth2/authorize/route.test.ts   |  10 +-
 .../app/api/auth/oauth2/authorize/route.ts    |  19 +-
 .../auth/oauth2/callback/instagram/route.ts   |  33 +-
 .../oauth2/callback/quickbooks/route.test.ts  |   2 +-
 .../auth/oauth2/callback/quickbooks/route.ts  |   3 +-
 .../api/auth/oauth2/callback/shopify/route.ts |  21 +-
 .../sim/app/api/auth/trello/callback/route.ts |   3 +-
 apps/sim/app/api/billing/portal/route.ts      |   4 +-
 .../[id]/route.test.ts                        |   2 +-
 apps/sim/app/api/workspaces/[id]/route.ts     |   8 +-
 apps/sim/app/api/workspaces/route.ts          |   4 +-
 .../app/desktop/connect/switch-account.tsx    |   2 +-
 .../claim/[id]/enterprise-owner-claim.tsx     |   3 +-
 apps/sim/app/home/page.test.tsx               |  46 +++
 apps/sim/app/home/page.tsx                    |  18 +
 apps/sim/app/invite/[id]/invite.tsx           |   3 +-
 apps/sim/app/layout.tsx                       |  17 +-
 apps/sim/app/manifest.ts                      |   3 +-
 .../o/[organizationId]/chat/[chatId]/page.tsx |   9 +
 .../components/organization-access-denied.tsx |  27 ++
 .../chats-section/chats-section.test.tsx      | 121 ++++++
 .../chats-section/chats-section.tsx           | 184 +++++++++
 .../components/chats-section/index.ts         |   1 +
 .../organization-sidebar/components/index.ts  |   4 +
 .../components/organization-footer/index.ts   |   1 +
 .../organization-footer.tsx                   | 238 ++++++++++++
 .../components/organization-header/index.ts   |   1 +
 .../organization-header.tsx                   |  98 +++++
 .../workspaces-rail-flyout/index.ts           |   1 +
 .../workspaces-rail-flyout.test.tsx           |  97 +++++
 .../workspaces-rail-flyout.tsx                |  40 ++
 .../organization-sidebar/hooks/index.ts       |   4 +
 .../hooks/use-collapsed-tooltips.ts           |  23 ++
 .../hooks/use-organization-chats.ts           |  21 +
 .../hooks/use-organization-workspaces.ts      |  21 +
 .../components/organization-sidebar/index.ts  |   1 +
 .../organization-sidebar/navigation.ts        |  35 ++
 .../organization-sidebar.tsx                  | 358 ++++++++++++++++++
 apps/sim/app/o/[organizationId]/error.tsx     |  18 +
 apps/sim/app/o/[organizationId]/home/page.tsx |   9 +
 .../o/[organizationId]/integrations/page.tsx  |   9 +
 .../app/o/[organizationId]/layout.test.tsx    |  84 ++++
 apps/sim/app/o/[organizationId]/layout.tsx    |  54 +++
 apps/sim/app/o/[organizationId]/not-found.tsx |  31 ++
 apps/sim/app/o/[organizationId]/page.tsx      |  11 +
 .../providers/organization-provider.tsx       |  32 ++
 .../app/o/[organizationId]/skills/page.tsx    |   9 +
 .../o/[organizationId]/workspaces/page.tsx    |   9 +
 apps/sim/app/o/page.tsx                       |  16 +
 .../chat-complete-handoff.test.tsx            |   2 +-
 .../chat-complete/chat-complete-handoff.tsx   |   3 +-
 .../app/oauth/credential-connected/page.tsx   |   3 +-
 .../impersonation-banner.tsx                  |   3 +-
 .../components/workspace-access-denied.tsx    |   3 +-
 .../components/workspace-chrome/index.ts      |   2 +
 .../sidebar-chrome-context.tsx                |  47 +++
 .../workspace-chrome/workspace-chrome.tsx     | 107 ++----
 .../special-tags/use-oauth-chip-connection.ts |  20 +-
 .../workspace/[workspaceId]/layout.test.tsx   |   4 +
 .../app/workspace/[workspaceId]/layout.tsx    |   6 +-
 .../settings/components/admin/admin.tsx       |   3 +-
 .../team-management/team-management.tsx       |   7 +-
 .../connection-block-selector.tsx             |   1 -
 .../hooks/float/use-float-resize.ts           |   4 +-
 .../collapsed-sidebar-menu.test.tsx           |   1 -
 .../collapsed-sidebar-menu.tsx                |  27 +-
 .../w/components/sidebar/components/index.ts  |   3 +-
 .../rail-resource-flyout.tsx                  |   2 -
 .../command-chrome/command-chrome.test.tsx    |  10 +-
 .../command-chrome/command-chrome.tsx         |  57 ++-
 .../command-items/command-items.tsx           |  28 +-
 .../search-groups/search-groups.test.tsx      |   6 +-
 .../search-groups/search-groups.tsx           |   1 -
 .../components/search-modal/search-modal.tsx  |   1 -
 .../sidebar/components/search-modal/utils.ts  |   1 -
 .../settings-sidebar/settings-sidebar.tsx     |  44 +--
 .../sidebar-footer/sidebar-footer.test.tsx    |  10 +-
 .../sidebar-footer/sidebar-footer.tsx         |  12 +-
 .../components/sidebar-nav-chip/index.ts      |   2 +-
 .../sidebar-nav-chip/sidebar-nav-chip.tsx     |  11 +
 .../sidebar-section/sidebar-section.tsx       |  10 +-
 .../components/sidebar-tooltip/index.ts       |   1 +
 .../sidebar-tooltip/sidebar-tooltip.tsx       |  35 ++
 .../status-notice/status-notice.tsx           |   8 +-
 .../workflow-list/workflow-list.tsx           |   2 +-
 .../workspace-header/workspace-header.tsx     | 154 +++-----
 .../w/components/sidebar/constants.ts         |  29 +-
 .../sidebar/hooks/use-sidebar-resize.ts       |  19 +-
 .../sidebar/hooks/use-workspace-management.ts |   2 +-
 .../w/components/sidebar/sidebar.tsx          | 140 ++-----
 .../emails/billing/credit-purchase-email.tsx  |   3 +-
 .../identity-tile/identity-tile.tsx           |  56 +++
 .../components/settings/settings-sidebar.tsx  |  55 +--
 .../settings/standalone-settings-shell.tsx    |  10 +-
 apps/sim/ee/sso/components/sso-form.test.tsx  |  10 +-
 apps/sim/ee/sso/components/sso-form.tsx       |   6 +-
 apps/sim/hooks/queries/workspace.ts           |   2 +-
 apps/sim/hooks/use-settings-navigation.ts     |   3 +-
 apps/sim/lib/api/contracts/workspaces.ts      |   9 -
 apps/sim/lib/auth/auth.ts                     |   3 +-
 apps/sim/lib/auth/stale-session-recovery.ts   |   2 +-
 apps/sim/lib/billing/core/usage.ts            |   3 +-
 .../sim/lib/billing/enterprise-owner-claim.ts |   3 +-
 apps/sim/lib/billing/webhooks/invoices.ts     |   5 +-
 apps/sim/lib/copilot/tools/handlers/oauth.ts  |   3 +-
 apps/sim/lib/help-links.ts                    |   5 +
 apps/sim/lib/invitations/core.ts              |   3 +-
 apps/sim/lib/navigation/paths.test.ts         |  37 ++
 apps/sim/lib/navigation/paths.ts              |  55 +++
 .../lib/navigation/resolve-app-entry.test.ts  |  39 ++
 apps/sim/lib/navigation/resolve-app-entry.ts  |  20 +
 apps/sim/lib/organizations/surface.test.ts    |  76 ++++
 apps/sim/lib/organizations/surface.ts         |  87 +++++
 apps/sim/lib/workspaces/colors.ts             |  17 -
 apps/sim/lib/workspaces/create.ts             |   7 -
 apps/sim/lib/workspaces/initials.ts           |   8 +
 apps/sim/proxy.ts                             |  17 +-
 apps/sim/stores/constants.ts                  |  21 +-
 apps/sim/stores/sidebar/store.test.ts         |  16 +-
 apps/sim/stores/sidebar/store.ts              |  23 +-
 .../scroll-fade/scroll-fade.module.css        |  39 ++
 .../src/components/scroll-fade/scroll-fade.ts |  39 ++
 .../emcn/src/hooks/use-scroll-edges.test.tsx  | 131 +++++++
 packages/emcn/src/hooks/use-scroll-edges.ts   |  74 ++++
 packages/emcn/src/icons/index.ts              |   1 +
 packages/emcn/src/icons/workspaces.tsx        |  30 ++
 packages/emcn/src/index.ts                    |   7 +
 144 files changed, 2992 insertions(+), 731 deletions(-)
 create mode 100644 apps/sim/app/home/page.test.tsx
 create mode 100644 apps/sim/app/home/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/chat/[chatId]/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-access-denied.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/organization-footer.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.test.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-collapsed-tooltips.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chats.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/navigation.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/error.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/home/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/integrations/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/layout.test.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/layout.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/not-found.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/providers/organization-provider.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/skills/page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/workspaces/page.tsx
 create mode 100644 apps/sim/app/o/page.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/sidebar-tooltip.tsx
 create mode 100644 apps/sim/components/identity-tile/identity-tile.tsx
 create mode 100644 apps/sim/lib/help-links.ts
 create mode 100644 apps/sim/lib/navigation/paths.test.ts
 create mode 100644 apps/sim/lib/navigation/paths.ts
 create mode 100644 apps/sim/lib/navigation/resolve-app-entry.test.ts
 create mode 100644 apps/sim/lib/navigation/resolve-app-entry.ts
 create mode 100644 apps/sim/lib/organizations/surface.test.ts
 create mode 100644 apps/sim/lib/organizations/surface.ts
 create mode 100644 apps/sim/lib/workspaces/initials.ts
 create mode 100644 packages/emcn/src/components/scroll-fade/scroll-fade.module.css
 create mode 100644 packages/emcn/src/components/scroll-fade/scroll-fade.ts
 create mode 100644 packages/emcn/src/hooks/use-scroll-edges.test.tsx
 create mode 100644 packages/emcn/src/hooks/use-scroll-edges.ts
 create mode 100644 packages/emcn/src/icons/workspaces.tsx

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index f4a88a40314..b201005aae2 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -32,6 +32,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
 - **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
+- **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
 ## Modal keyboard defaults
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index 51a882f8607..fc692a1e618 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -60,6 +60,10 @@ Use `DropdownMenuItemLabel` for a human label beside menu icons, checks, shortcu
 
 Do not apply the fade universally to editable or mirrored input values, code, logs, paths, filenames that use intentional middle truncation, dense or virtualized grids, or a composite container that also holds icons/actions. Those keep their purpose-built overflow behavior. Multiline copy uses an intentional `line-clamp-*` treatment.
 
+## Scroll Edges
+
+A scroll region that can hide rows past an edge uses `useScrollEdges` with `scrollFadeClass` + `scrollFadeAttributes` from `@sim/emcn`: a 12px fade at an edge only while content is hidden beyond it, never at rest. The region's baseline padding lives on the scroll box itself (so rows pass through it under the fade), and the divider at that edge is drawn by the neighboring block, conditional on the same edge. Never hand-roll a `mask-image` gradient or a `scrollTop > 0` effect for this.
+
 ## Font Weight
 
 Three steps, Tailwind's stock scale, nothing else: **`font-normal` (400)**, **`font-medium` (500)**, **`font-semibold` (600)**. 400 is the document default, so body text, chip labels, sidebar items, and headings carry **no weight class at all** — they inherit. Reach for a class only to step *up* from body.
diff --git a/apps/desktop/e2e/smoke.spec.ts b/apps/desktop/e2e/smoke.spec.ts
index 4b6c03016ca..df17dd4f51f 100644
--- a/apps/desktop/e2e/smoke.spec.ts
+++ b/apps/desktop/e2e/smoke.spec.ts
@@ -10,7 +10,7 @@ import { _electron as electron, expect, test } from '@playwright/test'
 const DESKTOP_DIR = fileURLToPath(new URL('..', import.meta.url))
 
 const PAGES: Record<string, string> = {
-  '/workspace': `<!doctype html><html><head><title>Sim Fixture</title></head><body>
+  '/home': `<!doctype html><html><head><title>Sim Fixture</title></head><body>
     <h1 id="app">fixture-app</h1>
     <button id="internal-blank" onclick="window.open('/workspace/two', '_blank')">internal</button>
     <button id="external-blank" onclick="window.open('https://docs.sim.ai/x', '_blank')">external</button>
@@ -82,7 +82,7 @@ test.describe('desktop shell smoke', () => {
     app = await launchApp(origin)
     const window = await app.firstWindow()
     await expect(window.locator('#app')).toHaveText('fixture-app')
-    expect(window.url()).toBe(`${origin}/workspace`)
+    expect(window.url()).toBe(`${origin}/home`)
   })
 
   test('internal window.open creates an independent full Sim window', async () => {
@@ -150,7 +150,7 @@ test.describe('desktop shell smoke', () => {
         app.evaluate(() => (globalThis as { __openedExternal?: string[] }).__openedExternal)
       )
       .toEqual(['https://docs.sim.ai/navigation'])
-    expect(window.url()).toBe(`${origin}/workspace`)
+    expect(window.url()).toBe(`${origin}/home`)
   })
 
   test('unreachable origin shows the bundled offline page', async () => {
diff --git a/apps/desktop/src/main/app-routes.test.ts b/apps/desktop/src/main/app-routes.test.ts
index 245019bdc51..6816c745736 100644
--- a/apps/desktop/src/main/app-routes.test.ts
+++ b/apps/desktop/src/main/app-routes.test.ts
@@ -5,15 +5,15 @@ describe('app routes', () => {
   it('derives the new-chat route from the last workspace route', () => {
     expect(newChatRoute('/workspace/ws1/w/wf2')).toBe('/workspace/ws1/home')
     expect(newChatRoute('/workspace/ws1/home?resource=r1')).toBe('/workspace/ws1/home')
-    expect(newChatRoute('/account')).toBe('/workspace')
-    expect(newChatRoute(undefined)).toBe('/workspace')
-    expect(newChatRoute('//evil.example')).toBe('/workspace')
+    expect(newChatRoute('/account')).toBe('/home')
+    expect(newChatRoute(undefined)).toBe('/home')
+    expect(newChatRoute('//evil.example')).toBe('/home')
   })
 
   it('derives the settings route from the last workspace route', () => {
     expect(settingsRoute('/workspace/ws1/w/wf2')).toBe('/workspace/ws1/settings/desktop')
-    expect(settingsRoute('/account')).toBe('/workspace')
-    expect(settingsRoute(undefined)).toBe('/workspace')
-    expect(settingsRoute('//evil.example')).toBe('/workspace')
+    expect(settingsRoute('/account')).toBe('/home')
+    expect(settingsRoute(undefined)).toBe('/home')
+    expect(settingsRoute('//evil.example')).toBe('/home')
   })
 })
diff --git a/apps/desktop/src/main/app-routes.ts b/apps/desktop/src/main/app-routes.ts
index 6e877edd013..abbf62bba33 100644
--- a/apps/desktop/src/main/app-routes.ts
+++ b/apps/desktop/src/main/app-routes.ts
@@ -10,6 +10,12 @@ import { isSafeInternalPath } from '@/main/config'
  * do with the tray, and the tray can be absent entirely.
  */
 
+/**
+ * The web app's signed-in entry. It resolves to the organization the user belongs
+ * to, or to their workspaces, so the shell never has to know which applies.
+ */
+export const APP_ENTRY_ROUTE = '/home'
+
 /** Workspace id from the last visited route, or null when it carries none. */
 function workspaceIdFromRoute(lastRoute: string | undefined): string | null {
   if (isSafeInternalPath(lastRoute)) {
@@ -23,19 +29,19 @@ function workspaceIdFromRoute(lastRoute: string | undefined): string | null {
 
 /**
  * Route for "New Chat": the home (chat) surface of the workspace the user was
- * last in, falling back to the workspace picker redirect when the last route
- * carries no workspace.
+ * last in, falling back to the app entry when the last route carries no
+ * workspace.
  */
 export function newChatRoute(lastRoute: string | undefined): string {
   const workspaceId = workspaceIdFromRoute(lastRoute)
-  return workspaceId ? `/workspace/${workspaceId}/home` : '/workspace'
+  return workspaceId ? `/workspace/${workspaceId}/home` : APP_ENTRY_ROUTE
 }
 
 /**
  * Route for "Settings…": the Sim app's settings surface for the workspace the
- * user was last in, falling back to the workspace picker redirect.
+ * user was last in, falling back to the app entry.
  */
 export function settingsRoute(lastRoute: string | undefined): string {
   const workspaceId = workspaceIdFromRoute(lastRoute)
-  return workspaceId ? `/workspace/${workspaceId}/settings/desktop` : '/workspace'
+  return workspaceId ? `/workspace/${workspaceId}/settings/desktop` : APP_ENTRY_ROUTE
 }
diff --git a/apps/desktop/src/main/session-lifecycle.test.ts b/apps/desktop/src/main/session-lifecycle.test.ts
index b359110bf90..bf441fe3f9f 100644
--- a/apps/desktop/src/main/session-lifecycle.test.ts
+++ b/apps/desktop/src/main/session-lifecycle.test.ts
@@ -75,9 +75,9 @@ describe('decideStartRoute', () => {
   })
 
   it('falls back to /workspace for missing, unsafe, or auth-surface last routes', () => {
-    expect(decideStartRoute(undefined)).toBe('/workspace')
-    expect(decideStartRoute('//evil.example')).toBe('/workspace')
-    expect(decideStartRoute('/login')).toBe('/workspace')
+    expect(decideStartRoute(undefined)).toBe('/home')
+    expect(decideStartRoute('//evil.example')).toBe('/home')
+    expect(decideStartRoute('/login')).toBe('/home')
   })
 })
 
@@ -94,11 +94,11 @@ describe('resolveStartRoute', () => {
     )
   })
 
-  it('falls back to the workspace picker after confirmed access denial', async () => {
+  it('falls back to the app entry after confirmed access denial', async () => {
     const session = sessionWithResponse(403, { error: 'Workspace access denied' })
 
     await expect(resolveStartRoute(session, APP, '/workspace/revoked/chat/c1')).resolves.toBe(
-      '/workspace'
+      '/home'
     )
   })
 
diff --git a/apps/desktop/src/main/session-lifecycle.ts b/apps/desktop/src/main/session-lifecycle.ts
index c6d47899b2b..5a8eee85932 100644
--- a/apps/desktop/src/main/session-lifecycle.ts
+++ b/apps/desktop/src/main/session-lifecycle.ts
@@ -7,6 +7,7 @@ import {
   completeAccountDataTeardown,
   waitForAccountDataMutations,
 } from '@/main/account-data-generation'
+import { APP_ENTRY_ROUTE } from '@/main/app-routes'
 import { isSafeInternalPath } from '@/main/config'
 import { isAuthSurfacePath, openExternalSafe } from '@/main/navigation'
 import type { EventRecorder } from '@/main/observability'
@@ -60,14 +61,14 @@ export function isLogoutNavigation(rawUrl: string, appOrigin: string): boolean {
 
 /**
  * Picks the route to load at launch: the last visited route (when safe and
- * not itself an auth surface), falling back to /workspace. A signed-out
+ * not itself an auth surface), falling back to the app entry. A signed-out
  * partition is handled by the web app's own login redirect.
  */
 export function decideStartRoute(lastRoute: string | undefined): string {
   if (lastRoute && isSafeInternalPath(lastRoute) && !isAuthSurfacePath(lastRoute)) {
     return lastRoute
   }
-  return '/workspace'
+  return APP_ENTRY_ROUTE
 }
 
 function workspaceIdFromRoute(route: string): string | null {
@@ -110,8 +111,8 @@ export async function resolveStartRoute(
       }
     )
     if (response.status === 403) {
-      logger.info('Saved workspace route is no longer accessible; opening workspace picker')
-      return '/workspace'
+      logger.info('Saved workspace route is no longer accessible; opening the app entry')
+      return APP_ENTRY_ROUTE
     }
     return route
   } catch {
diff --git a/apps/sim/app/(auth)/auth-redirect.test.ts b/apps/sim/app/(auth)/auth-redirect.test.ts
index 93a94dd6eae..5361878dec2 100644
--- a/apps/sim/app/(auth)/auth-redirect.test.ts
+++ b/apps/sim/app/(auth)/auth-redirect.test.ts
@@ -32,7 +32,7 @@ describe('resolvePostSignupDestination', () => {
   it('never routes to verify when no mail provider is configured', () => {
     expect(
       resolvePostSignupDestination({ emailVerificationEnabled: false, redirectUrl: '' })
-    ).toEqual({ kind: 'workspace' })
+    ).toEqual({ kind: 'entry' })
   })
 
   it('preserves the callback URL when verification is not enforceable', () => {
diff --git a/apps/sim/app/(auth)/auth-redirect.ts b/apps/sim/app/(auth)/auth-redirect.ts
index 269528c0bb1..4353b5fc75d 100644
--- a/apps/sim/app/(auth)/auth-redirect.ts
+++ b/apps/sim/app/(auth)/auth-redirect.ts
@@ -1,3 +1,5 @@
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
+
 /**
  * Where the user goes once authentication finishes, carried across the login →
  * signup → verify hops. Written only after `validateCallbackUrl` accepts it, and
@@ -8,19 +10,22 @@ export const POST_AUTH_REDIRECT_STORAGE_KEY = 'postAuthRedirectUrl'
 /** Route the verify hop lives at, entered only from signup. */
 export const VERIFY_FROM_SIGNUP_ROUTE = '/verify?fromSignup=true'
 
-/** Default post-auth destination when no callback URL was carried in. */
-export const DEFAULT_POST_AUTH_ROUTE = '/workspace'
+/**
+ * Default post-auth destination when no callback URL was carried in: the app
+ * entry, which resolves to the viewer's organization or their workspaces.
+ */
+export const DEFAULT_POST_AUTH_ROUTE = APP_ENTRY_PATH
 
 /**
  * Where a successful email signup goes next.
  * - `verify`: the verification hop, which owns the post-auth redirect from there
  * - `redirect`: the validated callback URL the visitor arrived with
- * - `workspace`: the default destination
+ * - `entry`: the default destination, {@link DEFAULT_POST_AUTH_ROUTE}
  */
 export type PostSignupDestination =
   | { kind: 'verify' }
   | { kind: 'redirect'; url: string }
-  | { kind: 'workspace' }
+  | { kind: 'entry' }
 
 interface PostSignupDestinationParams {
   /** The server-derived effective flag — verification enabled AND deliverable. */
@@ -40,7 +45,7 @@ export function resolvePostSignupDestination({
   redirectUrl,
 }: PostSignupDestinationParams): PostSignupDestination {
   if (emailVerificationEnabled) return { kind: 'verify' }
-  return redirectUrl ? { kind: 'redirect', url: redirectUrl } : { kind: 'workspace' }
+  return redirectUrl ? { kind: 'redirect', url: redirectUrl } : { kind: 'entry' }
 }
 
 /** The raw redirect-carrying params, as read from a URL on client or server. */
diff --git a/apps/sim/app/(auth)/components/social-login-buttons.tsx b/apps/sim/app/(auth)/components/social-login-buttons.tsx
index c200d86bd11..37df7815ed7 100644
--- a/apps/sim/app/(auth)/components/social-login-buttons.tsx
+++ b/apps/sim/app/(auth)/components/social-login-buttons.tsx
@@ -6,6 +6,7 @@ import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { GithubIcon, GoogleIcon, MicrosoftIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
+import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
 import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants'
 
 const logger = createLogger('SocialLoginButtons')
@@ -22,7 +23,7 @@ export function SocialLoginButtons({
   githubAvailable,
   googleAvailable,
   microsoftAvailable,
-  callbackURL = '/workspace',
+  callbackURL = DEFAULT_POST_AUTH_ROUTE,
   children,
 }: SocialLoginButtonsProps) {
   const [isGithubLoading, setIsGithubLoading] = useState(false)
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index cfe0b1403b8..c2dafcb06ca 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -22,7 +22,7 @@ import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { captureClientEvent } from '@/lib/posthog/client'
-import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
+import { buildAuthCrossLink, DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
 import {
   AuthDivider,
   AuthField,
@@ -108,7 +108,7 @@ export default function LoginPage({
     invalidCallbackRef.current = true
     logger.warn('Invalid callback URL detected and blocked:', { url: callbackUrlParam })
   }
-  const callbackUrl = isValidCallbackUrl ? callbackUrlParam! : '/workspace'
+  const callbackUrl = isValidCallbackUrl ? callbackUrlParam! : DEFAULT_POST_AUTH_ROUTE
   const isInviteFlow = searchParams?.get('invite_flow') === 'true'
   const signupHref = buildAuthCrossLink('/signup', {
     callbackUrl: isValidCallbackUrl ? callbackUrl : null,
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 61ad48a8328..7488520915a 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -408,7 +408,9 @@ function SignupFormContent({
     <div className='space-y-6'>
       <AuthHeader title='Create an account' description='Create an account or log in' />
 
-      {hasOnlySSO && <SSOLoginButton callbackURL={redirectUrl || '/workspace'} variant='primary' />}
+      {hasOnlySSO && (
+        <SSOLoginButton callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE} variant='primary' />
+      )}
 
       {emailEnabled && (
         <form onSubmit={onSubmit} className='space-y-6'>
@@ -486,10 +488,13 @@ function SignupFormContent({
           githubAvailable={githubAvailable}
           googleAvailable={googleAvailable}
           microsoftAvailable={microsoftAvailable}
-          callbackURL={redirectUrl || '/workspace'}
+          callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE}
         >
           {ssoEnabled && !hasOnlySSO && (
-            <SSOLoginButton callbackURL={redirectUrl || '/workspace'} variant='outline' />
+            <SSOLoginButton
+              callbackURL={redirectUrl || DEFAULT_POST_AUTH_ROUTE}
+              variant='outline'
+            />
           )}
         </SocialLoginButtons>
       )}
diff --git a/apps/sim/app/(auth)/verify/use-verification.ts b/apps/sim/app/(auth)/verify/use-verification.ts
index 96bd55f1f88..c2fbe5d4dbb 100644
--- a/apps/sim/app/(auth)/verify/use-verification.ts
+++ b/apps/sim/app/(auth)/verify/use-verification.ts
@@ -6,7 +6,7 @@ import { normalizeEmail } from '@sim/utils/string'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
-import { POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
+import { DEFAULT_POST_AUTH_ROUTE, POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect'
 
 const logger = createLogger('useVerification')
 
@@ -16,7 +16,7 @@ const logger = createLogger('useVerification')
  *
  * Both redirect sites run in the same commit as the effect that reads session
  * storage, so a cached value is still `null` when they fire and the stored
- * destination is silently replaced by `/workspace`. Reading here removes that
+ * destination is silently replaced by the default entry. Reading here removes that
  * race. `redirectAfter` wins over the stored URL; anything failing callback
  * validation is discarded, and an unsafe stored value is evicted.
  */
@@ -112,7 +112,8 @@ export function useVerification({
           logger.warn('Failed to refetch session after verification', e)
         }
 
-        const destination = resolveRedirectUrl(searchParams.get('redirectAfter')) ?? '/workspace'
+        const destination =
+          resolveRedirectUrl(searchParams.get('redirectAfter')) ?? DEFAULT_POST_AUTH_ROUTE
         sessionStorage.removeItem('verificationEmail')
         sessionStorage.removeItem(POST_AUTH_REDIRECT_STORAGE_KEY)
 
@@ -217,7 +218,7 @@ export function useVerification({
       if (destination) {
         window.location.href = destination
       } else {
-        router.push('/workspace')
+        router.push(DEFAULT_POST_AUTH_ROUTE)
       }
     }
 
diff --git a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
index 8d14e3a1ee9..31aa3527fb9 100644
--- a/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
+++ b/apps/sim/app/(interfaces)/chat/components/error-state/error-state.tsx
@@ -2,6 +2,7 @@
 
 import { Button } from '@sim/emcn'
 import { useRouter } from 'next/navigation'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 interface ChatErrorStateProps {
   error: string
@@ -19,10 +20,10 @@ export function ChatErrorState({ error }: ChatErrorStateProps) {
         <p className='text-[var(--text-muted)] text-lg'>{error}</p>
         <Button
           variant='primary'
-          onClick={() => router.push('/workspace')}
+          onClick={() => router.push(APP_ENTRY_PATH)}
           className='h-[32px] w-full gap-2 px-2.5 text-sm'
         >
-          Return to Workspace
+          Open Sim
         </Button>
       </div>
     </div>
diff --git a/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx b/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
index 6e182a8ef48..a279ec39f27 100644
--- a/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
+++ b/apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx
@@ -21,6 +21,7 @@ import { type AuthProviderStatusResponse, getAuthProvidersContract } from '@/lib
 import { client } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy } from '@/lib/core/config/env'
 import { isSsoEnabled } from '@/lib/core/config/env-flags'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { captureClientEvent } from '@/lib/posthog/client'
 import type { PostHogEventMap } from '@/lib/posthog/events'
 import colorMixFallbacks from '@/app/(landing)/components/shared/color-mix-fallbacks/color-mix-fallbacks.module.css'
@@ -143,7 +144,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
   async function handleSocialLogin(provider: 'github' | 'google' | 'microsoft') {
     setSocialLoading(provider)
     try {
-      await client.signIn.social({ provider, callbackURL: '/workspace' })
+      await client.signIn.social({ provider, callbackURL: APP_ENTRY_PATH })
     } catch (error) {
       logger.warn('Social sign-in did not complete', { provider, error })
     } finally {
diff --git a/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts b/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts
index 2584ea88c37..8e13703055c 100644
--- a/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts
+++ b/apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts
@@ -151,12 +151,14 @@ describe('desktop title-bar surface audit', () => {
     expect(rule).not.toContain('margin-top')
   })
 
-  it('drops the content pane border where the pane meets the window edge', () => {
-    // Collapsing the sidebar in the desktop shell takes the pane's padding to 0, so a
-    // retained border and radius drew a hairline outline inset from the square window.
+  it('drops the pane divider where the pane meets the window edge', () => {
+    // The pane meets the rail on a single left hairline. Collapsing the sidebar in the
+    // desktop shell leaves no rail beside it, so a retained divider would draw a stray
+    // line down the window's left edge. The pane carries no radius or full border to
+    // drop anymore; the divider is the only chrome between them.
     const flush = '[[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:'
-    expect(workspaceChrome).toContain(`${flush}rounded-none`)
-    expect(workspaceChrome).toContain(`${flush}border-0`)
+    expect(workspaceChrome).toContain(`${flush}border-l-0`)
+    expect(workspaceChrome).not.toContain('rounded-[8px]')
   })
 
   it('clears the lane for panels that embed pages away from the lights', () => {
@@ -289,6 +291,9 @@ const SELF_RESERVE_REQUIRED = new Set([
   // `WorkspaceHostProvider` — an ancestor of the chrome, not a descendant — returns it
   // instead of its children on a client-side 403. Neither is a double reservation.
   'app/workspace/[workspaceId]/components/workspace-access-denied.tsx',
+  // Same shape on the organization surface: `o/[organizationId]/layout.tsx` returns it
+  // for a non-member before reaching `<WorkspaceChrome>`.
+  'app/o/[organizationId]/components/organization-access-denied.tsx',
 ])
 
 /** Every file under `app/`, so ancestor layouts can be resolved without extra fs calls. */
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 232ab9ebe9b..21d5ba0d5cc 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -392,7 +392,7 @@
 :root {
   --sidebar-width: 0px; /* 0 outside workspace; blocking script always sets actual value on workspace pages */
   --sidebar-collapsed-width: 48px; /* icon rail on web; desktop overrides to 0 before first paint */
-  --sidebar-expanded-width: 238px; /* SIDEBAR_WIDTH.DEFAULT; the width to restore to, held even while collapsed */
+  --sidebar-expanded-width: 256px; /* SIDEBAR_WIDTH.DEFAULT; the width to restore to, held even while collapsed */
   --desktop-title-bar-height: 0px; /* macOS traffic-light lane; desktop overrides before first paint */
   --workspace-content-title-bar-inset: 0px; /* lane the content pane must leave clear; only non-zero when the pane, not the sidebar, sits under it */
   --desktop-title-bar-inset-x: 0px; /* clearance past the traffic lights; desktop overrides */
@@ -403,17 +403,12 @@
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
   /**
-   * The padding `.workspace-content-shell` insets the panel and terminal from
-   * the viewport by (CONTENT_WINDOW_GAP).
-   *
-   * Published here because surfaces portalled to `<body>` — the toast stack —
-   * position against those elements from the viewport, so they must add back
-   * whatever separates the element from the viewport edge. Reading it rather
-   * than hardcoding 8px is what keeps the toast and the canvas controls on the
-   * same clearance when the shell drops its padding; the controls are laid out
-   * inside the shell and so need no correction.
+   * Distance between `.workspace-content-shell` and the viewport edge
+   * (CONTENT_WINDOW_GAP). The shell sits flush, so this is zero; it stays
+   * published because surfaces portalled to `<body>` — the toast stack — and
+   * the panel and terminal geometry all read it rather than assuming a value.
    */
-  --workspace-content-gap: 8px;
+  --workspace-content-gap: 0px;
   --output-panel-width: 560px; /* OUTPUT_PANEL_WIDTH.DEFAULT */
   /**
    * Neutral border and divider thickness. Standard-density displays cannot draw
@@ -562,14 +557,6 @@ html[data-sim-desktop-title-bar="inset"]
   --workspace-content-title-bar-inset: var(--desktop-title-bar-height);
 }
 
-/* The one case the shell drops its padding entirely (see `workspace-chrome.tsx`:
-   `isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'`). Declared on the
-   root so the portalled toast stack — which cannot inherit from the shell — sees
-   it too, and keeps the same clearance the in-shell canvas controls keep. */
-html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sidebar-collapsed]) {
-  --workspace-content-gap: 0px;
-}
-
 .workspace-root code,
 .workspace-root kbd,
 .workspace-root samp,
@@ -580,7 +567,6 @@ html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sideb
 
 .sidebar-container {
   width: var(--sidebar-width);
-  transition: width 200ms cubic-bezier(0.25, 0.1, 0.25, 1);
 }
 
 /**
@@ -607,12 +593,6 @@ html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sideb
   --sidebar-width: var(--sidebar-expanded-width);
 }
 
-/* The card appears at full width, so the aside's own width transition would animate
-   0 -> expanded inside it. */
-.sidebar-shell-outer[data-peek] .sidebar-container {
-  transition: none;
-}
-
 /* The card is a flex column sized to its content, so the shell must be allowed to
    shrink for the sidebar's own scroll region to bound itself once the card hits its
    max height. Docked, this element is not a flex item and the rule is inert. */
@@ -623,7 +603,6 @@ html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sideb
 
 .sidebar-container span,
 .sidebar-container .text-small {
-  transition: opacity 120ms ease;
   white-space: nowrap;
 }
 
@@ -632,51 +611,10 @@ html[data-sim-desktop-title-bar="inset"]:has(.workspace-content-shell[data-sideb
   opacity: 0;
 }
 
-.sidebar-container .sidebar-collapse-hide {
-  transition: opacity 60ms ease;
-}
-
 .sidebar-container[data-collapsed] .sidebar-collapse-hide {
   opacity: 0;
 }
 
-@keyframes sidebar-collapse-guard {
-  from {
-    pointer-events: none;
-  }
-  to {
-    pointer-events: auto;
-  }
-}
-
-.sidebar-container[data-collapsed] {
-  animation: sidebar-collapse-guard 250ms step-end;
-}
-
-.sidebar-container.is-resizing {
-  transition: none;
-}
-
-/* Suppress width/transform transitions on the chrome wrappers during a
-   drag-resize so the outer overflow-hidden clip doesn't lag behind the inner
-   sidebar content, which is already at the correct width instantly. */
-html.sidebar-resizing .sidebar-shell-outer,
-html.sidebar-resizing .sidebar-shell-inner {
-  transition: none !important;
-}
-
-/* Suppress sidebar transitions during the initial hydration window. The
-   pre-paint script sets the correct --sidebar-width, but store rehydration
-   re-applies it a tick later; without this guard that re-apply animates the
-   rail, reading as a collapse -> expand flash on a fresh page load. Removed
-   after the first paint (see workspace-chrome.tsx) so user-driven toggles and
-   the fullscreen slide still animate. */
-html.sidebar-booting .sidebar-container,
-html.sidebar-booting .sidebar-shell-outer,
-html.sidebar-booting .sidebar-shell-inner {
-  transition: none !important;
-}
-
 .panel-container {
   width: var(--panel-width);
 }
diff --git a/apps/sim/app/api/auth/oauth2/authorize/route.test.ts b/apps/sim/app/api/auth/oauth2/authorize/route.test.ts
index 656b3efe645..f3292fea82c 100644
--- a/apps/sim/app/api/auth/oauth2/authorize/route.test.ts
+++ b/apps/sim/app/api/auth/oauth2/authorize/route.test.ts
@@ -146,7 +146,7 @@ describe('OAuth2 authorize route', () => {
 
     const response = await GET(request({ providerId: 'google-email', workspaceId: WORKSPACE_ID }))
 
-    expect(response.headers.get('location')).toBe(`${BASE_URL}/workspace?error=oauth_link_failed`)
+    expect(response.headers.get('location')).toBe(`${BASE_URL}/home?error=oauth_link_failed`)
     expect(mocks.requireClient).toHaveBeenCalledWith('google-email')
     expect(mocks.createConnection).not.toHaveBeenCalled()
   })
@@ -227,7 +227,7 @@ describe('OAuth2 authorize route', () => {
     )
 
     expect(response.headers.get('location')).toBe(
-      `${BASE_URL}/workspace?error=credential_provider_mismatch`
+      `${BASE_URL}/home?error=credential_provider_mismatch`
     )
   })
 
@@ -267,9 +267,7 @@ describe('OAuth2 authorize route', () => {
       })
     )
 
-    expect(response.headers.get('location')).toBe(
-      `${BASE_URL}/workspace?error=workspace_access_denied`
-    )
+    expect(response.headers.get('location')).toBe(`${BASE_URL}/home?error=workspace_access_denied`)
   })
 
   it('redirects a draft launch infrastructure failure through the browser error contract', async () => {
@@ -277,7 +275,7 @@ describe('OAuth2 authorize route', () => {
 
     const response = await GET(request({ draftId: 'draft-1' }))
 
-    expect(response.headers.get('location')).toBe(`${BASE_URL}/workspace?error=oauth_link_failed`)
+    expect(response.headers.get('location')).toBe(`${BASE_URL}/home?error=oauth_link_failed`)
   })
 
   it('routes custom providers through the exact application draft', async () => {
diff --git a/apps/sim/app/api/auth/oauth2/authorize/route.ts b/apps/sim/app/api/auth/oauth2/authorize/route.ts
index 1a70cc24ad2..6c1b9e9d4b6 100644
--- a/apps/sim/app/api/auth/oauth2/authorize/route.ts
+++ b/apps/sim/app/api/auth/oauth2/authorize/route.ts
@@ -13,6 +13,7 @@ import { CredentialConnectionProviderMismatchError } from '@/lib/credentials/app
 import { createCredentialConnection } from '@/lib/credentials/application/create-credential-connection'
 import { launchCredentialConnection } from '@/lib/credentials/application/launch-credential-connection'
 import { OAUTH_CREDENTIAL_DRAFT_CALLBACK_PARAM } from '@/lib/credentials/draft-constants'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { decryptQuickBooksOAuthClientConfig } from '@/lib/oauth/quickbooks-client-config'
 import { QUICKBOOKS_AUTHORIZATION_URL } from '@/lib/oauth/quickbooks-constants'
 import { createQuickBooksOAuthState } from '@/lib/oauth/quickbooks-state'
@@ -64,7 +65,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
       } catch (error) {
         if (!(error instanceof OrchestrationError)) throw error
         logger.warn('Rejected OAuth connection draft', { userId, draftId, code: error.code })
-        return NextResponse.redirect(`${baseUrl}/workspace?error=oauth_link_invalid`)
+        return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=oauth_link_invalid`)
       }
     }
 
@@ -83,7 +84,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         : connectionCompleteUrl.toString()
       : requestedCallback?.startsWith(`${baseUrl}/`)
         ? requestedCallback
-        : `${baseUrl}/workspace`
+        : `${baseUrl}${APP_ENTRY_PATH}`
 
     if (!fromConnectionDraft) {
       try {
@@ -100,22 +101,24 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         connectionDraftId = connection.draftId
       } catch (error) {
         if (error instanceof CredentialConnectionProviderMismatchError) {
-          return NextResponse.redirect(`${baseUrl}/workspace?error=credential_provider_mismatch`)
+          return NextResponse.redirect(
+            `${baseUrl}${APP_ENTRY_PATH}?error=credential_provider_mismatch`
+          )
         }
         if (
           credentialId &&
           error instanceof ForbiddenOperationError &&
           error.detailCode === 'CREDENTIAL_ADMIN_ACCESS_REQUIRED'
         ) {
-          return NextResponse.redirect(`${baseUrl}/workspace?error=credential_access_denied`)
+          return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=credential_access_denied`)
         }
         if (error instanceof OrchestrationError && error.code === 'not_found') {
           return NextResponse.redirect(
-            `${baseUrl}/workspace?error=${credentialId ? 'credential_access_denied' : 'workspace_access_denied'}`
+            `${baseUrl}${APP_ENTRY_PATH}?error=${credentialId ? 'credential_access_denied' : 'workspace_access_denied'}`
           )
         }
         if (error instanceof OrchestrationError && error.code === 'forbidden') {
-          return NextResponse.redirect(`${baseUrl}/workspace?error=workspace_access_denied`)
+          return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=workspace_access_denied`)
         }
         throw error
       }
@@ -183,7 +186,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         providerId,
         status: linkResponse.status,
       })
-      return NextResponse.redirect(`${baseUrl}/workspace?error=oauth_link_failed`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=oauth_link_failed`)
     }
 
     const response = NextResponse.redirect(payload.url)
@@ -198,6 +201,6 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     return response
   } catch (error) {
     logger.error('Failed to initiate OAuth2 authorization', { providerId, error })
-    return NextResponse.redirect(`${baseUrl}/workspace?error=oauth_link_failed`)
+    return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=oauth_link_failed`)
   }
 })
diff --git a/apps/sim/app/api/auth/oauth2/callback/instagram/route.ts b/apps/sim/app/api/auth/oauth2/callback/instagram/route.ts
index 19284a950fc..afca4590c1f 100644
--- a/apps/sim/app/api/auth/oauth2/callback/instagram/route.ts
+++ b/apps/sim/app/api/auth/oauth2/callback/instagram/route.ts
@@ -18,6 +18,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { processCredentialDraft } from '@/lib/credentials/draft-processor'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { safeAccountInsert } from '@/lib/oauth/credential-service'
 import {
   parseInstagramLongLivedToken,
@@ -52,7 +53,9 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
   try {
     const session = await getSession()
     if (!session?.user?.id) {
-      return clearOAuthCookies(NextResponse.redirect(`${baseUrl}/workspace?error=unauthorized`))
+      return clearOAuthCookies(
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=unauthorized`)
+      )
     }
 
     const parsed = await parseRequest(instagramCallbackContract, request, {})
@@ -68,7 +71,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         error_description,
       })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_access_denied`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_access_denied`)
       )
     }
 
@@ -79,7 +82,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         hasCookieState: Boolean(cookieState),
       })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_state_mismatch`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_state_mismatch`)
       )
     }
 
@@ -90,7 +93,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (!code) {
       logger.error('No authorization code received from Instagram')
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_no_code`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_no_code`)
       )
     }
 
@@ -123,7 +126,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         error: errorText,
       })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_token_error`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_token_error`)
       )
     }
 
@@ -136,7 +139,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (!shortLived) {
       logger.error('Instagram short-lived token response was invalid')
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_no_token`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_no_token`)
       )
     }
 
@@ -160,7 +163,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         error: errorText,
       })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_exchange_error`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_exchange_error`)
       )
     }
 
@@ -174,7 +177,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (!longLived) {
       logger.error('Instagram long-lived token response was invalid')
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_no_long_lived`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_no_long_lived`)
       )
     }
 
@@ -199,7 +202,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         error: errorText,
       })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_profile_error`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_profile_error`)
       )
     }
 
@@ -212,7 +215,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (!profile) {
       logger.error('Instagram profile response was invalid')
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_profile_error`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_profile_error`)
       )
     }
 
@@ -222,7 +225,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (!igUserId) {
       logger.error('Instagram profile response missing user_id', { profile })
       return clearOAuthCookies(
-        NextResponse.redirect(`${baseUrl}/workspace?error=instagram_no_user_id`)
+        NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=instagram_no_user_id`)
       )
     }
 
@@ -311,7 +314,9 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
 
     const returnUrlCookie = request.cookies.get(INSTAGRAM_RETURN_URL_COOKIE)?.value
     const redirectUrl =
-      returnUrlCookie && isSameOrigin(returnUrlCookie) ? returnUrlCookie : `${baseUrl}/workspace`
+      returnUrlCookie && isSameOrigin(returnUrlCookie)
+        ? returnUrlCookie
+        : `${baseUrl}${APP_ENTRY_PATH}`
     const finalUrl = new URL(redirectUrl)
     finalUrl.searchParams.set('instagram_connected', 'true')
 
@@ -322,6 +327,8 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
       error instanceof EnvCapabilityConfigurationError && error.capabilityId === 'oauth'
         ? 'instagram_config_error'
         : 'instagram_callback_error'
-    return clearOAuthCookies(NextResponse.redirect(`${baseUrl}/workspace?error=${errorCode}`))
+    return clearOAuthCookies(
+      NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=${errorCode}`)
+    )
   }
 })
diff --git a/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.test.ts b/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.test.ts
index 51a36fd3c98..1dd57e3d27a 100644
--- a/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.test.ts
+++ b/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.test.ts
@@ -140,7 +140,7 @@ describe('QuickBooks OAuth callback', () => {
 
     expect(mockCompleteQuickBooksConnection).not.toHaveBeenCalled()
     expect(response.headers.get('location')).toBe(
-      'https://sim.test/workspace?error=quickbooks_callback_error'
+      'https://sim.test/home?error=quickbooks_callback_error'
     )
   })
 })
diff --git a/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.ts b/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.ts
index 675e7e8a076..f232cb655f6 100644
--- a/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.ts
+++ b/apps/sim/app/api/auth/oauth2/callback/quickbooks/route.ts
@@ -7,6 +7,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
 import { completeQuickBooksConnection } from '@/lib/credentials/application/complete-quickbooks-connection'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { normalizeQuickBooksRealmId } from '@/lib/oauth/quickbooks'
 import { parseQuickBooksOAuthState } from '@/lib/oauth/quickbooks-state'
 
@@ -16,7 +17,7 @@ export const dynamic = 'force-dynamic'
 
 export const GET = withRouteHandler(async (request: NextRequest) => {
   const baseUrl = getBaseUrl()
-  const fallbackUrl = `${baseUrl}/workspace`
+  const fallbackUrl = `${baseUrl}${APP_ENTRY_PATH}`
   let validatedReturnUrl: URL | null = null
 
   try {
diff --git a/apps/sim/app/api/auth/oauth2/callback/shopify/route.ts b/apps/sim/app/api/auth/oauth2/callback/shopify/route.ts
index 8447e56d48d..7df3318106e 100644
--- a/apps/sim/app/api/auth/oauth2/callback/shopify/route.ts
+++ b/apps/sim/app/api/auth/oauth2/callback/shopify/route.ts
@@ -12,6 +12,7 @@ import { requireConfiguredOAuthClient } from '@/lib/core/config/env-capabilities
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { completeShopifyOAuthConnection } from '@/lib/oauth/shopify'
 import { parseShopifyOAuthState } from '@/lib/oauth/shopify-state'
 
@@ -63,7 +64,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
   try {
     const session = await getSession()
     if (!session?.user?.id) {
-      return NextResponse.redirect(`${baseUrl}/workspace?error=unauthorized`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=unauthorized`)
     }
 
     const { searchParams } = request.nextUrl
@@ -79,28 +80,28 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
 
     if (!validateHmac(searchParams, clientSecret)) {
       logger.error('HMAC validation failed in Shopify OAuth callback')
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_hmac_invalid`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_hmac_invalid`)
     }
 
     if (!state) {
       logger.error('Missing state in Shopify OAuth callback')
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_state_mismatch`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_state_mismatch`)
     }
 
     if (!code) {
       logger.error('No code received from Shopify')
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_no_code`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_no_code`)
     }
 
     const shopDomain = shop
     if (!shopDomain) {
       logger.error('No shop domain available')
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_no_shop`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_no_shop`)
     }
 
     if (!shopifyShopDomainSchema.safeParse(shopDomain).success) {
       logger.error('Invalid shop domain format:', { shopDomain })
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_invalid_shop`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_invalid_shop`)
     }
 
     const { draftId, returnUrl } = parseShopifyOAuthState({
@@ -128,7 +129,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         status: tokenResponse.status,
         body: errorText,
       })
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_token_error`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_token_error`)
     }
 
     const tokenData = await tokenResponse.json()
@@ -142,7 +143,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
 
     if (!accessToken) {
       logger.error('No access token in response')
-      return NextResponse.redirect(`${baseUrl}/workspace?error=shopify_no_token`)
+      return NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=shopify_no_token`)
     }
 
     await completeShopifyOAuthConnection({
@@ -157,7 +158,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
     if (returnUrl && !isSameOrigin(returnUrl)) {
       throw new Error('Shopify OAuth state contains an invalid return URL')
     }
-    const redirectUrl = returnUrl ?? `${baseUrl}/workspace`
+    const redirectUrl = returnUrl ?? `${baseUrl}${APP_ENTRY_PATH}`
     const finalUrl = new URL(redirectUrl)
     finalUrl.searchParams.set('shopify_connected', 'true')
 
@@ -169,7 +170,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
         ? 'shopify_config_error'
         : 'shopify_callback_error'
     return clearShopifyOAuthCookies(
-      NextResponse.redirect(`${baseUrl}/workspace?error=${errorCode}`)
+      NextResponse.redirect(`${baseUrl}${APP_ENTRY_PATH}?error=${errorCode}`)
     )
   }
 })
diff --git a/apps/sim/app/api/auth/trello/callback/route.ts b/apps/sim/app/api/auth/trello/callback/route.ts
index 2d45e1dca3b..bbb96651bbb 100644
--- a/apps/sim/app/api/auth/trello/callback/route.ts
+++ b/apps/sim/app/api/auth/trello/callback/route.ts
@@ -5,6 +5,7 @@ import { parseRequest } from '@/lib/api/server'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { isSameOrigin } from '@/lib/core/utils/validation'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 const logger = createLogger('TrelloCallback')
 
@@ -48,7 +49,7 @@ export const GET = withRouteHandler(async (request: NextRequest) => {
   const returnUrl =
     requestedReturnUrl && isSameOrigin(requestedReturnUrl)
       ? requestedReturnUrl
-      : `${baseUrl}/workspace`
+      : `${baseUrl}${APP_ENTRY_PATH}`
   const queryState = parsed.data.query.state
   const cookieState = request.cookies.get(TRELLO_STATE_COOKIE)?.value
 
diff --git a/apps/sim/app/api/billing/portal/route.ts b/apps/sim/app/api/billing/portal/route.ts
index 14b5d2bd4a8..7a11c742bbc 100644
--- a/apps/sim/app/api/billing/portal/route.ts
+++ b/apps/sim/app/api/billing/portal/route.ts
@@ -10,6 +10,7 @@ import { isOrganizationOwnerOrAdmin } from '@/lib/billing/core/organization'
 import { requireStripeClient } from '@/lib/billing/stripe-client'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { withRouteHandler } from '@/lib/core/utils/with-route-handler'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 const logger = createLogger('BillingPortal')
 
@@ -28,7 +29,8 @@ export const POST = withRouteHandler(async (request: NextRequest) => {
     }
     const context = parsedBody.data.context
     const organizationId = parsedBody.data.organizationId
-    const returnUrl = parsedBody.data.returnUrl || `${getBaseUrl()}/workspace?billing=updated`
+    const returnUrl =
+      parsedBody.data.returnUrl || `${getBaseUrl()}${APP_ENTRY_PATH}?billing=updated`
 
     const stripe = requireStripeClient()
 
diff --git a/apps/sim/app/api/enterprise-owner-claims/[id]/route.test.ts b/apps/sim/app/api/enterprise-owner-claims/[id]/route.test.ts
index 65e2fe04550..cfc34b07b96 100644
--- a/apps/sim/app/api/enterprise-owner-claims/[id]/route.test.ts
+++ b/apps/sim/app/api/enterprise-owner-claims/[id]/route.test.ts
@@ -84,7 +84,7 @@ describe('Enterprise owner claim routes', () => {
     mocks.acceptClaim.mockResolvedValue({
       success: true,
       claim,
-      redirectPath: '/workspace',
+      redirectPath: '/home',
     })
 
     const response = await POST(
diff --git a/apps/sim/app/api/workspaces/[id]/route.ts b/apps/sim/app/api/workspaces/[id]/route.ts
index 5e261f4b326..7fce432cca5 100644
--- a/apps/sim/app/api/workspaces/[id]/route.ts
+++ b/apps/sim/app/api/workspaces/[id]/route.ts
@@ -78,11 +78,10 @@ export const PATCH = withRouteHandler(
 
     try {
       const body = parsed.data.body
-      const { name, color, logoUrl, billedAccountUserId, allowPersonalApiKeys } = body
+      const { name, logoUrl, billedAccountUserId, allowPersonalApiKeys } = body
 
       if (
         name === undefined &&
-        color === undefined &&
         logoUrl === undefined &&
         billedAccountUserId === undefined &&
         allowPersonalApiKeys === undefined
@@ -106,10 +105,6 @@ export const PATCH = withRouteHandler(
         updateData.name = name
       }
 
-      if (color !== undefined) {
-        updateData.color = color
-      }
-
       if (logoUrl !== undefined) {
         updateData.logoUrl = logoUrl
       }
@@ -198,7 +193,6 @@ export const PATCH = withRouteHandler(
         metadata: {
           changes: {
             ...(name !== undefined && { name: { from: existingWorkspace.name, to: name } }),
-            ...(color !== undefined && { color: { from: existingWorkspace.color, to: color } }),
             ...(logoUrl !== undefined && {
               logoUrl: { from: existingWorkspace.logoUrl, to: logoUrl },
             }),
diff --git a/apps/sim/app/api/workspaces/route.ts b/apps/sim/app/api/workspaces/route.ts
index 50033c1d51c..c5b398fa3f1 100644
--- a/apps/sim/app/api/workspaces/route.ts
+++ b/apps/sim/app/api/workspaces/route.ts
@@ -123,7 +123,7 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
   try {
     const parsed = await parseRequest(createWorkspaceContract, req, {})
     if (!parsed.success) return parsed.response
-    const { name, color, skipDefaultWorkflow } = parsed.data.body
+    const { name, skipDefaultWorkflow } = parsed.data.body
     const activeOrganizationId = getActiveOrganizationId(session)
     const creationPolicy = await getWorkspaceCreationPolicy({
       userId: session.user.id,
@@ -153,7 +153,6 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
       userId: session.user.id,
       name,
       skipDefaultWorkflow,
-      explicitColor: color,
       organizationId: creationPolicy.organizationId,
       workspaceMode: creationPolicy.workspaceMode,
       billedAccountUserId: creationPolicy.billedAccountUserId,
@@ -188,7 +187,6 @@ export const POST = withRouteHandler(async (req: NextRequest) => {
       description: `Created workspace "${newWorkspace.name}"`,
       metadata: {
         name: newWorkspace.name,
-        color: newWorkspace.color,
         workspaceMode: newWorkspace.workspaceMode,
         organizationId: newWorkspace.organizationId,
       },
diff --git a/apps/sim/app/desktop/connect/switch-account.tsx b/apps/sim/app/desktop/connect/switch-account.tsx
index 4f132144855..d2be918b9e9 100644
--- a/apps/sim/app/desktop/connect/switch-account.tsx
+++ b/apps/sim/app/desktop/connect/switch-account.tsx
@@ -14,7 +14,7 @@ interface SwitchAccountProps {
  * callback.
  *
  * A plain link to `/login` would not work: the middleware bounces `/login` back
- * to `/workspace` while any session cookie is set, so the wrong account has to
+ * to the app entry while any session cookie is set, so the wrong account has to
  * be cleared before the login page is reachable at all. For the same reason a
  * failed sign-out must not navigate — it would land the user right back where
  * they started with no explanation.
diff --git a/apps/sim/app/enterprise/claim/[id]/enterprise-owner-claim.tsx b/apps/sim/app/enterprise/claim/[id]/enterprise-owner-claim.tsx
index c5a0d690700..371c0b5420b 100644
--- a/apps/sim/app/enterprise/claim/[id]/enterprise-owner-claim.tsx
+++ b/apps/sim/app/enterprise/claim/[id]/enterprise-owner-claim.tsx
@@ -9,6 +9,7 @@ import {
   type EnterpriseOwnerClaimDetails,
 } from '@/lib/api/contracts/enterprise-owner-claims'
 import { client, useSession } from '@/lib/auth/auth-client'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
 import { InviteLayout, InviteStatusCard } from '@/app/invite/components'
 import { useEnterpriseOwnerClaimDetails } from '@/hooks/queries/enterprise-owner-claims'
@@ -265,7 +266,7 @@ export default function EnterpriseOwnerClaim({ registrationDisabled }: Enterpris
                     label: 'Sign in to Enterprise',
                     onClick: async () => {
                       await client.signOut()
-                      router.push(authLink('/login', '/workspace'))
+                      router.push(authLink('/login', APP_ENTRY_PATH))
                     },
                   },
                 ]
diff --git a/apps/sim/app/home/page.test.tsx b/apps/sim/app/home/page.test.tsx
new file mode 100644
index 00000000000..90760f97c44
--- /dev/null
+++ b/apps/sim/app/home/page.test.tsx
@@ -0,0 +1,46 @@
+/**
+ * @vitest-environment node
+ */
+import { authMockFns } from '@sim/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockRedirect, mockResolveAppEntryPath } = vi.hoisted(() => ({
+  mockRedirect: vi.fn((path: string) => {
+    throw new Error(`NEXT_REDIRECT:${path}`)
+  }),
+  mockResolveAppEntryPath: vi.fn(),
+}))
+
+vi.mock('next/navigation', () => ({
+  redirect: mockRedirect,
+}))
+
+vi.mock('@/lib/navigation/resolve-app-entry', () => ({
+  resolveAppEntryPath: mockResolveAppEntryPath,
+}))
+
+import AppEntryPage from '@/app/home/page'
+
+const mockGetSession = authMockFns.mockGetSession
+
+describe('AppEntryPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('sends a signed-out visitor to login without resolving an entry', async () => {
+    mockGetSession.mockResolvedValue(null)
+
+    await expect(AppEntryPage()).rejects.toThrow('NEXT_REDIRECT:/login')
+    expect(mockResolveAppEntryPath).not.toHaveBeenCalled()
+  })
+
+  it('forwards a signed-in viewer to their resolved entry', async () => {
+    const session = { user: { id: 'viewer' } }
+    mockGetSession.mockResolvedValue(session)
+    mockResolveAppEntryPath.mockResolvedValue('/o/org-1/home')
+
+    await expect(AppEntryPage()).rejects.toThrow('NEXT_REDIRECT:/o/org-1/home')
+    expect(mockResolveAppEntryPath).toHaveBeenCalledWith(session)
+  })
+})
diff --git a/apps/sim/app/home/page.tsx b/apps/sim/app/home/page.tsx
new file mode 100644
index 00000000000..1965f6894c2
--- /dev/null
+++ b/apps/sim/app/home/page.tsx
@@ -0,0 +1,18 @@
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { resolveAppEntryPath } from '@/lib/navigation/resolve-app-entry'
+
+/**
+ * The signed-in app's front door. Nothing renders here: the viewer is forwarded to
+ * their organization's home, or to their workspaces when they belong to none. Every
+ * default post-auth destination points at this route, so where a viewer lands is
+ * decided once, on the server, with their membership in hand.
+ */
+export default async function AppEntryPage() {
+  const session = await getSession()
+  if (!session?.user) {
+    redirect('/login')
+  }
+
+  redirect(await resolveAppEntryPath(session))
+}
diff --git a/apps/sim/app/invite/[id]/invite.tsx b/apps/sim/app/invite/[id]/invite.tsx
index ffc75e40866..f762c4ae795 100644
--- a/apps/sim/app/invite/[id]/invite.tsx
+++ b/apps/sim/app/invite/[id]/invite.tsx
@@ -10,6 +10,7 @@ import { ApiClientError } from '@/lib/api/client/errors'
 import { requestJson } from '@/lib/api/client/request'
 import { acceptInvitationContract } from '@/lib/api/contracts/invitations'
 import { client, useSession } from '@/lib/auth/auth-client'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { buildAuthCrossLink } from '@/app/(auth)/auth-redirect'
 import { InviteLayout, InviteStatusCard } from '@/app/invite/components'
 import { useInvitationDetails } from '@/hooks/queries/invitations'
@@ -459,7 +460,7 @@ export default function Invite({ registrationDisabled }: InviteProps) {
             description={error.message}
             icon='users'
             actions={[
-              { label: 'Manage Team Settings', onClick: () => router.push('/workspace') },
+              { label: 'Manage Team Settings', onClick: () => router.push(APP_ENTRY_PATH) },
               { label: 'Return to Home', onClick: () => router.push('/') },
             ]}
           />
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index e3671e8792e..891cb5ed954 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -102,19 +102,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   }
                 } catch (e) {}
 
+                // The organization surface (/o/...) shares the workspace chrome and
+                // needs the same variables set before first paint.
                 try {
                   var path = window.location.pathname;
-                  if (path.indexOf('/workspace/') === -1) {
+                  if (path.indexOf('/workspace/') === -1 && path.indexOf('/o/') !== 0) {
                     return;
                   }
                 } catch (e) {
                   return;
                 }
 
-                // Sidebar width. Mirror clampSidebarWidth() in stores/sidebar/store.ts:
-                // the upper bound can never fall below the 238px minimum, so a narrow
-                // window yields a width >= MIN instead of a sub-minimum sliver.
-                var defaultSidebarWidth = 238;
+                // Sidebar width. Mirror getMaxSidebarWidth() in stores/sidebar/store.ts:
+                // 30% of the viewport capped at 400px, and never below the 256px
+                // minimum, so a narrow window yields a width >= MIN instead of a
+                // sub-minimum sliver.
+                var defaultSidebarWidth = 256;
                 try {
                   // Collapse comes from the cookie (independent of localStorage
                   // parsing); the persisted width is read defensively below. Match the
@@ -140,10 +143,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   // collapsed, because the desktop hover-peek renders the sidebar at
                   // its restore width while --sidebar-width still reads collapsed.
                   var width = state && state.sidebarWidth;
-                  var maxSidebarWidth = Math.max(238, window.innerWidth * 0.3);
+                  var maxSidebarWidth = Math.max(256, Math.min(400, window.innerWidth * 0.3));
                   var expandedWidth =
                     typeof width === 'number' && isFinite(width)
-                      ? Math.min(Math.max(width, 238), maxSidebarWidth)
+                      ? Math.min(Math.max(width, 256), maxSidebarWidth)
                       : defaultSidebarWidth;
                   document.documentElement.style.setProperty(
                     '--sidebar-expanded-width',
diff --git a/apps/sim/app/manifest.ts b/apps/sim/app/manifest.ts
index 23e600614a0..a0e5f077e0c 100644
--- a/apps/sim/app/manifest.ts
+++ b/apps/sim/app/manifest.ts
@@ -1,4 +1,5 @@
 import type { MetadataRoute } from 'next'
+import { WORKSPACES_PATH } from '@/lib/navigation/paths'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
 export const dynamic = 'force-dynamic'
@@ -43,7 +44,7 @@ export default function manifest(): MetadataRoute.Manifest {
         name: 'Create Workflow',
         short_name: 'New',
         description: 'Create a new AI workflow',
-        url: '/workspace',
+        url: WORKSPACES_PATH,
       },
     ],
     lang: 'en-US',
diff --git a/apps/sim/app/o/[organizationId]/chat/[chatId]/page.tsx b/apps/sim/app/o/[organizationId]/chat/[chatId]/page.tsx
new file mode 100644
index 00000000000..db9b5de630a
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/chat/[chatId]/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Chat',
+}
+
+export default function OrganizationChatPage() {
+  return null
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-access-denied.tsx b/apps/sim/app/o/[organizationId]/components/organization-access-denied.tsx
new file mode 100644
index 00000000000..6a4bb7647f1
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-access-denied.tsx
@@ -0,0 +1,27 @@
+import { ChipLink } from '@sim/emcn'
+import { CircleAlert } from '@sim/emcn/icons'
+import { WORKSPACES_PATH } from '@/lib/navigation/paths'
+import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
+
+export function OrganizationAccessDenied() {
+  return (
+    <main className='desktop-title-bar-page flex items-center justify-center bg-[var(--surface-1)] p-6'>
+      <DesktopTitleBarLane />
+      <div className='flex max-w-md flex-col items-center gap-3 text-center'>
+        <div className='flex size-10 items-center justify-center rounded-full bg-[var(--surface-3)]'>
+          <CircleAlert className='size-[18px] text-[var(--text-icon)]' aria-hidden />
+        </div>
+        <div className='space-y-1'>
+          <h1 className='text-[var(--text-primary)] text-lg'>Organization access denied</h1>
+          <p className='text-[var(--text-muted)] text-sm'>
+            You are not a member of this organization. Ask an organization admin to add you, or head
+            back to your workspaces.
+          </p>
+        </div>
+        <ChipLink href={WORKSPACES_PATH} variant='primary'>
+          View your workspaces
+        </ChipLink>
+      </div>
+    </main>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
new file mode 100644
index 00000000000..c95da914201
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.test.tsx
@@ -0,0 +1,121 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+
+const hoverState = vi.hoisted(() => ({ isOpen: false }))
+
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: { href: string; children: React.ReactNode }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@/app/workspace/[workspaceId]/w/components/sidebar/hooks', () => ({
+  useHoverMenu: () => ({
+    isOpen: hoverState.isOpen,
+    open: vi.fn(),
+    close: vi.fn(),
+    setLocked: vi.fn(),
+    triggerProps: { onMouseEnter: vi.fn(), onMouseLeave: vi.fn() },
+    contentProps: { onMouseEnter: vi.fn(), onMouseLeave: vi.fn(), onCloseAutoFocus: vi.fn() },
+  }),
+}))
+
+import { ChatsSection } from '@/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section'
+
+const CHATS: OrganizationChat[] = Array.from({ length: 8 }, (_, index) => ({
+  id: `chat-${index + 1}`,
+  name: `Chat ${index + 1}`,
+  href: `/o/org-1/chat/chat-${index + 1}`,
+}))
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  hoverState.isOpen = false
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+  vi.unstubAllGlobals()
+})
+
+async function render(props: Partial<Parameters<typeof ChatsSection>[0]> = {}) {
+  await act(async () => {
+    root.render(
+      <ChatsSection
+        chats={CHATS}
+        isLoading={false}
+        isCollapsed={false}
+        pathname={null}
+        menuOpenHref={null}
+        onContextMenu={() => {}}
+        onMoreClick={() => {}}
+        {...props}
+      />
+    )
+  })
+}
+
+describe('ChatsSection', () => {
+  it('lists every chat with no paging control', async () => {
+    await render()
+
+    expect(container.querySelectorAll('a[href^="/o/org-1/chat/"]')).toHaveLength(8)
+    expect(container.textContent).not.toContain('See more')
+  })
+
+  it('marks the chat on the current route active', async () => {
+    await render({ pathname: '/o/org-1/chat/chat-3' })
+
+    const current = container.querySelector('a[href="/o/org-1/chat/chat-3"]')
+    const other = container.querySelector('a[href="/o/org-1/chat/chat-4"]')
+    expect(current?.className).toContain('surface-active')
+    expect(other?.className).not.toContain('surface-active')
+  })
+
+  it('reports the row href when its options button is pressed', async () => {
+    const onMoreClick = vi.fn()
+    await render({ onMoreClick })
+
+    const button = container.querySelector<HTMLButtonElement>(
+      'a[href="/o/org-1/chat/chat-2"] button[aria-label="Chat options"]'
+    )
+    await act(async () => button?.click())
+
+    expect(onMoreClick).toHaveBeenCalledWith(expect.anything(), '/o/org-1/chat/chat-2')
+  })
+
+  it('shows the empty state when there are no chats', async () => {
+    await render({ chats: [] })
+    expect(container.textContent).toContain('No chats yet')
+  })
+
+  it('renders the flyout rows while collapsed', async () => {
+    hoverState.isOpen = true
+    await render({ isCollapsed: true })
+
+    expect(container.querySelector('[aria-label="Chats"]')).not.toBeNull()
+    /* Radix portals the flyout to the body. */
+    expect(document.body.querySelectorAll('a[href^="/o/org-1/chat/"]')).toHaveLength(8)
+  })
+})
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
new file mode 100644
index 00000000000..3154dd9356a
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx
@@ -0,0 +1,184 @@
+'use client'
+
+import { memo } from 'react'
+import { chipVariants, cn, DropdownMenuItem, Loader, OverflowText, Skeleton } from '@sim/emcn'
+import { MoreHorizontal, Pin, Task } from '@sim/emcn/icons'
+import Link from 'next/link'
+import type { OrganizationChat } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
+import {
+  CollapsedSidebarMenu,
+  SidebarSection,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
+import { SIDEBAR_ITEM_GAP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { useHoverMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+
+/** Stands in for a chip row while the list loads, so it carries no margin either. */
+function ChatRowSkeleton() {
+  return (
+    <div className='sidebar-collapse-hide flex h-[30px] items-center gap-2 rounded-lg px-2'>
+      <Skeleton className='size-[16px] shrink-0 rounded-sm' />
+    </div>
+  )
+}
+
+interface ChatRowProps {
+  chat: OrganizationChat
+  isCurrentRoute: boolean
+  isMenuOpen: boolean
+  onContextMenu: (e: React.MouseEvent, href: string) => void
+  onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, href: string) => void
+}
+
+const ChatRow = memo(function ChatRow({
+  chat,
+  isCurrentRoute,
+  isMenuOpen,
+  onContextMenu,
+  onMoreClick,
+}: ChatRowProps) {
+  /**
+   * The trailing slot fits one glyph, and the dot wins over the pin: it reports
+   * transient state (a run in progress, or an unread reply elsewhere), while pinning
+   * is persistent and already conveyed by the row sorting to the top of the list.
+   */
+  const showStatusDot = Boolean(chat.isActive) || (!isCurrentRoute && Boolean(chat.isUnread))
+
+  return (
+    <Link
+      href={chat.href}
+      className={chipVariants({ active: isCurrentRoute || isMenuOpen, fullWidth: true })}
+      onContextMenu={(e) => onContextMenu(e, chat.href)}
+    >
+      <OverflowText label={chat.name} className='flex-1 text-[var(--text-body)]' />
+      <div className='relative flex size-[18px] shrink-0 items-center justify-center'>
+        {showStatusDot && (
+          <span
+            aria-hidden='true'
+            className={cn(
+              'size-[6px] rounded-full transition-opacity',
+              isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
+            )}
+            style={{ backgroundColor: chat.isActive ? '#EAB308' : 'var(--brand-accent)' }}
+          />
+        )}
+        {!showStatusDot && chat.isPinned && (
+          <Pin
+            aria-hidden='true'
+            className={cn(
+              'absolute size-[12px] text-[var(--text-icon)] transition-opacity',
+              isMenuOpen ? 'opacity-0' : 'group-hover:opacity-0'
+            )}
+          />
+        )}
+        <button
+          type='button'
+          aria-label='Chat options'
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            onMoreClick(e, chat.href)
+          }}
+          className={cn(
+            'absolute inset-0 flex items-center justify-center rounded-sm opacity-0 transition-opacity group-hover:opacity-100',
+            isMenuOpen && 'opacity-100'
+          )}
+        >
+          <MoreHorizontal className='size-[14px] text-[var(--text-icon)]' />
+        </button>
+      </div>
+    </Link>
+  )
+})
+
+interface ChatsSectionProps {
+  chats: OrganizationChat[]
+  isLoading: boolean
+  isCollapsed: boolean
+  pathname: string | null
+  /** Href of the row whose options menu is open, so it stays highlighted meanwhile. */
+  menuOpenHref: string | null
+  onContextMenu: (e: React.MouseEvent, href: string) => void
+  onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, href: string) => void
+}
+
+/**
+ * The organization's chats: the first section of the scroll region, so it carries no
+ * section gap — the divider padding above it is the whole distance, exactly as the
+ * workspace sidebar spaces its own Chats. Expanded, a collapsible list of every chat —
+ * no paging, the scroll region carries the length; collapsed, a hover flyout off the
+ * rail glyph.
+ */
+export function ChatsSection({
+  chats,
+  isLoading,
+  isCollapsed,
+  pathname,
+  menuOpenHref,
+  onContextMenu,
+  onMoreClick,
+}: ChatsSectionProps) {
+  const hover = useHoverMenu()
+
+  return (
+    <SidebarSection title='Chats' railCollapsed={isCollapsed} className='chats-section shrink-0'>
+      {isCollapsed ? (
+        <div className='px-2'>
+          <CollapsedSidebarMenu
+            icon={<Task className='size-[16px] shrink-0 text-[var(--text-icon)]' />}
+            hover={hover}
+            ariaLabel='Chats'
+          >
+            {isLoading ? (
+              <DropdownMenuItem disabled>
+                <Loader className='size-[14px]' animate />
+                Loading...
+              </DropdownMenuItem>
+            ) : chats.length === 0 ? (
+              <DropdownMenuItem disabled>No chats yet</DropdownMenuItem>
+            ) : (
+              chats.map((chat) => {
+                const isCurrentRoute = pathname === chat.href
+                return (
+                  <DropdownMenuItem key={chat.id} asChild active={isCurrentRoute}>
+                    <Link href={chat.href} onContextMenu={(e) => onContextMenu(e, chat.href)}>
+                      <ConversationListItem
+                        title={chat.name}
+                        isActive={Boolean(chat.isActive)}
+                        isUnread={Boolean(chat.isUnread) && !isCurrentRoute}
+                      />
+                    </Link>
+                  </DropdownMenuItem>
+                )
+              })
+            )}
+          </CollapsedSidebarMenu>
+        </div>
+      ) : (
+        <div className={cn(SIDEBAR_ITEM_GAP_CLASS, 'flex flex-col px-2')}>
+          {isLoading ? (
+            <ChatRowSkeleton />
+          ) : (
+            <>
+              {chats.length === 0 && (
+                <div className='flex h-[30px] items-center px-2 text-[var(--text-muted)] text-small'>
+                  No chats yet
+                </div>
+              )}
+              {chats.map((chat) => (
+                <ChatRow
+                  key={chat.id}
+                  chat={chat}
+                  isCurrentRoute={pathname === chat.href}
+                  isMenuOpen={menuOpenHref === chat.href}
+                  onContextMenu={onContextMenu}
+                  onMoreClick={onMoreClick}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      )}
+    </SidebarSection>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/index.ts
new file mode 100644
index 00000000000..a2ee28fffc9
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/index.ts
@@ -0,0 +1 @@
+export { ChatsSection } from './chats-section'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/index.ts
new file mode 100644
index 00000000000..61a7a80685d
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/index.ts
@@ -0,0 +1,4 @@
+export { ChatsSection } from './chats-section'
+export { OrganizationFooter } from './organization-footer'
+export { OrganizationHeader } from './organization-header'
+export { WorkspacesRailFlyout } from './workspaces-rail-flyout'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/index.ts
new file mode 100644
index 00000000000..95078897371
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/index.ts
@@ -0,0 +1 @@
+export { OrganizationFooter } from './organization-footer'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/organization-footer.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/organization-footer.tsx
new file mode 100644
index 00000000000..58af5e63d1c
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-footer/organization-footer.tsx
@@ -0,0 +1,238 @@
+'use client'
+
+import type { DesktopUpdateState } from '@sim/desktop-bridge'
+import {
+  Chip,
+  chipContentLabelClass,
+  chipPrimaryFillTokens,
+  chipVariants,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuItemLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  OverflowText,
+  Skeleton,
+} from '@sim/emcn'
+import { BookOpen, Download, HelpCircle, Settings } from '@sim/emcn/icons'
+import Link from 'next/link'
+import { SlackIcon } from '@/components/icons'
+import { getAccountSettingsHref } from '@/components/settings/navigation'
+import { getDesktopUpdates } from '@/lib/desktop'
+import { getUserColor } from '@/lib/workspaces/colors'
+import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
+import {
+  SIDEBAR_ITEM_GAP_CLASS,
+  SIDEBAR_RAIL_CHIP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { useUserProfile } from '@/hooks/queries/user-profile'
+import { useDesktopUpdateState } from '@/hooks/use-desktop-update-state'
+
+function hasAvailableDesktopUpdate(state: DesktopUpdateState): boolean {
+  return state.status === 'available' || state.status === 'downloading' || state.status === 'ready'
+}
+
+function desktopUpdateActionLabel(state: DesktopUpdateState): string {
+  if (state.status === 'downloading') {
+    return state.percent === undefined
+      ? 'Downloading update…'
+      : `Downloading update ${state.percent}%`
+  }
+  return state.status === 'ready' ? 'Restart to update' : 'Update'
+}
+
+/** Compact primary update circle using the same footprint as the surrounding sidebar icons. */
+function DesktopUpdateIcon({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        className,
+        'flex size-[17px] shrink-0 items-center justify-center rounded-full',
+        chipPrimaryFillTokens
+      )}
+    >
+      {/* Download's default viewBox is asymmetric around its paths. Center the
+          artwork itself, not merely its SVG box, inside the avatar-sized circle. */}
+      <Download className='size-[11px]' viewBox='-1.75 -1.75 24 24' />
+    </div>
+  )
+}
+
+interface OrganizationFooterProps {
+  /**
+   * True while the scroll region above still hides rows beyond its bottom edge —
+   * the same test the divider under the pinned nav applies at the top. The bar's
+   * top rule is drawn only then, so a list that fits meets the footer with no line.
+   */
+  showDivider: boolean
+  isCollapsed: boolean
+  showCollapsedTooltips: boolean
+  onOpenDocs: () => void
+  onJoinSlack: () => void
+}
+
+/**
+ * Pinned bottom bar of the organization sidebar: the viewer's avatar and name,
+ * which open their account settings, plus a help menu. Same two elements and the
+ * same layout as the workspace footer — expanded they share one row with help hard
+ * right, collapsed they stack as icon chips with help on top.
+ *
+ * Collapsed reverses the flex direction instead of reordering the DOM, which keeps
+ * both elements (and the help menu's trigger) alive across a toggle.
+ */
+export function OrganizationFooter({
+  showDivider,
+  isCollapsed,
+  showCollapsedTooltips,
+  onOpenDocs,
+  onJoinSlack,
+}: OrganizationFooterProps) {
+  const { data: profile } = useUserProfile()
+  const updateState = useDesktopUpdateState()
+
+  const name = profile ? profile.name?.trim() || profile.email : ''
+  const updateAvailable = hasAvailableDesktopUpdate(updateState)
+
+  const handleUpdateSelect = () => {
+    const updates = getDesktopUpdates()
+    if (updateState.status === 'ready') {
+      updates?.install()
+    } else if (updateState.status === 'available') {
+      updates?.check()
+    }
+  }
+
+  /**
+   * Plain `img`/`div` rather than the emcn `Avatar`, whose Radix root renders a
+   * `<span>` — and globals fade every `span` in the collapsed rail to `opacity: 0`,
+   * which would blank the avatar exactly where it is the only thing left to see.
+   */
+  const avatar = !profile ? (
+    <Skeleton className='size-[16px] shrink-0 rounded-full' />
+  ) : profile.image ? (
+    <img
+      src={profile.image}
+      alt=''
+      referrerPolicy='no-referrer'
+      className='size-[16px] shrink-0 rounded-full object-cover'
+    />
+  ) : (
+    <div
+      className='flex size-[16px] shrink-0 items-center justify-center rounded-full text-[9px] text-white leading-none'
+      style={{ backgroundColor: getUserColor(profile.id) }}
+    >
+      {name.charAt(0).toUpperCase()}
+    </div>
+  )
+
+  /**
+   * Expanded, the chip hugs its content (`max-w-full` so a long name truncates
+   * rather than overflowing); collapsed, `fullWidth` fills the narrow rail and
+   * `min-w-0` lets the hidden label give up its box so the chip never overflows it.
+   * The name is the button's accessible name — no `aria-label`, which would
+   * override the visible text.
+   */
+  const profileMenu = (
+    <DropdownMenu>
+      <SidebarTooltip label={name} enabled={showCollapsedTooltips && Boolean(name)}>
+        <DropdownMenuTrigger asChild>
+          <button
+            type='button'
+            data-item-id='profile'
+            className={cn(
+              chipVariants({ fullWidth: isCollapsed }),
+              isCollapsed ? 'min-w-0' : 'max-w-full',
+              SIDEBAR_RAIL_CHIP_CLASS
+            )}
+          >
+            {avatar}
+            {profile ? (
+              <OverflowText
+                label={name}
+                className={cn('sidebar-collapse-hide flex-1', chipContentLabelClass)}
+                tooltipEnabled={!isCollapsed && !showCollapsedTooltips}
+                focusTarget='nearest-interactive'
+              />
+            ) : (
+              /* Fixed width — the chip hugs its content, so a flexible bar would collapse to nothing. */
+              <Skeleton className='sidebar-collapse-hide h-[14px] w-[96px] rounded-sm' />
+            )}
+          </button>
+        </DropdownMenuTrigger>
+      </SidebarTooltip>
+      <DropdownMenuContent align='start' side='top' sideOffset={4}>
+        <DropdownMenuItem asChild>
+          <Link href={getAccountSettingsHref('general')}>
+            <Settings className='size-[14px]' />
+            <DropdownMenuItemLabel label='Settings' />
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  /**
+   * One node across both states; only `fullWidth` changes, so the same Radix menu
+   * survives the transition. `shrink-0` keeps the chip off the avatar while the rail
+   * is briefly narrower than the row — the aside's clip hides it until there is room.
+   */
+  const helpMenu = (
+    <DropdownMenu>
+      <SidebarTooltip
+        label={updateAvailable ? 'Help — update available' : 'Help'}
+        enabled={showCollapsedTooltips}
+      >
+        <DropdownMenuTrigger asChild>
+          <Chip
+            data-item-id='help'
+            aria-label={updateAvailable ? 'Help, update available' : 'Help'}
+            leftIcon={updateAvailable ? DesktopUpdateIcon : HelpCircle}
+            fullWidth={isCollapsed}
+            className={cn('shrink-0', SIDEBAR_RAIL_CHIP_CLASS)}
+          />
+        </DropdownMenuTrigger>
+      </SidebarTooltip>
+      {/* Anchored to whichever edge the trigger sits on, so the menu never overhangs the rail. */}
+      <DropdownMenuContent align={isCollapsed ? 'start' : 'end'} side='top' sideOffset={4}>
+        {updateAvailable && (
+          <>
+            <DropdownMenuItem
+              onSelect={handleUpdateSelect}
+              disabled={updateState.status === 'downloading'}
+            >
+              <img src='/favicon/favicon-32x32.png' alt='' className='size-[14px] rounded-[3px]' />
+              {desktopUpdateActionLabel(updateState)}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem onSelect={onOpenDocs}>
+          <BookOpen className='size-[14px]' />
+          Docs
+        </DropdownMenuItem>
+        <DropdownMenuItem onSelect={onJoinSlack}>
+          <SlackIcon className='size-[14px]' />
+          Join Slack
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
+        !showDivider && 'border-transparent',
+        isCollapsed ? cn(SIDEBAR_ITEM_GAP_CLASS, 'flex-col-reverse') : 'items-center'
+      )}
+    >
+      {/* Expanded, claims the row's free width so the help button lands hard right.
+          `flex` makes the inline-flex chip a flex item, so the wrapper is exactly the
+          chip's 30px rather than a line box padded by the strut's half-leading. */}
+      <div className={cn('flex', !isCollapsed && 'flex-1')}>{profileMenu}</div>
+      {helpMenu}
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/index.ts
new file mode 100644
index 00000000000..7040e44e82d
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/index.ts
@@ -0,0 +1 @@
+export { OrganizationHeader } from './organization-header'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx
new file mode 100644
index 00000000000..6e8fe4ca13b
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import {
+  ChipChevronDown,
+  chipContentLabelClass,
+  chipVariants,
+  cn,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  OverflowText,
+} from '@sim/emcn'
+import { PanelLeft } from '@sim/emcn/icons'
+import { IdentityTile } from '@/components/identity-tile/identity-tile'
+import type { OrganizationSurfaceOrganization } from '@/lib/organizations/surface'
+import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import { SIDEBAR_WIDTH } from '@/stores/constants'
+
+function getOrganizationInitial(name: string): string {
+  return (name.trim()[0] || 'O').toUpperCase()
+}
+
+interface OrganizationHeaderProps {
+  organization: OrganizationSurfaceOrganization
+  isCollapsed: boolean
+  /** Expands the rail; the collapsed header is itself the expand control. */
+  onExpandSidebar: () => void
+}
+
+/**
+ * The top-left organization chip. Expanded, it names the organization and opens
+ * the organization menu; collapsed, it becomes the rail's expand control, swapping
+ * the mark for a panel glyph on hover exactly as the workspace header does. The
+ * mark is the organization's uploaded logo or its initial on the neutral tile.
+ */
+export function OrganizationHeader({
+  organization,
+  isCollapsed,
+  onExpandSidebar,
+}: OrganizationHeaderProps) {
+  if (isCollapsed) {
+    return (
+      <div className='min-w-0 flex-1'>
+        <button
+          type='button'
+          aria-label='Expand sidebar'
+          onClick={onExpandSidebar}
+          className={cn(chipVariants({ fullWidth: true }), SIDEBAR_RAIL_CHIP_CLASS)}
+        >
+          <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
+            <IdentityTile
+              initial={getOrganizationInitial(organization.name)}
+              logoUrl={organization.logo}
+              className='group-hover:invisible'
+            />
+            <PanelLeft
+              aria-hidden
+              className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
+            />
+          </div>
+        </button>
+      </div>
+    )
+  }
+
+  return (
+    <div className='min-w-0 flex-1'>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            type='button'
+            aria-label='Organization menu'
+            className={cn(chipVariants(), 'min-w-0 max-w-full')}
+          >
+            <IdentityTile
+              initial={getOrganizationInitial(organization.name)}
+              logoUrl={organization.logo}
+            />
+            <OverflowText
+              label={organization.name}
+              className={cn('flex-1', chipContentLabelClass)}
+              focusTarget='nearest-interactive'
+            />
+            <ChipChevronDown />
+          </button>
+        </DropdownMenuTrigger>
+        {/* Sized like the workspace switcher so the two menus open to the same footprint. */}
+        <DropdownMenuContent
+          align='start'
+          side='bottom'
+          sideOffset={8}
+          style={{ width: `${SIDEBAR_WIDTH.DEFAULT}px`, maxWidth: 'calc(100vw - 24px)' }}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        />
+      </DropdownMenu>
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/index.ts
new file mode 100644
index 00000000000..fe0024ab47c
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/index.ts
@@ -0,0 +1 @@
+export { WorkspacesRailFlyout } from './workspaces-rail-flyout'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.test.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.test.tsx
new file mode 100644
index 00000000000..b6729ecbf07
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.test.tsx
@@ -0,0 +1,97 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+const workspacesState = vi.hoisted(() => ({
+  workspaces: [] as { id: string; name: string }[],
+  isLoading: false,
+}))
+
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: { href: string; children: React.ReactNode }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+vi.mock('@/app/o/[organizationId]/components/organization-sidebar/hooks', () => ({
+  useOrganizationWorkspaces: () => workspacesState,
+}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu',
+  () => ({
+    CollapsedResourceFlyout: ({
+      entries,
+      isLoading,
+      emptyLabel,
+    }: {
+      entries: { id: string; name: string; href: string }[]
+      isLoading: boolean
+      emptyLabel: string
+    }) =>
+      isLoading ? (
+        <span>Loading...</span>
+      ) : entries.length === 0 ? (
+        <span>{emptyLabel}</span>
+      ) : (
+        entries.map((entry) => (
+          <a key={entry.id} href={entry.href}>
+            {entry.name}
+          </a>
+        ))
+      ),
+  })
+)
+
+import { WorkspacesRailFlyout } from '@/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout'
+
+let container: HTMLDivElement
+let root: Root
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  workspacesState.workspaces = []
+  workspacesState.isLoading = false
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  root = createRoot(container)
+})
+
+afterEach(async () => {
+  await act(async () => root.unmount())
+  container.remove()
+})
+
+async function render() {
+  await act(async () => {
+    root.render(<WorkspacesRailFlyout organizationId='org-1' />)
+  })
+}
+
+describe('WorkspacesRailFlyout', () => {
+  it('lists every workspace as a link into it', async () => {
+    workspacesState.workspaces = [
+      { id: 'ws-1', name: 'Design' },
+      { id: 'ws-2', name: 'Ops' },
+    ]
+    await render()
+
+    const links = Array.from(container.querySelectorAll('a')).map((a) => a.getAttribute('href'))
+    expect(links).toEqual(['/workspace/ws-1', '/workspace/ws-2'])
+    expect(container.textContent).toContain('Design')
+  })
+
+  it('shows the empty label when the organization has no workspaces', async () => {
+    await render()
+    expect(container.textContent).toContain('No workspaces yet')
+  })
+
+  it('shows the loading row while the list resolves', async () => {
+    workspacesState.isLoading = true
+    await render()
+    expect(container.textContent).toContain('Loading...')
+  })
+})
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.tsx
new file mode 100644
index 00000000000..6f57cee3bc9
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { useMemo } from 'react'
+import { useOrganizationWorkspaces } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+import type { FlyoutEntry } from '@/app/workspace/[workspaceId]/components/folders'
+import { CollapsedResourceFlyout } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu'
+
+interface WorkspacesRailFlyoutProps {
+  organizationId: string
+}
+
+/**
+ * Rail flyout body for the Workspaces tab: a jump list of the organization's
+ * workspaces, one row each, the way the workspace sidebar's Tables and Files tabs
+ * list theirs. Mounts only while the rail menu is open, so the workspace query
+ * runs only when someone hovers the chip.
+ */
+export function WorkspacesRailFlyout({ organizationId }: WorkspacesRailFlyoutProps) {
+  const { workspaces, isLoading } = useOrganizationWorkspaces(organizationId)
+
+  const entries = useMemo(
+    (): FlyoutEntry[] =>
+      workspaces.map((workspace) => ({
+        kind: 'item',
+        id: workspace.id,
+        name: workspace.name,
+        pinned: false,
+        href: `/workspace/${workspace.id}`,
+      })),
+    [workspaces]
+  )
+
+  return (
+    <CollapsedResourceFlyout
+      entries={entries}
+      isLoading={isLoading}
+      emptyLabel='No workspaces yet'
+    />
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/index.ts
new file mode 100644
index 00000000000..c96914ad41e
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/index.ts
@@ -0,0 +1,4 @@
+export { useCollapsedTooltips } from './use-collapsed-tooltips'
+export type { OrganizationChat } from './use-organization-chats'
+export { useOrganizationChats } from './use-organization-chats'
+export { useOrganizationWorkspaces } from './use-organization-workspaces'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-collapsed-tooltips.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-collapsed-tooltips.ts
new file mode 100644
index 00000000000..ec5451071ff
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-collapsed-tooltips.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react'
+
+/** How long the rail takes to settle after collapsing before row tooltips arm. */
+const COLLAPSED_TOOLTIP_DELAY_MS = 200
+
+/**
+ * Whether collapsed-rail tooltips should render. Arming is delayed past the rail's
+ * width animation so a tooltip never flashes beside a label that is still fading
+ * out; disarming is immediate so the expanded rail never shows one.
+ */
+export function useCollapsedTooltips(isCollapsed: boolean): boolean {
+  const [showCollapsedTooltips, setShowCollapsedTooltips] = useState(isCollapsed)
+
+  useEffect(() => {
+    if (isCollapsed) {
+      const timer = setTimeout(() => setShowCollapsedTooltips(true), COLLAPSED_TOOLTIP_DELAY_MS)
+      return () => clearTimeout(timer)
+    }
+    setShowCollapsedTooltips(false)
+  }, [isCollapsed])
+
+  return showCollapsedTooltips
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chats.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chats.ts
new file mode 100644
index 00000000000..52e183ce104
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-chats.ts
@@ -0,0 +1,21 @@
+export interface OrganizationChat {
+  id: string
+  name: string
+  href: string
+  /** A run is in progress. */
+  isActive?: boolean
+  /** Has a reply the viewer has not opened. */
+  isUnread?: boolean
+  isPinned?: boolean
+}
+
+/** Stable identity for the empty list, so the section's memos don't churn. */
+const EMPTY_CHATS: OrganizationChat[] = []
+
+/**
+ * Chats listed in the organization sidebar. The organization surface has no chat
+ * source of its own, so the list is empty and never loading.
+ */
+export function useOrganizationChats(_organizationId: string) {
+  return { chats: EMPTY_CHATS, isLoading: false }
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces.ts
new file mode 100644
index 00000000000..ca8625ab1c5
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces.ts
@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { useWorkspacesQuery, type Workspace } from '@/hooks/queries/workspace'
+
+/** Stable identity while the list loads, so the section's memos don't churn. */
+const EMPTY_WORKSPACES: Workspace[] = []
+
+/**
+ * The organization's workspaces the viewer belongs to, for the sidebar's
+ * Workspaces section. Read from the viewer's workspace list — the same query the
+ * workspace switcher uses — narrowed to those the organization owns.
+ */
+export function useOrganizationWorkspaces(organizationId: string) {
+  const { data = EMPTY_WORKSPACES, isLoading } = useWorkspacesQuery()
+
+  const workspaces = useMemo(
+    () => data.filter((workspace) => workspace.organizationId === organizationId),
+    [data, organizationId]
+  )
+
+  return { workspaces, isLoading }
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/index.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/index.ts
new file mode 100644
index 00000000000..9963f275118
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/index.ts
@@ -0,0 +1 @@
+export { OrganizationSidebar } from './organization-sidebar'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/navigation.ts b/apps/sim/app/o/[organizationId]/components/organization-sidebar/navigation.ts
new file mode 100644
index 00000000000..4db8c4b4ebb
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/navigation.ts
@@ -0,0 +1,35 @@
+import { Home, Integration, Slash, Workspaces } from '@sim/emcn/icons'
+import { organizationRoutes } from '@/lib/navigation/paths'
+import type { SidebarNavItemData } from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
+
+type OrganizationNavRoute = 'home' | 'integrations' | 'skills' | 'workspaces'
+
+interface OrganizationNavEntry {
+  id: string
+  label: string
+  icon: SidebarNavItemData['icon']
+  route: OrganizationNavRoute
+}
+
+/**
+ * The pinned block at the top of the organization sidebar, in display order.
+ * Hrefs are resolved per organization by {@link buildOrganizationNavItems}.
+ */
+
+/** The nav item whose collapsed rail chip also opens a flyout of the organization's workspaces. */
+export const WORKSPACES_NAV_ID = 'workspaces'
+
+const ORGANIZATION_NAV_ENTRIES: readonly OrganizationNavEntry[] = [
+  { id: 'home', label: 'Home', icon: Home, route: 'home' },
+  { id: 'integrations', label: 'Integrations', icon: Integration, route: 'integrations' },
+  { id: 'skills', label: 'Skills', icon: Slash, route: 'skills' },
+  { id: 'workspaces', label: 'Workspaces', icon: Workspaces, route: 'workspaces' },
+]
+
+export function buildOrganizationNavItems(organizationId: string): SidebarNavItemData[] {
+  const routes = organizationRoutes(organizationId)
+  return ORGANIZATION_NAV_ENTRIES.map(({ route, ...entry }) => ({
+    ...entry,
+    href: routes[route],
+  }))
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx b/apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx
new file mode 100644
index 00000000000..d16301de7bb
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx
@@ -0,0 +1,358 @@
+'use client'
+
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Chip, cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
+import { PanelLeft, Search } from '@sim/emcn/icons'
+import { createLogger } from '@sim/logger'
+import { usePathname } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
+import { isMacPlatform } from '@/lib/core/utils/platform'
+import { DOCS_URL, SLACK_COMMUNITY_URL } from '@/lib/help-links'
+import { captureEvent } from '@/lib/posthog/client'
+import {
+  ChatsSection,
+  OrganizationFooter,
+  OrganizationHeader,
+  WorkspacesRailFlyout,
+} from '@/app/o/[organizationId]/components/organization-sidebar/components'
+import {
+  useCollapsedTooltips,
+  useOrganizationChats,
+} from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+import {
+  buildOrganizationNavItems,
+  WORKSPACES_NAV_ID,
+} from '@/app/o/[organizationId]/components/organization-sidebar/navigation'
+import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+import { useSidebarChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
+import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
+import {
+  CollapsedSidebarMenu,
+  isNavItemActive,
+  NavItemContextMenu,
+  SidebarNavChip,
+  SidebarTooltip,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components'
+import {
+  SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+  SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+  SIDEBAR_ITEM_GAP_CLASS,
+  SIDEBAR_SECTION_GAP_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+import {
+  useHoverMenu,
+  useSidebarResize,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/hooks'
+import { useContextMenu } from '@/hooks/use-context-menu'
+import { useSidebarStore } from '@/stores/sidebar/store'
+
+const logger = createLogger('OrganizationSidebar')
+
+/**
+ * Opts a control out of the desktop shell's window-drag region. The header row is
+ * draggable chrome, so anything clickable inside it has to say so or the click is
+ * swallowed by the drag handler.
+ */
+const DRAG_EXEMPT_CLASS = '[-webkit-app-region:no-drag]'
+
+/**
+ * The organization surface's rail: the same chrome as the workspace sidebar —
+ * header row, pinned nav block, a divided scroll region of sections, and the
+ * pinned footer — hosted by the same `WorkspaceChrome`, so collapse, resize, and
+ * the desktop hover-peek all behave identically. Collapse and peek state come from
+ * the chrome through {@link useSidebarChrome}.
+ */
+export const OrganizationSidebar = memo(function OrganizationSidebar() {
+  const { isCollapsed: railCollapsed, isPeeking } = useSidebarChrome()
+  /** The peek card always renders the expanded layout, whatever the rail's state. */
+  const isCollapsed = railCollapsed && !isPeeking
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const scrollContentRef = useRef<HTMLDivElement>(null)
+
+  const pathname = usePathname()
+  const posthog = usePostHog()
+  const { organization } = useOrganizationContext()
+  const toggleCollapsed = useSidebarStore((state) => state.toggleCollapsed)
+  const { handlePointerDown } = useSidebarResize()
+  const showCollapsedTooltips = useCollapsedTooltips(isCollapsed)
+  const scrollEdges = useScrollEdges(scrollContainerRef, {
+    contentRef: scrollContentRef,
+    enabled: !isCollapsed,
+  })
+  const { chats, isLoading: chatsLoading } = useOrganizationChats(organization.id)
+  const workspacesHover = useHoverMenu()
+
+  const isMac = isMacPlatform()
+  const navItems = useMemo(() => buildOrganizationNavItems(organization.id), [organization.id])
+
+  /**
+   * One menu serves every href-bearing row (nav items, workspaces, chats): the
+   * actions — open in a new tab, copy the link — only need the destination.
+   */
+  const [menuHref, setMenuHref] = useState<string | null>(null)
+  const {
+    isOpen: isHrefMenuOpen,
+    position: hrefMenuPosition,
+    menuRef: hrefMenuRef,
+    handleContextMenu: openHrefMenu,
+    closeMenu: closeHrefMenu,
+  } = useContextMenu()
+
+  const handleHrefContextMenu = useCallback(
+    (e: React.MouseEvent, href: string) => {
+      setMenuHref(href)
+      openHrefMenu(e)
+    },
+    [openHrefMenu]
+  )
+
+  /** Anchors the menu to the row's options button rather than the pointer. */
+  const handleChatMoreClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>, href: string) => {
+      if (isHrefMenuOpen) {
+        closeHrefMenu()
+        return
+      }
+      const rect = e.currentTarget.getBoundingClientRect()
+      setMenuHref(href)
+      openHrefMenu({
+        preventDefault: () => {},
+        stopPropagation: () => {},
+        clientX: rect.right,
+        clientY: rect.top,
+      } as React.MouseEvent)
+    },
+    [isHrefMenuOpen, closeHrefMenu, openHrefMenu]
+  )
+
+  const handleHrefMenuClose = useCallback(() => {
+    closeHrefMenu()
+    setMenuHref(null)
+  }, [closeHrefMenu])
+
+  const handleOpenInNewTab = useCallback(() => {
+    if (menuHref) window.open(menuHref, '_blank', 'noopener,noreferrer')
+  }, [menuHref])
+
+  const handleCopyLink = useCallback(async () => {
+    if (!menuHref) return
+    try {
+      await navigator.clipboard.writeText(`${window.location.origin}${menuHref}`)
+    } catch (error) {
+      logger.error('Failed to copy link to clipboard', { error })
+    }
+  }, [menuHref])
+
+  useEffect(() => {
+    if (!isHrefMenuOpen) setMenuHref(null)
+  }, [isHrefMenuOpen])
+
+  const handleOpenDocs = () => {
+    window.open(DOCS_URL, '_blank', 'noopener,noreferrer')
+    captureEvent(posthog, 'docs_opened', { source: 'help_menu' })
+  }
+
+  const handleOpenSlackCommunity = () => {
+    window.open(SLACK_COMMUNITY_URL, '_blank', 'noopener,noreferrer')
+    captureEvent(posthog, 'slack_community_opened', { source: 'help_menu' })
+  }
+
+  const handleEdgeKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault()
+        toggleCollapsed()
+      }
+    },
+    [isCollapsed, toggleCollapsed]
+  )
+
+  useRegisterGlobalCommands(() =>
+    createCommands([
+      {
+        id: 'toggle-sidebar',
+        handler: () => {
+          toggleCollapsed()
+        },
+      },
+    ])
+  )
+
+  return (
+    <div className='relative h-full'>
+      <aside
+        className='group/rail sidebar-container relative h-full overflow-hidden bg-[var(--surface-1)] [&_.group.cursor-pointer]:duration-0'
+        data-collapsed={isCollapsed || undefined}
+        aria-label='Organization sidebar'
+      >
+        <div className='flex h-full flex-col'>
+          {/* The peek card already sits below the lane; reserving it again doubles the offset. */}
+          {!isPeeking && (
+            <div
+              aria-hidden
+              className='desktop-window-drag-region desktop-workspace-window-drag-region h-[var(--desktop-title-bar-height)]'
+            />
+          )}
+          <div
+            className={cn(
+              'relative flex shrink-0 items-center px-2 pt-2',
+              !isPeeking &&
+                '[[data-sim-desktop-title-bar=inset]_&]:pt-[var(--desktop-title-bar-height)]'
+            )}
+          >
+            <OrganizationHeader
+              organization={organization}
+              isCollapsed={isCollapsed}
+              onExpandSidebar={toggleCollapsed}
+            />
+            {/*
+             * The trailing chips collapse as one cluster on an unpadded wrapper with an
+             * explicit expanded width (2 icon chips × 32px + the 1px gap; 32px when the
+             * desktop inset title bar hides the collapse chip) — a chip's own `px-2`
+             * would leave a stub at `w-0`, and an `auto` width would crush the
+             * organization chip beside it. See the workspace sidebar's header.
+             */}
+            <div
+              className={cn(
+                'flex h-[30px] items-center gap-[1px] overflow-hidden',
+                isCollapsed
+                  ? 'w-0 opacity-0'
+                  : 'w-[65px] [[data-sim-desktop-title-bar=inset]_&]:w-[32px]'
+              )}
+            >
+              <SidebarTooltip
+                label='Search'
+                enabled={!isCollapsed}
+                side='bottom'
+                shortcut={isMac ? '⌘K' : 'Ctrl+K'}
+              >
+                <Chip
+                  leftIcon={Search}
+                  aria-label='Search'
+                  tabIndex={isCollapsed ? -1 : undefined}
+                  className={DRAG_EXEMPT_CLASS}
+                />
+              </SidebarTooltip>
+              <SidebarTooltip
+                label='Collapse sidebar'
+                enabled={!isCollapsed}
+                side='bottom'
+                shortcut={isMac ? '⌘B' : 'Ctrl+B'}
+              >
+                <Chip
+                  leftIcon={PanelLeft}
+                  aria-label='Collapse sidebar'
+                  onClick={toggleCollapsed}
+                  tabIndex={isCollapsed ? -1 : undefined}
+                  className={cn(DRAG_EXEMPT_CLASS, '[[data-sim-desktop-title-bar=inset]_&]:hidden')}
+                />
+              </SidebarTooltip>
+            </div>
+          </div>
+
+          {/* The divider is the pinned block's bottom rule, not the scroll region's top one:
+              the region's edge fade masks its own first pixels, which would erase a rule
+              drawn there exactly when it should show. Same construction as the footer. */}
+          <div
+            className={cn(
+              SIDEBAR_SECTION_GAP_CLASS,
+              SIDEBAR_ITEM_GAP_CLASS,
+              SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+              'flex shrink-0 flex-col border-b px-2 transition-colors duration-150',
+              !scrollEdges.top && 'border-transparent'
+            )}
+          >
+            {navItems.map((item) => {
+              const active = isNavItemActive(item, pathname)
+              /* The Workspaces chip grows a hover flyout of the organization's workspaces
+                 while the rail is collapsed. The flyout replaces the collapsed tooltip
+                 rather than stacking on it: both open on the same hover. Built inline —
+                 Radix mounts menu content on open, so the flyout's query does not run
+                 until the user actually hovers the chip. */
+              if (isCollapsed && item.id === WORKSPACES_NAV_ID) {
+                return (
+                  <CollapsedSidebarMenu
+                    key={item.id}
+                    hover={workspacesHover}
+                    navLink={{ item, active, onContextMenu: handleHrefContextMenu }}
+                  >
+                    <WorkspacesRailFlyout organizationId={organization.id} />
+                  </CollapsedSidebarMenu>
+                )
+              }
+              return (
+                <SidebarTooltip key={item.id} label={item.label} enabled={showCollapsedTooltips}>
+                  <SidebarNavChip
+                    item={item}
+                    active={active}
+                    onContextMenu={(e) => handleHrefContextMenu(e, item.href as string)}
+                  />
+                </SidebarTooltip>
+              )
+            })}
+          </div>
+
+          <div
+            ref={scrollContainerRef}
+            className={cn(
+              SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+              SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+              scrollFadeClass,
+              'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden'
+            )}
+            {...scrollFadeAttributes(scrollEdges)}
+          >
+            <div ref={scrollContentRef} className='flex flex-col'>
+              <ChatsSection
+                chats={chats}
+                isLoading={chatsLoading}
+                isCollapsed={isCollapsed}
+                pathname={pathname}
+                menuOpenHref={menuHref}
+                onContextMenu={handleHrefContextMenu}
+                onMoreClick={handleChatMoreClick}
+              />
+            </div>
+          </div>
+
+          <OrganizationFooter
+            showDivider={scrollEdges.bottom}
+            isCollapsed={isCollapsed}
+            showCollapsedTooltips={showCollapsedTooltips}
+            onOpenDocs={handleOpenDocs}
+            onJoinSlack={handleOpenSlackCommunity}
+          />
+
+          <NavItemContextMenu
+            isOpen={isHrefMenuOpen}
+            position={hrefMenuPosition}
+            menuRef={hrefMenuRef}
+            onClose={handleHrefMenuClose}
+            onOpenInNewTab={handleOpenInNewTab}
+            onCopyLink={handleCopyLink}
+          />
+        </div>
+      </aside>
+
+      {/* Not on the peek card: the resize hook writes an inline `--sidebar-width` that
+          out-specifies the `[data-peek]` rule, stranding the card at a stale width. */}
+      {!isPeeking && (
+        <div
+          className={cn(
+            'absolute top-0 right-0 bottom-0 z-20 w-[8px] translate-x-1/2',
+            isCollapsed ? 'cursor-e-resize' : 'cursor-ew-resize'
+          )}
+          onPointerDown={isCollapsed ? undefined : handlePointerDown}
+          onClick={isCollapsed ? toggleCollapsed : undefined}
+          onKeyDown={handleEdgeKeyDown}
+          role={isCollapsed ? 'button' : 'separator'}
+          tabIndex={0}
+          aria-orientation={isCollapsed ? undefined : 'vertical'}
+          aria-label={isCollapsed ? 'Expand sidebar' : 'Resize sidebar'}
+        />
+      )}
+    </div>
+  )
+})
diff --git a/apps/sim/app/o/[organizationId]/error.tsx b/apps/sim/app/o/[organizationId]/error.tsx
new file mode 100644
index 00000000000..42dca68dcb2
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/error.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import {
+  type ErrorBoundaryProps,
+  ErrorState,
+} from '@/app/workspace/[workspaceId]/components/error/error'
+
+export default function OrganizationError({ error, reset }: ErrorBoundaryProps) {
+  return (
+    <ErrorState
+      error={error}
+      reset={reset}
+      title='Something went wrong'
+      description='An unexpected error occurred. Please try again or refresh the page.'
+      loggerName='OrganizationError'
+    />
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/home/page.tsx b/apps/sim/app/o/[organizationId]/home/page.tsx
new file mode 100644
index 00000000000..2511934ef46
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Home',
+}
+
+export default function OrganizationHomePage() {
+  return null
+}
diff --git a/apps/sim/app/o/[organizationId]/integrations/page.tsx b/apps/sim/app/o/[organizationId]/integrations/page.tsx
new file mode 100644
index 00000000000..18f11e80798
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/integrations/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Integrations',
+}
+
+export default function OrganizationIntegrationsPage() {
+  return null
+}
diff --git a/apps/sim/app/o/[organizationId]/layout.test.tsx b/apps/sim/app/o/[organizationId]/layout.test.tsx
new file mode 100644
index 00000000000..5b29c1bff06
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/layout.test.tsx
@@ -0,0 +1,84 @@
+/**
+ * @vitest-environment node
+ */
+
+import type { ReactNode } from 'react'
+import { authMockFns } from '@sim/testing'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockGetOrganizationSurfaceContext, mockWorkspaceChrome } = vi.hoisted(() => ({
+  mockGetOrganizationSurfaceContext: vi.fn(),
+  mockWorkspaceChrome: vi.fn(({ children }: { children: ReactNode }) => children),
+}))
+
+vi.mock('next/headers', () => ({
+  cookies: vi.fn(async () => ({ get: vi.fn(() => ({ value: '1' })) })),
+}))
+
+vi.mock('next/navigation', () => ({
+  redirect: vi.fn(),
+}))
+
+vi.mock('@/lib/organizations/surface', () => ({
+  getOrganizationSurfaceContext: mockGetOrganizationSurfaceContext,
+}))
+
+vi.mock('@/app/o/[organizationId]/components/organization-sidebar', () => ({
+  OrganizationSidebar: () => null,
+}))
+
+vi.mock('@/app/workspace/[workspaceId]/components/workspace-chrome', () => ({
+  WorkspaceChrome: mockWorkspaceChrome,
+}))
+
+vi.mock('@/app/workspace/[workspaceId]/providers/global-commands-provider', () => ({
+  GlobalCommandsProvider: ({ children }: { children: ReactNode }) => children,
+}))
+
+import OrganizationLayout from '@/app/o/[organizationId]/layout'
+
+const mockGetSession = authMockFns.mockGetSession
+
+const SURFACE_CONTEXT = {
+  organization: { id: 'org-1', name: 'Acme', slug: 'acme', logo: null },
+  viewer: { role: 'member', isAdmin: false },
+}
+
+describe('OrganizationLayout', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetSession.mockResolvedValue({ user: { id: 'viewer-1' } })
+  })
+
+  it('renders the surface for a member and seeds the chrome from the collapse cookie', async () => {
+    mockGetOrganizationSurfaceContext.mockResolvedValue(SURFACE_CONTEXT)
+
+    const element = await OrganizationLayout({
+      children: <div>Organization child</div>,
+      params: Promise.resolve({ organizationId: 'org-1' }),
+    })
+    const html = renderToStaticMarkup(element)
+
+    expect(mockGetOrganizationSurfaceContext).toHaveBeenCalledWith('org-1', 'viewer-1')
+    expect(html).toContain('Organization child')
+    expect(mockWorkspaceChrome).toHaveBeenCalledWith(
+      expect.objectContaining({ initialSidebarCollapsed: true }),
+      undefined
+    )
+  })
+
+  it('renders an explicit denial for a non-member without the surface', async () => {
+    mockGetOrganizationSurfaceContext.mockResolvedValue(null)
+
+    const element = await OrganizationLayout({
+      children: <div>Secret organization child</div>,
+      params: Promise.resolve({ organizationId: 'org-denied' }),
+    })
+    const html = renderToStaticMarkup(element)
+
+    expect(html).toContain('Organization access denied')
+    expect(html).not.toContain('Secret organization child')
+    expect(mockWorkspaceChrome).not.toHaveBeenCalled()
+  })
+})
diff --git a/apps/sim/app/o/[organizationId]/layout.tsx b/apps/sim/app/o/[organizationId]/layout.tsx
new file mode 100644
index 00000000000..5ae46780bbf
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/layout.tsx
@@ -0,0 +1,54 @@
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { getOrganizationSurfaceContext } from '@/lib/organizations/surface'
+import { OrganizationAccessDenied } from '@/app/o/[organizationId]/components/organization-access-denied'
+import { OrganizationSidebar } from '@/app/o/[organizationId]/components/organization-sidebar'
+import { OrganizationProvider } from '@/app/o/[organizationId]/providers/organization-provider'
+import { WorkspaceChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
+import { GlobalCommandsProvider } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
+
+/**
+ * The organization surface: the viewer's own view of one organization, outside
+ * any workspace. Membership in the routed organization is the whole gate — a
+ * non-member gets an explicit denial rather than a redirect, so a stale link
+ * never bounces someone into a different organization.
+ */
+export default async function OrganizationLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode
+  params: Promise<{ organizationId: string }>
+}) {
+  const session = await getSession()
+  if (!session?.user) {
+    redirect('/login')
+  }
+
+  const { organizationId } = await params
+  const [context, cookieStore] = await Promise.all([
+    getOrganizationSurfaceContext(organizationId, session.user.id),
+    cookies(),
+  ])
+  if (!context) {
+    return <OrganizationAccessDenied />
+  }
+
+  const initialSidebarCollapsed = cookieStore.get('sidebar_collapsed')?.value === '1'
+
+  return (
+    <OrganizationProvider context={context}>
+      <GlobalCommandsProvider>
+        <div className='workspace-root flex h-screen w-full flex-col overflow-hidden bg-[var(--surface-1)]'>
+          <WorkspaceChrome
+            sidebar={<OrganizationSidebar />}
+            initialSidebarCollapsed={initialSidebarCollapsed}
+          >
+            {children}
+          </WorkspaceChrome>
+        </div>
+      </GlobalCommandsProvider>
+    </OrganizationProvider>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/not-found.tsx b/apps/sim/app/o/[organizationId]/not-found.tsx
new file mode 100644
index 00000000000..fe33e4d7c62
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/not-found.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { Button, buttonVariants } from '@sim/emcn'
+import { ArrowLeft, Compass, Home } from '@sim/emcn/icons'
+import Link from 'next/link'
+import { useParams, useRouter } from 'next/navigation'
+import { organizationRoutes } from '@/lib/navigation/paths'
+import { ErrorShell } from '@/app/workspace/[workspaceId]/components/error/error'
+
+export default function OrganizationNotFound() {
+  const router = useRouter()
+  const { organizationId } = useParams<{ organizationId?: string }>()
+  const homeHref = organizationId ? organizationRoutes(organizationId).home : '/o'
+
+  return (
+    <ErrorShell
+      title='Page not found'
+      description="The page you're looking for doesn't exist or has been moved."
+      icon={<Compass className='size-[22px]' />}
+    >
+      <Button variant='default' size='md' onClick={() => router.back()}>
+        <ArrowLeft className='mr-1.5 size-[14px]' />
+        Go back
+      </Button>
+      <Link href={homeHref} className={buttonVariants({ variant: 'primary', size: 'md' })}>
+        <Home className='mr-1.5 size-[14px]' />
+        Return home
+      </Link>
+    </ErrorShell>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/page.tsx b/apps/sim/app/o/[organizationId]/page.tsx
new file mode 100644
index 00000000000..ad93fa4fcc2
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/page.tsx
@@ -0,0 +1,11 @@
+import { redirect } from 'next/navigation'
+import { organizationRoutes } from '@/lib/navigation/paths'
+
+export default async function OrganizationPage({
+  params,
+}: {
+  params: Promise<{ organizationId: string }>
+}) {
+  const { organizationId } = await params
+  redirect(organizationRoutes(organizationId).home)
+}
diff --git a/apps/sim/app/o/[organizationId]/providers/organization-provider.tsx b/apps/sim/app/o/[organizationId]/providers/organization-provider.tsx
new file mode 100644
index 00000000000..57c300a7381
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/providers/organization-provider.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { createContext, type ReactNode, useContext } from 'react'
+import type { OrganizationSurfaceContext } from '@/lib/organizations/surface'
+
+const OrganizationContextValue = createContext<OrganizationSurfaceContext | null>(null)
+
+interface OrganizationProviderProps {
+  children: ReactNode
+  context: OrganizationSurfaceContext
+}
+
+/**
+ * Provides the route-resolved organization and the viewer's standing in it to the
+ * organization surface. The layout resolves both on the server, so the first paint
+ * already knows the organization's name and logo.
+ */
+export function OrganizationProvider({ children, context }: OrganizationProviderProps) {
+  return (
+    <OrganizationContextValue.Provider value={context}>
+      {children}
+    </OrganizationContextValue.Provider>
+  )
+}
+
+export function useOrganizationContext(): OrganizationSurfaceContext {
+  const context = useContext(OrganizationContextValue)
+  if (!context) {
+    throw new Error('useOrganizationContext must be used within OrganizationProvider')
+  }
+  return context
+}
diff --git a/apps/sim/app/o/[organizationId]/skills/page.tsx b/apps/sim/app/o/[organizationId]/skills/page.tsx
new file mode 100644
index 00000000000..e5941b2a62f
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/skills/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Skills',
+}
+
+export default function OrganizationSkillsPage() {
+  return null
+}
diff --git a/apps/sim/app/o/[organizationId]/workspaces/page.tsx b/apps/sim/app/o/[organizationId]/workspaces/page.tsx
new file mode 100644
index 00000000000..1844bb150b4
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/workspaces/page.tsx
@@ -0,0 +1,9 @@
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Workspaces',
+}
+
+export default function OrganizationWorkspacesPage() {
+  return null
+}
diff --git a/apps/sim/app/o/page.tsx b/apps/sim/app/o/page.tsx
new file mode 100644
index 00000000000..b0f5c8f2751
--- /dev/null
+++ b/apps/sim/app/o/page.tsx
@@ -0,0 +1,16 @@
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/auth'
+import { resolveAppEntryPath } from '@/lib/navigation/resolve-app-entry'
+
+/**
+ * Bare `/o` has no organization to show, so it resolves exactly like the app entry:
+ * the viewer's organization home, or their workspaces when they belong to none.
+ */
+export default async function OrganizationIndexPage() {
+  const session = await getSession()
+  if (!session?.user) {
+    redirect('/login')
+  }
+
+  redirect(await resolveAppEntryPath(session))
+}
diff --git a/apps/sim/app/oauth/chat-complete/chat-complete-handoff.test.tsx b/apps/sim/app/oauth/chat-complete/chat-complete-handoff.test.tsx
index 8b28bf1f473..bd72e37127b 100644
--- a/apps/sim/app/oauth/chat-complete/chat-complete-handoff.test.tsx
+++ b/apps/sim/app/oauth/chat-complete/chat-complete-handoff.test.tsx
@@ -128,7 +128,7 @@ describe('ChatCompleteHandoff', () => {
         vi.advanceTimersByTime(400)
       })
 
-      expect(calls).toEqual(['/workspace'])
+      expect(calls).toEqual(['/home'])
       act(() => root.unmount())
     })
   })
diff --git a/apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx b/apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx
index 258bf17d1e8..7965bf186d4 100644
--- a/apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx
+++ b/apps/sim/app/oauth/chat-complete/chat-complete-handoff.tsx
@@ -6,6 +6,7 @@ import {
   OAUTH_CHAT_RETURN_TO_PARAM,
   setOAuthChatAttemptStatus,
 } from '@/lib/credentials/oauth-chat-attempt'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 const CLOSE_FALLBACK_DELAY_MS = 400
 
@@ -57,7 +58,7 @@ export function ChatCompleteHandoff() {
 
     window.close()
     const timer = window.setTimeout(() => {
-      window.location.replace(returnTo ?? '/workspace')
+      window.location.replace(returnTo ?? APP_ENTRY_PATH)
     }, CLOSE_FALLBACK_DELAY_MS)
     return () => window.clearTimeout(timer)
   }, [])
diff --git a/apps/sim/app/oauth/credential-connected/page.tsx b/apps/sim/app/oauth/credential-connected/page.tsx
index 72606f82511..289d49be15f 100644
--- a/apps/sim/app/oauth/credential-connected/page.tsx
+++ b/apps/sim/app/oauth/credential-connected/page.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import type { Metadata } from 'next'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { LogoShell } from '@/app/(landing)/components'
 
 export const metadata: Metadata = {
@@ -30,7 +31,7 @@ export default async function CredentialConnectedPage({
             ? 'The credential is ready to use. You can close this tab and return to the app that started the connection.'
             : 'The credential could not be connected. Return to the app that started the connection and try again.'}
         </p>
-        <ChipLink variant='primary' href='/workspace' className='mt-3'>
+        <ChipLink variant='primary' href={APP_ENTRY_PATH} className='mt-3'>
           Open Sim
         </ChipLink>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-banner.tsx b/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-banner.tsx
index f88977be585..24a22ed7d60 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-banner.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/impersonation-banner/impersonation-banner.tsx
@@ -3,6 +3,7 @@
 import { useState } from 'react'
 import { Banner } from '@sim/emcn'
 import { useSession } from '@/lib/auth/auth-client'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { useStopImpersonating } from '@/hooks/queries/admin-users'
 import { clearUserData } from '@/stores'
 
@@ -39,7 +40,7 @@ export function ImpersonationBanner() {
           onSuccess: async () => {
             setIsRedirecting(true)
             await clearUserData({ preserveRecentImpersonations: true })
-            window.location.assign('/workspace')
+            window.location.assign(APP_ENTRY_PATH)
           },
         })
       }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx
index ef011ad5ad6..6184759bc63 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-access-denied.tsx
@@ -1,5 +1,6 @@
 import { ChipLink } from '@sim/emcn'
 import { CircleAlert } from '@sim/emcn/icons'
+import { WORKSPACES_PATH } from '@/lib/navigation/paths'
 import { DesktopTitleBarLane } from '@/app/_shell/desktop-title-bar'
 
 export function WorkspaceAccessDenied() {
@@ -17,7 +18,7 @@ export function WorkspaceAccessDenied() {
             choose another workspace.
           </p>
         </div>
-        <ChipLink href='/workspace' variant='primary'>
+        <ChipLink href={WORKSPACES_PATH} variant='primary'>
           View your workspaces
         </ChipLink>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/index.ts b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/index.ts
index f568d2dec2d..fdd2f9bf069 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/index.ts
@@ -1 +1,3 @@
+export type { SidebarChromeState } from './sidebar-chrome-context'
+export { SidebarChromeProvider, useSidebarChrome } from './sidebar-chrome-context'
 export { WorkspaceChrome } from './workspace-chrome'
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context.tsx
new file mode 100644
index 00000000000..cdb39e7de5d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
+
+export interface SidebarChromeState {
+  /**
+   * Authoritative collapse state, derived once in `WorkspaceChrome` from the
+   * `sidebar_collapsed` cookie (server prop → store after hydration) so the rail's
+   * structure, labels, and width all read a single source.
+   */
+  isCollapsed: boolean
+  /**
+   * True while the sidebar is rendered as the desktop hover-peek card. The card shows
+   * the expanded layout even though the rail is collapsed, so a sidebar treats this
+   * as overriding {@link SidebarChromeState.isCollapsed} — and separately suppresses
+   * the chrome the card already provides (the title-bar lane, drag-resize).
+   */
+  isPeeking: boolean
+}
+
+const SidebarChromeContext = createContext<SidebarChromeState | null>(null)
+
+interface SidebarChromeProviderProps extends SidebarChromeState {
+  children: ReactNode
+}
+
+/**
+ * Hands the chrome's collapse and peek state to whichever sidebar it hosts. The
+ * chrome owns that state; the sidebar is passed in as an element, so it cannot take
+ * the values as props from a server layout — it reads them here instead.
+ */
+export function SidebarChromeProvider({
+  isCollapsed,
+  isPeeking,
+  children,
+}: SidebarChromeProviderProps) {
+  const value = useMemo(() => ({ isCollapsed, isPeeking }), [isCollapsed, isPeeking])
+  return <SidebarChromeContext.Provider value={value}>{children}</SidebarChromeContext.Provider>
+}
+
+export function useSidebarChrome(): SidebarChromeState {
+  const context = useContext(SidebarChromeContext)
+  if (!context) {
+    throw new Error('useSidebarChrome must be used within WorkspaceChrome')
+  }
+  return context
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
index f782b93d2f5..fd0e5aac7f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx
@@ -1,23 +1,20 @@
 'use client'
 
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { type ReactNode, useEffect, useLayoutEffect, useState } from 'react'
 import { cn } from '@sim/emcn'
 import { ArrowLeft, ArrowRight, PanelLeft } from '@sim/emcn/icons'
 import { usePathname } from 'next/navigation'
 import { getDesktopBridge } from '@/lib/desktop'
 import { applyDesktopTitleBarMode, type DesktopTitleBarMode } from '@/app/_shell/desktop-title-bar'
+import { SidebarChromeProvider } from '@/app/workspace/[workspaceId]/components/workspace-chrome/sidebar-chrome-context'
 import { useSidebarPeek } from '@/app/workspace/[workspaceId]/components/workspace-chrome/use-sidebar-peek'
-import { Sidebar, SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
+import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
 import { useFullscreenOriginStore } from '@/stores/fullscreen-origin'
 import { useSearchModalStore } from '@/stores/modals/search/store'
 import { useSidebarStore } from '@/stores/sidebar/store'
 
 const FULLSCREEN_SUFFIXES = ['/upgrade'] as const
 
-/** Slide timing for the fullscreen sidebar collapse and content shift. */
-const SLIDE_TRANSITION =
-  '[transition-duration:175ms] [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)] motion-reduce:transition-none'
-
 /**
  * The peek card's floating chrome.
  *
@@ -63,25 +60,28 @@ const PEEK_CARD_EXIT = cn(
   'pointer-events-none animate-out fade-out-0 zoom-out-95 fill-mode-forwards duration-150 ease-out motion-reduce:animate-none'
 )
 
-/** The docked rail: in flow, width-animated by the collapse toggle. */
-const SIDEBAR_SHELL_IN_FLOW = cn('transition-[width]', SLIDE_TRANSITION)
-
 /**
- * The content pane's own chrome, dropped when the pane sits flush to the window.
- *
- * Collapsing the sidebar in the desktop shell takes the surrounding padding to `0`,
- * which puts the pane hard against the window edge — and its border and radius then
- * draw a hairline outline with rounded corners inset from the square window frame.
+ * The divider between the rail and the content pane, dropped when there is no rail
+ * beside it: collapsed to nothing in the desktop shell, where the pane sits hard
+ * against the window edge. A fullscreen route drops it through React state instead,
+ * since that is a navigation rather than a pre-paint attribute.
  *
  * Keyed off the ancestor attributes rather than React state on purpose: the title-bar
- * attribute is written pre-paint, so a state-driven rule would flash the border on
+ * attribute is written pre-paint, so a state-driven rule would flash the line on
  * first paint before hydration settles.
  */
-const CONTENT_PANE_FLUSH =
-  '[[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:rounded-none [[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:border-0'
+const CONTENT_PANE_DIVIDER =
+  'border-l border-[var(--border)] [[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:border-l-0'
 
 interface WorkspaceChromeProps {
-  children: React.ReactNode
+  children: ReactNode
+  /**
+   * The rail this chrome hosts. Rendered once inside the shell and never re-mounted
+   * across collapse, peek, or fullscreen; it reads collapse and peek state through
+   * {@link useSidebarChrome}. The workspace passes its own `Sidebar`; the organization
+   * surface passes `OrganizationSidebar`.
+   */
+  sidebar: ReactNode
   /** Cookie-derived collapse state from the server layout; seeds the sidebar's first render. */
   initialSidebarCollapsed?: boolean
 }
@@ -154,15 +154,15 @@ function isFullscreenPath(pathname: string | null): boolean {
 }
 
 /**
- * Renders the workspace chrome as a single persistent tree. The sidebar is
+ * Renders the app chrome as a single persistent tree — the workspace layout and the
+ * organization layout both mount it, each with its own sidebar. The sidebar is
  * always mounted; on a fullscreen route (`/upgrade`) its wrapper collapses to
- * zero width while the inner shell slides off the left edge, revealing the route
- * content. Because this component lives in the workspace layout it persists
- * across navigations, so the pathname-driven class toggle animates smoothly.
+ * zero width, revealing the route content. Because this component lives in the
+ * layout it persists across navigations, so the rail never re-mounts.
  *
- * Leaving a fullscreen route is instant: App Router swaps `children` to the
- * origin page and the fullscreen page is simply unmounted, while the sidebar
- * slides back in. There is no exit fade — the new page just loads in place.
+ * Nothing here animates: collapse, expand, and the fullscreen swap all apply in
+ * one frame. The rail and the pane meet on a single hairline divider with no
+ * gutter, radius, or shift between states.
  *
  * Because the chrome observes every pathname transition, it records the page a
  * fullscreen route was launched from into {@link useFullscreenOriginStore}. The
@@ -170,9 +170,6 @@ function isFullscreenPath(pathname: string | null): boolean {
  * trigger that merely pushes a fullscreen route gets correct return-to-origin
  * without per-call-site wiring.
  *
- * On a direct load of a fullscreen route the wrapper mounts already collapsed,
- * so no slide plays (CSS transitions don't run on mount).
- *
  * On the macOS desktop shell, where collapsing hides the rail entirely, the same
  * wrapper doubles as the hover-peek card: hovering the title-bar sidebar toggle
  * takes it out of flow, floats it over the content inset from the window edge, and
@@ -181,10 +178,9 @@ function isFullscreenPath(pathname: string | null): boolean {
  */
 export function WorkspaceChrome({
   children,
+  sidebar,
   initialSidebarCollapsed = false,
 }: WorkspaceChromeProps) {
-  const rafRef = useRef(0)
-
   const pathname = usePathname()
   const isFullscreen = isFullscreenPath(pathname)
 
@@ -228,29 +224,6 @@ export function WorkspaceChrome({
   const { isPeekActive, isPeekOpen, cardRef, triggerRef, onTriggerEnter, onTriggerLeave } =
     useSidebarPeek(peekEnabled, isSearchModalOpen)
 
-  /**
-   * Suppresses sidebar transitions across the initial hydration window. The
-   * pre-paint script already set the correct `--sidebar-width`, but the store
-   * rehydration below re-applies it a tick later; without this guard that
-   * re-apply animates the rail, reading as a collapse -> expand flash on a
-   * fresh load. Applied before the rehydrate effect so the class is in place
-   * ahead of the width mutation, then lifted after the first paint so
-   * user-driven collapse toggles and the fullscreen slide still animate.
-   */
-  useLayoutEffect(() => {
-    const root = document.documentElement
-    root.classList.add('sidebar-booting')
-    const raf1 = requestAnimationFrame(() => {
-      const raf2 = requestAnimationFrame(() => root.classList.remove('sidebar-booting'))
-      rafRef.current = raf2
-    })
-    rafRef.current = raf1
-    return () => {
-      cancelAnimationFrame(rafRef.current)
-      root.classList.remove('sidebar-booting')
-    }
-  }, [])
-
   // Hydrate the persisted width before paint (collapse comes from the cookie/prop).
   useLayoutEffect(() => {
     void useSidebarStore.persist.rehydrate()
@@ -362,7 +335,9 @@ export function WorkspaceChrome({
             ? isPeekOpen
               ? PEEK_CARD_ENTER
               : PEEK_CARD_EXIT
-            : cn(isFullscreen ? 'w-0' : 'w-[var(--sidebar-width)]', SIDEBAR_SHELL_IN_FLOW)
+            : isFullscreen
+              ? 'w-0'
+              : 'w-[var(--sidebar-width)]'
         )}
         data-collapsed={isCollapsed || undefined}
         data-peek={isPeekActive || undefined}
@@ -370,23 +345,14 @@ export function WorkspaceChrome({
         aria-hidden={isFullscreen || (isPeekActive && !isPeekOpen) || undefined}
         suppressHydrationWarning
       >
-        <div
-          className={cn(
-            'sidebar-shell-inner h-full w-[var(--sidebar-width)] shrink-0 transition-transform',
-            SLIDE_TRANSITION,
-            isFullscreen && '-translate-x-full'
-          )}
-        >
-          <Sidebar isCollapsed={isCollapsed} isPeeking={isPeekActive} />
+        <div className='sidebar-shell-inner h-full w-[var(--sidebar-width)] shrink-0'>
+          <SidebarChromeProvider isCollapsed={isCollapsed} isPeeking={isPeekActive}>
+            {sidebar}
+          </SidebarChromeProvider>
         </div>
       </div>
       <div
-        className={cn(
-          'workspace-content-shell flex min-w-0 flex-1 flex-col p-[8px] transition-[padding]',
-          SLIDE_TRANSITION,
-          !isFullscreen && 'pl-0',
-          isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'
-        )}
+        className='workspace-content-shell flex min-w-0 flex-1 flex-col'
         data-sidebar-collapsed={isCollapsed || undefined}
         /* A fullscreen route slides the sidebar away without collapsing it, so the pane
            inherits the traffic-light lane the same way a collapsed sidebar does. */
@@ -394,8 +360,9 @@ export function WorkspaceChrome({
       >
         <div
           className={cn(
-            'flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]',
-            CONTENT_PANE_FLUSH
+            'flex-1 overflow-hidden bg-[var(--bg)]',
+            CONTENT_PANE_DIVIDER,
+            isFullscreen && 'border-l-0'
           )}
         >
           {children}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
index 9829532420e..5ab1b986952 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/use-oauth-chip-connection.ts
@@ -21,6 +21,7 @@ import {
   setOAuthChatAttemptStatus,
 } from '@/lib/credentials/oauth-chat-attempt'
 import { getDesktopBridge } from '@/lib/desktop'
+import { isAppSurfacePath } from '@/lib/navigation/paths'
 import type { OAuthProvider } from '@/lib/oauth/types'
 import { parseProvider, providerIdsForService } from '@/lib/oauth/utils'
 import { useWorkspaceCredentials } from '@/hooks/queries/credentials'
@@ -38,12 +39,21 @@ const OAUTH_POPUP_POLL_INTERVAL_MS = 400
 const OAUTH_POPUP_UNOBSERVABLE_TIMEOUT_MS = 10 * 60 * 1000
 
 /**
- * Same-origin pages an OAuth flow can die on without reaching the return leg —
  * Better Auth sends pre-state failures (usually a denied consent) to its global
- * error page, and the custom-provider callbacks exit to the workspace root.
- * Neither publishes a verdict, so a popup sitting on one is finished.
+ * error page, which publishes no verdict.
+ */
+const OAUTH_ERROR_PATH = '/oauth-error'
+
+/**
+ * Same-origin pages an OAuth flow can die on without reaching the return leg —
+ * the Better Auth error page, or anywhere in the signed-in app, which is where the
+ * custom-provider callbacks exit to. The app entry forwards on the server to the
+ * organization or a workspace, so any app surface counts, not just the entry
+ * itself. None of them publishes a verdict, so a popup sitting on one is finished.
  */
-const OAUTH_POPUP_TERMINAL_PATHS = new Set(['/oauth-error', '/workspace'])
+function isOAuthPopupTerminalPath(pathname: string): boolean {
+  return pathname === OAUTH_ERROR_PATH || isAppSurfacePath(pathname)
+}
 
 /**
  * What the opener can actually prove about a popup it launched. `ended` needs
@@ -64,7 +74,7 @@ function observePopup(popup: { window: Window } | null): PopupObservation {
   if (closed) return 'unobservable'
   try {
     const { origin, pathname } = popup.window.location
-    if (origin === window.location.origin && OAUTH_POPUP_TERMINAL_PATHS.has(pathname)) {
+    if (origin === window.location.origin && isOAuthPopupTerminalPath(pathname)) {
       return 'ended'
     }
   } catch {
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.test.tsx b/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
index 26305f13a74..79f619de2cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.test.tsx
@@ -65,6 +65,10 @@ vi.mock('@/app/workspace/[workspaceId]/components/workspace-chrome', () => ({
   WorkspaceChrome: ({ children }: { children: ReactNode }) => children,
 }))
 
+vi.mock('@/app/workspace/[workspaceId]/w/components/sidebar/sidebar', () => ({
+  Sidebar: () => null,
+}))
+
 vi.mock('@/app/workspace/[workspaceId]/components/workspace-access-denied', () => ({
   WorkspaceAccessDenied: () => <div>Workspace access denied</div>,
 }))
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 01d1c56062a..1e93ff58add 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -23,6 +23,7 @@ import { SettingsLoader } from '@/app/workspace/[workspaceId]/providers/settings
 import { WorkspaceHostProvider } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import { WorkspacePermissionsProvider } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { WorkspaceScopeSync } from '@/app/workspace/[workspaceId]/providers/workspace-scope-sync'
+import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { BrandingProvider } from '@/ee/whitelabeling/components/branding-provider'
 import { getOrgWhitelabelSettings } from '@/ee/whitelabeling/org-branding'
 
@@ -82,7 +83,10 @@ export default async function WorkspaceLayout({
                 <SessionExpired />
                 <WorkspacePermissionsProvider>
                   <WorkspaceScopeSync />
-                  <WorkspaceChrome initialSidebarCollapsed={initialSidebarCollapsed}>
+                  <WorkspaceChrome
+                    sidebar={<Sidebar />}
+                    initialSidebarCollapsed={initialSidebarCollapsed}
+                  >
                     {children}
                   </WorkspaceChrome>
                 </WorkspacePermissionsProvider>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 6ca773ac144..85fa1441c6e 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -20,6 +20,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryStates } from 'nuqs'
 import type { MothershipEnvironment } from '@/lib/api/contracts'
 import { useSession } from '@/lib/auth/auth-client'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { AddUserModal } from '@/app/workspace/[workspaceId]/settings/components/admin/add-user-modal'
 import {
   adminParsers,
@@ -158,7 +159,7 @@ export function Admin() {
         onSuccess: async () => {
           recordImpersonation(email)
           await clearUserData({ preserveRecentImpersonations: true })
-          window.location.assign('/workspace')
+          window.location.assign(APP_ENTRY_PATH)
         },
       }
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index 2d21ca6bed7..ebbf8e42b46 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -7,6 +7,7 @@ import { getErrorMessage } from '@sim/utils/errors'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionAccessState } from '@/lib/billing/client/utils'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { generateSlug, isAdminOrOwner, type Member } from '@/lib/workspaces/organization'
 import { InviteModal } from '@/app/workspace/[workspaceId]/components/invite-modal'
 import {
@@ -224,7 +225,7 @@ export function TeamManagement({ organizationId, billingHref }: TeamManagementPr
       })
 
       if (isSelfRemoval) {
-        window.location.href = '/workspace'
+        window.location.href = APP_ENTRY_PATH
       }
     } catch (error) {
       logger.error('Failed to remove member', error)
@@ -266,7 +267,7 @@ export function TeamManagement({ organizationId, billingHref }: TeamManagementPr
         setTransferDialogOpen(false)
 
         if (result.left) {
-          window.location.href = '/workspace'
+          window.location.href = APP_ENTRY_PATH
         }
       } catch (error) {
         logger.error('Failed to transfer ownership', error)
@@ -282,7 +283,7 @@ export function TeamManagement({ organizationId, billingHref }: TeamManagementPr
       {
         context: 'organization',
         organizationId,
-        returnUrl: `${getBaseUrl()}/workspace`,
+        returnUrl: `${getBaseUrl()}${APP_ENTRY_PATH}`,
       },
       {
         onSuccess: (data) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
index 32af4cc4d53..b12086f7a27 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/connection-block-selector/connection-block-selector.tsx
@@ -467,7 +467,6 @@ export function ConnectionBlockSelector({ id, data }: NodeProps<ConnectionBlockS
         <div className='relative min-h-0 flex-1'>
           <CommandFadedList
             ref={listRef}
-            fade='canvas'
             className={cn(
               "nodrag nopan nowheel allow-scroll scrollbar-none h-full [clip-path:inset(3px_round_13px)] [&_[cmdk-item][aria-selected='true']]:border-transparent! [&_[cmdk-item][aria-selected='true']]:bg-[var(--surface-hover)]! [&_[cmdk-item]_svg]:scale-100! [&_[cmdk-item]_svg]:transition-none!",
               CMDK_ITEM_GAP_CLASS,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
index c33b5987fc0..862c1470b88 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/float/use-float-resize.ts
@@ -5,6 +5,7 @@ import {
   MIN_CHAT_HEIGHT,
   MIN_CHAT_WIDTH,
 } from '@/stores/chat/utils'
+import { CONTENT_WINDOW_GAP } from '@/stores/constants'
 
 interface UseFloatResizeProps {
   position: { x: number; y: number }
@@ -41,9 +42,6 @@ type ResizeDirection =
  */
 const EDGE_THRESHOLD = 8
 
-/** Inset gap between the viewport edge and the content window */
-const CONTENT_WINDOW_GAP = 8
-
 /**
  * Hook for handling multi-directional resize functionality of floating panels.
  * Supports resizing from all 8 directions: 4 corners and 4 edges.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.test.tsx
index f786ac6b5e8..25d1c9c9050 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.test.tsx
@@ -89,7 +89,6 @@ describe('CollapsedSidebarMenu nav-link trigger', () => {
                 href: '/workspace/w1/tables/t2',
               },
             ]}
-            icon={Table}
             emptyLabel='No tables yet'
           />
         </CollapsedSidebarMenu>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index 8d6431cd43f..021f2a21e46 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -1,4 +1,4 @@
-import { type ComponentType, type MouseEvent as ReactMouseEvent, useState } from 'react'
+import { type MouseEvent as ReactMouseEvent, useState } from 'react'
 import {
   Chip,
   chipVariants,
@@ -15,7 +15,7 @@ import {
   Loader,
   OverflowText,
 } from '@sim/emcn'
-import { Folder, MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
+import { MoreHorizontal, Pencil, Pin, Plus, SquareArrowUpRight } from '@sim/emcn/icons'
 import Link from 'next/link'
 import { ConversationListItem } from '@/app/workspace/[workspaceId]/components'
 import type { FlyoutEntry } from '@/app/workspace/[workspaceId]/components/folders'
@@ -32,8 +32,6 @@ import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
 
 interface CollapsedResourceFlyoutProps {
   entries: FlyoutEntry[]
-  /** Icon for the resource rows. Folders always carry the folder glyph. */
-  icon: ComponentType<{ className?: string }>
   /** Resource open on the current route, so its row reads as selected. */
   currentItemId?: string
   /**
@@ -49,11 +47,12 @@ interface CollapsedResourceFlyoutProps {
 /**
  * Rail flyout body for a foldered workspace resource (Tables, Files). Every row
  * is a link — the flyout is a jump list, so folders open as submenus rather than
- * navigating, and an empty one has nowhere to go and is inert.
+ * navigating, and an empty one has nowhere to go and is inert. Rows carry no
+ * glyph: the rail chip the flyout hangs off already names the resource, so a
+ * repeated icon on every row is noise in a list that exists only to be scanned.
  */
 export function CollapsedResourceFlyout({
   entries,
-  icon,
   currentItemId,
   isLoading = false,
   emptyLabel,
@@ -69,7 +68,7 @@ export function CollapsedResourceFlyout({
   if (entries.length === 0) {
     return <DropdownMenuItem disabled>{emptyLabel}</DropdownMenuItem>
   }
-  return <CollapsedFlyoutRows entries={entries} icon={icon} currentItemId={currentItemId} />
+  return <CollapsedFlyoutRows entries={entries} currentItemId={currentItemId} />
 }
 
 /**
@@ -85,9 +84,8 @@ function PinnedGlyph() {
 
 function CollapsedFlyoutRows({
   entries,
-  icon: Icon,
   currentItemId,
-}: Pick<CollapsedResourceFlyoutProps, 'entries' | 'icon' | 'currentItemId'>) {
+}: Pick<CollapsedResourceFlyoutProps, 'entries' | 'currentItemId'>) {
   return (
     <>
       {entries.map((entry) => {
@@ -95,7 +93,6 @@ function CollapsedFlyoutRows({
           return (
             <DropdownMenuItem key={entry.id} asChild active={currentItemId === entry.id}>
               <Link href={entry.href}>
-                <Icon className='size-[14px]' />
                 <OverflowText label={entry.name} />
                 {entry.pinned && <PinnedGlyph />}
               </Link>
@@ -106,7 +103,6 @@ function CollapsedFlyoutRows({
         if (entry.children.length === 0) {
           return (
             <DropdownMenuItem key={entry.id} disabled>
-              <Folder className='size-[14px]' />
               <OverflowText label={entry.name} />
               {entry.pinned && <PinnedGlyph />}
             </DropdownMenuItem>
@@ -116,16 +112,11 @@ function CollapsedFlyoutRows({
         return (
           <DropdownMenuSub key={entry.id}>
             <DropdownMenuSubTrigger>
-              <Folder className='size-[14px]' />
               <OverflowText label={entry.name} />
               {entry.pinned && <PinnedGlyph />}
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
-              <CollapsedFlyoutRows
-                entries={entry.children}
-                icon={Icon}
-                currentItemId={currentItemId}
-              />
+              <CollapsedFlyoutRows entries={entry.children} currentItemId={currentItemId} />
             </DropdownMenuSubContent>
           </DropdownMenuSub>
         )
@@ -520,7 +511,6 @@ export function CollapsedFolderItems(props: CollapsedFolderItemsProps) {
         if (!hasChildren) {
           return (
             <DropdownMenuItem key={folder.id} disabled>
-              <Folder className='size-[14px]' />
               <OverflowText label={folder.name} />
             </DropdownMenuItem>
           )
@@ -529,7 +519,6 @@ export function CollapsedFolderItems(props: CollapsedFolderItemsProps) {
         return (
           <DropdownMenuSub key={folder.id}>
             <DropdownMenuSubTrigger>
-              <Folder className='size-[14px]' />
               <OverflowText label={folder.name} />
             </DropdownMenuSubTrigger>
             <DropdownMenuSubContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
index 6ad98b4755c..e735e674e89 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/index.ts
@@ -13,8 +13,9 @@ export { SearchModal } from './search-modal'
 export { SettingsSidebar } from './settings-sidebar'
 export { SidebarFooter } from './sidebar-footer'
 export type { SidebarNavItemData } from './sidebar-nav-chip'
-export { SidebarNavChip } from './sidebar-nav-chip'
+export { isNavItemActive, SidebarNavChip } from './sidebar-nav-chip'
 export { SidebarSection } from './sidebar-section'
+export { SidebarTooltip } from './sidebar-tooltip'
 export { StatusNotice } from './status-notice'
 export { WorkflowList } from './workflow-list'
 export { WorkspaceHeader } from './workspace-header'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.tsx
index 7cddf15ef18..19daa684447 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/rail-resource-flyout/rail-resource-flyout.tsx
@@ -65,7 +65,6 @@ export function TablesRailFlyout({ workspaceId }: { workspaceId: string }) {
   return (
     <CollapsedResourceFlyout
       entries={entries}
-      icon={TABLE_META.rootIcon}
       currentItemId={typeof params.tableId === 'string' ? params.tableId : undefined}
       isLoading={isResolving(tablesQuery) || isResolving(foldersQuery)}
       emptyLabel='No tables yet'
@@ -97,7 +96,6 @@ export function FilesRailFlyout({ workspaceId }: { workspaceId: string }) {
   return (
     <CollapsedResourceFlyout
       entries={entries}
-      icon={FILE_META.rootIcon}
       currentItemId={typeof params.fileId === 'string' ? params.fileId : undefined}
       isLoading={isResolving(filesQuery) || isResolving(foldersQuery)}
       emptyLabel='No files yet'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.test.tsx
index 68b290bff6d..40abd518459 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.test.tsx
@@ -46,11 +46,11 @@ describe('CommandFadedList', () => {
     vi.unstubAllGlobals()
   })
 
-  it('fades the palette with the short pixel-anchored mask and the shared search surface', () => {
+  it('keeps the list unfogged at rest, insets the fade under the search field, and shares the search surface', () => {
     act(() => {
       root.render(
         <Command>
-          <CommandFadedList fade='palette' />
+          <CommandFadedList />
           <CommandSearch surface='palette' aria-label='Search' />
         </Command>
       )
@@ -59,7 +59,9 @@ describe('CommandFadedList', () => {
     const list = container.querySelector('[cmdk-list]')
     const input = container.querySelector<HTMLInputElement>('[cmdk-input]')
     const search = container.querySelector('[cmdk-input]')?.parentElement
-    expect(list?.className).toContain('transparent_36px,black_58px,black_calc(100%_-_13px)')
+    expect(list?.className).toContain('[--scroll-fade-inset:3rem]')
+    expect(list?.hasAttribute('data-scroll-fade-top')).toBe(false)
+    expect(list?.hasAttribute('data-scroll-fade-bottom')).toBe(false)
     expect(list?.className).not.toContain('scrollbar-track')
     expect(input?.className).toContain('-ml-1')
     expect(input?.className).toContain('indent-1')
@@ -71,7 +73,7 @@ describe('CommandFadedList', () => {
       root.render(
         <Command loop>
           <CommandSearch surface='palette' aria-label='Search' cycleResultsOnTab />
-          <CommandFadedList fade='palette'>
+          <CommandFadedList>
             <Command.Item value='first'>First</Command.Item>
             <Command.Item value='second'>Second</Command.Item>
           </CommandFadedList>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
index e65664f1b83..f13bb242a94 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-chrome/command-chrome.tsx
@@ -5,8 +5,10 @@ import {
   forwardRef,
   type KeyboardEvent,
   type ReactNode,
+  useCallback,
+  useRef,
 } from 'react'
-import { cn } from '@sim/emcn'
+import { cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
 import { Search } from '@sim/emcn/icons'
 import { Command } from 'cmdk'
 
@@ -20,10 +22,6 @@ interface CommandSearchProps extends Omit<CommandInputProps, 'className'> {
   endAdornment?: ReactNode
 }
 
-interface CommandFadedListProps extends CommandListProps {
-  fade: 'canvas' | 'palette'
-}
-
 /**
  * The fog must repaint its host's exact background or it reads as a tinted
  * band under the input: the canvas selector card fills with `--surface-2`,
@@ -37,24 +35,6 @@ const SEARCH_SURFACE_CLASSNAME = {
     'bg-[linear-gradient(to_bottom,var(--bg)_0%,color-mix(in_srgb,var(--bg)_88%,transparent)_68%,transparent_100%)]',
 } as const
 
-/**
- * The palette hides its scrollbar (`scrollbar-none` at the call site), so it
- * fades with one plain mask; its band is kept short — fully masked only under
- * the floating input (0–36px), legible by 58px, and a brief 13px exit — so
- * rows spend less time in the fog than on the canvas surface. The palette's
- * stops are anchored in pixels (the 448px max-height look frozen) because the
- * list shrinks to its content: percentage stops would move the fog on every
- * result-count change, a shimmer the dark selected first row makes obvious.
- * The canvas list fills a fixed-height card, so its percentage stops never
- * move.
- */
-const LIST_FADE_CLASSNAME = {
-  canvas:
-    '[-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)] [mask-image:linear-gradient(to_bottom,transparent_0%,transparent_8%,black_18%,black_94%,transparent_100%)]',
-  palette:
-    '[-webkit-mask-image:linear-gradient(to_bottom,transparent_0px,transparent_36px,black_58px,black_calc(100%_-_13px),transparent_100%)] [mask-image:linear-gradient(to_bottom,transparent_0px,transparent_36px,black_58px,black_calc(100%_-_13px),transparent_100%)]',
-} as const
-
 /**
  * Borderless search field layered over a fading command-result list.
  *
@@ -102,17 +82,36 @@ export const CommandSearch = forwardRef<HTMLInputElement, CommandSearchProps>(
 
 CommandSearch.displayName = 'CommandSearch'
 
-/** Scrollable command list with soft edge fades tuned for each command surface. */
-export const CommandFadedList = forwardRef<HTMLDivElement, CommandFadedListProps>(
-  function CommandFadedList({ className, fade, ...props }, ref) {
+/**
+ * Scrollable command list with the shared edge fade. The search field floats over
+ * the list's top 48px (`pt-12` keeps the first row clear of it), so the top band
+ * is inset by that height: while scrolled, rows are fully hidden under the field
+ * and fade in just beneath it. At rest neither edge fades, so the first group's
+ * heading and the last row are never fogged on a list that has not moved.
+ */
+export const CommandFadedList = forwardRef<HTMLDivElement, CommandListProps>(
+  function CommandFadedList({ className, ...props }, ref) {
+    const listRef = useRef<HTMLDivElement | null>(null)
+    const edges = useScrollEdges(listRef)
+
+    const setRefs = useCallback(
+      (node: HTMLDivElement | null) => {
+        listRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref]
+    )
+
     return (
       <Command.List
-        ref={ref}
+        ref={setRefs}
         className={cn(
-          'overflow-y-auto overflow-x-hidden px-1.5 pt-12 pb-1.5 [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col',
-          LIST_FADE_CLASSNAME[fade],
+          'overflow-y-auto overflow-x-hidden px-1.5 pt-12 pb-1.5 [--scroll-fade-inset:3rem] [&_[cmdk-group-items]]:flex [&_[cmdk-group-items]]:flex-col',
+          scrollFadeClass,
           className
         )}
+        {...scrollFadeAttributes(edges)}
         {...props}
       />
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
index 4bf47d8dc4c..c0ce35be12d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/command-items/command-items.tsx
@@ -5,7 +5,8 @@ import { memo } from 'react'
 import { OverflowText } from '@sim/emcn'
 import { File, Workflow } from '@sim/emcn/icons'
 import { Command } from 'cmdk'
-import { HEX_COLOR_REGEX } from '@/lib/branding'
+import { IdentityTile } from '@/components/identity-tile/identity-tile'
+import { getWorkspaceInitial } from '@/lib/workspaces/initials'
 import type { CommandItemProps } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import { COMMAND_ITEM_CLASSNAME } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils'
 import { BlockTile } from '@/blocks/block-tile'
@@ -247,7 +248,6 @@ export const MemoizedWorkspaceItem = memo(
     name,
     isCurrent,
     logoUrl,
-    color,
     meta,
   }: {
     value: string
@@ -255,31 +255,10 @@ export const MemoizedWorkspaceItem = memo(
     name: string
     isCurrent?: boolean
     logoUrl?: string | null
-    color?: string
   } & ResultMetaProps) {
-    const backgroundColor = color && HEX_COLOR_REGEX.test(color) ? color : 'var(--brand-accent)'
-
     return (
       <Command.Item value={value} onSelect={onSelect} className={COMMAND_ITEM_CLASSNAME}>
-        {logoUrl ? (
-          <img
-            data-slot='workspace-icon'
-            src={logoUrl}
-            alt=''
-            className='size-[16px] shrink-0 rounded-sm object-cover'
-          />
-        ) : (
-          <span
-            data-slot='workspace-icon'
-            aria-hidden='true'
-            className='relative flex size-[16px] shrink-0 items-center justify-center overflow-hidden rounded-sm font-medium text-[9px] text-white leading-none'
-          >
-            <svg className='absolute inset-0 size-full' viewBox='0 0 16 16'>
-              <rect width='16' height='16' rx='2' fill={backgroundColor} />
-            </svg>
-            <span className='relative'>{name.charAt(0).toUpperCase() || 'W'}</span>
-          </span>
-        )}
+        <IdentityTile initial={getWorkspaceInitial(name)} logoUrl={logoUrl} slot='workspace-icon' />
         <span className='flex min-w-0 text-[var(--text-body)]'>
           <OverflowText label={name} />
           {isCurrent && <span className='shrink-0 whitespace-pre'> (current)</span>}
@@ -293,7 +272,6 @@ export const MemoizedWorkspaceItem = memo(
     prev.name === next.name &&
     prev.isCurrent === next.isCurrent &&
     prev.logoUrl === next.logoUrl &&
-    prev.color === next.color &&
     prev.meta === next.meta
 )
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.test.tsx
index 75a8e76b7ba..ef133e937a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.test.tsx
@@ -53,7 +53,6 @@ const workspaceItems: WorkspaceItem[] = [
     id: 'workspace-beta',
     name: 'Beta Workspace',
     href: '/workspace/workspace-beta/w',
-    color: '#123456',
   },
 ]
 
@@ -127,11 +126,10 @@ describe('SearchEntryGroup', () => {
     })
 
     const logo = container.querySelector<HTMLImageElement>('img[data-slot="workspace-icon"]')
-    const fallback = container.querySelector('span[data-slot="workspace-icon"]')
+    const fallback = container.querySelector('div[data-slot="workspace-icon"]')
     expect(logo?.src).toBe('https://cdn.example.com/acme.png')
     expect(logo?.alt).toBe('')
     expect(fallback?.textContent).toBe('B')
-    expect(fallback?.querySelector('rect')?.getAttribute('fill')).toBe('#123456')
   })
 
   it('renders workspace icons in the default workspace section', () => {
@@ -151,6 +149,6 @@ describe('SearchEntryGroup', () => {
     })
 
     expect(container.querySelector('img[data-slot="workspace-icon"]')).not.toBeNull()
-    expect(container.querySelector('span[data-slot="workspace-icon"]')?.textContent).toBe('B')
+    expect(container.querySelector('div[data-slot="workspace-icon"]')?.textContent).toBe('B')
   })
 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
index 5277dd70a84..89b130ca569 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/components/search-groups/search-groups.tsx
@@ -243,7 +243,6 @@ function renderSearchEntry(
           name={entry.item.name}
           isCurrent={entry.item.isCurrent}
           logoUrl={entry.item.logoUrl}
-          color={entry.item.color}
         />
       )
     case 'pages':
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 6dfc70e6bbc..5597803ef7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -1351,7 +1351,6 @@ function SearchModalContent({
                   rows against an edge the user cannot see. */}
               <CommandFadedList
                 ref={listRef}
-                fade='palette'
                 className={cn(
                   'scrollbar-none max-h-[min(448px,calc(85dvh-26px))] [clip-path:inset(3px_round_13px)]',
                   CMDK_ITEM_GAP_CLASS,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
index 5eaa918703b..a6b5148030d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/utils.ts
@@ -70,7 +70,6 @@ export interface WorkspaceItem {
   href: string
   isCurrent?: boolean
   logoUrl?: string | null
-  color?: string
 }
 
 export interface PageItem {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index ddccd7a09a1..e32b820f904 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -8,6 +8,9 @@ import {
   chipVariants,
   cn,
   OverflowText,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  useScrollEdges,
 } from '@sim/emcn'
 import { ChevronLeft } from '@sim/emcn/icons'
 import { useQueryClient } from '@tanstack/react-query'
@@ -32,6 +35,7 @@ import {
 } from '@/app/workspace/[workspaceId]/settings/navigation'
 import { warmSettingsSectionQuery } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-query-warmers'
 import { SidebarSection } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section'
+import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
 import {
   SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
   SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
@@ -39,7 +43,6 @@ import {
   SIDEBAR_RAIL_CHIP_CLASS,
   SIDEBAR_SECTION_GAP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
-import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { useSSOProviders } from '@/ee/sso/hooks/sso'
 import { useForkingAvailable } from '@/ee/workspace-forking/hooks/use-forking-available'
 import { useGeneralSettings } from '@/hooks/queries/general-settings'
@@ -98,7 +101,10 @@ export function SettingsSidebar({
   const pendingLeave = useSettingsDirtyStore((s) => s.pendingLeave)
   const showDiscardDialog = pendingLeave !== null
 
-  const [hasOverflowTop, setHasOverflowTop] = useState(false)
+  const scrollEdges = useScrollEdges(scrollContainerRef, {
+    contentRef: scrollContentRef,
+    enabled: !isCollapsed,
+  })
   const [desktopSurfaces, setDesktopSurfaces] = useState<Record<DesktopSettingsSurface, boolean>>({
     settings: false,
     browser: false,
@@ -303,37 +309,19 @@ export function SettingsSidebar({
     })
   }, [])
 
-  useEffect(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    const updateScrollState = () => {
-      setHasOverflowTop(container.scrollTop > 1)
-    }
-
-    updateScrollState()
-    container.addEventListener('scroll', updateScrollState, { passive: true })
-    const observer = new ResizeObserver(updateScrollState)
-    observer.observe(container)
-    if (scrollContentRef.current) {
-      observer.observe(scrollContentRef.current)
-    }
-
-    return () => {
-      container.removeEventListener('scroll', updateScrollState)
-      observer.disconnect()
-    }
-  }, [isCollapsed])
-
   return (
     <>
       {/* Back button */}
+      {/* The divider is the pinned block's bottom rule, not the scroll region's top one:
+          the region's edge fade masks its own first pixels, which would erase a rule
+          drawn there exactly when it should show. Same construction as the footer. */}
       <div
         className={cn(
           SIDEBAR_SECTION_GAP_CLASS,
           SIDEBAR_ITEM_GAP_CLASS,
           SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
-          'flex shrink-0 flex-col px-2'
+          'flex shrink-0 flex-col border-b px-2 transition-colors duration-150',
+          !scrollEdges.top && 'border-transparent'
         )}
       >
         <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
@@ -356,9 +344,11 @@ export function SettingsSidebar({
         ref={isCollapsed ? undefined : scrollContainerRef}
         className={cn(
           SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
-          'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pb-2 transition-colors duration-150',
-          !hasOverflowTop && 'border-transparent'
+          SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+          scrollFadeClass,
+          'flex flex-1 flex-col overflow-y-auto overflow-x-hidden'
         )}
+        {...scrollFadeAttributes(scrollEdges)}
       >
         <div ref={scrollContentRef} className='flex flex-col'>
           {sectionConfig
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.test.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.test.tsx
index 0684acb4c24..03dda46288f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.test.tsx
@@ -42,9 +42,12 @@ vi.mock('@/hooks/use-workspace-invite-policy', () => ({
 vi.mock('@/app/workspace/[workspaceId]/providers/workspace-host-provider', () => ({
   useWorkspaceHostContext: () => null,
 }))
-vi.mock('@/app/workspace/[workspaceId]/w/components/sidebar/sidebar', () => ({
-  SidebarTooltip: ({ children }: { children: React.ReactNode }) => children,
-}))
+vi.mock(
+  '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/sidebar-tooltip',
+  () => ({
+    SidebarTooltip: ({ children }: { children: React.ReactNode }) => children,
+  })
+)
 vi.mock('@/components/icons', () => ({
   SlackIcon: ({ className }: { className?: string }) => <svg className={className} />,
 }))
@@ -63,6 +66,7 @@ async function renderFooter(
     root.render(
       <SidebarFooter
         workspaceId='workspace-1'
+        showDivider={false}
         isCollapsed={false}
         showCollapsedTooltips={false}
         getSettingsHref={(section) => `/workspace/workspace-1/settings/${section}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
index 612a927149b..44b135b4c92 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx
@@ -27,11 +27,11 @@ import { getDesktopUpdates } from '@/lib/desktop'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
+import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
 import {
   SIDEBAR_ITEM_GAP_CLASS,
   SIDEBAR_RAIL_CHIP_CLASS,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
-import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { useUserProfile } from '@/hooks/queries/user-profile'
 import { useDesktopUpdateState } from '@/hooks/use-desktop-update-state'
 import { useWorkspaceInvitePolicy } from '@/hooks/use-workspace-invite-policy'
@@ -88,6 +88,12 @@ function DesktopUpdateIcon({ className }: { className?: string }) {
 
 interface SidebarFooterProps {
   workspaceId: string
+  /**
+   * True while the scroll region above still hides rows beyond its bottom edge —
+   * the same test the divider under the pinned nav applies at the top. The bar's
+   * top rule is drawn only then, so a list that fits meets the footer with no line.
+   */
+  showDivider: boolean
   isCollapsed: boolean
   showCollapsedTooltips: boolean
   getSettingsHref: (section: SettingsSection) => string
@@ -122,6 +128,7 @@ interface SidebarFooterProps {
  */
 export function SidebarFooter({
   workspaceId,
+  showDivider,
   isCollapsed,
   showCollapsedTooltips,
   getSettingsHref,
@@ -346,7 +353,8 @@ export function SidebarFooter({
   return (
     <div
       className={cn(
-        'flex shrink-0 border-t px-2 pt-[9px] pb-2',
+        'flex shrink-0 border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
+        !showDivider && 'border-transparent',
         isCollapsed ? cn(SIDEBAR_ITEM_GAP_CLASS, 'flex-col-reverse') : 'items-center'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/index.ts
index 93f9e4dc7d0..83e1718ed5d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/index.ts
@@ -1,2 +1,2 @@
 export type { SidebarNavItemData } from './sidebar-nav-chip'
-export { SidebarNavChip } from './sidebar-nav-chip'
+export { isNavItemActive, SidebarNavChip } from './sidebar-nav-chip'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/sidebar-nav-chip.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/sidebar-nav-chip.tsx
index f159cd0b6fe..d52b32106af 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/sidebar-nav-chip.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-nav-chip/sidebar-nav-chip.tsx
@@ -14,6 +14,17 @@ export interface SidebarNavItemData {
   additionalActivePaths?: string[]
 }
 
+/**
+ * Whether `pathname` matches `item.href` or any of its `additionalActivePaths` at a
+ * segment boundary, so `/foo` never lights up for `/foo-bar`.
+ */
+export function isNavItemActive(item: SidebarNavItemData, pathname: string | null): boolean {
+  if (!pathname) return false
+  const matches = (p: string) => pathname === p || pathname.startsWith(`${p}/`)
+  if (item.href && matches(item.href)) return true
+  return item.additionalActivePaths?.some(matches) ?? false
+}
+
 interface SidebarNavChipProps extends React.HTMLAttributes<HTMLElement> {
   item: SidebarNavItemData
   active: boolean
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
index 0516ff98ce7..bfa2112bb31 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-section/sidebar-section.tsx
@@ -48,14 +48,8 @@ export function SidebarSection({
   children,
 }: SidebarSectionProps) {
   const [expanded, setExpanded] = useState(true)
-  /**
-   * Collapse animations are enabled only after the first user toggle, so sections
-   * render at full height on mount instead of replaying the open animation.
-   */
-  const [animationsEnabled, setAnimationsEnabled] = useState(false)
 
   const handleToggle = () => {
-    setAnimationsEnabled(true)
     setExpanded((prev) => !prev)
   }
 
@@ -97,8 +91,10 @@ export function SidebarSection({
         {/* Carries the gutter the row gave up so the toggle can reach the rail's edge. */}
         {action ? <div className='flex shrink-0 items-center pr-4'>{action}</div> : null}
       </div>
+      {/* `animate-none!`: the disclosure opens and closes in one frame, like every
+          other change of the rail's shape. */}
       <Expandable expanded={railCollapsed || expanded}>
-        <ExpandableContent className={cn(!animationsEnabled && 'animate-none!')}>
+        <ExpandableContent className='animate-none!'>
           {/* The header gap pads an inner wrapper rather than the animated element:
               `collapsible-up`/`-down` interpolate height alone, so a margin here would
               hold its full 6px for the whole close and then vanish on unmount, snapping
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/index.ts
new file mode 100644
index 00000000000..368cc3ad539
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/index.ts
@@ -0,0 +1 @@
+export { SidebarTooltip } from './sidebar-tooltip'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/sidebar-tooltip.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/sidebar-tooltip.tsx
new file mode 100644
index 00000000000..2a9774ac101
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip/sidebar-tooltip.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { Tooltip } from '@sim/emcn'
+
+interface SidebarTooltipProps {
+  children: React.ReactElement
+  label: string
+  /** Renders the bare child when false, so a row can opt out without swapping element trees. */
+  enabled: boolean
+  side?: 'right' | 'bottom'
+  shortcut?: string
+}
+
+/**
+ * Tooltip for a sidebar control, shown while the rail is collapsed (the label is
+ * hidden) or on the header's icon-only chips. Returns `children` untouched when
+ * disabled so the wrapped element keeps its identity across the toggle.
+ */
+export function SidebarTooltip({
+  children,
+  label,
+  enabled,
+  side = 'right',
+  shortcut,
+}: SidebarTooltipProps) {
+  if (!enabled) return children
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+      <Tooltip.Content side={side}>
+        {shortcut ? <Tooltip.Shortcut keys={shortcut}>{label}</Tooltip.Shortcut> : <p>{label}</p>}
+      </Tooltip.Content>
+    </Tooltip.Root>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
index 2f81336b20d..8c6c9e7476a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/status-notice/status-notice.tsx
@@ -47,5 +47,11 @@ export function StatusNotice({ preview = false }: StatusNoticeProps) {
     return null
   }
 
-  return <StatusAlert />
+  /* The gutter lives here rather than on the sidebar's slot: a slot padded for a
+     notice that renders nothing would hold an empty band above the footer. */
+  return (
+    <div className='shrink-0 px-2 py-2'>
+      <StatusAlert />
+    </div>
+  )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index 4282d30611a..4accdb23706 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -557,7 +557,7 @@ export const WorkflowList = memo(function WorkflowList({
       <div
         role='tree'
         aria-label='Workflows'
-        className='flex min-h-full flex-col pb-2'
+        className='flex min-h-full flex-col'
         onClick={handleContainerClick}
         onContextMenu={handleContainerContextMenu}
         onKeyDown={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index e69b89f8653..a551bd68bad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -18,14 +18,19 @@ import {
   Plus,
   Send,
   Skeleton,
+  scrollFadeAttributes,
+  scrollFadeClass,
   Tooltip,
   toast,
+  useScrollEdges,
 } from '@sim/emcn'
 import { MoreHorizontal, PanelLeft, Pin, Search } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useQueryClient } from '@tanstack/react-query'
+import { IdentityTile } from '@/components/identity-tile/identity-tile'
 import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
+import { getWorkspaceInitial } from '@/lib/workspaces/initials'
 import { InviteModal } from '@/app/workspace/[workspaceId]/components/invite-modal'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { ContextMenu } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu'
@@ -51,22 +56,15 @@ const logger = createLogger('WorkspaceHeader')
  * list viewport to exactly this many rows — so the sixth workspace is the one that
  * both fills the viewport and brings in search.
  *
- * The viewport's `max-h-[190px]` is derived from it: 6 rows at `chipGeometryClass`'s
- * 30px plus the 2px `gap-0.5` between them (6 * 30 + 5 * 2). Tailwind arbitrary
- * values must be statically analyzable, so the arithmetic cannot live in the class —
- * change the two together.
+ * The viewport's `max-h-[200px]` is derived from it: 6 rows at `chipGeometryClass`'s
+ * 30px plus the 2px `gap-0.5` between them (6 * 30 + 5 * 2), plus the list's own
+ * `pt-1.5 pb-1` (6 + 4) — the gaps to the search field and the rule, carried as
+ * the scroll box's padding so rows scroll through them under the edge fade.
+ * Tailwind arbitrary values must be statically analyzable, so the arithmetic
+ * cannot live in the class — change them together.
  */
 const WORKSPACE_SEARCH_THRESHOLD = 6
 
-/**
- * Derives the single-letter avatar initial for a workspace, ignoring the word
- * "workspace" in the name (e.g. "Acme Workspace" → "A").
- */
-function getWorkspaceInitial(name: string | undefined): string {
-  const stripped = (name ?? '').replace(/workspace/gi, '').trim()
-  return (stripped[0] || name?.[0] || 'W').toUpperCase()
-}
-
 interface DisabledReasonTooltipProps {
   reason: string | null
   children: ReactElement
@@ -193,6 +191,13 @@ function WorkspaceHeaderImpl({
   const renameInputRef = useRef<HTMLInputElement | null>(null)
   const searchInputRef = useRef<HTMLInputElement>(null)
   const workspaceListRef = useRef<HTMLDivElement>(null)
+  /**
+   * Held in state as well as the ref: the list lives in the menu's portal, which
+   * Radix mounts a commit after the menu opens, so the edge hook has to be handed
+   * the element itself to pick it up.
+   */
+  const [workspaceListElement, setWorkspaceListElement] = useState<HTMLDivElement | null>(null)
+  const listEdges = useScrollEdges(workspaceListElement)
 
   const [workspaceSearch, setWorkspaceSearch] = useState('')
   const [highlightedId, setHighlightedId] = useState<string | null>(null)
@@ -459,28 +464,14 @@ function WorkspaceHeaderImpl({
           className={cn(chipVariants({ fullWidth: true }), SIDEBAR_RAIL_CHIP_CLASS)}
         >
           <div className='relative flex size-[16px] shrink-0 items-center justify-center'>
-            {activeWorkspaceFull?.logoUrl ? (
+            {activeWorkspace ? (
               <>
-                <img
-                  src={activeWorkspaceFull.logoUrl}
-                  alt={activeWorkspaceFull.name || 'Workspace logo'}
-                  className='size-[16px] rounded-sm object-cover group-hover:invisible'
-                />
-                <PanelLeft
-                  aria-hidden
-                  className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
+                <IdentityTile
+                  initial={workspaceInitial}
+                  logoUrl={activeWorkspaceFull?.logoUrl}
+                  alt={activeWorkspaceFull?.name || 'Workspace logo'}
+                  className='group-hover:invisible'
                 />
-              </>
-            ) : activeWorkspace ? (
-              <>
-                <div
-                  className='flex size-[16px] items-center justify-center rounded-sm text-[9px] text-white leading-none group-hover:invisible'
-                  style={{
-                    backgroundColor: activeWorkspaceFull?.color ?? 'var(--brand-accent)',
-                  }}
-                >
-                  {workspaceInitial}
-                </div>
                 <PanelLeft
                   aria-hidden
                   className='pointer-events-none invisible absolute inset-0 m-auto size-[16px] rotate-180 text-[var(--text-icon)] group-hover:visible'
@@ -527,22 +518,11 @@ function WorkspaceHeaderImpl({
               }}
             >
               {activeWorkspaceFull ? (
-                activeWorkspaceFull.logoUrl ? (
-                  <img
-                    src={activeWorkspaceFull.logoUrl}
-                    alt={activeWorkspaceFull.name || 'Workspace logo'}
-                    className='size-[16px] shrink-0 rounded-sm object-cover'
-                  />
-                ) : (
-                  <div
-                    className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
-                    style={{
-                      backgroundColor: activeWorkspaceFull.color ?? 'var(--brand-accent)',
-                    }}
-                  >
-                    {workspaceInitial}
-                  </div>
-                )
+                <IdentityTile
+                  initial={workspaceInitial}
+                  logoUrl={activeWorkspaceFull.logoUrl}
+                  alt={activeWorkspaceFull.name || 'Workspace logo'}
+                />
               ) : (
                 <Skeleton className='size-[16px] shrink-0 rounded-sm' />
               )}
@@ -617,12 +597,21 @@ function WorkspaceHeaderImpl({
                         if (target) onWorkspaceSwitch(target)
                       }
                     }}
-                    className='mb-1.5'
                   />
                 )}
+                {/* The gaps to the search field above and the rule below are the list's
+                    own padding, so at rest rows sit where they always did, and while
+                    scrolling they run through the gap beneath the edge fade. */}
                 <div
-                  ref={workspaceListRef}
-                  className='-mx-1.5 flex max-h-[190px] flex-col gap-0.5 overflow-y-auto px-1.5'
+                  ref={(node) => {
+                    workspaceListRef.current = node
+                    setWorkspaceListElement(node)
+                  }}
+                  className={cn(
+                    scrollFadeClass,
+                    '-mx-1.5 flex max-h-[200px] flex-col gap-0.5 overflow-y-auto px-1.5 pt-1.5 pb-1'
+                  )}
+                  {...scrollFadeAttributes(listEdges)}
                 >
                   {filteredWorkspaces.length === 0 && workspaceSearch && (
                     <div className='px-2 py-[5px] text-[var(--text-muted)] text-caption'>
@@ -657,22 +646,11 @@ function WorkspaceHeaderImpl({
                       >
                         {editingWorkspaceId === workspace.id ? (
                           <div className={chipVariants({ active: true, fullWidth: true })}>
-                            {workspace.logoUrl ? (
-                              <img
-                                src={workspace.logoUrl}
-                                alt={workspace.name || 'Workspace logo'}
-                                className='size-[16px] shrink-0 rounded-sm object-cover'
-                              />
-                            ) : (
-                              <div
-                                className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
-                                style={{
-                                  backgroundColor: workspace.color ?? 'var(--brand-accent)',
-                                }}
-                              >
-                                {initial}
-                              </div>
-                            )}
+                            <IdentityTile
+                              initial={initial}
+                              logoUrl={workspace.logoUrl}
+                              alt={workspace.name || 'Workspace logo'}
+                            />
                             <input
                               ref={(el) => {
                                 renameInputRef.current = el
@@ -749,22 +727,11 @@ function WorkspaceHeaderImpl({
                             }}
                             onContextMenu={(e) => handleContextMenu(e, workspace)}
                           >
-                            {workspace.logoUrl ? (
-                              <img
-                                src={workspace.logoUrl}
-                                alt={workspace.name || 'Workspace logo'}
-                                className='size-[16px] shrink-0 rounded-sm object-cover'
-                              />
-                            ) : (
-                              <div
-                                className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
-                                style={{
-                                  backgroundColor: workspace.color ?? 'var(--brand-accent)',
-                                }}
-                              >
-                                {initial}
-                              </div>
-                            )}
+                            <IdentityTile
+                              initial={initial}
+                              logoUrl={workspace.logoUrl}
+                              alt={workspace.name || 'Workspace logo'}
+                            />
                             <OverflowText
                               label={workspace.name}
                               className='flex-1 text-[var(--text-body)] text-sm'
@@ -811,7 +778,7 @@ function WorkspaceHeaderImpl({
                   })}
                 </div>
 
-                <DropdownMenuSeparator className='mx-0' />
+                <DropdownMenuSeparator className='mx-0 mt-0' />
 
                 <div className='flex flex-col gap-0.5'>
                   <DisabledReasonTooltip reason={createWorkspaceDisabledReason}>
@@ -873,19 +840,12 @@ function WorkspaceHeaderImpl({
           className={cn(chipGeometryClass, isCollapsed ? 'flex' : 'inline-flex min-w-0 max-w-full')}
           disabled
         >
-          {activeWorkspaceFull?.logoUrl ? (
-            <img
-              src={activeWorkspaceFull.logoUrl}
-              alt={activeWorkspaceFull.name || 'Workspace logo'}
-              className='size-[16px] shrink-0 rounded-sm object-cover'
+          {activeWorkspace ? (
+            <IdentityTile
+              initial={workspaceInitial}
+              logoUrl={activeWorkspaceFull?.logoUrl}
+              alt={activeWorkspaceFull?.name || 'Workspace logo'}
             />
-          ) : activeWorkspace ? (
-            <div
-              className='flex size-[16px] shrink-0 items-center justify-center rounded-sm text-[9px] text-white leading-none'
-              style={{ backgroundColor: activeWorkspaceFull?.color ?? 'var(--brand-accent)' }}
-            >
-              {workspaceInitial}
-            </div>
           ) : (
             <Skeleton className='size-[16px] shrink-0 rounded-sm' />
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
index dc682c71374..3226942be37 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/constants.ts
@@ -20,12 +20,14 @@ export const SIDEBAR_SECTION_GAP_CLASS = 'mt-4'
 export const SIDEBAR_ITEM_GAP_CLASS = 'gap-[1px]'
 
 /**
- * Halves of {@link SIDEBAR_SECTION_GAP_CLASS} straddling the scroll region's
- * divider: the pinned block above carries the top half, the scroll region below
- * carries the bottom half. Split this way the divider sits centered in a gap that
- * reads as one section gap, so the first section header is spaced from the block
- * above it exactly like every other section boundary. Keep both in step with the
- * section gap.
+ * Halves of {@link SIDEBAR_SECTION_GAP_CLASS} straddling a divider: the block
+ * above carries the top half, the block below carries the bottom half. Split this
+ * way the divider sits centered in a gap that reads as one section gap, so the
+ * first section header is spaced from the pinned nav exactly like every other
+ * section boundary. The scroll region carries BOTH — the bottom half under the
+ * nav's divider and the top half above the footer's — as its own padding, so rows
+ * scroll through the gap beneath the edge fade rather than stopping short of the
+ * rule. Keep both in step with the section gap.
  */
 export const SIDEBAR_DIVIDER_PAD_ABOVE_CLASS = 'pb-2'
 export const SIDEBAR_DIVIDER_PAD_BELOW_CLASS = 'pt-2'
@@ -43,20 +45,9 @@ export const SIDEBAR_DIVIDER_PAD_BELOW_CLASS = 'pt-2'
  * (rail midline 25.5 vs glyph column 24), which produced either a
  * left-biased rail or a drift on toggle; keep the rail width and this chip
  * width commensurate (rail = chip + 2 × gutter) if either ever changes.
- * Collapsing, the width tweens down to 32px on the 175ms curve the rail
- * closes on; expanding targets `auto` (not interpolable), so the chip snaps
- * to the still-narrow rail's width and stretch-tracks it open. The duration
- * is `!important` because the aside zeroes chip transition durations
- * (`[&_.group.cursor-pointer]:duration-0`) for instant hover fills — colors
- * are excluded from the property list here, so hover fills keep snapping.
+ * The width applies in one frame, in step with the rail itself.
  */
-export const SIDEBAR_RAIL_CHIP_CLASS = [
-  'transition-[width]',
-  '![transition-duration:175ms]',
-  '[transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
-  'motion-reduce:transition-none!',
-  'group-data-[collapsed]/rail:w-[32px]',
-].join(' ')
+export const SIDEBAR_RAIL_CHIP_CLASS = 'group-data-[collapsed]/rail:w-[32px]'
 
 /**
  * Nested-selector variants for cmdk-based surfaces (e.g. the search modal).
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts
index c7f7cdec75b..a444efe6a8b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { SIDEBAR_WIDTH } from '@/stores/constants'
-import { useSidebarStore } from '@/stores/sidebar/store'
+import { getMaxSidebarWidth, useSidebarStore } from '@/stores/sidebar/store'
 
 /**
  * Handles sidebar drag-resize with zero React renders during the drag.
@@ -8,10 +8,7 @@ import { useSidebarStore } from '@/stores/sidebar/store'
  * Architecture (confirmed industry best-practice for resize handles):
  *
  * pointerdown  → capture the pointer on the handle (so move/up keep arriving
- *                even when the cursor leaves the window or crosses an iframe),
- *                add `is-resizing` class directly to the DOM (no React
- *                round-trip, so the CSS width transition is suppressed from the
- *                very first frame)
+ *                even when the cursor leaves the window or crosses an iframe)
  * pointermove  → write --sidebar-width to `.sidebar-shell-outer` (the element
  *                that sizes the rail) inside a requestAnimationFrame callback.
  *                Scoping the variable to that subtree keeps the style recalc
@@ -23,9 +20,8 @@ import { useSidebarStore } from '@/stores/sidebar/store'
  *
  * The drag is torn down by `pointerup`, `pointercancel`, or window `blur`, so an
  * interrupted gesture (release outside the window, alt-tab, context menu, the OS
- * stealing focus) can never leave the `is-resizing` / `sidebar-resizing` classes
- * stuck — which would otherwise freeze the sidebar at a tiny width with the
- * collapse transition permanently disabled. A single-flight guard prevents
+ * stealing focus) can never leave the body cursor and selection lock stuck. A
+ * single-flight guard prevents
  * stacking listeners across rapid presses, and unmounting mid-drag finalizes it
  * the same way a release does — persisting the last width and dropping the
  * scoped override — which matters because `.sidebar-shell-outer` lives in the
@@ -42,11 +38,8 @@ export function useSidebarResize() {
 
       const handle = e.currentTarget
       const pointerId = e.pointerId
-      const sidebar = document.querySelector<HTMLElement>('.sidebar-container')
       const shell = document.querySelector<HTMLElement>('.sidebar-shell-outer')
       const target = shell ?? document.documentElement
-      sidebar?.classList.add('is-resizing')
-      document.documentElement.classList.add('sidebar-resizing')
       document.body.style.cursor = 'ew-resize'
       document.body.style.userSelect = 'none'
       handle.setPointerCapture?.(pointerId)
@@ -55,7 +48,7 @@ export function useSidebarResize() {
       let lastWidth: number | null = null
 
       const onPointerMove = (ev: PointerEvent) => {
-        const max = Math.max(SIDEBAR_WIDTH.MIN, window.innerWidth * SIDEBAR_WIDTH.MAX_PERCENTAGE)
+        const max = getMaxSidebarWidth(window.innerWidth)
         const clamped = Math.min(Math.max(ev.clientX, SIDEBAR_WIDTH.MIN), max)
         lastWidth = clamped
         if (rafId !== null) cancelAnimationFrame(rafId)
@@ -70,8 +63,6 @@ export function useSidebarResize() {
           cancelAnimationFrame(rafId)
           rafId = null
         }
-        sidebar?.classList.remove('is-resizing')
-        document.documentElement.classList.remove('sidebar-resizing')
         document.body.style.cursor = ''
         document.body.style.userSelect = ''
         if (handle.hasPointerCapture?.(pointerId)) handle.releasePointerCapture(pointerId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
index 0deca94ef97..8a821c0243a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-workspace-management.ts
@@ -164,7 +164,7 @@ export function useWorkspaceManagement({
   const updateWorkspace = useCallback(
     async (
       workspaceId: string,
-      updates: { name?: string; logoUrl?: string | null; color?: string }
+      updates: { name?: string; logoUrl?: string | null }
     ): Promise<boolean> => {
       try {
         await updateWorkspaceMutation.mutateAsync({ workspaceId, ...updates })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 530e5a3dc6d..607ee1d0fa9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -16,8 +16,11 @@ import {
   Loader,
   OverflowText,
   Skeleton,
+  scrollFadeAttributes,
+  scrollFadeClass,
   Tooltip,
   Upload,
+  useScrollEdges,
 } from '@sim/emcn'
 import {
   Database,
@@ -42,7 +45,9 @@ import { useDeploymentShape } from '@/lib/core/config/deployment-shape'
 import { isStatusNoticePreviewEnabled } from '@/lib/core/config/env-flags'
 import { isMacPlatform } from '@/lib/core/utils/platform'
 import { buildFolderTree, getFolderPathNames } from '@/lib/folders/tree'
+import { DOCS_URL, SLACK_COMMUNITY_URL } from '@/lib/help-links'
 import { captureEvent } from '@/lib/posthog/client'
+import { useSidebarChrome } from '@/app/workspace/[workspaceId]/components/workspace-chrome'
 import { CONNECT_MODE } from '@/app/workspace/[workspaceId]/integrations/connect-route'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { useWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
@@ -57,6 +62,7 @@ import {
   CollapsedWorkflowFlyoutItem,
   FilesRailFlyout,
   HelpModal,
+  isNavItemActive,
   NavItemContextMenu,
   SearchModal,
   SettingsSidebar,
@@ -64,6 +70,7 @@ import {
   SidebarNavChip,
   type SidebarNavItemData,
   SidebarSection,
+  SidebarTooltip,
   StatusNotice,
   TablesRailFlyout,
   WorkflowList,
@@ -164,33 +171,6 @@ const SEARCH_MODAL_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
   minute: '2-digit',
 })
 
-const SLACK_COMMUNITY_URL =
-  'https://join.slack.com/t/sim-ott9864/shared_invite/zt-43lp8tc5v-0qrrqHGBKUsvQlpoouH~TA'
-
-export function SidebarTooltip({
-  children,
-  label,
-  enabled,
-  side = 'right',
-  shortcut,
-}: {
-  children: React.ReactElement
-  label: string
-  enabled: boolean
-  side?: 'right' | 'bottom'
-  shortcut?: string
-}) {
-  if (!enabled) return children
-  return (
-    <Tooltip.Root>
-      <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-      <Tooltip.Content side={side}>
-        {shortcut ? <Tooltip.Shortcut keys={shortcut}>{label}</Tooltip.Shortcut> : <p>{label}</p>}
-      </Tooltip.Content>
-    </Tooltip.Root>
-  )
-}
-
 /** Stands in for a chip row while a list loads, so it carries no margin either. */
 function SidebarItemSkeleton() {
   return (
@@ -326,17 +306,6 @@ const SidebarChatItem = memo(function SidebarChatItem({
   )
 })
 
-/**
- * Returns true when the current pathname matches `item.href` or any
- * `additionalActivePaths` at a segment boundary (avoids `/foo` matching `/foo-bar`).
- */
-function isNavItemActive(item: SidebarNavItemData, pathname: string | null): boolean {
-  if (!pathname) return false
-  const matches = (p: string) => pathname === p || pathname.startsWith(`${p}/`)
-  if (item.href && matches(item.href)) return true
-  return item.additionalActivePaths?.some(matches) ?? false
-}
-
 const SidebarNavItem = memo(function SidebarNavItem({
   item,
   active,
@@ -385,30 +354,14 @@ const DRAG_EXEMPT_CLASS = '[-webkit-app-region:no-drag]'
  *
  * This ensures server and client render identical HTML, preventing hydration errors.
  *
+ * Collapse and peek state come from the hosting chrome through
+ * {@link useSidebarChrome}; the peek card always renders the expanded layout,
+ * whatever the rail's state.
+ *
  * @returns Sidebar with workflows panel
  */
-interface SidebarProps {
-  /**
-   * Authoritative collapse state, derived once in {@link WorkspaceChrome} from the
-   * `sidebar_collapsed` cookie (server prop → store after hydration) and passed in
-   * so the rail's structure, labels, and width all read a single source.
-   */
-  isCollapsed: boolean
-  /**
-   * True while the sidebar is rendered as the desktop hover-peek card. The card shows
-   * the expanded layout even though the rail is collapsed, so this overrides
-   * {@link SidebarProps.isCollapsed} below — and separately suppresses the chrome the
-   * card already provides: it sits below the traffic-light lane, and drag-resize would
-   * fight the card's width.
-   */
-  isPeeking?: boolean
-}
-
-export const Sidebar = memo(function Sidebar({
-  isCollapsed: isCollapsedProp,
-  isPeeking = false,
-}: SidebarProps) {
-  /** The peek card always renders the expanded layout, whatever the rail's state. */
+export const Sidebar = memo(function Sidebar() {
+  const { isCollapsed: isCollapsedProp, isPeeking } = useSidebarChrome()
   const isCollapsed = isCollapsedProp && !isPeeking
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -772,7 +725,6 @@ export const Sidebar = memo(function Sidebar({
         href: `/workspace/${workspace.id}/w`,
         isCurrent: workspace.id === workspaceId,
         logoUrl: workspace.logoUrl,
-        color: workspace.color,
       })),
     [workspaces, workspaceId]
   )
@@ -1028,29 +980,10 @@ export const Sidebar = memo(function Sidebar({
     [workflowFlyoutRename, workflowsHover]
   )
 
-  const [hasOverflowTop, setHasOverflowTop] = useState(false)
-
-  useEffect(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-
-    const updateScrollState = () => {
-      setHasOverflowTop(container.scrollTop > 1)
-    }
-
-    updateScrollState()
-    container.addEventListener('scroll', updateScrollState, { passive: true })
-    const observer = new ResizeObserver(updateScrollState)
-    observer.observe(container)
-    if (scrollContentRef.current) {
-      observer.observe(scrollContentRef.current)
-    }
-
-    return () => {
-      container.removeEventListener('scroll', updateScrollState)
-      observer.disconnect()
-    }
-  }, [])
+  const scrollEdges = useScrollEdges(scrollContainerRef, {
+    contentRef: scrollContentRef,
+    enabled: !isCollapsed,
+  })
 
   const isOnSettingsPage = pathname?.startsWith(`/workspace/${workspaceId}/settings`) ?? false
 
@@ -1251,7 +1184,7 @@ export const Sidebar = memo(function Sidebar({
   const handleOpenHelpFromMenu = () => setIsHelpModalOpen(true)
 
   const handleOpenDocs = () => {
-    window.open('https://docs.sim.ai', '_blank', 'noopener,noreferrer')
+    window.open(DOCS_URL, '_blank', 'noopener,noreferrer')
     captureEvent(posthog, 'docs_opened', { source: 'help_menu' })
   }
 
@@ -1371,7 +1304,7 @@ export const Sidebar = memo(function Sidebar({
             )}
             <div
               className={cn(
-                'relative flex shrink-0 items-center px-2 pt-3',
+                'relative flex shrink-0 items-center px-2 pt-2',
                 !isPeeking &&
                   '[[data-sim-desktop-title-bar=inset]_&]:pt-[var(--desktop-title-bar-height)]'
               )}
@@ -1402,8 +1335,7 @@ export const Sidebar = memo(function Sidebar({
               {/*
                * The trailing chips collapse as one cluster rather than individually: a
                * chip's own `px-2` still renders under border-box, so `w-0` on the chip
-               * would leave a 16px stub — the width animation has to sit on an unpadded
-               * wrapper.
+               * would leave a 16px stub — the width has to sit on an unpadded wrapper.
                *
                * Chips carry no outer margin, so the gap here is the whole distance
                * between them. `gap-[1px]` rather than `gap-px`: the `px` spacing key
@@ -1411,19 +1343,14 @@ export const Sidebar = memo(function Sidebar({
                * hairline rules stay hairlines.
                *
                * The expanded width is EXPLICIT (2 icon chips × 32px + the 1px gap;
-               * 32px when the desktop inset title bar hides the collapse chip), never
-               * `auto`: `w-0 → auto` cannot interpolate, so on expand the cluster
-               * snapped to full width while the rail was still 51px wide — and since
-               * the cluster refuses to flex-shrink (min-width: auto) while the
-               * workspace chip's wrapper is `min-w-0 flex-1`, the workspace chip
-               * crushed to zero and the hover-filled Search chip landed exactly under
-               * the cursor on the workspace icon: a visible flash on every expand.
-               * With both endpoints explicit, the width tweens in step with the rail
-               * and the workspace chip keeps its space throughout.
+               * 32px when the desktop inset title bar hides the collapse chip) so the
+               * cluster never claims more than its chips: it refuses to flex-shrink
+               * (min-width: auto) while the workspace chip's wrapper is `min-w-0
+               * flex-1`, so an `auto` width would crush the workspace chip instead.
                */}
               <div
                 className={cn(
-                  'flex h-[30px] items-center gap-[1px] overflow-hidden transition-all duration-200 [transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)]',
+                  'flex h-[30px] items-center gap-[1px] overflow-hidden',
                   isCollapsed
                     ? 'w-0 opacity-0'
                     : 'w-[65px] [[data-sim-desktop-title-bar=inset]_&]:w-[32px]'
@@ -1472,12 +1399,16 @@ export const Sidebar = memo(function Sidebar({
               />
             ) : (
               <>
+                {/* The divider is the pinned block's bottom rule, not the scroll region's top one:
+                    the region's edge fade masks its own first pixels, which would erase a rule
+                    drawn there exactly when it should show. Same construction as the footer. */}
                 <div
                   className={cn(
                     SIDEBAR_SECTION_GAP_CLASS,
                     SIDEBAR_ITEM_GAP_CLASS,
                     SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
-                    'flex shrink-0 flex-col px-2'
+                    'flex shrink-0 flex-col border-b px-2 transition-colors duration-150',
+                    !scrollEdges.top && 'border-transparent'
                   )}
                 >
                   {topNavItems.map((item) => (
@@ -1495,9 +1426,11 @@ export const Sidebar = memo(function Sidebar({
                   ref={isCollapsed ? undefined : scrollContainerRef}
                   className={cn(
                     SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
-                    'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden border-t transition-colors duration-150',
-                    !hasOverflowTop && 'border-transparent'
+                    SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+                    scrollFadeClass,
+                    'flex min-h-0 flex-1 flex-col overflow-y-auto overflow-x-hidden'
                   )}
+                  {...scrollFadeAttributes(scrollEdges)}
                 >
                   <div ref={scrollContentRef} className='flex flex-col'>
                     {chatEnabled && (
@@ -1824,13 +1757,12 @@ export const Sidebar = memo(function Sidebar({
                 </div>
 
                 {(hosted || isStatusNoticePreviewEnabled) && !isCollapsed ? (
-                  <div className='shrink-0 px-2 py-2'>
-                    <StatusNotice preview={isStatusNoticePreviewEnabled} />
-                  </div>
+                  <StatusNotice preview={isStatusNoticePreviewEnabled} />
                 ) : null}
 
                 <SidebarFooter
                   workspaceId={workspaceId}
+                  showDivider={scrollEdges.bottom}
                   isCollapsed={isCollapsed}
                   showCollapsedTooltips={showCollapsedTooltips}
                   getSettingsHref={(section) => getSettingsHref({ section })}
diff --git a/apps/sim/components/emails/billing/credit-purchase-email.tsx b/apps/sim/components/emails/billing/credit-purchase-email.tsx
index 55b14677dd3..3f00597bbed 100644
--- a/apps/sim/components/emails/billing/credit-purchase-email.tsx
+++ b/apps/sim/components/emails/billing/credit-purchase-email.tsx
@@ -3,6 +3,7 @@ import { baseStyles } from '@/components/emails/_styles'
 import { EmailButton, EmailLayout, EmailStrong } from '@/components/emails/components'
 import { dollarsToCredits } from '@/lib/billing/credits/conversion'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { getBrandConfig } from '@/ee/whitelabeling'
 
 interface CreditPurchaseEmailProps {
@@ -47,7 +48,7 @@ export function CreditPurchaseEmail({
         Credits are applied automatically to your workflow executions.
       </Text>
 
-      <EmailButton href={`${baseUrl}/workspace`}>View Dashboard</EmailButton>
+      <EmailButton href={`${baseUrl}${APP_ENTRY_PATH}`}>View Dashboard</EmailButton>
 
       <div style={baseStyles.divider} />
 
diff --git a/apps/sim/components/identity-tile/identity-tile.tsx b/apps/sim/components/identity-tile/identity-tile.tsx
new file mode 100644
index 00000000000..b9803d8e9c7
--- /dev/null
+++ b/apps/sim/components/identity-tile/identity-tile.tsx
@@ -0,0 +1,56 @@
+import { cn } from '@sim/emcn'
+
+interface IdentityTileProps {
+  /** Letter shown when there is no uploaded mark. */
+  initial: string
+  logoUrl?: string | null
+  /** Accessible name for an uploaded mark; empty when the name is already beside it. */
+  alt?: string
+  /** Layout-only extras (visibility, positioning). Never chrome. */
+  className?: string
+  /** `data-slot` hook for tests and styling. */
+  slot?: string
+}
+
+/**
+ * The 16px mark for a workspace or organization: its uploaded logo, or its
+ * initial on a neutral tile. There is no per-entity color — every tile is the
+ * same gray so an uploaded mark is the only thing that distinguishes one from
+ * another, exactly as an icon would.
+ *
+ * Chrome matches the chip family at tile scale: `rounded-sm` is the chip's
+ * `rounded-lg` scaled to a 16px box, and the letter sits at the smallest type
+ * token. The fill is `--surface-6`, one step past the chip hover and active
+ * fills, so the tile still reads as a tile on a hovered or selected row instead
+ * of dissolving into it. The letter is the icon gray in light mode and steps up
+ * to the secondary text gray in dark mode, where the icon gray sits too close
+ * to that fill. Plain `img`/`div`
+ * rather than the emcn `Avatar`, whose Radix root renders a `<span>` — and globals
+ * fade every `span` in the collapsed rail to `opacity: 0`, which would blank the
+ * mark exactly where it is the only thing left to see.
+ */
+export function IdentityTile({ initial, logoUrl, alt = '', className, slot }: IdentityTileProps) {
+  if (logoUrl) {
+    return (
+      <img
+        data-slot={slot}
+        src={logoUrl}
+        alt={alt}
+        referrerPolicy='no-referrer'
+        className={cn('size-[16px] shrink-0 rounded-sm object-cover', className)}
+      />
+    )
+  }
+  return (
+    <div
+      data-slot={slot}
+      aria-hidden='true'
+      className={cn(
+        'flex size-[16px] shrink-0 items-center justify-center rounded-sm bg-[var(--surface-6)] text-[var(--text-icon)] text-micro leading-none dark:text-[var(--text-secondary)]',
+        className
+      )}
+    >
+      {initial}
+    </div>
+  )
+}
diff --git a/apps/sim/components/settings/settings-sidebar.tsx b/apps/sim/components/settings/settings-sidebar.tsx
index c210e9bbd1b..3554ddeb414 100644
--- a/apps/sim/components/settings/settings-sidebar.tsx
+++ b/apps/sim/components/settings/settings-sidebar.tsx
@@ -1,13 +1,16 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useRef } from 'react'
 import {
   ChipConfirmModal,
   chipIconSlotClass,
   chipVariants,
   cn,
   OverflowText,
+  scrollFadeAttributes,
+  scrollFadeClass,
   Tooltip,
+  useScrollEdges,
 } from '@sim/emcn'
 import { ChevronLeft } from '@sim/emcn/icons'
 import { useRouter } from 'next/navigation'
@@ -18,18 +21,20 @@ import {
   type StandaloneSettingsPlane,
 } from '@/components/settings/navigation'
 import { SettingsIntentLink } from '@/components/settings/settings-intent-link'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { SimWordmark } from '@/app/(landing)/components/navbar/components'
+import {
+  SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+  SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
 
 /**
  * The marketing landing page. `?home` is required: the proxy bounces a
- * signed-in user off `/` to `/workspace` unless the param is present.
+ * signed-in user off `/` to the app entry unless the param is present.
  */
 const LANDING_HREF = '/?home'
 
-/** Where the Back chip goes on planes that don't show the wordmark. */
-const WORKSPACE_HREF = '/workspace'
-
 interface SettingsNavigationGroup {
   key: string
   title: string
@@ -85,26 +90,23 @@ export function SettingsSidebar<Section extends SettingsSection>({
   const confirmLeave = useSettingsDirtyStore((state) => state.confirmLeave)
   const cancelLeave = useSettingsDirtyStore((state) => state.cancelLeave)
   const pendingLeave = useSettingsDirtyStore((state) => state.pendingLeave)
-  const [hasOverflowTop, setHasOverflowTop] = useState(false)
-
-  useEffect(() => {
-    const container = scrollContainerRef.current
-    if (!container) return
-    const updateScrollState = () => setHasOverflowTop(container.scrollTop > 1)
-    updateScrollState()
-    container.addEventListener('scroll', updateScrollState, { passive: true })
-    const observer = new ResizeObserver(updateScrollState)
-    observer.observe(container)
-    if (scrollContentRef.current) observer.observe(scrollContentRef.current)
-    return () => {
-      container.removeEventListener('scroll', updateScrollState)
-      observer.disconnect()
-    }
-  }, [isCollapsed])
+  const scrollEdges = useScrollEdges(scrollContainerRef, {
+    contentRef: scrollContentRef,
+    enabled: !isCollapsed,
+  })
 
   return (
     <>
-      <div className='flex shrink-0 flex-col gap-0.5 px-2 pb-1.5'>
+      {/* The divider is the pinned block's bottom rule, not the scroll region's top one:
+          the region's edge fade masks its own first pixels, which would erase a rule
+          drawn there exactly when it should show. Same construction as the footer. */}
+      <div
+        className={cn(
+          SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+          'flex shrink-0 flex-col gap-0.5 border-b px-2 transition-colors duration-150',
+          !scrollEdges.top && 'border-transparent'
+        )}
+      >
         {/* Both stay buttons, not Links: leaving settings must run the unsaved-changes guard. */}
         {SETTINGS_PLANE_CHROME[plane].showWordmark ? (
           <button
@@ -119,7 +121,7 @@ export function SettingsSidebar<Section extends SettingsSection>({
           <SidebarTooltip label='Back' enabled={showCollapsedTooltips}>
             <button
               type='button'
-              onClick={() => requestLeave(() => router.push(WORKSPACE_HREF))}
+              onClick={() => requestLeave(() => router.push(APP_ENTRY_PATH))}
               className={chipVariants({ fullWidth: true })}
             >
               {/* The 16px slot every settings row gives its icon, so Back's label starts on their baseline. */}
@@ -135,9 +137,12 @@ export function SettingsSidebar<Section extends SettingsSection>({
       <div
         ref={isCollapsed ? undefined : scrollContainerRef}
         className={cn(
-          'flex flex-1 flex-col overflow-y-auto overflow-x-hidden border-t pt-1.5 pb-2 transition-colors duration-150',
-          !hasOverflowTop && 'border-transparent'
+          SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+          SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+          scrollFadeClass,
+          'flex flex-1 flex-col overflow-y-auto overflow-x-hidden'
         )}
+        {...scrollFadeAttributes(scrollEdges)}
       >
         <div ref={scrollContentRef} className='flex flex-col'>
           {groups
diff --git a/apps/sim/components/settings/standalone-settings-shell.tsx b/apps/sim/components/settings/standalone-settings-shell.tsx
index 5a2f5ccbf68..42394caab56 100644
--- a/apps/sim/components/settings/standalone-settings-shell.tsx
+++ b/apps/sim/components/settings/standalone-settings-shell.tsx
@@ -90,9 +90,9 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
     <div className='flex h-screen w-full overflow-hidden bg-[var(--surface-1)]'>
       {/*
         Mirrors the in-workspace chrome (WorkspaceChrome): a flush, borderless
-        sidebar column against the app surface, and only the content pane
-        carrying the rounded border. Keep the two in step — a settings page
-        should look the same whether it is reached inside a workspace or not.
+        sidebar column against the app surface, meeting the content pane on a
+        single hairline divider with no gutter. Keep the two in step — a settings
+        page should look the same whether it is reached inside a workspace or not.
       */}
       <aside
         style={{ width: SIDEBAR_WIDTH.DEFAULT }}
@@ -101,8 +101,8 @@ export function StandaloneSettingsShell(props: StandaloneSettingsShellProps) {
       >
         {sidebar}
       </aside>
-      <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
-        <main className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+      <div className='flex min-w-0 flex-1 flex-col'>
+        <main className='flex-1 overflow-hidden border-[var(--border)] border-l bg-[var(--bg)]'>
           <SettingsHeaderProvider>
             <SettingsHeaderShell>
               <SettingsSectionProvider plane={plane} section={activeSection}>
diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx
index 2f4d1566802..11f59941f2e 100644
--- a/apps/sim/ee/sso/components/sso-form.test.tsx
+++ b/apps/sim/ee/sso/components/sso-form.test.tsx
@@ -87,7 +87,7 @@ async function submitForm() {
 /**
  * `renderToString` produces the markup of the first frame with no effects run,
  * which is exactly the window in which a callback URL seeded from an effect is
- * still the `/workspace` default.
+ * still the app-entry default.
  */
 describe('SSOForm callback URL', () => {
   beforeEach(() => {
@@ -100,17 +100,17 @@ describe('SSOForm callback URL', () => {
     expect(html).toContain(encodeURIComponent('/workspace/abc/w/xyz'))
   })
 
-  it('falls back to /workspace when no callbackUrl is present', () => {
+  it('falls back to the app entry when no callbackUrl is present', () => {
     const html = renderFirstFrame('')
 
-    expect(html).toContain(`/login?callbackUrl=${encodeURIComponent('/workspace')}`)
+    expect(html).toContain(`/login?callbackUrl=${encodeURIComponent('/home')}`)
   })
 
-  it('rejects an off-origin callbackUrl and falls back to /workspace', () => {
+  it('rejects an off-origin callbackUrl and falls back to the app entry', () => {
     const html = renderFirstFrame('callbackUrl=https://evil.example.com/steal')
 
     expect(html).not.toContain('evil.example.com')
-    expect(html).toContain(`/login?callbackUrl=${encodeURIComponent('/workspace')}`)
+    expect(html).toContain(`/login?callbackUrl=${encodeURIComponent('/home')}`)
   })
 })
 
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index e97427cbdbb..4b54ef7617f 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -9,6 +9,7 @@ import { client } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy } from '@/lib/core/config/env'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { DEFAULT_POST_AUTH_ROUTE } from '@/app/(auth)/auth-redirect'
 import { AuthFormMessage, AuthSubmitButton } from '@/app/(auth)/components'
 
 const logger = createLogger('SSOForm')
@@ -88,12 +89,13 @@ function SSOFormContent({
 
   /**
    * Derived during render rather than seeded into state from an effect: the
-   * first painted frame otherwise carries the `/workspace` default, so the
+   * first painted frame otherwise carries the app-entry default, so the
    * "Sign in with email" and "Sign up" links briefly point at the wrong
    * destination on any deep link carrying `?callbackUrl=`.
    */
   const isCallbackValid = callbackParam !== null && validateCallbackUrl(callbackParam)
-  const callbackUrl = callbackParam !== null && isCallbackValid ? callbackParam : '/workspace'
+  const callbackUrl =
+    callbackParam !== null && isCallbackValid ? callbackParam : DEFAULT_POST_AUTH_ROUTE
   const hasEmailError = showEmailValidationError && emailErrors.length > 0
 
   useEffect(() => {
diff --git a/apps/sim/hooks/queries/workspace.ts b/apps/sim/hooks/queries/workspace.ts
index 7cf48b29a84..500265cb36a 100644
--- a/apps/sim/hooks/queries/workspace.ts
+++ b/apps/sim/hooks/queries/workspace.ts
@@ -284,7 +284,7 @@ export function useDeleteWorkspace() {
 
 type UpdateWorkspaceParams = { workspaceId: string } & Pick<
   ContractBodyInput<typeof updateWorkspaceContract>,
-  'name' | 'color' | 'logoUrl'
+  'name' | 'logoUrl'
 >
 
 /**
diff --git a/apps/sim/hooks/use-settings-navigation.ts b/apps/sim/hooks/use-settings-navigation.ts
index 4b2d0635510..bed928bc466 100644
--- a/apps/sim/hooks/use-settings-navigation.ts
+++ b/apps/sim/hooks/use-settings-navigation.ts
@@ -5,6 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
 import type { WorkspaceHostContext } from '@/lib/api/contracts/workspaces'
 import { useSession } from '@/lib/auth/auth-client'
 import { canManageWorkspaceBilling } from '@/lib/billing/workspace-permissions'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { useOptionalWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
 import type { SettingsSection } from '@/app/workspace/[workspaceId]/settings/navigation'
 
@@ -37,7 +38,7 @@ export function resolveSettingsHref({
   hostContext,
   viewerUserId,
 }: ResolveSettingsHrefParams): string {
-  if (!workspaceId) return '/workspace'
+  if (!workspaceId) return APP_ENTRY_PATH
   const section = options?.section || 'general'
   if (
     section === 'billing' &&
diff --git a/apps/sim/lib/api/contracts/workspaces.ts b/apps/sim/lib/api/contracts/workspaces.ts
index 318562ae4bf..88caa775a18 100644
--- a/apps/sim/lib/api/contracts/workspaces.ts
+++ b/apps/sim/lib/api/contracts/workspaces.ts
@@ -15,7 +15,6 @@ export type WorkspacePermission = z.output<typeof workspacePermissionSchema>
 export const workspaceSchema = z.object({
   id: z.string(),
   name: z.string(),
-  color: z.string().optional(),
   logoUrl: z.string().nullable().optional(),
   ownerId: z.string(),
   organizationId: z.string().nullable(),
@@ -67,10 +66,6 @@ export type WorkspaceQueryScope = NonNullable<z.input<typeof listWorkspacesQuery
 
 export const createWorkspaceBodySchema = z.object({
   name: z.string().trim().min(1, 'Name is required'),
-  color: z
-    .string()
-    .regex(/^#[0-9a-fA-F]{6}$/)
-    .optional(),
   skipDefaultWorkflow: z.boolean().optional().default(false),
 })
 
@@ -80,10 +75,6 @@ export const workspaceParamsSchema = z.object({
 
 export const updateWorkspaceBodySchema = z.object({
   name: z.string().trim().min(1).optional(),
-  color: z
-    .string()
-    .regex(/^#[0-9a-fA-F]{6}$/)
-    .optional(),
   logoUrl: z
     .string()
     .refine((val) => val.startsWith('/') || val.startsWith('https://'), {
diff --git a/apps/sim/lib/auth/auth.ts b/apps/sim/lib/auth/auth.ts
index e01cc509be7..e97a370e7c2 100644
--- a/apps/sim/lib/auth/auth.ts
+++ b/apps/sim/lib/auth/auth.ts
@@ -111,6 +111,7 @@ import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { validateSignupEmailMx } from '@/lib/messaging/email/validation.server'
 import { isEmailVerificationEffectivelyEnabled } from '@/lib/messaging/email/verification'
 import { scheduleLifecycleEmail } from '@/lib/messaging/lifecycle'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import {
   getMicrosoftRefreshTokenExpiry,
   isMicrosoftProvider,
@@ -138,7 +139,7 @@ const logger = createLogger('Auth')
 
 function buildSsoAdmissionErrorUrl(code: string, callbackLocation?: string | null): string {
   const callbackUrl =
-    callbackLocation && validateCallbackUrl(callbackLocation) ? callbackLocation : '/workspace'
+    callbackLocation && validateCallbackUrl(callbackLocation) ? callbackLocation : APP_ENTRY_PATH
   const params = new URLSearchParams({ error: code, callbackUrl })
   return `${getBaseUrl()}/sso?${params.toString()}`
 }
diff --git a/apps/sim/lib/auth/stale-session-recovery.ts b/apps/sim/lib/auth/stale-session-recovery.ts
index 75f6d47f9f2..cbf797b9c70 100644
--- a/apps/sim/lib/auth/stale-session-recovery.ts
+++ b/apps/sim/lib/auth/stale-session-recovery.ts
@@ -10,7 +10,7 @@ const logger = createLogger('StaleSessionRecovery')
  * Signs out (clearing every auth cookie server-side), wipes per-user client
  * state, and navigates to login. Returns false without navigating when the
  * sign-out request fails — the cookies are still set, so going to /login
- * would only get bounced back to /workspace by the middleware.
+ * would only get bounced back into the app by the middleware.
  *
  * Shared by the /workspace loader (stale-cookie 401s and clean-null sessions)
  * and the session-expired screen, so every identity-recovery path clears
diff --git a/apps/sim/lib/billing/core/usage.ts b/apps/sim/lib/billing/core/usage.ts
index 33daa66d0cb..777b54586f9 100644
--- a/apps/sim/lib/billing/core/usage.ts
+++ b/apps/sim/lib/billing/core/usage.ts
@@ -38,6 +38,7 @@ import { isBillingEnabled } from '@/lib/core/config/env-flags'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import type { DbClient } from '@/lib/db/types'
 import { getEmailPreferences } from '@/lib/messaging/email/unsubscribe'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 const logger = createLogger('UsageManagement')
 
@@ -711,7 +712,7 @@ export async function maybeSendUsageThresholdEmail(params: {
 
     const upgradeCreditsLink = params.workspaceId
       ? `${baseUrl}${buildUpgradeHref(params.workspaceId, 'credits')}`
-      : `${baseUrl}/workspace`
+      : `${baseUrl}${APP_ENTRY_PATH}`
     /**
      * Organization billing is reached through the workspace the usage occurred in
      * — that is the only plane that serves it. Without a workspace there is no such
diff --git a/apps/sim/lib/billing/enterprise-owner-claim.ts b/apps/sim/lib/billing/enterprise-owner-claim.ts
index b2dab33933f..ee1bd1fe9b9 100644
--- a/apps/sim/lib/billing/enterprise-owner-claim.ts
+++ b/apps/sim/lib/billing/enterprise-owner-claim.ts
@@ -34,6 +34,7 @@ import type { DbOrTx } from '@/lib/db/types'
 import { computeInvitationExpiry, INVITATION_EXPIRY_DAYS } from '@/lib/invitations/expiry'
 import { MAX_INVITE_EMAILS, MAX_INVITE_WORKSPACES } from '@/lib/invitations/limits'
 import { sendEmail } from '@/lib/messaging/email/mailer'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import {
   createDefaultPersonalWorkspaceInTransaction,
   emitWorkspaceCreatedPlatformEvent,
@@ -1049,7 +1050,7 @@ export async function acceptEnterpriseOwnerClaim(params: {
         createdDefaultWorkspaceId: acceptance.acceptance.createdDefaultWorkspaceId,
       },
     })
-    return { success: true, claim, redirectPath: '/workspace' }
+    return { success: true, claim, redirectPath: APP_ENTRY_PATH }
   } catch (error) {
     logger.error('Failed to accept Enterprise owner claim', {
       claimId: params.claimId,
diff --git a/apps/sim/lib/billing/webhooks/invoices.ts b/apps/sim/lib/billing/webhooks/invoices.ts
index 6411c654d10..ae8dbab8ebf 100644
--- a/apps/sim/lib/billing/webhooks/invoices.ts
+++ b/apps/sim/lib/billing/webhooks/invoices.ts
@@ -22,6 +22,7 @@ import { getBaseUrl } from '@/lib/core/utils/urls'
 import { sendEmail } from '@/lib/messaging/email/mailer'
 import { getHelpEmailAddress, getPersonalEmailFrom } from '@/lib/messaging/email/utils'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { captureServerEvent } from '@/lib/posthog/server'
 
 const logger = createLogger('StripeInvoiceWebhooks')
@@ -187,13 +188,13 @@ async function createBillingPortalUrl(stripeCustomerId: string): Promise<string>
     const baseUrl = getBaseUrl()
     const portal = await stripe.billingPortal.sessions.create({
       customer: stripeCustomerId,
-      return_url: `${baseUrl}/workspace?billing=updated`,
+      return_url: `${baseUrl}${APP_ENTRY_PATH}?billing=updated`,
     })
     return portal.url
   } catch (error) {
     logger.error('Failed to create billing portal URL', { error, stripeCustomerId })
     // Fallback to generic billing page
-    return `${getBaseUrl()}/workspace?tab=subscription`
+    return `${getBaseUrl()}${APP_ENTRY_PATH}?tab=subscription`
   }
 }
 
diff --git a/apps/sim/lib/copilot/tools/handlers/oauth.ts b/apps/sim/lib/copilot/tools/handlers/oauth.ts
index eb24cb86ab6..d28a17d2222 100644
--- a/apps/sim/lib/copilot/tools/handlers/oauth.ts
+++ b/apps/sim/lib/copilot/tools/handlers/oauth.ts
@@ -4,6 +4,7 @@ import type { ExecutionContext, ToolCallResult } from '@/lib/copilot/request/typ
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { prepareCredentialConnection } from '@/lib/credentials/application/prepare-credential-connection'
 import { isServiceAccountProviderId } from '@/lib/credentials/service-account-provider-ids'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 
 export async function executeOAuthGetAuthLink(
   rawParams: Record<string, unknown>,
@@ -68,7 +69,7 @@ export async function executeOAuthGetAuthLink(
     const message = messageForCopilotApplicationError(err)
     const workspaceUrl = context.workspaceId
       ? `${baseUrl}/workspace/${context.workspaceId}`
-      : `${baseUrl}/workspace`
+      : `${baseUrl}${APP_ENTRY_PATH}`
     return {
       success: false,
       error: message,
diff --git a/apps/sim/lib/help-links.ts b/apps/sim/lib/help-links.ts
new file mode 100644
index 00000000000..5e652a453cd
--- /dev/null
+++ b/apps/sim/lib/help-links.ts
@@ -0,0 +1,5 @@
+/** Destinations the sidebar help menus open. */
+export const DOCS_URL = 'https://docs.sim.ai' as const
+
+export const SLACK_COMMUNITY_URL =
+  'https://join.slack.com/t/sim-ott9864/shared_invite/zt-43lp8tc5v-0qrrqHGBKUsvQlpoouH~TA' as const
diff --git a/apps/sim/lib/invitations/core.ts b/apps/sim/lib/invitations/core.ts
index f0cb61d32c2..9f98d489126 100644
--- a/apps/sim/lib/invitations/core.ts
+++ b/apps/sim/lib/invitations/core.ts
@@ -39,6 +39,7 @@ import { isBillingEnabled } from '@/lib/core/config/env-flags'
 import { syncWorkspaceEnvCredentials } from '@/lib/credentials/environment'
 import type { DbOrTx } from '@/lib/db/types'
 import { acquireInvitationMutationLocks } from '@/lib/invitations/locks'
+import { APP_ENTRY_PATH } from '@/lib/navigation/paths'
 import { captureServerEvent } from '@/lib/posthog/server'
 import {
   attachOwnedWorkspacesToOrganizationTx,
@@ -1371,7 +1372,7 @@ async function acceptLockedInvitation(
   effects.membershipAlreadyExists = membershipAlreadyExists
 
   const redirectPath =
-    acceptedWorkspaceIds.length > 0 ? `/workspace/${acceptedWorkspaceIds[0]}` : '/workspace'
+    acceptedWorkspaceIds.length > 0 ? `/workspace/${acceptedWorkspaceIds[0]}` : APP_ENTRY_PATH
 
   return {
     success: true,
diff --git a/apps/sim/lib/navigation/paths.test.ts b/apps/sim/lib/navigation/paths.test.ts
new file mode 100644
index 00000000000..e363abcf64a
--- /dev/null
+++ b/apps/sim/lib/navigation/paths.test.ts
@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'vitest'
+import {
+  APP_ENTRY_PATH,
+  isAppSurfacePath,
+  organizationRoutes,
+  WORKSPACES_PATH,
+} from '@/lib/navigation/paths'
+
+describe('isAppSurfacePath', () => {
+  it.each([
+    APP_ENTRY_PATH,
+    WORKSPACES_PATH,
+    '/workspace/ws-1/home',
+    '/o',
+    '/o/org-1',
+    '/o/org-1/chat/c-1',
+  ])('gates %s', (pathname) => {
+    expect(isAppSurfacePath(pathname)).toBe(true)
+  })
+
+  it.each(['/', '/login', '/homepage', '/organizations', '/workspaces', '/other'])(
+    'leaves %s public',
+    (pathname) => {
+      expect(isAppSurfacePath(pathname)).toBe(false)
+    }
+  )
+})
+
+describe('organizationRoutes', () => {
+  it('builds every destination under the organization root', () => {
+    const routes = organizationRoutes('org-1')
+    expect(routes.root).toBe('/o/org-1')
+    expect(routes.home).toBe('/o/org-1/home')
+    expect(routes.workspaces).toBe('/o/org-1/workspaces')
+    expect(routes.chat('c-1')).toBe('/o/org-1/chat/c-1')
+  })
+})
diff --git a/apps/sim/lib/navigation/paths.ts b/apps/sim/lib/navigation/paths.ts
new file mode 100644
index 00000000000..ed67ce7a4cb
--- /dev/null
+++ b/apps/sim/lib/navigation/paths.ts
@@ -0,0 +1,55 @@
+/**
+ * Top-level destinations of the signed-in app. Dependency-free so the edge proxy,
+ * server components, and client code all read the same values.
+ */
+
+/**
+ * Where an authenticated viewer lands when nothing more specific was asked for:
+ * after login, from `/`, and from every "open Sim" affordance. A server route
+ * that resolves to the viewer's organization surface, or to their workspaces when
+ * they belong to no organization. Every default post-auth destination must point
+ * here rather than at a concrete surface, so the landing decision lives in one place.
+ */
+export const APP_ENTRY_PATH = '/home'
+
+/**
+ * The workspace picker: resolves to the viewer's most recent workspace. Use it only
+ * where the viewer explicitly asked for workspaces; the default landing is
+ * {@link APP_ENTRY_PATH}.
+ */
+export const WORKSPACES_PATH = '/workspace'
+
+/** Root of the organization surface; `/o` alone resolves like {@link APP_ENTRY_PATH}. */
+const ORGANIZATIONS_PATH = '/o'
+
+/**
+ * Every destination under one organization's surface, built from one place so the
+ * sidebar, redirects, and pages can never disagree about a path.
+ */
+export function organizationRoutes(organizationId: string) {
+  const root = `${ORGANIZATIONS_PATH}/${organizationId}`
+  return {
+    root,
+    home: `${root}/home`,
+    integrations: `${root}/integrations`,
+    skills: `${root}/skills`,
+    workspaces: `${root}/workspaces`,
+    chat: (chatId: string) => `${root}/chat/${chatId}`,
+  } as const
+}
+
+function isPathOrDescendant(pathname: string, root: string): boolean {
+  return pathname === root || pathname.startsWith(`${root}/`)
+}
+
+/**
+ * Whether a pathname belongs to the signed-in app — the entry, the workspaces, or
+ * the organization surface — and so requires a session before it renders.
+ */
+export function isAppSurfacePath(pathname: string): boolean {
+  return (
+    isPathOrDescendant(pathname, APP_ENTRY_PATH) ||
+    isPathOrDescendant(pathname, WORKSPACES_PATH) ||
+    isPathOrDescendant(pathname, ORGANIZATIONS_PATH)
+  )
+}
diff --git a/apps/sim/lib/navigation/resolve-app-entry.test.ts b/apps/sim/lib/navigation/resolve-app-entry.test.ts
new file mode 100644
index 00000000000..0936817d91c
--- /dev/null
+++ b/apps/sim/lib/navigation/resolve-app-entry.test.ts
@@ -0,0 +1,39 @@
+/**
+ * @vitest-environment node
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+const { mockResolveOrganizationLanding } = vi.hoisted(() => ({
+  mockResolveOrganizationLanding: vi.fn(),
+}))
+
+vi.mock('@/lib/organizations/surface', () => ({
+  resolveOrganizationLanding: mockResolveOrganizationLanding,
+}))
+
+import { resolveAppEntryPath } from '@/lib/navigation/resolve-app-entry'
+
+describe('resolveAppEntryPath', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('lands an organization member on that organization home', async () => {
+    mockResolveOrganizationLanding.mockResolvedValue('org-2')
+
+    await expect(
+      resolveAppEntryPath({
+        user: { id: 'viewer' },
+        session: { activeOrganizationId: 'org-2' },
+      })
+    ).resolves.toBe('/o/org-2/home')
+    expect(mockResolveOrganizationLanding).toHaveBeenCalledWith('viewer', 'org-2')
+  })
+
+  it('lands a viewer with no organization on the workspace picker', async () => {
+    mockResolveOrganizationLanding.mockResolvedValue(null)
+
+    await expect(resolveAppEntryPath({ user: { id: 'viewer' } })).resolves.toBe('/workspace')
+    expect(mockResolveOrganizationLanding).toHaveBeenCalledWith('viewer', null)
+  })
+})
diff --git a/apps/sim/lib/navigation/resolve-app-entry.ts b/apps/sim/lib/navigation/resolve-app-entry.ts
new file mode 100644
index 00000000000..b71dda9168b
--- /dev/null
+++ b/apps/sim/lib/navigation/resolve-app-entry.ts
@@ -0,0 +1,20 @@
+import { getActiveOrganizationId } from '@/lib/auth/session-response'
+import { organizationRoutes, WORKSPACES_PATH } from '@/lib/navigation/paths'
+import { resolveOrganizationLanding } from '@/lib/organizations/surface'
+
+interface EntrySession {
+  user: { id: string }
+}
+
+/**
+ * Where an authenticated viewer lands by default: the home of their organization
+ * (the session's active one when they belong to it, otherwise their first), or the
+ * workspace picker when they belong to no organization.
+ */
+export async function resolveAppEntryPath(session: EntrySession): Promise<string> {
+  const organizationId = await resolveOrganizationLanding(
+    session.user.id,
+    getActiveOrganizationId(session)
+  )
+  return organizationId ? organizationRoutes(organizationId).home : WORKSPACES_PATH
+}
diff --git a/apps/sim/lib/organizations/surface.test.ts b/apps/sim/lib/organizations/surface.test.ts
new file mode 100644
index 00000000000..af079036846
--- /dev/null
+++ b/apps/sim/lib/organizations/surface.test.ts
@@ -0,0 +1,76 @@
+/**
+ * @vitest-environment node
+ */
+import { member, organization } from '@sim/db/schema'
+import { queueTableRows, resetDbChainMock } from '@sim/testing'
+import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  getOrganizationSurfaceContext,
+  resolveOrganizationLanding,
+} from '@/lib/organizations/surface'
+
+afterAll(resetDbChainMock)
+
+describe('getOrganizationSurfaceContext', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    resetDbChainMock()
+  })
+
+  it('returns the organization and the viewer standing for a member', async () => {
+    queueTableRows(member, [{ role: 'admin' }])
+    queueTableRows(organization, [
+      { id: 'org-1', name: 'Acme', slug: 'acme', logo: 'https://cdn/logo.png' },
+    ])
+
+    await expect(getOrganizationSurfaceContext('org-1', 'viewer')).resolves.toEqual({
+      organization: { id: 'org-1', name: 'Acme', slug: 'acme', logo: 'https://cdn/logo.png' },
+      viewer: { role: 'admin', isAdmin: true },
+    })
+  })
+
+  it('normalizes a missing logo to null', async () => {
+    queueTableRows(member, [{ role: 'member' }])
+    queueTableRows(organization, [{ id: 'org-1', name: 'Acme', slug: 'acme', logo: undefined }])
+
+    await expect(getOrganizationSurfaceContext('org-1', 'viewer')).resolves.toMatchObject({
+      organization: { logo: null },
+      viewer: { role: 'member', isAdmin: false },
+    })
+  })
+
+  it('denies a viewer who is not a member without reading the organization', async () => {
+    queueTableRows(organization, [{ id: 'org-1', name: 'Acme', slug: 'acme', logo: null }])
+
+    await expect(getOrganizationSurfaceContext('org-1', 'viewer')).resolves.toBeNull()
+  })
+
+  it('denies a membership whose organization row is gone', async () => {
+    queueTableRows(member, [{ role: 'member' }])
+
+    await expect(getOrganizationSurfaceContext('org-1', 'viewer')).resolves.toBeNull()
+  })
+})
+
+describe('resolveOrganizationLanding', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    resetDbChainMock()
+  })
+
+  it('prefers the active organization when the viewer belongs to it', async () => {
+    queueTableRows(member, [{ organizationId: 'org-1' }, { organizationId: 'org-2' }])
+
+    await expect(resolveOrganizationLanding('viewer', 'org-2')).resolves.toBe('org-2')
+  })
+
+  it('falls back to the earliest membership when the active organization is foreign', async () => {
+    queueTableRows(member, [{ organizationId: 'org-1' }, { organizationId: 'org-2' }])
+
+    await expect(resolveOrganizationLanding('viewer', 'org-other')).resolves.toBe('org-1')
+  })
+
+  it('returns null for a viewer with no memberships', async () => {
+    await expect(resolveOrganizationLanding('viewer', null)).resolves.toBeNull()
+  })
+})
diff --git a/apps/sim/lib/organizations/surface.ts b/apps/sim/lib/organizations/surface.ts
new file mode 100644
index 00000000000..29b16fb4c30
--- /dev/null
+++ b/apps/sim/lib/organizations/surface.ts
@@ -0,0 +1,87 @@
+import { cache } from 'react'
+import { db } from '@sim/db'
+import { member, organization } from '@sim/db/schema'
+import { asc, eq } from 'drizzle-orm'
+import type { OrganizationRole } from '@/lib/api/contracts/primitives'
+import { getOrganizationSettingsAccess } from '@/lib/organizations/settings-access'
+
+export interface OrganizationSurfaceOrganization {
+  id: string
+  name: string
+  slug: string
+  logo: string | null
+}
+
+interface OrganizationSurfaceViewer {
+  role: OrganizationRole
+  isAdmin: boolean
+}
+
+/**
+ * Everything the organization surface (`/o/[organizationId]`) needs before it renders:
+ * the routed organization's identity and the viewer's standing in it. A `null`
+ * result is an explicit access denial — the viewer is not a member, or there is no
+ * such organization.
+ */
+export interface OrganizationSurfaceContext {
+  organization: OrganizationSurfaceOrganization
+  viewer: OrganizationSurfaceViewer
+}
+
+/**
+ * Resolves the surface context from membership in the organization named by the
+ * route. Session active-organization state is intentionally not consulted: it
+ * describes the viewer's account, not the organization being viewed.
+ */
+async function resolveOrganizationSurfaceContext(
+  organizationId: string,
+  userId: string
+): Promise<OrganizationSurfaceContext | null> {
+  const access = await getOrganizationSettingsAccess(organizationId, userId)
+  if (!access.isMember || access.role === null) return null
+
+  const [row] = await db
+    .select({
+      id: organization.id,
+      name: organization.name,
+      slug: organization.slug,
+      logo: organization.logo,
+    })
+    .from(organization)
+    .where(eq(organization.id, organizationId))
+    .limit(1)
+  if (!row) return null
+
+  return {
+    organization: { id: row.id, name: row.name, slug: row.slug, logo: row.logo ?? null },
+    viewer: { role: access.role, isAdmin: access.isAdmin },
+  }
+}
+
+/**
+ * Request-memoized surface context for nested Server Components, so the layout and
+ * any page under it share one membership lookup.
+ */
+export const getOrganizationSurfaceContext = cache(resolveOrganizationSurfaceContext)
+
+/**
+ * Picks the organization `/o` lands on: the session's active organization when the
+ * viewer belongs to it, otherwise the one they joined first. `null` when the viewer
+ * belongs to no organization at all.
+ */
+export async function resolveOrganizationLanding(
+  userId: string,
+  activeOrganizationId: string | null
+): Promise<string | null> {
+  const memberships = await db
+    .select({ organizationId: member.organizationId })
+    .from(member)
+    .where(eq(member.userId, userId))
+    .orderBy(asc(member.createdAt))
+  if (memberships.length === 0) return null
+
+  const isActiveMember =
+    activeOrganizationId !== null &&
+    memberships.some((row) => row.organizationId === activeOrganizationId)
+  return isActiveMember ? activeOrganizationId : memberships[0].organizationId
+}
diff --git a/apps/sim/lib/workspaces/colors.ts b/apps/sim/lib/workspaces/colors.ts
index 87b1fa34be8..e006f303120 100644
--- a/apps/sim/lib/workspaces/colors.ts
+++ b/apps/sim/lib/workspaces/colors.ts
@@ -1,22 +1,5 @@
-import { randomItem } from '@sim/utils/random'
 import { hexToRgb } from '@/lib/colors'
 
-/** Color palette for workspace accents. */
-export const WORKSPACE_COLORS = [
-  '#2ABBF8', // Blue
-  '#22c55e', // Green
-  '#FFCC02', // Yellow
-  '#a855f7', // Purple
-  '#f97316', // Orange
-  '#14b8a6', // Teal
-  '#ff6b6b', // Coral
-] as const
-
-/** Picks a random workspace color from the hero palette. */
-export function getRandomWorkspaceColor(): string {
-  return randomItem(WORKSPACE_COLORS)
-}
-
 /**
  * User color palette matching terminal.tsx RUN_ID_COLORS
  * These colors are used consistently across cursors, avatars, and terminal run IDs
diff --git a/apps/sim/lib/workspaces/create.ts b/apps/sim/lib/workspaces/create.ts
index 0c796b4e851..fe9da7712f7 100644
--- a/apps/sim/lib/workspaces/create.ts
+++ b/apps/sim/lib/workspaces/create.ts
@@ -6,7 +6,6 @@ import { PlatformEvents } from '@/lib/core/telemetry'
 import type { DbOrTx } from '@/lib/db/types'
 import { buildDefaultWorkflowArtifacts } from '@/lib/workflows/defaults'
 import { saveWorkflowToNormalizedTables } from '@/lib/workflows/persistence/utils'
-import { getRandomWorkspaceColor } from '@/lib/workspaces/colors'
 import {
   getWorkspaceInvitePolicy,
   lockWorkspaceCreationContext,
@@ -23,7 +22,6 @@ export interface CreateWorkspaceParams {
   observedOrganizationId: string | null
   name: string
   skipDefaultWorkflow?: boolean
-  explicitColor?: string
   organizationId: string | null
   workspaceMode: WorkspaceMode
   billedAccountUserId: string
@@ -41,7 +39,6 @@ export interface CreateWorkspaceParams {
 export interface CreatedWorkspace {
   id: string
   name: string
-  color: string
   ownerId: string
   organizationId: string | null
   workspaceMode: WorkspaceMode
@@ -89,7 +86,6 @@ export async function createWorkspaceInTransaction(
     observedOrganizationId,
     name,
     skipDefaultWorkflow = false,
-    explicitColor,
     organizationId,
     workspaceMode,
     billedAccountUserId,
@@ -99,7 +95,6 @@ export async function createWorkspaceInTransaction(
   const workspaceId = generateId()
   const workflowId = generateId()
   const now = new Date()
-  const color = explicitColor || getRandomWorkspaceColor()
   /** Built before the locks: it takes no arguments, so nothing makes it wait for them. */
   const defaultWorkflowArtifacts = skipDefaultWorkflow ? null : buildDefaultWorkflowArtifacts()
   const lockedCreationContext = await lockWorkspaceCreationContext(tx, {
@@ -116,7 +111,6 @@ export async function createWorkspaceInTransaction(
   await tx.insert(workspace).values({
     id: workspaceId,
     name,
-    color,
     ownerId: userId,
     organizationId,
     workspaceMode,
@@ -180,7 +174,6 @@ export async function createWorkspaceInTransaction(
   return {
     id: workspaceId,
     name,
-    color,
     ownerId: userId,
     organizationId,
     workspaceMode,
diff --git a/apps/sim/lib/workspaces/initials.ts b/apps/sim/lib/workspaces/initials.ts
new file mode 100644
index 00000000000..1e590ae667e
--- /dev/null
+++ b/apps/sim/lib/workspaces/initials.ts
@@ -0,0 +1,8 @@
+/**
+ * The single-letter avatar initial for a workspace, ignoring the word
+ * "workspace" in its name (e.g. "Acme Workspace" → "A").
+ */
+export function getWorkspaceInitial(name: string | undefined): string {
+  const stripped = (name ?? '').replace(/workspace/gi, '').trim()
+  return (stripped[0] || name?.[0] || 'W').toUpperCase()
+}
diff --git a/apps/sim/proxy.ts b/apps/sim/proxy.ts
index 8d4a0ecb2e3..d33821a5f2b 100644
--- a/apps/sim/proxy.ts
+++ b/apps/sim/proxy.ts
@@ -1,6 +1,7 @@
 import { createLogger } from '@sim/logger'
 import { getSessionCookie } from 'better-auth/cookies'
 import { type NextRequest, NextResponse } from 'next/server'
+import { APP_ENTRY_PATH, isAppSurfacePath } from '@/lib/navigation/paths'
 import { getEnv } from './lib/core/config/env'
 import { isAuthDisabled, isDev, isHosted } from './lib/core/config/env-flags'
 import { generateRuntimeCSP } from './lib/core/security/csp'
@@ -204,18 +205,18 @@ function handleRootPathRedirects(
   if (!isHosted && !isDev) {
     // Self-hosted production: Always redirect based on session.
     if (hasActiveSession) {
-      return NextResponse.redirect(new URL('/workspace', request.url))
+      return NextResponse.redirect(new URL(APP_ENTRY_PATH, request.url))
     }
     return NextResponse.redirect(new URL('/login', request.url))
   }
 
-  // For root path, redirect authenticated users to workspace
+  // For root path, redirect authenticated users into the app
   // Unless they have a 'home' query parameter (e.g., ?home)
   // This allows intentional navigation to the homepage from anywhere in the app
   if (hasActiveSession) {
     const isBrowsingHome = url.searchParams.has('home')
     if (!isBrowsingHome) {
-      return NextResponse.redirect(new URL('/workspace', request.url))
+      return NextResponse.redirect(new URL(APP_ENTRY_PATH, request.url))
     }
   }
 
@@ -319,7 +320,10 @@ export async function proxy(request: NextRequest) {
 
   if (url.pathname === '/login' || url.pathname === '/signup') {
     if (hasActiveSession) {
-      return applyIndexingPolicy(request, NextResponse.redirect(new URL('/workspace', request.url)))
+      return applyIndexingPolicy(
+        request,
+        NextResponse.redirect(new URL(APP_ENTRY_PATH, request.url))
+      )
     }
     const response = NextResponse.next()
     response.headers.set('Content-Security-Policy', generateRuntimeCSP())
@@ -333,7 +337,7 @@ export async function proxy(request: NextRequest) {
     return applyIndexingPolicy(request, NextResponse.next())
   }
 
-  if (url.pathname.startsWith('/workspace')) {
+  if (isAppSurfacePath(url.pathname)) {
     if (!hasActiveSession) {
       return applyIndexingPolicy(request, NextResponse.redirect(new URL('/login', request.url)))
     }
@@ -390,6 +394,9 @@ export const config = {
     '/w', // Legacy /w redirect
     '/w/:path*', // Legacy /w/* redirects
     '/workspace/:path*', // New workspace routes
+    '/home', // App entry
+    '/o', // Organization surface
+    '/o/:path*',
     '/login',
     '/signup',
     '/invite/:path*', // Match invitation routes
diff --git a/apps/sim/stores/constants.ts b/apps/sim/stores/constants.ts
index 05125af43cc..45320008489 100644
--- a/apps/sim/stores/constants.ts
+++ b/apps/sim/stores/constants.ts
@@ -18,16 +18,27 @@ const API_ENDPOINTS = {
  * @see layout.tsx for pre-hydration script that reads localStorage
  */
 
-/** Inset gap in pixels between the viewport edge and the content window */
-export const CONTENT_WINDOW_GAP = 8
+/**
+ * Inset in pixels between the viewport edge and the content window. Zero: the
+ * pane sits flush against the viewport and meets the sidebar on a hairline
+ * divider. Kept as a named constant because the panel, terminal, and floating
+ * window geometry all measure from it.
+ */
+export const CONTENT_WINDOW_GAP = 0
 
 /** Sidebar width constraints */
 export const SIDEBAR_WIDTH = {
-  DEFAULT: 238,
-  MIN: 238,
+  DEFAULT: 256,
+  MIN: 256,
   /** Width when sidebar is collapsed to icon-only mode */
   COLLAPSED: 48,
-  /** Maximum is 30% of viewport, enforced dynamically */
+  /**
+   * Absolute ceiling on the expanded width. The percentage below already scales
+   * the rail with the viewport; this keeps a wide monitor from granting a rail
+   * that swallows a third of the page. `getMaxSidebarWidth` combines the two.
+   */
+  MAX: 400,
+  /** Maximum is 30% of viewport (up to `MAX`), enforced dynamically */
   MAX_PERCENTAGE: 0.3,
 } as const
 
diff --git a/apps/sim/stores/sidebar/store.test.ts b/apps/sim/stores/sidebar/store.test.ts
index 5ce34ae3e79..29fde806bc1 100644
--- a/apps/sim/stores/sidebar/store.test.ts
+++ b/apps/sim/stores/sidebar/store.test.ts
@@ -3,7 +3,7 @@
  */
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { SIDEBAR_WIDTH } from '@/stores/constants'
-import { readCollapsedCookie, useSidebarStore } from './store'
+import { getMaxSidebarWidth, readCollapsedCookie, useSidebarStore } from './store'
 
 function setCookie(value: string) {
   document.cookie = `sidebar_collapsed=${value}; path=/`
@@ -94,3 +94,17 @@ describe('sidebar width CSS variables', () => {
     expect(widthVars().expanded).toBe(`${SIDEBAR_WIDTH.MIN}px`)
   })
 })
+
+describe('getMaxSidebarWidth', () => {
+  it('scales with the viewport below the cap', () => {
+    expect(getMaxSidebarWidth(1000)).toBe(1000 * SIDEBAR_WIDTH.MAX_PERCENTAGE)
+  })
+
+  it('caps a wide viewport at the absolute maximum', () => {
+    expect(getMaxSidebarWidth(4000)).toBe(SIDEBAR_WIDTH.MAX)
+  })
+
+  it('never drops below the minimum on a narrow viewport', () => {
+    expect(getMaxSidebarWidth(400)).toBe(SIDEBAR_WIDTH.MIN)
+  })
+})
diff --git a/apps/sim/stores/sidebar/store.ts b/apps/sim/stores/sidebar/store.ts
index 015e4f2ed96..9dc2f69caf4 100644
--- a/apps/sim/stores/sidebar/store.ts
+++ b/apps/sim/stores/sidebar/store.ts
@@ -4,17 +4,26 @@ import { SIDEBAR_WIDTH } from '@/stores/constants'
 import type { SidebarState } from './types'
 
 /**
- * Clamps an expanded sidebar width into the valid range for the current
- * viewport. The upper bound can never drop below {@link SIDEBAR_WIDTH.MIN}, so a
- * narrow window (where `innerWidth * MAX_PERCENTAGE < MIN`) still yields a width
- * at or above the minimum instead of collapsing the sidebar to nothing.
+ * The widest the expanded sidebar may be at a given viewport width: 30% of the
+ * viewport, capped at {@link SIDEBAR_WIDTH.MAX}. It can never drop below
+ * {@link SIDEBAR_WIDTH.MIN}, so a narrow window (where the percentage falls under
+ * the minimum) still yields a usable rail instead of collapsing it to nothing.
+ *
+ * The one definition of the ceiling — the resize handle reads it, and the
+ * pre-paint script in `app/layout.tsx` mirrors it inline (it cannot import).
  */
+export function getMaxSidebarWidth(viewportWidth: number): number {
+  return Math.max(
+    SIDEBAR_WIDTH.MIN,
+    Math.min(SIDEBAR_WIDTH.MAX, viewportWidth * SIDEBAR_WIDTH.MAX_PERCENTAGE)
+  )
+}
+
+/** Clamps an expanded sidebar width into the valid range for the current viewport. */
 function clampSidebarWidth(width: number): number {
   if (!Number.isFinite(width)) return SIDEBAR_WIDTH.DEFAULT
   const max =
-    typeof window === 'undefined'
-      ? Number.POSITIVE_INFINITY
-      : Math.max(SIDEBAR_WIDTH.MIN, window.innerWidth * SIDEBAR_WIDTH.MAX_PERCENTAGE)
+    typeof window === 'undefined' ? Number.POSITIVE_INFINITY : getMaxSidebarWidth(window.innerWidth)
   return Math.min(Math.max(width, SIDEBAR_WIDTH.MIN), max)
 }
 
diff --git a/packages/emcn/src/components/scroll-fade/scroll-fade.module.css b/packages/emcn/src/components/scroll-fade/scroll-fade.module.css
new file mode 100644
index 00000000000..acca502808f
--- /dev/null
+++ b/packages/emcn/src/components/scroll-fade/scroll-fade.module.css
@@ -0,0 +1,39 @@
+/*
+ * Edge fade for a scroll region. The mask is one gradient whose four stops are
+ * driven by custom properties, so a region fades at an edge only while content
+ * is hidden beyond it: at rest every stop collapses onto the edge and the mask is
+ * fully opaque, which is what keeps the fog off a list that fits or sits at its
+ * top. `--scroll-fade-inset` lets a consumer whose top edge is covered by a
+ * floating control (the command palette's search field) start the band below it.
+ */
+.root {
+  --scroll-fade-band: 12px;
+  --scroll-fade-top-start: 0px;
+  --scroll-fade-top-end: 0px;
+  --scroll-fade-bottom-start: 100%;
+  --scroll-fade-bottom-end: 100%;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent var(--scroll-fade-top-start),
+    black var(--scroll-fade-top-end),
+    black var(--scroll-fade-bottom-start),
+    transparent var(--scroll-fade-bottom-end)
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent var(--scroll-fade-top-start),
+    black var(--scroll-fade-top-end),
+    black var(--scroll-fade-bottom-start),
+    transparent var(--scroll-fade-bottom-end)
+  );
+}
+
+.root[data-scroll-fade-top] {
+  --scroll-fade-top-start: var(--scroll-fade-inset, 0px);
+  --scroll-fade-top-end: calc(var(--scroll-fade-inset, 0px) + var(--scroll-fade-band));
+}
+
+.root[data-scroll-fade-bottom] {
+  --scroll-fade-bottom-start: calc(100% - var(--scroll-fade-band));
+  --scroll-fade-bottom-end: 100%;
+}
diff --git a/packages/emcn/src/components/scroll-fade/scroll-fade.ts b/packages/emcn/src/components/scroll-fade/scroll-fade.ts
new file mode 100644
index 00000000000..2a440da511d
--- /dev/null
+++ b/packages/emcn/src/components/scroll-fade/scroll-fade.ts
@@ -0,0 +1,39 @@
+import styles from './scroll-fade.module.css'
+
+/** Which edges of a scroll region currently hide content beyond them. */
+export interface ScrollEdges {
+  top: boolean
+  bottom: boolean
+}
+
+/** Height of the fade band at an active edge, in pixels. */
+export const SCROLL_FADE_BAND_PX = 12
+
+/**
+ * The canonical scroll-edge fade. Put this class on the scrolling element and
+ * spread {@link scrollFadeAttributes} beside it; the region then fades over the
+ * band at any edge that hides content, and stays fully opaque at every edge that
+ * does not — so a list that fits, or sits at its top, is never fogged.
+ *
+ * The band is a fixed {@link SCROLL_FADE_BAND_PX}. A consumer whose top edge is
+ * covered by a floating control sets `--scroll-fade-inset` to that control's
+ * height (e.g. `[--scroll-fade-inset:3rem]`) so the band starts beneath it.
+ *
+ * @example
+ * const edges = useScrollEdges(listRef)
+ * <div ref={listRef} className={cn('overflow-y-auto', scrollFadeClass)} {...scrollFadeAttributes(edges)}>
+ */
+export const scrollFadeClass = styles.root
+
+type ScrollFadeAttributes = {
+  'data-scroll-fade-top'?: true
+  'data-scroll-fade-bottom'?: true
+}
+
+/** Data attributes that switch {@link scrollFadeClass}'s edges on. */
+export function scrollFadeAttributes(edges: ScrollEdges): ScrollFadeAttributes {
+  return {
+    'data-scroll-fade-top': edges.top || undefined,
+    'data-scroll-fade-bottom': edges.bottom || undefined,
+  }
+}
diff --git a/packages/emcn/src/hooks/use-scroll-edges.test.tsx b/packages/emcn/src/hooks/use-scroll-edges.test.tsx
new file mode 100644
index 00000000000..587a0e27f1e
--- /dev/null
+++ b/packages/emcn/src/hooks/use-scroll-edges.test.tsx
@@ -0,0 +1,131 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act, useRef, useState } from 'react'
+import { scrollFadeAttributes, useScrollEdges } from '@sim/emcn'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+interface ScrollMetrics {
+  scrollTop: number
+  scrollHeight: number
+  clientHeight: number
+}
+
+/** jsdom lays nothing out, so the region's metrics are stubbed onto the node. */
+function setMetrics(node: HTMLElement, metrics: ScrollMetrics) {
+  for (const [key, value] of Object.entries(metrics)) {
+    Object.defineProperty(node, key, { configurable: true, value })
+  }
+}
+
+let host: HTMLDivElement
+let root: Root
+let region: HTMLDivElement | null = null
+let enabled = true
+
+function Region() {
+  const ref = useRef<HTMLDivElement>(null)
+  const edges = useScrollEdges(ref, { enabled })
+  return (
+    <div
+      ref={(node) => {
+        ref.current = node
+        region = node
+      }}
+      {...scrollFadeAttributes(edges)}
+    />
+  )
+}
+
+beforeEach(() => {
+  ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+  vi.stubGlobal(
+    'ResizeObserver',
+    class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    }
+  )
+  enabled = true
+  host = document.createElement('div')
+  document.body.appendChild(host)
+  root = createRoot(host)
+})
+
+afterEach(() => {
+  act(() => root.unmount())
+  host.remove()
+  region = null
+  vi.unstubAllGlobals()
+})
+
+function mountWith(metrics: ScrollMetrics) {
+  act(() => {
+    root.render(<Region />)
+  })
+  if (!region) throw new Error('region did not mount')
+  setMetrics(region, metrics)
+  act(() => {
+    region?.dispatchEvent(new Event('scroll'))
+  })
+}
+
+describe('useScrollEdges', () => {
+  it('reports no edge for a region whose content fits', () => {
+    mountWith({ scrollTop: 0, scrollHeight: 100, clientHeight: 100 })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(false)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(false)
+  })
+
+  it('reports only the bottom edge for an overflowing region at its top', () => {
+    mountWith({ scrollTop: 0, scrollHeight: 300, clientHeight: 100 })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(false)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(true)
+  })
+
+  it('reports both edges mid-scroll and only the top edge at the end', () => {
+    mountWith({ scrollTop: 100, scrollHeight: 300, clientHeight: 100 })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(true)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(true)
+
+    setMetrics(region as HTMLElement, { scrollTop: 200, scrollHeight: 300, clientHeight: 100 })
+    act(() => {
+      region?.dispatchEvent(new Event('scroll'))
+    })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(true)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(false)
+  })
+
+  it('treats a sub-pixel remainder as sitting at the edge', () => {
+    mountWith({ scrollTop: 0.5, scrollHeight: 200.4, clientHeight: 200 })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(false)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(false)
+  })
+
+  it('accepts the element itself, for regions that mount after their owner', () => {
+    function LateRegion() {
+      const [node, setNode] = useState<HTMLDivElement | null>(null)
+      const edges = useScrollEdges(node)
+      return <div ref={setNode} {...scrollFadeAttributes(edges)} />
+    }
+    act(() => {
+      root.render(<LateRegion />)
+    })
+    const element = host.querySelector<HTMLDivElement>('div')
+    if (!element) throw new Error('region did not mount')
+    setMetrics(element, { scrollTop: 0, scrollHeight: 300, clientHeight: 100 })
+    act(() => {
+      element.dispatchEvent(new Event('scroll'))
+    })
+    expect(element.hasAttribute('data-scroll-fade-bottom')).toBe(true)
+  })
+
+  it('reads no edge while disabled', () => {
+    enabled = false
+    mountWith({ scrollTop: 100, scrollHeight: 300, clientHeight: 100 })
+    expect(region?.hasAttribute('data-scroll-fade-top')).toBe(false)
+    expect(region?.hasAttribute('data-scroll-fade-bottom')).toBe(false)
+  })
+})
diff --git a/packages/emcn/src/hooks/use-scroll-edges.ts b/packages/emcn/src/hooks/use-scroll-edges.ts
new file mode 100644
index 00000000000..03d55dd4a60
--- /dev/null
+++ b/packages/emcn/src/hooks/use-scroll-edges.ts
@@ -0,0 +1,74 @@
+import { type RefObject, useEffect, useState } from 'react'
+import type { ScrollEdges } from '../components/scroll-fade/scroll-fade'
+
+/**
+ * Sub-pixel scroll positions and rounding leave `scrollTop` or the remaining
+ * distance fractionally above zero at rest; anything within this is "at the edge".
+ */
+const EDGE_TOLERANCE_PX = 1
+
+const AT_REST: ScrollEdges = { top: false, bottom: false }
+
+interface UseScrollEdgesOptions {
+  /**
+   * The element whose size changes when the region's content changes, when it is
+   * not the region's first child. Watched alongside the region so the edges
+   * update as rows arrive or leave, not only on scroll.
+   */
+  contentRef?: RefObject<HTMLElement | null>
+  /** Set false while the region is not on screen; both edges then read false. */
+  enabled?: boolean
+}
+
+/**
+ * Whether a scroll region hides content beyond its top or bottom edge. Tracks
+ * scrolling and resizes of the region and its content, so the answer stays right
+ * as rows arrive, leave, or the viewport changes.
+ *
+ * Drives both the edge fade ({@link scrollFadeClass}) and any divider that should
+ * appear only once rows are hidden behind it.
+ *
+ * `target` is the region as a ref, or as the element itself. Pass the element
+ * (held in state from a callback ref) when the region mounts later than the
+ * component calling the hook — a Radix menu's content, say, lands one commit after
+ * the menu opens, by which time an effect keyed on a ref has already run and found
+ * it empty. An element in the dependency list re-runs the effect on attach.
+ */
+export function useScrollEdges(
+  target: RefObject<HTMLElement | null> | HTMLElement | null,
+  { contentRef, enabled = true }: UseScrollEdgesOptions = {}
+): ScrollEdges {
+  const [edges, setEdges] = useState<ScrollEdges>(AT_REST)
+
+  useEffect(() => {
+    const container = target instanceof HTMLElement ? target : target?.current
+    if (!enabled || !container) {
+      setEdges(AT_REST)
+      return
+    }
+
+    const update = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container
+      const top = scrollTop > EDGE_TOLERANCE_PX
+      const bottom = scrollHeight - clientHeight - scrollTop > EDGE_TOLERANCE_PX
+      setEdges((current) =>
+        current.top === top && current.bottom === bottom ? current : { top, bottom }
+      )
+    }
+
+    update()
+    container.addEventListener('scroll', update, { passive: true })
+
+    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update)
+    observer?.observe(container)
+    const content = contentRef?.current ?? container.firstElementChild
+    if (content) observer?.observe(content)
+
+    return () => {
+      container.removeEventListener('scroll', update)
+      observer?.disconnect()
+    }
+  }, [target, contentRef, enabled])
+
+  return edges
+}
diff --git a/packages/emcn/src/icons/index.ts b/packages/emcn/src/icons/index.ts
index 1b7a2327500..feb40286de6 100644
--- a/packages/emcn/src/icons/index.ts
+++ b/packages/emcn/src/icons/index.ts
@@ -173,6 +173,7 @@ export { Webhook } from './webhook'
 export { Wordmark } from './wordmark'
 export { Workflow } from './workflow'
 export { WorkflowX } from './workflow-x'
+export { Workspaces } from './workspaces'
 export { Wrap } from './wrap'
 export { Wrench } from './wrench'
 export { X } from './x'
diff --git a/packages/emcn/src/icons/workspaces.tsx b/packages/emcn/src/icons/workspaces.tsx
new file mode 100644
index 00000000000..c4699136f42
--- /dev/null
+++ b/packages/emcn/src/icons/workspaces.tsx
@@ -0,0 +1,30 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Workspaces icon component - a stack of spaces: one rounded tile in front with
+ * the top edges of two more receding behind it. Fills the same 19×18 footprint as
+ * Table and Database (viewBox -1 -2 24 24, strokeWidth 1.55, round caps) with
+ * their 2.5 corner radius, so it carries matching visual mass on the rail.
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Workspaces(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='24'
+      height='24'
+      viewBox='-1 -2 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.55'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
+      {...props}
+    >
+      <rect x='0.75' y='6.75' width='19' height='12' rx='2.5' />
+      <path d='M3.75 3.75H16.75' />
+      <path d='M6.75 0.75H13.75' />
+    </svg>
+  )
+}
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index 41bff34627c..32d34de4450 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -16,6 +16,12 @@ export {
   calculateGutterWidth,
   getCodeEditorProps,
 } from './components/code/code'
+export {
+  SCROLL_FADE_BAND_PX,
+  type ScrollEdges,
+  scrollFadeAttributes,
+  scrollFadeClass,
+} from './components/scroll-fade/scroll-fade'
 /**
  * `Table` exists in BOTH `./components` (data-table element) and `./icons`
  * (glyph). This explicit re-export resolves the ambiguity to the COMPONENT —
@@ -39,6 +45,7 @@ export {
   writeTextToClipboard,
 } from './hooks/use-copy-to-clipboard'
 export { usePrefersReducedMotion } from './hooks/use-prefers-reduced-motion'
+export { useScrollEdges } from './hooks/use-scroll-edges'
 export * from './icons'
 export { cn } from './lib/cn'
 export { handleKeyboardActivation, isKeyboardActivation } from './lib/keyboard'

From 4f1e635a5c01ca5acbc7332434eaa6bf8eff9c8b Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 7 Sep 2026 18:11:44 +0200
Subject: [PATCH 2/2] feat(org): home composer, page shell, and completion blue

Organization home gets the workspace chat's empty state, copied rather
than imported: the greeting, the composer with its resource, attachment,
skill, voice, and send controls, and a "Get started" list in the
suggested-actions chrome. Each step carries a ring that fills with a
check once done; "Create a workspace" reads the organization's real
workspace list, the rest wait on their signals.

Integrations, Skills, and Workspaces render through one OrganizationPage
shell: the workspace's top header bar, a fixed title/description/tabs/
search/action header in the home reading column, and a scroll region
with the sidebar's edge fade and padding. The active tab and the search
text live in the URL (`tab`, `q`) and are read back through
useOrganizationPageFilters, so a tab switch keeps the criteria and the
open field. Search expands leftward into a ChipInput with the canonical
quiet icon close button.

The emcn scroll-edge fade gains a horizontal axis (useScrollEdges
`axis: 'x'`, scrollFadeXClass) so the tab row scrolls under a fade when
it meets the controls beside it. `--brand-blue` joins the brand tokens
as the one blue for progress and completion states.
---
 .claude/rules/emcn-components.md              |   2 +-
 .claude/rules/sim-styling.md                  |   2 +-
 apps/sim/app/_styles/globals.css              |   5 +
 .../components/organization-page/index.ts     |   2 +
 .../organization-page/organization-page.tsx   | 173 ++++++++++++++++++
 .../organization-page/search-params.ts        |  22 +++
 .../use-organization-page-filters.ts          |  21 +++
 .../home/components/composer/composer.tsx     | 106 +++++++++++
 .../home/components/composer/index.ts         |   1 +
 .../components/get-started/get-started.tsx    | 167 +++++++++++++++++
 .../home/components/get-started/index.ts      |   1 +
 .../home/organization-home.tsx                |  33 ++++
 apps/sim/app/o/[organizationId]/home/page.tsx |   8 +-
 .../o/[organizationId]/integrations/page.tsx  |  14 +-
 .../app/o/[organizationId]/skills/page.tsx    |   3 +-
 .../app/o/[organizationId]/skills/skills.tsx  |  31 ++++
 .../o/[organizationId]/workspaces/page.tsx    |  18 +-
 .../scroll-fade/scroll-fade.module.css        |  36 ++++
 .../src/components/scroll-fade/scroll-fade.ts |  26 ++-
 .../emcn/src/hooks/use-scroll-edges.test.tsx  |  26 +++
 packages/emcn/src/hooks/use-scroll-edges.ts   |  54 ++++--
 packages/emcn/src/index.ts                    |   2 +
 22 files changed, 725 insertions(+), 28 deletions(-)
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-page/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-page/search-params.ts
 create mode 100644 apps/sim/app/o/[organizationId]/components/organization-page/use-organization-page-filters.ts
 create mode 100644 apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/home/components/composer/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/home/components/get-started/get-started.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/home/components/get-started/index.ts
 create mode 100644 apps/sim/app/o/[organizationId]/home/organization-home.tsx
 create mode 100644 apps/sim/app/o/[organizationId]/skills/skills.tsx

diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index b201005aae2..50e7684363f 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -32,7 +32,7 @@ The menu surface intentionally diverges from the pill: `dropdown-menu.tsx` items
 - **`ChipDatePicker`** — chip-styled date field.
 - **`ChipTimePicker`** — minute-granular time sibling of `ChipDatePicker`, a `ChipInput` that leniently parses typed input (`9:47`, `947`, `2:05pm`, `14:30`), commits on Enter/blur, and re-renders the canonical `9:47 AM` label.
 - **`DropdownMenu`** — the canonical context/action menu (Radix-backed). Not a chip, but the standard menu for command/action lists; reach for it instead of a hand-rolled popover. Its surface intentionally diverges from the chip pill (`text-small`, `gap-2`) — keep them distinct. For a pill that opens a value picker, use `ChipDropdown`/`ChipSelect` instead.
-- **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
+- **`useScrollEdges` + `scrollFadeClass` / `scrollFadeAttributes`** — the canonical scroll-region edge treatment. The hook reports which edges hide content (tracking scroll and resizes; pass the element itself, held in state, when the region mounts after its owner, e.g. inside a Radix portal); the class and attributes fade a fixed 12px band at an active edge only, so a list that fits or sits at its top is never fogged. A floating control over the top edge sets `--scroll-fade-inset` to its height. A region that scrolls sideways (a tab row, a chip strip) uses `useScrollEdges(ref, { axis: 'x' })` with `scrollFadeXClass`; the attributes helper is shared. Any divider beside the region belongs to the neighboring block (`border-b` above, `border-t` below), never to the masked element, and shows only while that edge is active. Never hand-roll a `mask-image` gradient for a scroll region.
 - **`OverflowText`** — the canonical single-line overflow treatment for read-only human labels and titles. It owns `min-w-0`, fade-only clipping (never an ellipsis), the conditional 18px edge mask, and the full-value floating tooltip; consumers pass only layout/typography through `className`. `overflowTextClipClass` and `overflowTextFadeClass` are the complete base/faded treatments for the rare component that must own measurement itself; never pair either with `truncate`, `text-ellipsis`, or hover-time mask removal. Use `DropdownMenuItemLabel` for a menu label beside icons, checks, or actions. A non-editable `Combobox` passes the full visual value through `overlayLabel`; the combobox owns the visual overlay's fade and keeps its one accessible tooltip on the interactive layer. Keep ordinary `truncate` only for editable values, code/log/path content, dense or virtualized grids, and rich composite content that cannot supply a plain tooltip label. Multiline copy uses an intentional `line-clamp-*` treatment instead.
 
 ## Modal keyboard defaults
diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md
index fc692a1e618..61960c9eb5c 100644
--- a/.claude/rules/sim-styling.md
+++ b/.claude/rules/sim-styling.md
@@ -74,7 +74,7 @@ Headings inherit their weight. Tailwind preflight resets `h1`–`h6` to `font-we
 
 ## Color Tokens
 
-Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text-icon`; neutral borders and dividers `--border` (`--border-1` and `--border-muted` are legacy aliases resolving to it; `--divider` is retired); surfaces `--surface-5` (light) / `--surface-4` (dark); active row `--surface-active`; error `--text-error`. No focus rings on chip surfaces.
+Value text `--text-body`; muted/placeholder/labels `--text-muted`; icons `--text-icon`; progress and completion (a checked step, a done state) `--brand-blue` — `--selection` stays the interactive highlight; neutral borders and dividers `--border` (`--border-1` and `--border-muted` are legacy aliases resolving to it; `--divider` is retired); surfaces `--surface-5` (light) / `--surface-4` (dark); active row `--surface-active`; error `--text-error`. No focus rings on chip surfaces.
 
 ### Line weight
 
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 21d5ba0d5cc..c99b6a04651 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -725,6 +725,9 @@ html[data-sim-desktop-title-bar="inset"]
     --brand-secondary: #33b4ff;
     --brand-accent: #33c482;
     --brand-accent-hover: #2dac72;
+    /* Progress and completion — the checked step, the done state. Deeper and
+       quieter than --selection, which stays the interactive highlight. */
+    --brand-blue: #3b6fe0;
     --selection: #1a5cf6;
     --selection-muted: #1a5cf647;
     --warning: #ea580c;
@@ -886,6 +889,8 @@ html[data-sim-desktop-title-bar="inset"]
     --brand-secondary: #33b4ff;
     --brand-accent: #33c482;
     --brand-accent-hover: #2dac72;
+    /* Lifted for contrast on dark surfaces, the same step --selection takes. */
+    --brand-blue: #5b8def;
     --selection: #4b83f7;
     --selection-muted: #4b83f759;
     --warning: #ff6600;
diff --git a/apps/sim/app/o/[organizationId]/components/organization-page/index.ts b/apps/sim/app/o/[organizationId]/components/organization-page/index.ts
new file mode 100644
index 00000000000..e8d14d3a283
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-page/index.ts
@@ -0,0 +1,2 @@
+export { OrganizationPage, type OrganizationPageTab } from './organization-page'
+export { useOrganizationPageFilters } from './use-organization-page-filters'
diff --git a/apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx b/apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx
new file mode 100644
index 00000000000..26ddbba0bc3
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx
@@ -0,0 +1,173 @@
+'use client'
+
+import { type ReactNode, useRef, useState } from 'react'
+import {
+  Button,
+  Chip,
+  ChipInput,
+  cn,
+  scrollFadeAttributes,
+  scrollFadeClass,
+  scrollFadeXClass,
+  useScrollEdges,
+} from '@sim/emcn'
+import { Search, X } from '@sim/emcn/icons'
+import { HEADER_ACTION_CLUSTER, PAGE_HEADER_BAR } from '@/components/page-header-bar'
+import { useOrganizationPageFilters } from '@/app/o/[organizationId]/components/organization-page/use-organization-page-filters'
+import {
+  SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+  SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
+
+/** The home surface's reading column, so every organization page shares its width. */
+const COLUMN_CLASS = 'mx-auto w-full max-w-chat px-6'
+
+export interface OrganizationPageTab {
+  id: string
+  label: string
+}
+
+interface OrganizationPageProps {
+  title: string
+  description?: string
+  /** Header tabs; the first is the default. Omit for a page with one view. */
+  tabs?: readonly OrganizationPageTab[]
+  /** Label of the page's primary action chip. Omit for a page without one. */
+  action?: string
+  children?: ReactNode
+}
+
+/**
+ * The shell every organization page renders into: the top bar the workspace pages
+ * wear, then a fixed page header — title, description, tabs, search, and the
+ * optional action — over a scroll region that fades at both edges the way the
+ * sidebar does. Pages supply their content and logic; nothing else.
+ *
+ * The shell paints at once and never waits on data: a page renders each piece —
+ * a tab, a list, a count — the moment it is known and nothing before, with no
+ * skeleton standing in for it. Pass `tabs` only once they are known; the row
+ * simply gains them.
+ */
+export function OrganizationPage({
+  title,
+  description,
+  tabs,
+  action,
+  children,
+}: OrganizationPageProps) {
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+  const scrollContentRef = useRef<HTMLDivElement>(null)
+  const scrollEdges = useScrollEdges(scrollContainerRef, { contentRef: scrollContentRef })
+  const tabsRef = useRef<HTMLDivElement>(null)
+  const tabEdges = useScrollEdges(tabsRef, { axis: 'x' })
+
+  const { tab, search, setTab, setSearch } = useOrganizationPageFilters()
+  const defaultTab = tabs?.[0]?.id
+  const activeTab = tab ?? defaultTab
+
+  /**
+   * The field stays open while it holds text, across tab switches and reloads,
+   * since the text lives in the URL; this only remembers an empty field the
+   * viewer opened and has not dismissed.
+   */
+  const [searchOpened, setSearchOpened] = useState(false)
+  const searchOpen = searchOpened || search.length > 0
+
+  const closeSearch = () => {
+    setSearch('')
+    setSearchOpened(false)
+  }
+
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      {/* Reserved even while empty so the page header sits where the workspace's does. */}
+      <div className={PAGE_HEADER_BAR}>
+        <div className={HEADER_ACTION_CLUSTER} />
+      </div>
+
+      <div className={cn(COLUMN_CLASS, SIDEBAR_DIVIDER_PAD_ABOVE_CLASS, 'flex shrink-0 flex-col')}>
+        <div className='flex flex-col gap-1 pt-8'>
+          <h1 className='text-[18px] text-[var(--text-primary)]'>{title}</h1>
+          {description && <p className='text-[var(--text-muted)] text-small'>{description}</p>}
+        </div>
+        <div className='mt-4 flex items-center justify-between gap-2'>
+          {/* The row yields to the controls beside it and scrolls sideways under a fade
+              once it can no longer fit; the scrollbar itself never shows. */}
+          <div
+            ref={tabsRef}
+            className={cn(
+              scrollFadeXClass,
+              'flex min-w-0 flex-1 items-center gap-[1px] overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+            )}
+            {...scrollFadeAttributes(tabEdges)}
+          >
+            {tabs?.map((item) => {
+              const active = item.id === activeTab
+              return (
+                <Chip
+                  key={item.id}
+                  shape='round'
+                  active={active}
+                  aria-pressed={active}
+                  onClick={() => setTab(item.id === defaultTab ? null : item.id)}
+                  className='min-w-[44px] shrink-0 text-center'
+                >
+                  {item.label}
+                </Chip>
+              )
+            })}
+          </div>
+          <div className='flex shrink-0 items-center gap-1.5'>
+            {searchOpen ? (
+              <ChipInput
+                autoFocus
+                icon={Search}
+                value={search}
+                placeholder='Search'
+                aria-label='Search'
+                spellCheck={false}
+                autoComplete='off'
+                /* Grows leftward from the chip's spot, to this and no further. */
+                className='w-[240px]'
+                onChange={(event) => setSearch(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Escape') closeSearch()
+                }}
+                endAdornment={
+                  <Button
+                    type='button'
+                    variant='quiet'
+                    size='icon'
+                    className='-mr-1 shrink-0'
+                    aria-label='Close search'
+                    onClick={closeSearch}
+                  >
+                    <X className='size-[13px]' />
+                  </Button>
+                }
+              />
+            ) : (
+              <Chip leftIcon={Search} aria-label='Search' onClick={() => setSearchOpened(true)} />
+            )}
+            {action && <Chip variant='primary'>{action}</Chip>}
+          </div>
+        </div>
+      </div>
+
+      <div
+        ref={scrollContainerRef}
+        className={cn(
+          SIDEBAR_DIVIDER_PAD_BELOW_CLASS,
+          SIDEBAR_DIVIDER_PAD_ABOVE_CLASS,
+          scrollFadeClass,
+          'min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'
+        )}
+        {...scrollFadeAttributes(scrollEdges)}
+      >
+        <div ref={scrollContentRef} className={COLUMN_CLASS}>
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/components/organization-page/search-params.ts b/apps/sim/app/o/[organizationId]/components/organization-page/search-params.ts
new file mode 100644
index 00000000000..2be9ae79290
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-page/search-params.ts
@@ -0,0 +1,22 @@
+import { parseAsString } from 'nuqs/server'
+
+/**
+ * Co-located, typed URL query-param definitions for an organization page's
+ * header. Both are view state the page's content filters by, so a link carries
+ * them and a tab switch keeps them.
+ *
+ * - `tab` is the active header tab. Absent, the page shows its first tab, so the
+ *   key only appears once the viewer leaves it.
+ * - `q` is the search field's text, written raw (consumers trim on read) and
+ *   debounced on the way to the URL by `useDebouncedSearchSetter`.
+ */
+export const organizationPageParsers = {
+  tab: parseAsString,
+  q: parseAsString.withDefault(''),
+} as const
+
+/** Tabs and search are filter-like view changes, not navigation: replace, and clear at the default. */
+export const organizationPageUrlKeys = {
+  history: 'replace',
+  clearOnDefault: true,
+} as const
diff --git a/apps/sim/app/o/[organizationId]/components/organization-page/use-organization-page-filters.ts b/apps/sim/app/o/[organizationId]/components/organization-page/use-organization-page-filters.ts
new file mode 100644
index 00000000000..371ae5527af
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/components/organization-page/use-organization-page-filters.ts
@@ -0,0 +1,21 @@
+import { useCallback } from 'react'
+import { useQueryStates } from 'nuqs'
+import {
+  organizationPageParsers,
+  organizationPageUrlKeys,
+} from '@/app/o/[organizationId]/components/organization-page/search-params'
+import { useDebouncedSearchSetter } from '@/hooks/use-debounced-search-setter'
+
+/**
+ * The header filters of the organization page the caller sits on. The shell
+ * drives them; a page's content reads `tab` and `search` to filter its list, so
+ * the same criteria apply whichever tab is showing.
+ */
+export function useOrganizationPageFilters() {
+  const [{ tab, q }, setFilters] = useQueryStates(organizationPageParsers, organizationPageUrlKeys)
+
+  const setTab = useCallback((next: string | null) => setFilters({ tab: next }), [setFilters])
+  const setSearch = useDebouncedSearchSetter((value, options) => setFilters({ q: value }, options))
+
+  return { tab, search: q, setTab, setSearch }
+}
diff --git a/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
new file mode 100644
index 00000000000..88bee5d3e57
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/components/composer/composer.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+import { Button, cn, Tooltip } from '@sim/emcn'
+import { ArrowUp, Mic, Paperclip, Plus, Slash } from '@sim/emcn/icons'
+
+const TOOL_BUTTON_CLASS = 'size-[28px] rounded-full p-0 hover-hover:bg-[var(--surface-hover)]'
+const TOOL_ICON_CLASS = 'size-[16px] text-[var(--text-icon)]'
+
+const SEND_BUTTON_BASE = 'size-[28px] rounded-full border-0 p-0 transition-colors'
+const SEND_BUTTON_ACTIVE =
+  'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]'
+const SEND_BUTTON_DISABLED = 'bg-[#808080] dark:bg-[#808080]'
+
+/**
+ * The organization home composer. Mirrors the workspace chat input's chrome:
+ * the framed field, the resource, attachment, and skill triggers on the left,
+ * and voice input plus send on the right.
+ */
+export function Composer() {
+  const [draft, setDraft] = useState('')
+  const canSubmit = draft.trim().length > 0
+
+  return (
+    <div className='relative z-10 mx-auto w-full max-w-chat cursor-text rounded-2xl border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 shadow-ambient dark:bg-[var(--surface-4)]'>
+      <div className='relative max-h-[200px] min-h-[56px] overflow-y-auto overflow-x-hidden [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+        <textarea
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          placeholder='Ask Sim to...'
+          aria-label='Message'
+          rows={1}
+          className='field-sizing-content m-0 box-border min-h-[24px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[14px] text-[var(--text-primary)] leading-[24px] tracking-[-0.015em] outline-hidden [overflow-wrap:anywhere] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+        />
+      </div>
+
+      <div className='flex items-center justify-between'>
+        <div className='flex items-center gap-1'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label='Add resources'
+                className={TOOL_BUTTON_CLASS}
+              >
+                <Plus className={TOOL_ICON_CLASS} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Add resources</Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label='Attach file'
+                className={TOOL_BUTTON_CLASS}
+              >
+                <Paperclip className={TOOL_ICON_CLASS} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Attach file</Tooltip.Content>
+          </Tooltip.Root>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label='Skills'
+                className={TOOL_BUTTON_CLASS}
+              >
+                <Slash className={TOOL_ICON_CLASS} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Skills</Tooltip.Content>
+          </Tooltip.Root>
+        </div>
+        <div className='flex items-center gap-1.5'>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                type='button'
+                variant='ghost'
+                aria-label='Voice input'
+                className={TOOL_BUTTON_CLASS}
+              >
+                <Mic className={TOOL_ICON_CLASS} />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>Voice input</Tooltip.Content>
+          </Tooltip.Root>
+          <Button
+            type='button'
+            variant='ghost'
+            disabled={!canSubmit}
+            aria-label='Send'
+            className={cn(SEND_BUTTON_BASE, canSubmit ? SEND_BUTTON_ACTIVE : SEND_BUTTON_DISABLED)}
+          >
+            <ArrowUp className='block size-[16px] text-white dark:text-black' />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/home/components/composer/index.ts b/apps/sim/app/o/[organizationId]/home/components/composer/index.ts
new file mode 100644
index 00000000000..c99ba66e037
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/components/composer/index.ts
@@ -0,0 +1 @@
+export { Composer } from './composer'
diff --git a/apps/sim/app/o/[organizationId]/home/components/get-started/get-started.tsx b/apps/sim/app/o/[organizationId]/home/components/get-started/get-started.tsx
new file mode 100644
index 00000000000..b8bbcdc5fca
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/components/get-started/get-started.tsx
@@ -0,0 +1,167 @@
+'use client'
+
+import { useState } from 'react'
+import { cn, Expandable, ExpandableContent } from '@sim/emcn'
+import { ArrowRight, ChevronDown } from '@sim/emcn/icons'
+import Link from 'next/link'
+import { organizationRoutes } from '@/lib/navigation/paths'
+import { useOrganizationWorkspaces } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
+import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+
+type OrganizationRoute = keyof Omit<ReturnType<typeof organizationRoutes>, 'root' | 'chat'>
+
+type StepId = 'connect-integration' | 'create-skill' | 'create-workspace' | 'connect-sim-search'
+
+interface GetStartedStep {
+  id: StepId
+  label: string
+  /** Where the row leads. Steps without a route render as plain actions. */
+  route?: OrganizationRoute
+}
+
+/** The onboarding steps, in the order a new organization works through them. */
+const STEPS: readonly GetStartedStep[] = [
+  { id: 'connect-integration', label: 'Connect an integration', route: 'integrations' },
+  { id: 'create-skill', label: 'Create a skill', route: 'skills' },
+  { id: 'create-workspace', label: 'Create a workspace', route: 'workspaces' },
+  { id: 'connect-sim-search', label: 'Connect Sim Search MCP' },
+]
+
+const ROW_CLASS =
+  'flex items-center gap-2 border-[var(--border)] px-2 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]'
+
+/**
+ * A step's leading mark: an empty ring until the step is done, then the
+ * completion blue filled behind a check. The check is drawn here at the ring's
+ * own scale rather than with the 24-unit house icon — scaled to 10px, that
+ * stroke thins to a hair and its optical center drifts above the box. The svg
+ * fills the ring's 14px content box (16px less the 1px border on each side), so
+ * the path's center is the ring's center, and its stroke lands at ~1px — the
+ * weight the house icons render at 16px.
+ */
+function StepMark({ complete }: { complete: boolean }) {
+  return (
+    <span
+      aria-hidden='true'
+      className={cn(
+        'flex size-[16px] shrink-0 items-center justify-center rounded-full border',
+        complete ? 'border-[var(--brand-blue)] bg-[var(--brand-blue)]' : 'border-[var(--border)]'
+      )}
+    >
+      {complete && (
+        <svg
+          viewBox='0 0 16 16'
+          fill='none'
+          stroke='currentColor'
+          strokeWidth='1.2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+          className='size-[14px] text-white'
+        >
+          <path d='M4.5 8.1L7 10.6L11.5 5.4' />
+        </svg>
+      )}
+    </span>
+  )
+}
+
+/**
+ * The organization home's onboarding list under the composer. Same chrome as
+ * the workspace home's suggested actions: a hover-revealed disclosure header
+ * over hairline-separated rows.
+ */
+export function GetStarted() {
+  const { organization } = useOrganizationContext()
+  const routes = organizationRoutes(organization.id)
+  const { workspaces } = useOrganizationWorkspaces(organization.id)
+
+  /** Which steps the organization has already taken. */
+  const completed: Record<StepId, boolean> = {
+    'connect-integration': false,
+    'create-skill': false,
+    'create-workspace': workspaces.length > 0,
+    'connect-sim-search': false,
+  }
+
+  const [expanded, setExpanded] = useState(true)
+  /**
+   * Collapsible animations are enabled only after the first user toggle, so
+   * the initially-open, server-rendered panel appears at full height on first
+   * paint instead of replaying the open animation and shifting the input
+   * above it.
+   */
+  const [animationsEnabled, setAnimationsEnabled] = useState(false)
+
+  const handleToggleExpanded = () => {
+    setAnimationsEnabled(true)
+    setExpanded((prev) => !prev)
+  }
+
+  return (
+    <div className='group/suggested mx-auto mt-7 w-full max-w-chat'>
+      {/* Full width so the whole line toggles, not just the label and chevron. */}
+      <button
+        type='button'
+        onClick={handleToggleExpanded}
+        aria-expanded={expanded}
+        className='group/toggle flex w-full cursor-pointer items-center gap-2'
+      >
+        <span className='text-[var(--text-muted)] text-caption'>Get started</span>
+        {/*
+         * Revealed by hovering anywhere in the section — the group sits on the
+         * section wrapper rather than this row, so the rows below arm it just as
+         * the header does. Focus is keyed off the toggle instead, the only element
+         * here that can hold it, and matters because globals clear focus outlines.
+         * One transition covers the fade and the rotation so the two cannot drift
+         * apart. Mirrors the sidebar's section headers.
+         */}
+        <ChevronDown
+          className={cn(
+            'size-[14px] shrink-0 text-[var(--text-icon)] opacity-0 transition-[opacity,transform] duration-150',
+            'group-hover/suggested:opacity-100 group-focus-visible/toggle:opacity-100',
+            !expanded && '-rotate-90'
+          )}
+        />
+      </button>
+      <Expandable expanded={expanded}>
+        <ExpandableContent className={cn(!animationsEnabled && 'animate-none!')}>
+          {/* 6px, matching a sidebar section header to its first item — both headers
+              are an 18px box around 12px text, so equal padding reads as equal
+              distance. Padding an inner wrapper rather than the animated element:
+              `collapsible-up`/`-down` interpolate height alone, so a margin here
+              would hold its full value through the close and then vanish on unmount,
+              snapping the content below up. */}
+          <div className='flex flex-col pt-1.5'>
+            {STEPS.map((step, i) => {
+              const complete = completed[step.id]
+              const className = cn(ROW_CLASS, i > 0 && 'border-t')
+              const content = (
+                <>
+                  <StepMark complete={complete} />
+                  <span
+                    className={cn(
+                      'flex-1 truncate text-sm',
+                      complete ? 'text-[var(--brand-blue)]' : 'text-[var(--text-body)]'
+                    )}
+                  >
+                    {step.label}
+                  </span>
+                  <ArrowRight className='size-[16px] shrink-0 text-[var(--text-icon)]' />
+                </>
+              )
+              return step.route ? (
+                <Link key={step.id} href={routes[step.route]} className={className}>
+                  {content}
+                </Link>
+              ) : (
+                <button key={step.id} type='button' className={className}>
+                  {content}
+                </button>
+              )
+            })}
+          </div>
+        </ExpandableContent>
+      </Expandable>
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/home/components/get-started/index.ts b/apps/sim/app/o/[organizationId]/home/components/get-started/index.ts
new file mode 100644
index 00000000000..105c611b0ac
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/components/get-started/index.ts
@@ -0,0 +1 @@
+export { GetStarted } from './get-started'
diff --git a/apps/sim/app/o/[organizationId]/home/organization-home.tsx b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
new file mode 100644
index 00000000000..9440fcba415
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/home/organization-home.tsx
@@ -0,0 +1,33 @@
+import { Composer } from '@/app/o/[organizationId]/home/components/composer'
+import { GetStarted } from '@/app/o/[organizationId]/home/components/get-started'
+
+interface OrganizationHomeProps {
+  userName?: string
+}
+
+/**
+ * The organization home: a greeting over the composer, centered the same way
+ * the workspace chat's empty state is.
+ */
+export function OrganizationHome({ userName }: OrganizationHomeProps) {
+  const firstName = userName?.split(' ')[0] ?? ''
+
+  return (
+    <div className='relative flex h-full bg-[var(--bg)]'>
+      <div className='h-full flex-1 overflow-y-auto [scrollbar-gutter:stable_both-edges]'>
+        <div className='flex min-h-full flex-col items-center justify-center px-6 pt-[2vh] pb-[22vh]'>
+          <h1 className='mb-7 max-w-chat text-balance font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+            What should we get done{firstName ? `, ${firstName}` : ''}?
+          </h1>
+          <div className='relative w-full max-w-chat'>
+            <Composer />
+            {/* Anchored out of flow so expanding/collapsing never shifts the centered input */}
+            <div className='absolute inset-x-0 top-full'>
+              <GetStarted />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/home/page.tsx b/apps/sim/app/o/[organizationId]/home/page.tsx
index 2511934ef46..638316c73e7 100644
--- a/apps/sim/app/o/[organizationId]/home/page.tsx
+++ b/apps/sim/app/o/[organizationId]/home/page.tsx
@@ -1,9 +1,13 @@
 import type { Metadata } from 'next'
+import { getSession } from '@/lib/auth'
+import { OrganizationHome } from './organization-home'
 
 export const metadata: Metadata = {
   title: 'Home',
 }
 
-export default function OrganizationHomePage() {
-  return null
+export default async function OrganizationHomePage() {
+  const session = await getSession()
+
+  return <OrganizationHome userName={session?.user?.name} />
 }
diff --git a/apps/sim/app/o/[organizationId]/integrations/page.tsx b/apps/sim/app/o/[organizationId]/integrations/page.tsx
index 18f11e80798..9995d267e4e 100644
--- a/apps/sim/app/o/[organizationId]/integrations/page.tsx
+++ b/apps/sim/app/o/[organizationId]/integrations/page.tsx
@@ -1,9 +1,21 @@
 import type { Metadata } from 'next'
+import { OrganizationPage } from '@/app/o/[organizationId]/components/organization-page'
 
 export const metadata: Metadata = {
   title: 'Integrations',
 }
 
+const TABS = [
+  { id: 'all', label: 'All' },
+  { id: 'mine', label: 'Mine' },
+] as const
+
 export default function OrganizationIntegrationsPage() {
-  return null
+  return (
+    <OrganizationPage
+      title='Integrations'
+      description='Connect your tools for Sim Search'
+      tabs={TABS}
+    />
+  )
 }
diff --git a/apps/sim/app/o/[organizationId]/skills/page.tsx b/apps/sim/app/o/[organizationId]/skills/page.tsx
index e5941b2a62f..9cb21a6dac8 100644
--- a/apps/sim/app/o/[organizationId]/skills/page.tsx
+++ b/apps/sim/app/o/[organizationId]/skills/page.tsx
@@ -1,9 +1,10 @@
 import type { Metadata } from 'next'
+import { Skills } from './skills'
 
 export const metadata: Metadata = {
   title: 'Skills',
 }
 
 export default function OrganizationSkillsPage() {
-  return null
+  return <Skills />
 }
diff --git a/apps/sim/app/o/[organizationId]/skills/skills.tsx b/apps/sim/app/o/[organizationId]/skills/skills.tsx
new file mode 100644
index 00000000000..a42895bc118
--- /dev/null
+++ b/apps/sim/app/o/[organizationId]/skills/skills.tsx
@@ -0,0 +1,31 @@
+'use client'
+
+import { useMemo } from 'react'
+import {
+  OrganizationPage,
+  type OrganizationPageTab,
+} from '@/app/o/[organizationId]/components/organization-page'
+import { useOrganizationContext } from '@/app/o/[organizationId]/providers/organization-provider'
+
+/** The organization's skills, filtered to everyone's, the viewer's own, or the organization's shared set. */
+export function Skills() {
+  const { organization } = useOrganizationContext()
+
+  const tabs = useMemo<OrganizationPageTab[]>(
+    () => [
+      { id: 'all', label: 'All' },
+      { id: 'mine', label: 'Mine' },
+      { id: 'organization', label: organization.name },
+    ],
+    [organization.name]
+  )
+
+  return (
+    <OrganizationPage
+      title='Skills'
+      description='Reusable instructions Sim can use'
+      tabs={tabs}
+      action='Create skill'
+    />
+  )
+}
diff --git a/apps/sim/app/o/[organizationId]/workspaces/page.tsx b/apps/sim/app/o/[organizationId]/workspaces/page.tsx
index 1844bb150b4..078ce5cf229 100644
--- a/apps/sim/app/o/[organizationId]/workspaces/page.tsx
+++ b/apps/sim/app/o/[organizationId]/workspaces/page.tsx
@@ -1,9 +1,25 @@
 import type { Metadata } from 'next'
+import { OrganizationPage } from '@/app/o/[organizationId]/components/organization-page'
 
 export const metadata: Metadata = {
   title: 'Workspaces',
 }
 
+/** Workspaces by the viewer's permission level in each. */
+const TABS = [
+  { id: 'all', label: 'All' },
+  { id: 'admin', label: 'Admin' },
+  { id: 'write', label: 'Write' },
+  { id: 'read', label: 'Read' },
+] as const
+
 export default function OrganizationWorkspacesPage() {
-  return null
+  return (
+    <OrganizationPage
+      title='Workspaces'
+      description='Where your team builds agents and workflows'
+      tabs={TABS}
+      action='Create workspace'
+    />
+  )
 }
diff --git a/packages/emcn/src/components/scroll-fade/scroll-fade.module.css b/packages/emcn/src/components/scroll-fade/scroll-fade.module.css
index acca502808f..e391b96fa8e 100644
--- a/packages/emcn/src/components/scroll-fade/scroll-fade.module.css
+++ b/packages/emcn/src/components/scroll-fade/scroll-fade.module.css
@@ -37,3 +37,39 @@
   --scroll-fade-bottom-start: calc(100% - var(--scroll-fade-band));
   --scroll-fade-bottom-end: 100%;
 }
+
+/*
+ * The same fade for a region that scrolls sideways — a tab row, a chip strip.
+ * Same band, same rest state; the stops run left to right instead.
+ */
+.rootX {
+  --scroll-fade-band: 12px;
+  --scroll-fade-left-start: 0px;
+  --scroll-fade-left-end: 0px;
+  --scroll-fade-right-start: 100%;
+  --scroll-fade-right-end: 100%;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent var(--scroll-fade-left-start),
+    black var(--scroll-fade-left-end),
+    black var(--scroll-fade-right-start),
+    transparent var(--scroll-fade-right-end)
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent var(--scroll-fade-left-start),
+    black var(--scroll-fade-left-end),
+    black var(--scroll-fade-right-start),
+    transparent var(--scroll-fade-right-end)
+  );
+}
+
+.rootX[data-scroll-fade-left] {
+  --scroll-fade-left-start: 0px;
+  --scroll-fade-left-end: var(--scroll-fade-band);
+}
+
+.rootX[data-scroll-fade-right] {
+  --scroll-fade-right-start: calc(100% - var(--scroll-fade-band));
+  --scroll-fade-right-end: 100%;
+}
diff --git a/packages/emcn/src/components/scroll-fade/scroll-fade.ts b/packages/emcn/src/components/scroll-fade/scroll-fade.ts
index 2a440da511d..1c529a64142 100644
--- a/packages/emcn/src/components/scroll-fade/scroll-fade.ts
+++ b/packages/emcn/src/components/scroll-fade/scroll-fade.ts
@@ -1,11 +1,17 @@
 import styles from './scroll-fade.module.css'
 
-/** Which edges of a scroll region currently hide content beyond them. */
+/** Which edges of a vertical scroll region currently hide content beyond them. */
 export interface ScrollEdges {
   top: boolean
   bottom: boolean
 }
 
+/** Which edges of a horizontal scroll region currently hide content beyond them. */
+export interface ScrollEdgesX {
+  left: boolean
+  right: boolean
+}
+
 /** Height of the fade band at an active edge, in pixels. */
 export const SCROLL_FADE_BAND_PX = 12
 
@@ -25,13 +31,27 @@ export const SCROLL_FADE_BAND_PX = 12
  */
 export const scrollFadeClass = styles.root
 
+/**
+ * The same fade for a region that scrolls sideways — a tab row or chip strip.
+ * Pair it with `useScrollEdges(ref, { axis: 'x' })`.
+ */
+export const scrollFadeXClass = styles.rootX
+
 type ScrollFadeAttributes = {
   'data-scroll-fade-top'?: true
   'data-scroll-fade-bottom'?: true
+  'data-scroll-fade-left'?: true
+  'data-scroll-fade-right'?: true
 }
 
-/** Data attributes that switch {@link scrollFadeClass}'s edges on. */
-export function scrollFadeAttributes(edges: ScrollEdges): ScrollFadeAttributes {
+/** Data attributes that switch {@link scrollFadeClass} or {@link scrollFadeXClass}'s edges on. */
+export function scrollFadeAttributes(edges: ScrollEdges | ScrollEdgesX): ScrollFadeAttributes {
+  if ('left' in edges) {
+    return {
+      'data-scroll-fade-left': edges.left || undefined,
+      'data-scroll-fade-right': edges.right || undefined,
+    }
+  }
   return {
     'data-scroll-fade-top': edges.top || undefined,
     'data-scroll-fade-bottom': edges.bottom || undefined,
diff --git a/packages/emcn/src/hooks/use-scroll-edges.test.tsx b/packages/emcn/src/hooks/use-scroll-edges.test.tsx
index 587a0e27f1e..ad8fbc32ce7 100644
--- a/packages/emcn/src/hooks/use-scroll-edges.test.tsx
+++ b/packages/emcn/src/hooks/use-scroll-edges.test.tsx
@@ -122,6 +122,32 @@ describe('useScrollEdges', () => {
     expect(element.hasAttribute('data-scroll-fade-bottom')).toBe(true)
   })
 
+  it('reads the left and right edges of a sideways region', () => {
+    function Strip() {
+      const ref = useRef<HTMLDivElement>(null)
+      const edges = useScrollEdges(ref, { axis: 'x' })
+      return <div ref={ref} {...scrollFadeAttributes(edges)} />
+    }
+    act(() => {
+      root.render(<Strip />)
+    })
+    const element = host.querySelector<HTMLDivElement>('div')
+    if (!element) throw new Error('strip did not mount')
+    for (const [key, value] of Object.entries({
+      scrollLeft: 0,
+      scrollWidth: 300,
+      clientWidth: 100,
+    })) {
+      Object.defineProperty(element, key, { configurable: true, value })
+    }
+    act(() => {
+      element.dispatchEvent(new Event('scroll'))
+    })
+    expect(element.hasAttribute('data-scroll-fade-left')).toBe(false)
+    expect(element.hasAttribute('data-scroll-fade-right')).toBe(true)
+    expect(element.hasAttribute('data-scroll-fade-bottom')).toBe(false)
+  })
+
   it('reads no edge while disabled', () => {
     enabled = false
     mountWith({ scrollTop: 100, scrollHeight: 300, clientHeight: 100 })
diff --git a/packages/emcn/src/hooks/use-scroll-edges.ts b/packages/emcn/src/hooks/use-scroll-edges.ts
index 03d55dd4a60..64ac6d87ca2 100644
--- a/packages/emcn/src/hooks/use-scroll-edges.ts
+++ b/packages/emcn/src/hooks/use-scroll-edges.ts
@@ -1,5 +1,5 @@
 import { type RefObject, useEffect, useState } from 'react'
-import type { ScrollEdges } from '../components/scroll-fade/scroll-fade'
+import type { ScrollEdges, ScrollEdgesX } from '../components/scroll-fade/scroll-fade'
 
 /**
  * Sub-pixel scroll positions and rounding leave `scrollTop` or the remaining
@@ -8,6 +8,7 @@ import type { ScrollEdges } from '../components/scroll-fade/scroll-fade'
 const EDGE_TOLERANCE_PX = 1
 
 const AT_REST: ScrollEdges = { top: false, bottom: false }
+const AT_REST_X: ScrollEdgesX = { left: false, right: false }
 
 interface UseScrollEdgesOptions {
   /**
@@ -18,15 +19,26 @@ interface UseScrollEdgesOptions {
   contentRef?: RefObject<HTMLElement | null>
   /** Set false while the region is not on screen; both edges then read false. */
   enabled?: boolean
+  /** The direction the region scrolls. Vertical unless told otherwise. */
+  axis?: 'x' | 'y'
+}
+
+/** The hidden-content test for one axis, read off the region's scroll metrics. */
+function readEdges(container: HTMLElement, axis: 'x' | 'y'): [start: boolean, end: boolean] {
+  const position = axis === 'x' ? container.scrollLeft : container.scrollTop
+  const size = axis === 'x' ? container.scrollWidth : container.scrollHeight
+  const viewport = axis === 'x' ? container.clientWidth : container.clientHeight
+  return [position > EDGE_TOLERANCE_PX, size - viewport - position > EDGE_TOLERANCE_PX]
 }
 
 /**
- * Whether a scroll region hides content beyond its top or bottom edge. Tracks
- * scrolling and resizes of the region and its content, so the answer stays right
- * as rows arrive, leave, or the viewport changes.
+ * Whether a scroll region hides content beyond its edges. Tracks scrolling and
+ * resizes of the region and its content, so the answer stays right as rows
+ * arrive, leave, or the viewport changes.
  *
- * Drives both the edge fade ({@link scrollFadeClass}) and any divider that should
- * appear only once rows are hidden behind it.
+ * Drives both the edge fade ({@link scrollFadeClass}, or {@link scrollFadeXClass}
+ * for a sideways region) and any divider that should appear only once content is
+ * hidden behind it.
  *
  * `target` is the region as a ref, or as the element itself. Pass the element
  * (held in state from a callback ref) when the region mounts later than the
@@ -36,24 +48,28 @@ interface UseScrollEdgesOptions {
  */
 export function useScrollEdges(
   target: RefObject<HTMLElement | null> | HTMLElement | null,
-  { contentRef, enabled = true }: UseScrollEdgesOptions = {}
-): ScrollEdges {
-  const [edges, setEdges] = useState<ScrollEdges>(AT_REST)
+  options: UseScrollEdgesOptions & { axis: 'x' }
+): ScrollEdgesX
+export function useScrollEdges(
+  target: RefObject<HTMLElement | null> | HTMLElement | null,
+  options?: UseScrollEdgesOptions & { axis?: 'y' }
+): ScrollEdges
+export function useScrollEdges(
+  target: RefObject<HTMLElement | null> | HTMLElement | null,
+  { contentRef, enabled = true, axis = 'y' }: UseScrollEdgesOptions = {}
+): ScrollEdges | ScrollEdgesX {
+  const [edges, setEdges] = useState<[start: boolean, end: boolean]>([false, false])
 
   useEffect(() => {
     const container = target instanceof HTMLElement ? target : target?.current
     if (!enabled || !container) {
-      setEdges(AT_REST)
+      setEdges([false, false])
       return
     }
 
     const update = () => {
-      const { scrollTop, scrollHeight, clientHeight } = container
-      const top = scrollTop > EDGE_TOLERANCE_PX
-      const bottom = scrollHeight - clientHeight - scrollTop > EDGE_TOLERANCE_PX
-      setEdges((current) =>
-        current.top === top && current.bottom === bottom ? current : { top, bottom }
-      )
+      const [start, end] = readEdges(container, axis)
+      setEdges((current) => (current[0] === start && current[1] === end ? current : [start, end]))
     }
 
     update()
@@ -68,7 +84,9 @@ export function useScrollEdges(
       container.removeEventListener('scroll', update)
       observer?.disconnect()
     }
-  }, [target, contentRef, enabled])
+  }, [target, contentRef, enabled, axis])
 
-  return edges
+  const [start, end] = edges
+  if (axis === 'x') return start || end ? { left: start, right: end } : AT_REST_X
+  return start || end ? { top: start, bottom: end } : AT_REST
 }
diff --git a/packages/emcn/src/index.ts b/packages/emcn/src/index.ts
index 32d34de4450..24147d385e0 100644
--- a/packages/emcn/src/index.ts
+++ b/packages/emcn/src/index.ts
@@ -19,8 +19,10 @@ export {
 export {
   SCROLL_FADE_BAND_PX,
   type ScrollEdges,
+  type ScrollEdgesX,
   scrollFadeAttributes,
   scrollFadeClass,
+  scrollFadeXClass,
 } from './components/scroll-fade/scroll-fade'
 /**
  * `Table` exists in BOTH `./components` (data-table element) and `./icons`