diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 6512d7212f1..62913f3040b 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -10,11 +10,34 @@
  * @see stores/constants.ts for the source of truth
  */
 :root {
-  --sidebar-width: 248px; /* SIDEBAR_WIDTH.DEFAULT */
+  --sidebar-width: 0px; /* 0 outside workspace; blocking script sets actual value on workspace pages */
   --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */
   --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+  --auth-primary-btn-bg: #ffffff;
+  --auth-primary-btn-border: #ffffff;
+  --auth-primary-btn-text: #000000;
+  --auth-primary-btn-hover-bg: #e0e0e0;
+  --auth-primary-btn-hover-border: #e0e0e0;
+  --auth-primary-btn-hover-text: #000000;
+
+  /* z-index scale for layered UI
+     Popover must be above modal so dropdowns inside modals render correctly */
+  --z-dropdown: 100;
+  --z-modal: 200;
+  --z-popover: 300;
+  --z-tooltip: 400;
+  --z-toast: 500;
+
+  /* Shadow scale */
+  --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
+  --shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
+  --shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
+  --shadow-brand-inset: inset 0 1.25px 2.5px 0 #9b77ff;
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
 }
 
 .workspace-root {
@@ -54,11 +77,23 @@ html[data-sidebar-collapsed] .sidebar-container .text-small {
   transition: opacity 60ms ease;
 }
 
+.sidebar-container .sidebar-collapse-show {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease-out;
+}
+
 .sidebar-container[data-collapsed] .sidebar-collapse-hide,
 html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-hide {
   opacity: 0;
 }
 
+.sidebar-container[data-collapsed] .sidebar-collapse-show,
+html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-show {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-remove {
   display: none;
 }
@@ -159,7 +194,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-1: #e0e0e0; /* stronger border */
     --surface-6: #e5e5e5; /* popovers, elevated surfaces */
     --surface-7: #d9d9d9;
-    --surface-active: #ececec; /* hover/active state */
+    --surface-hover: #f2f2f2; /* hover state */
+    --surface-active: #ececec; /* active/selected state */
 
     --workflow-edge: #e0e0e0; /* workflow handles/edges - matches border-1 */
 
@@ -182,13 +218,19 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #e0e0e0;
 
     /* Brand & state */
-    --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
-    --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c482;
+    --brand-accent: #33c482;
     --selection: #1a5cf6;
     --warning: #ea580c;
 
+    /* Inverted surface (dark chrome on light page, e.g. tag dropdown) */
+    --surface-inverted: #1b1b1b;
+    --surface-inverted-hover: #363636;
+    --border-inverted: #363636;
+
+    /* Tooltip (true inversion: always opposite of page) */
+    --tooltip-bg: #1b1b1b;
+
     /* Utility */
     --white: #ffffff;
 
@@ -197,67 +239,50 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 440;
     --font-weight-semibold: 500;
 
-    /* Extended palette */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
-
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
-
-    /* Greens */
-    --c-4CAF50: #22c55e;
-
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #ea580c;
-    --c-FF972F: #f97316;
-
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #fecaca;
-    --c-F87171: #f87171;
-    --c-FF402F: #ef4444;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #7c2d12;
+    /* Landing / marketing - text (static dark-section colors) */
+    --landing-text: #ececec;
+    --landing-text-muted: #999999;
+    --landing-text-subtle: #f6f6f6;
+    --landing-text-dark: #1c1c1c;
+    --landing-text-secondary: #666666;
+    --landing-text-body: #cdcdcd;
+    --landing-text-icon: #939393;
+
+    /* Landing / marketing - surfaces */
+    --landing-bg: #1c1c1c;
+    --landing-bg-elevated: #2a2a2a;
+    --landing-bg-card: #232323;
+    --landing-bg-section: #f6f6f6;
+    --landing-bg-subtle: #fafafa;
+    --landing-bg-surface: #1e1e1e;
+    --landing-bg-hover: #f0f0f0;
+    --landing-bg-skeleton: #e8e8e8;
+
+    /* Landing / marketing - borders */
+    --landing-border: #2a2a2a;
+    --landing-border-light: #e5e5e5;
+    --landing-border-strong: #3d3d3d;
+    --landing-border-subtle: #d4d4d4;
+
+    /* Code editor (theme-aware) */
+    --code-bg: #f5f5f5;
+    --code-foreground: #1a1a1a;
+    --code-line-number: #737373;
+
+    /* Workspace: additional text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
+
+    /* Status / semantic colors */
+    --error: #dc2626;
+    --error-muted: #fecaca;
+    --error-emphasis: #b91c1c;
+    --caution: #f59e0b;
+    --success: #22c55e;
+
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --selection-dark: #264f78;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #fef2f2;
@@ -268,6 +293,49 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --terminal-status-warning-bg: #fefce8;
     --terminal-status-warning-border: #facc15;
     --terminal-status-warning-color: #a16207;
+
+    /* Badge semantic colors */
+    --badge-success-bg: #bbf7d0;
+    --badge-success-text: #15803d;
+    --badge-error-bg: #fecaca;
+    --badge-error-text: #dc2626;
+    --badge-gray-bg: #e7e5e4;
+    --badge-gray-text: #57534e;
+    --badge-blue-bg: #bfdbfe;
+    --badge-blue-text: #1d4ed8;
+    --badge-blue-secondary-bg: #bae6fd;
+    --badge-blue-secondary-text: #0369a1;
+    --badge-purple-bg: #e9d5ff;
+    --badge-purple-text: #7c3aed;
+    --badge-orange-bg: #fed7aa;
+    --badge-orange-text: #c2410c;
+    --badge-amber-bg: #fde68a;
+    --badge-amber-text: #a16207;
+    --badge-teal-bg: #99f6e4;
+    --badge-teal-text: #0f766e;
+    --badge-cyan-bg: #cffafe;
+    --badge-cyan-text: #0891b2;
+    --badge-pink-bg: #fbcfe8;
+    --badge-pink-text: #be185d;
+
+    /* Search/highlight */
+    --highlight-search-active: #f6ad55;
+    --highlight-search: #fcd34d;
+    --highlight-match-bg: #bae6fd;
+    --highlight-match-text: #0369a1;
+
+    /* Selection */
+    --selection-bg: #add6ff;
+
+    /* Active indicator */
+    --indicator-online: #33c482;
+    --indicator-active: #4ade80;
+    --indicator-inactive: #b7b7b7;
+    --indicator-seat-filled: #34b5ff;
+
+    /* Scrollbar colors */
+    --scrollbar-thumb-color: #c0c0c0;
+    --scrollbar-thumb-hover-color: #a8a8a8;
   }
   .dark {
     /* Surface */
@@ -281,7 +349,8 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-1: #3d3d3d;
     --surface-6: #454545;
     --surface-7: #505050;
-    --surface-active: #2c2c2c; /* hover/active state */
+    --surface-hover: #262626; /* hover state */
+    --surface-active: #2c2c2c; /* active/selected state */
 
     --workflow-edge: #454545; /* workflow handles/edges - same as surface-6 in dark */
 
@@ -304,13 +373,19 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --border-success: #575757;
 
     /* Brand & state */
-    --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
-    --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c482;
+    --brand-accent: #33c482;
     --selection: #4b83f7;
     --warning: #ff6600;
 
+    /* Inverted surface (in dark mode, falls back to standard surfaces) */
+    --surface-inverted: #242424;
+    --surface-inverted-hover: #363636;
+    --border-inverted: #3d3d3d;
+
+    /* Tooltip (true inversion: always opposite of page) */
+    --tooltip-bg: #fdfdfd;
+
     /* Utility */
     --white: #ffffff;
 
@@ -319,70 +394,25 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 480;
     --font-weight-semibold: 550;
 
-    /* Extended palette (exhaustive from code usage via -[#...]) */
-    /* Neutral deep shades */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
-
-    --c-CFCFCF: #cfcfcf;
-
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
-
-    /* Greens */
-    --c-4CAF50: #4caf50;
-
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #f97316;
-    --c-FF972F: #ff972f;
-
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #f6d2d2;
-    --c-F87171: #f87171;
-    --c-FF402F: #ff402f;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #883827;
+    /* Code editor (dark mode overrides) */
+    --code-bg: #1f1f1f;
+    --code-foreground: #eeeeee;
+    --code-line-number: #a8a8a8;
+
+    /* Workspace text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
+
+    /* Status / semantic (dark overrides where needed) */
+    --error: #f87171;
+    --error-muted: #f6d2d2;
+    --error-emphasis: #b91c1c;
+    --caution: #f59e0b;
+    --success: #22c55e;
+
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --selection-dark: #264f78;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #491515;
@@ -393,6 +423,52 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --terminal-status-warning-bg: #3d3520;
     --terminal-status-warning-border: #5c4d1f;
     --terminal-status-warning-color: #d4a72c;
+
+    /* Badge semantic colors */
+    --badge-success-bg: rgba(34, 197, 94, 0.2);
+    --badge-success-text: #86efac;
+    --badge-error-bg: #551a1a;
+    --badge-error-text: #fca5a5;
+    --badge-gray-bg: #3a3a3a;
+    --badge-gray-text: #a8a8a8;
+    --badge-blue-bg: rgba(59, 130, 246, 0.2);
+    --badge-blue-text: #93c5fd;
+    --badge-blue-secondary-bg: rgba(51, 180, 255, 0.2);
+    --badge-blue-secondary-text: #7dd3fc;
+    --badge-purple-bg: rgba(168, 85, 247, 0.2);
+    --badge-purple-text: #d8b4fe;
+    --badge-orange-bg: rgba(249, 115, 22, 0.2);
+    --badge-orange-text: #fdba74;
+    --badge-amber-bg: rgba(245, 158, 11, 0.2);
+    --badge-amber-text: #fcd34d;
+    --badge-teal-bg: rgba(20, 184, 166, 0.2);
+    --badge-teal-text: #5eead4;
+    --badge-cyan-bg: rgba(14, 165, 233, 0.2);
+    --badge-cyan-text: #7dd3fc;
+    --badge-pink-bg: rgba(236, 72, 153, 0.2);
+    --badge-pink-text: #f9a8d4;
+
+    /* Search/highlight */
+    --highlight-search-active: #f6ad55;
+    --highlight-search: #fcd34d;
+    --highlight-match-bg: rgba(51, 180, 255, 0.2);
+    --highlight-match-text: #7dd3fc;
+
+    /* Selection */
+    --selection-bg: #264f78;
+
+    /* Active indicator */
+    --indicator-online: #33c482;
+    --indicator-active: #4ade80;
+    --indicator-inactive: #b7b7b7;
+    --indicator-seat-filled: #34b5ff;
+
+    /* Scrollbar colors */
+    --scrollbar-thumb-color: #5a5a5a;
+    --scrollbar-thumb-hover-color: #6a6a6a;
+
+    /* Shadow scale - dark */
+    --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -433,9 +509,6 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     caret-color: var(--text-primary);
   }
 
-  .dark body {
-    @apply antialiased;
-  }
   ::-webkit-scrollbar {
     width: var(--scrollbar-size);
     height: var(--scrollbar-size);
@@ -446,12 +519,12 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #c0c0c0;
+    background-color: var(--scrollbar-thumb-color);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: #a8a8a8;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   /* Dark Mode Global Scrollbar */
@@ -460,20 +533,20 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: #5a5a5a;
+    background-color: var(--scrollbar-thumb-color);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: #6a6a6a;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: #c0c0c0 transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .dark * {
-    scrollbar-color: #5a5a5a transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .copilot-scrollable {
@@ -600,27 +673,6 @@ input[type="search"]::-ms-clear {
     animation: placeholder-pulse 1.5s ease-in-out infinite;
   }
 
-  .branded-button-gradient {
-    background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
-    border-color: #6f3dfa !important;
-    box-shadow: inset 0 2px 4px 0 #9b77ff !important;
-  }
-
-  .branded-button-gradient:hover {
-    background: linear-gradient(to bottom, #8357ff, #6f3dfa) !important;
-    opacity: 0.9;
-  }
-
-  .branded-button-custom {
-    background: var(--brand-primary-hex) !important;
-    border-color: var(--brand-primary-hex) !important;
-  }
-
-  .branded-button-custom:hover {
-    background: var(--brand-primary-hover-hex) !important;
-    border-color: var(--brand-primary-hover-hex) !important;
-  }
-
   /**
    * Panel tab visibility and styling to prevent hydration flash
    */
@@ -710,12 +762,10 @@ input[type="search"]::-ms-clear {
     --base-muted-foreground: #737373;
     --gradient-primary: 263 85% 70%;
     --gradient-secondary: 336 95% 65%;
-    --brand-primary-hex: #6f3dfa;
-    --brand-primary-hover-hex: #6338d9;
-    --brand-accent-hex: #6f3dfa;
-    --brand-accent-hover-hex: #6f3dfa;
-    --brand-background-hex: #ffffff;
-    --surface-elevated: #202020;
+    --brand: #6f3dfa;
+    --brand-hover: #6338d9;
+    --brand-link: #6f3dfa;
+    --brand-link-hover: #6f3dfa;
   }
 
   .dark {
@@ -749,12 +799,10 @@ input[type="search"]::-ms-clear {
     --base-muted-foreground: #a3a3a3;
     --gradient-primary: 263 90% 75%;
     --gradient-secondary: 336 100% 72%;
-    --brand-primary-hex: #701ffc;
-    --brand-primary-hover-hex: #802fff;
-    --brand-accent-hex: #9d54ff;
-    --brand-accent-hover-hex: #a66fff;
-    --brand-background-hex: #0c0c0c;
-    --surface-elevated: #202020;
+    --brand: #701ffc;
+    --brand-hover: #802fff;
+    --brand-link: #9d54ff;
+    --brand-link-hover: #a66fff;
   }
 }
 
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index c4d5db0301e..5863c4405d3 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -3,11 +3,7 @@ import Script from 'next/script'
 import { PublicEnvScript } from 'next-runtime-env'
 import { BrandedLayout } from '@/components/branded-layout'
 import { PostHogProvider } from '@/app/_shell/providers/posthog-provider'
-import {
-  generateBrandedMetadata,
-  generateStructuredData,
-  generateThemeCSS,
-} from '@/ee/whitelabeling'
+import { generateBrandedMetadata, generateThemeCSS } from '@/ee/whitelabeling'
 import '@/app/_styles/globals.css'
 import { OneDollarStats } from '@/components/analytics/onedollarstats'
 import { isReactGrabEnabled, isReactScanEnabled } from '@/lib/core/config/feature-flags'
@@ -21,8 +17,6 @@ import { season } from '@/app/_styles/fonts/season/season'
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
   themeColor: [
     { media: '(prefers-color-scheme: light)', color: '#ffffff' },
     { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
@@ -32,7 +26,6 @@ export const viewport: Viewport = {
 export const metadata: Metadata = generateBrandedMetadata()
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const structuredData = generateStructuredData()
   const themeCSS = generateThemeCSS()
 
   return (
@@ -76,14 +69,6 @@ export default function RootLayout({ children }: { children: React.ReactNode })
             strategy='lazyOnload'
           />
         )}
-        {/* Structured Data for SEO */}
-        <script
-          type='application/ld+json'
-          dangerouslySetInnerHTML={{
-            __html: JSON.stringify(structuredData),
-          }}
-        />
-
         {/* 
           Workspace layout dimensions: set CSS vars before hydration to avoid layout jump.
           
@@ -105,6 +90,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 }
 
                 // Sidebar width
+                var defaultSidebarWidth = '248px';
                 try {
                   var stored = localStorage.getItem('sidebar-state');
                   if (stored) {
@@ -123,11 +109,15 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                         document.documentElement.style.setProperty('--sidebar-width', width + 'px');
                       } else if (width > maxSidebarWidth) {
                         document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px');
+                      } else {
+                        document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth);
                       }
                     }
+                  } else {
+                    document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth);
                   }
                 } catch (e) {
-                  // Fallback handled by CSS defaults
+                  document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth);
                 }
 
                 // Panel width and active tab
@@ -233,6 +223,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta httpEquiv='x-ua-compatible' content='ie=edge' />
 
         {/* OneDollarStats Analytics */}
+        <link rel='dns-prefetch' href='https://assets.onedollarstats.com' />
         <script defer src='https://assets.onedollarstats.com/stonks.js' />
 
         <PublicEnvScript />
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 077516f2fd0..6341dd94568 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
@@ -1,13 +1,15 @@
 'use client'
 
-import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react'
 import { Command } from 'cmdk'
 import { useParams, useRouter } from 'next/navigation'
+import { usePostHog } from 'posthog-js/react'
 import { createPortal } from 'react-dom'
-import { Blimp, Library } from '@/components/emcn'
+import { Library } from '@/components/emcn'
 import { Calendar, Database, File, HelpCircle, Settings, Table } from '@/components/emcn/icons'
 import { Search } from '@/components/emcn/icons/search'
 import { cn } from '@/lib/core/utils/cn'
+import { captureEvent } from '@/lib/posthog/client'
 import { hasTriggerCapability } from '@/lib/workflows/triggers/trigger-utils'
 import { SIDEBAR_SCROLL_EVENT } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
@@ -18,74 +20,24 @@ import type {
   SearchDocItem,
   SearchToolOperationItem,
 } from '@/stores/modals/search/types'
-
-function scoreMatch(value: string, search: string): number {
-  if (!search) return 1
-  const valueLower = value.toLowerCase()
-  const searchLower = search.toLowerCase()
-
-  if (valueLower === searchLower) return 1
-  if (valueLower.startsWith(searchLower)) return 0.9
-  if (valueLower.includes(searchLower)) return 0.7
-
-  const words = searchLower.split(/\s+/).filter(Boolean)
-  if (words.length > 1) {
-    if (words.every((w) => valueLower.includes(w))) return 0.5
-  }
-
-  return 0
-}
-
-function filterAndSort<T>(items: T[], toValue: (item: T) => string, search: string): T[] {
-  if (!search) return items
-  const scored: [T, number][] = []
-  for (const item of items) {
-    const s = scoreMatch(toValue(item), search)
-    if (s > 0) scored.push([item, s])
-  }
-  scored.sort((a, b) => b[1] - a[1])
-  return scored.map(([item]) => item)
-}
-
-interface TaskItem {
-  id: string
-  name: string
-  href: string
-}
-
-interface SearchModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  workflows?: WorkflowItem[]
-  workspaces?: WorkspaceItem[]
-  tasks?: TaskItem[]
-  isOnWorkflowPage?: boolean
-}
-
-interface WorkflowItem {
-  id: string
-  name: string
-  href: string
-  color: string
-  isCurrent?: boolean
-}
-
-interface WorkspaceItem {
-  id: string
-  name: string
-  href: string
-  isCurrent?: boolean
-}
-
-interface PageItem {
-  id: string
-  name: string
-  icon: React.ComponentType<{ className?: string }>
-  href?: string
-  onClick?: () => void
-  shortcut?: string
-  hidden?: boolean
-}
+import {
+  BlocksGroup,
+  DocsGroup,
+  FilesGroup,
+  KnowledgeBasesGroup,
+  PagesGroup,
+  TablesGroup,
+  TasksGroup,
+  ToolOpsGroup,
+  ToolsGroup,
+  TriggersGroup,
+  WorkflowsGroup,
+  WorkspacesGroup,
+} from './components/search-groups'
+import type { PageItem, SearchModalProps, TaskItem, WorkflowItem, WorkspaceItem } from './utils'
+import { filterAndSort } from './utils'
+
+export type { SearchModalProps } from './utils'
 
 export function SearchModal({
   open,
@@ -93,6 +45,9 @@ export function SearchModal({
   workflows = [],
   workspaces = [],
   tasks = [],
+  tables = [],
+  files = [],
+  knowledgeBases = [],
   isOnWorkflowPage = false,
 }: SearchModalProps) {
   const params = useParams()
@@ -102,6 +57,14 @@ export function SearchModal({
   const [mounted, setMounted] = useState(false)
   const { navigateToSettings } = useSettingsNavigation()
   const { config: permissionConfig } = usePermissionConfig()
+  const posthog = usePostHog()
+
+  const routerRef = useRef(router)
+  routerRef.current = router
+  const onOpenChangeRef = useRef(onOpenChange)
+  onOpenChangeRef.current = onOpenChange
+  const posthogRef = useRef(posthog)
+  posthogRef.current = posthog
 
   useEffect(() => {
     setMounted(true)
@@ -196,6 +159,8 @@ export function SearchModal({
   }, [open])
 
   const deferredSearch = useDeferredValue(search)
+  const deferredSearchRef = useRef(deferredSearch)
+  deferredSearchRef.current = deferredSearch
 
   const handleSearchChange = useCallback((value: string) => {
     setSearch(value)
@@ -213,13 +178,13 @@ export function SearchModal({
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.preventDefault()
-        onOpenChange(false)
+        onOpenChangeRef.current(false)
       }
     }
 
     document.addEventListener('keydown', handleKeyDown)
     return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [open, onOpenChange])
+  }, [open])
 
   const handleBlockSelect = useCallback(
     (block: SearchBlockItem, type: 'block' | 'trigger' | 'tool') => {
@@ -230,9 +195,14 @@ export function SearchModal({
           detail: { type: block.type, enableTriggerMode },
         })
       )
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: type,
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [onOpenChange]
+    [workspaceId]
   )
 
   const handleToolOperationSelect = useCallback(
@@ -242,32 +212,99 @@ export function SearchModal({
           detail: { type: op.blockType, presetOperation: op.operationId },
         })
       )
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'tool_operation',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [onOpenChange]
+    [workspaceId]
   )
 
   const handleWorkflowSelect = useCallback(
     (workflow: WorkflowItem) => {
       if (!workflow.isCurrent && workflow.href) {
-        router.push(workflow.href)
+        routerRef.current.push(workflow.href)
         window.dispatchEvent(
           new CustomEvent(SIDEBAR_SCROLL_EVENT, { detail: { itemId: workflow.id } })
         )
       }
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'workflow',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [router, onOpenChange]
+    [workspaceId]
   )
 
   const handleWorkspaceSelect = useCallback(
     (workspace: WorkspaceItem) => {
       if (!workspace.isCurrent && workspace.href) {
-        router.push(workspace.href)
+        routerRef.current.push(workspace.href)
       }
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'workspace',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
+  )
+
+  const handleTaskSelect = useCallback(
+    (task: TaskItem) => {
+      routerRef.current.push(task.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'task',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [router, onOpenChange]
+    [workspaceId]
+  )
+
+  const handleTableSelect = useCallback(
+    (item: TaskItem) => {
+      routerRef.current.push(item.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'table',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
+  )
+
+  const handleFileSelect = useCallback(
+    (item: TaskItem) => {
+      routerRef.current.push(item.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'file',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
+  )
+
+  const handleKbSelect = useCallback(
+    (item: TaskItem) => {
+      routerRef.current.push(item.href)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'knowledge_base',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
+    },
+    [workspaceId]
   )
 
   const handlePageSelect = useCallback(
@@ -278,22 +315,51 @@ export function SearchModal({
         if (page.href.startsWith('http')) {
           window.open(page.href, '_blank', 'noopener,noreferrer')
         } else {
-          router.push(page.href)
+          routerRef.current.push(page.href)
         }
       }
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'page',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [router, onOpenChange]
+    [workspaceId]
   )
 
   const handleDocSelect = useCallback(
     (doc: SearchDocItem) => {
       window.open(doc.href, '_blank', 'noopener,noreferrer')
-      onOpenChange(false)
+      captureEvent(posthogRef.current, 'search_result_selected', {
+        result_type: 'docs',
+        query_length: deferredSearchRef.current.length,
+        workspace_id: workspaceId,
+      })
+      onOpenChangeRef.current(false)
     },
-    [onOpenChange]
+    [workspaceId]
+  )
+
+  const handleBlockSelectAsBlock = useCallback(
+    (block: SearchBlockItem) => handleBlockSelect(block, 'block'),
+    [handleBlockSelect]
+  )
+
+  const handleBlockSelectAsTool = useCallback(
+    (tool: SearchBlockItem) => handleBlockSelect(tool, 'tool'),
+    [handleBlockSelect]
+  )
+
+  const handleBlockSelectAsTrigger = useCallback(
+    (trigger: SearchBlockItem) => handleBlockSelect(trigger, 'trigger'),
+    [handleBlockSelect]
   )
 
+  const handleOverlayClick = useCallback(() => {
+    onOpenChangeRef.current(false)
+  }, [])
+
   const filteredBlocks = useMemo(() => {
     if (!isOnWorkflowPage) return []
     return filterAndSort(blocks, (b) => `${b.name} block-${b.id}`, deferredSearch)
@@ -323,6 +389,20 @@ export function SearchModal({
     return filterAndSort(docs, (d) => `${d.name} docs documentation doc-${d.id}`, deferredSearch)
   }, [isOnWorkflowPage, docs, deferredSearch])
 
+  const filteredTables = useMemo(
+    () => filterAndSort(tables, (t) => `${t.name} table-${t.id}`, deferredSearch),
+    [tables, deferredSearch]
+  )
+  const filteredFiles = useMemo(
+    () => filterAndSort(files, (f) => `${f.name} file-${f.id}`, deferredSearch),
+    [files, deferredSearch]
+  )
+  const filteredKnowledgeBases = useMemo(
+    () =>
+      filterAndSort(knowledgeBases, (kb) => `${kb.name} knowledge-base-${kb.id}`, deferredSearch),
+    [knowledgeBases, deferredSearch]
+  )
+
   const filteredWorkflows = useMemo(
     () => filterAndSort(workflows, (w) => `${w.name} workflow-${w.id}`, deferredSearch),
     [workflows, deferredSearch]
@@ -344,13 +424,12 @@ export function SearchModal({
 
   return createPortal(
     <>
-      {/* Overlay */}
       <div
         className={cn(
           'fixed inset-0 z-40 transition-opacity duration-100',
           open ? 'opacity-100' : 'pointer-events-none opacity-0'
         )}
-        onClick={() => onOpenChange(false)}
+        onClick={handleOverlayClick}
         aria-hidden={!open}
       />
 
@@ -363,201 +442,40 @@ export function SearchModal({
           '-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-[4px] border-black/[0.06] bg-[var(--bg)] shadow-[0_24px_80px_-16px_rgba(0,0,0,0.15)] dark:border-white/[0.06] dark:shadow-[0_24px_80px_-16px_rgba(0,0,0,0.4)]',
           open ? 'visible opacity-100' : 'invisible opacity-0'
         )}
-        style={{ left: '50%' }}
+        style={{
+          left: isOnWorkflowPage
+            ? 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)'
+            : 'calc(var(--sidebar-width) / 2 + 50%)',
+        }}
       >
         <Command label='Search' shouldFilter={false}>
-          <div className='mx-[8px] mt-[8px] mb-[4px] flex items-center gap-[6px] rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] dark:bg-[var(--surface-4)]'>
+          <div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
             <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
             <Command.Input
               ref={inputRef}
               autoFocus
               onValueChange={handleSearchChange}
               placeholder='Search anything...'
-              className='w-full bg-transparent py-[6px] font-base text-[14px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              className='w-full bg-transparent py-1.5 font-base text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
             />
           </div>
-          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-[8px] [&_[cmdk-group]+[cmdk-group]]:mt-[10px]'>
-            <Command.Empty className='flex items-center justify-center px-[16px] py-[24px] text-[14px] text-[var(--text-subtle)]'>
+          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group]+[cmdk-group]]:mt-2.5'>
+            <Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
               No results found.
             </Command.Empty>
 
-            {filteredBlocks.length > 0 && (
-              <Command.Group heading='Blocks' className={groupHeadingClassName}>
-                {filteredBlocks.map((block) => (
-                  <MemoizedCommandItem
-                    key={block.id}
-                    value={`${block.name} block-${block.id}`}
-                    onSelect={() => handleBlockSelect(block, 'block')}
-                    icon={block.icon}
-                    bgColor={block.bgColor}
-                    showColoredIcon
-                  >
-                    {block.name}
-                  </MemoizedCommandItem>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredTools.length > 0 && (
-              <Command.Group heading='Tools' className={groupHeadingClassName}>
-                {filteredTools.map((tool) => (
-                  <MemoizedCommandItem
-                    key={tool.id}
-                    value={`${tool.name} tool-${tool.id}`}
-                    onSelect={() => handleBlockSelect(tool, 'tool')}
-                    icon={tool.icon}
-                    bgColor={tool.bgColor}
-                    showColoredIcon
-                  >
-                    {tool.name}
-                  </MemoizedCommandItem>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredTriggers.length > 0 && (
-              <Command.Group heading='Triggers' className={groupHeadingClassName}>
-                {filteredTriggers.map((trigger) => (
-                  <MemoizedCommandItem
-                    key={trigger.id}
-                    value={`${trigger.name} trigger-${trigger.id}`}
-                    onSelect={() => handleBlockSelect(trigger, 'trigger')}
-                    icon={trigger.icon}
-                    bgColor={trigger.bgColor}
-                    showColoredIcon
-                  >
-                    {trigger.name}
-                  </MemoizedCommandItem>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredWorkflows.length > 0 && open && (
-              <Command.Group heading='Workflows' className={groupHeadingClassName}>
-                {filteredWorkflows.map((workflow) => (
-                  <Command.Item
-                    key={workflow.id}
-                    value={`${workflow.name} workflow-${workflow.id}`}
-                    onSelect={() => handleWorkflowSelect(workflow)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
-                  >
-                    <div
-                      className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2px]'
-                      style={{
-                        backgroundColor: workflow.color,
-                        borderColor: `${workflow.color}60`,
-                        backgroundClip: 'padding-box',
-                      }}
-                    />
-                    <span className='truncate font-base text-[var(--text-body)]'>
-                      {workflow.name}
-                      {workflow.isCurrent && ' (current)'}
-                    </span>
-                  </Command.Item>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredTasks.length > 0 && open && (
-              <Command.Group heading='Tasks' className={groupHeadingClassName}>
-                {filteredTasks.map((task) => (
-                  <Command.Item
-                    key={task.id}
-                    value={`${task.name} task-${task.id}`}
-                    onSelect={() => {
-                      router.push(task.href)
-                      onOpenChange(false)
-                    }}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
-                  >
-                    <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-                      <Blimp className='h-[14px] w-[14px] text-[var(--text-icon)]' />
-                    </div>
-                    <span className='truncate font-base text-[var(--text-body)]'>{task.name}</span>
-                  </Command.Item>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredToolOps.length > 0 && (
-              <Command.Group heading='Tool Operations' className={groupHeadingClassName}>
-                {filteredToolOps.map((op) => (
-                  <MemoizedCommandItem
-                    key={op.id}
-                    value={`${op.searchValue} operation-${op.id}`}
-                    onSelect={() => handleToolOperationSelect(op)}
-                    icon={op.icon}
-                    bgColor={op.bgColor}
-                    showColoredIcon
-                  >
-                    {op.name}
-                  </MemoizedCommandItem>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredWorkspaces.length > 0 && open && (
-              <Command.Group heading='Workspaces' className={groupHeadingClassName}>
-                {filteredWorkspaces.map((workspace) => (
-                  <Command.Item
-                    key={workspace.id}
-                    value={`${workspace.name} workspace-${workspace.id}`}
-                    onSelect={() => handleWorkspaceSelect(workspace)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
-                  >
-                    <span className='truncate font-base text-[var(--text-body)]'>
-                      {workspace.name}
-                      {workspace.isCurrent && ' (current)'}
-                    </span>
-                  </Command.Item>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredDocs.length > 0 && (
-              <Command.Group heading='Docs' className={groupHeadingClassName}>
-                {filteredDocs.map((doc) => (
-                  <MemoizedCommandItem
-                    key={doc.id}
-                    value={`${doc.name} docs documentation doc-${doc.id}`}
-                    onSelect={() => handleDocSelect(doc)}
-                    icon={doc.icon}
-                    bgColor='#6B7280'
-                    showColoredIcon
-                  >
-                    {doc.name}
-                  </MemoizedCommandItem>
-                ))}
-              </Command.Group>
-            )}
-
-            {filteredPages.length > 0 && open && (
-              <Command.Group heading='Pages' className={groupHeadingClassName}>
-                {filteredPages.map((page) => {
-                  const Icon = page.icon
-                  return (
-                    <Command.Item
-                      key={page.id}
-                      value={`${page.name} page-${page.id}`}
-                      onSelect={() => handlePageSelect(page)}
-                      className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
-                    >
-                      <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-                        <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />
-                      </div>
-                      <span className='truncate font-base text-[var(--text-body)]'>
-                        {page.name}
-                      </span>
-                      {page.shortcut && (
-                        <span className='ml-auto flex-shrink-0 font-base text-[13px] text-[var(--text-subtle)]'>
-                          {page.shortcut}
-                        </span>
-                      )}
-                    </Command.Item>
-                  )
-                })}
-              </Command.Group>
-            )}
+            <BlocksGroup items={filteredBlocks} onSelect={handleBlockSelectAsBlock} />
+            <ToolsGroup items={filteredTools} onSelect={handleBlockSelectAsTool} />
+            <TriggersGroup items={filteredTriggers} onSelect={handleBlockSelectAsTrigger} />
+            <WorkflowsGroup items={filteredWorkflows} onSelect={handleWorkflowSelect} />
+            <TasksGroup items={filteredTasks} onSelect={handleTaskSelect} />
+            <TablesGroup items={filteredTables} onSelect={handleTableSelect} />
+            <FilesGroup items={filteredFiles} onSelect={handleFileSelect} />
+            <KnowledgeBasesGroup items={filteredKnowledgeBases} onSelect={handleKbSelect} />
+            <ToolOpsGroup items={filteredToolOps} onSelect={handleToolOperationSelect} />
+            <WorkspacesGroup items={filteredWorkspaces} onSelect={handleWorkspaceSelect} />
+            <DocsGroup items={filteredDocs} onSelect={handleDocSelect} />
+            <PagesGroup items={filteredPages} onSelect={handlePageSelect} />
           </Command.List>
         </Command>
       </div>
@@ -565,57 +483,3 @@ export function SearchModal({
     document.body
   )
 }
-
-const groupHeadingClassName =
-  '[&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:pt-[2px] [&_[cmdk-group-heading]]:pb-[6px] [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[12px] [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
-
-interface CommandItemProps {
-  value: string
-  onSelect: () => void
-  icon: React.ComponentType<{ className?: string }>
-  bgColor: string
-  showColoredIcon?: boolean
-  children: React.ReactNode
-}
-
-// onSelect is safe to exclude: cmdk stores it in a ref (useAsRef) internally,
-// so the latest closure is always invoked regardless of whether React re-renders.
-const MemoizedCommandItem = memo(
-  function CommandItem({
-    value,
-    onSelect,
-    icon: Icon,
-    bgColor,
-    showColoredIcon,
-    children,
-  }: CommandItemProps) {
-    return (
-      <Command.Item
-        value={value}
-        onSelect={onSelect}
-        className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
-      >
-        <div
-          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-          style={{ background: showColoredIcon ? bgColor : 'transparent' }}
-        >
-          <Icon
-            className={cn(
-              'transition-transform duration-100 group-hover:scale-110',
-              showColoredIcon
-                ? '!h-[10px] !w-[10px] text-white'
-                : 'h-[14px] w-[14px] text-[var(--text-icon)]'
-            )}
-          />
-        </div>
-        <span className='truncate font-base text-[var(--text-body)]'>{children}</span>
-      </Command.Item>
-    )
-  },
-  (prev, next) =>
-    prev.value === next.value &&
-    prev.icon === next.icon &&
-    prev.bgColor === next.bgColor &&
-    prev.showColoredIcon === next.showColoredIcon &&
-    prev.children === next.children
-)
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index d4f92699640..60ba90ed96e 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -40,6 +40,7 @@ import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { X } from 'lucide-react'
+import { usePathname } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
 
@@ -48,14 +49,14 @@ import { Button } from '../button/button'
  * Mirrors the legacy `Modal` component to ensure consistent behavior.
  */
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 /**
  * Modal content animation classes.
  * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
  */
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+  'data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none'
 
 /**
  * Root modal component. Manages open state.
@@ -90,7 +91,7 @@ const ModalOverlay = React.forwardRef<
       <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-          'fixed inset-0 z-[500] bg-black/10 backdrop-blur-[2px]',
+          'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px]',
           ANIMATION_CLASSES,
           className
         )}
@@ -145,6 +146,8 @@ const ModalContent = React.forwardRef<
   ModalContentProps
 >(({ className, children, showClose = true, size = 'md', style, ...props }, ref) => {
   const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+  const pathname = usePathname()
+  const isWorkflowPage = pathname?.includes('/w/') ?? false
 
   React.useEffect(() => {
     const timer = setTimeout(() => setIsInteractionReady(true), 100)
@@ -159,12 +162,14 @@ const ModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] z-[500] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-[13px] ring-1 ring-foreground/10 duration-200',
+          'fixed top-[50%] z-[var(--z-modal)] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10 duration-200',
           MODAL_SIZES[size],
           className
         )}
         style={{
-          left: '50%',
+          left: isWorkflowPage
+            ? 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)'
+            : 'calc(var(--sidebar-width) / 2 + 50%)',
           ...style,
         }}
         onEscapeKeyDown={(e) => {
@@ -204,7 +209,10 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
         {children}
       </DialogPrimitive.Title>
       <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] flex-shrink-0 p-0'>
+        <Button
+          variant='ghost'
+          className='relative h-[16px] w-[16px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+        >
           <X className='h-[16px] w-[16px]' />
           <span className='sr-only'>Close</span>
         </Button>
@@ -296,19 +304,19 @@ const ModalTabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'relative flex gap-[16px] px-4 pt-1',
+        'relative flex gap-4 px-4 pt-1',
         disabled && 'pointer-events-none opacity-50',
         className
       )}
       {...props}
     >
-      <div ref={listRef} className='flex gap-[16px]'>
+      <div ref={listRef} className='flex gap-4'>
         {children}
       </div>
       <span
         className={cn(
           'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
+          ready ? 'opacity-100 transition-[left,width,opacity] duration-200 ease-out' : 'opacity-0'
         )}
         style={{ left: indicator.left, width: indicator.width }}
       />
@@ -328,8 +336,8 @@ const ModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      'px-1 pb-2 font-medium text-[var(--text-secondary)] text-small transition-colors',
+      'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
@@ -346,7 +354,7 @@ const ModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+  <TabsPrimitive.Content ref={ref} className={cn('pb-2.5', className)} {...props} />
 ))
 
 ModalTabsContent.displayName = 'ModalTabsContent'
@@ -370,7 +378,7 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        'flex justify-end gap-2 rounded-b-xl border-t bg-muted/50 px-4 py-3',
+        'flex justify-end gap-2 rounded-b-xl border-[var(--border)] border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] px-4 py-3',
         className
       )}
       {...props}