diff --git a/.cursorrules b/.cursorrules
index 583c84e65..a8f1e657b 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -8,7 +8,7 @@ ENSURE that you use the logger.info and logger.warn and logger.error instead of
 
 ## Comments
 
-You must use TSDOC for comments. Do not use ==== for comments to separate sections.
+You must use TSDOC for comments. Do not use ==== for comments to separate sections. Do not leave any comments that are not TSDOC. 
 
 ## Globals styles
 
diff --git a/apps/sim/.cursorrules b/apps/sim/.cursorrules
index 73ae78123..9b86fbb07 100644
--- a/apps/sim/.cursorrules
+++ b/apps/sim/.cursorrules
@@ -1,6 +1,6 @@
 # Sim App Architecture Guidelines
 
-You are building features in the Sim app following the architecture established by the sidebar-new component. This file defines the patterns, structures, and conventions you must follow.
+You are building features in the Sim app following the architecture. This file defines the patterns, structures, and conventions you must follow.
 
 ---
 
@@ -428,20 +428,22 @@ setSidebarWidth: (width) => {
 ### Tailwind Classes
 
 1. **No Inline Styles**: Use Tailwind utility classes exclusively
-2. **Dark Mode**: Always include dark mode variants (`dark:bg-[var(--surface-1)]`)
-3. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
-4. **clsx for Conditionals**: Use clsx() for conditional classes
-5. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
-6. **Transitions**: Add transitions for interactive states (`transition-colors`)
-7. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
+2. **Dark Mode**: Include dark mode variants only when the value differs from light mode
+3. **No Duplicate Dark Classes**: Never add a `dark:` class when the value is identical to the light mode class (e.g., `text-[var(--text-primary)] dark:text-[var(--text-primary)]` is redundant - just use `text-[var(--text-primary)]`)
+4. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
+5. **cn for Conditionals**: Use `cn()` from `@/lib/utils` for conditional classes (wraps clsx + tailwind-merge for conflict resolution)
+6. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
+7. **Transitions**: Add transitions for interactive states (`transition-colors`)
+8. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
 
 ```typescript
+import { cn } from '@/lib/utils'
+
 <div
-  className={clsx(
+  className={cn(
     'base-classes that-always-apply',
     isActive && 'active-state-classes',
-    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent',
-    'dark:bg-[var(--surface-1)] dark:border-[var(--border)]' // Dark mode variants
+    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent'
   )}
 >
 ```
@@ -620,9 +622,10 @@ Before considering a component/hook complete, verify:
 
 ### Styling
 - [ ] No styles attributes (use className with Tailwind)
-- [ ] Dark mode variants included
+- [ ] Dark mode variants only when values differ from light mode
+- [ ] No duplicate dark: classes with identical values
 - [ ] Consistent spacing using design tokens
-- [ ] clsx for conditional classes
+- [ ] cn() for conditional classes
 
 ### Accessibility
 - [ ] Semantic HTML elements
@@ -652,6 +655,11 @@ Before considering a component/hook complete, verify:
 // ❌ Inline styles
 <div style={{ width: 200, marginTop: 10 }}>
 
+// ❌ Duplicate dark mode classes (same value as light mode)
+<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)] dark:bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'>
+
 // ❌ console.log
 console.log('Debug info')
 
@@ -690,6 +698,14 @@ export function Component() {
 // ✅ Tailwind classes
 <div className='w-[200px] mt-[10px]'>
 
+// ✅ No duplicate dark classes - CSS variables already handle theming
+<div className='text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)]'>
+
+// ✅ Only add dark: when values differ between modes
+<div className='bg-[var(--surface-6)] dark:bg-[var(--surface-9)]'>
+
 // ✅ Logger
 logger.info('Debug info', { context })
 
diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index c1f847bb0..bd18e559e 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -7,25 +7,23 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force dark mode for workspace pages and templates
-  // Force light mode for certain public pages
+  // Force light mode for public/marketing pages
+  // Workspace and templates respect user's theme preference from settings
   const forcedTheme =
-    pathname.startsWith('/workspace') || pathname.startsWith('/templates')
-      ? 'dark'
-      : pathname === '/' ||
-          pathname.startsWith('/login') ||
-          pathname.startsWith('/signup') ||
-          pathname.startsWith('/sso') ||
-          pathname.startsWith('/terms') ||
-          pathname.startsWith('/privacy') ||
-          pathname.startsWith('/invite') ||
-          pathname.startsWith('/verify') ||
-          pathname.startsWith('/careers') ||
-          pathname.startsWith('/changelog') ||
-          pathname.startsWith('/chat') ||
-          pathname.startsWith('/studio')
-        ? 'light'
-        : undefined
+    pathname === '/' ||
+    pathname.startsWith('/login') ||
+    pathname.startsWith('/signup') ||
+    pathname.startsWith('/sso') ||
+    pathname.startsWith('/terms') ||
+    pathname.startsWith('/privacy') ||
+    pathname.startsWith('/invite') ||
+    pathname.startsWith('/verify') ||
+    pathname.startsWith('/careers') ||
+    pathname.startsWith('/changelog') ||
+    pathname.startsWith('/chat') ||
+    pathname.startsWith('/studio')
+      ? 'light'
+      : undefined
 
   return (
     <NextThemesProvider
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 8e63a273f..c6e9ceb88 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -80,91 +80,96 @@
 @layer base {
   :root,
   .light {
-    /* Neutrals (surfaces) */
-    --bg: #ffffff;
-    --surface-1: #ffffff;
-    --surface-2: #fafafa;
-    --surface-3: #f8f8f8;
-    --surface-4: #f6f6f6;
-    --surface-5: #f3f3f3;
-    --surface-6: #f0f0f0;
-    --surface-9: #eaeaea;
-    --surface-11: #e6e6e6;
-    --surface-12: #e0e0e0;
-    --surface-13: #dcdcdc;
-    --surface-14: #d6d6d6;
-    --surface-15: #cfcfcf;
-    --surface-elevated: #ffffff;
-    --bg-strong: #f5f5f5;
+    /* Neutrals (surfaces) - shadcn stone palette */
+    --bg: #fafaf9; /* stone-50 */
+    --surface-1: #fafaf9; /* stone-50 */
+    --surface-2: #ffffff; /* white */
+    --surface-3: #f5f5f4; /* stone-100 */
+    --surface-4: #f5f5f4; /* stone-100 */
+    --surface-5: #eeedec; /* stone-150 */
+    --surface-6: #f5f5f4; /* stone-100 */
+    --surface-9: #f5f5f4; /* stone-100 */
+    --surface-11: #e7e5e4; /* stone-200 */
+    --surface-12: #d6d3d1; /* stone-300 */
+    --surface-13: #a8a29e; /* stone-400 */
+    --surface-14: #78716c; /* stone-500 */
+    --surface-15: #57534e; /* stone-600 */
+    --surface-elevated: #ffffff; /* white */
+    --bg-strong: #e7e5e4; /* stone-200 */
 
-    /* Text */
-    --text-primary: #1b1b1b;
-    --text-secondary: #404040;
-    --text-tertiary: #555555;
-    --text-muted: #737373;
-    --text-subtle: #8a8a8a;
-    --text-inverse: #1b1b1b;
-    --text-error: #ef4444;
+    /* Text - shadcn stone palette for proper contrast */
+    --text-primary: #1c1917; /* stone-900 */
+    --text-secondary: #292524; /* stone-800 */
+    --text-tertiary: #57534e; /* stone-600 */
+    --text-muted: #78716c; /* stone-500 */
+    --text-subtle: #a8a29e; /* stone-400 */
+    --text-inverse: #fafaf9; /* stone-50 */
+    --text-error: #dc2626;
 
-    /* Borders / dividers */
-    --border: #dddddd;
-    --border-strong: #d1d1d1;
-    --divider: #e5e5e5;
-    --border-muted: #eeeeee;
-    --border-success: #d5d5d5;
+    /* Borders / dividers - shadcn stone palette */
+    --border: #d6d3d1; /* stone-300 */
+    --border-strong: #d6d3d1; /* stone-300 */
+    --divider: #e7e5e4; /* stone-200 */
+    --border-muted: #e7e5e4; /* stone-200 */
+    --border-success: #d6d3d1; /* stone-300 */
 
     /* Brand & state */
     --brand-400: #8e4cfb;
     --brand-500: #6f3dfa;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --warning: #ff6600;
+    --brand-tertiary-2: #33c481;
+    --warning: #ea580c;
 
     /* Utility */
     --white: #ffffff;
 
-    /* RGB for opacity usage */
-    --surface-4-rgb: 246 246 246;
-    --surface-5-rgb: 243 243 243;
-    --surface-7-rgb: 230 230 230;
-    --surface-9-rgb: 234 234 234;
-    --divider-rgb: 229 229 229;
+    /* Font weights - lighter for light mode (-20 from dark) */
+    --font-weight-base: 430;
+    --font-weight-medium: 450;
+    --font-weight-semibold: 500;
+
+    /* RGB for opacity usage - stone palette */
+    --surface-4-rgb: 245 245 244; /* stone-100 */
+    --surface-5-rgb: 238 237 236; /* stone-150 */
+    --surface-7-rgb: 245 245 244; /* stone-100 */
+    --surface-9-rgb: 245 245 244; /* stone-100 */
+    --divider-rgb: 231 229 228; /* stone-200 */
     --white-rgb: 255 255 255;
     --black-rgb: 0 0 0;
 
-    /* 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;
+    /* Extended palette - mapped to shadcn stone palette */
+    --c-0D0D0D: #0c0a09; /* stone-950 */
+    --c-1A1A1A: #1c1917; /* stone-900 */
+    --c-1F1F1F: #1c1917; /* stone-900 */
+    --c-2A2A2A: #292524; /* stone-800 */
+    --c-383838: #44403c; /* stone-700 */
+    --c-414141: #57534e; /* stone-600 */
     --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-575757: #78716c; /* stone-500 */
+    --c-686868: #78716c; /* stone-500 */
+    --c-707070: #78716c; /* stone-500 */
+    --c-727272: #78716c; /* stone-500 */
+    --c-737373: #78716c; /* stone-500 */
+    --c-808080: #a8a29e; /* stone-400 */
+    --c-858585: #a8a29e; /* stone-400 */
+    --c-868686: #a8a29e; /* stone-400 */
+    --c-8D8D8D: #a8a29e; /* stone-400 */
+    --c-939393: #a8a29e; /* stone-400 */
+    --c-A8A8A8: #a8a29e; /* stone-400 */
+    --c-B8B8B8: #d6d3d1; /* stone-300 */
+    --c-C0C0C0: #d6d3d1; /* stone-300 */
+    --c-CDCDCD: #d6d3d1; /* stone-300 */
+    --c-D0D0D0: #d6d3d1; /* stone-300 */
+    --c-D2D2D2: #d6d3d1; /* stone-300 */
+    --c-E0E0E0: #e7e5e4; /* stone-200 */
+    --c-E5E5E5: #e7e5e4; /* stone-200 */
+    --c-E8E8E8: #e7e5e4; /* stone-200 */
+    --c-EEEEEE: #f5f5f4; /* stone-100 */
+    --c-F0F0F0: #f5f5f4; /* stone-100 */
+    --c-F4F4F4: #fafaf9; /* stone-50 */
+    --c-F5F5F5: #fafaf9; /* stone-50 */
 
     /* Blues and cyans */
     --c-00B0B0: #00b0b0;
@@ -180,20 +185,27 @@
     --c-8C10FF: #8c10ff;
 
     /* Greens */
-    --c-4CAF50: #4caf50;
+    --c-4CAF50: #22c55e;
 
     /* Oranges / Ambers */
     --c-F59E0B: #f59e0b;
-    --c-F97316: #f97316;
-    --c-FF972F: #ff972f;
+    --c-F97316: #ea580c;
+    --c-FF972F: #f97316;
 
     /* Reds */
     --c-DC2626: #dc2626;
-    --c-F6D2D2: #f6d2d2;
+    --c-F6D2D2: #fecaca;
     --c-F87171: #f87171;
-    --c-FF402F: #ff402f;
+    --c-FF402F: #ef4444;
     --c-B91C1C: #b91c1c;
-    --c-883827: #883827;
+    --c-883827: #7c2d12;
+
+    /* Terminal status badges */
+    --terminal-status-error-bg: #feeeee;
+    --terminal-status-error-border: #f87171;
+    --terminal-status-info-bg: #f5f5f4; /* stone-100 */
+    --terminal-status-info-border: #a8a29e; /* stone-400 */
+    --terminal-status-info-color: #57534e; /* stone-600 */
   }
   .dark {
     /* Neutrals (surfaces) */
@@ -215,8 +227,8 @@
 
     /* Text */
     --text-primary: #e6e6e6;
-    --text-secondary: #b1b1b1;
-    --text-tertiary: #aeaeae;
+    --text-secondary: #cccccc;
+    --text-tertiary: #b3b3b3;
     --text-muted: #787878;
     --text-subtle: #7d7d7d;
     --text-inverse: #1b1b1b;
@@ -233,11 +245,17 @@
     --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
+    --brand-tertiary-2: #33c481;
     --warning: #ff6600;
 
     /* Utility */
     --white: #ffffff;
 
+    /* Font weights - standard weights for dark mode */
+    --font-weight-base: 440;
+    --font-weight-medium: 480;
+    --font-weight-semibold: 550;
+
     /* RGB for opacity usage */
     --surface-4-rgb: 37 37 37;
     --surface-5-rgb: 39 39 39;
@@ -311,6 +329,13 @@
     --c-FF402F: #ff402f;
     --c-B91C1C: #b91c1c;
     --c-883827: #883827;
+
+    /* Terminal status badges */
+    --terminal-status-error-bg: #491515;
+    --terminal-status-error-border: #883827;
+    --terminal-status-info-bg: #383838;
+    --terminal-status-info-border: #686868;
+    --terminal-status-info-color: #b7b7b7;
   }
 }
 
@@ -360,16 +385,16 @@
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--white);
+    background: var(--surface-1);
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--muted-foreground) / 0.3);
+    background-color: var(--surface-12);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground) / 0.4);
+    background-color: var(--surface-13);
   }
 
   /* Dark Mode Global Scrollbar */
@@ -378,20 +403,20 @@
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--muted-foreground) / 0.3);
+    background-color: var(--surface-12);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground) / 0.4);
+    background-color: var(--surface-13);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--muted-foreground) / 0.3) var(--white);
+    scrollbar-color: var(--surface-12) var(--surface-1);
   }
 
   .dark * {
-    scrollbar-color: hsl(var(--muted-foreground) / 0.3) var(--surface-5);
+    scrollbar-color: var(--surface-12) var(--surface-5);
   }
 
   .copilot-scrollable {
diff --git a/apps/sim/app/api/users/me/settings/route.ts b/apps/sim/app/api/users/me/settings/route.ts
index 1e9389463..f8a3276da 100644
--- a/apps/sim/app/api/users/me/settings/route.ts
+++ b/apps/sim/app/api/users/me/settings/route.ts
@@ -13,8 +13,6 @@ const logger = createLogger('UserSettingsAPI')
 const SettingsSchema = z.object({
   theme: z.enum(['system', 'light', 'dark']).optional(),
   autoConnect: z.boolean().optional(),
-  autoPan: z.boolean().optional(),
-  consoleExpandedByDefault: z.boolean().optional(),
   telemetryEnabled: z.boolean().optional(),
   emailPreferences: z
     .object({
@@ -25,7 +23,6 @@ const SettingsSchema = z.object({
     })
     .optional(),
   billingUsageNotificationsEnabled: z.boolean().optional(),
-  showFloatingControls: z.boolean().optional(),
   showTrainingControls: z.boolean().optional(),
   superUserModeEnabled: z.boolean().optional(),
   errorNotificationsEnabled: z.boolean().optional(),
@@ -35,12 +32,9 @@ const SettingsSchema = z.object({
 const defaultSettings = {
   theme: 'system',
   autoConnect: true,
-  autoPan: true,
-  consoleExpandedByDefault: true,
   telemetryEnabled: true,
   emailPreferences: {},
   billingUsageNotificationsEnabled: true,
-  showFloatingControls: true,
   showTrainingControls: false,
   superUserModeEnabled: false,
   errorNotificationsEnabled: true,
@@ -72,12 +66,9 @@ export async function GET() {
         data: {
           theme: userSettings.theme,
           autoConnect: userSettings.autoConnect,
-          autoPan: userSettings.autoPan,
-          consoleExpandedByDefault: userSettings.consoleExpandedByDefault,
           telemetryEnabled: userSettings.telemetryEnabled,
           emailPreferences: userSettings.emailPreferences ?? {},
           billingUsageNotificationsEnabled: userSettings.billingUsageNotificationsEnabled ?? true,
-          showFloatingControls: userSettings.showFloatingControls ?? true,
           showTrainingControls: userSettings.showTrainingControls ?? false,
           superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
index 3bb7c5c49..0bd1686ef 100644
--- a/apps/sim/app/templates/components/template-card.tsx
+++ b/apps/sim/app/templates/components/template-card.tsx
@@ -270,7 +270,7 @@ function TemplateCardInner({
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+        <div className='flex min-w-0 items-center gap-[8px]'>
           {authorImageUrl ? (
             <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
index f971bb19c..3a4449f01 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
@@ -2,7 +2,8 @@
 
 import { useRef, useState } from 'react'
 import { AlertCircle, Loader2, X } from 'lucide-react'
-import { Button, Modal, ModalContent, ModalTitle, Textarea } from '@/components/emcn'
+import { Button, Textarea } from '@/components/emcn'
+import { Modal, ModalContent, ModalTitle } from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { ChunkData, DocumentData } from '@/stores/knowledge/store'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
index fc033b3ef..fc77a48f7 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
@@ -6,7 +6,8 @@ import { AlertCircle, Check, Loader2, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { Button, Input, Label, Modal, ModalContent, ModalTitle, Textarea } from '@/components/emcn'
+import { Button, Input, Label, Textarea } from '@/components/emcn'
+import { Modal, ModalContent, ModalTitle } from '@/components/emcn/components/modal/modal'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Progress } from '@/components/ui/progress'
 import { createLogger } from '@/lib/logs/console/logger'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
index dbbfe9840..161dff219 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
@@ -125,7 +125,7 @@ export const TxtIcon: React.FC<IconProps> = ({ className = 'w-6 h-6' }) => (
     <path d='M14 2V8H20' fill='#9E9E9E' />
     <path
       d='M14 2L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2H14Z'
-      stroke='#424242'
+      stroke='var(--border-muted)'
       strokeWidth='0.5'
       strokeLinecap='round'
       strokeLinejoin='round'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
index 1904f5d92..5bfc9b765 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
@@ -287,7 +287,7 @@ export function WorkflowDetails({
                   <LineChart
                     data={details.errorRates}
                     label='Error Rate'
-                    color='#ef4444'
+                    color='var(--text-error)'
                     unit='%'
                   />
                   {hasDuration && (
@@ -467,12 +467,12 @@ export function WorkflowDetails({
                                   <div
                                     className='h-[6px] w-[6px] rounded-[2px]'
                                     style={{
-                                      backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                      backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                     }}
                                   />
                                   <span
                                     className='font-medium text-[11.5px]'
-                                    style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                    style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                   >
                                     {statusLabel}
                                   </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index b8ef9d1a8..c35afcdc8 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -483,12 +483,12 @@ export default function Logs() {
                                 <div
                                   className='h-[6px] w-[6px] rounded-[2px]'
                                   style={{
-                                    backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                    backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                   }}
                                 />
                                 <span
                                   className='font-medium text-[11.5px]'
-                                  style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                  style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                 >
                                   {statusLabel}
                                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
index 1e15ddcfa..48f3fd3c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -27,7 +27,12 @@ interface TemplateCardProps {
 
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('h-[268px] w-full rounded-[8px] bg-[#202020] p-[8px]', className)}>
+    <div
+      className={cn(
+        'h-[268px] w-full rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
+    >
       <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
 
       <div className='mt-[14px] flex items-center justify-between'>
@@ -196,7 +201,10 @@ function TemplateCardInner({
   return (
     <div
       onClick={handleCardClick}
-      className={cn('w-full cursor-pointer rounded-[8px] bg-[#202020] p-[8px]', className)}
+      className={cn(
+        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
     >
       <div
         ref={previewRef}
@@ -242,7 +250,7 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[#4A4A4A]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-14)]'
                 style={{ marginLeft: '-4px' }}
               >
                 <span className='font-medium text-[10px] text-white'>+{blockTypes.length - 3}</span>
@@ -277,7 +285,7 @@ function TemplateCardInner({
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
             </div>
           ) : (
-            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-14)]'>
               <User className='h-[12px] w-[12px] text-[#888888]' />
             </div>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index ae4e71ae2..c7713fed8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -28,13 +28,13 @@ import {
   ChatMessage,
   OutputSelect,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components'
-import {
-  useChatBoundarySync,
-  useChatDrag,
-  useChatFileUpload,
-  useChatResize,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
+import { useChatFileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
 import { useScrollManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import type { BlockLog, ExecutionResult } from '@/executor/types'
 import { getChatPosition, useChatStore } from '@/stores/chat/store'
@@ -312,7 +312,7 @@ export function Chat() {
   )
 
   // Drag hook
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
@@ -320,7 +320,7 @@ export function Chat() {
   })
 
   // Boundary sync hook - keeps chat within bounds when layout changes
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen: isChatOpen,
     position: actualPosition,
     width: chatWidth,
@@ -334,7 +334,7 @@ export function Chat() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index 239ee1896..40ff48244 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -65,7 +65,7 @@ export function OutputSelect({
   valueMode = 'id',
   disablePopoverPortal = false,
   align = 'start',
-  maxHeight = 300,
+  maxHeight = 200,
 }: OutputSelectProps) {
   const [open, setOpen] = useState(false)
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
@@ -423,6 +423,7 @@ export function OutputSelect({
         maxHeight={maxHeight}
         maxWidth={300}
         minWidth={160}
+        border
         disablePortal={disablePopoverPortal}
         onKeyDown={handleKeyDown}
         tabIndex={0}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
index dc85c4971..a1b7370b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
@@ -1,5 +1 @@
-export { useChatBoundarySync } from './use-chat-boundary-sync'
-export { useChatDrag } from './use-chat-drag'
-export type { ChatFile } from './use-chat-file-upload'
-export { useChatFileUpload } from './use-chat-file-upload'
-export { useChatResize } from './use-chat-resize'
+export { type ChatFile, useChatFileUpload } from './use-chat-file-upload'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
index 2e7e5c328..570b2edc0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -1,8 +1,10 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
+import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
@@ -11,6 +13,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const logger = createLogger('DiffControls')
 
 export const DiffControls = memo(function DiffControls() {
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
   // Optimized: Single diff store subscription
   const {
     isShowingDiff,
@@ -312,7 +315,10 @@ export const DiffControls = memo(function DiffControls() {
 
   return (
     <div
-      className='-translate-x-1/2 fixed left-1/2 z-30'
+      className={clsx(
+        '-translate-x-1/2 fixed left-1/2 z-30',
+        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+      )}
       style={{ bottom: 'calc(var(--terminal-height) + 40px)' }}
     >
       <div className='flex items-center gap-[6px] rounded-[10px] p-[6px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 9e5e870f3..4ca430d85 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -4,7 +4,7 @@ import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { useBlockCore } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
@@ -76,7 +76,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             return (
               <code
                 {...props}
-                className='whitespace-normal rounded bg-gray-200 px-1 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[var(--surface-11)] dark:text-[#F59E0B]'
+                className='whitespace-normal rounded bg-gray-200 px-1 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[var(--surface-11)]'
               >
                 {children}
               </code>
@@ -121,9 +121,10 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
 export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlockNodeData>) {
   const { type, config, name } = data
 
-  const { activeWorkflowId, isEnabled, isFocused, handleClick, hasRing, ringStyles } = useBlockCore(
-    { blockId: id, data }
-  )
+  const { activeWorkflowId, isEnabled, handleClick, hasRing, ringStyles } = useBlockVisual({
+    blockId: id,
+    data,
+  })
   const storedValues = useSubBlockStore(
     useCallback(
       (state) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
index fe40868ed..410f87750 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
@@ -10,6 +11,7 @@ import {
   openCopilotWithMessage,
   useNotificationStore,
 } from '@/stores/notifications'
+import { useTerminalStore } from '@/stores/terminal'
 
 const logger = createLogger('Notifications')
 const MAX_VISIBLE_NOTIFICATIONS = 4
@@ -29,6 +31,7 @@ export const Notifications = memo(function Notifications() {
   const removeNotification = useNotificationStore((state) => state.removeNotification)
   const clearNotifications = useNotificationStore((state) => state.clearNotifications)
   const visibleNotifications = notifications.slice(0, MAX_VISIBLE_NOTIFICATIONS)
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
 
   /**
    * Executes a notification action and handles side effects.
@@ -95,7 +98,12 @@ export const Notifications = memo(function Notifications() {
   }
 
   return (
-    <div className='fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end'>
+    <div
+      className={clsx(
+        'fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end',
+        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+      )}
+    >
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {
         const depth = stacked.length - index - 1
         const xOffset = depth * 3
@@ -105,7 +113,7 @@ export const Notifications = memo(function Notifications() {
           <div
             key={notification.id}
             style={{ transform: `translateX(${xOffset}px)` }}
-            className={`relative h-[78px] w-[240px] overflow-hidden rounded-[4px] border bg-[#232323] transition-transform duration-200 ${
+            className={`relative h-[78px] w-[240px] overflow-hidden rounded-[4px] border bg-[var(--surface-2)] transition-transform duration-200 ${
               index > 0 ? '-mt-[78px]' : ''
             }`}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
index bc64ca929..3f8969afd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -137,29 +137,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
     () => ({
       // Paragraph
       p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-1 font-[470] font-season text-[#707070] text-sm leading-[1.25rem] last:mb-0 dark:text-[#E8E8E8]'>
+        <p className='mb-1 font-base font-season text-[#1f2124] text-sm leading-[1.25rem] last:mb-0 dark:font-[470] dark:text-[#E8E8E8]'>
           {children}
         </p>
       ),
 
       // Headings
       h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[#0D0D0D] dark:text-[#F0F0F0]'>
+        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)] dark:text-[#F0F0F0]'>
           {children}
         </h1>
       ),
       h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[#0D0D0D] text-xl dark:text-[#F0F0F0]'>
+        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl dark:text-[#F0F0F0]'>
           {children}
         </h2>
       ),
       h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-season font-semibold text-[#0D0D0D] text-lg dark:text-[#F0F0F0]'>
+        <h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg dark:text-[#F0F0F0]'>
           {children}
         </h3>
       ),
       h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-5 mb-2 font-season font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
+        <h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base dark:text-[#F0F0F0]'>
           {children}
         </h4>
       ),
@@ -167,7 +167,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Lists
       ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
         <ul
-          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'disc' }}
         >
           {children}
@@ -175,7 +175,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       ),
       ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
         <ol
-          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'decimal' }}
         >
           {children}
@@ -186,7 +186,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         ordered,
       }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
         <li
-          className='font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ display: 'list-item' }}
         >
           {children}
@@ -309,33 +309,35 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
 
       // Bold text
       strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <strong className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</strong>
+        <strong className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>
+          {children}
+        </strong>
       ),
 
       // Bold text (alternative)
       b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <b className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</b>
+        <b className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>{children}</b>
       ),
 
       // Italic text
       em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <em className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</em>
+        <em className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</em>
       ),
 
       // Italic text (alternative)
       i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <i className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</i>
+        <i className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</i>
       ),
 
       // Blockquotes
       blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-season text-[#858585] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
+        <blockquote className='my-4 border-[var(--border-strong)] border-l-4 py-1 pl-4 font-season text-[#3a3d41] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
           {children}
         </blockquote>
       ),
 
       // Horizontal rule
-      hr: () => <hr className='my-8 border-gray-500/[.07] border-t dark:border-gray-400/[.07]' />,
+      hr: () => <hr className='my-8 border-[var(--divider)] border-t dark:border-gray-400/[.07]' />,
 
       // Links
       a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
@@ -347,29 +349,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Tables
       table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
         <div className='my-4 max-w-full overflow-x-auto'>
-          <table className='min-w-full table-auto border border-gray-300 font-season text-sm dark:border-gray-600'>
+          <table className='min-w-full table-auto border border-[var(--border)] font-season text-sm dark:border-gray-600'>
             {children}
           </table>
         </div>
       ),
       thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <thead className='bg-gray-200 text-left dark:bg-[#2A2A2A]'>{children}</thead>
+        <thead className='bg-[var(--surface-9)] text-left dark:bg-[#2A2A2A]'>{children}</thead>
       ),
       tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <tbody className='divide-y divide-gray-300 dark:divide-gray-600'>{children}</tbody>
+        <tbody className='divide-y divide-[var(--border)] dark:divide-gray-600'>{children}</tbody>
       ),
       tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-        <tr className='border-gray-300 border-b transition-colors hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
+        <tr className='border-[var(--border)] border-b transition-colors hover:bg-[var(--surface-9)] dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
           {children}
         </tr>
       ),
       th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
-        <th className='border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#858585] last:border-r-0 dark:border-gray-600 dark:text-[#E0E0E0]'>
+        <th className='border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#3a3d41] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E0E0E0]'>
           {children}
         </th>
       ),
       td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
-        <td className='break-words border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#707070] last:border-r-0 dark:border-gray-600 dark:text-[#E8E8E8]'>
+        <td className='break-words border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#1f2124] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E8E8E8]'>
           {children}
         </td>
       ),
@@ -388,7 +390,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
   )
 
   return (
-    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-[470] font-season text-[#707070] text-sm leading-[1.25rem] dark:text-[#E8E8E8]'>
+    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[#1f2124] text-sm leading-[1.25rem] dark:font-[470] dark:text-[#E8E8E8]'>
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {content}
       </ReactMarkdown>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
index 508cf3991..92bc338c8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
@@ -37,7 +37,7 @@ function ShimmerOverlayText({ label, value, active = false }: ShimmerOverlayText
   return (
     <span className='relative inline-block'>
       <span style={{ color: '#B8B8B8' }}>{label}</span>
-      <span style={{ color: '#787878' }}>{value}</span>
+      <span style={{ color: 'var(--text-muted)' }}>{value}</span>
       {active ? (
         <span
           aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index f78d83edf..b1d8a1a12 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -3,7 +3,7 @@
 import { type FC, memo, useMemo, useState } from 'react'
 import { Check, Copy, RotateCcw, ThumbsDown, ThumbsUp } from 'lucide-react'
 import { Button } from '@/components/emcn'
-import { InlineToolCall } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components'
+import { ToolCall } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components'
 import {
   FileAttachmentDisplay,
   SmoothStreamingText,
@@ -221,7 +221,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               key={`tool-${block.toolCall.id}`}
               className='opacity-100 transition-opacity duration-300 ease-in-out'
             >
-              <InlineToolCall toolCallId={block.toolCall.id} toolCall={block.toolCall} />
+              <ToolCall toolCallId={block.toolCall.id} toolCall={block.toolCall} />
             </div>
           )
         }
@@ -264,7 +264,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
               {/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
               {showCheckpointDiscardModal && (
-                <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]'>
+                <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:bg-[var(--surface-9)]'>
                   <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
                     Continue from a previous message?
                   </p>
@@ -311,7 +311,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
-                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]'
+                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]'
               >
                 <div
                   ref={messageContentRef}
@@ -405,7 +405,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
           {/* Inline Restore Checkpoint Confirmation */}
           {showRestoreConfirmation && (
-            <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]'>
+            <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:bg-[var(--surface-9)]'>
               <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
                 Revert to checkpoint? This will restore your workflow to the state saved at this
                 checkpoint.{' '}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
index a151aef4d..28de03e6c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
@@ -1,6 +1,6 @@
 export * from './copilot-message/copilot-message'
-export * from './inline-tool-call/inline-tool-call'
 export * from './plan-mode-section/plan-mode-section'
 export * from './todo-list/todo-list'
+export * from './tool-call/tool-call'
 export * from './user-input/user-input'
 export * from './welcome/welcome'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
index 23f016823..ec59e6237 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
@@ -35,9 +35,9 @@ import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId
 /**
  * Shared border and background styles
  */
-const SURFACE_5 = 'bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-const SURFACE_9 = 'bg-[var(--surface-9)] dark:bg-[var(--surface-9)]'
-const BORDER_STRONG = 'border-[var(--border-strong)] dark:border-[var(--border-strong)]'
+const SURFACE_5 = 'bg-[var(--surface-5)]'
+const SURFACE_9 = 'bg-[var(--surface-9)]'
+const BORDER_STRONG = 'border-[var(--border-strong)]'
 
 export interface PlanModeSectionProps {
   /**
@@ -184,8 +184,8 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
       style={{ height: `${height}px` }}
     >
       {/* Header with build/edit/save/clear buttons */}
-      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-strong)] border-b py-[6px] pr-[2px] pl-[12px] dark:border-[var(--border-strong)]'>
-        <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide dark:text-[var(--text-secondary)]'>
+      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-strong)] border-b py-[6px] pr-[2px] pl-[12px]'>
+        <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide'>
           Workflow Plan
         </span>
         <div className='ml-auto flex items-center gap-[4px]'>
@@ -252,7 +252,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
             ref={textareaRef}
             value={editedContent}
             onChange={(e) => setEditedContent(e.target.value)}
-            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[13px] text-[var(--text-primary)] leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-primary)]'
+            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[13px] text-[var(--text-primary)] leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
             placeholder='Enter your workflow plan...'
           />
         ) : (
@@ -265,7 +265,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
         className={cn(
           'group flex h-[20px] w-full cursor-ns-resize items-center justify-center border-t',
           BORDER_STRONG,
-          'transition-colors hover:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-9)]',
+          'transition-colors hover:bg-[var(--surface-9)]',
           isResizing && SURFACE_9
         )}
         onMouseDown={handleResizeStart}
@@ -273,7 +273,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
         aria-orientation='horizontal'
         aria-label='Resize plan section'
       >
-        <GripHorizontal className='h-3 w-3 text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)] dark:text-[var(--text-secondary)] dark:group-hover:text-[var(--text-primary)]' />
+        <GripHorizontal className='h-3 w-3 text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
index 26a7e417b..8eafe6216 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
@@ -66,7 +66,7 @@ export const TodoList = memo(function TodoList({
   return (
     <div
       className={cn(
-        'w-full rounded-t-[4px] rounded-b-none border-[var(--surface-11)] border-x border-t bg-[var(--surface-6)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]',
+        'w-full rounded-t-[4px] rounded-b-none border-[var(--surface-11)] border-x border-t bg-[var(--surface-6)] dark:bg-[var(--surface-9)]',
         className
       )}
     >
@@ -84,19 +84,17 @@ export const TodoList = memo(function TodoList({
               <ChevronDown className='h-[14px] w-[14px]' />
             )}
           </Button>
-          <span className='font-medium text-[var(--text-primary)] text-xs dark:text-[var(--text-primary)]'>
-            Todo:
-          </span>
-          <span className='font-medium text-[var(--text-primary)] text-xs dark:text-[var(--text-primary)]'>
+          <span className='font-medium text-[var(--text-primary)] text-xs'>Todo:</span>
+          <span className='font-medium text-[var(--text-primary)] text-xs'>
             {completedCount}/{totalCount}
           </span>
         </div>
 
         <div className='flex flex-1 items-center gap-[8px] pl-[10px]'>
           {/* Progress bar */}
-          <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--surface-11)] dark:bg-[var(--surface-11)]'>
+          <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--surface-11)]'>
             <div
-              className='h-full bg-[var(--brand-400)] transition-all duration-300 ease-out dark:bg-[var(--brand-400)]'
+              className='h-full bg-[var(--brand-400)] transition-all duration-300 ease-out'
               style={{ width: `${progress}%` }}
             />
           </div>
@@ -122,21 +120,20 @@ export const TodoList = memo(function TodoList({
               key={todo.id}
               className={cn(
                 'flex items-start gap-2 px-3 py-1.5 transition-colors hover:bg-[var(--surface-9)]/50 dark:hover:bg-[var(--surface-11)]/50',
-                index !== todos.length - 1 &&
-                  'border-[var(--surface-11)] border-b dark:border-[var(--surface-11)]'
+                index !== todos.length - 1 && 'border-[var(--surface-11)] border-b'
               )}
             >
               {todo.executing ? (
                 <div className='mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
-                  <Loader2 className='h-3 w-3 animate-spin text-[var(--text-primary)] dark:text-[var(--text-primary)]' />
+                  <Loader2 className='h-3 w-3 animate-spin text-[var(--text-primary)]' />
                 </div>
               ) : (
                 <div
                   className={cn(
                     'mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border transition-all',
                     todo.completed
-                      ? 'border-[var(--brand-400)] bg-[var(--brand-400)] dark:border-[var(--brand-400)] dark:bg-[var(--brand-400)]'
-                      : 'border-[#707070] dark:border-[#707070]'
+                      ? 'border-[var(--brand-400)] bg-[var(--brand-400)]'
+                      : 'border-[#707070]'
                   )}
                 >
                   {todo.completed ? <Check className='h-3 w-3 text-white' strokeWidth={3} /> : null}
@@ -146,9 +143,7 @@ export const TodoList = memo(function TodoList({
               <span
                 className={cn(
                   'flex-1 font-base text-[12px] leading-relaxed',
-                  todo.completed
-                    ? 'text-[var(--text-muted)] line-through dark:text-[var(--text-muted)]'
-                    : 'text-[var(--white)] dark:text-[var(--white)]'
+                  todo.completed ? 'text-[var(--text-muted)] line-through' : 'text-[var(--white)]'
                 )}
               >
                 {todo.content}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
similarity index 96%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index c43ae69ed..21a54d0bd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
@@ -12,7 +12,7 @@ import { getEnv } from '@/lib/core/config/env'
 import { CLASS_TOOL_METADATA, useCopilotStore } from '@/stores/panel/copilot/store'
 import type { CopilotToolCall } from '@/stores/panel/copilot/types'
 
-interface InlineToolCallProps {
+interface ToolCallProps {
   toolCall?: CopilotToolCall
   toolCallId?: string
   onStateChange?: (state: any) => void
@@ -139,16 +139,11 @@ function ShimmerOverlayText({
 
   // Special tools: use gradient for entire text
   if (isSpecial) {
-    const baseTextStyle = {
-      backgroundImage: 'linear-gradient(90deg, #B99FFD 0%, #D1BFFF 100%)',
-      WebkitBackgroundClip: 'text',
-      backgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-    }
-
     return (
       <span className={`relative inline-block ${className || ''}`}>
-        <span style={baseTextStyle}>{text}</span>
+        <span className='bg-gradient-to-r from-[#7c3aed] to-[#9061f9] bg-clip-text text-transparent dark:from-[#B99FFD] dark:to-[#D1BFFF]'>
+          {text}
+        </span>
         {active ? (
           <span
             aria-hidden='true'
@@ -182,13 +177,13 @@ function ShimmerOverlayText({
     )
   }
 
-  // Normal tools: two-tone rendering with lighter action verb
+  // Normal tools: two-tone rendering - action verb darker in light mode, lighter in dark mode
   return (
     <span className={`relative inline-block ${className || ''}`}>
       {actionVerb ? (
         <>
-          <span style={{ color: '#B8B8B8' }}>{actionVerb}</span>
-          <span style={{ color: '#787878' }}>{remainder}</span>
+          <span className='text-[#1f2124] dark:text-[#B8B8B8]'>{actionVerb}</span>
+          <span className='text-[#6b7075] dark:text-[var(--text-muted)]'>{remainder}</span>
         </>
       ) : (
         <span>{text}</span>
@@ -453,11 +448,7 @@ function RunSkipButtons({
   )
 }
 
-export function InlineToolCall({
-  toolCall: toolCallProp,
-  toolCallId,
-  onStateChange,
-}: InlineToolCallProps) {
+export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }: ToolCallProps) {
   const [, forceUpdate] = useState({})
   const liveToolCall = useCopilotStore((s) =>
     toolCallId ? s.toolCallsById[toolCallId] : undefined
@@ -692,18 +683,18 @@ export function InlineToolCall({
       return (
         <div className='w-full overflow-hidden rounded border border-muted bg-card'>
           <div className='grid grid-cols-3 gap-0 border-muted/60 border-b bg-muted/40 py-1.5'>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Name
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Type
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Value
             </div>
           </div>
           {ops.length === 0 ? (
-            <div className='px-2 py-2 font-[470] font-season text-[#707070] text-xs dark:text-[#E8E8E8]'>
+            <div className='px-2 py-2 font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
               No operations provided
             </div>
           ) : (
@@ -723,7 +714,7 @@ export function InlineToolCall({
                     />
                   </div>
                   <div className='self-start px-2'>
-                    <span className='rounded border px-1 py-0.5 font-[470] font-season text-[#707070] text-[10px] dark:text-[#E8E8E8]'>
+                    <span className='rounded border px-1 py-0.5 font-[470] font-season text-[#1f2124] text-[10px] dark:text-[#E8E8E8]'>
                       {String(op.type || '')}
                     </span>
                   </div>
@@ -740,7 +731,7 @@ export function InlineToolCall({
                         className='w-full bg-transparent font-[470] font-mono text-amber-700 text-xs outline-none focus:text-amber-800 dark:text-amber-300 dark:focus:text-amber-200'
                       />
                     ) : (
-                      <span className='font-[470] font-season text-[#707070] text-xs dark:text-[#E8E8E8]'>
+                      <span className='font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
                         —
                       </span>
                     )}
@@ -869,7 +860,7 @@ export function InlineToolCall({
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm dark:text-[#939393]'
+          className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
         />
         <div className='mt-[8px]'>{renderPendingDetails()}</div>
         {showButtons && (
@@ -895,7 +886,7 @@ export function InlineToolCall({
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm dark:text-[#939393]'
+          className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
         />
       </div>
       {isExpandableTool && expanded && <div>{renderPendingDetails()}</div>}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
index 341c670db..74696f7e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
@@ -552,11 +552,11 @@ export function MentionMenu({
                         active={index === submenuActiveIndex}
                       >
                         <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(log.createdAt)}
                         </span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='text-[10px] capitalize'>
                           {(log.trigger || 'manual').toLowerCase()}
                         </span>
@@ -583,9 +583,7 @@ export function MentionMenu({
                     <span className='flex-1 truncate'>{item.label}</span>
                     {item.category === 'logs' && (
                       <>
-                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                          ·
-                        </span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(item.data.createdAt)}
                         </span>
@@ -758,15 +756,11 @@ export function MentionMenu({
                   mentionData.logsList.map((log) => (
                     <PopoverItem key={log.id} onClick={() => insertLogMention(log)}>
                       <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                      <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        ·
-                      </span>
+                      <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                       <span className='whitespace-nowrap text-[10px]'>
                         {formatTimestamp(log.createdAt)}
                       </span>
-                      <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        ·
-                      </span>
+                      <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                       <span className='text-[10px] capitalize'>
                         {(log.trigger || 'manual').toLowerCase()}
                       </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
index d270281c3..b4c9dc249 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
@@ -64,16 +64,14 @@ export function Welcome({ onQuestionClick, mode = 'ask' }: WelcomeProps) {
           >
             <div className='flex flex-col items-start'>
               <p className='font-medium'>{title}</p>
-              <p className='text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                {question}
-              </p>
+              <p className='text-[var(--text-secondary)]'>{question}</p>
             </div>
           </Button>
         ))}
       </div>
 
       {/* Tips */}
-      <p className='pt-[12px] text-center text-[13px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
+      <p className='pt-[12px] text-center text-[13px] text-[var(--text-secondary)]'>
         Tip: Use <span className='font-medium'>@</span> to reference chats, workflows, knowledge,
         blocks, or templates
       </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 96b5404fc..07df6e8c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -385,8 +385,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         className='flex h-full flex-col overflow-hidden'
       >
         {/* Header */}
-        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'>
-          <h2 className='font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'>
+        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'>
+          <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>
             {currentChat?.title || 'New Chat'}
           </h2>
           <div className='flex items-center gap-[8px]'>
@@ -405,7 +405,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                     <ChatHistorySkeleton />
                   </PopoverScrollArea>
                 ) : groupedChats.length === 0 ? (
-                  <div className='px-[6px] py-[16px] text-center text-[12px] text-[var(--white)] dark:text-[var(--white)]'>
+                  <div className='px-[6px] py-[16px] text-center text-[12px] text-[var(--white)]'>
                     No chats yet
                   </div>
                 ) : (
@@ -460,7 +460,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         {!isInitialized ? (
           <div className='flex h-full w-full items-center justify-center'>
             <div className='flex flex-col items-center gap-3'>
-              <p className='text-muted-foreground text-sm'>Loading chat history...</p>
+              <p className='text-muted-foreground text-sm'>Loading copilot</p>
             </div>
           </div>
         ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx
deleted file mode 100644
index c18800c12..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Label } from '@/components/emcn'
-import { CopyButton } from '@/components/ui/copy-button'
-
-interface ApiEndpointProps {
-  endpoint: string
-  showLabel?: boolean
-}
-
-export function ApiEndpoint({ endpoint, showLabel = true }: ApiEndpointProps) {
-  return (
-    <div className='space-y-1.5'>
-      {showLabel && (
-        <div className='flex items-center gap-1.5'>
-          <Label className='font-medium text-sm'>API Endpoint</Label>
-        </div>
-      )}
-      <div className='group relative rounded-md border bg-background transition-colors hover:bg-muted/50'>
-        <pre className='overflow-x-auto whitespace-pre-wrap p-3 font-mono text-xs'>{endpoint}</pre>
-        <CopyButton text={endpoint} />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
new file mode 100644
index 000000000..577e37ba7
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -0,0 +1,664 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Clipboard } from 'lucide-react'
+import {
+  Badge,
+  Button,
+  Code,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
+  Tooltip,
+} from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
+
+interface WorkflowDeploymentInfo {
+  isDeployed: boolean
+  deployedAt?: string
+  apiKey: string
+  endpoint: string
+  exampleCommand: string
+  needsRedeployment: boolean
+}
+
+interface ApiDeployProps {
+  workflowId: string | null
+  deploymentInfo: WorkflowDeploymentInfo | null
+  isLoading: boolean
+  needsRedeployment: boolean
+  apiDeployError: string | null
+  getInputFormatExample: (includeStreaming?: boolean) => string
+  selectedStreamingOutputs: string[]
+  onSelectedStreamingOutputsChange: (outputs: string[]) => void
+}
+
+type AsyncExampleType = 'execute' | 'status' | 'rate-limits'
+type CodeLanguage = 'curl' | 'python' | 'javascript' | 'typescript'
+
+type CopiedState = {
+  endpoint: boolean // @remark: not used
+  sync: boolean
+  stream: boolean
+  async: boolean
+}
+
+const LANGUAGE_LABELS: Record<CodeLanguage, string> = {
+  curl: 'cURL',
+  python: 'Python',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+}
+
+const LANGUAGE_SYNTAX: Record<CodeLanguage, 'python' | 'javascript' | 'json'> = {
+  curl: 'javascript',
+  python: 'python',
+  javascript: 'javascript',
+  typescript: 'javascript',
+}
+
+export function ApiDeploy({
+  workflowId,
+  deploymentInfo,
+  isLoading,
+  needsRedeployment,
+  apiDeployError,
+  getInputFormatExample,
+  selectedStreamingOutputs,
+  onSelectedStreamingOutputsChange,
+}: ApiDeployProps) {
+  const [asyncExampleType, setAsyncExampleType] = useState<AsyncExampleType>('execute')
+  const [language, setLanguage] = useState<CodeLanguage>('curl')
+  const [copied, setCopied] = useState<CopiedState>({
+    endpoint: false, // @remark: not used
+    sync: false,
+    stream: false,
+    async: false,
+  })
+
+  const isAsyncEnabled = isTruthy(getEnv('NEXT_PUBLIC_TRIGGER_DEV_ENABLED'))
+  const info = deploymentInfo ? { ...deploymentInfo, needsRedeployment } : null
+
+  const getBaseEndpoint = () => {
+    if (!info) return ''
+    return info.endpoint.replace(info.apiKey, '$SIM_API_KEY')
+  }
+
+  const getPayloadObject = (): Record<string, unknown> => {
+    const inputExample = getInputFormatExample ? getInputFormatExample(false) : ''
+    const match = inputExample.match(/-d\s*'([\s\S]*)'/)
+    if (match) {
+      try {
+        return JSON.parse(match[1]) as Record<string, unknown>
+      } catch {
+        return { input: 'your data here' }
+      }
+    }
+    return { input: 'your data here' }
+  }
+
+  const getStreamPayloadObject = (): Record<string, unknown> => {
+    const payload: Record<string, unknown> = { ...getPayloadObject(), stream: true }
+    if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
+      payload.selectedOutputs = selectedStreamingOutputs
+    }
+    return payload
+  }
+
+  const getSyncCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const payload = getPayloadObject()
+
+    switch (language) {
+      case 'curl':
+        return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+      case 'python':
+        return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')}
+)
+
+print(response.json())`
+
+      case 'javascript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const data = await response.json();
+console.log(data);`
+
+      case 'typescript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const data: Record<string, unknown> = await response.json();
+console.log(data);`
+
+      default:
+        return ''
+    }
+  }
+
+  const getStreamCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const payload = getStreamPayloadObject()
+
+    switch (language) {
+      case 'curl':
+        return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+      case 'python':
+        return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')},
+    stream=True
+)
+
+for line in response.iter_lines():
+    if line:
+        print(line.decode("utf-8"))`
+
+      case 'javascript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const reader = response.body.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) break;
+  console.log(decoder.decode(value));
+}`
+
+      case 'typescript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const reader = response.body!.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) break;
+  console.log(decoder.decode(value));
+}`
+
+      default:
+        return ''
+    }
+  }
+
+  const getAsyncCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const baseUrl = endpoint.split('/api/workflows/')[0]
+    const payload = getPayloadObject()
+
+    switch (asyncExampleType) {
+      case 'execute':
+        switch (language) {
+          case 'curl':
+            return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -H "X-Execution-Mode: async" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+          case 'python':
+            return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json",
+        "X-Execution-Mode": "async"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')}
+)
+
+job = response.json()
+print(job)  # Contains job_id for status checking`
+
+          case 'javascript':
+            return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json",
+    "X-Execution-Mode": "async"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const job = await response.json();
+console.log(job); // Contains job_id for status checking`
+
+          case 'typescript':
+            return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json",
+    "X-Execution-Mode": "async"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const job: { job_id: string } = await response.json();
+console.log(job); // Contains job_id for status checking`
+
+          default:
+            return ''
+        }
+
+      case 'status':
+        switch (language) {
+          case 'curl':
+            return `curl -H "X-API-Key: $SIM_API_KEY" \\
+  ${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION`
+
+          case 'python':
+            return `import requests
+
+response = requests.get(
+    "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+    headers={"X-API-Key": SIM_API_KEY}
+)
+
+status = response.json()
+print(status)`
+
+          case 'javascript':
+            return `const response = await fetch(
+  "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const status = await response.json();
+console.log(status);`
+
+          case 'typescript':
+            return `const response = await fetch(
+  "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const status: Record<string, unknown> = await response.json();
+console.log(status);`
+
+          default:
+            return ''
+        }
+
+      case 'rate-limits':
+        switch (language) {
+          case 'curl':
+            return `curl -H "X-API-Key: $SIM_API_KEY" \\
+  ${baseUrl}/api/users/me/usage-limits`
+
+          case 'python':
+            return `import requests
+
+response = requests.get(
+    "${baseUrl}/api/users/me/usage-limits",
+    headers={"X-API-Key": SIM_API_KEY}
+)
+
+limits = response.json()
+print(limits)`
+
+          case 'javascript':
+            return `const response = await fetch(
+  "${baseUrl}/api/users/me/usage-limits",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const limits = await response.json();
+console.log(limits);`
+
+          case 'typescript':
+            return `const response = await fetch(
+  "${baseUrl}/api/users/me/usage-limits",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const limits: Record<string, unknown> = await response.json();
+console.log(limits);`
+
+          default:
+            return ''
+        }
+
+      default:
+        return ''
+    }
+  }
+
+  const getAsyncExampleTitle = () => {
+    switch (asyncExampleType) {
+      case 'execute':
+        return 'Execute Job'
+      case 'status':
+        return 'Check Status'
+      case 'rate-limits':
+        return 'Rate Limits'
+      default:
+        return 'Execute Job'
+    }
+  }
+
+  const handleCopy = (key: keyof CopiedState, value: string) => {
+    navigator.clipboard.writeText(value)
+    setCopied((prev) => ({ ...prev, [key]: true }))
+    setTimeout(() => setCopied((prev) => ({ ...prev, [key]: false })), 2000)
+  }
+
+  if (isLoading || !info) {
+    return (
+      <div className='space-y-[16px]'>
+        {apiDeployError && (
+          <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+            <div className='font-semibold'>API Deployment Error</div>
+            <div>{apiDeployError}</div>
+          </div>
+        )}
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[62px]' />
+          <Skeleton className='h-[28px] w-[260px] rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
+          <Skeleton className='h-[120px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[180px]' />
+          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='space-y-[16px]'>
+      {apiDeployError && (
+        <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+          <div className='font-semibold'>API Deployment Error</div>
+          <div>{apiDeployError}</div>
+        </div>
+      )}
+
+      {/* <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            URL
+          </Label>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={() => handleCopy('endpoint', info.endpoint)}
+                aria-label='Copy endpoint'
+                className='!p-1.5 -my-1.5'
+              >
+                {copied.endpoint ? (
+                  <Check className='h-3 w-3' />
+                ) : (
+                  <Clipboard className='h-3 w-3' />
+                )}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              <span>{copied.endpoint ? 'Copied' : 'Copy'}</span>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </div>
+        <Code.Viewer
+          code={info.endpoint}
+          language='javascript'
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div> */}
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Language
+          </Label>
+        </div>
+        <div className='inline-flex gap-[2px]'>
+          {(Object.keys(LANGUAGE_LABELS) as CodeLanguage[]).map((lang, index, arr) => (
+            <Button
+              key={lang}
+              type='button'
+              variant={language === lang ? 'active' : 'default'}
+              onClick={() => setLanguage(lang)}
+              className={`px-[8px] py-[4px] text-[12px] ${
+                index === 0
+                  ? 'rounded-r-none'
+                  : index === arr.length - 1
+                    ? 'rounded-l-none'
+                    : 'rounded-none'
+              }`}
+            >
+              {LANGUAGE_LABELS[lang]}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Run workflow
+          </Label>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={() => handleCopy('sync', getSyncCommand())}
+                aria-label='Copy command'
+                className='!p-1.5 -my-1.5'
+              >
+                {copied.sync ? <Check className='h-3 w-3' /> : <Clipboard className='h-3 w-3' />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              <span>{copied.sync ? 'Copied' : 'Copy'}</span>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </div>
+        <Code.Viewer
+          code={getSyncCommand()}
+          language={LANGUAGE_SYNTAX[language]}
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div>
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Run workflow (stream response)
+          </Label>
+          <div className='flex items-center gap-[8px]'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  onClick={() => handleCopy('stream', getStreamCommand())}
+                  aria-label='Copy command'
+                  className='!p-1.5 -my-1.5'
+                >
+                  {copied.stream ? (
+                    <Check className='h-3 w-3' />
+                  ) : (
+                    <Clipboard className='h-3 w-3' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <span>{copied.stream ? 'Copied' : 'Copy'}</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+            <OutputSelect
+              workflowId={workflowId}
+              selectedOutputs={selectedStreamingOutputs}
+              onOutputSelect={onSelectedStreamingOutputsChange}
+              placeholder='Select outputs'
+              valueMode='label'
+              align='end'
+            />
+          </div>
+        </div>
+        <Code.Viewer
+          code={getStreamCommand()}
+          language={LANGUAGE_SYNTAX[language]}
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div>
+
+      {isAsyncEnabled && (
+        <div>
+          <div className='mb-[6.5px] flex items-center justify-between'>
+            <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Run workflow (async)
+            </Label>
+            <div className='flex items-center gap-[8px]'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={() => handleCopy('async', getAsyncCommand())}
+                    aria-label='Copy command'
+                    className='!p-1.5 -my-1.5'
+                  >
+                    {copied.async ? (
+                      <Check className='h-3 w-3' />
+                    ) : (
+                      <Clipboard className='h-3 w-3' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{copied.async ? 'Copied' : 'Copy'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <div className='min-w-0 max-w-full'>
+                    <Badge
+                      variant='outline'
+                      className='flex-none cursor-pointer whitespace-nowrap rounded-[6px]'
+                    >
+                      <span className='whitespace-nowrap text-[12px]'>
+                        {getAsyncExampleTitle()}
+                      </span>
+                    </Badge>
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent
+                  side='bottom'
+                  align='end'
+                  sideOffset={4}
+                  maxHeight={300}
+                  maxWidth={300}
+                  minWidth={160}
+                  border
+                >
+                  <PopoverItem
+                    active={asyncExampleType === 'execute'}
+                    onClick={() => setAsyncExampleType('execute')}
+                  >
+                    Execute Job
+                  </PopoverItem>
+                  <PopoverItem
+                    active={asyncExampleType === 'status'}
+                    onClick={() => setAsyncExampleType('status')}
+                  >
+                    Check Status
+                  </PopoverItem>
+                  <PopoverItem
+                    active={asyncExampleType === 'rate-limits'}
+                    onClick={() => setAsyncExampleType('rate-limits')}
+                  >
+                    Rate Limits
+                  </PopoverItem>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <Code.Viewer
+            code={getAsyncCommand()}
+            language={LANGUAGE_SYNTAX[language]}
+            wrapText
+            className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx
deleted file mode 100644
index f5080afef..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import { useState } from 'react'
-import { Check, Copy, Eye, EyeOff, Plus, RefreshCw } from 'lucide-react'
-import { Button, Input, Label } from '@/components/emcn'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Card, CardContent } from '@/components/ui'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { generatePassword } from '@/lib/core/security/encryption'
-import { cn } from '@/lib/core/utils/cn'
-import type { AuthType } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-
-interface AuthSelectorProps {
-  authType: AuthType
-  password: string
-  emails: string[]
-  onAuthTypeChange: (type: AuthType) => void
-  onPasswordChange: (password: string) => void
-  onEmailsChange: (emails: string[]) => void
-  disabled?: boolean
-  isExistingChat?: boolean
-  error?: string
-}
-
-export function AuthSelector({
-  authType,
-  password,
-  emails,
-  onAuthTypeChange,
-  onPasswordChange,
-  onEmailsChange,
-  disabled = false,
-  isExistingChat = false,
-  error,
-}: AuthSelectorProps) {
-  const [showPassword, setShowPassword] = useState(false)
-  const [newEmail, setNewEmail] = useState('')
-  const [emailError, setEmailError] = useState('')
-  const [copySuccess, setCopySuccess] = useState(false)
-
-  const handleGeneratePassword = () => {
-    const password = generatePassword(24)
-    onPasswordChange(password)
-  }
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-    setCopySuccess(true)
-    setTimeout(() => setCopySuccess(false), 2000)
-  }
-
-  const handleAddEmail = () => {
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail) && !newEmail.startsWith('@')) {
-      setEmailError('Please enter a valid email or domain (e.g., user@example.com or @example.com)')
-      return
-    }
-
-    if (emails.includes(newEmail)) {
-      setEmailError('This email or domain is already in the list')
-      return
-    }
-
-    onEmailsChange([...emails, newEmail])
-    setNewEmail('')
-    setEmailError('')
-  }
-
-  const handleRemoveEmail = (email: string) => {
-    onEmailsChange(emails.filter((e) => e !== email))
-  }
-
-  const ssoEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
-  const authOptions = ssoEnabled
-    ? (['public', 'password', 'email', 'sso'] as const)
-    : (['public', 'password', 'email'] as const)
-
-  return (
-    <div className='space-y-2'>
-      <Label className='font-medium text-sm'>Access Control</Label>
-
-      {/* Auth Type Selection */}
-      <div
-        className={cn('grid grid-cols-1 gap-3', ssoEnabled ? 'md:grid-cols-4' : 'md:grid-cols-3')}
-      >
-        {authOptions.map((type) => (
-          <Card
-            key={type}
-            className={cn(
-              'cursor-pointer overflow-hidden rounded-[4px] shadow-none transition-all duration-200',
-              authType === type
-                ? 'border border-[#727272] bg-[var(--border-strong)] dark:border-[#727272] dark:bg-[var(--border-strong)]'
-                : 'border border-[var(--surface-11)] bg-[var(--surface-6)] hover:bg-[var(--surface-9)] dark:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-11)]'
-            )}
-          >
-            <CardContent className='relative flex flex-col items-center justify-center p-3 text-center'>
-              <button
-                type='button'
-                className='absolute inset-0 z-10 h-full w-full cursor-pointer'
-                onClick={() => !disabled && onAuthTypeChange(type)}
-                aria-label={`Select ${type} access`}
-                disabled={disabled}
-              />
-              <div className='justify-center text-center align-middle'>
-                <h3
-                  className={cn(
-                    'font-medium text-xs',
-                    authType === type && 'text-[var(--text-primary)]'
-                  )}
-                >
-                  {type === 'public' && 'Public Access'}
-                  {type === 'password' && 'Password Protected'}
-                  {type === 'email' && 'Email Access'}
-                  {type === 'sso' && 'SSO Access'}
-                </h3>
-                <p className='text-[11px] text-[var(--text-tertiary)]'>
-                  {type === 'public' && 'Anyone can access your chat'}
-                  {type === 'password' && 'Secure with a single password'}
-                  {type === 'email' && 'Restrict to specific emails'}
-                  {type === 'sso' && 'Authenticate via SSO provider'}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Auth Settings */}
-      {authType === 'password' && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              Password Settings
-            </h3>
-
-            {isExistingChat && !password && (
-              <div className='mb-2 flex items-center text-[11px] text-[var(--text-secondary)]'>
-                <div className='mr-2 rounded-full bg-[var(--surface-9)] px-2 py-0.5 font-medium text-[var(--text-secondary)] dark:bg-[var(--surface-11)]'>
-                  Password set
-                </div>
-                <span>Current password is securely stored</span>
-              </div>
-            )}
-
-            <div className='relative'>
-              <Input
-                type={showPassword ? 'text' : 'password'}
-                placeholder={
-                  isExistingChat
-                    ? 'Enter new password (leave empty to keep current)'
-                    : 'Enter password'
-                }
-                value={password}
-                onChange={(e) => onPasswordChange(e.target.value)}
-                disabled={disabled}
-                className='pr-28'
-                required={!isExistingChat}
-                autoComplete='new-password'
-              />
-              <div className='-translate-y-1/2 absolute top-1/2 right-1 flex items-center gap-1'>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={handleGeneratePassword}
-                  disabled={disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  <RefreshCw className='h-3.5 w-3.5 transition-transform duration-200 hover:rotate-90' />
-                  <span className='sr-only'>Generate password</span>
-                </Button>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={() => copyToClipboard(password)}
-                  disabled={!password || disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  {copySuccess ? (
-                    <Check className='h-3.5 w-3.5' />
-                  ) : (
-                    <Copy className='h-3.5 w-3.5' />
-                  )}
-                  <span className='sr-only'>Copy password</span>
-                </Button>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={() => setShowPassword(!showPassword)}
-                  disabled={disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  {showPassword ? (
-                    <EyeOff className='h-3.5 w-3.5' />
-                  ) : (
-                    <Eye className='h-3.5 w-3.5' />
-                  )}
-                  <span className='sr-only'>
-                    {showPassword ? 'Hide password' : 'Show password'}
-                  </span>
-                </Button>
-              </div>
-            </div>
-
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              {isExistingChat
-                ? 'Leaving this empty will keep the current password. Enter a new password to change it.'
-                : 'This password will be required to access your chat.'}
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {(authType === 'email' || authType === 'sso') && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              {authType === 'email' ? 'Email Access Settings' : 'SSO Access Settings'}
-            </h3>
-
-            <div className='flex gap-2'>
-              <Input
-                placeholder='user@example.com or @domain.com'
-                value={newEmail}
-                onChange={(e) => setNewEmail(e.target.value)}
-                disabled={disabled}
-                className='flex-1'
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault()
-                    handleAddEmail()
-                  }
-                }}
-              />
-              <Button
-                type='button'
-                variant='default'
-                onClick={handleAddEmail}
-                disabled={!newEmail.trim() || disabled}
-                className='shrink-0 gap-[4px]'
-              >
-                <Plus className='h-4 w-4' />
-                Add
-              </Button>
-            </div>
-
-            {emailError && <p className='mt-1 text-destructive text-sm'>{emailError}</p>}
-
-            {emails.length > 0 && (
-              <div className='mt-3 max-h-[150px] overflow-y-auto rounded-md border bg-background px-2 py-0 shadow-none'>
-                <ul className='divide-y divide-border'>
-                  {emails.map((email) => (
-                    <li key={email} className='relative'>
-                      <div className='group my-1 flex items-center justify-between rounded-sm px-2 py-2 text-sm'>
-                        <span className='font-medium text-foreground'>{email}</span>
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          onClick={() => handleRemoveEmail(email)}
-                          disabled={disabled}
-                          className='h-7 w-7 p-0 opacity-70'
-                        >
-                          <Trash className='h-4 w-4' />
-                        </Button>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              {authType === 'email'
-                ? 'Add specific emails or entire domains (@example.com)'
-                : 'Add specific emails or entire domains (@example.com) that can access via SSO'}
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {authType === 'public' && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              Public Access Settings
-            </h3>
-            <p className='text-[11px] text-[var(--text-secondary)]'>
-              This chat will be publicly accessible to anyone with the link.
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {error && <p className='text-destructive text-sm'>{error}</p>}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx
deleted file mode 100644
index 11547a255..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx
+++ /dev/null
@@ -1,486 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
-import {
-  Button,
-  Input,
-  Label,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  Textarea,
-} from '@/components/emcn'
-import { Alert, AlertDescription, Skeleton } from '@/components/ui'
-import { getEmailDomain } from '@/lib/core/utils/urls'
-import { createLogger } from '@/lib/logs/console/logger'
-import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
-import { AuthSelector } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector'
-import { IdentifierInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input'
-import { SuccessView } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view'
-import { useChatDeployment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment'
-import { useChatForm } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-
-const logger = createLogger('ChatDeploy')
-
-interface ChatDeployProps {
-  workflowId: string
-  deploymentInfo: {
-    apiKey: string
-  } | null
-  onChatExistsChange?: (exists: boolean) => void
-  chatSubmitting: boolean
-  setChatSubmitting: (submitting: boolean) => void
-  onValidationChange?: (isValid: boolean) => void
-  showDeleteConfirmation?: boolean
-  setShowDeleteConfirmation?: (show: boolean) => void
-  onDeploymentComplete?: () => void
-  onDeployed?: () => void
-  onUndeploy?: () => Promise<void>
-  onVersionActivated?: () => void
-}
-
-interface ExistingChat {
-  id: string
-  identifier: string
-  title: string
-  description: string
-  authType: 'public' | 'password' | 'email'
-  allowedEmails: string[]
-  outputConfigs: Array<{ blockId: string; path: string }>
-  customizations?: {
-    welcomeMessage?: string
-  }
-  isActive: boolean
-}
-
-export function ChatDeploy({
-  workflowId,
-  deploymentInfo,
-  onChatExistsChange,
-  chatSubmitting,
-  setChatSubmitting,
-  onValidationChange,
-  showDeleteConfirmation: externalShowDeleteConfirmation,
-  setShowDeleteConfirmation: externalSetShowDeleteConfirmation,
-  onDeploymentComplete,
-  onDeployed,
-  onUndeploy,
-  onVersionActivated,
-}: ChatDeployProps) {
-  const [isLoading, setIsLoading] = useState(false)
-  const [existingChat, setExistingChat] = useState<ExistingChat | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
-  const [imageUploadError, setImageUploadError] = useState<string | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isImageUploading, setIsImageUploading] = useState(false)
-  const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
-  const [showSuccessView, setShowSuccessView] = useState(false)
-
-  // Use external state for delete confirmation if provided
-  const showDeleteConfirmation =
-    externalShowDeleteConfirmation !== undefined
-      ? externalShowDeleteConfirmation
-      : internalShowDeleteConfirmation
-
-  const setShowDeleteConfirmation =
-    externalSetShowDeleteConfirmation || setInternalShowDeleteConfirmation
-
-  const { formData, errors, updateField, setError, validateForm, setFormData } = useChatForm()
-  const { deployedUrl, deployChat } = useChatDeployment()
-  const formRef = useRef<HTMLFormElement>(null)
-  const [isIdentifierValid, setIsIdentifierValid] = useState(false)
-
-  const isFormValid =
-    isIdentifierValid &&
-    Boolean(formData.title.trim()) &&
-    formData.selectedOutputBlocks.length > 0 &&
-    (formData.authType !== 'password' ||
-      Boolean(formData.password.trim()) ||
-      Boolean(existingChat)) &&
-    ((formData.authType !== 'email' && formData.authType !== 'sso') || formData.emails.length > 0)
-
-  useEffect(() => {
-    onValidationChange?.(isFormValid)
-  }, [isFormValid, onValidationChange])
-
-  useEffect(() => {
-    if (workflowId) {
-      fetchExistingChat()
-    }
-  }, [workflowId])
-
-  const fetchExistingChat = async () => {
-    try {
-      setIsLoading(true)
-      const response = await fetch(`/api/workflows/${workflowId}/chat/status`)
-
-      if (response.ok) {
-        const data = await response.json()
-
-        if (data.isDeployed && data.deployment) {
-          const detailResponse = await fetch(`/api/chat/manage/${data.deployment.id}`)
-
-          if (detailResponse.ok) {
-            const chatDetail = await detailResponse.json()
-            setExistingChat(chatDetail)
-
-            setFormData({
-              identifier: chatDetail.identifier || '',
-              title: chatDetail.title || '',
-              description: chatDetail.description || '',
-              authType: chatDetail.authType || 'public',
-              password: '',
-              emails: Array.isArray(chatDetail.allowedEmails) ? [...chatDetail.allowedEmails] : [],
-              welcomeMessage:
-                chatDetail.customizations?.welcomeMessage || 'Hi there! How can I help you today?',
-              selectedOutputBlocks: Array.isArray(chatDetail.outputConfigs)
-                ? chatDetail.outputConfigs.map(
-                    (config: { blockId: string; path: string }) =>
-                      `${config.blockId}_${config.path}`
-                  )
-                : [],
-            })
-
-            if (chatDetail.customizations?.imageUrl) {
-              setImageUrl(chatDetail.customizations.imageUrl)
-            }
-            setImageUploadError(null)
-
-            onChatExistsChange?.(true)
-          }
-        } else {
-          setExistingChat(null)
-          setImageUrl(null)
-          setImageUploadError(null)
-          onChatExistsChange?.(false)
-        }
-      }
-    } catch (error) {
-      logger.error('Error fetching chat status:', error)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleSubmit = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault()
-
-    if (chatSubmitting) return
-
-    setChatSubmitting(true)
-
-    try {
-      if (!validateForm()) {
-        setChatSubmitting(false)
-        return
-      }
-
-      if (!isIdentifierValid && formData.identifier !== existingChat?.identifier) {
-        setError('identifier', 'Please wait for identifier validation to complete')
-        setChatSubmitting(false)
-        return
-      }
-
-      await deployChat(workflowId, formData, null, existingChat?.id, imageUrl)
-
-      onChatExistsChange?.(true)
-      setShowSuccessView(true)
-      onDeployed?.()
-      onVersionActivated?.()
-
-      await fetchExistingChat()
-    } catch (error: any) {
-      if (error.message?.includes('identifier')) {
-        setError('identifier', error.message)
-      } else {
-        setError('general', error.message)
-      }
-    } finally {
-      setChatSubmitting(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!existingChat || !existingChat.id) return
-
-    try {
-      setIsDeleting(true)
-
-      const response = await fetch(`/api/chat/manage/${existingChat.id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Failed to delete chat')
-      }
-
-      setExistingChat(null)
-      setImageUrl(null)
-      setImageUploadError(null)
-      onChatExistsChange?.(false)
-
-      onDeploymentComplete?.()
-    } catch (error: any) {
-      logger.error('Failed to delete chat:', error)
-      setError('general', error.message || 'An unexpected error occurred while deleting')
-    } finally {
-      setIsDeleting(false)
-      setShowDeleteConfirmation(false)
-    }
-  }
-
-  if (isLoading) {
-    return <LoadingSkeleton />
-  }
-
-  if (deployedUrl && showSuccessView) {
-    return (
-      <>
-        <div id='chat-deploy-form'>
-          <SuccessView
-            deployedUrl={deployedUrl}
-            existingChat={existingChat}
-            onDelete={() => setShowDeleteConfirmation(true)}
-            onUpdate={() => setShowSuccessView(false)}
-          />
-        </div>
-
-        {/* Delete Confirmation Dialog */}
-        <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
-          <ModalContent>
-            <ModalHeader>
-              <ModalTitle>Delete Chat?</ModalTitle>
-              <ModalDescription>
-                This will delete your chat deployment at "{getEmailDomain()}/chat/
-                {existingChat?.identifier}". All users will lose access to the chat interface. You
-                can recreate this chat deployment at any time.
-              </ModalDescription>
-            </ModalHeader>
-            <ModalFooter>
-              <Button
-                variant='outline'
-                className='h-[32px] px-[12px]'
-                onClick={() => setShowDeleteConfirmation(false)}
-                disabled={isDeleting}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleDelete}
-                disabled={isDeleting}
-                className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-              >
-                {isDeleting ? (
-                  <>
-                    <Loader2 className='mr-2 h-3.5 w-3.5 animate-spin' />
-                    Deleting...
-                  </>
-                ) : (
-                  'Delete'
-                )}
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <form
-        id='chat-deploy-form'
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 overflow-y-auto px-1'
-      >
-        {errors.general && (
-          <Alert variant='destructive'>
-            <AlertTriangle className='h-4 w-4' />
-            <AlertDescription>{errors.general}</AlertDescription>
-          </Alert>
-        )}
-
-        <div className='space-y-4'>
-          <IdentifierInput
-            value={formData.identifier}
-            onChange={(value) => updateField('identifier', value)}
-            originalIdentifier={existingChat?.identifier || undefined}
-            disabled={chatSubmitting}
-            onValidationChange={setIsIdentifierValid}
-            isEditingExisting={!!existingChat}
-          />
-
-          <div className='space-y-2'>
-            <Label htmlFor='title' className='font-medium text-sm'>
-              Chat Title
-            </Label>
-            <Input
-              id='title'
-              placeholder='Customer Support Assistant'
-              value={formData.title}
-              onChange={(e) => updateField('title', e.target.value)}
-              required
-              disabled={chatSubmitting}
-            />
-            {errors.title && <p className='text-destructive text-sm'>{errors.title}</p>}
-          </div>
-          <div className='space-y-2'>
-            <Label htmlFor='description' className='font-medium text-sm'>
-              Description
-            </Label>
-            <Textarea
-              id='description'
-              placeholder='A brief description of what this chat does'
-              value={formData.description}
-              onChange={(e) => updateField('description', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
-            />
-          </div>
-          <div className='space-y-2'>
-            <Label className='font-medium text-sm'>Chat Output</Label>
-            <OutputSelect
-              workflowId={workflowId}
-              selectedOutputs={formData.selectedOutputBlocks}
-              onOutputSelect={(values) => updateField('selectedOutputBlocks', values)}
-              placeholder='Select which block outputs to use'
-              disabled={chatSubmitting}
-            />
-            {errors.outputBlocks && (
-              <p className='text-destructive text-sm'>{errors.outputBlocks}</p>
-            )}
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              Select which block's output to return to the user in the chat interface
-            </p>
-          </div>
-
-          <AuthSelector
-            authType={formData.authType}
-            password={formData.password}
-            emails={formData.emails}
-            onAuthTypeChange={(type) => updateField('authType', type)}
-            onPasswordChange={(password) => updateField('password', password)}
-            onEmailsChange={(emails) => updateField('emails', emails)}
-            disabled={chatSubmitting}
-            isExistingChat={!!existingChat}
-            error={errors.password || errors.emails}
-          />
-          <div className='space-y-2'>
-            <Label htmlFor='welcomeMessage' className='font-medium text-sm'>
-              Welcome Message
-            </Label>
-            <Textarea
-              id='welcomeMessage'
-              placeholder='Enter a welcome message for your chat'
-              value={formData.welcomeMessage}
-              onChange={(e) => updateField('welcomeMessage', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
-            />
-            <p className='text-muted-foreground text-xs'>
-              This message will be displayed when users first open the chat
-            </p>
-          </div>
-
-          {/* <div className='space-y-2'>
-            <Label className='font-medium text-sm'>Chat Logo</Label>
-            <ImageUpload
-              value={imageUrl}
-              onUpload={(url) => {
-                setImageUrl(url)
-                setImageUploadError(null)
-              }}
-              onError={setImageUploadError}
-              onUploadStart={setIsImageUploading}
-              disabled={chatSubmitting}
-              uploadToServer={true}
-              height='h-32'
-              hideHeader={true}
-            />
-            {imageUploadError && <p className='text-destructive text-sm'>{imageUploadError}</p>}
-            {!imageUrl && !isImageUploading && (
-              <p className='text-muted-foreground text-xs'>
-                Upload a logo for your chat (PNG, JPEG - max 5MB)
-              </p>
-            )}
-          </div> */}
-
-          <button
-            type='button'
-            data-delete-trigger
-            onClick={() => setShowDeleteConfirmation(true)}
-            style={{ display: 'none' }}
-          />
-        </div>
-      </form>
-
-      <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete Chat?</ModalTitle>
-            <ModalDescription>
-              This will delete your chat deployment at "{getEmailDomain()}/chat/
-              {existingChat?.identifier}". All users will lose access to the chat interface. You can
-              recreate this chat deployment at any time.
-            </ModalDescription>
-          </ModalHeader>
-          <ModalFooter>
-            <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
-              onClick={() => setShowDeleteConfirmation(false)}
-              disabled={isDeleting}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className='mr-2 h-3.5 w-3.5 animate-spin' />
-                  Deleting...
-                </>
-              ) : (
-                'Delete'
-              )}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className='space-y-4 py-3'>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-24' />
-        <Skeleton className='h-10 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-20' />
-        <Skeleton className='h-10 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-32' />
-        <Skeleton className='h-24 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-40' />
-        <Skeleton className='h-32 w-full rounded-lg' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
new file mode 100644
index 000000000..889e2e4fe
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -0,0 +1,871 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { AlertTriangle, Check, Clipboard, Eye, EyeOff, Loader2, RefreshCw, X } from 'lucide-react'
+import { Button, Input, Label, Textarea, Tooltip } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Alert, AlertDescription, Skeleton } from '@/components/ui'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { generatePassword } from '@/lib/core/security/encryption'
+import { cn } from '@/lib/core/utils/cn'
+import { getEmailDomain } from '@/lib/core/utils/urls'
+import { createLogger } from '@/lib/logs/console/logger'
+import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
+import {
+  type AuthType,
+  type ChatFormData,
+  useChatDeployment,
+  useIdentifierValidation,
+} from './hooks'
+
+const logger = createLogger('ChatDeploy')
+
+const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
+
+interface ChatDeployProps {
+  workflowId: string
+  deploymentInfo: {
+    apiKey: string
+  } | null
+  existingChat: ExistingChat | null
+  isLoadingChat: boolean
+  onRefetchChat: () => Promise<void>
+  onChatExistsChange?: (exists: boolean) => void
+  chatSubmitting: boolean
+  setChatSubmitting: (submitting: boolean) => void
+  onValidationChange?: (isValid: boolean) => void
+  showDeleteConfirmation?: boolean
+  setShowDeleteConfirmation?: (show: boolean) => void
+  onDeploymentComplete?: () => void
+  onDeployed?: () => void
+  onVersionActivated?: () => void
+}
+
+export interface ExistingChat {
+  id: string
+  identifier: string
+  title: string
+  description: string
+  authType: 'public' | 'password' | 'email' | 'sso'
+  allowedEmails: string[]
+  outputConfigs: Array<{ blockId: string; path: string }>
+  customizations?: {
+    welcomeMessage?: string
+    imageUrl?: string
+  }
+  isActive: boolean
+}
+
+interface FormErrors {
+  identifier?: string
+  title?: string
+  password?: string
+  emails?: string
+  outputBlocks?: string
+  general?: string
+}
+
+const initialFormData: ChatFormData = {
+  identifier: '',
+  title: '',
+  description: '',
+  authType: 'public',
+  password: '',
+  emails: [],
+  welcomeMessage: 'Hi there! How can I help you today?',
+  selectedOutputBlocks: [],
+}
+
+export function ChatDeploy({
+  workflowId,
+  deploymentInfo,
+  existingChat,
+  isLoadingChat,
+  onRefetchChat,
+  onChatExistsChange,
+  chatSubmitting,
+  setChatSubmitting,
+  onValidationChange,
+  showDeleteConfirmation: externalShowDeleteConfirmation,
+  setShowDeleteConfirmation: externalSetShowDeleteConfirmation,
+  onDeploymentComplete,
+  onDeployed,
+  onVersionActivated,
+}: ChatDeployProps) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
+
+  const showDeleteConfirmation =
+    externalShowDeleteConfirmation !== undefined
+      ? externalShowDeleteConfirmation
+      : internalShowDeleteConfirmation
+
+  const setShowDeleteConfirmation =
+    externalSetShowDeleteConfirmation || setInternalShowDeleteConfirmation
+
+  const [formData, setFormData] = useState<ChatFormData>(initialFormData)
+  const [errors, setErrors] = useState<FormErrors>({})
+  const { deployChat } = useChatDeployment()
+  const formRef = useRef<HTMLFormElement>(null)
+  const [isIdentifierValid, setIsIdentifierValid] = useState(false)
+  const [hasInitializedForm, setHasInitializedForm] = useState(false)
+
+  const updateField = <K extends keyof ChatFormData>(field: K, value: ChatFormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field as keyof FormErrors]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }))
+    }
+  }
+
+  const setError = (field: keyof FormErrors, message: string) => {
+    setErrors((prev) => ({ ...prev, [field]: message }))
+  }
+
+  const validateForm = (isExistingChat: boolean): boolean => {
+    const newErrors: FormErrors = {}
+
+    if (!formData.identifier.trim()) {
+      newErrors.identifier = 'Identifier is required'
+    } else if (!IDENTIFIER_PATTERN.test(formData.identifier)) {
+      newErrors.identifier = 'Identifier can only contain lowercase letters, numbers, and hyphens'
+    }
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required'
+    }
+
+    if (formData.authType === 'password' && !isExistingChat && !formData.password.trim()) {
+      newErrors.password = 'Password is required when using password protection'
+    }
+
+    if (
+      (formData.authType === 'email' || formData.authType === 'sso') &&
+      formData.emails.length === 0
+    ) {
+      newErrors.emails = `At least one email or domain is required when using ${formData.authType === 'sso' ? 'SSO' : 'email'} access control`
+    }
+
+    if (formData.selectedOutputBlocks.length === 0) {
+      newErrors.outputBlocks = 'Please select at least one output block'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const isFormValid =
+    isIdentifierValid &&
+    Boolean(formData.title.trim()) &&
+    formData.selectedOutputBlocks.length > 0 &&
+    (formData.authType !== 'password' ||
+      Boolean(formData.password.trim()) ||
+      Boolean(existingChat)) &&
+    ((formData.authType !== 'email' && formData.authType !== 'sso') || formData.emails.length > 0)
+
+  useEffect(() => {
+    onValidationChange?.(isFormValid)
+  }, [isFormValid, onValidationChange])
+
+  useEffect(() => {
+    if (existingChat && !hasInitializedForm) {
+      setFormData({
+        identifier: existingChat.identifier || '',
+        title: existingChat.title || '',
+        description: existingChat.description || '',
+        authType: existingChat.authType || 'public',
+        password: '',
+        emails: Array.isArray(existingChat.allowedEmails) ? [...existingChat.allowedEmails] : [],
+        welcomeMessage:
+          existingChat.customizations?.welcomeMessage || 'Hi there! How can I help you today?',
+        selectedOutputBlocks: Array.isArray(existingChat.outputConfigs)
+          ? existingChat.outputConfigs.map(
+              (config: { blockId: string; path: string }) => `${config.blockId}_${config.path}`
+            )
+          : [],
+      })
+
+      if (existingChat.customizations?.imageUrl) {
+        setImageUrl(existingChat.customizations.imageUrl)
+      }
+
+      setHasInitializedForm(true)
+    } else if (!existingChat && !isLoadingChat) {
+      setFormData(initialFormData)
+      setImageUrl(null)
+      setHasInitializedForm(false)
+    }
+  }, [existingChat, isLoadingChat, hasInitializedForm])
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault()
+
+    if (chatSubmitting) return
+
+    setChatSubmitting(true)
+
+    try {
+      if (!validateForm(!!existingChat)) {
+        setChatSubmitting(false)
+        return
+      }
+
+      if (!isIdentifierValid && formData.identifier !== existingChat?.identifier) {
+        setError('identifier', 'Please wait for identifier validation to complete')
+        setChatSubmitting(false)
+        return
+      }
+
+      const chatUrl = await deployChat(
+        workflowId,
+        formData,
+        deploymentInfo,
+        existingChat?.id,
+        imageUrl
+      )
+
+      onChatExistsChange?.(true)
+      onDeployed?.()
+      onVersionActivated?.()
+
+      if (chatUrl) {
+        window.open(chatUrl, '_blank', 'noopener,noreferrer')
+      }
+
+      setHasInitializedForm(false)
+      await onRefetchChat()
+    } catch (error: any) {
+      if (error.message?.includes('identifier')) {
+        setError('identifier', error.message)
+      } else {
+        setError('general', error.message)
+      }
+    } finally {
+      setChatSubmitting(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!existingChat || !existingChat.id) return
+
+    try {
+      setIsDeleting(true)
+
+      const response = await fetch(`/api/chat/manage/${existingChat.id}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || 'Failed to delete chat')
+      }
+
+      setImageUrl(null)
+      setHasInitializedForm(false)
+      onChatExistsChange?.(false)
+      await onRefetchChat()
+
+      onDeploymentComplete?.()
+    } catch (error: any) {
+      logger.error('Failed to delete chat:', error)
+      setError('general', error.message || 'An unexpected error occurred while deleting')
+    } finally {
+      setIsDeleting(false)
+      setShowDeleteConfirmation(false)
+    }
+  }
+
+  if (isLoadingChat) {
+    return <LoadingSkeleton />
+  }
+
+  return (
+    <>
+      <form
+        id='chat-deploy-form'
+        ref={formRef}
+        onSubmit={handleSubmit}
+        className='-mx-1 space-y-4 overflow-y-auto px-1'
+      >
+        {errors.general && (
+          <Alert variant='destructive'>
+            <AlertTriangle className='h-4 w-4' />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className='space-y-[12px]'>
+          <IdentifierInput
+            value={formData.identifier}
+            onChange={(value) => updateField('identifier', value)}
+            originalIdentifier={existingChat?.identifier || undefined}
+            disabled={chatSubmitting}
+            onValidationChange={setIsIdentifierValid}
+            isEditingExisting={!!existingChat}
+          />
+
+          <div>
+            <Label
+              htmlFor='title'
+              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Title
+            </Label>
+            <Input
+              id='title'
+              placeholder='Customer Support Assistant'
+              value={formData.title}
+              onChange={(e) => updateField('title', e.target.value)}
+              required
+              disabled={chatSubmitting}
+            />
+            {errors.title && <p className='mt-1 text-destructive text-sm'>{errors.title}</p>}
+          </div>
+
+          <div>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Output
+            </Label>
+            <OutputSelect
+              workflowId={workflowId}
+              selectedOutputs={formData.selectedOutputBlocks}
+              onOutputSelect={(values) => updateField('selectedOutputBlocks', values)}
+              placeholder='Select which block outputs to use'
+              disabled={chatSubmitting}
+            />
+            {errors.outputBlocks && (
+              <p className='mt-1 text-destructive text-sm'>{errors.outputBlocks}</p>
+            )}
+          </div>
+
+          <AuthSelector
+            authType={formData.authType}
+            password={formData.password}
+            emails={formData.emails}
+            onAuthTypeChange={(type) => updateField('authType', type)}
+            onPasswordChange={(password) => updateField('password', password)}
+            onEmailsChange={(emails) => updateField('emails', emails)}
+            disabled={chatSubmitting}
+            isExistingChat={!!existingChat}
+            error={errors.password || errors.emails}
+          />
+          <div>
+            <Label
+              htmlFor='welcomeMessage'
+              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Welcome message
+            </Label>
+            <Textarea
+              id='welcomeMessage'
+              placeholder='Enter a welcome message for your chat'
+              value={formData.welcomeMessage}
+              onChange={(e) => updateField('welcomeMessage', e.target.value)}
+              rows={3}
+              disabled={chatSubmitting}
+              className='min-h-[80px] resize-none'
+            />
+            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+              This message will be displayed when users first open the chat
+            </p>
+          </div>
+
+          <button
+            type='button'
+            data-delete-trigger
+            onClick={() => setShowDeleteConfirmation(true)}
+            style={{ display: 'none' }}
+          />
+        </div>
+      </form>
+
+      <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Chat</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete this chat?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will remove the chat at "{getEmailDomain()}/chat/{existingChat?.identifier}"
+                and make it unavailable to all users.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => setShowDeleteConfirmation(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
+            >
+              {isDeleting && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className='-mx-1 space-y-4 px-1'>
+      <div className='space-y-[12px]'>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[46px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[95px]' />
+          <Skeleton className='h-[28px] w-[170px] rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[115px]' />
+          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='mt-[6.5px] h-[14px] w-[340px]' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface IdentifierInputProps {
+  value: string
+  onChange: (value: string) => void
+  originalIdentifier?: string
+  disabled?: boolean
+  onValidationChange?: (isValid: boolean) => void
+  isEditingExisting?: boolean
+}
+
+const getDomainPrefix = (() => {
+  const prefix = `${getEmailDomain()}/chat/`
+  return () => prefix
+})()
+
+function IdentifierInput({
+  value,
+  onChange,
+  originalIdentifier,
+  disabled = false,
+  onValidationChange,
+  isEditingExisting = false,
+}: IdentifierInputProps) {
+  const { isChecking, error, isValid } = useIdentifierValidation(
+    value,
+    originalIdentifier,
+    isEditingExisting
+  )
+
+  useEffect(() => {
+    onValidationChange?.(isValid)
+  }, [isValid, onValidationChange])
+
+  const handleChange = (newValue: string) => {
+    const lowercaseValue = newValue.toLowerCase()
+    onChange(lowercaseValue)
+  }
+
+  const fullUrl = `${getEnv('NEXT_PUBLIC_APP_URL')}/chat/${value}`
+  const displayUrl = fullUrl.replace(/^https?:\/\//, '')
+
+  return (
+    <div>
+      <Label
+        htmlFor='chat-url'
+        className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+      >
+        URL
+      </Label>
+      <div
+        className={cn(
+          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--surface-11)]',
+          error && 'border-[var(--text-error)]'
+        )}
+      >
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-6)] px-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-9)]'>
+          {getDomainPrefix()}
+        </div>
+        <div className='relative flex-1'>
+          <Input
+            id='chat-url'
+            placeholder='company-name'
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            required
+            disabled={disabled}
+            className={cn(
+              'rounded-none border-0 pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
+              isChecking && 'pr-[32px]'
+            )}
+          />
+          {isChecking && (
+            <div className='-translate-y-1/2 absolute top-1/2 right-2'>
+              <Loader2 className='h-4 w-4 animate-spin text-[var(--text-tertiary)]' />
+            </div>
+          )}
+        </div>
+      </div>
+      {error && <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{error}</p>}
+      <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+        {isEditingExisting && value ? (
+          <>
+            Live at:{' '}
+            <a
+              href={fullUrl}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-[var(--text-primary)] hover:underline'
+            >
+              {displayUrl}
+            </a>
+          </>
+        ) : (
+          'The unique URL path where your chat will be accessible'
+        )}
+      </p>
+    </div>
+  )
+}
+
+interface AuthSelectorProps {
+  authType: AuthType
+  password: string
+  emails: string[]
+  onAuthTypeChange: (type: AuthType) => void
+  onPasswordChange: (password: string) => void
+  onEmailsChange: (emails: string[]) => void
+  disabled?: boolean
+  isExistingChat?: boolean
+  error?: string
+}
+
+const AUTH_LABELS: Record<AuthType, string> = {
+  public: 'Public',
+  password: 'Password',
+  email: 'Email',
+  sso: 'SSO',
+}
+
+function AuthSelector({
+  authType,
+  password,
+  emails,
+  onAuthTypeChange,
+  onPasswordChange,
+  onEmailsChange,
+  disabled = false,
+  isExistingChat = false,
+  error,
+}: AuthSelectorProps) {
+  const [showPassword, setShowPassword] = useState(false)
+  const [emailInputValue, setEmailInputValue] = useState('')
+  const [emailError, setEmailError] = useState('')
+  const [copySuccess, setCopySuccess] = useState(false)
+  const [invalidEmails, setInvalidEmails] = useState<string[]>([])
+
+  const handleGeneratePassword = () => {
+    const newPassword = generatePassword(24)
+    onPasswordChange(newPassword)
+  }
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopySuccess(true)
+    setTimeout(() => setCopySuccess(false), 2000)
+  }
+
+  const addEmail = (email: string): boolean => {
+    if (!email.trim()) return false
+
+    const normalized = email.trim().toLowerCase()
+    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized) || normalized.startsWith('@')
+
+    if (emails.includes(normalized) || invalidEmails.includes(normalized)) {
+      return false
+    }
+
+    if (!isValid) {
+      setInvalidEmails((prev) => [...prev, normalized])
+      setEmailInputValue('')
+      return false
+    }
+
+    setEmailError('')
+    onEmailsChange([...emails, normalized])
+    setEmailInputValue('')
+    return true
+  }
+
+  const handleRemoveEmail = (emailToRemove: string) => {
+    onEmailsChange(emails.filter((e) => e !== emailToRemove))
+  }
+
+  const handleRemoveInvalidEmail = (index: number) => {
+    setInvalidEmails((prev) => prev.filter((_, i) => i !== index))
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (['Enter', ',', ' '].includes(e.key) && emailInputValue.trim()) {
+      e.preventDefault()
+      addEmail(emailInputValue)
+    }
+
+    if (e.key === 'Backspace' && !emailInputValue) {
+      if (invalidEmails.length > 0) {
+        handleRemoveInvalidEmail(invalidEmails.length - 1)
+      } else if (emails.length > 0) {
+        handleRemoveEmail(emails[emails.length - 1])
+      }
+    }
+  }
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    const pastedText = e.clipboardData.getData('text')
+    const pastedEmails = pastedText.split(/[\s,;]+/).filter(Boolean)
+
+    let addedCount = 0
+    pastedEmails.forEach((email) => {
+      if (addEmail(email)) {
+        addedCount++
+      }
+    })
+
+    if (addedCount === 0 && pastedEmails.length === 1) {
+      setEmailInputValue(emailInputValue + pastedEmails[0])
+    }
+  }
+
+  const ssoEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
+  const authOptions = ssoEnabled
+    ? (['public', 'password', 'email', 'sso'] as const)
+    : (['public', 'password', 'email'] as const)
+
+  return (
+    <div className='space-y-[16px]'>
+      <div>
+        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          Access control
+        </Label>
+        <div className='inline-flex gap-[2px]'>
+          {authOptions.map((type, index, arr) => (
+            <Button
+              key={type}
+              type='button'
+              variant={authType === type ? 'active' : 'default'}
+              onClick={() => !disabled && onAuthTypeChange(type)}
+              disabled={disabled}
+              className={`px-[8px] py-[4px] text-[12px] ${
+                index === 0
+                  ? 'rounded-r-none'
+                  : index === arr.length - 1
+                    ? 'rounded-l-none'
+                    : 'rounded-none'
+              }`}
+            >
+              {AUTH_LABELS[type]}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {authType === 'password' && (
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Password
+          </Label>
+          <div className='relative'>
+            <Input
+              type={showPassword ? 'text' : 'password'}
+              placeholder={isExistingChat ? 'Enter new password to change' : 'Enter password'}
+              value={password}
+              onChange={(e) => onPasswordChange(e.target.value)}
+              disabled={disabled}
+              className='pr-[88px]'
+              required={!isExistingChat}
+              autoComplete='new-password'
+            />
+            <div className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={handleGeneratePassword}
+                    disabled={disabled}
+                    aria-label='Generate password'
+                    className='!p-1.5'
+                  >
+                    <RefreshCw className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Generate</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => copyToClipboard(password)}
+                    disabled={!password || disabled}
+                    aria-label='Copy password'
+                    className='!p-1.5'
+                  >
+                    {copySuccess ? (
+                      <Check className='h-3 w-3' />
+                    ) : (
+                      <Clipboard className='h-3 w-3' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{copySuccess ? 'Copied' : 'Copy'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => setShowPassword(!showPassword)}
+                    disabled={disabled}
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    className='!p-1.5'
+                  >
+                    {showPassword ? <EyeOff className='h-3 w-3' /> : <Eye className='h-3 w-3' />}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{showPassword ? 'Hide' : 'Show'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          </div>
+          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            {isExistingChat
+              ? 'Leave empty to keep the current password'
+              : 'This password will be required to access your chat'}
+          </p>
+        </div>
+      )}
+
+      {(authType === 'email' || authType === 'sso') && (
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            {authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
+          </Label>
+          <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
+            {invalidEmails.map((email, index) => (
+              <EmailTag
+                key={`invalid-${index}`}
+                email={email}
+                onRemove={() => handleRemoveInvalidEmail(index)}
+                disabled={disabled}
+                isInvalid={true}
+              />
+            ))}
+            {emails.map((email, index) => (
+              <EmailTag
+                key={`valid-${index}`}
+                email={email}
+                onRemove={() => handleRemoveEmail(email)}
+                disabled={disabled}
+              />
+            ))}
+            <Input
+              type='text'
+              value={emailInputValue}
+              onChange={(e) => setEmailInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              onBlur={() => emailInputValue.trim() && addEmail(emailInputValue)}
+              placeholder={
+                emails.length > 0 || invalidEmails.length > 0
+                  ? 'Add another email'
+                  : 'Enter emails or domains (@example.com)'
+              }
+              className={cn(
+                'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+                emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+              )}
+              disabled={disabled}
+            />
+          </div>
+          {emailError && (
+            <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{emailError}</p>
+          )}
+          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            {authType === 'email'
+              ? 'Add specific emails or entire domains (@example.com)'
+              : 'Add emails or domains that can access via SSO'}
+          </p>
+        </div>
+      )}
+
+      {error && <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{error}</p>}
+    </div>
+  )
+}
+
+interface EmailTagProps {
+  email: string
+  onRemove: () => void
+  disabled?: boolean
+  isInvalid?: boolean
+}
+
+function EmailTag({ email, onRemove, disabled, isInvalid }: EmailTagProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
+        isInvalid
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+      )}
+    >
+      <span className='max-w-[200px] truncate'>{email}</span>
+      {!disabled && (
+        <button
+          type='button'
+          onClick={onRemove}
+          className={cn(
+            'flex-shrink-0 transition-colors focus:outline-none',
+            isInvalid
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+          )}
+          aria-label={`Remove ${email}`}
+        >
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts
new file mode 100644
index 000000000..34a3694b5
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts
@@ -0,0 +1,2 @@
+export { type AuthType, type ChatFormData, useChatDeployment } from './use-chat-deployment'
+export { useIdentifierValidation } from './use-identifier-validation'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts
new file mode 100644
index 000000000..d7eda4084
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts
@@ -0,0 +1,131 @@
+import { useCallback } from 'react'
+import { z } from 'zod'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { OutputConfig } from '@/stores/chat/store'
+
+const logger = createLogger('ChatDeployment')
+
+export type AuthType = 'public' | 'password' | 'email' | 'sso'
+
+export interface ChatFormData {
+  identifier: string
+  title: string
+  description: string
+  authType: AuthType
+  password: string
+  emails: string[]
+  welcomeMessage: string
+  selectedOutputBlocks: string[]
+}
+
+const chatSchema = z.object({
+  workflowId: z.string().min(1, 'Workflow ID is required'),
+  identifier: z
+    .string()
+    .min(1, 'Identifier is required')
+    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens'),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  customizations: z.object({
+    primaryColor: z.string(),
+    welcomeMessage: z.string(),
+    imageUrl: z.string().optional(),
+  }),
+  authType: z.enum(['public', 'password', 'email', 'sso']).default('public'),
+  password: z.string().optional(),
+  allowedEmails: z.array(z.string()).optional().default([]),
+  outputConfigs: z
+    .array(
+      z.object({
+        blockId: z.string(),
+        path: z.string(),
+      })
+    )
+    .optional()
+    .default([]),
+})
+
+/**
+ * Parses output block selections into structured output configs
+ */
+function parseOutputConfigs(selectedOutputBlocks: string[]): OutputConfig[] {
+  return selectedOutputBlocks
+    .map((outputId) => {
+      const firstUnderscoreIndex = outputId.indexOf('_')
+      if (firstUnderscoreIndex !== -1) {
+        const blockId = outputId.substring(0, firstUnderscoreIndex)
+        const path = outputId.substring(firstUnderscoreIndex + 1)
+        if (blockId && path) {
+          return { blockId, path }
+        }
+      }
+      return null
+    })
+    .filter((config): config is OutputConfig => config !== null)
+}
+
+/**
+ * Hook for deploying or updating a chat interface
+ */
+export function useChatDeployment() {
+  const deployChat = useCallback(
+    async (
+      workflowId: string,
+      formData: ChatFormData,
+      deploymentInfo: { apiKey: string } | null,
+      existingChatId?: string,
+      imageUrl?: string | null
+    ): Promise<string> => {
+      const outputConfigs = parseOutputConfigs(formData.selectedOutputBlocks)
+
+      const payload = {
+        workflowId,
+        identifier: formData.identifier.trim(),
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        customizations: {
+          primaryColor: 'var(--brand-primary-hover-hex)',
+          welcomeMessage: formData.welcomeMessage.trim(),
+          ...(imageUrl && { imageUrl }),
+        },
+        authType: formData.authType,
+        password: formData.authType === 'password' ? formData.password : undefined,
+        allowedEmails:
+          formData.authType === 'email' || formData.authType === 'sso' ? formData.emails : [],
+        outputConfigs,
+        apiKey: deploymentInfo?.apiKey,
+        deployApiEnabled: !existingChatId,
+      }
+
+      chatSchema.parse(payload)
+
+      const endpoint = existingChatId ? `/api/chat/manage/${existingChatId}` : '/api/chat'
+      const method = existingChatId ? 'PATCH' : 'POST'
+
+      const response = await fetch(endpoint, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+
+      const result = await response.json()
+
+      if (!response.ok) {
+        if (result.error === 'Identifier already in use') {
+          throw new Error('This identifier is already in use')
+        }
+        throw new Error(result.error || `Failed to ${existingChatId ? 'update' : 'deploy'} chat`)
+      }
+
+      if (!result.chatUrl) {
+        throw new Error('Response missing chatUrl')
+      }
+
+      logger.info(`Chat ${existingChatId ? 'updated' : 'deployed'} successfully:`, result.chatUrl)
+      return result.chatUrl
+    },
+    []
+  )
+
+  return { deployChat }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
similarity index 75%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
index 3c9b675fb..a7d78d47a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
@@ -1,10 +1,25 @@
 import { useEffect, useRef, useState } from 'react'
 
+const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
+const DEBOUNCE_MS = 500
+
+interface IdentifierValidationState {
+  isChecking: boolean
+  error: string | null
+  isValid: boolean
+}
+
+/**
+ * Hook for validating chat identifier availability with debounced API checks
+ * @param identifier - The identifier to validate
+ * @param originalIdentifier - The original identifier when editing an existing chat
+ * @param isEditingExisting - Whether we're editing an existing chat deployment
+ */
 export function useIdentifierValidation(
   identifier: string,
   originalIdentifier?: string,
   isEditingExisting?: boolean
-) {
+): IdentifierValidationState {
   const [isChecking, setIsChecking] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isValid, setIsValid] = useState(false)
@@ -16,36 +31,29 @@ export function useIdentifierValidation(
       clearTimeout(timeoutRef.current)
     }
 
-    // Reset states immediately when identifier changes
     setError(null)
     setIsValid(false)
     setIsChecking(false)
 
-    // Skip validation if empty
     if (!identifier.trim()) {
       return
     }
 
-    // Skip validation if same as original (existing deployment)
     if (originalIdentifier && identifier === originalIdentifier) {
       setIsValid(true)
       return
     }
 
-    // If we're editing an existing deployment but originalIdentifier isn't available yet,
-    // assume it's valid and wait for the data to load
     if (isEditingExisting && !originalIdentifier) {
       setIsValid(true)
       return
     }
 
-    // Validate format first - client-side validation
-    if (!/^[a-z0-9-]+$/.test(identifier)) {
+    if (!IDENTIFIER_PATTERN.test(identifier)) {
       setError('Identifier can only contain lowercase letters, numbers, and hyphens')
       return
     }
 
-    // Check availability with server
     setIsChecking(true)
     timeoutRef.current = setTimeout(async () => {
       try {
@@ -64,13 +72,13 @@ export function useIdentifierValidation(
           setError(null)
           setIsValid(true)
         }
-      } catch (error) {
+      } catch {
         setError('Error checking identifier availability')
         setIsValid(false)
       } finally {
         setIsChecking(false)
       }
-    }, 500)
+    }, DEBOUNCE_MS)
 
     return () => {
       if (timeoutRef.current) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx
deleted file mode 100644
index 2a5e73330..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { cn } from '@/lib/core/utils/cn'
-
-interface DeployStatusProps {
-  needsRedeployment: boolean
-}
-
-export function DeployStatus({ needsRedeployment }: DeployStatusProps) {
-  return (
-    <div className='flex items-center gap-2'>
-      <span className='font-medium text-[var(--text-secondary)] text-xs'>Status:</span>
-      <div className='flex items-center gap-1.5'>
-        <div className='relative flex items-center justify-center'>
-          {needsRedeployment ? (
-            <>
-              <div className='absolute h-3 w-3 animate-ping rounded-full bg-amber-500/20' />
-              <div className='relative h-2 w-2 rounded-full bg-amber-500' />
-            </>
-          ) : (
-            <>
-              <div className='absolute h-3 w-3 animate-ping rounded-full bg-green-500/20' />
-              <div className='relative h-2 w-2 rounded-full bg-green-500' />
-            </>
-          )}
-        </div>
-        <span
-          className={cn(
-            'font-medium text-xs',
-            needsRedeployment
-              ? 'text-amber-600 dark:text-amber-400'
-              : 'text-green-600 dark:text-green-400'
-          )}
-        >
-          {needsRedeployment ? 'Changes Detected' : 'Active'}
-        </span>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx
deleted file mode 100644
index 2d68a5d74..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
-import { cn } from '@/lib/core/utils/cn'
-import { createLogger } from '@/lib/logs/console/logger'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('DeployedWorkflowCard')
-
-interface DeployedWorkflowCardProps {
-  currentWorkflowState?: WorkflowState
-  activeDeployedWorkflowState?: WorkflowState
-  selectedDeployedWorkflowState?: WorkflowState
-  selectedVersionLabel?: string
-  className?: string
-}
-
-export function DeployedWorkflowCard({
-  currentWorkflowState,
-  activeDeployedWorkflowState,
-  selectedDeployedWorkflowState,
-  selectedVersionLabel,
-  className,
-}: DeployedWorkflowCardProps) {
-  type View = 'current' | 'active' | 'selected'
-  const hasCurrent = !!currentWorkflowState
-  const hasActive = !!activeDeployedWorkflowState
-  const hasSelected = !!selectedDeployedWorkflowState
-
-  const [view, setView] = useState<View>(hasSelected ? 'selected' : 'active')
-  const workflowToShow =
-    view === 'current'
-      ? currentWorkflowState
-      : view === 'active'
-        ? activeDeployedWorkflowState
-        : selectedDeployedWorkflowState
-  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-
-  const previewKey = useMemo(() => {
-    return `${view}-preview-${activeWorkflowId}`
-  }, [view, activeWorkflowId])
-
-  return (
-    <Card className={cn('relative overflow-hidden', className)}>
-      <CardHeader
-        className={cn(
-          'sticky top-0 z-10 space-y-4 p-4',
-          'bg-background/70 dark:bg-background/50',
-          'border-border/30 border-b dark:border-border/20',
-          'shadow-sm'
-        )}
-      >
-        <div className='flex items-center justify-between'>
-          <h3 className='font-medium'>Workflow Preview</h3>
-          <div className='flex items-center gap-2'>
-            {/* Show Current only when no explicit version is selected */}
-            {hasCurrent && !hasSelected && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'current' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('current')}
-              >
-                Current
-              </button>
-            )}
-            {/* Always show Active Deployed */}
-            {hasActive && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'active' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('active')}
-              >
-                Active Deployed
-              </button>
-            )}
-            {/* If a specific version is selected, show its label */}
-            {hasSelected && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'selected' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('selected')}
-              >
-                {selectedVersionLabel || 'Selected Version'}
-              </button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <div className='h-px w-full bg-border shadow-sm' />
-
-      <CardContent className='p-0'>
-        {/* Workflow preview with fixed height */}
-        <div className='h-[500px] w-full'>
-          <WorkflowPreview
-            key={previewKey}
-            workflowState={workflowToShow as WorkflowState}
-            showSubBlocks={true}
-            height='100%'
-            width='100%'
-            isPannable={true}
-            defaultPosition={{ x: 0, y: 0 }}
-            defaultZoom={0.8}
-          />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx
deleted file mode 100644
index ba0beba9c..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/emcn'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { createLogger } from '@/lib/logs/console/logger'
-import { DeployedWorkflowCard } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { mergeSubblockState } from '@/stores/workflows/utils'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('DeployedWorkflowModal')
-
-interface DeployedWorkflowModalProps {
-  isOpen: boolean
-  onClose: () => void
-  needsRedeployment: boolean
-  activeDeployedState?: WorkflowState
-  selectedDeployedState?: WorkflowState
-  selectedVersion?: number
-  onActivateVersion?: () => void
-  isActivating?: boolean
-  selectedVersionLabel?: string
-  workflowId: string
-  isSelectedVersionActive?: boolean
-  onLoadDeploymentComplete?: () => void
-}
-
-export function DeployedWorkflowModal({
-  isOpen,
-  onClose,
-  needsRedeployment,
-  activeDeployedState,
-  selectedDeployedState,
-  selectedVersion,
-  onActivateVersion,
-  isActivating,
-  selectedVersionLabel,
-  workflowId,
-  isSelectedVersionActive,
-  onLoadDeploymentComplete,
-}: DeployedWorkflowModalProps) {
-  const [showRevertDialog, setShowRevertDialog] = useState(false)
-  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-
-  // Get current workflow state to compare with deployed state
-  const currentWorkflowState = useWorkflowStore((state) => ({
-    blocks: activeWorkflowId ? mergeSubblockState(state.blocks, activeWorkflowId) : state.blocks,
-    edges: state.edges,
-    loops: state.loops,
-    parallels: state.parallels,
-  }))
-
-  const handleRevert = async () => {
-    if (!activeWorkflowId) {
-      logger.error('Cannot revert: no active workflow ID')
-      return
-    }
-
-    try {
-      const versionToRevert = selectedVersion !== undefined ? selectedVersion : 'active'
-      const response = await fetch(
-        `/api/workflows/${workflowId}/deployments/${versionToRevert}/revert`,
-        {
-          method: 'POST',
-        }
-      )
-
-      if (!response.ok) {
-        throw new Error('Failed to revert to version')
-      }
-
-      setShowRevertDialog(false)
-      onClose()
-      onLoadDeploymentComplete?.()
-    } catch (error) {
-      logger.error('Failed to revert workflow:', error)
-    }
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent
-        className='max-h-[100vh] overflow-y-auto sm:max-w-[1100px]'
-        style={{ zIndex: 10000020 }}
-        hideCloseButton={true}
-      >
-        <div className='sr-only'>
-          <DialogHeader>
-            <DialogTitle>Deployed Workflow</DialogTitle>
-          </DialogHeader>
-        </div>
-        <DeployedWorkflowCard
-          currentWorkflowState={currentWorkflowState}
-          activeDeployedWorkflowState={activeDeployedState}
-          selectedDeployedWorkflowState={selectedDeployedState}
-          selectedVersionLabel={selectedVersionLabel}
-        />
-
-        <div className='mt-1 flex justify-between'>
-          <div className='flex items-center gap-2'>
-            {onActivateVersion &&
-              (isSelectedVersionActive ? (
-                <div className='inline-flex items-center gap-2 rounded-md bg-emerald-500/10 px-2.5 py-1 font-medium text-emerald-600 text-xs dark:text-emerald-400'>
-                  <span className='relative flex h-2 w-2 items-center justify-center'>
-                    <span className='absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-500 opacity-75' />
-                    <span className='relative inline-flex h-2 w-2 rounded-full bg-emerald-500' />
-                  </span>
-                  Active
-                </div>
-              ) : (
-                <div className='flex items-center gap-0'>
-                  <Button
-                    variant='outline'
-                    disabled={!!isActivating}
-                    onClick={() => onActivateVersion?.()}
-                  >
-                    {isActivating ? 'Activating…' : 'Activate'}
-                  </Button>
-                </div>
-              ))}
-          </div>
-
-          <div className='flex items-center gap-2'>
-            {(needsRedeployment || selectedVersion !== undefined) && (
-              <AlertDialog open={showRevertDialog} onOpenChange={setShowRevertDialog}>
-                <AlertDialogTrigger asChild>
-                  <Button variant='outline'>Load Deployment</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent className='sm:max-w-[425px]'>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Load this Deployment?</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This will replace your current workflow with the deployed version. Your
-                      current changes will be lost.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction
-                      onClick={handleRevert}
-                      className='bg-primary text-primary-foreground hover:bg-primary/90'
-                    >
-                      Load Deployment
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            )}
-            <Button variant='outline' onClick={onClose}>
-              Close
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx
deleted file mode 100644
index a5daf5d2c..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Loader2 } from 'lucide-react'
-import {
-  Button,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Skeleton } from '@/components/ui'
-import { ApiEndpoint } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint'
-import { DeployStatus } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status'
-import { DeployedWorkflowModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal'
-import { ExampleCommand } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-interface WorkflowDeploymentInfo {
-  isDeployed: boolean
-  deployedAt?: string
-  apiKey: string
-  endpoint: string
-  exampleCommand: string
-  needsRedeployment: boolean
-}
-
-interface DeploymentInfoProps {
-  isLoading: boolean
-  deploymentInfo: WorkflowDeploymentInfo | null
-  onRedeploy: () => void
-  onUndeploy: () => void
-  isSubmitting: boolean
-  isUndeploying: boolean
-  workflowId: string | null
-  deployedState: WorkflowState
-  isLoadingDeployedState: boolean
-  getInputFormatExample?: (includeStreaming?: boolean) => string
-  selectedStreamingOutputs: string[]
-  onSelectedStreamingOutputsChange: (outputs: string[]) => void
-  onLoadDeploymentComplete: () => void
-}
-
-export function DeploymentInfo({
-  isLoading,
-  deploymentInfo,
-  onRedeploy,
-  onUndeploy,
-  isSubmitting,
-  isUndeploying,
-  workflowId,
-  deployedState,
-  isLoadingDeployedState,
-  getInputFormatExample,
-  selectedStreamingOutputs,
-  onSelectedStreamingOutputsChange,
-  onLoadDeploymentComplete,
-}: DeploymentInfoProps) {
-  const [isViewingDeployed, setIsViewingDeployed] = useState(false)
-  const [showUndeployModal, setShowUndeployModal] = useState(false)
-
-  const handleViewDeployed = async () => {
-    if (!workflowId) {
-      return
-    }
-
-    // If deployedState is already loaded, use it directly
-    if (deployedState) {
-      setIsViewingDeployed(true)
-      return
-    }
-  }
-
-  if (isLoading || !deploymentInfo) {
-    return (
-      <div className='space-y-4 overflow-y-auto px-1'>
-        {/* API Endpoint skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-28' />
-          <Skeleton className='h-10 w-full' />
-        </div>
-
-        {/* API Key skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-20' />
-          <Skeleton className='h-10 w-full' />
-        </div>
-
-        {/* Example Command skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-36' />
-          <Skeleton className='h-24 w-full rounded-md' />
-        </div>
-
-        {/* Deploy Status and buttons skeleton */}
-        <div className='mt-4 flex items-center justify-between pt-2'>
-          <Skeleton className='h-6 w-32' />
-          <div className='flex gap-2'>
-            <Skeleton className='h-9 w-24' />
-            <Skeleton className='h-9 w-24' />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className='space-y-4 overflow-y-auto px-1'>
-        <div className='space-y-4'>
-          <ApiEndpoint endpoint={deploymentInfo.endpoint} />
-          <ExampleCommand
-            command={deploymentInfo.exampleCommand}
-            apiKey={deploymentInfo.apiKey}
-            endpoint={deploymentInfo.endpoint}
-            getInputFormatExample={getInputFormatExample}
-            workflowId={workflowId}
-            selectedStreamingOutputs={selectedStreamingOutputs}
-            onSelectedStreamingOutputsChange={onSelectedStreamingOutputsChange}
-          />
-        </div>
-
-        <div className='mt-4 flex items-center justify-between pt-2'>
-          <DeployStatus needsRedeployment={deploymentInfo.needsRedeployment} />
-
-          <div className='flex gap-2'>
-            <Button variant='outline' onClick={handleViewDeployed} className='h-8 text-xs'>
-              View Deployment
-            </Button>
-            {deploymentInfo.needsRedeployment && (
-              <Button
-                variant='primary'
-                onClick={onRedeploy}
-                disabled={isSubmitting}
-                className='h-8 text-xs'
-              >
-                {isSubmitting ? <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' /> : null}
-                {isSubmitting ? 'Redeploying...' : 'Redeploy'}
-              </Button>
-            )}
-            <Button
-              variant='outline'
-              disabled={isUndeploying}
-              className='h-8 text-xs'
-              onClick={() => setShowUndeployModal(true)}
-            >
-              {isUndeploying ? <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' /> : null}
-              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {deployedState && workflowId && (
-        <DeployedWorkflowModal
-          isOpen={isViewingDeployed}
-          onClose={() => setIsViewingDeployed(false)}
-          needsRedeployment={deploymentInfo.needsRedeployment}
-          activeDeployedState={deployedState}
-          workflowId={workflowId}
-          onLoadDeploymentComplete={onLoadDeploymentComplete}
-        />
-      )}
-
-      {/* Undeploy Confirmation Modal */}
-      <Modal open={showUndeployModal} onOpenChange={setShowUndeployModal}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Undeploy API</ModalTitle>
-            <ModalDescription>
-              Are you sure you want to undeploy this workflow?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This will remove the API endpoint and make it unavailable to external users.{' '}
-              </span>
-            </ModalDescription>
-          </ModalHeader>
-          <ModalFooter>
-            <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
-              onClick={() => setShowUndeployModal(false)}
-              disabled={isUndeploying}
-            >
-              Cancel
-            </Button>
-            <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-              onClick={() => {
-                onUndeploy()
-                setShowUndeployModal(false)
-              }}
-              disabled={isUndeploying}
-            >
-              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx
deleted file mode 100644
index c35910e23..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronDown } from 'lucide-react'
-import { Button, Label } from '@/components/emcn'
-import { Button as UIButton } from '@/components/ui/button'
-import { CopyButton } from '@/components/ui/copy-button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
-
-interface ExampleCommandProps {
-  command: string
-  apiKey: string
-  endpoint: string
-  showLabel?: boolean
-  getInputFormatExample?: (includeStreaming?: boolean) => string
-  workflowId: string | null
-  selectedStreamingOutputs: string[]
-  onSelectedStreamingOutputsChange: (outputs: string[]) => void
-}
-
-type ExampleMode = 'sync' | 'async' | 'stream'
-type ExampleType = 'execute' | 'status' | 'rate-limits'
-
-export function ExampleCommand({
-  command,
-  apiKey,
-  endpoint,
-  showLabel = true,
-  getInputFormatExample,
-  workflowId,
-  selectedStreamingOutputs,
-  onSelectedStreamingOutputsChange,
-}: ExampleCommandProps) {
-  const [mode, setMode] = useState<ExampleMode>('sync')
-  const [exampleType, setExampleType] = useState<ExampleType>('execute')
-  const isAsyncEnabled = isTruthy(getEnv('NEXT_PUBLIC_TRIGGER_DEV_ENABLED'))
-
-  const formatCurlCommand = (command: string, apiKey: string) => {
-    if (!command.includes('curl')) return command
-
-    const sanitizedCommand = command.replace(apiKey, '$SIM_API_KEY')
-
-    return sanitizedCommand
-      .replace(' -H ', '\n  -H ')
-      .replace(' -d ', '\n  -d ')
-      .replace(' http', '\n  http')
-  }
-
-  const getActualCommand = () => {
-    const displayCommand = getDisplayCommand()
-    return displayCommand
-      .replace(/\\\n\s*/g, ' ') // Remove backslash + newline + whitespace
-      .replace(/\n\s*/g, ' ') // Remove any remaining newlines + whitespace
-      .replace(/\s+/g, ' ') // Normalize multiple spaces to single space
-      .trim()
-  }
-
-  const getDisplayCommand = () => {
-    const baseEndpoint = endpoint.replace(apiKey, '$SIM_API_KEY')
-    const inputExample = getInputFormatExample
-      ? getInputFormatExample(false)
-      : ' -d \'{"input": "your data here"}\''
-
-    const addStreamingParams = (dashD: string) => {
-      const match = dashD.match(/-d\s*'([\s\S]*)'/)
-      if (!match) {
-        const payload: Record<string, any> = { stream: true }
-        if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
-          payload.selectedOutputs = selectedStreamingOutputs
-        }
-        return ` -d '${JSON.stringify(payload)}'`
-      }
-      try {
-        const payload = JSON.parse(match[1]) as Record<string, any>
-        payload.stream = true
-        if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
-          payload.selectedOutputs = selectedStreamingOutputs
-        }
-        return ` -d '${JSON.stringify(payload)}'`
-      } catch {
-        return dashD
-      }
-    }
-
-    switch (mode) {
-      case 'sync':
-        if (getInputFormatExample) {
-          const syncInputExample = getInputFormatExample(false)
-          return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json"${syncInputExample} \\\n  ${baseEndpoint}`
-        }
-        return formatCurlCommand(command, apiKey)
-
-      case 'stream': {
-        const streamDashD = addStreamingParams(inputExample)
-        return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json"${streamDashD} \\\n  ${baseEndpoint}`
-      }
-
-      case 'async':
-        switch (exampleType) {
-          case 'execute':
-            return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json" \\\n  -H "X-Execution-Mode: async"${inputExample} \\\n  ${baseEndpoint}`
-
-          case 'status': {
-            const baseUrl = baseEndpoint.split('/api/workflows/')[0]
-            return `curl -H "X-API-Key: $SIM_API_KEY" \\\n  ${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION`
-          }
-
-          case 'rate-limits': {
-            const baseUrlForRateLimit = baseEndpoint.split('/api/workflows/')[0]
-            return `curl -H "X-API-Key: $SIM_API_KEY" \\\n  ${baseUrlForRateLimit}/api/users/me/usage-limits`
-          }
-
-          default:
-            return formatCurlCommand(command, apiKey)
-        }
-
-      default:
-        return formatCurlCommand(command, apiKey)
-    }
-  }
-
-  const getExampleTitle = () => {
-    switch (exampleType) {
-      case 'execute':
-        return 'Async Execution'
-      case 'status':
-        return 'Check Job Status'
-      case 'rate-limits':
-        return 'Rate Limits & Usage'
-      default:
-        return 'Async Execution'
-    }
-  }
-
-  return (
-    <div className='space-y-4'>
-      {/* Example Command */}
-      <div className='space-y-1.5'>
-        <div className='flex items-center justify-between'>
-          {showLabel && <Label className='font-medium text-sm'>Example</Label>}
-          <div className='flex items-center gap-1'>
-            <Button
-              variant={mode === 'sync' ? 'active' : 'default'}
-              onClick={() => setMode('sync')}
-              className='h-6 min-w-[50px] px-2 py-1 text-xs'
-            >
-              Sync
-            </Button>
-            <Button
-              variant={mode === 'stream' ? 'active' : 'default'}
-              onClick={() => setMode('stream')}
-              className='h-6 min-w-[50px] px-2 py-1 text-xs'
-            >
-              Stream
-            </Button>
-            {isAsyncEnabled && (
-              <>
-                <Button
-                  variant={mode === 'async' ? 'active' : 'default'}
-                  onClick={() => setMode('async')}
-                  className='h-6 min-w-[50px] px-2 py-1 text-xs'
-                >
-                  Async
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <UIButton
-                      variant='outline'
-                      size='sm'
-                      className='h-6 min-w-[140px] justify-between px-2 py-1 text-xs'
-                      disabled={mode === 'sync' || mode === 'stream'}
-                    >
-                      <span className='truncate'>{getExampleTitle()}</span>
-                      <ChevronDown className='ml-1 h-3 w-3 flex-shrink-0' />
-                    </UIButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align='end' className='z-[10000050]'>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('execute')}
-                    >
-                      Async Execution
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('status')}
-                    >
-                      Check Job Status
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('rate-limits')}
-                    >
-                      Rate Limits & Usage
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Output selector for Stream mode */}
-        {mode === 'stream' && (
-          <div className='space-y-2'>
-            <div className='text-muted-foreground text-xs'>Select outputs to stream</div>
-            <OutputSelect
-              workflowId={workflowId}
-              selectedOutputs={selectedStreamingOutputs}
-              onOutputSelect={onSelectedStreamingOutputsChange}
-              placeholder='Select outputs for streaming'
-              valueMode='label'
-            />
-          </div>
-        )}
-
-        <div className='group relative overflow-x-auto rounded-md border bg-background transition-colors hover:bg-muted/50'>
-          <pre className='whitespace-pre p-3 font-mono text-xs'>{getDisplayCommand()}</pre>
-          <CopyButton text={getActualCommand()} />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts
new file mode 100644
index 000000000..a9946f7d5
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts
@@ -0,0 +1 @@
+export { Versions } from './versions'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
new file mode 100644
index 000000000..28a98dd4c
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -0,0 +1,333 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
+import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+
+const logger = createLogger('Versions')
+
+/** Shared styling constants aligned with terminal component */
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
+const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px]'
+const COLUMN_BASE_CLASS = 'flex-shrink-0'
+
+/** Column width configuration */
+const COLUMN_WIDTHS = {
+  VERSION: 'w-[180px]',
+  DEPLOYED_BY: 'w-[140px]',
+  TIMESTAMP: 'flex-1',
+  ACTIONS: 'w-[32px]',
+} as const
+
+interface VersionsProps {
+  workflowId: string | null
+  versions: WorkflowDeploymentVersionResponse[]
+  versionsLoading: boolean
+  selectedVersion: number | null
+  onSelectVersion: (version: number | null) => void
+  onPromoteToLive: (version: number) => void
+  onLoadDeployment: (version: number) => void
+  fetchVersions: () => Promise<void>
+}
+
+/**
+ * Formats a timestamp into a readable string.
+ * @param value - The date string or Date object to format
+ * @returns Formatted string like "8:36 PM PT on Oct 11, 2025"
+ */
+const formatDate = (value: string | Date): string => {
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '-'
+  }
+
+  const timePart = date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+    timeZoneName: 'short',
+  })
+
+  const datePart = date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+  return `${timePart} on ${datePart}`
+}
+
+/**
+ * Displays a list of workflow deployment versions with actions
+ * for viewing, promoting to live, renaming, and loading deployments.
+ */
+export function Versions({
+  workflowId,
+  versions,
+  versionsLoading,
+  selectedVersion,
+  onSelectVersion,
+  onPromoteToLive,
+  onLoadDeployment,
+  fetchVersions,
+}: VersionsProps) {
+  const [editingVersion, setEditingVersion] = useState<number | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [openDropdown, setOpenDropdown] = useState<number | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editingVersion !== null && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editingVersion])
+
+  const handleStartRename = (version: number, currentName: string | null | undefined) => {
+    setOpenDropdown(null)
+    setEditingVersion(version)
+    setEditValue(currentName || `v${version}`)
+  }
+
+  const handleSaveRename = async (version: number) => {
+    if (!workflowId || !editValue.trim()) {
+      setEditingVersion(null)
+      return
+    }
+
+    const currentVersion = versions.find((v) => v.version === version)
+    const currentName = currentVersion?.name || `v${version}`
+
+    if (editValue.trim() === currentName) {
+      setEditingVersion(null)
+      return
+    }
+
+    setIsRenaming(true)
+    try {
+      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: editValue.trim() }),
+      })
+
+      if (res.ok) {
+        await fetchVersions()
+        setEditingVersion(null)
+      } else {
+        logger.error('Failed to rename version')
+      }
+    } catch (error) {
+      logger.error('Error renaming version:', error)
+    } finally {
+      setIsRenaming(false)
+    }
+  }
+
+  const handleCancelRename = () => {
+    setEditingVersion(null)
+    setEditValue('')
+  }
+
+  const handleRowClick = (version: number) => {
+    if (editingVersion === version) return
+    onSelectVersion(selectedVersion === version ? null : version)
+  }
+
+  const handlePromote = (version: number) => {
+    setOpenDropdown(null)
+    onPromoteToLive(version)
+  }
+
+  const handleLoadDeployment = (version: number) => {
+    setOpenDropdown(null)
+    onLoadDeployment(version)
+  }
+
+  if (versionsLoading && versions.length === 0) {
+    return (
+      <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
+        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+          <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
+            <Skeleton className='h-[12px] w-[50px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
+            <Skeleton className='h-[12px] w-[76px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+            <Skeleton className='h-[12px] w-[68px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
+        </div>
+        <div className='bg-[var(--surface-2)]'>
+          {[0, 1].map((i) => (
+            <div key={i} className='flex h-[36px] items-center px-[16px]'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
+                <div className='flex items-center gap-[16px]'>
+                  <Skeleton className='h-[6px] w-[6px] rounded-[2px]' />
+                  <Skeleton className='h-[12px] w-[60px]' />
+                </div>
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
+                <Skeleton className='h-[12px] w-[80px]' />
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+                <Skeleton className='h-[12px] w-[160px]' />
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}>
+                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (versions.length === 0) {
+    return (
+      <div className='flex h-[120px] items-center justify-center rounded-[4px] border border-[var(--border)] text-[#8D8D8D] text-[13px]'>
+        No deployments yet
+      </div>
+    )
+  }
+
+  return (
+    <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
+      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+        <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
+          <span className={HEADER_TEXT_CLASS}>Version</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
+          <span className={HEADER_TEXT_CLASS}>Deployed by</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+          <span className={HEADER_TEXT_CLASS}>Timestamp</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
+      </div>
+
+      <div className='bg-[var(--surface-2)]'>
+        {versions.map((v) => {
+          const isSelected = selectedVersion === v.version
+
+          return (
+            <div
+              key={v.id}
+              className={clsx(
+                'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors',
+                isSelected
+                  ? 'bg-[var(--accent)]/10 hover:bg-[var(--accent)]/15'
+                  : 'hover:bg-[var(--border)]'
+              )}
+              onClick={() => handleRowClick(v.version)}
+            >
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
+                <div className='flex items-center gap-[16px]'>
+                  <div
+                    className={clsx(
+                      'h-[6px] w-[6px] shrink-0 rounded-[2px]',
+                      v.isActive ? 'bg-[#4ADE80]' : 'bg-[#B7B7B7]'
+                    )}
+                    title={v.isActive ? 'Live' : 'Inactive'}
+                  />
+                  {editingVersion === v.version ? (
+                    <input
+                      ref={inputRef}
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault()
+                          handleSaveRename(v.version)
+                        } else if (e.key === 'Escape') {
+                          e.preventDefault()
+                          handleCancelRename()
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      onBlur={() => handleSaveRename(v.version)}
+                      className={clsx(
+                        'w-full border-0 bg-transparent p-0 font-medium text-[12px] leading-5 outline-none',
+                        'text-[var(--text-primary)] focus:outline-none focus:ring-0'
+                      )}
+                      maxLength={100}
+                      disabled={isRenaming}
+                      autoComplete='off'
+                      autoCorrect='off'
+                      autoCapitalize='off'
+                      spellCheck='false'
+                    />
+                  ) : (
+                    <span
+                      className={clsx('block flex items-center gap-[4px] truncate', ROW_TEXT_CLASS)}
+                    >
+                      <span className='truncate'>{v.name || `v${v.version}`}</span>
+                      {v.isActive && <span className='text-[var(--text-tertiary)]'> (live)</span>}
+                      {isSelected && (
+                        <span className='text-[var(--text-tertiary)]'> (selected)</span>
+                      )}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
+                <span
+                  className={clsx('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}
+                >
+                  {v.deployedBy || 'Unknown'}
+                </span>
+              </div>
+
+              <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+                <span
+                  className={clsx('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}
+                >
+                  {formatDate(v.createdAt)}
+                </span>
+              </div>
+
+              <div
+                className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Popover
+                  open={openDropdown === v.version}
+                  onOpenChange={(open) => setOpenDropdown(open ? v.version : null)}
+                >
+                  <PopoverTrigger asChild>
+                    <Button variant='ghost' className='!p-1'>
+                      <MoreVertical className='h-3.5 w-3.5' />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align='end' sideOffset={4} minWidth={160} maxWidth={200} border>
+                    <PopoverItem onClick={() => handleStartRename(v.version, v.name)}>
+                      <Pencil className='h-3 w-3' />
+                      <span>Rename</span>
+                    </PopoverItem>
+                    {!v.isActive && (
+                      <PopoverItem onClick={() => handlePromote(v.version)}>
+                        <RotateCcw className='h-3 w-3' />
+                        <span>Promote to live</span>
+                      </PopoverItem>
+                    )}
+                    <PopoverItem onClick={() => handleLoadDeployment(v.version)}>
+                      <SendToBack className='h-3 w-3' />
+                      <span>Load deployment</span>
+                    </PopoverItem>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
new file mode 100644
index 000000000..bce4b6f27
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -0,0 +1,312 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Skeleton } from '@/components/ui'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+import { Versions } from './components'
+
+const logger = createLogger('GeneralDeploy')
+
+interface GeneralDeployProps {
+  workflowId: string | null
+  deployedState: WorkflowState
+  isLoadingDeployedState: boolean
+  versions: WorkflowDeploymentVersionResponse[]
+  versionsLoading: boolean
+  onPromoteToLive: (version: number) => Promise<void>
+  onLoadDeploymentComplete: () => void
+  fetchVersions: () => Promise<void>
+}
+
+type PreviewMode = 'active' | 'selected'
+
+/**
+ * General deployment tab content displaying live workflow preview and version history.
+ */
+export function GeneralDeploy({
+  workflowId,
+  deployedState,
+  isLoadingDeployedState,
+  versions,
+  versionsLoading,
+  onPromoteToLive,
+  onLoadDeploymentComplete,
+  fetchVersions,
+}: GeneralDeployProps) {
+  const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
+  const [previewMode, setPreviewMode] = useState<PreviewMode>('active')
+  const [showLoadDialog, setShowLoadDialog] = useState(false)
+  const [showPromoteDialog, setShowPromoteDialog] = useState(false)
+  const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
+  const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
+
+  const versionCacheRef = useRef<Map<number, WorkflowState>>(new Map())
+  const [, forceUpdate] = useState({})
+
+  const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
+  const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote)
+  const versionToLoadInfo = versions.find((v) => v.version === versionToLoad)
+
+  const cachedSelectedState =
+    selectedVersion !== null ? versionCacheRef.current.get(selectedVersion) : null
+
+  const fetchSelectedVersionState = useCallback(
+    async (version: number) => {
+      if (!workflowId) return
+      if (versionCacheRef.current.has(version)) return
+
+      try {
+        const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
+        if (res.ok) {
+          const data = await res.json()
+          if (data.deployedState) {
+            versionCacheRef.current.set(version, data.deployedState)
+            forceUpdate({})
+          }
+        }
+      } catch (error) {
+        logger.error('Error fetching version state:', error)
+      }
+    },
+    [workflowId]
+  )
+
+  useEffect(() => {
+    if (selectedVersion !== null) {
+      fetchSelectedVersionState(selectedVersion)
+      setPreviewMode('selected')
+    } else {
+      setPreviewMode('active')
+    }
+  }, [selectedVersion, fetchSelectedVersionState])
+
+  const handleSelectVersion = useCallback((version: number | null) => {
+    setSelectedVersion(version)
+  }, [])
+
+  const handleLoadDeployment = useCallback((version: number) => {
+    setVersionToLoad(version)
+    setShowLoadDialog(true)
+  }, [])
+
+  const handlePromoteToLive = useCallback((version: number) => {
+    setVersionToPromote(version)
+    setShowPromoteDialog(true)
+  }, [])
+
+  const confirmLoadDeployment = async () => {
+    if (!workflowId || versionToLoad === null) return
+
+    // Close modal immediately for snappy UX
+    setShowLoadDialog(false)
+    const version = versionToLoad
+    setVersionToLoad(null)
+
+    try {
+      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}/revert`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to load deployment')
+      }
+
+      onLoadDeploymentComplete()
+    } catch (error) {
+      logger.error('Failed to load deployment:', error)
+    }
+  }
+
+  const confirmPromoteToLive = async () => {
+    if (versionToPromote === null) return
+
+    // Close modal immediately for snappy UX
+    setShowPromoteDialog(false)
+    const version = versionToPromote
+    setVersionToPromote(null)
+
+    try {
+      await onPromoteToLive(version)
+    } catch (error) {
+      logger.error('Failed to promote version:', error)
+    }
+  }
+
+  const workflowToShow = useMemo(() => {
+    if (previewMode === 'selected' && cachedSelectedState) {
+      return cachedSelectedState
+    }
+    return deployedState
+  }, [previewMode, cachedSelectedState, deployedState])
+
+  const showToggle = selectedVersion !== null && deployedState
+
+  // Only show skeleton on initial load when we have no deployed data
+  const hasDeployedData = deployedState && Object.keys(deployedState.blocks || {}).length > 0
+  const showLoadingSkeleton = isLoadingDeployedState && !hasDeployedData
+
+  if (showLoadingSkeleton) {
+    return (
+      <div className='space-y-[12px]'>
+        <div>
+          <div className='relative mb-[6.5px]'>
+            <Skeleton className='h-[16px] w-[90px]' />
+          </div>
+          <div className='h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+            <Skeleton className='h-full w-full rounded-none' />
+          </div>
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[60px]' />
+          <div className='h-[120px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+            <Skeleton className='h-full w-full rounded-none' />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='space-y-[12px]'>
+        <div>
+          <div className='relative mb-[6.5px]'>
+            <Label className='block truncate pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              {previewMode === 'selected' && selectedVersionInfo
+                ? selectedVersionInfo.name || `v${selectedVersion}`
+                : 'Live Workflow'}
+            </Label>
+            <div
+              className='absolute top-[-5px] right-0 inline-flex gap-[2px]'
+              style={{ visibility: showToggle ? 'visible' : 'hidden' }}
+            >
+              <Button
+                type='button'
+                variant={previewMode === 'active' ? 'active' : 'default'}
+                onClick={() => setPreviewMode('active')}
+                className='rounded-r-none px-[8px] py-[4px] text-[12px]'
+              >
+                Live
+              </Button>
+              <Button
+                type='button'
+                variant={previewMode === 'selected' ? 'active' : 'default'}
+                onClick={() => setPreviewMode('selected')}
+                className='truncate rounded-l-none px-[8px] py-[4px] text-[12px]'
+              >
+                {selectedVersionInfo?.name || `v${selectedVersion}`}
+              </Button>
+            </div>
+          </div>
+
+          <div
+            className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+            onWheelCapture={(e) => {
+              if (e.ctrlKey || e.metaKey) return
+              e.stopPropagation()
+            }}
+          >
+            {workflowToShow ? (
+              <WorkflowPreview
+                workflowState={workflowToShow}
+                showSubBlocks={true}
+                height='100%'
+                width='100%'
+                isPannable={true}
+                defaultPosition={{ x: 0, y: 0 }}
+                defaultZoom={0.6}
+              />
+            ) : (
+              <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+                Deploy your workflow to see a preview
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Versions
+          </Label>
+          <Versions
+            workflowId={workflowId}
+            versions={versions}
+            versionsLoading={versionsLoading}
+            selectedVersion={selectedVersion}
+            onSelectVersion={handleSelectVersion}
+            onPromoteToLive={handlePromoteToLive}
+            onLoadDeployment={handleLoadDeployment}
+            fetchVersions={fetchVersions}
+          />
+        </div>
+      </div>
+
+      <Modal open={showLoadDialog} onOpenChange={setShowLoadDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Load Deployment</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to load{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {versionToLoadInfo?.name || `v${versionToLoad}`}
+              </span>
+              ?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will replace your current workflow with the deployed version.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowLoadDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={confirmLoadDeployment}
+              className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
+            >
+              Load deployment
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showPromoteDialog} onOpenChange={setShowPromoteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Promote to live</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to promote{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {versionToPromoteInfo?.name || `v${versionToPromote}`}
+              </span>{' '}
+              to live?{' '}
+              <span className='text-[var(--text-primary)]'>
+                This version will become the active deployment and serve all API requests.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowPromoteDialog(false)}>
+              Cancel
+            </Button>
+            <Button variant='primary' onClick={confirmPromoteToLive}>
+              Promote to live
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
deleted file mode 100644
index d6989bb87..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect } from 'react'
-import { Input, Label } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { getEmailDomain } from '@/lib/core/utils/urls'
-import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation'
-
-interface IdentifierInputProps {
-  value: string
-  onChange: (value: string) => void
-  originalIdentifier?: string
-  disabled?: boolean
-  onValidationChange?: (isValid: boolean) => void
-  isEditingExisting?: boolean
-}
-
-const getDomainPrefix = (() => {
-  const prefix = `${getEmailDomain()}/chat/`
-  return () => prefix
-})()
-
-export function IdentifierInput({
-  value,
-  onChange,
-  originalIdentifier,
-  disabled = false,
-  onValidationChange,
-  isEditingExisting = false,
-}: IdentifierInputProps) {
-  const { isChecking, error, isValid } = useIdentifierValidation(
-    value,
-    originalIdentifier,
-    isEditingExisting
-  )
-
-  // Notify parent of validation changes
-  useEffect(() => {
-    onValidationChange?.(isValid)
-  }, [isValid, onValidationChange])
-
-  const handleChange = (newValue: string) => {
-    const lowercaseValue = newValue.toLowerCase()
-    onChange(lowercaseValue)
-  }
-
-  return (
-    <div className='space-y-2'>
-      <Label htmlFor='identifier' className='font-medium text-sm'>
-        Identifier
-      </Label>
-      <div className='relative flex items-stretch'>
-        <div className='flex items-center whitespace-nowrap rounded-l-[4px] border border-[var(--surface-11)] border-r-0 bg-[var(--surface-6)] px-[8px] py-[6px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-9)]'>
-          {getDomainPrefix()}
-        </div>
-        <div className='relative flex-1'>
-          <Input
-            id='identifier'
-            placeholder='company-name'
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            required
-            disabled={disabled}
-            className={cn(
-              'rounded-l-none border-l-0',
-              isChecking && 'pr-8',
-              error && 'border-destructive'
-            )}
-          />
-          {isChecking && (
-            <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-              <div className='h-[18px] w-[18px] animate-spin rounded-full border-2 border-gray-300 border-t-[var(--brand-primary-hex)]' />
-            </div>
-          )}
-        </div>
-      </div>
-      {error && <p className='mt-1 text-destructive text-sm'>{error}</p>}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx
deleted file mode 100644
index 1f8404097..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Label } from '@/components/emcn'
-import { getBaseDomain, getEmailDomain } from '@/lib/core/utils/urls'
-
-interface ExistingChat {
-  id: string
-  identifier: string
-  title: string
-  description: string
-  authType: 'public' | 'password' | 'email'
-  allowedEmails: string[]
-  outputConfigs: Array<{ blockId: string; path: string }>
-  customizations?: {
-    welcomeMessage?: string
-  }
-  isActive: boolean
-}
-
-interface SuccessViewProps {
-  deployedUrl: string
-  existingChat: ExistingChat | null
-  onDelete?: () => void
-  onUpdate?: () => void
-}
-
-export function SuccessView({ deployedUrl, existingChat, onDelete, onUpdate }: SuccessViewProps) {
-  const url = new URL(deployedUrl)
-  const hostname = url.hostname
-  const isDevelopmentUrl = hostname.includes('localhost')
-
-  // Extract identifier from path-based URL format (e.g., sim.ai/chat/identifier)
-  const pathParts = url.pathname.split('/')
-  const identifierPart = pathParts[2] || '' // /chat/identifier
-
-  let domainPrefix
-  if (isDevelopmentUrl) {
-    const baseDomain = getBaseDomain()
-    const baseHost = baseDomain.split(':')[0]
-    const port = url.port || (baseDomain.includes(':') ? baseDomain.split(':')[1] : '3000')
-    domainPrefix = `${baseHost}:${port}/chat/`
-  } else {
-    domainPrefix = `${getEmailDomain()}/chat/`
-  }
-
-  return (
-    <div className='space-y-4'>
-      <div className='space-y-2'>
-        <Label className='font-medium text-sm'>
-          Chat {existingChat ? 'Update' : 'Deployment'} Successful
-        </Label>
-        <div className='relative flex items-center rounded-md ring-offset-background'>
-          <div className='flex h-10 items-center whitespace-nowrap rounded-l-md border border-r-0 bg-muted px-3 font-medium text-muted-foreground text-sm'>
-            {domainPrefix}
-          </div>
-          <a
-            href={deployedUrl}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='flex h-10 flex-1 items-center break-all rounded-r-md border border-l-0 p-2 font-medium text-foreground text-sm'
-          >
-            {identifierPart}
-          </a>
-        </div>
-        <p className='text-muted-foreground text-xs'>
-          Your chat is now live at{' '}
-          <a
-            href={deployedUrl}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='text-foreground hover:underline'
-          >
-            this URL
-          </a>
-        </p>
-      </div>
-
-      {/* Hidden triggers for modal footer buttons */}
-      <button type='button' data-delete-trigger onClick={onDelete} style={{ display: 'none' }} />
-      <button type='button' data-update-trigger onClick={onUpdate} style={{ display: 'none' }} />
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx
deleted file mode 100644
index 893f2e56e..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { CheckCircle2, Loader2, Plus } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Badge, Button, Input, Textarea, Trash } from '@/components/emcn'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui'
-import { TagInput } from '@/components/ui/tag-input'
-import { useSession } from '@/lib/auth/auth-client'
-import { createLogger } from '@/lib/logs/console/logger'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
-import {
-  useCreateTemplate,
-  useDeleteTemplate,
-  useTemplateByWorkflow,
-  useUpdateTemplate,
-} from '@/hooks/queries/templates'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('TemplateDeploy')
-
-const templateSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(100, 'Max 100 characters'),
-  tagline: z.string().max(500, 'Max 500 characters').optional(),
-  about: z.string().optional(), // Markdown long description
-  creatorId: z.string().optional(), // Creator profile ID
-  tags: z.array(z.string()).max(10, 'Maximum 10 tags allowed').optional().default([]),
-})
-
-type TemplateFormData = z.infer<typeof templateSchema>
-
-interface CreatorOption {
-  id: string
-  name: string
-  referenceType: 'user' | 'organization'
-  referenceId: string
-}
-
-interface TemplateDeployProps {
-  workflowId: string
-  onDeploymentComplete?: () => void
-}
-
-export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDeployProps) {
-  const { data: session } = useSession()
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [creatorOptions, setCreatorOptions] = useState<CreatorOption[]>([])
-  const [loadingCreators, setLoadingCreators] = useState(false)
-  const [showPreviewDialog, setShowPreviewDialog] = useState(false)
-
-  const { data: existingTemplate, isLoading: isLoadingTemplate } = useTemplateByWorkflow(workflowId)
-  const createMutation = useCreateTemplate()
-  const updateMutation = useUpdateTemplate()
-  const deleteMutation = useDeleteTemplate()
-
-  const form = useForm<TemplateFormData>({
-    resolver: zodResolver(templateSchema),
-    defaultValues: {
-      name: '',
-      tagline: '',
-      about: '',
-      creatorId: undefined,
-      tags: [],
-    },
-  })
-
-  const fetchCreatorOptions = async () => {
-    if (!session?.user?.id) return
-
-    setLoadingCreators(true)
-    try {
-      const response = await fetch('/api/creators')
-      if (response.ok) {
-        const data = await response.json()
-        const profiles = (data.profiles || []).map((profile: any) => ({
-          id: profile.id,
-          name: profile.name,
-          referenceType: profile.referenceType,
-          referenceId: profile.referenceId,
-        }))
-        setCreatorOptions(profiles)
-        return profiles
-      }
-    } catch (error) {
-      logger.error('Error fetching creator profiles:', error)
-    } finally {
-      setLoadingCreators(false)
-    }
-    return []
-  }
-
-  useEffect(() => {
-    fetchCreatorOptions()
-  }, [session?.user?.id])
-
-  useEffect(() => {
-    const currentCreatorId = form.getValues('creatorId')
-    if (creatorOptions.length === 1 && !currentCreatorId) {
-      form.setValue('creatorId', creatorOptions[0].id)
-      logger.info('Auto-selected single creator profile:', creatorOptions[0].name)
-    }
-  }, [creatorOptions, form])
-
-  useEffect(() => {
-    const handleCreatorProfileSaved = async () => {
-      logger.info('Creator profile saved, refreshing profiles...')
-
-      await fetchCreatorOptions()
-
-      window.dispatchEvent(new CustomEvent('close-settings'))
-      setTimeout(() => {
-        window.dispatchEvent(new CustomEvent('open-deploy-modal', { detail: { tab: 'template' } }))
-      }, 100)
-    }
-
-    window.addEventListener('creator-profile-saved', handleCreatorProfileSaved)
-
-    return () => {
-      window.removeEventListener('creator-profile-saved', handleCreatorProfileSaved)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (existingTemplate) {
-      const tagline = existingTemplate.details?.tagline || ''
-      const about = existingTemplate.details?.about || ''
-
-      form.reset({
-        name: existingTemplate.name,
-        tagline: tagline,
-        about: about,
-        creatorId: existingTemplate.creatorId || undefined,
-        tags: existingTemplate.tags || [],
-      })
-    }
-  }, [existingTemplate, form])
-
-  const onSubmit = async (data: TemplateFormData) => {
-    if (!session?.user) {
-      logger.error('User not authenticated')
-      return
-    }
-
-    try {
-      const templateData = {
-        name: data.name,
-        details: {
-          tagline: data.tagline || '',
-          about: data.about || '',
-        },
-        creatorId: data.creatorId || undefined,
-        tags: data.tags || [],
-      }
-
-      if (existingTemplate) {
-        await updateMutation.mutateAsync({
-          id: existingTemplate.id,
-          data: {
-            ...templateData,
-            updateState: true,
-          },
-        })
-      } else {
-        await createMutation.mutateAsync({ ...templateData, workflowId })
-      }
-
-      logger.info(`Template ${existingTemplate ? 'updated' : 'created'} successfully`)
-      onDeploymentComplete?.()
-    } catch (error) {
-      logger.error('Failed to save template:', error)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!existingTemplate) return
-
-    try {
-      await deleteMutation.mutateAsync(existingTemplate.id)
-      setShowDeleteDialog(false)
-      form.reset({
-        name: '',
-        tagline: '',
-        about: '',
-        creatorId: undefined,
-        tags: [],
-      })
-    } catch (error) {
-      logger.error('Error deleting template:', error)
-    }
-  }
-
-  if (isLoadingTemplate) {
-    return (
-      <div className='flex h-64 items-center justify-center'>
-        <Loader2 className='h-6 w-6 animate-spin text-muted-foreground' />
-      </div>
-    )
-  }
-
-  return (
-    <div className='space-y-4'>
-      {existingTemplate && (
-        <div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-3)] px-[16px] py-[12px]'>
-          <div className='flex items-center gap-[12px]'>
-            <CheckCircle2 className='h-[16px] w-[16px] text-green-600 dark:text-green-400' />
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                Template Connected
-              </span>
-              {existingTemplate.status === 'pending' && (
-                <Badge
-                  variant='outline'
-                  className='border-yellow-300 bg-yellow-100 text-yellow-700 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
-                >
-                  Under Review
-                </Badge>
-              )}
-              {existingTemplate.status === 'approved' && existingTemplate.views > 0 && (
-                <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  • {existingTemplate.views} views
-                  {existingTemplate.stars > 0 && ` • ${existingTemplate.stars} stars`}
-                </span>
-              )}
-            </div>
-          </div>
-          <Button
-            type='button'
-            variant='ghost'
-            onClick={() => setShowDeleteDialog(true)}
-            className='h-[32px] px-[8px] text-[var(--text-muted)] hover:text-red-600 dark:hover:text-red-400'
-          >
-            <Trash className='h-[14px] w-[14px]' />
-          </Button>
-        </div>
-      )}
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
-          <FormField
-            control={form.control}
-            name='name'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Template Name</FormLabel>
-                <FormControl>
-                  <Input placeholder='My Awesome Template' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='tagline'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Tagline</FormLabel>
-                <FormControl>
-                  <Input placeholder='Brief description of what this template does' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='about'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>About (Optional)</FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder='Detailed description (supports Markdown)'
-                    className='min-h-[150px] resize-none'
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='creatorId'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Creator Profile</FormLabel>
-                {creatorOptions.length === 0 && !loadingCreators ? (
-                  <div className='flex items-center gap-2'>
-                    <Button
-                      type='button'
-                      variant='outline'
-                      onClick={() => {
-                        try {
-                          const event = new CustomEvent('open-settings', {
-                            detail: { tab: 'creator-profile' },
-                          })
-                          window.dispatchEvent(event)
-                          logger.info('Opened Settings modal at creator-profile section')
-                        } catch (error) {
-                          logger.error('Failed to open Settings modal for creator profile', {
-                            error,
-                          })
-                        }
-                      }}
-                      className='gap-[8px]'
-                    >
-                      <Plus className='h-[14px] w-[14px] text-[var(--text-muted)]' />
-                      <span className='text-[var(--text-muted)]'>Create a Creator Profile</span>
-                    </Button>
-                  </div>
-                ) : (
-                  <Select
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    disabled={loadingCreators}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue
-                          placeholder={loadingCreators ? 'Loading...' : 'Select creator profile'}
-                        />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {creatorOptions.map((option) => (
-                        <SelectItem key={option.id} value={option.id}>
-                          {option.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='tags'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Tags</FormLabel>
-                <FormControl>
-                  <TagInput
-                    value={field.value || []}
-                    onChange={field.onChange}
-                    placeholder='Type and press Enter to add tags'
-                    maxTags={10}
-                    disabled={createMutation.isPending || updateMutation.isPending}
-                  />
-                </FormControl>
-                <p className='text-muted-foreground text-xs'>
-                  Add up to 10 tags to help users discover your template
-                </p>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex justify-end gap-[8px] border-[var(--border)] border-t pt-[16px]'>
-            {existingTemplate && (
-              <Button
-                type='button'
-                variant='outline'
-                onClick={() => setShowPreviewDialog(true)}
-                disabled={!existingTemplate?.state}
-              >
-                View Current
-              </Button>
-            )}
-            <Button
-              type='submit'
-              variant='primary'
-              disabled={
-                createMutation.isPending || updateMutation.isPending || !form.formState.isValid
-              }
-            >
-              {createMutation.isPending || updateMutation.isPending ? (
-                <>
-                  <Loader2 className='mr-[8px] h-[14px] w-[14px] animate-spin' />
-                  {existingTemplate ? 'Updating...' : 'Publishing...'}
-                </>
-              ) : existingTemplate ? (
-                'Update Template'
-              ) : (
-                'Publish Template'
-              )}
-            </Button>
-          </div>
-        </form>
-      </Form>
-
-      {showDeleteDialog && (
-        <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50'>
-          <div className='w-full max-w-md rounded-[8px] bg-[var(--surface-3)] p-[24px] shadow-lg'>
-            <h3 className='mb-[16px] font-semibold text-[18px] text-[var(--text-primary)]'>
-              Delete Template?
-            </h3>
-            <p className='mb-[24px] text-[14px] text-[var(--text-secondary)]'>
-              This will permanently delete your template. This action cannot be undone.
-            </p>
-            <div className='flex justify-end gap-[8px]'>
-              <Button variant='outline' onClick={() => setShowDeleteDialog(false)}>
-                Cancel
-              </Button>
-              <Button
-                onClick={handleDelete}
-                disabled={deleteMutation.isPending}
-                className='bg-red-600 text-white hover:bg-red-700'
-              >
-                {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Template State Preview Dialog */}
-      <Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
-        <DialogContent className='max-h-[80vh] max-w-5xl overflow-auto'>
-          <DialogHeader>
-            <DialogTitle>Published Template Preview</DialogTitle>
-          </DialogHeader>
-          {showPreviewDialog && (
-            <div className='mt-4'>
-              {(() => {
-                if (!existingTemplate?.state || !existingTemplate.state.blocks) {
-                  return (
-                    <div className='flex flex-col items-center gap-4 py-8'>
-                      <div className='text-center text-muted-foreground'>
-                        <p className='mb-2'>No template state available yet.</p>
-                        <p className='text-sm'>
-                          Click "Update Template" to capture the current workflow state.
-                        </p>
-                      </div>
-                    </div>
-                  )
-                }
-
-                const workflowState: WorkflowState = {
-                  blocks: existingTemplate.state.blocks || {},
-                  edges: existingTemplate.state.edges || [],
-                  loops: existingTemplate.state.loops || {},
-                  parallels: existingTemplate.state.parallels || {},
-                  lastSaved: existingTemplate.state.lastSaved || Date.now(),
-                }
-
-                return (
-                  <div className='h-[500px] w-full'>
-                    <WorkflowPreview
-                      key={`template-preview-${existingTemplate.id}`}
-                      workflowState={workflowState}
-                      showSubBlocks={true}
-                      height='100%'
-                      width='100%'
-                    />
-                  </div>
-                )
-              })()}
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
new file mode 100644
index 000000000..4d24f6636
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
@@ -0,0 +1,451 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Loader2, Plus } from 'lucide-react'
+import { Button, Combobox, Input, Label, Textarea } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Skeleton, TagInput } from '@/components/ui'
+import { useSession } from '@/lib/auth/auth-client'
+import { createLogger } from '@/lib/logs/console/logger'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import {
+  useCreateTemplate,
+  useDeleteTemplate,
+  useTemplateByWorkflow,
+  useUpdateTemplate,
+} from '@/hooks/queries/templates'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('TemplateDeploy')
+
+interface TemplateFormData {
+  name: string
+  tagline: string
+  about: string
+  creatorId: string
+  tags: string[]
+}
+
+const initialFormData: TemplateFormData = {
+  name: '',
+  tagline: '',
+  about: '',
+  creatorId: '',
+  tags: [],
+}
+
+interface CreatorOption {
+  id: string
+  name: string
+  referenceType: 'user' | 'organization'
+  referenceId: string
+}
+
+interface TemplateStatus {
+  status: 'pending' | 'approved' | 'rejected' | null
+  views?: number
+  stars?: number
+}
+
+interface TemplateDeployProps {
+  workflowId: string
+  onDeploymentComplete?: () => void
+  onValidationChange?: (isValid: boolean) => void
+  onSubmittingChange?: (isSubmitting: boolean) => void
+  onExistingTemplateChange?: (exists: boolean) => void
+  onTemplateStatusChange?: (status: TemplateStatus | null) => void
+}
+
+export function TemplateDeploy({
+  workflowId,
+  onDeploymentComplete,
+  onValidationChange,
+  onSubmittingChange,
+  onExistingTemplateChange,
+  onTemplateStatusChange,
+}: TemplateDeployProps) {
+  const { data: session } = useSession()
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [creatorOptions, setCreatorOptions] = useState<CreatorOption[]>([])
+  const [loadingCreators, setLoadingCreators] = useState(false)
+
+  const [formData, setFormData] = useState<TemplateFormData>(initialFormData)
+
+  const { data: existingTemplate, isLoading: isLoadingTemplate } = useTemplateByWorkflow(workflowId)
+  const createMutation = useCreateTemplate()
+  const updateMutation = useUpdateTemplate()
+  const deleteMutation = useDeleteTemplate()
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending
+  const isFormValid = formData.name.trim().length > 0 && formData.name.length <= 100
+
+  const updateField = <K extends keyof TemplateFormData>(field: K, value: TemplateFormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  useEffect(() => {
+    onValidationChange?.(isFormValid)
+  }, [isFormValid, onValidationChange])
+
+  useEffect(() => {
+    onSubmittingChange?.(isSubmitting)
+  }, [isSubmitting, onSubmittingChange])
+
+  useEffect(() => {
+    onExistingTemplateChange?.(!!existingTemplate)
+  }, [existingTemplate, onExistingTemplateChange])
+
+  useEffect(() => {
+    if (existingTemplate) {
+      onTemplateStatusChange?.({
+        status: existingTemplate.status as 'pending' | 'approved' | 'rejected',
+        views: existingTemplate.views,
+        stars: existingTemplate.stars,
+      })
+    } else {
+      onTemplateStatusChange?.(null)
+    }
+  }, [existingTemplate, onTemplateStatusChange])
+
+  const fetchCreatorOptions = async () => {
+    if (!session?.user?.id) return
+
+    setLoadingCreators(true)
+    try {
+      const response = await fetch('/api/creator-profiles')
+      if (response.ok) {
+        const data = await response.json()
+        const profiles = (data.profiles || []).map((profile: any) => ({
+          id: profile.id,
+          name: profile.name,
+          referenceType: profile.referenceType,
+          referenceId: profile.referenceId,
+        }))
+        setCreatorOptions(profiles)
+        return profiles
+      }
+    } catch (error) {
+      logger.error('Error fetching creator profiles:', error)
+    } finally {
+      setLoadingCreators(false)
+    }
+    return []
+  }
+
+  useEffect(() => {
+    fetchCreatorOptions()
+  }, [session?.user?.id])
+
+  useEffect(() => {
+    if (creatorOptions.length === 1 && !formData.creatorId) {
+      updateField('creatorId', creatorOptions[0].id)
+      logger.info('Auto-selected single creator profile:', creatorOptions[0].name)
+    }
+  }, [creatorOptions, formData.creatorId])
+
+  useEffect(() => {
+    const handleCreatorProfileSaved = async () => {
+      logger.info('Creator profile saved, refreshing profiles...')
+
+      await fetchCreatorOptions()
+
+      window.dispatchEvent(new CustomEvent('close-settings'))
+      setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('open-deploy-modal', { detail: { tab: 'template' } }))
+      }, 100)
+    }
+
+    window.addEventListener('creator-profile-saved', handleCreatorProfileSaved)
+
+    return () => {
+      window.removeEventListener('creator-profile-saved', handleCreatorProfileSaved)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (existingTemplate) {
+      setFormData({
+        name: existingTemplate.name,
+        tagline: existingTemplate.details?.tagline || '',
+        about: existingTemplate.details?.about || '',
+        creatorId: existingTemplate.creatorId || '',
+        tags: existingTemplate.tags || [],
+      })
+    }
+  }, [existingTemplate])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!session?.user || !isFormValid) {
+      logger.error('User not authenticated or form invalid')
+      return
+    }
+
+    try {
+      const templateData = {
+        name: formData.name.trim(),
+        details: {
+          tagline: formData.tagline.trim(),
+          about: formData.about.trim(),
+        },
+        creatorId: formData.creatorId || undefined,
+        tags: formData.tags,
+      }
+
+      if (existingTemplate) {
+        await updateMutation.mutateAsync({
+          id: existingTemplate.id,
+          data: {
+            ...templateData,
+            updateState: true,
+          },
+        })
+      } else {
+        await createMutation.mutateAsync({ ...templateData, workflowId })
+      }
+
+      logger.info(`Template ${existingTemplate ? 'updated' : 'created'} successfully`)
+      onDeploymentComplete?.()
+    } catch (error) {
+      logger.error('Failed to save template:', error)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!existingTemplate) return
+
+    try {
+      await deleteMutation.mutateAsync(existingTemplate.id)
+      setShowDeleteDialog(false)
+      setFormData(initialFormData)
+    } catch (error) {
+      logger.error('Error deleting template:', error)
+    }
+  }
+
+  if (isLoadingTemplate) {
+    return (
+      <div className='space-y-[12px]'>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[40px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[76px]' />
+          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[32px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='space-y-4'>
+      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-[12px]'>
+        {existingTemplate?.state && (
+          <div>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Live Template
+            </Label>
+            <div
+              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+              onWheelCapture={(e) => {
+                if (e.ctrlKey || e.metaKey) return
+                e.stopPropagation()
+              }}
+            >
+              <TemplatePreviewContent existingTemplate={existingTemplate} />
+            </div>
+          </div>
+        )}
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Name
+          </Label>
+          <Input
+            placeholder='Deep Research Agent'
+            value={formData.name}
+            onChange={(e) => updateField('name', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Tagline
+          </Label>
+          <Input
+            placeholder='A deep research agent that can find information on any topic'
+            value={formData.tagline}
+            onChange={(e) => updateField('tagline', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Description
+          </Label>
+          <Textarea
+            placeholder='Optional description that supports Markdown'
+            className='min-h-[160px] resize-none'
+            value={formData.about}
+            onChange={(e) => updateField('about', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Creator
+          </Label>
+          {creatorOptions.length === 0 && !loadingCreators ? (
+            <Button
+              type='button'
+              variant='outline'
+              onClick={() => {
+                try {
+                  const event = new CustomEvent('open-settings', {
+                    detail: { tab: 'creator-profile' },
+                  })
+                  window.dispatchEvent(event)
+                  logger.info('Opened Settings modal at creator-profile section')
+                } catch (error) {
+                  logger.error('Failed to open Settings modal for creator profile', {
+                    error,
+                  })
+                }
+              }}
+              className='gap-[8px]'
+            >
+              <Plus className='h-[14px] w-[14px] text-[var(--text-muted)]' />
+              <span className='text-[var(--text-muted)]'>Create a Creator Profile</span>
+            </Button>
+          ) : (
+            <Combobox
+              options={creatorOptions.map((option) => ({
+                label: option.name,
+                value: option.id,
+              }))}
+              value={formData.creatorId}
+              selectedValue={formData.creatorId}
+              onChange={(value) => updateField('creatorId', value)}
+              placeholder={loadingCreators ? 'Loading...' : 'Select creator profile'}
+              editable={false}
+              filterOptions={false}
+              disabled={loadingCreators || isSubmitting}
+            />
+          )}
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Tags
+          </Label>
+          <TagInput
+            value={formData.tags}
+            onChange={(tags) => updateField('tags', tags)}
+            placeholder='Dev, Agents, Research, etc.'
+            maxTags={10}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <button
+          type='button'
+          data-template-delete-trigger
+          onClick={() => setShowDeleteDialog(true)}
+          style={{ display: 'none' }}
+        />
+      </form>
+
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Template</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete this template?{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
+            >
+              {deleteMutation.isPending ? (
+                <>
+                  <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
+
+interface TemplatePreviewContentProps {
+  existingTemplate:
+    | {
+        id: string
+        state?: Partial<WorkflowState>
+      }
+    | null
+    | undefined
+}
+
+function TemplatePreviewContent({ existingTemplate }: TemplatePreviewContentProps) {
+  if (!existingTemplate?.state || !existingTemplate.state.blocks) {
+    return null
+  }
+
+  const workflowState: WorkflowState = {
+    blocks: existingTemplate.state.blocks,
+    edges: existingTemplate.state.edges ?? [],
+    loops: existingTemplate.state.loops ?? {},
+    parallels: existingTemplate.state.parallels ?? {},
+    lastSaved: existingTemplate.state.lastSaved ?? Date.now(),
+  }
+
+  return (
+    <WorkflowPreview
+      key={`template-preview-${existingTemplate.id}`}
+      workflowState={workflowState}
+      showSubBlocks={true}
+      height='100%'
+      width='100%'
+      isPannable={true}
+      defaultPosition={{ x: 0, y: 0 }}
+      defaultZoom={0.6}
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index 36164f6b6..446fc1da7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -1,33 +1,38 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
-import { Loader2, MoreVertical, X } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import clsx from 'clsx'
+import { Button } from '@/components/emcn'
 import {
-  Badge,
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-} from '@/components/emcn'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui'
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTabs,
+  ModalTabsContent,
+  ModalTabsList,
+  ModalTabsTrigger,
+} from '@/components/emcn/components/modal/modal'
 import { getEnv } from '@/lib/core/config/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
-import { ChatDeploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy'
-import { DeployedWorkflowModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal'
-import { DeploymentInfo } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info'
-import { TemplateDeploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
+import { ApiDeploy } from './components/api/api'
+import { ChatDeploy, type ExistingChat } from './components/chat/chat'
+import { GeneralDeploy } from './components/general/general'
+import { TemplateDeploy } from './components/template/template'
 
 const logger = createLogger('DeployModal')
+
 interface DeployModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   workflowId: string | null
+  isDeployed: boolean
   needsRedeployment: boolean
   setNeedsRedeployment: (value: boolean) => void
   deployedState: WorkflowState
@@ -44,12 +49,13 @@ interface WorkflowDeploymentInfo {
   needsRedeployment: boolean
 }
 
-type TabView = 'api' | 'versions' | 'chat' | 'template'
+type TabView = 'general' | 'api' | 'chat' | 'template'
 
 export function DeployModal({
   open,
   onOpenChange,
   workflowId,
+  isDeployed: isDeployedProp,
   needsRedeployment,
   setNeedsRedeployment,
   deployedState,
@@ -59,7 +65,7 @@ export function DeployModal({
   const deploymentStatus = useWorkflowRegistry((state) =>
     state.getWorkflowDeploymentStatus(workflowId)
   )
-  const isDeployed = deploymentStatus?.isDeployed || false
+  const isDeployed = deploymentStatus?.isDeployed ?? isDeployedProp
   const setDeploymentStatus = useWorkflowRegistry((state) => state.setDeploymentStatus)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isUndeploying, setIsUndeploying] = useState(false)
@@ -69,7 +75,7 @@ export function DeployModal({
     workflowId ? state.workflows[workflowId] : undefined
   )
   const workflowWorkspaceId = workflowMetadata?.workspaceId ?? null
-  const [activeTab, setActiveTab] = useState<TabView>('api')
+  const [activeTab, setActiveTab] = useState<TabView>('general')
   const [chatSubmitting, setChatSubmitting] = useState(false)
   const [apiDeployError, setApiDeployError] = useState<string | null>(null)
   const [chatExists, setChatExists] = useState(false)
@@ -78,25 +84,18 @@ export function DeployModal({
 
   const [versions, setVersions] = useState<WorkflowDeploymentVersionResponse[]>([])
   const [versionsLoading, setVersionsLoading] = useState(false)
-  const [activatingVersion, setActivatingVersion] = useState<number | null>(null)
-  const [previewVersion, setPreviewVersion] = useState<number | null>(null)
-  const [previewing, setPreviewing] = useState(false)
-  const [previewDeployedState, setPreviewDeployedState] = useState<WorkflowState | null>(null)
-  const [currentPage, setCurrentPage] = useState(1)
-  const itemsPerPage = 5
-  const [editingVersion, setEditingVersion] = useState<number | null>(null)
-  const [editValue, setEditValue] = useState('')
-  const [isRenaming, setIsRenaming] = useState(false)
-  const [openDropdown, setOpenDropdown] = useState<number | null>(null)
-  const [versionToActivate, setVersionToActivate] = useState<number | null>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
+  const [showUndeployConfirm, setShowUndeployConfirm] = useState(false)
+  const [templateFormValid, setTemplateFormValid] = useState(false)
+  const [templateSubmitting, setTemplateSubmitting] = useState(false)
+  const [hasExistingTemplate, setHasExistingTemplate] = useState(false)
+  const [templateStatus, setTemplateStatus] = useState<{
+    status: 'pending' | 'approved' | 'rejected' | null
+    views?: number
+    stars?: number
+  } | null>(null)
 
-  useEffect(() => {
-    if (editingVersion !== null && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [editingVersion])
+  const [existingChat, setExistingChat] = useState<ExistingChat | null>(null)
+  const [isLoadingChat, setIsLoadingChat] = useState(false)
 
   const getApiKeyLabel = (value?: string | null) => {
     if (value && value.trim().length > 0) {
@@ -112,41 +111,48 @@ export function DeployModal({
     return getInputFormatExampleUtil(includeStreaming, selectedStreamingOutputs)
   }
 
-  const fetchChatDeploymentInfo = async () => {
-    if (!open || !workflowId) return
+  const fetchChatDeploymentInfo = useCallback(async () => {
+    if (!workflowId) return
 
     try {
-      setIsLoading(true)
+      setIsLoadingChat(true)
       const response = await fetch(`/api/workflows/${workflowId}/chat/status`)
 
       if (response.ok) {
         const data = await response.json()
         if (data.isDeployed && data.deployment) {
-          setChatExists(true)
+          const detailResponse = await fetch(`/api/chat/manage/${data.deployment.id}`)
+          if (detailResponse.ok) {
+            const chatDetail = await detailResponse.json()
+            setExistingChat(chatDetail)
+            setChatExists(true)
+          } else {
+            setExistingChat(null)
+            setChatExists(false)
+          }
         } else {
+          setExistingChat(null)
           setChatExists(false)
         }
       } else {
+        setExistingChat(null)
         setChatExists(false)
       }
     } catch (error) {
       logger.error('Error fetching chat deployment info:', { error })
+      setExistingChat(null)
       setChatExists(false)
     } finally {
-      setIsLoading(false)
+      setIsLoadingChat(false)
     }
-  }
+  }, [workflowId])
 
   useEffect(() => {
-    if (open) {
-      setIsLoading(true)
+    if (open && workflowId) {
+      setActiveTab('general')
       fetchChatDeploymentInfo()
-      setActiveTab('api')
-      setVersionToActivate(null)
-    } else {
-      setVersionToActivate(null)
     }
-  }, [open, workflowId])
+  }, [open, workflowId, fetchChatDeploymentInfo])
 
   useEffect(() => {
     async function fetchDeploymentInfo() {
@@ -199,12 +205,7 @@ export function DeployModal({
     try {
       setIsSubmitting(true)
 
-      let deployEndpoint = `/api/workflows/${workflowId}/deploy`
-      if (versionToActivate !== null) {
-        deployEndpoint = `/api/workflows/${workflowId}/deployments/${versionToActivate}/activate`
-      }
-
-      const response = await fetch(deployEndpoint, {
+      const response = await fetch(`/api/workflows/${workflowId}/deploy`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -221,17 +222,15 @@ export function DeployModal({
 
       const responseData = await response.json()
 
-      const isActivating = versionToActivate !== null
-      const isDeployedStatus = isActivating ? true : (responseData.isDeployed ?? false)
+      const isDeployedStatus = responseData.isDeployed ?? false
       const deployedAtTime = responseData.deployedAt ? new Date(responseData.deployedAt) : undefined
       const apiKeyLabel = getApiKeyLabel(responseData.apiKey)
 
       setDeploymentStatus(workflowId, isDeployedStatus, deployedAtTime, apiKeyLabel)
 
-      const isActivatingVersion = versionToActivate !== null
-      setNeedsRedeployment(isActivatingVersion)
+      setNeedsRedeployment(false)
       if (workflowId) {
-        useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, isActivatingVersion)
+        useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
       }
 
       await refetchDeployedState()
@@ -250,15 +249,11 @@ export function DeployModal({
           apiKey: getApiKeyLabel(deploymentData.apiKey),
           endpoint: apiEndpoint,
           exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
-          needsRedeployment: isActivatingVersion,
+          needsRedeployment: false,
         })
       }
 
-      setVersionToActivate(null)
       setApiDeployError(null)
-
-      // Templates connected to this workflow are automatically updated with the new state
-      // The deployWorkflow function handles updating template states in db-helpers.ts
     } catch (error: unknown) {
       logger.error('Error deploying workflow:', { error })
       const errorMessage = error instanceof Error ? error.message : 'Failed to deploy workflow'
@@ -268,10 +263,9 @@ export function DeployModal({
     }
   }
 
-  const fetchVersions = async () => {
+  const fetchVersions = useCallback(async () => {
     if (!workflowId) return
     try {
-      setVersionsLoading(true)
       const res = await fetch(`/api/workflows/${workflowId}/deployments`)
       if (res.ok) {
         const data = await res.json()
@@ -281,18 +275,16 @@ export function DeployModal({
       }
     } catch {
       setVersions([])
-    } finally {
-      setVersionsLoading(false)
     }
-  }
+  }, [workflowId])
 
   useEffect(() => {
     if (open && workflowId) {
-      fetchVersions()
+      setVersionsLoading(true)
+      fetchVersions().finally(() => setVersionsLoading(false))
     }
-  }, [open, workflowId])
+  }, [open, workflowId, fetchVersions])
 
-  // Clean up selectedStreamingOutputs when blocks are deleted
   useEffect(() => {
     if (!open || selectedStreamingOutputs.length === 0) return
 
@@ -300,7 +292,6 @@ export function DeployModal({
     const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i
 
     const validOutputs = selectedStreamingOutputs.filter((outputId) => {
-      // If it starts with a UUID, extract the blockId and check if the block exists
       if (UUID_REGEX.test(outputId)) {
         const underscoreIndex = outputId.indexOf('_')
         if (underscoreIndex === -1) return false
@@ -310,7 +301,6 @@ export function DeployModal({
         return !!block
       }
 
-      // If it's in blockName.attribute format, check if a block with that name exists
       const parts = outputId.split('.')
       if (parts.length >= 2) {
         const blockName = parts[0]
@@ -323,13 +313,11 @@ export function DeployModal({
       return true
     })
 
-    // Update the state if any outputs were filtered out
     if (validOutputs.length !== selectedStreamingOutputs.length) {
       setSelectedStreamingOutputs(validOutputs)
     }
   }, [open, selectedStreamingOutputs, setSelectedStreamingOutputs])
 
-  // Listen for event to reopen deploy modal
   useEffect(() => {
     const handleOpenDeployModal = (event: Event) => {
       const customEvent = event as CustomEvent<{ tab?: TabView }>
@@ -346,73 +334,72 @@ export function DeployModal({
     }
   }, [onOpenChange])
 
-  const handleActivateVersion = (version: number) => {
-    setVersionToActivate(version)
-    setActiveTab('api')
-  }
+  const handlePromoteToLive = useCallback(
+    async (version: number) => {
+      if (!workflowId) return
 
-  const openVersionPreview = async (version: number) => {
-    if (!workflowId) return
-    try {
-      setPreviewing(true)
-      setPreviewVersion(version)
-      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
-      if (res.ok) {
-        const data = await res.json()
-        setPreviewDeployedState(data.deployedState || null)
-      } else {
-        setPreviewDeployedState(null)
+      // Optimistically update versions to show the new active version immediately
+      const previousVersions = [...versions]
+      setVersions((prev) =>
+        prev.map((v) => ({
+          ...v,
+          isActive: v.version === version,
+        }))
+      )
+
+      try {
+        const response = await fetch(
+          `/api/workflows/${workflowId}/deployments/${version}/activate`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        )
+
+        if (!response.ok) {
+          const errorData = await response.json()
+          throw new Error(errorData.error || 'Failed to promote version')
+        }
+
+        const responseData = await response.json()
+
+        const deployedAtTime = responseData.deployedAt
+          ? new Date(responseData.deployedAt)
+          : undefined
+        const apiKeyLabel = getApiKeyLabel(responseData.apiKey)
+
+        setDeploymentStatus(workflowId, true, deployedAtTime, apiKeyLabel)
+
+        // Refresh deployed state in background (no loading flash)
+        refetchDeployedState()
+        fetchVersions()
+
+        const deploymentInfoResponse = await fetch(`/api/workflows/${workflowId}/deploy`)
+        if (deploymentInfoResponse.ok) {
+          const deploymentData = await deploymentInfoResponse.json()
+          const apiEndpoint = `${getEnv('NEXT_PUBLIC_APP_URL')}/api/workflows/${workflowId}/execute`
+          const inputFormatExample = getInputFormatExample(selectedStreamingOutputs.length > 0)
+          const placeholderKey = getApiHeaderPlaceholder()
+
+          setDeploymentInfo({
+            isDeployed: deploymentData.isDeployed,
+            deployedAt: deploymentData.deployedAt,
+            apiKey: getApiKeyLabel(deploymentData.apiKey),
+            endpoint: apiEndpoint,
+            exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
+            needsRedeployment: false,
+          })
+        }
+      } catch (error) {
+        // Rollback optimistic update on error
+        setVersions(previousVersions)
+        throw error
       }
-    } finally {
-      // keep modal open even if error; user can close
-    }
-  }
-
-  const handleStartRename = (version: number, currentName: string | null | undefined) => {
-    setOpenDropdown(null) // Close dropdown first
-    setEditingVersion(version)
-    setEditValue(currentName || `v${version}`)
-  }
-
-  const handleSaveRename = async (version: number) => {
-    if (!workflowId || !editValue.trim()) {
-      setEditingVersion(null)
-      return
-    }
-
-    const currentVersion = versions.find((v) => v.version === version)
-    const currentName = currentVersion?.name || `v${version}`
-
-    if (editValue.trim() === currentName) {
-      setEditingVersion(null)
-      return
-    }
-
-    setIsRenaming(true)
-    try {
-      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: editValue.trim() }),
-      })
-
-      if (res.ok) {
-        await fetchVersions()
-        setEditingVersion(null)
-      } else {
-        logger.error('Failed to rename version')
-      }
-    } catch (error) {
-      logger.error('Error renaming version:', error)
-    } finally {
-      setIsRenaming(false)
-    }
-  }
-
-  const handleCancelRename = () => {
-    setEditingVersion(null)
-    setEditValue('')
-  }
+    },
+    [workflowId, versions, refetchDeployedState, fetchVersions, selectedStreamingOutputs]
+  )
 
   const handleUndeploy = async () => {
     try {
@@ -429,6 +416,7 @@ export function DeployModal({
 
       setDeploymentStatus(workflowId, false)
       setChatExists(false)
+      setShowUndeployConfirm(false)
       onOpenChange(false)
     } catch (error: unknown) {
       logger.error('Error undeploying workflow:', { error })
@@ -490,8 +478,6 @@ export function DeployModal({
   const handlePostDeploymentUpdate = async () => {
     if (!workflowId) return
 
-    const isActivating = versionToActivate !== null
-
     setDeploymentStatus(workflowId, true, new Date(), getApiKeyLabel())
 
     const deploymentInfoResponse = await fetch(`/api/workflows/${workflowId}/deploy`)
@@ -508,19 +494,18 @@ export function DeployModal({
         apiKey: getApiKeyLabel(deploymentData.apiKey),
         endpoint: apiEndpoint,
         exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
-        needsRedeployment: isActivating,
+        needsRedeployment: false,
       })
     }
 
     await refetchDeployedState()
     await fetchVersions()
-    useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, isActivating)
+    useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
   }
 
   const handleChatFormSubmit = () => {
     const form = document.getElementById('chat-deploy-form') as HTMLFormElement
     if (form) {
-      // Check if we're in success view and need to trigger update
       const updateTrigger = form.querySelector('[data-update-trigger]') as HTMLButtonElement
       if (updateTrigger) {
         updateTrigger.click()
@@ -530,325 +515,124 @@ export function DeployModal({
     }
   }
 
+  const handleChatDelete = () => {
+    const form = document.getElementById('chat-deploy-form') as HTMLFormElement
+    if (form) {
+      const deleteButton = form.querySelector('[data-delete-trigger]') as HTMLButtonElement
+      if (deleteButton) {
+        deleteButton.click()
+      }
+    }
+  }
+
+  const handleTemplateFormSubmit = useCallback(() => {
+    const form = document.getElementById('template-deploy-form') as HTMLFormElement
+    form?.requestSubmit()
+  }, [])
+
+  const handleTemplateDelete = useCallback(() => {
+    const form = document.getElementById('template-deploy-form')
+    const deleteTrigger = form?.querySelector('[data-template-delete-trigger]') as HTMLButtonElement
+    deleteTrigger?.click()
+  }, [])
+
   return (
     <>
-      <Dialog open={open} onOpenChange={handleCloseModal}>
-        <DialogContent
-          className='flex max-h-[90vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[700px]'
-          hideCloseButton
-        >
-          <DialogHeader className='flex-shrink-0 border-b px-6 py-4'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <DialogTitle className='font-medium text-lg'>Deploy Workflow</DialogTitle>
-                {needsRedeployment && versions.length > 0 && versionToActivate === null && (
-                  <Badge variant='default'>
-                    {versions.find((v) => v.isActive)?.name ||
-                      `v${versions.find((v) => v.isActive)?.version}`}{' '}
-                    active
-                  </Badge>
-                )}
-              </div>
-              <Button variant='ghost' className='h-8 w-8 p-0' onClick={handleCloseModal}>
-                <X className='h-4 w-4' />
-                <span className='sr-only'>Close</span>
-              </Button>
-            </div>
-          </DialogHeader>
+      <Modal open={open} onOpenChange={handleCloseModal}>
+        <ModalContent className='h-[76vh] w-[660px]'>
+          <ModalHeader>Deploy Workflow</ModalHeader>
 
-          <div className='flex flex-1 flex-col overflow-hidden'>
-            <div className='flex h-14 flex-none items-center border-b px-6'>
-              <div className='flex gap-2'>
-                <Button
-                  variant={activeTab === 'api' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('api')}
-                >
-                  API
-                </Button>
-                <Button
-                  variant={activeTab === 'chat' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('chat')}
-                >
-                  Chat
-                </Button>
-                <Button
-                  variant={activeTab === 'versions' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('versions')}
-                >
-                  Versions
-                </Button>
-                <Button
-                  variant={activeTab === 'template' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('template')}
-                >
-                  Template
-                </Button>
-              </div>
-            </div>
+          <ModalTabs
+            value={activeTab}
+            onValueChange={(value) => setActiveTab(value as TabView)}
+            className='flex min-h-0 flex-1 flex-col'
+          >
+            <ModalTabsList activeValue={activeTab}>
+              <ModalTabsTrigger value='general'>General</ModalTabsTrigger>
+              <ModalTabsTrigger value='api'>API</ModalTabsTrigger>
+              <ModalTabsTrigger value='chat'>Chat</ModalTabsTrigger>
+              <ModalTabsTrigger value='template'>Template</ModalTabsTrigger>
+            </ModalTabsList>
 
-            <div className='flex-1 overflow-y-auto'>
-              <div className='p-6' key={`${activeTab}-${versionToActivate}`}>
-                {activeTab === 'api' && (
-                  <div className='space-y-4'>
-                    {apiDeployError && (
-                      <div className='rounded-md border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-                        <div className='font-semibold'>API Deployment Error</div>
-                        <div>{apiDeployError}</div>
-                      </div>
-                    )}
+            <ModalBody className='min-h-0 flex-1'>
+              <ModalTabsContent value='general'>
+                <GeneralDeploy
+                  workflowId={workflowId}
+                  deployedState={deployedState}
+                  isLoadingDeployedState={isLoadingDeployedState}
+                  versions={versions}
+                  versionsLoading={versionsLoading}
+                  onPromoteToLive={handlePromoteToLive}
+                  onLoadDeploymentComplete={handleCloseModal}
+                  fetchVersions={fetchVersions}
+                />
+              </ModalTabsContent>
 
-                    {versionToActivate !== null ? (
-                      <div className='space-y-4'>
-                        <div className='rounded-md border bg-muted/40 p-4 text-muted-foreground text-sm'>
-                          {`Deploy version ${
-                            versions.find((v) => v.version === versionToActivate)?.name ||
-                            `v${versionToActivate}`
-                          } to production.`}
-                        </div>
-                        <div className='flex gap-2'>
-                          <Button variant='primary' onClick={onDeploy} disabled={isSubmitting}>
-                            {isSubmitting ? (
-                              <>
-                                <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
-                                Deploying...
-                              </>
-                            ) : (
-                              'Deploy version'
-                            )}
-                          </Button>
-                          <Button variant='outline' onClick={() => setVersionToActivate(null)}>
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <DeploymentInfo
-                        isLoading={isLoading}
-                        deploymentInfo={
-                          deploymentInfo ? { ...deploymentInfo, needsRedeployment } : null
-                        }
-                        onRedeploy={handleRedeploy}
-                        onUndeploy={handleUndeploy}
-                        isSubmitting={isSubmitting}
-                        isUndeploying={isUndeploying}
-                        workflowId={workflowId}
-                        deployedState={deployedState}
-                        isLoadingDeployedState={isLoadingDeployedState}
-                        getInputFormatExample={getInputFormatExample}
-                        selectedStreamingOutputs={selectedStreamingOutputs}
-                        onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
-                        onLoadDeploymentComplete={handleCloseModal}
-                      />
-                    )}
-                  </div>
-                )}
+              <ModalTabsContent value='api'>
+                <ApiDeploy
+                  workflowId={workflowId}
+                  deploymentInfo={deploymentInfo}
+                  isLoading={isLoading}
+                  needsRedeployment={needsRedeployment}
+                  apiDeployError={apiDeployError}
+                  getInputFormatExample={getInputFormatExample}
+                  selectedStreamingOutputs={selectedStreamingOutputs}
+                  onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
+                />
+              </ModalTabsContent>
 
-                {activeTab === 'versions' && (
-                  <>
-                    <div className='mb-3 font-medium text-sm'>Deployment Versions</div>
-                    {versionsLoading ? (
-                      <div className='rounded-md border p-4 text-center text-muted-foreground text-sm'>
-                        Loading deployments...
-                      </div>
-                    ) : versions.length === 0 ? (
-                      <div className='rounded-md border p-4 text-center text-muted-foreground text-sm'>
-                        No deployments yet
-                      </div>
-                    ) : (
-                      <>
-                        <div className='overflow-hidden rounded-md border'>
-                          <table className='w-full'>
-                            <thead className='border-b bg-muted/50'>
-                              <tr>
-                                <th className='w-10' />
-                                <th className='w-[200px] whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Version
-                                </th>
-                                <th className='whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Deployed By
-                                </th>
-                                <th className='whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Created
-                                </th>
-                                <th className='w-10' />
-                              </tr>
-                            </thead>
-                            <tbody className='divide-y'>
-                              {versions
-                                .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
-                                .map((v) => (
-                                  <tr
-                                    key={v.id}
-                                    className='cursor-pointer transition-colors hover:bg-muted/30'
-                                    onClick={() => {
-                                      if (editingVersion !== v.version) {
-                                        openVersionPreview(v.version)
-                                      }
-                                    }}
-                                  >
-                                    <td className='px-4 py-2.5'>
-                                      <div
-                                        className={`h-2 w-2 rounded-full ${
-                                          v.isActive ? 'bg-green-500' : 'bg-muted-foreground/40'
-                                        }`}
-                                        title={v.isActive ? 'Active' : 'Inactive'}
-                                      />
-                                    </td>
-                                    <td className='w-[220px] max-w-[220px] px-4 py-2.5'>
-                                      {editingVersion === v.version ? (
-                                        <input
-                                          ref={inputRef}
-                                          value={editValue}
-                                          onChange={(e) => setEditValue(e.target.value)}
-                                          onKeyDown={(e) => {
-                                            if (e.key === 'Enter') {
-                                              e.preventDefault()
-                                              handleSaveRename(v.version)
-                                            } else if (e.key === 'Escape') {
-                                              e.preventDefault()
-                                              handleCancelRename()
-                                            }
-                                          }}
-                                          onBlur={() => handleSaveRename(v.version)}
-                                          className='w-full border-0 bg-transparent p-0 font-medium text-sm leading-5 outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                                          maxLength={100}
-                                          disabled={isRenaming}
-                                          autoComplete='off'
-                                          autoCorrect='off'
-                                          autoCapitalize='off'
-                                          spellCheck='false'
-                                        />
-                                      ) : (
-                                        <span className='block whitespace-pre-wrap break-words break-all font-medium text-sm leading-5'>
-                                          {v.name || `v${v.version}`}
-                                        </span>
-                                      )}
-                                    </td>
-                                    <td className='whitespace-nowrap px-4 py-2.5'>
-                                      <span className='text-muted-foreground text-sm'>
-                                        {v.deployedBy || 'Unknown'}
-                                      </span>
-                                    </td>
-                                    <td className='whitespace-nowrap px-4 py-2.5'>
-                                      <span className='text-muted-foreground text-sm'>
-                                        {new Date(v.createdAt).toLocaleDateString()}{' '}
-                                        {new Date(v.createdAt).toLocaleTimeString()}
-                                      </span>
-                                    </td>
-                                    <td
-                                      className='px-4 py-2.5'
-                                      onClick={(e) => e.stopPropagation()}
-                                    >
-                                      <Popover
-                                        open={openDropdown === v.version}
-                                        onOpenChange={(open) =>
-                                          setOpenDropdown(open ? v.version : null)
-                                        }
-                                      >
-                                        <PopoverTrigger asChild>
-                                          <Button
-                                            variant='ghost'
-                                            disabled={activatingVersion === v.version}
-                                            className='h-8 w-8 p-0'
-                                          >
-                                            <MoreVertical className='h-4 w-4' />
-                                          </Button>
-                                        </PopoverTrigger>
-                                        <PopoverContent align='end'>
-                                          <PopoverItem
-                                            onClick={() => openVersionPreview(v.version)}
-                                          >
-                                            {v.isActive ? 'View Active' : 'Inspect'}
-                                          </PopoverItem>
-                                          <PopoverItem
-                                            onClick={() => handleStartRename(v.version, v.name)}
-                                          >
-                                            Rename
-                                          </PopoverItem>
-                                        </PopoverContent>
-                                      </Popover>
-                                    </td>
-                                  </tr>
-                                ))}
-                            </tbody>
-                          </table>
-                        </div>
-                        {versions.length > itemsPerPage && (
-                          <div className='mt-3 flex items-center justify-between'>
-                            <span className='text-muted-foreground text-sm'>
-                              Showing{' '}
-                              {Math.min((currentPage - 1) * itemsPerPage + 1, versions.length)} -{' '}
-                              {Math.min(currentPage * itemsPerPage, versions.length)} of{' '}
-                              {versions.length}
-                            </span>
-                            <div className='flex gap-2'>
-                              <Button
-                                variant='outline'
-                                onClick={() => setCurrentPage(currentPage - 1)}
-                                disabled={currentPage === 1}
-                              >
-                                Previous
-                              </Button>
-                              <Button
-                                variant='outline'
-                                onClick={() => setCurrentPage(currentPage + 1)}
-                                disabled={currentPage * itemsPerPage >= versions.length}
-                              >
-                                Next
-                              </Button>
-                            </div>
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </>
-                )}
+              <ModalTabsContent value='chat'>
+                <ChatDeploy
+                  workflowId={workflowId || ''}
+                  deploymentInfo={deploymentInfo}
+                  existingChat={existingChat}
+                  isLoadingChat={isLoadingChat}
+                  onRefetchChat={fetchChatDeploymentInfo}
+                  onChatExistsChange={setChatExists}
+                  chatSubmitting={chatSubmitting}
+                  setChatSubmitting={setChatSubmitting}
+                  onValidationChange={setIsChatFormValid}
+                  onDeploymentComplete={handleCloseModal}
+                  onDeployed={handlePostDeploymentUpdate}
+                  onVersionActivated={() => {}}
+                />
+              </ModalTabsContent>
 
-                {activeTab === 'chat' && (
-                  <ChatDeploy
-                    workflowId={workflowId || ''}
-                    deploymentInfo={deploymentInfo}
-                    onChatExistsChange={setChatExists}
-                    chatSubmitting={chatSubmitting}
-                    setChatSubmitting={setChatSubmitting}
-                    onValidationChange={setIsChatFormValid}
+              <ModalTabsContent value='template'>
+                {workflowId && (
+                  <TemplateDeploy
+                    workflowId={workflowId}
                     onDeploymentComplete={handleCloseModal}
-                    onDeployed={handlePostDeploymentUpdate}
-                    onUndeploy={handleUndeploy}
-                    onVersionActivated={() => setVersionToActivate(null)}
+                    onValidationChange={setTemplateFormValid}
+                    onSubmittingChange={setTemplateSubmitting}
+                    onExistingTemplateChange={setHasExistingTemplate}
+                    onTemplateStatusChange={setTemplateStatus}
                   />
                 )}
+              </ModalTabsContent>
+            </ModalBody>
+          </ModalTabs>
 
-                {activeTab === 'template' && workflowId && (
-                  <TemplateDeploy workflowId={workflowId} onDeploymentComplete={handleCloseModal} />
-                )}
-              </div>
-            </div>
-          </div>
-
+          {activeTab === 'general' && (
+            <GeneralFooter
+              isDeployed={isDeployed}
+              needsRedeployment={needsRedeployment}
+              isSubmitting={isSubmitting}
+              isUndeploying={isUndeploying}
+              onDeploy={onDeploy}
+              onRedeploy={handleRedeploy}
+              onUndeploy={() => setShowUndeployConfirm(true)}
+            />
+          )}
           {activeTab === 'chat' && (
-            <div className='flex flex-shrink-0 justify-between border-t px-6 py-4'>
-              <Button variant='outline' onClick={handleCloseModal}>
-                Cancel
-              </Button>
-
+            <ModalFooter className='items-center'>
               <div className='flex gap-2'>
                 {chatExists && (
                   <Button
                     type='button'
-                    onClick={() => {
-                      const form = document.getElementById('chat-deploy-form') as HTMLFormElement
-                      if (form) {
-                        const deleteButton = form.querySelector(
-                          '[data-delete-trigger]'
-                        ) as HTMLButtonElement
-                        if (deleteButton) {
-                          deleteButton.click()
-                        }
-                      }
-                    }}
+                    variant='default'
+                    onClick={handleChatDelete}
                     disabled={chatSubmitting}
-                    className='bg-red-500 text-white hover:bg-red-600'
                   >
                     Delete
                   </Button>
@@ -859,49 +643,215 @@ export function DeployModal({
                   onClick={handleChatFormSubmit}
                   disabled={chatSubmitting || !isChatFormValid}
                 >
-                  {chatSubmitting ? (
-                    <>
-                      <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
-                      Deploying...
-                    </>
-                  ) : chatExists ? (
-                    'Update'
-                  ) : (
-                    'Deploy Chat'
-                  )}
+                  {chatSubmitting
+                    ? chatExists
+                      ? 'Updating...'
+                      : 'Launching...'
+                    : chatExists
+                      ? 'Update'
+                      : 'Launch Chat'}
                 </Button>
               </div>
-            </div>
+            </ModalFooter>
           )}
-        </DialogContent>
-        {previewVersion !== null && previewDeployedState && workflowId && (
-          <DeployedWorkflowModal
-            isOpen={true}
-            onClose={() => {
-              setPreviewVersion(null)
-              setPreviewDeployedState(null)
-              setPreviewing(false)
-            }}
-            needsRedeployment={true}
-            activeDeployedState={deployedState}
-            selectedDeployedState={previewDeployedState as WorkflowState}
-            selectedVersion={previewVersion}
-            onActivateVersion={() => {
-              handleActivateVersion(previewVersion)
-              setPreviewVersion(null)
-              setPreviewDeployedState(null)
-              setPreviewing(false)
-            }}
-            isActivating={activatingVersion === previewVersion}
-            selectedVersionLabel={
-              versions.find((v) => v.version === previewVersion)?.name || `v${previewVersion}`
-            }
-            workflowId={workflowId}
-            isSelectedVersionActive={versions.find((v) => v.version === previewVersion)?.isActive}
-            onLoadDeploymentComplete={handleCloseModal}
-          />
-        )}
-      </Dialog>
+          {activeTab === 'template' && (
+            <ModalFooter
+              className={`items-center ${hasExistingTemplate && templateStatus ? 'justify-between' : ''}`}
+            >
+              {hasExistingTemplate && templateStatus && (
+                <TemplateStatusBadge
+                  status={templateStatus.status}
+                  views={templateStatus.views}
+                  stars={templateStatus.stars}
+                />
+              )}
+              <div className='flex gap-2'>
+                {hasExistingTemplate && (
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={handleTemplateDelete}
+                    disabled={templateSubmitting}
+                  >
+                    Delete
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  variant='primary'
+                  onClick={handleTemplateFormSubmit}
+                  disabled={templateSubmitting || !templateFormValid}
+                >
+                  {templateSubmitting
+                    ? hasExistingTemplate
+                      ? 'Updating...'
+                      : 'Publishing...'
+                    : hasExistingTemplate
+                      ? 'Update Template'
+                      : 'Publish Template'}
+                </Button>
+              </div>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showUndeployConfirm} onOpenChange={setShowUndeployConfirm}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Undeploy API</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to undeploy this workflow?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will remove the API endpoint and make it unavailable to external users.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => setShowUndeployConfirm(false)}
+              disabled={isUndeploying}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleUndeploy}
+              disabled={isUndeploying}
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
+            >
+              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   )
 }
+
+interface StatusBadgeProps {
+  isWarning: boolean
+}
+
+function StatusBadge({ isWarning }: StatusBadgeProps) {
+  const label = isWarning ? 'Update deployment' : 'Live'
+
+  return (
+    <div
+      className={clsx(
+        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
+        isWarning ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
+      )}
+    >
+      <div
+        className='h-[6px] w-[6px] rounded-[2px]'
+        style={{
+          backgroundColor: isWarning ? '#EAB308' : '#4ADE80',
+        }}
+      />
+      <span
+        className='font-medium text-[11.5px]'
+        style={{
+          color: isWarning ? '#EAB308' : '#86EFAC',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  )
+}
+
+interface TemplateStatusBadgeProps {
+  status: 'pending' | 'approved' | 'rejected' | null
+  views?: number
+  stars?: number
+}
+
+function TemplateStatusBadge({ status, views, stars }: TemplateStatusBadgeProps) {
+  const isPending = status === 'pending'
+  const label = isPending ? 'Under review' : 'Live'
+
+  const statsText =
+    status === 'approved' && views !== undefined && views > 0
+      ? `${views} views${stars !== undefined && stars > 0 ? ` • ${stars} stars` : ''}`
+      : null
+
+  return (
+    <div
+      className={clsx(
+        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
+        isPending ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
+      )}
+    >
+      <div
+        className='h-[6px] w-[6px] rounded-[2px]'
+        style={{
+          backgroundColor: isPending ? '#EAB308' : '#4ADE80',
+        }}
+      />
+      <span
+        className='font-medium text-[11.5px]'
+        style={{
+          color: isPending ? '#EAB308' : '#86EFAC',
+        }}
+      >
+        {label}
+      </span>
+      {statsText && (
+        <span
+          className='font-medium text-[11.5px]'
+          style={{ color: isPending ? '#EAB308' : '#86EFAC' }}
+        >
+          • {statsText}
+        </span>
+      )}
+    </div>
+  )
+}
+
+interface GeneralFooterProps {
+  isDeployed?: boolean
+  needsRedeployment: boolean
+  isSubmitting: boolean
+  isUndeploying: boolean
+  onDeploy: () => Promise<void>
+  onRedeploy: () => Promise<void>
+  onUndeploy: () => void
+}
+
+function GeneralFooter({
+  isDeployed,
+  needsRedeployment,
+  isSubmitting,
+  isUndeploying,
+  onDeploy,
+  onRedeploy,
+  onUndeploy,
+}: GeneralFooterProps) {
+  if (!isDeployed) {
+    return (
+      <ModalFooter>
+        <Button variant='primary' onClick={onDeploy} disabled={isSubmitting}>
+          {isSubmitting ? 'Deploying...' : 'Deploy API'}
+        </Button>
+      </ModalFooter>
+    )
+  }
+
+  return (
+    <ModalFooter className='items-center justify-between'>
+      <StatusBadge isWarning={needsRedeployment} />
+      <div className='flex items-center gap-2'>
+        <Button variant='default' onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
+          {isUndeploying ? 'Undeploying...' : 'Undeploy'}
+        </Button>
+        {needsRedeployment && (
+          <Button variant='primary' onClick={onRedeploy} disabled={isSubmitting || isUndeploying}>
+            {isSubmitting ? 'Updating...' : 'Update'}
+          </Button>
+        )}
+      </div>
+    </ModalFooter>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts
new file mode 100644
index 000000000..3399969b9
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts
@@ -0,0 +1 @@
+export { DeployModal } from './deploy-modal/deploy-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index e76ea18fe..7c2253351 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -62,7 +62,6 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
   const isEmpty = !hasBlocks()
   const canDeploy = userPermissions.canAdmin
   const isDisabled = isDeploying || !canDeploy || isEmpty
-  const isPreviousVersionActive = isDeployed && changeDetected
 
   /**
    * Handle deploy button click
@@ -135,6 +134,7 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
         open={isModalOpen}
         onOpenChange={setIsModalOpen}
         workflowId={activeWorkflowId}
+        isDeployed={isDeployed}
         needsRedeployment={changeDetected}
         setNeedsRedeployment={setChangeDetected}
         deployedState={deployedState!}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts
deleted file mode 100644
index 321110c49..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useCallback, useState } from 'react'
-import { z } from 'zod'
-import { createLogger } from '@/lib/logs/console/logger'
-import type { ChatFormData } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-import type { OutputConfig } from '@/stores/chat/store'
-
-const logger = createLogger('ChatDeployment')
-
-export interface ChatDeploymentState {
-  isLoading: boolean
-  error: string | null
-  deployedUrl: string | null
-}
-
-const chatSchema = z.object({
-  workflowId: z.string().min(1, 'Workflow ID is required'),
-  identifier: z
-    .string()
-    .min(1, 'Identifier is required')
-    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens'),
-  title: z.string().min(1, 'Title is required'),
-  description: z.string().optional(),
-  customizations: z.object({
-    primaryColor: z.string(),
-    welcomeMessage: z.string(),
-    imageUrl: z.string().optional(),
-  }),
-  authType: z.enum(['public', 'password', 'email']).default('public'),
-  password: z.string().optional(),
-  allowedEmails: z.array(z.string()).optional().default([]),
-  outputConfigs: z
-    .array(
-      z.object({
-        blockId: z.string(),
-        path: z.string(),
-      })
-    )
-    .optional()
-    .default([]),
-})
-
-export function useChatDeployment() {
-  const [state, setState] = useState<ChatDeploymentState>({
-    isLoading: false,
-    error: null,
-    deployedUrl: null,
-  })
-
-  const deployChat = useCallback(
-    async (
-      workflowId: string,
-      formData: ChatFormData,
-      deploymentInfo: { apiKey: string } | null,
-      existingChatId?: string,
-      imageUrl?: string | null
-    ) => {
-      setState({ isLoading: true, error: null, deployedUrl: null })
-
-      try {
-        // Prepare output configs
-        const outputConfigs: OutputConfig[] = formData.selectedOutputBlocks
-          .map((outputId) => {
-            const firstUnderscoreIndex = outputId.indexOf('_')
-            if (firstUnderscoreIndex !== -1) {
-              const blockId = outputId.substring(0, firstUnderscoreIndex)
-              const path = outputId.substring(firstUnderscoreIndex + 1)
-              if (blockId && path) {
-                return { blockId, path }
-              }
-            }
-            return null
-          })
-          .filter(Boolean) as OutputConfig[]
-
-        const payload = {
-          workflowId,
-          identifier: formData.identifier.trim(),
-          title: formData.title.trim(),
-          description: formData.description.trim(),
-          customizations: {
-            primaryColor: 'var(--brand-primary-hover-hex)',
-            welcomeMessage: formData.welcomeMessage.trim(),
-            ...(imageUrl && { imageUrl }),
-          },
-          authType: formData.authType,
-          password: formData.authType === 'password' ? formData.password : undefined,
-          allowedEmails:
-            formData.authType === 'email' || formData.authType === 'sso' ? formData.emails : [],
-          outputConfigs,
-          apiKey: deploymentInfo?.apiKey,
-          deployApiEnabled: !existingChatId,
-        }
-
-        chatSchema.parse(payload)
-
-        // Determine endpoint and method
-        const endpoint = existingChatId ? `/api/chat/manage/${existingChatId}` : '/api/chat'
-        const method = existingChatId ? 'PATCH' : 'POST'
-
-        const response = await fetch(endpoint, {
-          method,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        })
-
-        const result = await response.json()
-
-        if (!response.ok) {
-          // Handle identifier conflict specifically
-          if (result.error === 'Identifier already in use') {
-            throw new Error('This identifier is already in use')
-          }
-          throw new Error(result.error || `Failed to ${existingChatId ? 'update' : 'deploy'} chat`)
-        }
-
-        if (!result.chatUrl) {
-          throw new Error('Response missing chatUrl')
-        }
-
-        setState({
-          isLoading: false,
-          error: null,
-          deployedUrl: result.chatUrl,
-        })
-
-        logger.info(`Chat ${existingChatId ? 'updated' : 'deployed'} successfully:`, result.chatUrl)
-        return result.chatUrl
-      } catch (error: any) {
-        const errorMessage = error.message || 'An unexpected error occurred'
-        setState({
-          isLoading: false,
-          error: errorMessage,
-          deployedUrl: null,
-        })
-
-        logger.error(`Failed to ${existingChatId ? 'update' : 'deploy'} chat:`, error)
-        throw error
-      }
-    },
-    []
-  )
-
-  const reset = useCallback(() => {
-    setState({
-      isLoading: false,
-      error: null,
-      deployedUrl: null,
-    })
-  }, [])
-
-  return {
-    ...state,
-    deployChat,
-    reset,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts
deleted file mode 100644
index 3c73581d7..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useCallback, useState } from 'react'
-
-export type AuthType = 'public' | 'password' | 'email' | 'sso'
-
-export interface ChatFormData {
-  identifier: string
-  title: string
-  description: string
-  authType: AuthType
-  password: string
-  emails: string[]
-  welcomeMessage: string
-  selectedOutputBlocks: string[]
-}
-
-export interface ChatFormErrors {
-  identifier?: string
-  title?: string
-  password?: string
-  emails?: string
-  outputBlocks?: string
-  general?: string
-}
-
-const initialFormData: ChatFormData = {
-  identifier: '',
-  title: '',
-  description: '',
-  authType: 'public',
-  password: '',
-  emails: [],
-  welcomeMessage: 'Hi there! How can I help you today?',
-  selectedOutputBlocks: [],
-}
-
-export function useChatForm(initialData?: Partial<ChatFormData>) {
-  const [formData, setFormData] = useState<ChatFormData>({
-    ...initialFormData,
-    ...initialData,
-  })
-
-  const [errors, setErrors] = useState<ChatFormErrors>({})
-
-  const updateField = useCallback(
-    <K extends keyof ChatFormData>(field: K, value: ChatFormData[K]) => {
-      setFormData((prev) => ({ ...prev, [field]: value }))
-      // Clear error when user starts typing
-      if (field in errors && errors[field as keyof ChatFormErrors]) {
-        setErrors((prev) => ({ ...prev, [field]: undefined }))
-      }
-    },
-    [errors]
-  )
-
-  const setError = useCallback((field: keyof ChatFormErrors, message: string) => {
-    setErrors((prev) => ({ ...prev, [field]: message }))
-  }, [])
-
-  const clearError = useCallback((field: keyof ChatFormErrors) => {
-    setErrors((prev) => ({ ...prev, [field]: undefined }))
-  }, [])
-
-  const clearAllErrors = useCallback(() => {
-    setErrors({})
-  }, [])
-
-  const validateForm = useCallback((): boolean => {
-    const newErrors: ChatFormErrors = {}
-
-    if (!formData.identifier.trim()) {
-      newErrors.identifier = 'Identifier is required'
-    } else if (!/^[a-z0-9-]+$/.test(formData.identifier)) {
-      newErrors.identifier = 'Identifier can only contain lowercase letters, numbers, and hyphens'
-    }
-
-    if (!formData.title.trim()) {
-      newErrors.title = 'Title is required'
-    }
-
-    if (formData.authType === 'password' && !formData.password.trim()) {
-      newErrors.password = 'Password is required when using password protection'
-    }
-
-    if (formData.authType === 'email' && formData.emails.length === 0) {
-      newErrors.emails = 'At least one email or domain is required when using email access control'
-    }
-
-    if (formData.authType === 'sso' && formData.emails.length === 0) {
-      newErrors.emails = 'At least one email or domain is required when using SSO access control'
-    }
-
-    if (formData.selectedOutputBlocks.length === 0) {
-      newErrors.outputBlocks = 'Please select at least one output block'
-    }
-
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }, [formData])
-
-  const resetForm = useCallback(() => {
-    setFormData(initialFormData)
-    setErrors({})
-  }, [])
-
-  return {
-    formData,
-    errors,
-    updateField,
-    setError,
-    clearError,
-    clearAllErrors,
-    validateForm,
-    resetForm,
-    setFormData,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index 1f0276ed7..44f881c62 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -91,7 +91,7 @@ export function FieldItem({
       onDragStart={handleDragStart}
       onClick={handleClick}
       className={clsx(
-        'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
+        'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing',
         hasChildren && 'cursor-pointer'
       )}
       style={{ marginLeft: `${indent}px` }}
@@ -99,7 +99,7 @@ export function FieldItem({
       <span
         className={clsx(
           'flex-1 truncate font-medium',
-          'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+          'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
         )}
       >
         {field.name}
@@ -109,7 +109,7 @@ export function FieldItem({
         <ChevronDown
           className={clsx(
             'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
+            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 1205a02c8..61a8cd91a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -25,7 +25,7 @@ interface ConnectionBlocksProps {
 }
 
 const TREE_STYLES = {
-  LINE_COLOR: '#2C2C2C',
+  LINE_COLOR: 'var(--border)',
   LINE_OFFSET: 4,
 } as const
 
@@ -123,7 +123,7 @@ function ConnectionItem({
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
         className={clsx(
-          'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
+          'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing',
           hasFields && 'cursor-pointer'
         )}
         onClick={() => hasFields && onToggleExpand(connection.id)}
@@ -145,7 +145,7 @@ function ConnectionItem({
         <span
           className={clsx(
             'truncate font-medium',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )}
         >
           {connection.name}
@@ -154,7 +154,7 @@ function ConnectionItem({
           <ChevronDown
             className={clsx(
               'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-              'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
+              'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
               isExpanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index 3336dadf8..44f6e13a0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -633,8 +633,12 @@ export function Code({
       numbers.push(
         <div
           key={`${lineNumber}-0`}
-          className={cn('text-right text-xs tabular-nums leading-[21px]')}
-          style={{ color: isActive ? '#eeeeee' : '#a8a8a8' }}
+          className={cn(
+            'text-right text-xs tabular-nums leading-[21px]',
+            isActive
+              ? 'text-[var(--text-primary)] dark:text-[#eeeeee]'
+              : 'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+          )}
         >
           {lineNumber}
         </div>
@@ -656,8 +660,10 @@ export function Code({
       numbers.push(
         <div
           key={'1-0'}
-          className={cn('text-right text-xs tabular-nums leading-[21px]')}
-          style={{ color: '#a8a8a8' }}
+          className={cn(
+            'text-right text-xs tabular-nums leading-[21px]',
+            'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+          )}
         >
           1
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index c215ae644..edab988d4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -709,7 +709,7 @@ export function ConditionInput({
       {conditionalBlocks.map((block, index) => (
         <div
           key={block.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
         >
           <div
             className={cn(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index ed5a437b9..de96d295f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -257,7 +257,7 @@ export function InputMapping({
 
   if (!selectedWorkflowId) {
     return (
-      <div className='flex flex-col items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] p-8 text-center'>
+      <div className='flex flex-col items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] p-8 text-center dark:bg-[#1F1F1F]'>
         <svg
           className='mb-3 h-10 w-10 text-[var(--text-tertiary)]'
           fill='none'
@@ -369,7 +369,7 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+        'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 33a4d64cb..4d1301880 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -12,6 +12,7 @@ import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/
 import type { SubBlockConfig } from '@/blocks/types'
 
 const MIN_TEXTAREA_HEIGHT_PX = 80
+const MAX_TEXTAREA_HEIGHT_PX = 320
 
 /**
  * Interface for individual message in the messages array
@@ -236,10 +237,12 @@ export function MessagesInput({
       return
     }
 
-    // Auto-resize to fit content only when user hasn't manually resized.
     textarea.style.height = 'auto'
     const naturalHeight = textarea.scrollHeight || MIN_TEXTAREA_HEIGHT_PX
-    const nextHeight = Math.max(MIN_TEXTAREA_HEIGHT_PX, naturalHeight)
+    const nextHeight = Math.min(
+      MAX_TEXTAREA_HEIGHT_PX,
+      Math.max(MIN_TEXTAREA_HEIGHT_PX, naturalHeight)
+    )
     textarea.style.height = `${nextHeight}px`
 
     if (overlay) {
@@ -453,7 +456,7 @@ export function MessagesInput({
                     ref={(el) => {
                       textareaRefs.current[fieldId] = el
                     }}
-                    className='allow-scroll box-border min-h-[80px] w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-[inherit] font-medium text-sm text-transparent leading-[inherit] caret-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed'
+                    className='allow-scroll box-border min-h-[80px] w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent px-[8px] pt-[8px] font-[inherit] font-medium text-sm text-transparent leading-[inherit] caret-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed'
                     rows={3}
                     placeholder='Enter message content...'
                     value={message.content}
@@ -496,7 +499,7 @@ export function MessagesInput({
                     ref={(el) => {
                       overlayRefs.current[fieldId] = el
                     }}
-                    className='pointer-events-none absolute top-0 left-0 box-border w-full overflow-auto whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-[inherit] font-medium text-[var(--text-primary)] text-sm leading-[inherit]'
+                    className='scrollbar-none pointer-events-none absolute top-0 left-0 box-border w-full overflow-auto whitespace-pre-wrap break-words border-none bg-transparent px-[8px] pt-[8px] font-[inherit] font-medium text-[var(--text-primary)] text-sm leading-[inherit]'
                   >
                     {formatDisplayText(message.content, {
                       accessiblePrefixes,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx
index 2d18d2e9c..771442b01 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx
@@ -485,9 +485,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             <ModalDescription>
               Are you sure you want to delete this schedule configuration? This will stop the
               workflow from running automatically.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -500,7 +498,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             </Button>
             <Button
               onClick={handleDeleteConfirm}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               Delete
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 8d6524e48..33b2c105d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -332,7 +332,7 @@ export function FieldFormat({
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
               {
-                '[\n  {\n    "data": "data:application/pdf;base64,...",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
+                '[\n  {\n    "data": "<base64>",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
               }
             </Code.Placeholder>
             <Editor
@@ -405,7 +405,7 @@ export function FieldFormat({
           key={field.id}
           data-field-id={field.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+            'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
             field.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
index ad3595f7c..34de2cc5d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -57,8 +57,9 @@ export function Table({
   // Use preview value when in preview mode, otherwise use store value
   const value = isPreview ? previewValue : storeValue
 
-  // Create refs for input elements
+  // Create refs for input and overlay elements
   const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
+  const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   // Memoized template for empty cells for current columns
   const emptyCellsTemplate = useMemo(
@@ -180,16 +181,42 @@ export function Table({
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
-    const tagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
+    const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
+      const overlay = overlayRefs.current.get(cellKey)
+      if (overlay) {
+        overlay.scrollLeft = e.currentTarget.scrollLeft
+      }
+    }
+
+    const syncScrollAfterUpdate = () => {
+      requestAnimationFrame(() => {
+        const input = inputRefs.current.get(cellKey)
+        const overlay = overlayRefs.current.get(cellKey)
+        if (input && overlay) {
+          overlay.scrollLeft = input.scrollLeft
+        }
+      })
+    }
+
+    const baseTagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
       cellKey,
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
-    const envVarSelectHandler = inputController.fieldHelpers.createEnvVarSelectHandler(
+    const tagSelectHandler = (tag: string) => {
+      baseTagSelectHandler(tag)
+      syncScrollAfterUpdate()
+    }
+
+    const baseEnvVarSelectHandler = inputController.fieldHelpers.createEnvVarSelectHandler(
       cellKey,
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
+    const envVarSelectHandler = (envVar: string) => {
+      baseEnvVarSelectHandler(envVar)
+      syncScrollAfterUpdate()
+    }
 
     return (
       <td
@@ -208,17 +235,21 @@ export function Table({
             placeholder={column}
             onChange={handlers.onChange}
             onKeyDown={handlers.onKeyDown}
+            onScroll={handleScroll}
             onDrop={handlers.onDrop}
             onDragOver={handlers.onDragOver}
             disabled={isPreview || disabled}
             autoComplete='off'
-            className='w-full border-0 bg-transparent px-[10px] py-[8px] text-transparent caret-white placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='w-full border-0 bg-transparent px-[10px] py-[8px] font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div
+            ref={(el) => {
+              if (el) overlayRefs.current.set(cellKey, el)
+            }}
             data-overlay={cellKey}
-            className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-[10px] font-medium text-[#eeeeee] text-sm'
+            className='scrollbar-hide pointer-events-none absolute top-0 right-[10px] bottom-0 left-[10px] overflow-x-auto overflow-y-hidden bg-transparent'
           >
-            <div className='whitespace-pre leading-[21px]'>
+            <div className='whitespace-pre py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
               {formatDisplayText(cellValue, {
                 accessiblePrefixes,
                 highlightAll: !accessiblePrefixes,
@@ -279,7 +310,7 @@ export function Table({
 
   return (
     <div className='relative'>
-      <div className='overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'>
+      <div className='overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
         <table className='w-full bg-transparent'>
           {renderHeader()}
           <tbody className='bg-transparent'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 2c68e264f..b9795506f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -20,6 +20,7 @@ interface CodeEditorProps {
   language: 'javascript' | 'json'
   placeholder?: string
   className?: string
+  gutterClassName?: string
   minHeight?: string
   highlightVariables?: boolean
   onKeyDown?: (e: React.KeyboardEvent) => void
@@ -36,6 +37,7 @@ export function CodeEditor({
   language,
   placeholder = '',
   className = '',
+  gutterClassName = '',
   minHeight = '360px',
   highlightVariables = true,
   onKeyDown,
@@ -180,7 +182,9 @@ export function CodeEditor({
         </Button>
       )}
 
-      <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+      <Code.Gutter width={gutterWidth} className={gutterClassName}>
+        {renderLineNumbers()}
+      </Code.Gutter>
 
       <Code.Content paddingLeft={`${gutterWidth}px`} editorRef={editorRef}>
         <Code.Placeholder gutterWidth={gutterWidth} show={code.length === 0 && !!placeholder}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index fbdde6032..a62477dcc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -1,14 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { AlertCircle, Code, FileJson, Wand2, X } from 'lucide-react'
+import { AlertCircle, Wand2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
-  Button as EmcnButton,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
+  Button,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -16,16 +10,17 @@ import {
   PopoverScrollArea,
   PopoverSection,
 } from '@/components/emcn'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Button } from '@/components/ui/button'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTabs,
+  ModalTabsContent,
+  ModalTabsList,
+  ModalTabsTrigger,
+} from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -347,10 +342,7 @@ try {
     }
   }
 
-  const validateFunctionCode = (code: string): boolean => {
-    return true // Allow empty code
-  }
-
+  /** Extracts parameters from JSON schema for autocomplete */
   const schemaParameters = useMemo(() => {
     try {
       if (!jsonSchema) return []
@@ -369,8 +361,8 @@ try {
     }
   }, [jsonSchema])
 
+  /** Memoized schema validation result */
   const isSchemaValid = useMemo(() => validateJsonSchema(jsonSchema), [jsonSchema])
-  const isCodeValid = useMemo(() => validateFunctionCode(functionCode), [functionCode])
 
   const handleSave = async () => {
     try {
@@ -835,53 +827,11 @@ try {
     }
   }
 
-  const navigationItems = [
-    {
-      id: 'schema' as const,
-      label: 'Schema',
-      icon: FileJson,
-      complete: isSchemaValid,
-    },
-    {
-      id: 'code' as const,
-      label: 'Code',
-      icon: Code,
-      complete: isCodeValid,
-    },
-  ]
-
-  useEffect(() => {
-    if (!open) return
-
-    const styleId = 'custom-tool-modal-z-index'
-    let styleEl = document.getElementById(styleId) as HTMLStyleElement
-
-    if (!styleEl) {
-      styleEl = document.createElement('style')
-      styleEl.id = styleId
-      styleEl.textContent = `
-        [data-radix-portal] [data-radix-dialog-overlay] {
-          z-index: 10000048 !important;
-        }
-      `
-      document.head.appendChild(styleEl)
-    }
-
-    return () => {
-      const el = document.getElementById(styleId)
-      if (el) {
-        el.remove()
-      }
-    }
-  }, [open])
-
   return (
     <>
-      <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent
-          className='flex h-[80vh] w-full max-w-[840px] flex-col gap-0 p-0'
-          style={{ zIndex: 10000050 }}
-          hideCloseButton
+      <Modal open={open} onOpenChange={handleClose}>
+        <ModalContent
+          className='h-[80vh] w-[900px]'
           onKeyDown={(e) => {
             if (e.key === 'Escape' && (showEnvVars || showTags || showSchemaParams)) {
               e.preventDefault()
@@ -892,57 +842,27 @@ try {
             }
           }}
         >
-          <DialogHeader className='border-b px-6 py-4'>
-            <div className='flex items-center justify-between'>
-              <DialogTitle className='font-medium text-lg'>
-                {isEditing ? 'Edit Agent Tool' : 'Create Agent Tool'}
-              </DialogTitle>
-              <EmcnButton variant='ghost' onClick={handleClose}>
-                <X className='h-4 w-4' />
-                <span className='sr-only'>Close</span>
-              </EmcnButton>
-            </div>
-            <DialogDescription className='mt-1.5'>
-              Step {activeSection === 'schema' ? '1' : '2'} of 2:{' '}
-              {activeSection === 'schema' ? 'Define schema' : 'Implement code'}
-            </DialogDescription>
-          </DialogHeader>
+          <ModalHeader>{isEditing ? 'Edit Agent Tool' : 'Create Agent Tool'}</ModalHeader>
 
-          <div className='flex min-h-0 flex-1 flex-col overflow-hidden'>
-            <div className='flex border-b'>
-              {navigationItems.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => setActiveSection(item.id)}
-                  className={cn(
-                    'flex items-center gap-2 border-b-2 px-6 py-3 text-sm transition-colors',
-                    'hover:bg-muted/50',
-                    activeSection === item.id
-                      ? 'border-primary font-medium text-foreground'
-                      : 'border-transparent text-muted-foreground hover:text-foreground'
-                  )}
-                >
-                  <item.icon className='h-4 w-4' />
-                  <span>{item.label}</span>
-                </button>
-              ))}
-            </div>
+          <ModalTabs
+            value={activeSection}
+            onValueChange={(value) => setActiveSection(value as ToolSection)}
+            className='flex min-h-0 flex-1 flex-col'
+          >
+            <ModalTabsList activeValue={activeSection}>
+              <ModalTabsTrigger value='schema'>Schema</ModalTabsTrigger>
+              <ModalTabsTrigger value='code'>Code</ModalTabsTrigger>
+            </ModalTabsList>
 
-            <div className='relative flex-1 overflow-auto px-6 pt-6 pb-12'>
-              <div
-                className={cn(
-                  'flex h-full flex-1 flex-col',
-                  activeSection === 'schema' ? 'block' : 'hidden'
-                )}
-              >
+            <ModalBody className='min-h-0 flex-1'>
+              <ModalTabsContent value='schema'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <FileJson className='h-4 w-4' />
-                    <Label htmlFor='json-schema' className='font-medium'>
+                    <Label htmlFor='json-schema' className='font-medium text-[13px]'>
                       JSON Schema
                     </Label>
                     {schemaError && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-destructive text-xs'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{schemaError}</span>
                       </div>
@@ -950,7 +870,7 @@ try {
                   </div>
                   <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
                     {!isSchemaPromptActive && schemaPromptSummary && (
-                      <span className='text-muted-foreground text-xs italic'>
+                      <span className='text-[var(--text-tertiary)] text-xs italic'>
                         with {schemaPromptSummary}
                       </span>
                     )}
@@ -973,19 +893,18 @@ try {
                         onBlur={handleSchemaPromptBlur}
                         onKeyDown={handleSchemaPromptKeyDown}
                         disabled={schemaGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none'
+                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
                         placeholder='Describe schema...'
                       />
                     )}
                   </div>
                 </div>
-                <div className='relative'>
-                  <CodeEditor
-                    value={jsonSchema}
-                    onChange={handleJsonSchemaChange}
-                    language='json'
-                    showWandButton={false}
-                    placeholder={`{
+                <CodeEditor
+                  value={jsonSchema}
+                  onChange={handleJsonSchemaChange}
+                  language='json'
+                  showWandButton={false}
+                  placeholder={`{
   "type": "function",
   "function": {
     "name": "addItemToOrder",
@@ -1002,35 +921,35 @@ try {
     }
   }
 }`}
-                    minHeight='360px'
-                    className={cn(
-                      schemaError && 'border-red-500',
-                      (schemaGeneration.isLoading || schemaGeneration.isStreaming) &&
-                        'cursor-not-allowed opacity-50'
-                    )}
-                    disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming} // Use disabled prop instead of readOnly
-                    onKeyDown={handleKeyDown} // Pass keydown handler
-                  />
-                </div>
-                <div className='h-6' />
-              </div>
+                  minHeight='420px'
+                  className={cn(
+                    'bg-[var(--bg)]',
+                    schemaError && 'border-[var(--text-error)]',
+                    (schemaGeneration.isLoading || schemaGeneration.isStreaming) &&
+                      'cursor-not-allowed opacity-50'
+                  )}
+                  gutterClassName='bg-[var(--bg)]'
+                  disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
+                  onKeyDown={handleKeyDown}
+                />
+              </ModalTabsContent>
 
-              <div
-                className={cn(
-                  'flex h-full flex-1 flex-col pb-6',
-                  activeSection === 'code' ? 'block' : 'hidden'
-                )}
-              >
+              <ModalTabsContent value='code'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Code className='h-4 w-4' />
-                    <Label htmlFor='function-code' className='font-medium'>
+                    <Label htmlFor='function-code' className='font-medium text-[13px]'>
                       Code
                     </Label>
+                    {codeError && !codeGeneration.isStreaming && (
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
+                        <AlertCircle className='h-3 w-3 flex-shrink-0' />
+                        <span className='truncate'>{codeError}</span>
+                      </div>
+                    )}
                   </div>
                   <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
                     {!isCodePromptActive && codePromptSummary && (
-                      <span className='text-muted-foreground text-xs italic'>
+                      <span className='text-[var(--text-tertiary)] text-xs italic'>
                         with {codePromptSummary}
                       </span>
                     )}
@@ -1053,23 +972,19 @@ try {
                         onBlur={handleCodePromptBlur}
                         onKeyDown={handleCodePromptKeyDown}
                         disabled={codeGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none'
+                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
                         placeholder='Describe code...'
                       />
                     )}
                   </div>
-                  {codeError &&
-                    !codeGeneration.isStreaming && ( // Hide code error while streaming
-                      <div className='ml-4 break-words text-red-600 text-sm'>{codeError}</div>
-                    )}
                 </div>
                 {schemaParameters.length > 0 && (
-                  <div className='mb-2 rounded-md bg-muted/50 p-2'>
-                    <p className='text-muted-foreground text-xs'>
+                  <div className='mb-2 rounded-[6px] border bg-[var(--surface-2)] p-2'>
+                    <p className='text-[var(--text-tertiary)] text-xs'>
                       <span className='font-medium'>Available parameters:</span>{' '}
                       {schemaParameters.map((param, index) => (
                         <span key={param.name}>
-                          <code className='rounded bg-background px-1 py-0.5 text-foreground'>
+                          <code className='rounded bg-[var(--bg)] px-1 py-0.5 text-[var(--text-primary)]'>
                             {param.name}
                           </code>
                           {index < schemaParameters.length - 1 && ', '}
@@ -1085,22 +1000,21 @@ try {
                     onChange={handleFunctionCodeChange}
                     language='javascript'
                     showWandButton={false}
-                    placeholder={
-                      '// This code will be executed when the tool is called. You can use environment variables with {{VARIABLE_NAME}}.'
-                    }
-                    minHeight='360px'
+                    placeholder={'return schemaVariable + {{environmentVariable}}'}
+                    minHeight={schemaParameters.length > 0 ? '380px' : '420px'}
                     className={cn(
-                      codeError && !codeGeneration.isStreaming ? 'border-red-500' : '',
+                      'bg-[var(--bg)]',
+                      codeError && !codeGeneration.isStreaming && 'border-[var(--text-error)]',
                       (codeGeneration.isLoading || codeGeneration.isStreaming) &&
                         'cursor-not-allowed opacity-50'
                     )}
+                    gutterClassName='bg-[var(--bg)]'
                     highlightVariables={true}
-                    disabled={codeGeneration.isLoading || codeGeneration.isStreaming} // Use disabled prop instead of readOnly
-                    onKeyDown={handleKeyDown} // Pass keydown handler
-                    schemaParameters={schemaParameters} // Pass schema parameters for highlighting
+                    disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
+                    onKeyDown={handleKeyDown}
+                    schemaParameters={schemaParameters}
                   />
 
-                  {/* Environment variables dropdown */}
                   {showEnvVars && (
                     <EnvVarDropdown
                       visible={showEnvVars}
@@ -1122,7 +1036,6 @@ try {
                     />
                   )}
 
-                  {/* Tags dropdown */}
                   {showTags && (
                     <TagDropdown
                       visible={showTags}
@@ -1144,7 +1057,6 @@ try {
                     />
                   )}
 
-                  {/* Schema parameters dropdown */}
                   {showSchemaParams && schemaParameters.length > 0 && (
                     <Popover
                       open={showSchemaParams}
@@ -1172,7 +1084,6 @@ try {
                         side='bottom'
                         align='start'
                         collisionPadding={6}
-                        style={{ zIndex: 100000000 }}
                         onOpenAutoFocus={(e) => e.preventDefault()}
                         onCloseAutoFocus={(e) => e.preventDefault()}
                       >
@@ -1198,7 +1109,9 @@ try {
                                 <span className='h-3 w-3 font-bold text-white text-xs'>P</span>
                               </div>
                               <span className='flex-1 truncate'>{param.name}</span>
-                              <span className='text-muted-foreground text-xs'>{param.type}</span>
+                              <span className='text-[var(--text-tertiary)] text-xs'>
+                                {param.type}
+                              </span>
                             </PopoverItem>
                           ))}
                         </PopoverScrollArea>
@@ -1206,90 +1119,92 @@ try {
                     </Popover>
                   )}
                 </div>
-                <div className='h-6' />
-              </div>
-            </div>
-          </div>
+              </ModalTabsContent>
+            </ModalBody>
+          </ModalTabs>
 
-          <DialogFooter className='mt-auto border-t px-6 py-4'>
-            <div className='flex w-full justify-between'>
+          {activeSection === 'schema' && (
+            <ModalFooter className='items-center justify-between'>
               {isEditing ? (
-                <EmcnButton
-                  className='h-[32px] gap-1 bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+                <Button
+                  variant='default'
                   onClick={() => setShowDeleteConfirm(true)}
+                  className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
                 >
-                  <Trash className='h-4 w-4' />
                   Delete
-                </EmcnButton>
+                </Button>
               ) : (
-                <EmcnButton
-                  variant='outline'
-                  className='h-[32px] px-[12px]'
-                  onClick={() => {
-                    if (activeSection === 'code') {
-                      setActiveSection('schema')
-                    }
-                  }}
-                  disabled={activeSection === 'schema'}
-                >
-                  Back
-                </EmcnButton>
+                <div />
               )}
-              <div className='flex space-x-2'>
-                <EmcnButton variant='outline' className='h-[32px] px-[12px]' onClick={handleClose}>
+              <div className='flex gap-2'>
+                <Button variant='default' onClick={handleClose}>
                   Cancel
-                </EmcnButton>
-                {activeSection === 'schema' ? (
-                  <EmcnButton
-                    variant='primary'
-                    className='h-[32px] px-[12px]'
-                    onClick={() => setActiveSection('code')}
-                    disabled={!isSchemaValid || !!schemaError}
-                  >
-                    Next
-                  </EmcnButton>
-                ) : (
-                  <EmcnButton
-                    variant='primary'
-                    className='h-[32px] px-[12px]'
-                    onClick={handleSave}
-                    disabled={!isSchemaValid || !!schemaError}
-                  >
-                    {isEditing ? 'Update Tool' : 'Save Tool'}
-                  </EmcnButton>
-                )}
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setActiveSection('code')}
+                  disabled={!isSchemaValid || !!schemaError}
+                >
+                  Next
+                </Button>
               </div>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            </ModalFooter>
+          )}
+
+          {activeSection === 'code' && (
+            <ModalFooter className='items-center justify-between'>
+              {isEditing ? (
+                <Button
+                  variant='default'
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
+                >
+                  Delete
+                </Button>
+              ) : (
+                <Button variant='default' onClick={() => setActiveSection('schema')}>
+                  Back
+                </Button>
+              )}
+              <div className='flex gap-2'>
+                <Button variant='default' onClick={handleClose}>
+                  Cancel
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={handleSave}
+                  disabled={!isSchemaValid || !!schemaError}
+                >
+                  {isEditing ? 'Update Tool' : 'Save Tool'}
+                </Button>
+              </div>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      </Modal>
 
-      {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete custom tool?</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Custom Tool</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This will permanently delete the tool and remove it from any workflows that are using
-              it.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
-            </ModalDescription>
-          </ModalHeader>
+              it. <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
           <ModalFooter>
             <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
+              variant='default'
               onClick={() => setShowDeleteConfirm(false)}
               disabled={deleteToolMutation.isPending}
             >
               Cancel
             </Button>
             <Button
+              variant='primary'
               onClick={handleDelete}
               disabled={deleteToolMutation.isPending}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteToolMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index 8bbdbf396..763638a5b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -1,20 +1,20 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Loader2, PlusIcon, Server, WrenchIcon, XIcon } from 'lucide-react'
+import { Loader2, PlusIcon, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Combobox,
   Popover,
   PopoverContent,
+  PopoverItem,
   PopoverScrollArea,
   PopoverSearch,
   PopoverSection,
   PopoverTrigger,
-  Tooltip,
 } from '@/components/emcn'
+import { McpIcon } from '@/components/icons'
 import { Switch } from '@/components/ui/switch'
-import { Toggle } from '@/components/ui/toggle'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -1601,7 +1601,7 @@ export function ToolInput({
       {selectedTools.length === 0 ? (
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
-            <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)]'>
+            <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-4)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-5)]'>
               <div className='flex items-center text-[13px] text-[var(--text-muted)]'>
                 <PlusIcon className='mr-2 h-4 w-4' />
                 Add Tool
@@ -1631,9 +1631,7 @@ export function ToolInput({
                       }}
                       disabled={isPreview}
                     >
-                      <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                        <WrenchIcon className='h-[11px] w-[11px] text-muted-foreground' />
-                      </div>
+                      <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                       <span className='truncate'>Create Tool</span>
                     </ToolCommand.Item>
 
@@ -1649,9 +1647,7 @@ export function ToolInput({
                       }}
                       disabled={isPreview}
                     >
-                      <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                        <Server className='h-[11px] w-[11px] text-muted-foreground' />
-                      </div>
+                      <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                       <span className='truncate'>Add MCP Server</span>
                     </ToolCommand.Item>
 
@@ -1822,7 +1818,7 @@ export function ToolInput({
               <div
                 key={`${tool.toolId}-${toolIndex}`}
                 className={cn(
-                  'group relative flex flex-col overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] transition-all duration-200 ease-in-out',
+                  'group relative flex flex-col overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-4)] transition-all duration-200 ease-in-out',
                   draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                   dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
                     ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
@@ -1833,7 +1829,7 @@ export function ToolInput({
               >
                 <div
                   className={cn(
-                    'flex items-center justify-between px-[10px] py-[8px]',
+                    'flex items-center justify-between gap-[8px] px-[10px] py-[8px]',
                     isExpandedForDisplay &&
                       !isCustomTool &&
                       'border-[var(--border-strong)] border-b',
@@ -1867,7 +1863,7 @@ export function ToolInput({
                       {isCustomTool ? (
                         <WrenchIcon className='h-[10px] w-[10px] text-white' />
                       ) : isMcpTool ? (
-                        <IconComponent icon={Server} className='h-[10px] w-[10px] text-white' />
+                        <IconComponent icon={McpIcon} className='h-[10px] w-[10px] text-white' />
                       ) : (
                         <IconComponent
                           icon={toolBlock?.icon}
@@ -1875,86 +1871,63 @@ export function ToolInput({
                         />
                       )}
                     </div>
-                    <span className='truncate font-medium text-[#EEEEEE] text-[13px]'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
                       {tool.title}
                     </span>
                   </div>
                   <div className='flex flex-shrink-0 items-center gap-[8px]'>
                     {supportsToolControl && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Toggle
-                            className='group flex h-auto items-center justify-center rounded-sm p-0 hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=on]:bg-transparent'
-                            pressed={true}
-                            onPressedChange={() => {}}
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              const currentState = tool.usageControl || 'auto'
-                              const nextState =
-                                currentState === 'auto'
-                                  ? 'force'
-                                  : currentState === 'force'
-                                    ? 'none'
-                                    : 'auto'
-                              handleUsageControlChange(toolIndex, nextState)
-                            }}
-                            aria-label='Toggle tool usage control'
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <button
+                            className='flex items-center justify-center font-medium text-[12px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                            onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                            aria-label='Tool usage control'
                           >
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'auto' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              Auto
-                            </span>
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'force' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              Force
-                            </span>
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'none' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              None
-                            </span>
-                          </Toggle>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content className='max-w-[280px] p-2' side='top'>
-                          <p className='text-xs'>
-                            {tool.usageControl === 'auto' && (
-                              <span>
-                                <span className='font-medium' /> The model decides when to use the
-                                tool
-                              </span>
-                            )}
-                            {tool.usageControl === 'force' && (
-                              <span>
-                                <span className='font-medium' /> Always use this tool in the
-                                response
-                              </span>
-                            )}
-                            {tool.usageControl === 'none' && (
-                              <span>
-                                <span className='font-medium' /> Never use this tool
-                              </span>
-                            )}
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
+                            {tool.usageControl === 'auto' && 'Auto'}
+                            {tool.usageControl === 'force' && 'Force'}
+                            {tool.usageControl === 'none' && 'None'}
+                            {!tool.usageControl && 'Auto'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          side='bottom'
+                          align='end'
+                          sideOffset={8}
+                          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                          className='gap-[2px]'
+                        >
+                          <PopoverItem
+                            active={(tool.usageControl || 'auto') === 'auto'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'auto')}
+                          >
+                            Auto{' '}
+                            <span className='text-[var(--text-tertiary)]'>(model decides)</span>
+                          </PopoverItem>
+                          <PopoverItem
+                            active={tool.usageControl === 'force'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'force')}
+                          >
+                            Force <span className='text-[var(--text-tertiary)]'>(always use)</span>
+                          </PopoverItem>
+                          <PopoverItem
+                            active={tool.usageControl === 'none'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'none')}
+                          >
+                            None
+                          </PopoverItem>
+                        </PopoverContent>
+                      </Popover>
                     )}
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='text-[var(--text-tertiary)] transition-colors hover:text-[#EEEEEE]'
+                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
-                      <XIcon className='h-[14px] w-[14px]' />
+                      <XIcon className='h-[13px] w-[13px]' />
                     </button>
                   </div>
                 </div>
@@ -2143,7 +2116,7 @@ export function ToolInput({
           {/* Add Tool Button */}
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-              <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)]'>
+              <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-4)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-5)]'>
                 <div className='flex items-center text-[13px] text-[var(--text-muted)]'>
                   <PlusIcon className='mr-2 h-4 w-4' />
                   Add Tool
@@ -2170,9 +2143,7 @@ export function ToolInput({
                           setCustomToolModalOpen(true)
                         }}
                       >
-                        <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                          <WrenchIcon className='h-[11px] w-[11px] text-muted-foreground' />
-                        </div>
+                        <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                         <span className='truncate'>Create Tool</span>
                       </ToolCommand.Item>
 
@@ -2185,9 +2156,7 @@ export function ToolInput({
                           )
                         }}
                       >
-                        <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                          <Server className='h-[11px] w-[11px] text-muted-foreground' />
-                        </div>
+                        <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                         <span className='truncate'>Add MCP Server</span>
                       </ToolCommand.Item>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx
index 6991ee621..dba143582 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx
@@ -469,7 +469,7 @@ export function TriggerSave({
             </Button>
             <Button
               onClick={handleDeleteConfirm}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               Delete
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index a905da653..81e061273 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -294,7 +294,7 @@ export function VariablesInput({
                 key={assignment.id}
                 data-assignment-id={assignment.id}
                 className={cn(
-                  'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+                  'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 33e497d96..c5ef35523 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -235,7 +235,7 @@ const renderLabel = (
               }}
               disabled={isStreaming}
               className={cn(
-                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none dark:text-[var(--text-primary)]',
+                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none',
                 isStreaming && 'text-muted-foreground'
               )}
               placeholder='Describe...'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index 73aa68867..7046dcf00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -71,7 +71,7 @@ export function SubflowEditor({
         <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[5px] pb-[8px]'>
           {/* Type Selection */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
               {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
             </Label>
             <Combobox
@@ -89,14 +89,14 @@ export function SubflowEditor({
               className='h-[1.25px]'
               style={{
                 backgroundImage:
-                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
               }}
             />
           </div>
 
           {/* Configuration */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
               {isCountMode
                 ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                 : isConditionMode
@@ -165,7 +165,7 @@ export function SubflowEditor({
       {hasIncomingConnections && (
         <div
           className={
-            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t dark:border-[var(--border)]' +
+            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
             (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
           }
           style={{ height: `${connectionsHeight}px` }}
@@ -198,9 +198,7 @@ export function SubflowEditor({
                 (!isConnectionsAtMinHeight ? ' rotate-180' : '')
               }
             />
-            <div className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Connections
-            </div>
+            <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
           </div>
 
           {/* Connections Content - Always visible */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index d04231859..531207547 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -183,7 +183,7 @@ export function Editor() {
   return (
     <div className='flex h-full flex-col'>
       {/* Header */}
-      <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'>
+      <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'>
         <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
           {(blockConfig || isSubflow) && (
             <div
@@ -210,11 +210,11 @@ export function Editor() {
                   handleCancelRename()
                 }
               }}
-              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--white)] outline-none dark:text-[var(--white)]'
+              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--text-primary)] outline-none'
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'
+              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--text-primary)]'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {
@@ -363,7 +363,7 @@ export function Editor() {
                               className='h-[1.25px]'
                               style={{
                                 backgroundImage:
-                                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
                               }}
                             />
                           </div>
@@ -380,7 +380,7 @@ export function Editor() {
           {hasIncomingConnections && (
             <div
               className={
-                'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t dark:border-[var(--border)]' +
+                'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
                 (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
               }
               style={{ height: `${connectionsHeight}px` }}
@@ -415,7 +415,7 @@ export function Editor() {
                     (!isConnectionsAtMinHeight ? ' rotate-180' : '')
                   }
                 />
-                <div className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                <div className='font-medium text-[13px] text-[var(--text-primary)]'>
                   Connections
                 </div>
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
index e09e765b4..1ea9bf4e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
@@ -18,7 +18,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
   const preview = document.createElement('div')
   preview.style.cssText = `
     width: 250px;
-    background: #232323;
+    background: var(--surface-1);
     border-radius: 8px;
     padding: 8px 9px;
     display: flex;
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index ba0640805..ec6be45d9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -488,12 +488,10 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
     >
       {/* Header */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'
+        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'
         onClick={handleSearchClick}
       >
-        <h2 className='font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'>
-          Toolbar
-        </h2>
+        <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
         <div className='flex shrink-0 items-center gap-[8px]'>
           {!isSearchActive ? (
             <Button
@@ -511,7 +509,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               onBlur={handleSearchBlur}
-              className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none dark:text-[var(--text-primary)]'
+              className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
             />
           )}
         </div>
@@ -529,7 +527,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
         >
           <div
             ref={triggersHeaderRef}
-            className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+            className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
           >
             Triggers
           </div>
@@ -556,9 +554,9 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                     onClick={() => handleItemClick(trigger.type, isTriggerCapable)}
                     className={clsx(
-                      'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none dark:focus-visible:bg-[var(--border)]'
+                      'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
+                      'cursor-pointer hover:bg-[var(--surface-9)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -569,7 +567,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: trigger.bgColor }}
                     >
                       {Icon && (
@@ -577,7 +575,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                           className={clsx(
                             'toolbar-item-icon text-white transition-transform duration-200',
                             'group-hover:scale-110',
-                            '!h-[10px] !w-[10px]'
+                            '!h-[9px] !w-[9px]'
                           )}
                         />
                       )}
@@ -585,8 +583,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <span
                       className={clsx(
                         'truncate font-medium',
-                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)] dark:group-focus-visible:text-[var(--text-primary)]'
+                        'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
+                        'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
                       {trigger.name}
@@ -599,7 +597,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
         </div>
 
         {/* Resize Handle */}
-        <div className='relative flex-shrink-0 border-[var(--border)] border-t dark:border-[var(--border)]'>
+        <div className='relative flex-shrink-0 border-[var(--border)] border-t'>
           <div
             className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
             onMouseDown={handleMouseDown}
@@ -611,7 +609,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
           <div
             ref={blocksHeaderRef}
             onClick={handleBlocksHeaderClick}
-            className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+            className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
           >
             Blocks
           </div>
@@ -646,8 +644,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     onClick={() => handleItemClick(block.type, false)}
                     className={clsx(
                       'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none dark:focus-visible:bg-[var(--border)]'
+                      'cursor-pointer hover:bg-[var(--surface-9)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -658,7 +656,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: block.bgColor }}
                     >
                       {Icon && (
@@ -666,7 +664,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                           className={clsx(
                             'toolbar-item-icon text-white transition-transform duration-200',
                             'group-hover:scale-110',
-                            '!h-[10px] !w-[10px]'
+                            '!h-[9px] !w-[9px]'
                           )}
                         />
                       )}
@@ -674,8 +672,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <span
                       className={clsx(
                         'truncate font-medium',
-                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)] dark:group-focus-visible:text-[var(--text-primary)]'
+                        'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
+                        'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
                       {block.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index bee0688e4..bbda443f4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Braces, Square } from 'lucide-react'
+import { ArrowUp, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import {
   BubbleChatPreview,
@@ -43,7 +43,6 @@ import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspace
 import { useChatStore } from '@/stores/chat/store'
 import { usePanelStore } from '@/stores/panel/store'
 import type { PanelTab } from '@/stores/panel/types'
-import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '@/stores/terminal'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowJsonStore } from '@/stores/workflows/json/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -143,10 +142,6 @@ export function Panel() {
       openSubscriptionSettings()
       return
     }
-    const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
-    if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
-    }
     await handleRunWorkflow()
   }, [usageExceeded, handleRunWorkflow])
 
@@ -373,10 +368,10 @@ export function Panel() {
     <>
       <aside
         ref={panelRef}
-        className='panel-container fixed inset-y-0 right-0 z-10 overflow-hidden dark:bg-[var(--surface-1)]'
+        className='panel-container fixed inset-y-0 right-0 z-10 overflow-hidden bg-[var(--surface-1)]'
         aria-label='Workflow panel'
       >
-        <div className='flex h-full flex-col border-l pt-[14px] dark:border-[var(--border)]'>
+        <div className='flex h-full flex-col border-[var(--border)] border-l pt-[14px]'>
           {/* Header */}
           <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
             {/* More and Chat */}
@@ -413,7 +408,7 @@ export function Panel() {
                     onClick={handleExportJson}
                     disabled={!userPermissions.canEdit || isExporting || !currentWorkflow}
                   >
-                    <Braces className='h-3 w-3' />
+                    <ArrowUp className='h-3 w-3' />
                     <span>Export workflow</span>
                   </PopoverItem>
                   <PopoverItem
@@ -467,7 +462,7 @@ export function Panel() {
           <div className='flex flex-shrink-0 items-center justify-between px-[8px] pt-[14px]'>
             <div className='flex gap-[4px]'>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] truncate px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('copilot')}
                 data-tab-button='copilot'
@@ -475,7 +470,7 @@ export function Panel() {
                 Copilot
               </Button>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
@@ -483,7 +478,7 @@ export function Panel() {
                 Toolbar
               </Button>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
@@ -555,9 +550,7 @@ export function Panel() {
             <ModalDescription>
               Deleting this workflow will permanently remove all associated blocks, executions, and
               configuration.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -570,7 +563,7 @@ export function Panel() {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
               onClick={handleDeleteWorkflow}
               disabled={isDeleting}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 3df3d38a3..303b83326 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -25,7 +25,7 @@ const SubflowNodeStyles: React.FC = () => {
       /* Drag-over states */
       .loop-node-drag-over,
       .parallel-node-drag-over {
-        box-shadow: 0 0 0 1.75px #33B4FF !important;
+        box-shadow: 0 0 0 1.75px var(--brand-secondary) !important;
         border-radius: 8px !important;
       }
 
@@ -161,7 +161,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           {/* Header Section */}
           <div
             className={cn(
-              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--divider)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] dark:bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--divider)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
             )}
             onMouseDown={(e) => {
               e.stopPropagation()
@@ -216,7 +216,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
               data-node-role={`${data.kind}-start`}
               data-extent='parent'
             >
-              <span className='font-medium text-[14px] text-white'>Start</span>
+              <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
 
               <Handle
                 type='source'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
index c8406c720..b387395a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTerminalStore } from '@/stores/terminal'
 
 /**
@@ -15,15 +15,14 @@ const MAX_HEIGHT_PERCENTAGE = 0.7 // 70% of viewport height
  * @returns Resize state and handlers
  */
 export function useTerminalResize() {
-  const { setTerminalHeight } = useTerminalStore()
-  const [isResizing, setIsResizing] = useState(false)
+  const { setTerminalHeight, isResizing, setIsResizing } = useTerminalStore()
 
   /**
    * Handles mouse down on resize handle
    */
   const handleMouseDown = useCallback(() => {
     setIsResizing(true)
-  }, [])
+  }, [setIsResizing])
 
   /**
    * Setup resize event listeners and body styles when resizing
@@ -57,7 +56,7 @@ export function useTerminalResize() {
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
-  }, [isResizing, setTerminalHeight])
+  }, [isResizing, setTerminalHeight, setIsResizing])
 
   return {
     isResizing,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 0a11ad7b1..7949d3d7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -35,11 +35,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks'
 import { getBlock } from '@/blocks'
 import type { ConsoleEntry } from '@/stores/terminal'
-import {
-  DEFAULT_TERMINAL_HEIGHT,
-  useTerminalConsoleStore,
-  useTerminalStore,
-} from '@/stores/terminal'
+import { useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 /**
@@ -82,9 +78,8 @@ const RUN_ID_COLORS = [
 /**
  * Shared styling constants
  */
-const HEADER_TEXT_CLASS =
-  'font-medium text-[var(--text-tertiary)] text-[12px] dark:text-[var(--text-tertiary)]'
-const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px] dark:text-[#D2D2D2]'
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
+const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 /**
@@ -254,9 +249,11 @@ const isEventFromEditableElement = (e: KeyboardEvent): boolean => {
 export function Terminal() {
   const terminalRef = useRef<HTMLElement>(null)
   const prevEntriesLengthRef = useRef(0)
+  const prevWorkflowEntriesLengthRef = useRef(0)
   const {
     terminalHeight,
     setTerminalHeight,
+    lastExpandedHeight,
     outputPanelWidth,
     setOutputPanelWidth,
     openOnRun,
@@ -301,6 +298,22 @@ export function Terminal() {
 
   const isExpanded = terminalHeight > NEAR_MIN_THRESHOLD
 
+  /**
+   * Expands the terminal to its last meaningful height, with safeguards:
+   * - Never expands below {@link DEFAULT_EXPANDED_HEIGHT}.
+   * - Never exceeds 70% of the viewport height.
+   */
+  const expandToLastHeight = useCallback(() => {
+    setIsToggling(true)
+    const maxHeight = window.innerHeight * 0.7
+    const desiredHeight = Math.max(
+      lastExpandedHeight || DEFAULT_EXPANDED_HEIGHT,
+      DEFAULT_EXPANDED_HEIGHT
+    )
+    const targetHeight = Math.min(desiredHeight, maxHeight)
+    setTerminalHeight(targetHeight)
+  }, [lastExpandedHeight, setTerminalHeight])
+
   /**
    * Get all entries for current workflow (before filtering) for filter options
    */
@@ -404,6 +417,28 @@ export function Terminal() {
     return selectedEntry.output
   }, [selectedEntry, showInput])
 
+  /**
+   * Auto-open the terminal on new entries when "Open on run" is enabled.
+   * This mirrors the header toggle behavior by using expandToLastHeight,
+   * ensuring we always get the same smooth height transition.
+   */
+  useEffect(() => {
+    if (!openOnRun) {
+      prevWorkflowEntriesLengthRef.current = allWorkflowEntries.length
+      return
+    }
+
+    const previousLength = prevWorkflowEntriesLengthRef.current
+    const currentLength = allWorkflowEntries.length
+
+    // Only react when new entries are added for the active workflow
+    if (currentLength > previousLength && terminalHeight <= MIN_HEIGHT) {
+      expandToLastHeight()
+    }
+
+    prevWorkflowEntriesLengthRef.current = currentLength
+  }, [allWorkflowEntries.length, expandToLastHeight, openOnRun, terminalHeight])
+
   /**
    * Handle row click - toggle if clicking same entry
    * Disables auto-selection when user manually selects, re-enables when deselecting
@@ -421,14 +456,13 @@ export function Terminal() {
    * Handle header click - toggle between expanded and collapsed
    */
   const handleHeaderClick = useCallback(() => {
-    setIsToggling(true)
-
     if (isExpanded) {
+      setIsToggling(true)
       setTerminalHeight(MIN_HEIGHT)
     } else {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
+      expandToLastHeight()
     }
-  }, [isExpanded, setTerminalHeight])
+  }, [expandToLastHeight, isExpanded, setTerminalHeight])
 
   /**
    * Handle transition end - reset toggling state
@@ -628,10 +662,7 @@ export function Terminal() {
       e.preventDefault()
 
       if (!isExpanded) {
-        setIsToggling(true)
-        const maxHeight = window.innerHeight * 0.7
-        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-        setTerminalHeight(targetHeight)
+        expandToLastHeight()
       }
 
       if (e.key === 'ArrowLeft') {
@@ -647,7 +678,7 @@ export function Terminal() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedEntry, showInput, hasInputData, isExpanded])
+  }, [expandToLastHeight, selectedEntry, showInput, hasInputData, isExpanded])
 
   /**
    * Handle Escape to unselect and Enter to re-enable auto-selection
@@ -721,13 +752,13 @@ export function Terminal() {
       <aside
         ref={terminalRef}
         className={clsx(
-          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden dark:bg-[var(--surface-1)]',
+          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden bg-[var(--surface-1)]',
           isToggling && 'transition-[height] duration-100 ease-out'
         )}
         onTransitionEnd={handleTransitionEnd}
         aria-label='Terminal'
       >
-        <div className='relative flex h-full border-t dark:border-[var(--border)]'>
+        <div className='relative flex h-full border-[var(--border)] border-t'>
           {/* Left Section - Logs Table */}
           <div
             className={clsx('flex flex-col', !selectedEntry && 'flex-1')}
@@ -827,7 +858,7 @@ export function Terminal() {
                         >
                           <div
                             className='h-[6px] w-[6px] rounded-[2px]'
-                            style={{ backgroundColor: '#EF4444' }}
+                            style={{ backgroundColor: 'var(--text-error)' }}
                           />
                           <span className='flex-1'>Error</span>
                           {filters.statuses.has('error') && <Check className='h-3 w-3' />}
@@ -839,7 +870,7 @@ export function Terminal() {
                         >
                           <div
                             className='h-[6px] w-[6px] rounded-[2px]'
-                            style={{ backgroundColor: '#B7B7B7' }}
+                            style={{ backgroundColor: 'var(--terminal-status-info-color)' }}
                           />
                           <span className='flex-1'>Info</span>
                           {filters.statuses.has('info') && <Check className='h-3 w-3' />}
@@ -1053,8 +1084,8 @@ export function Terminal() {
                     <div
                       key={entry.id}
                       className={clsx(
-                        'flex h-[36px] cursor-pointer items-center px-[24px] hover:bg-[var(--border)]',
-                        isSelected && 'bg-[var(--border)]'
+                        'flex h-[36px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-9)] dark:hover:bg-[var(--border)]',
+                        isSelected && 'bg-[var(--surface-9)] dark:bg-[var(--border)]'
                       )}
                       onClick={() => handleRowClick(entry)}
                     >
@@ -1067,7 +1098,7 @@ export function Terminal() {
                         )}
                       >
                         {BlockIcon && (
-                          <BlockIcon className='h-[13px] w-[13px] flex-shrink-0 text-[#D2D2D2]' />
+                          <BlockIcon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--text-secondary)]' />
                         )}
                         <span className={clsx('truncate', ROW_TEXT_CLASS)}>{entry.blockName}</span>
                       </div>
@@ -1079,19 +1110,25 @@ export function Terminal() {
                             className={clsx(
                               'flex h-[24px] w-[56px] items-center justify-start rounded-[6px] border pl-[9px]',
                               statusInfo.isError
-                                ? 'gap-[5px] border-[#883827] bg-[#491515]'
-                                : 'gap-[8px] border-[#686868] bg-[#383838]'
+                                ? 'gap-[5px] border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'
+                                : 'gap-[8px] border-[var(--terminal-status-info-border)] bg-[var(--terminal-status-info-bg)]'
                             )}
                           >
                             <div
                               className='h-[6px] w-[6px] rounded-[2px]'
                               style={{
-                                backgroundColor: statusInfo.isError ? '#EF4444' : '#B7B7B7',
+                                backgroundColor: statusInfo.isError
+                                  ? 'var(--text-error)'
+                                  : 'var(--terminal-status-info-color)',
                               }}
                             />
                             <span
                               className='font-medium text-[11.5px]'
-                              style={{ color: statusInfo.isError ? '#EF4444' : '#B7B7B7' }}
+                              style={{
+                                color: statusInfo.isError
+                                  ? 'var(--text-error)'
+                                  : 'var(--terminal-status-info-color)',
+                              }}
                             >
                               {statusInfo.label}
                             </span>
@@ -1155,7 +1192,7 @@ export function Terminal() {
           {/* Right Section - Block Output (Overlay) */}
           {selectedEntry && (
             <div
-              className='absolute top-0 right-0 bottom-0 flex flex-col border-l dark:border-[var(--border)] dark:bg-[var(--surface-1)]'
+              className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--surface-1)]'
               style={{ width: `${outputPanelWidth}px` }}
             >
               {/* Horizontal Resize Handle */}
@@ -1184,10 +1221,7 @@ export function Terminal() {
                     onClick={(e) => {
                       e.stopPropagation()
                       if (!isExpanded) {
-                        setIsToggling(true)
-                        const maxHeight = window.innerHeight * 0.7
-                        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                        setTerminalHeight(targetHeight)
+                        expandToLastHeight()
                       }
                       if (showInput) setShowInput(false)
                     }}
@@ -1205,10 +1239,7 @@ export function Terminal() {
                       onClick={(e) => {
                         e.stopPropagation()
                         if (!isExpanded) {
-                          setIsToggling(true)
-                          const maxHeight = window.innerHeight * 0.7
-                          const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                          setTerminalHeight(targetHeight)
+                          expandToLastHeight()
                         }
                         setShowInput(true)
                       }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index bbd33012b..65b079061 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -19,12 +19,23 @@ import { Label } from '@/components/emcn/components/label/label'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { validateName } from '@/lib/core/utils/validation'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useVariablesStore as usePanelVariablesStore } from '@/stores/panel/variables/store'
-import { getVariablesPosition, useVariablesStore } from '@/stores/variables/store'
+import {
+  getVariablesPosition,
+  MAX_VARIABLES_HEIGHT,
+  MAX_VARIABLES_WIDTH,
+  MIN_VARIABLES_HEIGHT,
+  MIN_VARIABLES_WIDTH,
+  useVariablesStore,
+} from '@/stores/variables/store'
 import type { Variable } from '@/stores/variables/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useChatBoundarySync, useChatDrag, useChatResize } from '../chat/hooks'
 
 /**
  * Type options for variable type selection
@@ -42,7 +53,7 @@ const TYPE_OPTIONS: ComboboxOption[] = [
  */
 const BADGE_HEIGHT = 20
 const BADGE_TEXT_SIZE = 13
-const ICON_SIZE = 14
+const ICON_SIZE = 13
 const HEADER_ICON_SIZE = 16
 const LINE_HEIGHT = 21
 const MIN_EDITOR_HEIGHT = 120
@@ -97,14 +108,14 @@ export function Variables() {
     [position, width, height]
   )
 
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
   })
 
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen,
     position: actualPosition,
     width,
@@ -117,12 +128,16 @@ export function Variables() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
     onDimensionsChange: setDimensions,
+    minWidth: MIN_VARIABLES_WIDTH,
+    minHeight: MIN_VARIABLES_HEIGHT,
+    maxWidth: MAX_VARIABLES_WIDTH,
+    maxHeight: MAX_VARIABLES_HEIGHT,
   })
 
   const [collapsedById, setCollapsedById] = useState<Record<string, boolean>>({})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
index 89dec6140..fc430f8c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
@@ -1170,9 +1170,7 @@ export function WebhookSettings({ workflowId, open, onOpenChange }: WebhookSetti
             <ModalTitle>Delete webhook?</ModalTitle>
             <ModalDescription>
               This will permanently remove the webhook configuration and stop all notifications.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -1187,7 +1185,7 @@ export function WebhookSettings({ workflowId, open, onOpenChange }: WebhookSetti
             <EmcnButton
               onClick={confirmDeleteWebhook}
               disabled={isDeleting}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               {isDeleting ? 'Deleting...' : 'Delete'}
             </EmcnButton>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
index 7452dd4ef..500cf9880 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -90,7 +90,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockEnabled(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               {isEnabled ? (
@@ -116,7 +116,7 @@ export const ActionBar = memo(
                     collaborativeDuplicateBlock(blockId)
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
                 <Duplicate className='h-[11px] w-[11px]' />
@@ -139,7 +139,7 @@ export const ActionBar = memo(
                     )
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled || !userPermissions.canEdit}
               >
                 <LogOut className='h-[11px] w-[11px]' />
@@ -159,7 +159,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockHandles(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               {horizontalHandles ? (
@@ -184,7 +184,7 @@ export const ActionBar = memo(
                   collaborativeRemoveBlock(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)] '
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               <Trash2 className='h-[11px] w-[11px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 1d7eb9963..79c652ed4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -24,7 +24,7 @@ import {
   getProviderName,
   shouldSkipBlockRender,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
-import { useBlockCore } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
@@ -404,7 +404,7 @@ const SubBlockRow = ({
       </span>
       {displayValue !== undefined && (
         <span
-          className='flex-1 truncate text-right text-[14px] text-[var(--white)]'
+          className='flex-1 truncate text-right text-[14px] text-[var(--text-primary)]'
           title={displayValue}
         >
           {displayValue}
@@ -430,15 +430,11 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     currentWorkflow,
     activeWorkflowId,
     isEnabled,
-    isActive,
-    diffStatus,
-    isDeletedBlock,
-    isFocused,
     handleClick,
     hasRing,
     ringStyles,
     runPathStatus,
-  } = useBlockCore({ blockId: id, data, isPending })
+  } = useBlockVisual({ blockId: id, data, isPending })
 
   const currentBlock = currentWorkflow.getBlockById(id)
 
@@ -856,7 +852,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             <span
               className={cn(
                 'truncate font-medium text-[16px]',
-                !isEnabled && runPathStatus !== 'success' && 'text-[#808080]'
+                !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
               title={name}
             >
@@ -874,8 +870,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                       variant='outline'
                       className='cursor-pointer'
                       style={{
-                        borderColor: !childIsDeployed ? '#EF4444' : '#FF6600',
-                        color: !childIsDeployed ? '#EF4444' : '#FF6600',
+                        borderColor: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
+                        color: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
                       }}
                       onClick={(e) => {
                         e.stopPropagation()
@@ -903,8 +899,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                     variant='outline'
                     className='cursor-pointer'
                     style={{
-                      borderColor: '#FF6600',
-                      color: '#FF6600',
+                      borderColor: 'var(--warning)',
+                      color: 'var(--warning)',
                     }}
                     onClick={(e) => {
                       e.stopPropagation()
@@ -957,7 +953,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                   <Badge
                     variant='outline'
                     className='cursor-pointer'
-                    style={{ borderColor: '#FF6600', color: '#FF6600' }}
+                    style={{ borderColor: 'var(--warning)', color: 'var(--warning)' }}
                     onClick={(e) => {
                       e.stopPropagation()
                       reactivateWebhook(webhookId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
index dcd94d429..bb5b972b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -141,7 +141,7 @@ export const WorkflowEdge = ({
               }
             }}
           >
-            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80 dark:text-[var(--text-error)] dark:group-hover:text-[var(--text-error)]/80' />
+            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80' />
           </div>
         </EdgeLabelRenderer>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
index 51c1ae8a8..4292f8743 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -1,7 +1,8 @@
 export { useAutoLayout } from './use-auto-layout'
-export { useBlockCore } from './use-block-core'
 export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
+export { useBlockVisual } from './use-block-visual'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
+export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './use-float'
 export { useNodeUtilities } from './use-node-utilities'
 export { useScrollManagement } from './use-scroll-management'
 export { useWorkflowExecution } from './use-workflow-execution'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
similarity index 54%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
index 7625dc88c..7fd80df20 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
@@ -7,72 +7,72 @@ import { useExecutionStore } from '@/stores/execution/store'
 import { usePanelEditorStore } from '@/stores/panel/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
-interface UseBlockCoreOptions {
+/**
+ * Props for the useBlockVisual hook.
+ */
+interface UseBlockVisualProps {
+  /** The unique identifier of the block */
   blockId: string
+  /** Block data including type, config, and preview state */
   data: WorkflowBlockProps
+  /** Whether the block is pending execution */
   isPending?: boolean
 }
 
 /**
- * Consolidated hook for core block functionality shared across all block types.
- * Combines workflow state, block state, focus, and ring styling.
+ * Provides visual state and interaction handlers for workflow blocks.
+ * Computes ring styling based on execution, focus, diff, and run path states.
+ * In preview mode, all interactive and execution-related visual states are disabled.
+ *
+ * @param props - The hook properties
+ * @returns Visual state, click handler, and ring styling for the block
  */
-export function useBlockCore({ blockId, data, isPending = false }: UseBlockCoreOptions) {
-  // Workflow context
+export function useBlockVisual({ blockId, data, isPending = false }: UseBlockVisualProps) {
+  const isPreview = data.isPreview ?? false
+
   const currentWorkflow = useCurrentWorkflow()
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
 
-  // Block state (enabled, active, diff status, deleted)
-  const { isEnabled, isActive, diffStatus, isDeletedBlock } = useBlockState(
-    blockId,
-    currentWorkflow,
-    data
-  )
+  const {
+    isEnabled,
+    isActive: blockIsActive,
+    diffStatus,
+    isDeletedBlock,
+  } = useBlockState(blockId, currentWorkflow, data)
+
+  const isActive = isPreview ? false : blockIsActive
 
-  // Run path state (from last execution)
   const lastRunPath = useExecutionStore((state) => state.lastRunPath)
-  const runPathStatus = lastRunPath.get(blockId)
+  const runPathStatus = isPreview ? undefined : lastRunPath.get(blockId)
 
-  // Focus management
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const isFocused = currentBlockId === blockId
+  const isFocused = isPreview ? false : currentBlockId === blockId
 
   const handleClick = useCallback(() => {
-    setCurrentBlockId(blockId)
-  }, [blockId, setCurrentBlockId])
+    if (!isPreview) {
+      setCurrentBlockId(blockId)
+    }
+  }, [blockId, setCurrentBlockId, isPreview])
 
-  // Ring styling based on all states
-  // Priority: active (executing) > pending > focused > deleted > diff > run path
   const { hasRing, ringClassName: ringStyles } = useMemo(
     () =>
       getBlockRingStyles({
         isActive,
-        isPending,
+        isPending: isPreview ? false : isPending,
         isFocused,
-        isDeletedBlock,
-        diffStatus,
+        isDeletedBlock: isPreview ? false : isDeletedBlock,
+        diffStatus: isPreview ? undefined : diffStatus,
         runPathStatus,
       }),
-    [isActive, isPending, isFocused, isDeletedBlock, diffStatus, runPathStatus]
+    [isActive, isPending, isFocused, isDeletedBlock, diffStatus, runPathStatus, isPreview]
   )
 
   return {
-    // Workflow context
     currentWorkflow,
     activeWorkflowId,
-
-    // Block state
     isEnabled,
-    isActive,
-    diffStatus,
-    isDeletedBlock,
-
-    // Focus
-    isFocused,
     handleClick,
-
-    // Ring styling
     hasRing,
     ringStyles,
     runPathStatus,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
new file mode 100644
index 000000000..c487cd896
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
@@ -0,0 +1,3 @@
+export { useFloatBoundarySync } from './use-float-boundary-sync'
+export { useFloatDrag } from './use-float-drag'
+export { useFloatResize } from './use-float-resize'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
similarity index 92%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
index 54be33257..a9fbfcd06 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 
-interface UseChatBoundarySyncProps {
+interface UseFloatBoundarySyncProps {
   isOpen: boolean
   position: { x: number; y: number }
   width: number
@@ -9,17 +9,17 @@ interface UseChatBoundarySyncProps {
 }
 
 /**
- * Hook to synchronize chat position with layout boundary changes
- * Keeps chat within bounds when sidebar, panel, or terminal resize
+ * Hook to synchronize floats position with layout boundary changes.
+ * Keeps the float within bounds when sidebar, panel, or terminal resize.
  * Uses requestAnimationFrame for smooth real-time updates
  */
-export function useChatBoundarySync({
+export function useFloatBoundarySync({
   isOpen,
   position,
   width,
   height,
   onPositionChange,
-}: UseChatBoundarySyncProps) {
+}: UseFloatBoundarySyncProps) {
   const rafIdRef = useRef<number | null>(null)
   const positionRef = useRef(position)
   const previousDimensionsRef = useRef({ sidebarWidth: 0, panelWidth: 0, terminalHeight: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
similarity index 92%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
index 643e1d6a8..cc71da957 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { constrainChatPosition } from '@/stores/chat/store'
 
-interface UseChatDragProps {
+interface UseFloatDragProps {
   position: { x: number; y: number }
   width: number
   height: number
@@ -9,10 +9,10 @@ interface UseChatDragProps {
 }
 
 /**
- * Hook for handling drag functionality of floating chat modal
+ * Hook for handling drag functionality of floats.
  * Provides mouse event handlers and manages drag state
  */
-export function useChatDrag({ position, width, height, onPositionChange }: UseChatDragProps) {
+export function useFloatDrag({ position, width, height, onPositionChange }: UseFloatDragProps) {
   const isDraggingRef = useRef(false)
   const dragStartRef = useRef({ x: 0, y: 0 })
   const initialPositionRef = useRef({ x: 0, y: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
similarity index 90%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
index 08a3e17d2..33c6e7223 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
@@ -6,12 +6,20 @@ import {
   MIN_CHAT_WIDTH,
 } from '@/stores/chat/store'
 
-interface UseChatResizeProps {
+interface UseFloatResizeProps {
   position: { x: number; y: number }
   width: number
   height: number
   onPositionChange: (position: { x: number; y: number }) => void
   onDimensionsChange: (dimensions: { width: number; height: number }) => void
+  /**
+   * Optional dimension constraints.
+   * If omitted, chat defaults are used for backward compatibility.
+   */
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
 }
 
 /**
@@ -34,16 +42,20 @@ type ResizeDirection =
 const EDGE_THRESHOLD = 8
 
 /**
- * Hook for handling multi-directional resize functionality of floating chat modal
- * Supports resizing from all 8 directions: 4 corners and 4 edges
+ * Hook for handling multi-directional resize functionality of floating panels.
+ * Supports resizing from all 8 directions: 4 corners and 4 edges.
  */
-export function useChatResize({
+export function useFloatResize({
   position,
   width,
   height,
   onPositionChange,
   onDimensionsChange,
-}: UseChatResizeProps) {
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: UseFloatResizeProps) {
   const [cursor, setCursor] = useState<string>('')
   const isResizingRef = useRef(false)
   const activeDirectionRef = useRef<ResizeDirection>(null)
@@ -285,9 +297,18 @@ export function useChatResize({
           break
       }
 
-      // Constrain dimensions to min/max
-      const constrainedWidth = Math.max(MIN_CHAT_WIDTH, Math.min(MAX_CHAT_WIDTH, newWidth))
-      const constrainedHeight = Math.max(MIN_CHAT_HEIGHT, Math.min(MAX_CHAT_HEIGHT, newHeight))
+      // Constrain dimensions to min/max. If explicit constraints are not provided,
+      // fall back to the chat defaults for backward compatibility.
+      const effectiveMinWidth = typeof minWidth === 'number' ? minWidth : MIN_CHAT_WIDTH
+      const effectiveMaxWidth = typeof maxWidth === 'number' ? maxWidth : MAX_CHAT_WIDTH
+      const effectiveMinHeight = typeof minHeight === 'number' ? minHeight : MIN_CHAT_HEIGHT
+      const effectiveMaxHeight = typeof maxHeight === 'number' ? maxHeight : MAX_CHAT_HEIGHT
+
+      const constrainedWidth = Math.max(effectiveMinWidth, Math.min(effectiveMaxWidth, newWidth))
+      const constrainedHeight = Math.max(
+        effectiveMinHeight,
+        Math.min(effectiveMaxHeight, newHeight)
+      )
 
       // Adjust position if dimensions were constrained on left/top edges
       if (direction === 'top-left' || direction === 'bottom-left' || direction === 'left') {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
index 8b6cc5f1f..1b532c694 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -49,7 +49,7 @@ export function getBlockRingStyles(options: BlockRingOptions): {
       !isFocused &&
       !isDeletedBlock &&
       diffStatus === 'new' &&
-      'ring-[#22C55E]',
+      'ring-[var(--brand-tertiary)]',
     !isActive &&
       !isPending &&
       !isFocused &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 13fc26e11..ca2d8a1d6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -308,7 +308,7 @@ const WorkflowContent = React.memo(() => {
    */
   const connectionLineStyle = useMemo(() => {
     return {
-      stroke: isErrorConnectionDrag ? '#EF4444' : '#434343',
+      stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--surface-12)',
       strokeWidth: 2,
     }
   }, [isErrorConnectionDrag])
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
index df82ed754..b973e85d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
@@ -81,30 +81,28 @@ export function FooterNavigation() {
 
   return (
     <>
-      <div className='flex flex-shrink-0 flex-col gap-[2px] border-t px-[7.75px] pt-[8px] pb-[8px] dark:border-[var(--border)]'>
+      <div className='flex flex-shrink-0 flex-col gap-[2px] border-[var(--border)] border-t px-[7.75px] pt-[8px] pb-[8px]'>
         {navigationItems.map((item) => {
           const Icon = item.icon
           const active = item.href ? isActive(item.href) : false
 
           const itemClasses = clsx(
-            'group flex h-[24px] items-center gap-[8px] rounded-[8px] px-[7px] text-[14px]',
-            active
-              ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-              : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'
+            'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
+            active ? 'bg-[var(--surface-9)]' : 'hover:bg-[var(--surface-9)]'
           )
 
           const iconClasses = clsx(
             'h-[14px] w-[14px] flex-shrink-0',
             active
-              ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-primary)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )
 
           const labelClasses = clsx(
-            'truncate font-base text-[13px]',
+            'truncate font-medium text-[13px]',
             active
-              ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-primary)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )
 
           const content = (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
index e29dcc402..7b65d744d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
@@ -3,19 +3,18 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import imageCompression from 'browser-image-compression'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
+import { Button, Combobox, Input, Textarea } from '@/components/emcn'
 import {
-  Button,
-  Combobox,
-  Input,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalTitle,
-  Textarea,
-} from '@/components/emcn'
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -60,13 +59,10 @@ interface HelpModalProps {
 export function HelpModal({ open, onOpenChange }: HelpModalProps) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const dropZoneRef = useRef<HTMLDivElement>(null)
 
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [submitStatus, setSubmitStatus] = useState<'success' | 'error' | null>(null)
-  const [errorMessage, setErrorMessage] = useState('')
   const [images, setImages] = useState<ImageWithPreview[]>([])
-  const [imageError, setImageError] = useState<string | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
 
@@ -93,8 +89,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
   useEffect(() => {
     if (open) {
       setSubmitStatus(null)
-      setErrorMessage('')
-      setImageError(null)
       setImages([])
       setIsDragging(false)
       setIsProcessing(false)
@@ -262,8 +256,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
    */
   const processFiles = useCallback(
     async (files: FileList | File[]) => {
-      setImageError(null)
-
       if (!files || files.length === 0) return
 
       setIsProcessing(true)
@@ -275,16 +267,12 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         for (const file of Array.from(files)) {
           // Validate file size
           if (file.size > MAX_FILE_SIZE) {
-            setImageError(`File ${file.name} is too large. Maximum size is 20MB.`)
             hasError = true
             continue
           }
 
           // Validate file type
           if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-            setImageError(
-              `File ${file.name} has an unsupported format. Please use JPEG, PNG, WebP, or GIF.`
-            )
             hasError = true
             continue
           }
@@ -303,7 +291,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         }
       } catch (error) {
         logger.error('Error processing images:', { error })
-        setImageError('An error occurred while processing images. Please try again.')
       } finally {
         setIsProcessing(false)
 
@@ -378,7 +365,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
     async (data: FormValues) => {
       setIsSubmitting(true)
       setSubmitStatus(null)
-      setErrorMessage('')
 
       try {
         // Prepare form data with images
@@ -413,7 +399,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
       } catch (error) {
         logger.error('Error submitting help request:', { error })
         setSubmitStatus('error')
-        setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred')
       } finally {
         setIsSubmitting(false)
       }
@@ -430,213 +415,149 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent className='flex h-[75vh] max-h-[75vh] w-full max-w-[700px] flex-col gap-0 p-0'>
-        {/* Modal Header */}
-        <div className='flex-shrink-0 px-6 py-5'>
-          <ModalTitle className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Help & Support
-          </ModalTitle>
-        </div>
+      <ModalContent>
+        <ModalHeader>Help &amp; Support</ModalHeader>
 
-        {/* Modal Body */}
-        <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
-          <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-            {/* Scrollable Form Content */}
-            <div
-              ref={scrollContainerRef}
-              className='scrollbar-hide min-h-0 flex-1 overflow-y-auto pb-20'
-            >
-              <div className='px-6'>
-                <div className='space-y-[12px]'>
-                  {/* Request Type Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='type'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Request
-                    </Label>
-                    <Combobox
-                      id='type'
-                      options={REQUEST_TYPE_OPTIONS}
-                      value={watch('type') || DEFAULT_REQUEST_TYPE}
-                      selectedValue={watch('type') || DEFAULT_REQUEST_TYPE}
-                      onChange={(value) => setValue('type', value as FormValues['type'])}
-                      placeholder='Select a request type'
-                      editable={false}
-                      filterOptions={false}
-                      className={cn(
-                        errors.type && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.type && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.type.message}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Subject Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='subject'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Subject
-                    </Label>
-                    <Input
-                      id='subject'
-                      placeholder='Brief description of your request'
-                      {...register('subject')}
-                      className={cn(
-                        'h-9 rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] text-[13px] dark:bg-[var(--surface-9)]',
-                        errors.subject &&
-                          'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.subject && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.subject.message}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Message Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='message'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Message
-                    </Label>
-                    <Textarea
-                      id='message'
-                      placeholder='Please provide details about your request...'
-                      rows={6}
-                      {...register('message')}
-                      className={cn(
-                        'rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] text-[13px] dark:bg-[var(--surface-9)]',
-                        errors.message &&
-                          'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.message && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.message.message}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Image Upload Section */}
-                  <div className='space-y-[8px]'>
-                    <Label className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                      Attach Images (Optional)
-                    </Label>
-                    <div
-                      ref={dropZoneRef}
-                      onDragEnter={handleDragEnter}
-                      onDragOver={handleDragOver}
-                      onDragLeave={handleDragLeave}
-                      onDrop={handleDrop}
-                      className={cn(
-                        'cursor-pointer rounded-[4px] border-[1.5px] border-[var(--surface-11)] border-dashed bg-[var(--surface-3)] p-6 text-center transition-colors hover:bg-[var(--surface-5)] dark:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-5)]',
-                        isDragging &&
-                          'border-[var(--brand-primary-hex)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-                      )}
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <input
-                        ref={fileInputRef}
-                        type='file'
-                        accept={ACCEPTED_IMAGE_TYPES.join(',')}
-                        onChange={handleFileChange}
-                        className='hidden'
-                        multiple
-                      />
-                      <p className='text-[13px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                        {isDragging ? 'Drop images here!' : 'Drop images here or click to browse'}
-                      </p>
-                      <p className='mt-[4px] text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        JPEG, PNG, WebP, GIF (max 20MB each)
-                      </p>
-                    </div>
-                    {imageError && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {imageError}
-                      </p>
-                    )}
-                    {isProcessing && (
-                      <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                        <Loader2 className='h-4 w-4 animate-spin' />
-                        <p className='text-[12px]'>Processing images...</p>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Image Preview Grid */}
-                  {images.length > 0 && (
-                    <div className='space-y-[8px]'>
-                      <Label className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                        Uploaded Images
-                      </Label>
-                      <div className='grid grid-cols-2 gap-3'>
-                        {images.map((image, index) => (
-                          <div
-                            key={index}
-                            className='group relative overflow-hidden rounded-[4px] border border-[var(--surface-11)]'
-                          >
-                            <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center bg-[var(--surface-2)]'>
-                              <Image
-                                src={image.preview}
-                                alt={`Preview ${index + 1}`}
-                                fill
-                                className='object-contain'
-                              />
-                              <button
-                                type='button'
-                                className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
-                                onClick={() => removeImage(index)}
-                              >
-                                <X className='h-5 w-5 text-white' />
-                              </button>
-                            </div>
-                            <div className='truncate bg-[var(--surface-5)] p-1.5 text-[12px] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'>
-                              {image.name}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
+        <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
+          <ModalBody className='!pb-[16px]'>
+            <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+              <div className='space-y-[12px]'>
+                <div>
+                  <Label
+                    htmlFor='type'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                  >
+                    Request
+                  </Label>
+                  <Combobox
+                    id='type'
+                    options={REQUEST_TYPE_OPTIONS}
+                    value={watch('type') || DEFAULT_REQUEST_TYPE}
+                    selectedValue={watch('type') || DEFAULT_REQUEST_TYPE}
+                    onChange={(value) => setValue('type', value as FormValues['type'])}
+                    placeholder='Select a request type'
+                    editable={false}
+                    filterOptions={false}
+                    className={cn(errors.type && 'border-[var(--text-error)]')}
+                  />
                 </div>
-              </div>
-            </div>
 
-            {/* Fixed Footer with Actions */}
-            <div className='absolute inset-x-0 bottom-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'>
-              <div className='flex w-full items-center justify-between gap-[8px] px-6 py-4'>
-                <Button
-                  variant='default'
-                  onClick={handleClose}
-                  type='button'
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </Button>
-                <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
-                  {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
-                  {isSubmitting
-                    ? 'Submitting...'
-                    : submitStatus === 'error'
-                      ? 'Error'
-                      : submitStatus === 'success'
-                        ? 'Success'
-                        : 'Submit'}
-                </Button>
+                <div>
+                  <Label
+                    htmlFor='subject'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                  >
+                    Subject
+                  </Label>
+                  <Input
+                    id='subject'
+                    placeholder='Brief description of your request'
+                    {...register('subject')}
+                    className={cn(errors.subject && 'border-[var(--text-error)]')}
+                  />
+                </div>
+
+                <div>
+                  <Label
+                    htmlFor='message'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                  >
+                    Message
+                  </Label>
+                  <Textarea
+                    id='message'
+                    placeholder='Please provide details about your request...'
+                    rows={6}
+                    {...register('message')}
+                    className={cn(errors.message && 'border-[var(--text-error)]')}
+                  />
+                </div>
+
+                <div>
+                  <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                    Attach Images (Optional)
+                  </Label>
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={() => fileInputRef.current?.click()}
+                    onDragEnter={handleDragEnter}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    className={cn(
+                      'w-full justify-center border border-[var(--c-575757)] border-dashed',
+                      {
+                        'border-[var(--brand-primary-hex)]': isDragging,
+                      }
+                    )}
+                  >
+                    <input
+                      ref={fileInputRef}
+                      type='file'
+                      accept={ACCEPTED_IMAGE_TYPES.join(',')}
+                      onChange={handleFileChange}
+                      className='hidden'
+                      multiple
+                    />
+                    <div className='flex flex-col text-center'>
+                      <span className='text-[var(--text-primary)]'>
+                        {isDragging ? 'Drop images here' : 'Drop images here or click to browse'}
+                      </span>
+                      <span className='text-[11px]'>PNG, JPEG, WebP, GIF (max 20MB each)</span>
+                    </div>
+                  </Button>
+                </div>
+
+                {images.length > 0 && (
+                  <div className='space-y-2'>
+                    <Label>Uploaded Images</Label>
+                    <div className='grid grid-cols-2 gap-3'>
+                      {images.map((image, index) => (
+                        <div
+                          className='group relative overflow-hidden rounded-[4px] border'
+                          key={index}
+                        >
+                          <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
+                            <Image
+                              src={image.preview}
+                              alt={`Preview ${index + 1}`}
+                              fill
+                              className='object-contain'
+                            />
+                            <button
+                              type='button'
+                              className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
+                              onClick={() => removeImage(index)}
+                            >
+                              <X className='h-[18px] w-[18px] text-white' />
+                            </button>
+                          </div>
+                          <div className='truncate p-[6px] text-[12px]'>{image.name}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
-          </form>
-        </div>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant='default' onClick={handleClose} type='button' disabled={isSubmitting}>
+              Cancel
+            </Button>
+            <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
+              {isSubmitting
+                ? 'Submitting...'
+                : submitStatus === 'error'
+                  ? 'Error'
+                  : submitStatus === 'success'
+                    ? 'Success'
+                    : 'Submit'}
+            </Button>
+          </ModalFooter>
+        </form>
       </ModalContent>
     </Modal>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
index 22b418158..25cce42b2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
@@ -501,14 +501,14 @@ export function SearchModal({
           </VisuallyHidden.Root>
 
           {/* Search input container */}
-          <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] px-[12px] py-[8px] shadow-sm dark:border-[var(--border)] dark:bg-[var(--surface-5)]'>
-            <Search className='h-[15px] w-[15px] flex-shrink-0 text-[var(--text-subtle)] dark:text-[var(--text-subtle)]' />
+          <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] px-[12px] py-[8px] shadow-sm'>
+            <Search className='h-[15px] w-[15px] flex-shrink-0 text-[var(--text-subtle)]' />
             <input
               type='text'
               placeholder='Search anything...'
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className='w-full border-0 bg-transparent font-base text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-secondary)]'
+              className='w-full border-0 bg-transparent font-base text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none'
               autoFocus
             />
           </div>
@@ -523,7 +523,7 @@ export function SearchModal({
                 return (
                   <div key={type} className='mb-[10px] last:mb-0'>
                     {/* Section header */}
-                    <div className='pt-[2px] pb-[4px] font-medium text-[13px] text-[var(--text-subtle)] uppercase tracking-wide dark:text-[var(--text-subtle)]'>
+                    <div className='pt-[2px] pb-[4px] font-medium text-[13px] text-[var(--text-subtle)] uppercase tracking-wide'>
                       {sectionTitles[type]}
                     </div>
 
@@ -545,10 +545,10 @@ export function SearchModal({
                             onClick={() => handleItemClick(item)}
                             onMouseDown={(e) => e.preventDefault()}
                             className={cn(
-                              'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none dark:bg-[var(--surface-4)]/60',
+                              'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none',
                               isSelected
-                                ? 'bg-[var(--border)] shadow-sm dark:bg-[var(--border)]'
-                                : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'
+                                ? 'bg-[var(--border)] shadow-sm'
+                                : 'hover:bg-[var(--border)]'
                             )}
                           >
                             {/* Icon - different rendering for workflows vs others */}
@@ -574,7 +574,7 @@ export function SearchModal({
                                           'transition-transform duration-100 group-hover:scale-110',
                                           showColoredIcon
                                             ? '!h-[10px] !w-[10px] text-white'
-                                            : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                                            : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
                                         )}
                                       />
                                     </div>
@@ -588,8 +588,8 @@ export function SearchModal({
                               className={cn(
                                 'truncate font-medium',
                                 isSelected
-                                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                                  ? 'text-[var(--text-primary)]'
+                                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
                               )}
                             >
                               {item.name}
@@ -598,7 +598,7 @@ export function SearchModal({
 
                             {/* Shortcut */}
                             {item.shortcut && (
-                              <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]'>
+                              <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)]'>
                                 {item.shortcut}
                               </span>
                             )}
@@ -611,8 +611,8 @@ export function SearchModal({
               })}
             </div>
           ) : searchQuery ? (
-            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-5)] px-[16px] py-[24px] shadow-sm dark:bg-[var(--surface-5)]'>
-              <p className='text-[15px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]'>
+            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-5)] px-[16px] py-[24px] shadow-sm'>
+              <p className='text-[15px] text-[var(--text-subtle)]'>
                 No results found for "{searchQuery}"
               </p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx
deleted file mode 100644
index 7da137cda..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { Camera } from 'lucide-react'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import { Button } from '@/components/emcn'
-import { AgentIcon } from '@/components/icons'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { signOut } from '@/lib/auth/auth-client'
-import { useBrandConfig } from '@/lib/branding/branding'
-import { getBaseUrl } from '@/lib/core/utils/urls'
-import { createLogger } from '@/lib/logs/console/logger'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload'
-import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
-import { clearUserData } from '@/stores'
-
-const logger = createLogger('Account')
-
-interface AccountProps {
-  onOpenChange: (open: boolean) => void
-}
-
-export function Account(_props: AccountProps) {
-  const router = useRouter()
-  const brandConfig = useBrandConfig()
-
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: profile } = useUserProfile()
-  const updateProfile = useUpdateUserProfile()
-
-  // Local UI state
-  const [name, setName] = useState(profile?.name || '')
-  const [isEditingName, setIsEditingName] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const [isResettingPassword, setIsResettingPassword] = useState(false)
-  const [resetPasswordMessage, setResetPasswordMessage] = useState<{
-    type: 'success' | 'error'
-    text: string
-  } | null>(null)
-
-  const [uploadError, setUploadError] = useState<string | null>(null)
-
-  // Update local name state when profile data changes
-  useEffect(() => {
-    if (profile?.name) {
-      setName(profile.name)
-    }
-  }, [profile?.name])
-
-  const {
-    previewUrl: profilePictureUrl,
-    fileInputRef: profilePictureInputRef,
-    handleThumbnailClick: handleProfilePictureClick,
-    handleFileChange: handleProfilePictureChange,
-    isUploading: isUploadingProfilePicture,
-  } = useProfilePictureUpload({
-    currentImage: profile?.image || null,
-    onUpload: async (url) => {
-      try {
-        await updateProfile.mutateAsync({ image: url })
-        setUploadError(null)
-      } catch (error) {
-        setUploadError(
-          url ? 'Failed to update profile picture' : 'Failed to remove profile picture'
-        )
-      }
-    },
-    onError: (error) => {
-      setUploadError(error)
-      setTimeout(() => setUploadError(null), 5000)
-    },
-  })
-
-  useEffect(() => {
-    if (isEditingName && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [isEditingName])
-
-  const handleUpdateName = async () => {
-    const trimmedName = name.trim()
-
-    if (!trimmedName) {
-      return
-    }
-
-    if (trimmedName === profile?.name) {
-      setIsEditingName(false)
-      return
-    }
-
-    try {
-      await updateProfile.mutateAsync({ name: trimmedName })
-      setIsEditingName(false)
-    } catch (error) {
-      logger.error('Error updating name:', error)
-      setName(profile?.name || '')
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleUpdateName()
-    } else if (e.key === 'Escape') {
-      e.preventDefault()
-      handleCancelEdit()
-    }
-  }
-
-  const handleCancelEdit = () => {
-    setIsEditingName(false)
-    setName(profile?.name || '')
-  }
-
-  const handleInputBlur = () => {
-    handleUpdateName()
-  }
-
-  const handleSignOut = async () => {
-    try {
-      await Promise.all([signOut(), clearUserData()])
-      router.push('/login?fromLogout=true')
-    } catch (error) {
-      logger.error('Error signing out:', { error })
-      router.push('/login?fromLogout=true')
-    }
-  }
-
-  const handleResetPassword = async () => {
-    if (!profile?.email) return
-
-    setIsResettingPassword(true)
-    setResetPasswordMessage(null)
-
-    try {
-      const response = await fetch('/api/auth/forget-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: profile.email,
-          redirectTo: `${getBaseUrl()}/reset-password`,
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.message || 'Failed to send reset password email')
-      }
-
-      setResetPasswordMessage({
-        type: 'success',
-        text: 'email sent',
-      })
-
-      setTimeout(() => {
-        setResetPasswordMessage(null)
-      }, 5000)
-    } catch (error) {
-      logger.error('Error resetting password:', error)
-      setResetPasswordMessage({
-        type: 'error',
-        text: 'error',
-      })
-
-      setTimeout(() => {
-        setResetPasswordMessage(null)
-      }, 5000)
-    } finally {
-      setIsResettingPassword(false)
-    }
-  }
-
-  return (
-    <div className='px-6 pt-4 pb-4'>
-      <div className='flex flex-col gap-4'>
-        {/* User Info Section */}
-        <div className='flex items-center gap-4'>
-          {/* Profile Picture Upload */}
-          <div className='relative'>
-            <div
-              className='group relative flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[#802FFF] transition-all hover:opacity-80'
-              onClick={handleProfilePictureClick}
-            >
-              {(() => {
-                const imageUrl = profilePictureUrl || profile?.image || brandConfig.logoUrl
-                return imageUrl ? (
-                  <Image
-                    src={imageUrl}
-                    alt={profile?.name || 'User'}
-                    width={48}
-                    height={48}
-                    className={`h-full w-full object-cover transition-opacity duration-300 ${
-                      isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
-                    }`}
-                  />
-                ) : (
-                  <AgentIcon className='h-6 w-6 text-white' />
-                )
-              })()}
-
-              {/* Upload overlay */}
-              <div
-                className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
-                  isUploadingProfilePicture ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                }`}
-              >
-                {isUploadingProfilePicture ? (
-                  <div className='h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent' />
-                ) : (
-                  <Camera className='h-5 w-5 text-white' />
-                )}
-              </div>
-            </div>
-
-            {/* Hidden file input */}
-            <Input
-              type='file'
-              accept='image/png,image/jpeg,image/jpg'
-              className='hidden'
-              ref={profilePictureInputRef}
-              onChange={handleProfilePictureChange}
-              disabled={isUploadingProfilePicture}
-            />
-          </div>
-
-          {/* User Details */}
-          <div className='flex flex-1 flex-col justify-center'>
-            <h3 className='font-medium text-base'>{profile?.name || ''}</h3>
-            <p className='font-normal text-muted-foreground text-sm'>{profile?.email || ''}</p>
-            {uploadError && (
-              <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {uploadError}
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* Name Field */}
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor='name' className='font-normal text-muted-foreground text-sm'>
-            Name
-          </Label>
-          {isEditingName ? (
-            <input
-              ref={inputRef}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onBlur={handleInputBlur}
-              className='min-w-0 flex-1 border-0 bg-transparent p-0 text-base outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-              maxLength={100}
-              disabled={updateProfile.isPending}
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              spellCheck='false'
-            />
-          ) : (
-            <div className='flex items-center gap-4'>
-              <span className='text-base'>{profile?.name || ''}</span>
-              <Button
-                variant='ghost'
-                className='h-auto p-0 font-normal text-muted-foreground text-sm transition-colors hover:bg-transparent hover:text-foreground'
-                onClick={() => setIsEditingName(true)}
-              >
-                update
-                <span className='sr-only'>Update name</span>
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Email Field - Read Only */}
-        <div className='flex flex-col gap-2'>
-          <Label className='font-normal text-muted-foreground text-sm'>Email</Label>
-          <p className='text-base'>{profile?.email || ''}</p>
-        </div>
-
-        {/* Password Field */}
-        <div className='flex flex-col gap-2'>
-          <Label className='font-normal text-muted-foreground text-sm'>Password</Label>
-          <div className='flex items-center gap-4'>
-            <span className='text-base'>••••••••</span>
-            <Button
-              variant='ghost'
-              className={`h-auto p-0 font-normal text-sm transition-colors hover:bg-transparent ${
-                resetPasswordMessage
-                  ? resetPasswordMessage.type === 'success'
-                    ? 'text-green-500 hover:text-green-600'
-                    : 'text-destructive hover:text-destructive/80'
-                  : 'text-muted-foreground hover:text-foreground'
-              }`}
-              onClick={handleResetPassword}
-              disabled={isResettingPassword}
-            >
-              {isResettingPassword
-                ? 'sending...'
-                : resetPasswordMessage
-                  ? resetPasswordMessage.text
-                  : 'reset'}
-              <span className='sr-only'>Reset password</span>
-            </Button>
-          </div>
-        </div>
-
-        {/* Sign Out Button */}
-        <div>
-          <Button onClick={handleSignOut} variant='outline'>
-            Sign Out
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
index 569d57700..cb0d0de5b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
@@ -3,17 +3,15 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Check, Copy, Info, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button, Input as EmcnInput, Tooltip } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
-import { Input, Label, Skeleton, Switch } from '@/components/ui'
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton, Switch } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -33,19 +31,6 @@ interface ApiKeysProps {
   registerCloseHandler?: (handler: (open: boolean) => void) => void
 }
 
-interface ApiKeyDisplayProps {
-  apiKey: ApiKey
-}
-
-function ApiKeyDisplay({ apiKey }: ApiKeyDisplayProps) {
-  const displayValue = apiKey.displayKey || apiKey.key
-  return (
-    <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-      <code className='font-mono text-foreground text-xs'>{displayValue}</code>
-    </div>
-  )
-}
-
 export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
   const { data: session } = useSession()
   const userId = session?.user?.id
@@ -111,11 +96,6 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
       .filter(({ key }) => key.name.toLowerCase().includes(searchTerm.toLowerCase()))
   }, [personalKeys, searchTerm])
 
-  const personalHeaderMarginClass = useMemo(() => {
-    if (!searchTerm.trim()) return 'mt-8'
-    return filteredWorkspaceKeys.length > 0 ? 'mt-8' : 'mt-0'
-  }, [searchTerm, filteredWorkspaceKeys])
-
   const handleCreateKey = async () => {
     if (!userId || !newKeyName.trim()) return
 
@@ -222,307 +202,314 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
   }
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header */}
-      <div className='px-6 pt-4 pb-2'>
-        {/* Search Input */}
-        {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-lg' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-lg border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-            <Input
-              placeholder='Search API keys...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
-        )}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Search Input and Create Button */}
+      <div className='flex items-center gap-[8px]'>
+        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+          <Search
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+            strokeWidth={2}
+          />
+          <Input
+            placeholder='Search API keys...'
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+          />
+        </div>
+        <Button
+          onClick={(e) => {
+            if (createButtonDisabled) {
+              return
+            }
+            e.currentTarget.blur()
+            setIsCreateDialogOpen(true)
+            setKeyType(defaultKeyType)
+            setCreateError(null)
+          }}
+          variant='primary'
+          disabled={createButtonDisabled}
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 disabled:cursor-not-allowed disabled:opacity-60'
+        >
+          <Plus className='mr-[6px] h-[13px] w-[13px]' />
+          Create
+        </Button>
       </div>
 
       {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
-          {isLoading ? (
-            <div className='space-y-2'>
-              <ApiKeySkeleton />
+      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+        {isLoading ? (
+          <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[70px]' />
+              <div className='text-[13px] text-[var(--text-muted)]'>
+                <Skeleton className='h-[13px] w-[140px]' />
+              </div>
+            </div>
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[55px]' />
               <ApiKeySkeleton />
               <ApiKeySkeleton />
             </div>
-          ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Key" below to get started
-            </div>
-          ) : (
+          </div>
+        ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
+          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            Click "Create" above to get started
+          </div>
+        ) : (
+          <div className='flex flex-col gap-[16px]'>
             <>
-              {/* Allow Personal API Keys Toggle */}
-              {!searchTerm.trim() && (
-                <Tooltip.Provider delayDuration={150}>
-                  <div className='mb-6 flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      <span className='font-medium text-[12px] text-foreground'>
-                        Allow personal API keys
-                      </span>
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <button
-                            type='button'
-                            className='rounded-full p-1 text-muted-foreground transition hover:text-foreground'
-                          >
-                            <Info className='h-3 w-3' strokeWidth={2} />
-                          </button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top' className='max-w-xs text-xs'>
-                          Allow collaborators to create and use their own keys with billing charged
-                          to them.
-                        </Tooltip.Content>
-                      </Tooltip.Root>
-                    </div>
-                    {isLoadingSettings ? (
-                      <Skeleton className='h-5 w-16 rounded-full' />
-                    ) : (
-                      <Switch
-                        checked={allowPersonalApiKeys}
-                        disabled={!canManageWorkspaceKeys || updateSettingsMutation.isPending}
-                        onCheckedChange={async (checked) => {
-                          try {
-                            await updateSettingsMutation.mutateAsync({
-                              workspaceId,
-                              allowPersonalApiKeys: checked,
-                            })
-                          } catch (error) {
-                            logger.error('Error updating workspace settings:', { error })
-                          }
-                        }}
-                      />
-                    )}
-                  </div>
-                </Tooltip.Provider>
-              )}
-
               {/* Workspace section */}
               {!searchTerm.trim() ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Workspace
+                  </div>
                   {workspaceKeys.length === 0 ? (
-                    <div className='text-muted-foreground text-sm'>No workspace API keys yet.</div>
+                    <div className='text-[13px] text-[var(--text-muted)]'>
+                      No workspace API keys yet
+                    </div>
                   ) : (
                     workspaceKeys.map((key) => (
-                      <div key={key.id} className='flex flex-col gap-2'>
-                        <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                          {key.name}
-                        </Label>
-                        <div className='flex items-center justify-between gap-4'>
-                          <div className='flex items-center gap-3'>
-                            <ApiKeyDisplay apiKey={key} />
-                            <p className='text-muted-foreground text-xs'>
-                              Last used: {formatDate(key.lastUsed)}
-                            </p>
+                      <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                          <div className='flex items-center gap-[6px]'>
+                            <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                              {key.name}
+                            </span>
+                            <span className='text-[13px] text-[var(--text-secondary)]'>
+                              (last used: {formatDate(key.lastUsed).toLowerCase()})
+                            </span>
                           </div>
-                          <div className='flex items-center gap-2'>
-                            <Button
-                              variant='ghost'
-                              onClick={() => {
-                                setDeleteKey(key)
-                                setShowDeleteDialog(true)
-                              }}
-                              className='h-8 text-muted-foreground hover:text-foreground'
-                              disabled={!canManageWorkspaceKeys}
-                            >
-                              Delete
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              ) : filteredWorkspaceKeys.length > 0 ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {filteredWorkspaceKeys.map(({ key }) => (
-                    <div key={key.id} className='flex flex-col gap-2'>
-                      <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                        {key.name}
-                      </Label>
-                      <div className='flex items-center justify-between gap-4'>
-                        <div className='flex items-center gap-3'>
-                          <ApiKeyDisplay apiKey={key} />
-                          <p className='text-muted-foreground text-xs'>
-                            Last used: {formatDate(key.lastUsed)}
+                          <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                            {key.displayKey || key.key}
                           </p>
                         </div>
                         <Button
                           variant='ghost'
+                          className='flex-shrink-0'
                           onClick={() => {
                             setDeleteKey(key)
                             setShowDeleteDialog(true)
                           }}
-                          className='h-8 text-muted-foreground hover:text-foreground'
                           disabled={!canManageWorkspaceKeys}
                         >
                           Delete
                         </Button>
                       </div>
+                    ))
+                  )}
+                </div>
+              ) : filteredWorkspaceKeys.length > 0 ? (
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Workspace
+                  </div>
+                  {filteredWorkspaceKeys.map(({ key }) => (
+                    <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                        <div className='flex items-center gap-[6px]'>
+                          <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                            {key.name}
+                          </span>
+                          <span className='text-[13px] text-[var(--text-secondary)]'>
+                            (last used: {formatDate(key.lastUsed).toLowerCase()})
+                          </span>
+                        </div>
+                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                          {key.displayKey || key.key}
+                        </p>
+                      </div>
+                      <Button
+                        variant='ghost'
+                        className='flex-shrink-0'
+                        onClick={() => {
+                          setDeleteKey(key)
+                          setShowDeleteDialog(true)
+                        }}
+                        disabled={!canManageWorkspaceKeys}
+                      >
+                        Delete
+                      </Button>
                     </div>
                   ))}
                 </div>
               ) : null}
 
               {/* Personal section */}
-              <div
-                className={`${personalHeaderMarginClass} mb-2 font-medium text-[13px] text-foreground`}
-              >
-                Personal
-              </div>
-              {filteredPersonalKeys.map(({ key }) => {
-                const isConflict = conflicts.includes(key.name)
-                return (
-                  <div key={key.id} className='flex flex-col gap-2'>
-                    <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                      {key.name}
-                    </Label>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <ApiKeyDisplay apiKey={key} />
-                        <p className='text-muted-foreground text-xs'>
-                          Last used: {formatDate(key.lastUsed)}
-                        </p>
-                      </div>
-                      <div className='flex items-center gap-2'>
-                        <Button
-                          variant='ghost'
-                          onClick={() => {
-                            setDeleteKey(key)
-                            setShowDeleteDialog(true)
-                          }}
-                          className='h-8 text-muted-foreground hover:text-foreground'
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    </div>
-                    {isConflict && (
-                      <div className='col-span-3 mt-1 text-[#DC2626] text-[12px] leading-tight dark:text-[#F87171]'>
-                        Workspace API key with the same name overrides this. Rename your personal
-                        key to use it.
-                      </div>
-                    )}
+              {(!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Personal
                   </div>
-                )
-              })}
+                  {filteredPersonalKeys.map(({ key }) => {
+                    const isConflict = conflicts.includes(key.name)
+                    return (
+                      <div key={key.id} className='flex flex-col gap-[8px]'>
+                        <div className='flex items-center justify-between gap-[12px]'>
+                          <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                            <div className='flex items-center gap-[6px]'>
+                              <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                                {key.name}
+                              </span>
+                              <span className='text-[13px] text-[var(--text-secondary)]'>
+                                (last used: {formatDate(key.lastUsed).toLowerCase()})
+                              </span>
+                            </div>
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {key.displayKey || key.key}
+                            </p>
+                          </div>
+                          <Button
+                            variant='ghost'
+                            className='flex-shrink-0'
+                            onClick={() => {
+                              setDeleteKey(key)
+                              setShowDeleteDialog(true)
+                            }}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                        {isConflict && (
+                          <div className='text-[12px] text-[var(--text-error)] leading-tight'>
+                            Workspace API key with the same name overrides this. Rename your
+                            personal key to use it.
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
               {/* Show message when search has no results across both sections */}
               {searchTerm.trim() &&
                 filteredPersonalKeys.length === 0 &&
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
-                  <div className='py-8 text-center text-muted-foreground text-sm'>
+                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
                     No API keys found matching "{searchTerm}"
                   </div>
                 )}
             </>
-          )}
-        </div>
+          </div>
+        )}
       </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center px-6 py-4'>
-          {isLoading ? (
-            <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-          ) : (
-            <Button
-              onClick={(e) => {
-                if (createButtonDisabled) {
-                  return
-                }
-                // Remove focus from button before opening dialog to prevent focus trap
-                e.currentTarget.blur()
-                setIsCreateDialogOpen(true)
-                setKeyType(defaultKeyType)
-                setCreateError(null)
-              }}
-              variant='ghost'
-              disabled={createButtonDisabled}
-              className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-60'
-            >
-              <Plus className='h-4 w-4 stroke-[2px]' />
-              Create Key
-            </Button>
-          )}
-        </div>
-      </div>
+      {/* Allow Personal API Keys Toggle - Fixed at bottom */}
+      {!isLoading && canManageWorkspaceKeys && (
+        <Tooltip.Provider delayDuration={150}>
+          <div className='mt-auto flex items-center justify-between'>
+            <div className='flex items-center gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Allow personal API keys
+              </span>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type='button'
+                    className='rounded-full p-[4px] text-[var(--text-muted)] transition hover:text-[var(--text-primary)]'
+                  >
+                    <Info className='h-[12px] w-[12px]' strokeWidth={2} />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top' className='max-w-xs text-[12px]'>
+                  Allow collaborators to create and use their own keys with billing charged to them.
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+            {isLoadingSettings ? (
+              <Skeleton className='h-5 w-16 rounded-full' />
+            ) : (
+              <Switch
+                checked={allowPersonalApiKeys}
+                disabled={!canManageWorkspaceKeys || updateSettingsMutation.isPending}
+                onCheckedChange={async (checked) => {
+                  try {
+                    await updateSettingsMutation.mutateAsync({
+                      workspaceId,
+                      allowPersonalApiKeys: checked,
+                    })
+                  } catch (error) {
+                    logger.error('Error updating workspace settings:', { error })
+                  }
+                }}
+              />
+            )}
+          </div>
+        </Tooltip.Provider>
+      )}
 
       {/* Create API Key Dialog */}
       <Modal open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Create new API key</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Create new API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               {keyType === 'workspace'
                 ? "This key will have access to all workflows in this workspace. Make sure to copy it after creation as you won't be able to see it again."
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
-            </ModalDescription>
-          </ModalHeader>
+            </p>
 
-          <div className='space-y-4 py-2'>
-            {canManageWorkspaceKeys && (
-              <div className='space-y-2'>
-                <p className='font-[360] text-sm'>API Key Type</p>
-                <div className='flex gap-2'>
-                  <Button
-                    type='button'
-                    variant={keyType === 'personal' ? 'outline' : 'default'}
-                    onClick={() => {
-                      setKeyType('personal')
-                      if (createError) setCreateError(null)
-                    }}
-                    disabled={!allowPersonalApiKeys}
-                    className='h-8 disabled:cursor-not-allowed disabled:opacity-60'
-                  >
-                    Personal
-                  </Button>
-                  <Button
-                    type='button'
-                    variant={keyType === 'workspace' ? 'outline' : 'default'}
-                    onClick={() => {
-                      setKeyType('workspace')
-                      if (createError) setCreateError(null)
-                    }}
-                    className='h-8'
-                  >
-                    Workspace
-                  </Button>
+            <div className='mt-[16px] flex flex-col gap-[16px]'>
+              {canManageWorkspaceKeys && (
+                <div className='flex flex-col gap-[8px]'>
+                  <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    API Key Type
+                  </p>
+                  <div className='flex gap-[8px]'>
+                    <Button
+                      type='button'
+                      variant={keyType === 'personal' ? 'active' : 'default'}
+                      onClick={() => {
+                        setKeyType('personal')
+                        if (createError) setCreateError(null)
+                      }}
+                      disabled={!allowPersonalApiKeys}
+                      className='disabled:cursor-not-allowed disabled:opacity-60'
+                    >
+                      Personal
+                    </Button>
+                    <Button
+                      type='button'
+                      variant={keyType === 'workspace' ? 'active' : 'default'}
+                      onClick={() => {
+                        setKeyType('workspace')
+                        if (createError) setCreateError(null)
+                      }}
+                    >
+                      Workspace
+                    </Button>
+                  </div>
                 </div>
-              </div>
-            )}
-            <div className='space-y-2'>
-              <p className='font-[360] text-sm'>
-                Enter a name for your API key to help you identify it later.
-              </p>
-              <Input
-                value={newKeyName}
-                onChange={(e) => {
-                  setNewKeyName(e.target.value)
-                  if (createError) setCreateError(null) // Clear error when user types
-                }}
-                placeholder='e.g., Development, Production'
-                className='h-9 rounded-[8px]'
-                autoFocus
-              />
-              {createError && (
-                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                  {createError}
-                </p>
               )}
+              <div className='flex flex-col gap-[8px]'>
+                <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Enter a name for your API key to help you identify it later.
+                </p>
+                <EmcnInput
+                  value={newKeyName}
+                  onChange={(e) => {
+                    setNewKeyName(e.target.value)
+                    if (createError) setCreateError(null)
+                  }}
+                  placeholder='e.g., Development, Production'
+                  className='h-9'
+                  autoFocus
+                />
+                {createError && (
+                  <p className='text-[11px] text-[var(--text-error)] leading-tight'>
+                    {createError}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
+          </ModalBody>
 
           <ModalFooter>
             <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
+              variant='default'
               onClick={() => {
                 setIsCreateDialogOpen(false)
                 setNewKeyName('')
@@ -534,13 +521,13 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
             <Button
               type='button'
               variant='primary'
-              className='h-[32px] px-[12px]'
               onClick={handleCreateKey}
               disabled={
                 !newKeyName.trim() ||
                 createApiKeyMutation.isPending ||
                 (keyType === 'workspace' && !canManageWorkspaceKeys)
               }
+              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
             >
               {createApiKeyMutation.isPending ? 'Creating...' : 'Create'}
             </Button>
@@ -559,51 +546,56 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
           }
         }}
       >
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Your API key has been created</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Your API key has been created</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This is the only time you will see your API key.{' '}
-              <span className='font-semibold'>Copy it now and store it securely.</span>
-            </ModalDescription>
-          </ModalHeader>
+              <span className='font-semibold text-[var(--text-primary)]'>
+                Copy it now and store it securely.
+              </span>
+            </p>
 
-          {newKey && (
-            <div className='relative'>
-              <div className='flex h-9 items-center rounded-[6px] border-none bg-muted px-3 pr-10'>
-                <code className='flex-1 truncate font-mono text-foreground text-sm'>
-                  {newKey.key}
-                </code>
+            {newKey && (
+              <div className='relative mt-[10px]'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {newKey.key}
+                  </code>
+                </div>
+                <Button
+                  variant='ghost'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  onClick={() => copyToClipboard(newKey.key)}
+                >
+                  {copySuccess ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy to clipboard</span>
+                </Button>
               </div>
-              <Button
-                variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-1 h-7 w-7 rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground'
-                onClick={() => copyToClipboard(newKey.key)}
-              >
-                {copySuccess ? <Check className='h-3.5 w-3.5' /> : <Copy className='h-3.5 w-3.5' />}
-                <span className='sr-only'>Copy to clipboard</span>
-              </Button>
-            </div>
-          )}
+            )}
+          </ModalBody>
         </ModalContent>
       </Modal>
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Delete API key?</ModalTitle>
-            <ModalDescription>
-              Deleting this API key will immediately revoke access for any integrations using it.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
-            </ModalDescription>
-          </ModalHeader>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Deleting{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
+              immediately revoke access for any integrations using it.{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
           <ModalFooter>
             <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
+              variant='default'
               onClick={() => {
                 setShowDeleteDialog(false)
                 setDeleteKey(null)
@@ -613,9 +605,10 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              variant='primary'
               onClick={handleDeleteKey}
               disabled={deleteApiKeyMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteApiKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
@@ -628,15 +621,15 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
 
 function ApiKeySkeleton() {
   return (
-    <div className='flex flex-col gap-2'>
-      <Skeleton className='h-4 w-32' /> {/* API key name */}
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-20 rounded-[8px]' /> {/* Key preview */}
-          <Skeleton className='h-4 w-24' /> {/* Last used */}
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Skeleton className='h-[14px] w-[80px]' />
+          <Skeleton className='h-[13px] w-[140px]' />
         </div>
-        <Skeleton className='h-8 w-16' /> {/* Delete button */}
+        <Skeleton className='h-[13px] w-[100px]' />
       </div>
+      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
index a6f1c4292..3576cf989 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
@@ -1,15 +1,16 @@
-import { useState } from 'react'
-import { Check, Copy, Plus } from 'lucide-react'
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Check, Copy, Plus, Search } from 'lucide-react'
+import { Button } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Label } from '@/components/ui'
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
   type CopilotKey,
@@ -20,91 +21,41 @@ import {
 
 const logger = createLogger('CopilotSettings')
 
-// Commented out model-related code
-// interface ModelOption {
-//   value: string
-//   label: string
-//   icon: 'brain' | 'brainCircuit' | 'zap'
-// }
-
-// const OPENAI_MODELS: ModelOption[] = [
-//   // Zap models first
-//   { value: 'gpt-4o', label: 'gpt-4o', icon: 'zap' },
-//   { value: 'gpt-4.1', label: 'gpt-4.1', icon: 'zap' },
-//   { value: 'gpt-5-fast', label: 'gpt-5-fast', icon: 'zap' },
-//   { value: 'gpt-5.1-fast', label: 'gpt-5.1-fast', icon: 'zap' },
-//   // Brain models
-//   { value: 'gpt-5', label: 'gpt-5', icon: 'brain' },
-//   { value: 'gpt-5-medium', label: 'gpt-5-medium', icon: 'brain' },
-//   { value: 'gpt-5.1', label: 'gpt-5.1', icon: 'brain' },
-//   { value: 'gpt-5.1-medium', label: 'gpt-5.1-medium', icon: 'brain' },
-//   // BrainCircuit models
-//   { value: 'gpt-5-high', label: 'gpt-5-high', icon: 'brainCircuit' },
-//   { value: 'gpt-5.1-high', label: 'gpt-5.1-high', icon: 'brainCircuit' },
-//   { value: 'gpt-5-codex', label: 'gpt-5-codex', icon: 'brainCircuit' },
-//   { value: 'gpt-5.1-codex', label: 'gpt-5.1-codex', icon: 'brainCircuit' },
-//   { value: 'o3', label: 'o3', icon: 'brainCircuit' },
-// ]
-
-// const ANTHROPIC_MODELS: ModelOption[] = [
-//   // Zap model (Haiku)
-//   { value: 'claude-4.5-haiku', label: 'claude-4.5-haiku', icon: 'zap' },
-//   // Brain models
-//   { value: 'claude-4-sonnet', label: 'claude-4-sonnet', icon: 'brain' },
-//   { value: 'claude-4.5-sonnet', label: 'claude-4.5-sonnet', icon: 'brain' },
-//   // BrainCircuit models
-//   { value: 'claude-4.1-opus', label: 'claude-4.1-opus', icon: 'brainCircuit' },
-// ]
-
-// const ALL_MODELS: ModelOption[] = [...OPENAI_MODELS, ...ANTHROPIC_MODELS]
-
-// // Default enabled/disabled state for all models
-// const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
-//   'gpt-4o': false,
-//   'gpt-4.1': false,
-//   'gpt-5-fast': false,
-//   'gpt-5': true,
-//   'gpt-5-medium': false,
-//   'gpt-5-high': false,
-//   'gpt-5.1-fast': false,
-//   'gpt-5.1': true,
-//   'gpt-5.1-medium': true,
-//   'gpt-5.1-high': false,
-//   'gpt-5-codex': false,
-//   'gpt-5.1-codex': true,
-//   o3: true,
-//   'claude-4-sonnet': false,
-//   'claude-4.5-haiku': true,
-//   'claude-4.5-sonnet': true,
-//   'claude-4.1-opus': true,
-// }
-
-// const getModelIcon = (iconType: 'brain' | 'brainCircuit' | 'zap') => {
-//   switch (iconType) {
-//     case 'brainCircuit':
-//       return <BrainCircuit className='h-3.5 w-3.5 text-muted-foreground' />
-//     case 'brain':
-//       return <Brain className='h-3.5 w-3.5 text-muted-foreground' />
-//     case 'zap':
-//       return <Zap className='h-3.5 w-3.5 text-muted-foreground' />
-//   }
-// }
+/**
+ * Skeleton component for loading state of copilot key items
+ */
+function CopilotKeySkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Skeleton className='h-[13px] w-[120px]' />
+      </div>
+      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
+    </div>
+  )
+}
 
+/**
+ * Copilot Keys management component for handling API keys used with the Copilot feature.
+ * Provides functionality to create, view, and delete copilot API keys.
+ */
 export function Copilot() {
-  // React Query hooks
-  const { data: keys = [] } = useCopilotKeys()
+  const { data: keys = [], isLoading } = useCopilotKeys()
   const generateKey = useGenerateCopilotKey()
   const deleteKeyMutation = useDeleteCopilotKey()
 
-  // Create flow state
   const [showNewKeyDialog, setShowNewKeyDialog] = useState(false)
   const [newKey, setNewKey] = useState<string | null>(null)
   const [copySuccess, setCopySuccess] = useState(false)
-
-  // Delete flow state
   const [deleteKey, setDeleteKey] = useState<CopilotKey | null>(null)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [deleteConfirmationKey, setDeleteConfirmationKey] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const filteredKeys = useMemo(() => {
+    if (!searchTerm.trim()) return keys
+    const term = searchTerm.toLowerCase()
+    return keys.filter((key) => key.displayKey?.toLowerCase().includes(term))
+  }, [keys, searchTerm])
 
   const onGenerate = async () => {
     try {
@@ -127,11 +78,9 @@ export function Copilot() {
   const handleDeleteKey = async () => {
     if (!deleteKey) return
     try {
-      // Close dialog and clear state immediately for optimistic update
       setShowDeleteDialog(false)
       const keyToDelete = deleteKey
       setDeleteKey(null)
-      setDeleteConfirmationKey('')
 
       await deleteKeyMutation.mutateAsync({ keyId: keyToDelete.id })
     } catch (error) {
@@ -139,97 +88,79 @@ export function Copilot() {
     }
   }
 
-  // Commented out model-related functions
-  // const toggleModel = async (modelValue: string, enabled: boolean) => {
-  //   const newModelsMap = { ...enabledModelsMap, [modelValue]: enabled }
-  //   setEnabledModelsMap(newModelsMap)
-
-  //   // Convert to array for store
-  //   const enabledArray = Object.entries(newModelsMap)
-  //     .filter(([_, isEnabled]) => isEnabled)
-  //     .map(([modelId]) => modelId)
-  //   setStoreEnabledModels(enabledArray)
-
-  //   try {
-  //     const res = await fetch('/api/copilot/user-models', {
-  //       method: 'PUT',
-  //       headers: { 'Content-Type': 'application/json' },
-  //       body: JSON.stringify({ enabledModels: newModelsMap }),
-  //     })
-
-  //     if (!res.ok) {
-  //       throw new Error('Failed to update models')
-  //     }
-  //   } catch (error) {
-  //     logger.error('Failed to update enabled models', { error })
-  //     // Revert on error
-  //     setEnabledModelsMap(enabledModelsMap)
-  //     const revertedArray = Object.entries(enabledModelsMap)
-  //       .filter(([_, isEnabled]) => isEnabled)
-  //       .map(([modelId]) => modelId)
-  //     setStoreEnabledModels(revertedArray)
-  //   }
-  // }
-
-  // const enabledCount = Object.values(enabledModelsMap).filter(Boolean).length
-  // const totalCount = ALL_MODELS.length
+  const hasKeys = keys.length > 0
+  const showEmptyState = !hasKeys
+  const showNoResults = searchTerm.trim() && filteredKeys.length === 0 && keys.length > 0
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
-          {keys.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Key" below to get started
-            </div>
-          ) : (
-            <>
-              <div className='mb-2 font-medium text-[13px] text-foreground'>Copilot API Keys</div>
-              {keys.map((key) => (
-                <div key={key.id} className='flex flex-col gap-2'>
-                  <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                    API KEY
-                  </Label>
-                  <div className='flex items-center justify-between gap-4'>
-                    <div className='flex items-center gap-3'>
-                      <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                        <code className='font-mono text-foreground text-xs'>{key.displayKey}</code>
-                      </div>
-                    </div>
-                    <div className='flex items-center gap-2'>
-                      <Button
-                        variant='ghost'
-                        onClick={() => {
-                          setDeleteKey(key)
-                          setShowDeleteDialog(true)
-                        }}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        Delete
-                      </Button>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center px-6 py-4'>
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Search Input and Create Button */}
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <Input
+              placeholder='Search keys...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
+          </div>
           <Button
             onClick={onGenerate}
-            variant='ghost'
-            disabled={generateKey.isPending}
-            className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-60'
+            variant='primary'
+            disabled={isLoading || generateKey.isPending}
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 disabled:cursor-not-allowed disabled:opacity-60'
           >
-            <Plus className='h-4 w-4 stroke-[2px]' />
-            Create Key
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            {generateKey.isPending ? 'Creating...' : 'Create'}
           </Button>
         </div>
+
+        {/* Scrollable Content */}
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {isLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <CopilotKeySkeleton />
+              <CopilotKeySkeleton />
+              <CopilotKeySkeleton />
+            </div>
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Create" above to get started
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {filteredKeys.map((key) => (
+                <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <p className='truncate text-[13px] text-[var(--text-primary)]'>
+                      {key.displayKey}
+                    </p>
+                  </div>
+                  <Button
+                    variant='ghost'
+                    className='flex-shrink-0'
+                    onClick={() => {
+                      setDeleteKey(key)
+                      setShowDeleteDialog(true)
+                    }}
+                  >
+                    Delete
+                  </Button>
+                </div>
+              ))}
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No keys found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
 
       {/* New API Key Dialog */}
@@ -243,64 +174,73 @@ export function Copilot() {
           }
         }}
       >
-        <ModalContent className='rounded-[10px] sm:max-w-md' showClose={false}>
-          <ModalHeader>
-            <ModalTitle>Your API key has been created</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Your API key has been created</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This is the only time you will see your API key.{' '}
-              <span className='font-semibold'>Copy it now and store it securely.</span>
-            </ModalDescription>
-          </ModalHeader>
+              <span className='font-semibold text-[var(--text-primary)]'>
+                Copy it now and store it securely.
+              </span>
+            </p>
 
-          {newKey && (
-            <div className='relative'>
-              <div className='flex h-9 items-center rounded-[6px] border-none bg-muted px-3 pr-10'>
-                <code className='flex-1 truncate font-mono text-foreground text-sm'>{newKey}</code>
+            {newKey && (
+              <div className='relative mt-[10px]'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {newKey}
+                  </code>
+                </div>
+                <Button
+                  variant='ghost'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  onClick={() => copyToClipboard(newKey)}
+                >
+                  {copySuccess ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy to clipboard</span>
+                </Button>
               </div>
-              <Button
-                variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-1 h-7 w-7 rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground'
-                onClick={() => copyToClipboard(newKey)}
-              >
-                {copySuccess ? <Check className='h-3.5 w-3.5' /> : <Copy className='h-3.5 w-3.5' />}
-                <span className='sr-only'>Copy to clipboard</span>
-              </Button>
-            </div>
-          )}
+            )}
+          </ModalBody>
         </ModalContent>
       </Modal>
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='rounded-[10px] sm:max-w-md' showClose={false}>
-          <ModalHeader>
-            <ModalTitle>Delete API key?</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Deleting this API key will immediately revoke access for any integrations using it.{' '}
-              <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
-            </ModalDescription>
-          </ModalHeader>
-
-          <ModalFooter className='flex'>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
             <Button
-              className='h-9 w-full rounded-[8px] bg-background text-foreground hover:bg-muted dark:bg-background dark:text-foreground dark:hover:bg-muted/80'
+              variant='default'
               onClick={() => {
                 setShowDeleteDialog(false)
                 setDeleteKey(null)
-                setDeleteConfirmationKey('')
               }}
+              disabled={deleteKeyMutation.isPending}
             >
               Cancel
             </Button>
             <Button
+              variant='primary'
               onClick={handleDeleteKey}
-              className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
+              disabled={deleteKeyMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
-              Delete
+              {deleteKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
deleted file mode 100644
index f309a725b..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Camera, Check, User, Users } from 'lucide-react'
-import Image from 'next/image'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Button, Combobox, Input, Textarea } from '@/components/emcn'
-import { AgentIcon } from '@/components/icons'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui'
-import { useSession } from '@/lib/auth/auth-client'
-import { createLogger } from '@/lib/logs/console/logger'
-import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload'
-import {
-  useCreatorProfile,
-  useOrganizations,
-  useSaveCreatorProfile,
-} from '@/hooks/queries/creator-profile'
-
-const logger = createLogger('CreatorProfile')
-
-type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
-
-const creatorProfileSchema = z.object({
-  referenceType: z.enum(['user', 'organization']),
-  referenceId: z.string().min(1, 'Reference is required'),
-  name: z.string().min(1, 'Display Name is required').max(100, 'Max 100 characters'),
-  profileImageUrl: z.string().min(1, 'Profile Picture is required'),
-  about: z.string().max(2000, 'Max 2000 characters').optional(),
-  xUrl: z.string().url().optional().or(z.literal('')),
-  linkedinUrl: z.string().url().optional().or(z.literal('')),
-  websiteUrl: z.string().url().optional().or(z.literal('')),
-  contactEmail: z.string().email().optional().or(z.literal('')),
-})
-
-type CreatorProfileFormData = z.infer<typeof creatorProfileSchema>
-
-export function CreatorProfile() {
-  const { data: session } = useSession()
-  const userId = session?.user?.id || ''
-
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: organizations = [] } = useOrganizations()
-  const { data: existingProfile } = useCreatorProfile(userId)
-  const saveProfile = useSaveCreatorProfile()
-
-  // Local UI state
-  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
-  const [uploadError, setUploadError] = useState<string | null>(null)
-
-  const form = useForm<CreatorProfileFormData>({
-    resolver: zodResolver(creatorProfileSchema),
-    defaultValues: {
-      referenceType: 'user',
-      referenceId: session?.user?.id || '',
-      name: session?.user?.name || session?.user?.email || '',
-      profileImageUrl: '',
-      about: '',
-      xUrl: '',
-      linkedinUrl: '',
-      websiteUrl: '',
-      contactEmail: '',
-    },
-  })
-
-  const profileImageUrl = form.watch('profileImageUrl')
-
-  const {
-    previewUrl: profilePictureUrl,
-    fileInputRef: profilePictureInputRef,
-    handleThumbnailClick: handleProfilePictureClick,
-    handleFileChange: handleProfilePictureChange,
-    isUploading: isUploadingProfilePicture,
-  } = useProfilePictureUpload({
-    currentImage: profileImageUrl,
-    onUpload: async (url) => {
-      form.setValue('profileImageUrl', url || '')
-      setUploadError(null)
-    },
-    onError: (error) => {
-      setUploadError(error)
-      setTimeout(() => setUploadError(null), 5000)
-    },
-  })
-
-  const referenceType = form.watch('referenceType')
-
-  // Update form when profile data loads
-  useEffect(() => {
-    if (existingProfile) {
-      const details = existingProfile.details as CreatorProfileDetails | null
-      form.reset({
-        referenceType: existingProfile.referenceType,
-        referenceId: existingProfile.referenceId,
-        name: existingProfile.name || '',
-        profileImageUrl: existingProfile.profileImageUrl || '',
-        about: details?.about || '',
-        xUrl: details?.xUrl || '',
-        linkedinUrl: details?.linkedinUrl || '',
-        websiteUrl: details?.websiteUrl || '',
-        contactEmail: details?.contactEmail || '',
-      })
-    }
-  }, [existingProfile, form])
-
-  const [saveError, setSaveError] = useState<string | null>(null)
-
-  const onSubmit = async (data: CreatorProfileFormData) => {
-    if (!userId) return
-
-    setSaveStatus('saving')
-    setSaveError(null)
-
-    try {
-      const details: CreatorProfileDetails = {}
-      if (data.about) details.about = data.about
-      if (data.xUrl) details.xUrl = data.xUrl
-      if (data.linkedinUrl) details.linkedinUrl = data.linkedinUrl
-      if (data.websiteUrl) details.websiteUrl = data.websiteUrl
-      if (data.contactEmail) details.contactEmail = data.contactEmail
-
-      await saveProfile.mutateAsync({
-        referenceType: data.referenceType,
-        referenceId: data.referenceId,
-        name: data.name,
-        profileImageUrl: data.profileImageUrl,
-        details: Object.keys(details).length > 0 ? details : undefined,
-        existingProfileId: existingProfile?.id,
-      })
-
-      setSaveStatus('saved')
-
-      // Reset to idle after 2 seconds
-      setTimeout(() => {
-        setSaveStatus('idle')
-      }, 2000)
-    } catch (error) {
-      logger.error('Error saving creator profile:', error)
-      const errorMessage = error instanceof Error ? error.message : 'Failed to save creator profile'
-      setSaveError(errorMessage)
-      setSaveStatus('idle')
-    }
-  }
-
-  return (
-    <div className='relative flex h-full flex-col'>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='flex h-full flex-col'>
-          {/* Scrollable Content */}
-          <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-            <div className='space-y-2 pt-2 pb-6'>
-              {/* Profile Type - only show if user has organizations */}
-              {organizations.length > 0 && (
-                <FormField
-                  control={form.control}
-                  name='referenceType'
-                  render={({ field }) => (
-                    <FormItem className='space-y-2'>
-                      <FormLabel className='font-[360] text-sm'>Profile Type</FormLabel>
-                      <FormControl>
-                        <div className='flex gap-2'>
-                          <Button
-                            type='button'
-                            variant={field.value === 'user' ? 'outline' : 'default'}
-                            onClick={() => field.onChange('user')}
-                            className='h-8'
-                          >
-                            <User className='mr-1.5 h-3.5 w-3.5' />
-                            Personal
-                          </Button>
-                          <Button
-                            type='button'
-                            variant={field.value === 'organization' ? 'outline' : 'default'}
-                            onClick={() => field.onChange('organization')}
-                            className='h-8'
-                          >
-                            <Users className='mr-1.5 h-3.5 w-3.5' />
-                            Organization
-                          </Button>
-                        </div>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-
-              {/* Reference Selection */}
-              {referenceType === 'organization' && organizations.length > 0 && (
-                <FormField
-                  control={form.control}
-                  name='referenceId'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='font-[360] text-sm'>Organization</FormLabel>
-                      <FormControl>
-                        <Combobox
-                          options={organizations.map((org) => ({
-                            label: org.name,
-                            value: org.id,
-                          }))}
-                          value={field.value}
-                          onChange={field.onChange}
-                          placeholder='Select organization'
-                          editable={false}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-
-              {/* Profile Name */}
-              <FormField
-                control={form.control}
-                name='name'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>
-                      Display Name <span className='text-destructive'>*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder='How your name appears on templates'
-                        {...field}
-                        className='h-9 w-full'
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Profile Picture Upload */}
-              <FormField
-                control={form.control}
-                name='profileImageUrl'
-                render={() => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>
-                      Profile Picture <span className='text-destructive'>*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <div className='flex items-center gap-3'>
-                        <div className='relative inline-block'>
-                          <div
-                            className='group relative flex h-16 w-16 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[#802FFF] transition-all hover:opacity-80'
-                            onClick={handleProfilePictureClick}
-                          >
-                            {profilePictureUrl ? (
-                              <Image
-                                src={profilePictureUrl}
-                                alt='Profile picture'
-                                width={64}
-                                height={64}
-                                className={`h-full w-full object-cover transition-opacity duration-300 ${
-                                  isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
-                                }`}
-                              />
-                            ) : (
-                              <AgentIcon className='h-8 w-8 text-white' />
-                            )}
-
-                            {/* Upload overlay */}
-                            <div
-                              className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
-                                isUploadingProfilePicture
-                                  ? 'opacity-100'
-                                  : 'opacity-0 group-hover:opacity-100'
-                              }`}
-                            >
-                              {isUploadingProfilePicture ? (
-                                <div className='h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
-                              ) : (
-                                <Camera className='h-4 w-4 text-white' />
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Hidden file input */}
-                          <Input
-                            type='file'
-                            accept='image/png,image/jpeg,image/jpg'
-                            className='hidden'
-                            ref={profilePictureInputRef}
-                            onChange={handleProfilePictureChange}
-                            disabled={isUploadingProfilePicture}
-                          />
-                        </div>
-                        <div className='flex flex-col gap-1'>
-                          {uploadError && (
-                            <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                              {uploadError}
-                            </p>
-                          )}
-                          <p className='text-muted-foreground text-xs'>PNG or JPEG (max 5MB)</p>
-                        </div>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* About */}
-              <FormField
-                control={form.control}
-                name='about'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>About</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder='Tell people about yourself or your organization'
-                        className='min-h-[120px] w-full resize-none'
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Social Links */}
-              <div className='space-y-4'>
-                <div className='font-medium text-[13px] text-foreground'>Social Links</div>
-
-                <FormField
-                  control={form.control}
-                  name='xUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        X (Twitter)
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://x.com/username'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='linkedinUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        LinkedIn
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://linkedin.com/in/username'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='websiteUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        Website
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://yourwebsite.com'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='contactEmail'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        Contact Email
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='contact@example.com'
-                          type='email'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Error Message */}
-          {saveError && (
-            <div className='px-6 pb-2'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {saveError}
-              </p>
-            </div>
-          )}
-
-          {/* Footer */}
-          <div className='bg-background'>
-            <div className='flex w-full items-center justify-between px-6 py-4'>
-              <div className='text-muted-foreground text-xs'>
-                Set up your creator profile for publishing templates
-              </div>
-              <Button type='submit' disabled={saveStatus === 'saving'} className='h-9'>
-                {saveStatus === 'saving' && (
-                  <>
-                    <div className='mr-2 h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-                    Saving...
-                  </>
-                )}
-                {saveStatus === 'saved' && (
-                  <>
-                    <Check className='mr-2 h-4 w-4' />
-                    Saved
-                  </>
-                )}
-                {saveStatus === 'idle' && (
-                  <>{existingProfile ? 'Update Profile' : 'Create Profile'}</>
-                )}
-              </Button>
-            </div>
-          </div>
-        </form>
-      </Form>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
deleted file mode 100644
index 7e1e7cdbf..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
+++ /dev/null
@@ -1,310 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { Check, ChevronDown, ExternalLink, Search } from 'lucide-react'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/emcn'
-import { Input, Label } from '@/components/ui'
-import { cn } from '@/lib/core/utils/cn'
-import { createLogger } from '@/lib/logs/console/logger'
-import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
-import {
-  type ServiceInfo,
-  useConnectOAuthService,
-  useDisconnectOAuthService,
-  useOAuthConnections,
-} from '@/hooks/queries/oauth-connections'
-
-const logger = createLogger('Credentials')
-
-interface CredentialsProps {
-  onOpenChange?: (open: boolean) => void
-  registerCloseHandler?: (handler: (open: boolean) => void) => void
-}
-
-export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsProps) {
-  const router = useRouter()
-  const searchParams = useSearchParams()
-  const pendingServiceRef = useRef<HTMLDivElement>(null)
-
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: services = [] } = useOAuthConnections()
-  const connectService = useConnectOAuthService()
-  const disconnectService = useDisconnectOAuthService()
-
-  // Local UI state
-  const [searchTerm, setSearchTerm] = useState('')
-  const [pendingService, setPendingService] = useState<string | null>(null)
-  const [authSuccess, setAuthSuccess] = useState(false)
-  const [showActionRequired, setShowActionRequired] = useState(false)
-  const prevConnectedIdsRef = useRef<Set<string>>(new Set())
-  const connectionAddedRef = useRef<boolean>(false)
-
-  // Check for OAuth callback - just show success message
-  useEffect(() => {
-    const code = searchParams.get('code')
-    const state = searchParams.get('state')
-    const error = searchParams.get('error')
-
-    if (code && state) {
-      logger.info('OAuth callback successful')
-      setAuthSuccess(true)
-
-      // Clear URL parameters without changing the page
-      const url = new URL(window.location.href)
-      url.searchParams.delete('code')
-      url.searchParams.delete('state')
-      router.replace(url.pathname + url.search)
-    } else if (error) {
-      logger.error('OAuth error:', { error })
-    }
-  }, [searchParams, router])
-
-  // Track when a new connection is added compared to previous render
-  useEffect(() => {
-    try {
-      const currentConnected = new Set<string>()
-      services.forEach((svc) => {
-        if (svc.isConnected) currentConnected.add(svc.id)
-      })
-      // Detect new connections by comparing to previous connected set
-      for (const id of currentConnected) {
-        if (!prevConnectedIdsRef.current.has(id)) {
-          connectionAddedRef.current = true
-          break
-        }
-      }
-      prevConnectedIdsRef.current = currentConnected
-    } catch {}
-  }, [services])
-
-  // On mount, register a close handler so the parent modal can delegate close events here
-  useEffect(() => {
-    if (!registerCloseHandler) return
-    const handle = (open: boolean) => {
-      if (open) return
-      try {
-        if (typeof window !== 'undefined') {
-          window.dispatchEvent(
-            new CustomEvent('oauth-integration-closed', {
-              detail: { success: connectionAddedRef.current === true },
-            })
-          )
-        }
-      } catch {}
-      onOpenChange?.(open)
-    }
-    registerCloseHandler(handle)
-  }, [registerCloseHandler, onOpenChange])
-
-  // Handle connect button click
-  const handleConnect = async (service: ServiceInfo) => {
-    try {
-      logger.info('Connecting service:', {
-        serviceId: service.id,
-        providerId: service.providerId,
-        scopes: service.scopes,
-      })
-
-      // better-auth will automatically redirect back to this URL after OAuth
-      await connectService.mutateAsync({
-        providerId: service.providerId,
-        callbackURL: window.location.href,
-      })
-    } catch (error) {
-      logger.error('OAuth connection error:', { error })
-    }
-  }
-
-  // Handle disconnect button click
-  const handleDisconnect = async (service: ServiceInfo, accountId: string) => {
-    try {
-      await disconnectService.mutateAsync({
-        provider: service.providerId.split('-')[0],
-        providerId: service.providerId,
-        serviceId: service.id,
-        accountId,
-      })
-    } catch (error) {
-      logger.error('Error disconnecting service:', { error })
-    }
-  }
-
-  // Group services by provider
-  const groupedServices = services.reduce(
-    (acc, service) => {
-      // Find the provider for this service
-      const providerKey =
-        Object.keys(OAUTH_PROVIDERS).find((key) =>
-          Object.keys(OAUTH_PROVIDERS[key].services).includes(service.id)
-        ) || 'other'
-
-      if (!acc[providerKey]) {
-        acc[providerKey] = []
-      }
-
-      acc[providerKey].push(service)
-      return acc
-    },
-    {} as Record<string, ServiceInfo[]>
-  )
-
-  // Filter services based on search term
-  const filteredGroupedServices = Object.entries(groupedServices).reduce(
-    (acc, [providerKey, providerServices]) => {
-      const filteredServices = providerServices.filter(
-        (service) =>
-          service.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          service.description.toLowerCase().includes(searchTerm.toLowerCase())
-      )
-
-      if (filteredServices.length > 0) {
-        acc[providerKey] = filteredServices
-      }
-
-      return acc
-    },
-    {} as Record<string, ServiceInfo[]>
-  )
-
-  const scrollToHighlightedService = () => {
-    if (pendingServiceRef.current) {
-      pendingServiceRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
-      })
-    }
-  }
-
-  return (
-    <div className='relative flex h-full flex-col'>
-      {/* Search Input */}
-      <div className='px-6 pt-4 pb-2'>
-        <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-          <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-          <Input
-            placeholder='Search services...'
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-          />
-        </div>
-      </div>
-
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='flex flex-col gap-6 pt-2 pb-6'>
-          {/* Success message */}
-          {authSuccess && (
-            <div className='rounded-[8px] border border-green-200 bg-green-50 p-4'>
-              <div className='flex'>
-                <div className='flex-shrink-0'>
-                  <Check className='h-5 w-5 text-green-400' />
-                </div>
-                <div className='ml-3'>
-                  <p className='font-medium text-green-800 text-sm'>
-                    Account connected successfully!
-                  </p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Pending service message - only shown when coming from OAuth required modal */}
-          {pendingService && showActionRequired && (
-            <div className='flex items-start gap-3 rounded-[8px] border border-primary/20 bg-primary/5 p-5 text-sm shadow-sm'>
-              <div className='mt-0.5 min-w-5'>
-                <ExternalLink className='h-4 w-4 text-muted-foreground' />
-              </div>
-              <div className='flex flex-1 flex-col'>
-                <p className='text-muted-foreground'>
-                  <span className='font-medium text-foreground'>Action Required:</span> Please
-                  connect your account to enable the requested features. The required service is
-                  highlighted below.
-                </p>
-                <Button
-                  variant='outline'
-                  onClick={scrollToHighlightedService}
-                  className='mt-3 flex h-8 items-center gap-1.5 self-start border-primary/20 px-3 font-medium text-muted-foreground text-sm transition-colors hover:border-primary hover:bg-primary/10 hover:text-muted-foreground'
-                >
-                  <span>Go to service</span>
-                  <ChevronDown className='h-3.5 w-3.5' />
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Services list */}
-          <div className='flex flex-col gap-6'>
-            {Object.entries(filteredGroupedServices).map(([providerKey, providerServices]) => (
-              <div key={providerKey} className='flex flex-col gap-2'>
-                <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                  {OAUTH_PROVIDERS[providerKey]?.name || 'Other Services'}
-                </Label>
-                {providerServices.map((service) => (
-                  <div
-                    key={service.id}
-                    className={cn(
-                      'flex items-center justify-between gap-4',
-                      pendingService === service.id && '-m-2 rounded-[8px] bg-primary/5 p-2'
-                    )}
-                    ref={pendingService === service.id ? pendingServiceRef : undefined}
-                  >
-                    <div className='flex items-center gap-3'>
-                      <div className='flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] bg-muted'>
-                        {typeof service.icon === 'function'
-                          ? service.icon({ className: 'h-5 w-5' })
-                          : service.icon}
-                      </div>
-                      <div className='min-w-0'>
-                        <div className='flex items-center gap-2'>
-                          <span className='font-normal text-sm'>{service.name}</span>
-                        </div>
-                        {service.accounts && service.accounts.length > 0 ? (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {service.accounts.map((a) => a.name).join(', ')}
-                          </p>
-                        ) : (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {service.description}
-                          </p>
-                        )}
-                      </div>
-                    </div>
-
-                    {service.accounts && service.accounts.length > 0 ? (
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleDisconnect(service, service.accounts![0].id)}
-                        disabled={disconnectService.isPending}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        Disconnect
-                      </Button>
-                    ) : (
-                      <Button
-                        variant='outline'
-                        onClick={() => handleConnect(service)}
-                        disabled={connectService.isPending}
-                        className='h-8'
-                      >
-                        Connect
-                      </Button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            ))}
-
-            {/* Show message when search has no results */}
-            {searchTerm.trim() && Object.keys(filteredGroupedServices).length === 0 && (
-              <div className='py-8 text-center text-muted-foreground text-sm'>
-                No services found matching "{searchTerm}"
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index c05f1b947..96d56b2bd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -3,17 +3,16 @@
 import { useState } from 'react'
 import { Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button } from '@/components/emcn'
 import {
-  Button,
-  Label,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
+} from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
+import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
@@ -22,17 +21,14 @@ const logger = createLogger('CustomToolsSettings')
 
 function CustomToolSkeleton() {
   return (
-    <div className='flex flex-col gap-2'>
-      <Skeleton className='h-4 w-32' /> {/* Tool title */}
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-24 rounded-[8px]' /> {/* Function name */}
-          <Skeleton className='h-4 w-48' /> {/* Description */}
-        </div>
-        <div className='flex items-center gap-2'>
-          <Skeleton className='h-8 w-12' /> {/* Edit button */}
-          <Skeleton className='h-8 w-16' /> {/* Delete button */}
-        </div>
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Skeleton className='h-[14px] w-[100px]' />
+        <Skeleton className='h-[13px] w-[200px]' />
+      </div>
+      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+        <Skeleton className='h-[30px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
       </div>
     </div>
   )
@@ -42,7 +38,6 @@ export function CustomTools() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
 
-  // React Query hooks
   const { data: tools = [], isLoading, error, refetch: refetchTools } = useCustomTools(workspaceId)
   const deleteToolMutation = useDeleteCustomTool()
 
@@ -107,127 +102,98 @@ export function CustomTools() {
     refetchTools()
   }
 
+  const hasTools = tools && tools.length > 0
+  const showEmptyState = !hasTools && !showAddForm && !editingTool
+  const showNoResults = searchTerm.trim() && filteredTools.length === 0 && tools.length > 0
+
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header with Search */}
-      <div className='px-6 pt-4 pb-2'>
-        {/* Search Input */}
-        {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex items-center gap-[8px]'>
+          <div
+            className={cn(
+              'flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]',
+              isLoading && 'opacity-50'
+            )}
+          >
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
             <Input
               placeholder='Search tools...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+              disabled={isLoading}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
             />
           </div>
-        )}
-      </div>
+          <Button
+            onClick={() => setShowAddForm(true)}
+            disabled={isLoading}
+            variant='primary'
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+        </div>
 
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
-          {isLoading ? (
-            <div className='space-y-2'>
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-            </div>
-          ) : error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {error ? (
+            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
               <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
                 {error instanceof Error ? error.message : 'Failed to load tools'}
               </p>
             </div>
-          ) : tools.length === 0 && !showAddForm && !editingTool ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Tool" below to get started
+          ) : isLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <CustomToolSkeleton />
+              <CustomToolSkeleton />
+              <CustomToolSkeleton />
+            </div>
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
             </div>
           ) : (
-            <>
-              <div className='space-y-2'>
-                {filteredTools.map((tool) => (
-                  <div key={tool.id} className='flex flex-col gap-2'>
-                    <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                      {tool.title}
-                    </Label>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                          <code className='font-mono text-foreground text-xs'>
-                            {tool.schema?.function?.name || 'unnamed'}
-                          </code>
-                        </div>
-                        {tool.schema?.function?.description && (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {tool.schema.function.description}
-                          </p>
-                        )}
-                      </div>
-                      <div className='flex items-center gap-2'>
-                        <Button
-                          variant='ghost'
-                          onClick={() => setEditingTool(tool.id)}
-                          className='h-8'
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          variant='ghost'
-                          onClick={() => handleDeleteClick(tool.id)}
-                          disabled={deletingTools.has(tool.id)}
-                          className='h-8'
-                        >
-                          {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
-                        </Button>
-                      </div>
-                    </div>
+            <div className='flex flex-col gap-[8px]'>
+              {filteredTools.map((tool) => (
+                <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <span className='truncate font-medium text-[14px]'>
+                      {tool.title || 'Unnamed Tool'}
+                    </span>
+                    {tool.schema?.function?.description && (
+                      <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                        {tool.schema.function.description}
+                      </p>
+                    )}
                   </div>
-                ))}
-              </div>
-
-              {/* Show message when search has no results */}
-              {searchTerm.trim() && filteredTools.length === 0 && tools.length > 0 && (
-                <div className='py-8 text-center text-muted-foreground text-sm'>
+                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                    <Button variant='ghost' onClick={() => setEditingTool(tool.id)}>
+                      Edit
+                    </Button>
+                    <Button
+                      variant='ghost'
+                      onClick={() => handleDeleteClick(tool.id)}
+                      disabled={deletingTools.has(tool.id)}
+                    >
+                      {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
+                    </Button>
+                  </div>
+                </div>
+              ))}
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
                   No tools found matching "{searchTerm}"
                 </div>
               )}
-            </>
+            </div>
           )}
         </div>
       </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
-          {isLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <div className='w-[200px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={() => setShowAddForm(true)}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                disabled={isLoading}
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Create Tool
-              </Button>
-              <div className='text-muted-foreground text-xs'>
-                Custom tools extend agent capabilities with workspace-specific functions
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Create/Edit Modal - rendered as overlay */}
       <CustomToolModal
         open={showAddForm || !!editingTool}
         onOpenChange={(open) => {
@@ -251,41 +217,30 @@ export function CustomTools() {
         }
       />
 
-      {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete custom tool?</ModalTitle>
-            <ModalDescription>
-              Deleting "{toolToDelete?.name}" will permanently remove this custom tool from your
-              workspace.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
-            </ModalDescription>
-          </ModalHeader>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Custom Tool</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{toolToDelete?.name}</span>?{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
           <ModalFooter>
-            <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
-              onClick={() => {
-                setShowDeleteDialog(false)
-                setToolToDelete(null)
-              }}
-              disabled={deleteToolMutation.isPending}
-            >
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              variant='primary'
               onClick={handleDeleteTool}
-              disabled={deleteToolMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
-              {deleteToolMutation.isPending ? 'Deleting...' : 'Delete'}
+              Delete
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
index cf9066429..f1229c739 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
@@ -1,18 +1,17 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Plus, Search, Share2 } from 'lucide-react'
+import { Plus, Search, Share2, Undo2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button, Input as EmcnInput, Tooltip } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-  Tooltip,
-} from '@/components/emcn'
+} from '@/components/emcn/components/modal/modal'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -26,8 +25,14 @@ import {
 
 const logger = createLogger('EnvironmentVariables')
 
-const GRID_COLS = 'grid grid-cols-[minmax(0,1fr),minmax(0,1fr),88px] gap-4'
+const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-center'
+const ENV_VAR_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/
+const PRIMARY_BUTTON_STYLES =
+  '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
 
+/**
+ * Generates a unique row identifier by combining timestamp with an incrementing counter
+ */
 const generateRowId = (() => {
   let counter = 0
   return () => {
@@ -36,31 +41,123 @@ const generateRowId = (() => {
   }
 })()
 
+/**
+ * Creates a new empty environment variable with a unique ID
+ */
 const createEmptyEnvVar = (): UIEnvironmentVariable => ({
   key: '',
   value: '',
   id: generateRowId(),
 })
 
+/**
+ * Represents an environment variable in the UI with optional ID for tracking
+ */
 interface UIEnvironmentVariable {
   key: string
   value: string
   id?: number
 }
 
+/**
+ * Props for the EnvironmentVariables component
+ */
 interface EnvironmentVariablesProps {
-  onOpenChange: (open: boolean) => void
-  registerCloseHandler?: (handler: (open: boolean) => void) => void
+  /** Callback to register a handler that intercepts navigation away from this section */
+  registerBeforeLeaveHandler?: (handler: (onProceed: () => void) => void) => void
 }
 
-export function EnvironmentVariables({
-  onOpenChange,
-  registerCloseHandler,
-}: EnvironmentVariablesProps) {
+/**
+ * Props for the WorkspaceVariableRow component
+ */
+interface WorkspaceVariableRowProps {
+  envKey: string
+  value: string
+  renamingKey: string | null
+  pendingKeyValue: string
+  isNewlyPromoted: boolean
+  onRenameStart: (key: string) => void
+  onPendingKeyChange: (value: string) => void
+  onRenameEnd: (key: string, value: string) => void
+  onDelete: (key: string) => void
+  onDemote: (key: string, value: string) => void
+}
+
+/**
+ * Renders a single workspace environment variable row with edit and delete capabilities
+ */
+function WorkspaceVariableRow({
+  envKey,
+  value,
+  renamingKey,
+  pendingKeyValue,
+  isNewlyPromoted,
+  onRenameStart,
+  onPendingKeyChange,
+  onRenameEnd,
+  onDelete,
+  onDemote,
+}: WorkspaceVariableRowProps) {
+  return (
+    <div className={GRID_COLS}>
+      <EmcnInput
+        value={renamingKey === envKey ? pendingKeyValue : envKey}
+        onChange={(e) => {
+          if (renamingKey !== envKey) onRenameStart(envKey)
+          onPendingKeyChange(e.target.value)
+        }}
+        onBlur={() => onRenameEnd(envKey, value)}
+        name={`workspace_env_key_${envKey}_${Math.random()}`}
+        autoComplete='off'
+        autoCapitalize='off'
+        spellCheck='false'
+        readOnly
+        onFocus={(e) => e.target.removeAttribute('readOnly')}
+        className='h-9'
+      />
+      <div />
+      <EmcnInput
+        value={value ? '•'.repeat(value.length) : ''}
+        readOnly
+        autoComplete='off'
+        autoCorrect='off'
+        autoCapitalize='off'
+        spellCheck='false'
+        className='h-9'
+      />
+      <div className='ml-[8px] flex'>
+        {isNewlyPromoted && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button variant='ghost' onClick={() => onDemote(envKey, value)} className='h-9 w-9'>
+                <Undo2 className='h-3.5 w-3.5' />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Scope: workspace</Tooltip.Content>
+          </Tooltip.Root>
+        )}
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button variant='ghost' onClick={() => onDelete(envKey)} className='h-9 w-9'>
+              <Trash />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Delete environment variable</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Environment Variables management component for handling personal and workspace-scoped variables.
+ * Provides functionality to create, edit, delete, and share environment variables between
+ * personal and workspace scopes with conflict detection.
+ */
+export function EnvironmentVariables({ registerBeforeLeaveHandler }: EnvironmentVariablesProps) {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
 
-  // React Query hooks
   const { data: personalEnvData, isLoading: isPersonalLoading } = usePersonalEnvironment()
   const { data: workspaceEnvData, isLoading: isWorkspaceLoading } = useWorkspaceEnvironment(
     workspaceId,
@@ -80,7 +177,7 @@ export function EnvironmentVariables({
   const removeWorkspaceMutation = useRemoveWorkspaceEnvironment()
 
   const isLoading = isPersonalLoading || isWorkspaceLoading
-  const variables = personalEnvData || {}
+  const variables = useMemo(() => personalEnvData || {}, [personalEnvData])
 
   const [envVars, setEnvVars] = useState<UIEnvironmentVariable[]>([])
   const [searchTerm, setSearchTerm] = useState('')
@@ -91,20 +188,20 @@ export function EnvironmentVariables({
   const [conflicts, setConflicts] = useState<string[]>([])
   const [renamingKey, setRenamingKey] = useState<string | null>(null)
   const [pendingKeyValue, setPendingKeyValue] = useState<string>('')
-  const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
+  const [changeToken, setChangeToken] = useState(0)
 
+  const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
   const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const pendingClose = useRef(false)
+  const pendingProceedCallback = useRef<(() => void) | null>(null)
   const initialVarsRef = useRef<UIEnvironmentVariable[]>([])
+  const hasChangesRef = useRef(false)
+  const hasSavedRef = useRef(false)
 
   const filteredEnvVars = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
-    }
-
-    return envVars
-      .map((envVar, index) => ({ envVar, originalIndex: index }))
-      .filter(({ envVar }) => envVar.key.toLowerCase().includes(searchTerm.toLowerCase()))
+    const mapped = envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
+    if (!searchTerm.trim()) return mapped
+    const term = searchTerm.toLowerCase()
+    return mapped.filter(({ envVar }) => envVar.key.toLowerCase().includes(term))
   }, [envVars, searchTerm])
 
   const filteredWorkspaceEntries = useMemo(() => {
@@ -114,23 +211,16 @@ export function EnvironmentVariables({
     return entries.filter(([key]) => key.toLowerCase().includes(term))
   }, [workspaceVars, searchTerm])
 
-  const personalHeaderMarginClass = useMemo(() => {
-    if (!searchTerm.trim()) return 'mt-8'
-    return filteredWorkspaceEntries.length > 0 ? 'mt-8' : 'mt-0'
-  }, [searchTerm, filteredWorkspaceEntries])
-
   const hasChanges = useMemo(() => {
     const initialVars = initialVarsRef.current.filter((v) => v.key || v.value)
     const currentVars = envVars.filter((v) => v.key || v.value)
-
     const initialMap = new Map(initialVars.map((v) => [v.key, v.value]))
     const currentMap = new Map(currentVars.map((v) => [v.key, v.value]))
 
     if (initialMap.size !== currentMap.size) return true
 
     for (const [key, value] of currentMap) {
-      const initialValue = initialMap.get(key)
-      if (initialValue !== value) return true
+      if (initialMap.get(key) !== value) return true
     }
 
     for (const key of initialMap.keys()) {
@@ -139,41 +229,42 @@ export function EnvironmentVariables({
 
     const before = initialWorkspaceVarsRef.current
     const after = workspaceVars
-    const beforeKeys = Object.keys(before)
-    const afterKeys = Object.keys(after)
-    if (beforeKeys.length !== afterKeys.length) return true
-    for (const key of new Set([...beforeKeys, ...afterKeys])) {
+    const allKeys = new Set([...Object.keys(before), ...Object.keys(after)])
+
+    if (Object.keys(before).length !== Object.keys(after).length) return true
+
+    for (const key of allKeys) {
       if (before[key] !== after[key]) return true
     }
 
     return false
-  }, [envVars, workspaceVars])
+  }, [envVars, workspaceVars, changeToken])
 
   const hasConflicts = useMemo(() => {
     return envVars.some((envVar) => !!envVar.key && Object.hasOwn(workspaceVars, envVar.key))
   }, [envVars, workspaceVars])
 
-  // Use ref to track hasChanges to break dependency chain
-  const hasChangesRef = useRef(false)
-
   useEffect(() => {
     hasChangesRef.current = hasChanges
   }, [hasChanges])
 
-  // Memoize handleModalClose to prevent infinite loops
-  const handleModalClose = useCallback(
-    (open: boolean) => {
-      if (!open && hasChangesRef.current) {
-        setShowUnsavedChanges(true)
-        pendingClose.current = true
-      } else {
-        onOpenChange(open)
-      }
-    },
-    [onOpenChange]
-  )
+  /**
+   * Handles navigation attempts away from this section.
+   * Shows unsaved changes modal if there are changes, otherwise proceeds immediately.
+   */
+  const handleBeforeLeave = useCallback((onProceed: () => void) => {
+    if (hasChangesRef.current) {
+      setShowUnsavedChanges(true)
+      pendingProceedCallback.current = onProceed
+    } else {
+      onProceed()
+    }
+  }, [])
 
   useEffect(() => {
+    // Skip sync from server after a save - we already have correct local state
+    if (hasSavedRef.current) return
+
     const existingVars = Object.values(variables)
     const initialVars = existingVars.length
       ? existingVars.map((envVar) => ({
@@ -183,23 +274,29 @@ export function EnvironmentVariables({
       : [createEmptyEnvVar()]
     initialVarsRef.current = JSON.parse(JSON.stringify(initialVars))
     setEnvVars(JSON.parse(JSON.stringify(initialVars)))
-    pendingClose.current = false
+    pendingProceedCallback.current = null
   }, [variables])
 
   useEffect(() => {
     if (workspaceEnvData) {
-      setWorkspaceVars(workspaceEnvData?.workspace || {})
-      initialWorkspaceVarsRef.current = workspaceEnvData?.workspace || {}
-      setConflicts(workspaceEnvData?.conflicts || [])
+      if (hasSavedRef.current) {
+        // After a save, only update conflicts - refs were already set optimistically
+        setConflicts(workspaceEnvData?.conflicts || [])
+        hasSavedRef.current = false
+      } else {
+        setWorkspaceVars(workspaceEnvData?.workspace || {})
+        initialWorkspaceVarsRef.current = workspaceEnvData?.workspace || {}
+        setConflicts(workspaceEnvData?.conflicts || [])
+      }
     }
   }, [workspaceEnvData])
 
-  // Register the close handler - now with stable dependencies
+  // Register the before-leave handler
   useEffect(() => {
-    if (registerCloseHandler) {
-      registerCloseHandler(handleModalClose)
+    if (registerBeforeLeaveHandler) {
+      registerBeforeLeaveHandler(handleBeforeLeave)
     }
-  }, [registerCloseHandler, handleModalClose])
+  }, [registerBeforeLeaveHandler, handleBeforeLeave])
 
   useEffect(() => {
     if (shouldScrollToBottom && scrollContainerRef.current) {
@@ -243,133 +340,166 @@ export function EnvironmentVariables({
     },
     [pendingKeyValue, renamingKey]
   )
-  const addEnvVar = () => {
-    const newVar = createEmptyEnvVar()
-    setEnvVars([...envVars, newVar])
+
+  const handleDeleteWorkspaceVar = useCallback((key: string) => {
+    setWorkspaceVars((prev) => {
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+  }, [])
+
+  const addEnvVar = useCallback(() => {
+    setEnvVars((prev) => [...prev, createEmptyEnvVar()])
     setSearchTerm('')
     setShouldScrollToBottom(true)
-  }
+  }, [])
 
-  const updateEnvVar = (index: number, field: 'key' | 'value', value: string) => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index][field] = value
-    setEnvVars(newEnvVars)
-  }
+  const updateEnvVar = useCallback((index: number, field: 'key' | 'value', value: string) => {
+    setEnvVars((prev) => {
+      const newEnvVars = [...prev]
+      newEnvVars[index][field] = value
+      return newEnvVars
+    })
+  }, [])
 
-  const removeEnvVar = (index: number) => {
-    const newEnvVars = envVars.filter((_, i) => i !== index)
-    setEnvVars(newEnvVars.length ? newEnvVars : [createEmptyEnvVar()])
-  }
+  const removeEnvVar = useCallback((index: number) => {
+    setEnvVars((prev) => {
+      const newEnvVars = prev.filter((_, i) => i !== index)
+      return newEnvVars.length ? newEnvVars : [createEmptyEnvVar()]
+    })
+  }, [])
 
-  const handleValueFocus = (index: number, e: React.FocusEvent<HTMLInputElement>) => {
+  const handleValueFocus = useCallback((index: number, e: React.FocusEvent<HTMLInputElement>) => {
     setFocusedValueIndex(index)
     e.target.scrollLeft = 0
-  }
+  }, [])
 
-  const handleValueClick = (e: React.MouseEvent<HTMLInputElement>) => {
+  const handleValueClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
     e.preventDefault()
     e.currentTarget.scrollLeft = 0
-  }
+  }, [])
 
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
-    const text = e.clipboardData.getData('text').trim()
-    if (!text) return
+  /**
+   * Parses a single line to extract environment variable key-value pair
+   */
+  const parseEnvVarLine = useCallback((line: string): UIEnvironmentVariable | null => {
+    const equalIndex = line.indexOf('=')
+    if (equalIndex === -1 || equalIndex === 0) return null
 
-    const lines = text.split('\n').filter((line) => line.trim())
-    if (lines.length === 0) return
+    const potentialKey = line.substring(0, equalIndex).trim()
+    if (!ENV_VAR_PATTERN.test(potentialKey)) return null
 
-    e.preventDefault()
+    const value = line.substring(equalIndex + 1).trim()
+    return { key: potentialKey, value, id: generateRowId() }
+  }, [])
 
-    const inputType = (e.target as HTMLInputElement).getAttribute('data-input-type') as
-      | 'key'
-      | 'value'
-
-    if (inputType) {
-      const hasValidEnvVarPattern = lines.some((line) => {
-        const equalIndex = line.indexOf('=')
-        if (equalIndex === -1 || equalIndex === 0) return false
-
-        const potentialKey = line.substring(0, equalIndex).trim()
-        const envVarPattern = /^[A-Za-z_][A-Za-z0-9_]*$/
-        return envVarPattern.test(potentialKey)
+  /**
+   * Handles pasting a single value into a specific field
+   */
+  const handleSingleValuePaste = useCallback(
+    (text: string, index: number, inputType: 'key' | 'value') => {
+      setEnvVars((prev) => {
+        const newEnvVars = [...prev]
+        newEnvVars[index][inputType] = text
+        return newEnvVars
       })
+    },
+    []
+  )
 
-      if (!hasValidEnvVarPattern) {
-        handleSingleValuePaste(text, index, inputType)
-        return
+  /**
+   * Handles pasting multiple key=value pairs
+   */
+  const handleKeyValuePaste = useCallback(
+    (lines: string[]) => {
+      const parsedVars = lines
+        .map(parseEnvVarLine)
+        .filter((parsed): parsed is UIEnvironmentVariable => parsed !== null)
+        .filter(({ key, value }) => key && value)
+
+      if (parsedVars.length > 0) {
+        setEnvVars((prev) => {
+          const existingVars = prev.filter((v) => v.key || v.value)
+          return [...existingVars, ...parsedVars]
+        })
+        setShouldScrollToBottom(true)
       }
-    }
+    },
+    [parseEnvVarLine]
+  )
 
-    handleKeyValuePaste(lines)
-  }
+  /**
+   * Handles paste events for environment variable inputs with smart detection
+   * of key=value pairs vs single values
+   */
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
+      const text = e.clipboardData.getData('text').trim()
+      if (!text) return
 
-  const handleSingleValuePaste = (text: string, index: number, inputType: 'key' | 'value') => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index][inputType] = text
-    setEnvVars(newEnvVars)
-  }
+      const lines = text.split('\n').filter((line) => line.trim())
+      if (lines.length === 0) return
 
-  const handleKeyValuePaste = (lines: string[]) => {
-    const parsedVars = lines
-      .map((line) => {
-        const equalIndex = line.indexOf('=')
+      e.preventDefault()
 
-        if (equalIndex === -1 || equalIndex === 0) {
-          return null
+      const inputType = (e.target as HTMLInputElement).getAttribute('data-input-type') as
+        | 'key'
+        | 'value'
+
+      if (inputType) {
+        const hasValidEnvVarPattern = lines.some((line) => parseEnvVarLine(line) !== null)
+        if (!hasValidEnvVarPattern) {
+          handleSingleValuePaste(text, index, inputType)
+          return
         }
+      }
 
-        const potentialKey = line.substring(0, equalIndex).trim()
+      handleKeyValuePaste(lines)
+    },
+    [parseEnvVarLine, handleSingleValuePaste, handleKeyValuePaste]
+  )
 
-        const envVarPattern = /^[A-Za-z_][A-Za-z0-9_]*$/
-
-        if (!envVarPattern.test(potentialKey)) {
-          return null
-        }
-
-        const key = potentialKey
-        const value = line.substring(equalIndex + 1).trim()
-
-        return {
-          key,
-          value,
-          id: generateRowId(),
-        }
-      })
-      .filter((parsed): parsed is NonNullable<typeof parsed> => parsed !== null)
-      .filter(({ key, value }) => key && value)
-
-    if (parsedVars.length > 0) {
-      const existingVars = envVars.filter((v) => v.key || v.value)
-      setEnvVars([...existingVars, ...parsedVars])
-      setShouldScrollToBottom(true)
-    }
-  }
-
-  const handleCancel = () => {
+  /**
+   * Discards all changes and reverts to initial state
+   */
+  const handleCancel = useCallback(() => {
     setEnvVars(JSON.parse(JSON.stringify(initialVarsRef.current)))
+    setWorkspaceVars({ ...initialWorkspaceVarsRef.current })
     setShowUnsavedChanges(false)
-    if (pendingClose.current) {
-      onOpenChange(false)
-    }
-  }
 
-  const handleSave = async () => {
+    pendingProceedCallback.current?.()
+    pendingProceedCallback.current = null
+  }, [])
+
+  /**
+   * Saves all personal and workspace environment variables with optimistic updates
+   */
+  const handleSave = useCallback(async () => {
+    const onProceed = pendingProceedCallback.current
+
+    // Save previous state for rollback on error
+    const prevInitialVars = [...initialVarsRef.current]
+    const prevInitialWorkspaceVars = { ...initialWorkspaceVarsRef.current }
+
     try {
       setShowUnsavedChanges(false)
-      onOpenChange(false)
+      hasSavedRef.current = true
+
+      // Optimistically update refs to mark current state as "saved"
+      initialWorkspaceVarsRef.current = { ...workspaceVars }
+      initialVarsRef.current = JSON.parse(JSON.stringify(envVars.filter((v) => v.key && v.value)))
+
+      // Force recomputation of change tracking based on updated baselines
+      setChangeToken((prev) => prev + 1)
 
       const validVariables = envVars
         .filter((v) => v.key && v.value)
-        .reduce(
-          (acc, { key, value }) => ({
-            ...acc,
-            [key]: value,
-          }),
-          {}
-        )
+        .reduce<Record<string, string>>((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
       await savePersonalMutation.mutateAsync({ variables: validVariables })
 
-      const before = initialWorkspaceVarsRef.current
+      const before = prevInitialWorkspaceVars
       const after = workspaceVars
       const toUpsert: Record<string, string> = {}
       const toDelete: string[] = []
@@ -379,6 +509,7 @@ export function EnvironmentVariables({
           toUpsert[k] = v
         }
       }
+
       for (const k of Object.keys(before)) {
         if (!(k in after)) toDelete.push(k)
       }
@@ -392,140 +523,192 @@ export function EnvironmentVariables({
         }
       }
 
-      initialWorkspaceVarsRef.current = { ...workspaceVars }
+      onProceed?.()
+      pendingProceedCallback.current = null
     } catch (error) {
+      // Rollback optimistic updates on error
+      hasSavedRef.current = false
+      initialVarsRef.current = prevInitialVars
+      initialWorkspaceVarsRef.current = prevInitialWorkspaceVars
       logger.error('Failed to save environment variables:', error)
     }
-  }
+  }, [
+    envVars,
+    workspaceVars,
+    workspaceId,
+    savePersonalMutation,
+    upsertWorkspaceMutation,
+    removeWorkspaceMutation,
+  ])
 
-  const renderEnvVarRow = (envVar: UIEnvironmentVariable, originalIndex: number) => {
-    const isConflict = !!envVar.key && Object.hasOwn(workspaceVars, envVar.key)
-    return (
-      <>
-        <div className={`${GRID_COLS} items-center`}>
-          <Input
-            data-input-type='key'
-            value={envVar.key}
-            onChange={(e) => updateEnvVar(originalIndex, 'key', e.target.value)}
-            onPaste={(e) => handlePaste(e, originalIndex)}
-            placeholder='API_KEY'
-            name={`env_variable_name_${envVar.id || originalIndex}_${Math.random()}`}
-            autoComplete='off'
-            autoCapitalize='off'
-            spellCheck='false'
-            readOnly
-            onFocus={(e) => e.target.removeAttribute('readOnly')}
-            className={`h-9 rounded-[8px] border-none px-3 font-normal text-sm ring-0 ring-offset-0 placeholder:text-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${isConflict ? 'border border-red-500 bg-[#F6D2D2] outline-none ring-0 disabled:bg-[#F6D2D2] disabled:opacity-100 dark:bg-[#442929] disabled:dark:bg-[#442929]' : 'bg-muted'}`}
-          />
-          <Input
-            data-input-type='value'
-            value={envVar.value}
-            onChange={(e) => updateEnvVar(originalIndex, 'value', e.target.value)}
-            type='text'
-            onFocus={(e) => {
-              if (!isConflict) {
-                e.target.removeAttribute('readOnly')
-                handleValueFocus(originalIndex, e)
-              }
-            }}
-            onClick={handleValueClick}
-            onBlur={() => setFocusedValueIndex(null)}
-            onPaste={(e) => handlePaste(e, originalIndex)}
-            placeholder={isConflict ? 'Workspace override active' : 'Enter value'}
-            disabled={isConflict}
-            aria-disabled={isConflict}
-            name={`env_variable_value_${envVar.id || originalIndex}_${Math.random()}`}
-            autoComplete='off'
-            autoCapitalize='off'
-            spellCheck='false'
-            readOnly={isConflict}
-            style={
-              focusedValueIndex !== originalIndex && !isConflict
-                ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                : undefined
-            }
-            className={`allow-scroll h-9 rounded-[8px] border-none px-3 font-normal text-sm ring-0 ring-offset-0 placeholder:text-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${isConflict ? 'cursor-not-allowed border border-red-500 bg-[#F6D2D2] outline-none ring-0 disabled:bg-[#F6D2D2] disabled:opacity-100 dark:bg-[#442929] disabled:dark:bg-[#442929]' : 'bg-muted'}`}
-          />
-          <div className='flex items-center justify-end gap-2'>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  disabled={!envVar.key || !envVar.value || isConflict || !workspaceId}
-                  onClick={() => {
-                    if (!envVar.key || !envVar.value || !workspaceId) return
-                    setWorkspaceVars((prev) => ({ ...prev, [envVar.key]: envVar.value }))
-                    setEnvVars((prev) => {
-                      const filtered = prev.filter((entry) => entry !== envVar)
-                      return filtered.length ? filtered : [createEmptyEnvVar()]
-                    })
-                  }}
-                  className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                >
-                  <Share2 className='h-4 w-4' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Make it workspace scoped</Tooltip.Content>
-            </Tooltip.Root>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  onClick={() => removeEnvVar(originalIndex)}
-                  className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                >
-                  ×
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Delete environment variable</Tooltip.Content>
-            </Tooltip.Root>
+  /**
+   * Promotes a personal environment variable to workspace scope
+   */
+  const promoteToWorkspace = useCallback(
+    (envVar: UIEnvironmentVariable) => {
+      if (!envVar.key || !envVar.value || !workspaceId) return
+      setWorkspaceVars((prev) => ({ ...prev, [envVar.key]: envVar.value }))
+      setEnvVars((prev) => {
+        const filtered = prev.filter((entry) => entry !== envVar)
+        return filtered.length ? filtered : [createEmptyEnvVar()]
+      })
+    },
+    [workspaceId]
+  )
+
+  /**
+   * Demotes a newly promoted workspace variable back to personal scope.
+   * Only works for variables that were promoted during this session (before save).
+   */
+  const demoteToPersonal = useCallback((key: string, value: string) => {
+    if (!key) return
+    setWorkspaceVars((prev) => {
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+    setEnvVars((prev) => [...prev, { key, value, id: generateRowId() }])
+  }, [])
+
+  const conflictClassName = 'border-[var(--text-error)] bg-[#F6D2D2] dark:bg-[#442929]'
+
+  /**
+   * Renders a single personal environment variable row with conflict detection
+   */
+  const renderEnvVarRow = useCallback(
+    (envVar: UIEnvironmentVariable, originalIndex: number) => {
+      const isConflict = !!envVar.key && Object.hasOwn(workspaceVars, envVar.key)
+      const maskedValueStyle =
+        focusedValueIndex !== originalIndex && !isConflict
+          ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
+          : undefined
+
+      return (
+        <>
+          <div className={GRID_COLS}>
+            <EmcnInput
+              data-input-type='key'
+              value={envVar.key}
+              onChange={(e) => updateEnvVar(originalIndex, 'key', e.target.value)}
+              onPaste={(e) => handlePaste(e, originalIndex)}
+              placeholder='API_KEY'
+              name={`env_variable_name_${envVar.id || originalIndex}_${Math.random()}`}
+              autoComplete='off'
+              autoCapitalize='off'
+              spellCheck='false'
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              className={`h-9 ${isConflict ? conflictClassName : ''}`}
+            />
+            <div />
+            <EmcnInput
+              data-input-type='value'
+              value={envVar.value}
+              onChange={(e) => updateEnvVar(originalIndex, 'value', e.target.value)}
+              type='text'
+              onFocus={(e) => {
+                if (!isConflict) {
+                  e.target.removeAttribute('readOnly')
+                  handleValueFocus(originalIndex, e)
+                }
+              }}
+              onClick={handleValueClick}
+              onBlur={() => setFocusedValueIndex(null)}
+              onPaste={(e) => handlePaste(e, originalIndex)}
+              placeholder={isConflict ? 'Workspace override active' : 'Enter value'}
+              disabled={isConflict}
+              aria-disabled={isConflict}
+              name={`env_variable_value_${envVar.id || originalIndex}_${Math.random()}`}
+              autoComplete='off'
+              autoCapitalize='off'
+              spellCheck='false'
+              readOnly={isConflict}
+              style={maskedValueStyle}
+              className={`h-9 ${isConflict ? `cursor-not-allowed ${conflictClassName}` : ''}`}
+            />
+            <div className='ml-[8px] flex items-center'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    disabled={!envVar.key || !envVar.value || isConflict || !workspaceId}
+                    onClick={() => promoteToWorkspace(envVar)}
+                    className='h-9 w-9'
+                  >
+                    <Share2 className='h-3.5 w-3.5' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>Scope: personal</Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={() => removeEnvVar(originalIndex)}
+                    className='h-9 w-9'
+                  >
+                    <Trash />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>Delete environment variable</Tooltip.Content>
+              </Tooltip.Root>
+            </div>
           </div>
-        </div>
-        {isConflict && (
-          <div className='col-span-3 mt-1 text-[#DC2626] text-[12px] leading-tight dark:text-[#F87171]'>
-            Workspace variable with the same name overrides this. Rename your personal key to use
-            it.
-          </div>
-        )}
-      </>
-    )
-  }
+          {isConflict && (
+            <div className='col-span-3 mt-[4px] text-[12px] text-[var(--text-error)] leading-tight'>
+              Workspace variable with the same name overrides this. Rename your personal key to use
+              it.
+            </div>
+          )}
+        </>
+      )
+    },
+    [
+      workspaceVars,
+      workspaceId,
+      focusedValueIndex,
+      updateEnvVar,
+      handlePaste,
+      handleValueFocus,
+      handleValueClick,
+      promoteToWorkspace,
+      removeEnvVar,
+    ]
+  )
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Hidden dummy inputs to prevent browser password manager autofill */}
-      <input
-        type='text'
-        name='fakeusernameremembered'
-        autoComplete='username'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='password'
-        name='fakepasswordremembered'
-        autoComplete='current-password'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='email'
-        name='fakeemailremembered'
-        autoComplete='email'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      {/* Fixed Header */}
-      <div className='px-6 pt-4 pb-2'>
-        {/* Search Input */}
-        {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Hidden inputs to prevent browser password manager autofill interference */}
+        <div className='hidden'>
+          <input
+            type='text'
+            name='fakeusernameremembered'
+            autoComplete='username'
+            tabIndex={-1}
+            readOnly
+          />
+          <input
+            type='password'
+            name='fakepasswordremembered'
+            autoComplete='current-password'
+            tabIndex={-1}
+            readOnly
+          />
+          <input
+            type='email'
+            name='fakeemailremembered'
+            autoComplete='email'
+            tabIndex={-1}
+            readOnly
+          />
+        </div>
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
             <Input
               placeholder='Search variables...'
               value={searchTerm}
@@ -536,216 +719,134 @@ export function EnvironmentVariables({
               spellCheck='false'
               readOnly
               onFocus={(e) => e.target.removeAttribute('readOnly')}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
-        )}
-      </div>
+          <Button
+            onClick={addEnvVar}
+            variant='primary'
+            disabled={isLoading}
+            className={PRIMARY_BUTTON_STYLES}
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                onClick={handleSave}
+                disabled={isLoading || !hasChanges || hasConflicts}
+                variant='primary'
+                className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
+              >
+                Save
+              </Button>
+            </Tooltip.Trigger>
+            {hasConflicts && <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>}
+          </Tooltip.Root>
+        </div>
 
-      {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
-          {isLoading ? (
-            <>
-              {/* Show 3 skeleton rows */}
-              {[1, 2, 3].map((index) => (
-                <div key={index} className={`${GRID_COLS} items-center`}>
-                  <Skeleton className='h-9 rounded-[8px]' />
-                  <Skeleton className='h-9 rounded-[8px]' />
-                  <Skeleton className='h-9 w-9 rounded-[8px]' />
+        {/* Scrollable Content */}
+        <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {isLoading ? (
+              <>
+                <div className='flex flex-col gap-[8px]'>
+                  <Skeleton className='h-[14px] w-[70px]' />
+                  <div className='text-[13px] text-[var(--text-muted)]'>
+                    <Skeleton className='h-[13px] w-[160px]' />
+                  </div>
                 </div>
-              ))}
-            </>
-          ) : (
-            <>
-              {/* Workspace section */}
-              {!searchTerm.trim() ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {Object.keys(workspaceVars).length === 0 ? (
-                    <div className='text-muted-foreground text-sm'>No workspace variables yet.</div>
-                  ) : (
-                    Object.entries(workspaceVars).map(([key, value]) => (
-                      <div key={key} className={`${GRID_COLS} items-center`}>
-                        <Input
-                          value={renamingKey === key ? pendingKeyValue : key}
-                          onChange={(e) => {
-                            if (renamingKey !== key) setRenamingKey(key)
-                            setPendingKeyValue(e.target.value)
-                          }}
-                          onBlur={() => handleWorkspaceKeyRename(key, value)}
-                          name={`workspace_env_key_${key}_${Math.random()}`}
-                          autoComplete='off'
-                          autoCapitalize='off'
-                          spellCheck='false'
-                          readOnly
-                          onFocus={(e) => e.target.removeAttribute('readOnly')}
-                          className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                        />
-                        <Input
-                          value={value ? '•'.repeat(value.length) : ''}
-                          readOnly
-                          autoComplete='off'
-                          autoCorrect='off'
-                          autoCapitalize='off'
-                          spellCheck='false'
-                          className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                        />
-                        <div className='flex justify-end'>
-                          <Tooltip.Root>
-                            <Tooltip.Trigger asChild>
-                              <Button
-                                variant='ghost'
-                                onClick={() => {
-                                  setWorkspaceVars((prev) => {
-                                    const next = { ...prev }
-                                    delete next[key]
-                                    return next
-                                  })
-                                }}
-                                className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                              >
-                                ×
-                              </Button>
-                            </Tooltip.Trigger>
-                            <Tooltip.Content>Delete environment variable</Tooltip.Content>
-                          </Tooltip.Root>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              ) : filteredWorkspaceEntries.length > 0 ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {filteredWorkspaceEntries.map(([key, value]) => (
-                    <div key={key} className={`${GRID_COLS} items-center`}>
-                      <Input
-                        value={renamingKey === key ? pendingKeyValue : key}
-                        onChange={(e) => {
-                          if (renamingKey !== key) setRenamingKey(key)
-                          setPendingKeyValue(e.target.value)
-                        }}
-                        onBlur={() => handleWorkspaceKeyRename(key, value)}
-                        name={`workspace_env_key_filtered_${key}_${Math.random()}`}
-                        autoComplete='off'
-                        autoCapitalize='off'
-                        spellCheck='false'
-                        readOnly
-                        onFocus={(e) => e.target.removeAttribute('readOnly')}
-                        className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                      />
-                      <Input
-                        value={value ? '•'.repeat(value.length) : ''}
-                        readOnly
-                        autoComplete='off'
-                        autoCorrect='off'
-                        autoCapitalize='off'
-                        spellCheck='false'
-                        className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                      />
-                      <div className='flex justify-end'>
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              variant='ghost'
-                              onClick={() => {
-                                setWorkspaceVars((prev) => {
-                                  const next = { ...prev }
-                                  delete next[key]
-                                  return next
-                                })
-                              }}
-                              className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                            >
-                              ×
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content>Delete environment variable</Tooltip.Content>
-                        </Tooltip.Root>
+                <div className='flex flex-col gap-[8px]'>
+                  <Skeleton className='h-[14px] w-[55px]' />
+                  {Array.from({ length: 2 }, (_, i) => (
+                    <div key={`personal-${i}`} className={GRID_COLS}>
+                      <Skeleton className='h-9 rounded-[6px]' />
+                      <div />
+                      <Skeleton className='h-9 rounded-[6px]' />
+                      <div className='ml-[8px] flex items-center gap-0'>
+                        <Skeleton className='h-9 w-9 rounded-[6px]' />
+                        <Skeleton className='h-9 w-9 rounded-[6px]' />
                       </div>
                     </div>
                   ))}
                 </div>
-              ) : null}
-
-              {/* Personal section */}
-              <div
-                className={`${personalHeaderMarginClass} mb-2 font-medium text-[13px] text-foreground`}
-              >
-                {' '}
-                Personal{' '}
-              </div>
-              {filteredEnvVars.map(({ envVar, originalIndex }) => (
-                <div key={envVar.id || originalIndex}>{renderEnvVarRow(envVar, originalIndex)}</div>
-              ))}
-              {/* Show message when search has no results across both sections */}
-              {searchTerm.trim() &&
-                filteredEnvVars.length === 0 &&
-                filteredWorkspaceEntries.length === 0 &&
-                (envVars.length > 0 || Object.keys(workspaceVars).length > 0) && (
-                  <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-                    No environment variables found matching "{searchTerm}"
+              </>
+            ) : (
+              <>
+                {/* Workspace section */}
+                {(!searchTerm.trim() || filteredWorkspaceEntries.length > 0) && (
+                  <div className='flex flex-col gap-[8px]'>
+                    <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Workspace
+                    </div>
+                    {!searchTerm.trim() && Object.keys(workspaceVars).length === 0 ? (
+                      <div className='text-[13px] text-[var(--text-muted)]'>
+                        No workspace variables yet
+                      </div>
+                    ) : (
+                      (searchTerm.trim()
+                        ? filteredWorkspaceEntries
+                        : Object.entries(workspaceVars)
+                      ).map(([key, value]) => (
+                        <WorkspaceVariableRow
+                          key={key}
+                          envKey={key}
+                          value={value}
+                          renamingKey={renamingKey}
+                          pendingKeyValue={pendingKeyValue}
+                          isNewlyPromoted={!Object.hasOwn(initialWorkspaceVarsRef.current, key)}
+                          onRenameStart={setRenamingKey}
+                          onPendingKeyChange={setPendingKeyValue}
+                          onRenameEnd={handleWorkspaceKeyRename}
+                          onDelete={handleDeleteWorkspaceVar}
+                          onDemote={demoteToPersonal}
+                        />
+                      ))
+                    )}
                   </div>
                 )}
-            </>
-          )}
-        </div>
-      </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
-          {isLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <Skeleton className='h-9 w-[108px] rounded-[8px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={addEnvVar}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Add Variable
-              </Button>
-
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    onClick={handleSave}
-                    disabled={!hasChanges || hasConflicts}
-                    className={`h-9 rounded-[8px] ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
-                  >
-                    Save Changes
-                  </Button>
-                </Tooltip.Trigger>
-                {hasConflicts && (
-                  <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
+                {/* Personal section */}
+                {(!searchTerm.trim() || filteredEnvVars.length > 0) && (
+                  <div className='flex flex-col gap-[8px]'>
+                    <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Personal
+                    </div>
+                    {filteredEnvVars.map(({ envVar, originalIndex }) => (
+                      <div key={envVar.id || originalIndex}>
+                        {renderEnvVarRow(envVar, originalIndex)}
+                      </div>
+                    ))}
+                  </div>
                 )}
-              </Tooltip.Root>
-            </>
-          )}
+                {/* Show message when search has no results across both sections */}
+                {searchTerm.trim() &&
+                  filteredEnvVars.length === 0 &&
+                  filteredWorkspaceEntries.length === 0 &&
+                  (envVars.length > 0 || Object.keys(workspaceVars).length > 0) && (
+                    <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                      No environment variables found matching "{searchTerm}"
+                    </div>
+                  )}
+              </>
+            )}
+          </div>
         </div>
       </div>
 
       <Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Unsaved Changes</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Unsaved Changes</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               {hasConflicts
                 ? 'You have unsaved changes, but conflicts must be resolved before saving. You can discard your changes to close the modal.'
                 : 'You have unsaved changes. Do you want to save them before closing?'}
-            </ModalDescription>
-          </ModalHeader>
+            </p>
+          </ModalBody>
           <ModalFooter>
-            <Button
-              onClick={handleCancel}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-            >
+            <Button variant='default' onClick={handleCancel}>
               Discard Changes
             </Button>
             {hasConflicts ? (
@@ -754,7 +855,7 @@ export function EnvironmentVariables({
                   <Button
                     disabled={true}
                     variant='primary'
-                    className='h-[32px] cursor-not-allowed px-[12px] opacity-50'
+                    className='cursor-not-allowed opacity-50'
                   >
                     Save Changes
                   </Button>
@@ -762,13 +863,13 @@ export function EnvironmentVariables({
                 <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
               </Tooltip.Root>
             ) : (
-              <Button onClick={handleSave} variant='primary' className='h-[32px] px-[12px]'>
+              <Button onClick={handleSave} variant='primary' className={PRIMARY_BUTTON_STYLES}>
                 Save Changes
               </Button>
             )}
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
index 640f613f8..031e5e1dc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useMemo, useRef, useState } from 'react'
-import { ArrowDown, Search } from 'lucide-react'
+import { ArrowDown, Loader2, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Tooltip, Trash } from '@/components/emcn'
-import { Input, Progress } from '@/components/ui'
+import { Input, Progress, Skeleton } from '@/components/ui'
 import {
   Table,
   TableBody,
@@ -31,6 +31,9 @@ import { useWorkspacePermissions } from '@/hooks/use-workspace-permissions'
 const logger = createLogger('FileUploadsSettings')
 const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
 
+const PRIMARY_BUTTON_STYLES =
+  '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+
 const SUPPORTED_EXTENSIONS = [
   // Documents
   'pdf',
@@ -66,6 +69,16 @@ const SUPPORTED_EXTENSIONS = [
 const ACCEPT_ATTR =
   '.pdf,.csv,.doc,.docx,.txt,.md,.xlsx,.xls,.html,.htm,.pptx,.ppt,.json,.yaml,.yml,.mp3,.m4a,.wav,.webm,.ogg,.flac,.aac,.opus,.mp4,.mov,.avi,.mkv'
 
+const PLAN_NAMES = {
+  enterprise: 'Enterprise',
+  team: 'Team',
+  pro: 'Pro',
+  free: 'Free',
+} as const
+
+const GRADIENT_TEXT_STYLES =
+  'gradient-text bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
+
 export function Files() {
   const params = useParams()
   const workspaceId = params?.workspaceId as string
@@ -80,7 +93,10 @@ export function Files() {
   const [uploading, setUploading] = useState(false)
   const [uploadError, setUploadError] = useState<string | null>(null)
   const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 })
+  const [downloadingFileId, setDownloadingFileId] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   const { permissions: workspacePermissions, loading: permissionsLoading } =
     useWorkspacePermissions(workspaceId)
@@ -139,9 +155,35 @@ export function Files() {
   }
 
   const handleDownload = async (file: WorkspaceFileRecord) => {
-    if (!workspaceId) return
+    if (!workspaceId || downloadingFileId === file.id) return
 
-    window.open(`/workspace/${workspaceId}/files/${file.id}/view`, '_blank')
+    setDownloadingFileId(file.id)
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/files/${file.id}/download`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to get download URL')
+      }
+
+      const data = await response.json()
+
+      if (!data.success || !data.downloadUrl) {
+        throw new Error('Invalid download response')
+      }
+
+      const link = document.createElement('a')
+      link.href = data.downloadUrl
+      link.download = data.fileName || file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } catch (error) {
+      logger.error('Error downloading file:', error)
+    } finally {
+      setDownloadingFileId(null)
+    }
   }
 
   const handleDelete = async (file: WorkspaceFileRecord) => {
@@ -172,7 +214,6 @@ export function Files() {
     return `${mm}/${dd}/${yy}`
   }
 
-  const [search, setSearch] = useState('')
   const filteredFiles = useMemo(() => {
     if (!search) return files
     const q = search.toLowerCase()
@@ -192,143 +233,202 @@ export function Files() {
     return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
   }
 
-  const PLAN_NAMES = {
-    enterprise: 'Enterprise',
-    team: 'Team',
-    pro: 'Pro',
-    free: 'Free',
-  } as const
-
   const planName = storageInfo?.plan || 'free'
   const displayPlanName = PLAN_NAMES[planName as keyof typeof PLAN_NAMES] || 'Free'
 
-  const GRADIENT_TEXT_STYLES =
-    'gradient-text bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
+  const renderTableSkeleton = () => (
+    <Table className='table-auto text-[13px]'>
+      <TableHeader>
+        <TableRow className='hover:bg-transparent'>
+          <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[40px]' />
+          </TableHead>
+          <TableHead className='w-[14%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[28px]' />
+          </TableHead>
+          <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[56px]' />
+          </TableHead>
+          <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[48px]' />
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 3 }, (_, i) => (
+          <TableRow key={i} className='hover:bg-transparent'>
+            <TableCell className='px-[12px] py-[6px]'>
+              <div className='flex min-w-0 items-center gap-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                <Skeleton className='h-[14px] w-[180px]' />
+              </div>
+            </TableCell>
+            <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px]'>
+              <Skeleton className='h-[12px] w-[48px]' />
+            </TableCell>
+            <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px]'>
+              <Skeleton className='h-[12px] w-[56px]' />
+            </TableCell>
+            <TableCell className='px-[12px] py-[6px]'>
+              <div className='flex items-center gap-[4px]'>
+                <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
+                <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Header: search left, file count + Upload right */}
-      <div className='flex items-center justify-between px-6 pt-4 pb-2'>
-        <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-          <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <div className='flex h-full flex-col gap-[2px]'>
+      {/* Search Input and Upload Button */}
+      <div className='flex items-center gap-[8px]'>
+        <div
+          className={cn(
+            'flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]',
+            permissionsLoading && 'opacity-50'
+          )}
+        >
+          <Search
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+            strokeWidth={2}
+          />
           <Input
             placeholder='Search files...'
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+            disabled={permissionsLoading}
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
           />
         </div>
-        <div className='flex items-center gap-3'>
-          {isBillingEnabled && storageInfo && (
-            <div className='flex flex-col items-end gap-1'>
-              <div className='flex items-center gap-2 text-sm'>
-                <span
-                  className={cn(
-                    'font-medium',
-                    planName === 'free' ? 'text-foreground' : GRADIENT_TEXT_STYLES
-                  )}
-                >
-                  {displayPlanName}
-                </span>
-                <span className='text-muted-foreground tabular-nums'>
-                  {formatStorageSize(storageInfo.usedBytes)} /{' '}
-                  {formatStorageSize(storageInfo.limitBytes)}
-                </span>
-              </div>
-              <Progress
-                value={Math.min(storageInfo.percentUsed, 100)}
-                className='h-1 w-full'
-                indicatorClassName='bg-black dark:bg-white'
-              />
-            </div>
-          )}
-          {userPermissions.canEdit && (
-            <div className='flex items-center'>
-              <input
-                ref={fileInputRef}
-                type='file'
-                className='hidden'
-                onChange={handleFileChange}
-                disabled={uploading}
-                accept={ACCEPT_ATTR}
-                multiple
-              />
-              <Button
-                onClick={handleUploadClick}
-                disabled={uploading}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+        {!permissionsLoading && isBillingEnabled && storageInfo && (
+          <div className='flex flex-col items-end gap-[4px]'>
+            <div className='flex items-center gap-[8px] text-[13px]'>
+              <span
+                className={cn(
+                  'font-medium',
+                  planName === 'free' ? 'text-[var(--text-primary)]' : GRADIENT_TEXT_STYLES
+                )}
               >
-                {uploading && uploadProgress.total > 0
-                  ? `Uploading ${uploadProgress.completed}/${uploadProgress.total}...`
-                  : uploading
-                    ? 'Uploading...'
-                    : 'Upload File'}
-              </Button>
+                {displayPlanName}
+              </span>
+              <span className='text-[var(--text-muted)] tabular-nums'>
+                {formatStorageSize(storageInfo.usedBytes)} /{' '}
+                {formatStorageSize(storageInfo.limitBytes)}
+              </span>
             </div>
-          )}
-        </div>
+            <Progress
+              value={Math.min(storageInfo.percentUsed, 100)}
+              className='h-1 w-full'
+              indicatorClassName='bg-black dark:bg-white'
+            />
+          </div>
+        )}
+        {(permissionsLoading || userPermissions.canEdit) && (
+          <>
+            <input
+              ref={fileInputRef}
+              type='file'
+              className='hidden'
+              onChange={handleFileChange}
+              disabled={uploading || permissionsLoading}
+              accept={ACCEPT_ATTR}
+              multiple
+            />
+            <Button
+              onClick={handleUploadClick}
+              disabled={uploading || permissionsLoading}
+              variant='primary'
+              className={PRIMARY_BUTTON_STYLES}
+            >
+              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              {uploading && uploadProgress.total > 0
+                ? `${uploadProgress.completed}/${uploadProgress.total}`
+                : uploading
+                  ? 'Uploading...'
+                  : 'Upload'}
+            </Button>
+          </>
+        )}
       </div>
 
       {/* Error message */}
       {uploadError && (
-        <div className='px-6 pb-2'>
-          <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-            {uploadError}
-          </p>
-        </div>
+        <p className='text-[11px] text-[var(--text-error)] leading-tight'>{uploadError}</p>
       )}
 
-      {/* Files Table */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        {files.length === 0 ? (
-          <div className='py-8 text-center text-muted-foreground text-sm'>
+      {/* Scrollable Content */}
+      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+        {permissionsLoading ? (
+          renderTableSkeleton()
+        ) : files.length === 0 ? (
+          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
             No files uploaded yet
           </div>
+        ) : filteredFiles.length === 0 ? (
+          <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+            No files found matching "{search}"
+          </div>
         ) : (
           <Table className='table-auto text-[13px]'>
             <TableHeader>
               <TableRow className='hover:bg-transparent'>
-                <TableHead className='w-[56%] px-3 text-xs'>Name</TableHead>
-                <TableHead className='w-[14%] px-3 text-left text-xs'>Size</TableHead>
-                <TableHead className='w-[15%] px-3 text-left text-xs'>Uploaded</TableHead>
-                <TableHead className='w-[15%] px-3 text-left text-xs'>Actions</TableHead>
+                <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+                  Name
+                </TableHead>
+                <TableHead className='w-[14%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Size
+                </TableHead>
+                <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Uploaded
+                </TableHead>
+                <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Actions
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {filteredFiles.map((file) => {
                 const Icon = getDocumentIcon(file.type || '', file.name)
                 return (
-                  <TableRow key={file.id} className='hover:bg-muted/50'>
-                    <TableCell className='px-3'>
-                      <div className='flex min-w-0 items-center gap-2'>
-                        <Icon className='h-3.5 w-3.5 shrink-0 text-muted-foreground' />
+                  <TableRow key={file.id} className='hover:bg-[var(--surface-2)]'>
+                    <TableCell className='px-[12px] py-[6px]'>
+                      <div className='flex min-w-0 items-center gap-[8px]'>
+                        <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
                         <button
                           onClick={() => handleDownload(file)}
-                          className='min-w-0 truncate text-left font-normal hover:underline'
+                          disabled={downloadingFileId === file.id}
+                          className='min-w-0 truncate text-left font-normal text-[14px] text-[var(--text-primary)] hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50'
                           title={file.name}
                         >
                           {truncateMiddle(file.name)}
                         </button>
                       </div>
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-3 text-[12px] text-muted-foreground'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
                       {formatFileSize(file.size)}
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-3 text-[12px] text-muted-foreground'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
                       {formatDate(file.uploadedAt)}
                     </TableCell>
-                    <TableCell className='px-3'>
-                      <div className='flex items-center gap-1'>
+                    <TableCell className='px-[12px] py-[6px]'>
+                      <div className='flex items-center gap-[4px]'>
                         <Tooltip.Root>
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
                               onClick={() => handleDownload(file)}
-                              className='h-6 w-6 p-0'
+                              className='h-[28px] w-[28px] p-0'
+                              disabled={downloadingFileId === file.id}
                               aria-label={`Download ${file.name}`}
                             >
-                              <ArrowDown className='h-[14px] w-[14px]' />
+                              {downloadingFileId === file.id ? (
+                                <Loader2 className='h-[14px] w-[14px] animate-spin' />
+                              ) : (
+                                <ArrowDown className='h-[14px] w-[14px]' />
+                              )}
                             </Button>
                           </Tooltip.Trigger>
                           <Tooltip.Content>Download file</Tooltip.Content>
@@ -339,7 +439,7 @@ export function Files() {
                               <Button
                                 variant='ghost'
                                 onClick={() => handleDelete(file)}
-                                className='h-6 w-6 p-0'
+                                className='h-[28px] w-[28px] p-0'
                                 disabled={deleteFile.isPending}
                                 aria-label={`Delete ${file.name}`}
                               >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
index 37ce2dc29..b8ba9ab93 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
@@ -1,48 +1,83 @@
-import { useEffect, useState } from 'react'
-import { Info } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-// COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
-// import {
-//   Select,
-//   SelectContent,
-//   SelectItem,
-//   SelectTrigger,
-//   SelectValue,
-// } from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { useSession } from '@/lib/auth/auth-client'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
+'use client'
 
-const TOOLTIPS = {
-  autoConnect: 'Automatically connect nodes.',
-  autoPan: 'Automatically pan to active blocks during workflow execution.',
-  consoleExpandedByDefault:
-    'Show console entries expanded by default. When disabled, entries will be collapsed by default.',
-  floatingControls:
-    'Show floating controls for zoom, undo, and redo at the bottom of the workflow canvas.',
-  trainingControls:
-    'Show training controls for recording workflow edits to build copilot training datasets.',
-  superUserMode:
-    'Toggle super user mode UI. When enabled, you can see and approve pending templates. Your super user status in the database remains unchanged.',
-  errorNotifications:
-    'Show error notifications when blocks fail. When disabled, errors will only appear in the console.',
+import { useEffect, useRef, useState } from 'react'
+import { Camera, Check, Pencil } from 'lucide-react'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { Button, Combobox, Label, Switch } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton } from '@/components/ui'
+import { signOut, useSession } from '@/lib/auth/auth-client'
+import { useBrandConfig } from '@/lib/branding/branding'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { getBaseUrl } from '@/lib/core/utils/urls'
+import { createLogger } from '@/lib/logs/console/logger'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
+import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
+import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
+import { clearUserData } from '@/stores'
+
+const logger = createLogger('General')
+
+/**
+ * Extracts initials from a user's name.
+ * @param name - The user's full name
+ * @returns Up to 2 characters: first letters of first and last name, or just the first letter
+ */
+function getInitials(name: string | undefined | null): string {
+  if (!name?.trim()) return ''
+  const parts = name.trim().split(' ')
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
+  }
+  return parts[0][0].toUpperCase()
 }
 
-export function General() {
-  const { data: session } = useSession()
-  const [isSuperUser, setIsSuperUser] = useState(false)
-  const [loadingSuperUser, setLoadingSuperUser] = useState(true)
+interface GeneralProps {
+  onOpenChange?: (open: boolean) => void
+}
 
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: settings, isLoading } = useGeneralSettings()
+export function General({ onOpenChange }: GeneralProps) {
+  const router = useRouter()
+  const brandConfig = useBrandConfig()
+  const { data: session } = useSession()
+
+  const { data: profile, isLoading: isProfileLoading } = useUserProfile()
+  const updateProfile = useUpdateUserProfile()
+
+  const { data: settings, isLoading: isSettingsLoading } = useGeneralSettings()
   const updateSetting = useUpdateGeneralSetting()
 
+  const isLoading = isProfileLoading || isSettingsLoading
+
   const isTrainingEnabled = isTruthy(getEnv('NEXT_PUBLIC_COPILOT_TRAINING_ENABLED'))
 
-  // Fetch super user status from database
+  const [isSuperUser, setIsSuperUser] = useState(false)
+  const [loadingSuperUser, setLoadingSuperUser] = useState(true)
+
+  const [name, setName] = useState(profile?.name || '')
+  const [isEditingName, setIsEditingName] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isResettingPassword, setIsResettingPassword] = useState(false)
+  const [showResetPasswordModal, setShowResetPasswordModal] = useState(false)
+  const [resetPasswordSuccess, setResetPasswordSuccess] = useState(false)
+  const [resetPasswordError, setResetPasswordError] = useState<string | null>(null)
+
+  const [uploadError, setUploadError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (profile?.name) {
+      setName(profile.name)
+    }
+  }, [profile?.name])
+
   useEffect(() => {
     const fetchSuperUserStatus = async () => {
       try {
@@ -52,7 +87,7 @@ export function General() {
           setIsSuperUser(data.isSuperUser)
         }
       } catch (error) {
-        console.error('Failed to fetch super user status:', error)
+        logger.error('Failed to fetch super user status:', error)
       } finally {
         setLoadingSuperUser(false)
       }
@@ -63,24 +98,130 @@ export function General() {
     }
   }, [session?.user?.id])
 
-  const handleSuperUserModeToggle = async (checked: boolean) => {
-    if (checked !== settings?.superUserModeEnabled && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'superUserModeEnabled', value: checked })
+  const {
+    previewUrl: profilePictureUrl,
+    fileInputRef: profilePictureInputRef,
+    handleThumbnailClick: handleProfilePictureClick,
+    handleFileChange: handleProfilePictureChange,
+    isUploading: isUploadingProfilePicture,
+  } = useProfilePictureUpload({
+    currentImage: profile?.image || null,
+    onUpload: (url: string | null) => {
+      updateProfile
+        .mutateAsync({ image: url })
+        .then(() => {
+          setUploadError(null)
+        })
+        .catch(() => {
+          setUploadError(
+            url ? 'Failed to update profile picture' : 'Failed to remove profile picture'
+          )
+        })
+    },
+    onError: (error: string) => {
+      setUploadError(error)
+      setTimeout(() => setUploadError(null), 5000)
+    },
+  })
+
+  useEffect(() => {
+    if (isEditingName && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [isEditingName])
+
+  const handleUpdateName = async () => {
+    const trimmedName = name.trim()
+
+    if (!trimmedName) {
+      return
+    }
+
+    if (trimmedName === profile?.name) {
+      setIsEditingName(false)
+      return
+    }
+
+    try {
+      await updateProfile.mutateAsync({ name: trimmedName })
+      setIsEditingName(false)
+    } catch (error) {
+      logger.error('Error updating name:', error)
+      setName(profile?.name || '')
     }
   }
 
-  // COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
-  // // Sync theme from store to next-themes when theme changes
-  // useEffect(() => {
-  //   if (!isLoading && theme) {
-  //     // Ensure next-themes is in sync with our store
-  //     const { syncThemeToNextThemes } = require('@/lib/theme-sync')
-  //     syncThemeToNextThemes(theme)
-  //   }
-  // }, [theme, isLoading])
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleUpdateName()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      handleCancelEdit()
+    }
+  }
 
-  const handleThemeChange = async (value: 'system' | 'light' | 'dark') => {
-    await updateSetting.mutateAsync({ key: 'theme', value })
+  const handleCancelEdit = () => {
+    setIsEditingName(false)
+    setName(profile?.name || '')
+  }
+
+  const handleInputBlur = () => {
+    handleUpdateName()
+  }
+
+  const handleSignOut = async () => {
+    try {
+      await Promise.all([signOut(), clearUserData()])
+      router.push('/login?fromLogout=true')
+    } catch (error) {
+      logger.error('Error signing out:', { error })
+      router.push('/login?fromLogout=true')
+    }
+  }
+
+  const handleResetPasswordConfirm = async () => {
+    if (!profile?.email) return
+
+    setIsResettingPassword(true)
+    setResetPasswordError(null)
+
+    try {
+      const response = await fetch('/api/auth/forget-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: profile.email,
+          redirectTo: `${getBaseUrl()}/reset-password`,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.message || 'Failed to send reset password email')
+      }
+
+      setResetPasswordSuccess(true)
+
+      setTimeout(() => {
+        setShowResetPasswordModal(false)
+        setResetPasswordSuccess(false)
+      }, 1500)
+    } catch (error) {
+      logger.error('Error resetting password:', error)
+      setResetPasswordError('Failed to send email')
+
+      setTimeout(() => {
+        setResetPasswordError(null)
+      }, 5000)
+    } finally {
+      setIsResettingPassword(false)
+    }
+  }
+
+  const handleThemeChange = async (value: string) => {
+    await updateSetting.mutateAsync({ key: 'theme', value: value as 'system' | 'light' | 'dark' })
   }
 
   const handleAutoConnectChange = async (checked: boolean) => {
@@ -89,24 +230,6 @@ export function General() {
     }
   }
 
-  const handleAutoPanChange = async (checked: boolean) => {
-    if (checked !== settings?.autoPan && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'autoPan', value: checked })
-    }
-  }
-
-  const handleConsoleExpandedByDefaultChange = async (checked: boolean) => {
-    if (checked !== settings?.consoleExpandedByDefault && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'consoleExpandedByDefault', value: checked })
-    }
-  }
-
-  const handleFloatingControlsChange = async (checked: boolean) => {
-    if (checked !== settings?.showFloatingControls && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'showFloatingControls', value: checked })
-    }
-  }
-
   const handleTrainingControlsChange = async (checked: boolean) => {
     if (checked !== settings?.showTrainingControls && !updateSetting.isPending) {
       await updateSetting.mutateAsync({ key: 'showTrainingControls', value: checked })
@@ -119,232 +242,312 @@ export function General() {
     }
   }
 
+  const handleSuperUserModeToggle = async (checked: boolean) => {
+    if (checked !== settings?.superUserModeEnabled && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'superUserModeEnabled', value: checked })
+    }
+  }
+
+  const handleTelemetryToggle = async (checked: boolean) => {
+    if (checked !== settings?.telemetryEnabled && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'telemetryEnabled', value: checked })
+
+      if (checked) {
+        if (typeof window !== 'undefined') {
+          fetch('/api/telemetry', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              category: 'consent',
+              action: 'enable_from_settings',
+              timestamp: new Date().toISOString(),
+            }),
+          }).catch(() => {})
+        }
+      }
+    }
+  }
+
+  const imageUrl = profilePictureUrl || profile?.image || brandConfig.logoUrl
+
+  if (isLoading) {
+    return <GeneralSkeleton />
+  }
+
   return (
-    <div className='px-6 pt-4 pb-2'>
-      <div className='flex flex-col gap-4'>
-        {/* COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace */}
-        {/* <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='theme-select' className='font-normal'>
-              Theme
-            </Label>
-          </div>
-          <Select
-            value={settings?.theme}
-            onValueChange={handleThemeChange}
-            disabled={updateSetting.isPending}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* User Info Section */}
+      <div className='flex items-center gap-[12px]'>
+        <div className='relative'>
+          <div
+            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
+            onClick={handleProfilePictureClick}
           >
-            <SelectTrigger id='theme-select' className='h-9 w-[180px]'>
-              <SelectValue placeholder='Select theme' />
-            </SelectTrigger>
-            <SelectContent className='min-w-32 rounded-[10px] border-[#E5E5E5] bg-[var(--white)] shadow-xs dark:border-[#414141] dark:bg-[var(--surface-elevated)]'>
-              <SelectItem
-                value='system'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                System
-              </SelectItem>
-              <SelectItem
-                value='light'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                Light
-              </SelectItem>
-              <SelectItem
-                value='dark'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                Dark
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div> */}
-
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='auto-connect' className='font-normal'>
-              Auto-connect on drop
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about auto-connect feature'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.autoConnect}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='auto-connect'
-            checked={settings?.autoConnect ?? true}
-            onCheckedChange={handleAutoConnectChange}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='console-expanded-by-default' className='font-normal'>
-              Console expanded by default
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about console expanded by default'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.consoleExpandedByDefault}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='console-expanded-by-default'
-            checked={settings?.consoleExpandedByDefault ?? true}
-            onCheckedChange={handleConsoleExpandedByDefaultChange}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        {/* TODO: Add floating controls back when we implement the new UI for it */}
-        {/* <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='floating-controls' className='font-normal'>
-              Floating controls
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about floating controls'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.floatingControls}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='floating-controls'
-            checked={settings?.showFloatingControls ?? true}
-            onCheckedChange={handleFloatingControlsChange}
-            disabled={updateSetting.isPending}
-          />
-        </div> */}
-
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='error-notifications' className='font-normal'>
-              Error notifications
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about error notifications'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.errorNotifications}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='error-notifications'
-            checked={settings?.errorNotificationsEnabled ?? true}
-            onCheckedChange={handleErrorNotificationsChange}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        {isTrainingEnabled && (
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <Label htmlFor='training-controls' className='font-normal'>
-                Training controls
-              </Label>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    size='icon'
-                    className='h-5 w-5 p-0'
-                    aria-label='Learn more about training controls'
-                    disabled={updateSetting.isPending}
-                  >
-                    <Info className='h-3.5 w-3.5 text-muted-foreground' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                  <p className='text-sm'>{TOOLTIPS.trainingControls}</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
+            {(() => {
+              if (imageUrl) {
+                return (
+                  <Image
+                    src={imageUrl}
+                    alt={profile?.name || 'User'}
+                    width={36}
+                    height={36}
+                    className={`h-full w-full object-cover transition-opacity duration-300 ${
+                      isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
+                    }`}
+                  />
+                )
+              }
+              return (
+                <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  {getInitials(profile?.name) || ''}
+                </span>
+              )
+            })()}
+            <div
+              className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
+                isUploadingProfilePicture ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+              }`}
+            >
+              {isUploadingProfilePicture ? (
+                <div className='h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
+              ) : (
+                <Camera className='h-4 w-4 text-white' />
+              )}
             </div>
-            <Switch
-              id='training-controls'
-              checked={settings?.showTrainingControls ?? false}
-              onCheckedChange={handleTrainingControlsChange}
-              disabled={updateSetting.isPending}
-            />
           </div>
-        )}
+          <Input
+            type='file'
+            accept='image/png,image/jpeg,image/jpg'
+            className='hidden'
+            ref={profilePictureInputRef}
+            onChange={handleProfilePictureChange}
+            disabled={isUploadingProfilePicture}
+          />
+        </div>
+        <div className='flex flex-1 flex-col justify-center gap-[1px]'>
+          <div className='flex items-center gap-[8px]'>
+            {isEditingName ? (
+              <>
+                <input
+                  ref={inputRef}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  onBlur={handleInputBlur}
+                  className='w-auto border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                  size={Math.max(name.length, 1)}
+                  maxLength={100}
+                  disabled={updateProfile.isPending}
+                  autoComplete='off'
+                  autoCorrect='off'
+                  autoCapitalize='off'
+                  spellCheck='false'
+                />
+                <Button
+                  variant='ghost'
+                  className='h-[12px] w-[12px] flex-shrink-0 p-0'
+                  onClick={handleUpdateName}
+                  disabled={updateProfile.isPending}
+                  aria-label='Save name'
+                >
+                  <Check className='h-[12px] w-[12px]' />
+                </Button>
+              </>
+            ) : (
+              <>
+                <h3 className='font-medium text-[14px]'>{profile?.name || ''}</h3>
+                <Button
+                  variant='ghost'
+                  className='h-[10.5px] w-[10.5px] flex-shrink-0 p-0'
+                  onClick={() => setIsEditingName(true)}
+                  aria-label='Edit name'
+                >
+                  <Pencil className='h-[10.5px] w-[10.5px]' />
+                </Button>
+              </>
+            )}
+          </div>
+          <p className='text-[13px] text-[var(--text-muted)]'>{profile?.email || ''}</p>
+        </div>
+      </div>
+      {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
 
-        {/* Super User Mode Toggle - Only visible to super users */}
-        {!loadingSuperUser && isSuperUser && (
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <Label htmlFor='super-user-mode' className='font-normal'>
-                Super User Mode
-              </Label>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    className='h-7 p-1 text-gray-500'
-                    aria-label='Learn more about super user mode'
-                    disabled={updateSetting.isPending}
-                  >
-                    <Info className='h-5 w-5' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                  <p className='text-sm'>{TOOLTIPS.superUserMode}</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </div>
-            <Switch
-              id='super-user-mode'
-              checked={settings?.superUserModeEnabled ?? true}
-              onCheckedChange={handleSuperUserModeToggle}
-              disabled={updateSetting.isPending}
-            />
+      <div className='flex items-center justify-between border-b pb-[12px]'>
+        <Label htmlFor='theme-select'>Theme</Label>
+        <div className='w-[100px]'>
+          <Combobox
+            size='sm'
+            align='end'
+            dropdownWidth={140}
+            value={settings?.theme}
+            onChange={handleThemeChange}
+            disabled={updateSetting.isPending}
+            placeholder='Select theme'
+            options={[
+              { label: 'System', value: 'system' },
+              { label: 'Light', value: 'light' },
+              { label: 'Dark', value: 'dark' },
+            ]}
+          />
+        </div>
+      </div>
+
+      <div className='flex items-center justify-between'>
+        <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
+        <Switch
+          id='auto-connect'
+          checked={settings?.autoConnect ?? true}
+          onCheckedChange={handleAutoConnectChange}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <div className='flex items-center justify-between'>
+        <Label htmlFor='error-notifications'>Run error notifications</Label>
+        <Switch
+          id='error-notifications'
+          checked={settings?.errorNotificationsEnabled ?? true}
+          onCheckedChange={handleErrorNotificationsChange}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <div className='flex items-center justify-between border-t pt-[12px]'>
+        <Label htmlFor='telemetry'>Allow anonymous telemetry</Label>
+        <Switch
+          id='telemetry'
+          checked={settings?.telemetryEnabled ?? true}
+          onCheckedChange={handleTelemetryToggle}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <p className='text-[12px] text-[var(--text-muted)]'>
+        We use OpenTelemetry to collect anonymous usage data to improve Sim. All data is collected
+        in accordance with our privacy policy, and you can opt-out at any time.
+      </p>
+
+      {isTrainingEnabled && (
+        <div className='flex items-center justify-between'>
+          <Label htmlFor='training-controls'>Training controls</Label>
+          <Switch
+            id='training-controls'
+            checked={settings?.showTrainingControls ?? false}
+            onCheckedChange={handleTrainingControlsChange}
+            disabled={updateSetting.isPending}
+          />
+        </div>
+      )}
+
+      {!loadingSuperUser && isSuperUser && (
+        <div className='flex items-center justify-between'>
+          <Label htmlFor='super-user-mode'>Super admin mode</Label>
+          <Switch
+            id='super-user-mode'
+            checked={settings?.superUserModeEnabled ?? true}
+            onCheckedChange={handleSuperUserModeToggle}
+            disabled={updateSetting.isPending}
+          />
+        </div>
+      )}
+
+      <div className='mt-auto flex items-center gap-[8px]'>
+        <Button onClick={handleSignOut}>Sign out</Button>
+        <Button onClick={() => setShowResetPasswordModal(true)}>Reset password</Button>
+      </div>
+
+      {/* Password Reset Confirmation Modal */}
+      <Modal open={showResetPasswordModal} onOpenChange={setShowResetPasswordModal}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Reset Password</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              A password reset link will be sent to{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{profile?.email}</span>.
+              Click the link in the email to create a new password.
+            </p>
+            {resetPasswordError && (
+              <p className='mt-[8px] text-[12px] text-[var(--text-error)]'>{resetPasswordError}</p>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              onClick={() => setShowResetPasswordModal(false)}
+              disabled={isResettingPassword || resetPasswordSuccess}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleResetPasswordConfirm}
+              disabled={isResettingPassword || resetPasswordSuccess}
+            >
+              {isResettingPassword
+                ? 'Sending...'
+                : resetPasswordSuccess
+                  ? 'Sent'
+                  : 'Send Reset Email'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
+
+/**
+ * Skeleton component for general settings loading state.
+ * Matches the exact layout structure of the General component.
+ */
+function GeneralSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* User Info Section */}
+      <div className='flex items-center gap-[12px]'>
+        <Skeleton className='h-9 w-9 rounded-full' />
+        <div className='flex flex-1 flex-col justify-center gap-[1px]'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-24' />
+            <Skeleton className='h-[11px] w-[11px]' />
           </div>
-        )}
+          <Skeleton className='h-[13px] w-40' />
+        </div>
+      </div>
+
+      {/* Theme row */}
+      <div className='flex items-center justify-between border-b pb-[12px]'>
+        <Skeleton className='h-4 w-12' />
+        <Skeleton className='h-8 w-[100px] rounded-[8px]' />
+      </div>
+
+      {/* Auto-connect row */}
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Error notifications row */}
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Telemetry row */}
+      <div className='flex items-center justify-between border-t pt-[12px]'>
+        <Skeleton className='h-4 w-40' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Telemetry description */}
+      <div className='space-y-1'>
+        <Skeleton className='h-3 w-full' />
+        <Skeleton className='h-3 w-4/5' />
+      </div>
+
+      {/* Action buttons */}
+      <div className='mt-auto flex items-center gap-[8px]'>
+        <Skeleton className='h-8 w-20 rounded-[4px]' />
+        <Skeleton className='h-8 w-28 rounded-[4px]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
index e654e5bd3..160ef9507 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
@@ -1,14 +1,11 @@
-export { Account } from './account/account'
 export { ApiKeys } from './api-keys/api-keys'
 export { Copilot } from './copilot/copilot'
-export { Credentials } from './credentials/credentials'
 export { CustomTools } from './custom-tools/custom-tools'
 export { EnvironmentVariables } from './environment/environment'
 export { Files as FileUploads } from './files/files'
 export { General } from './general/general'
+export { Integrations } from './integrations/integrations'
 export { MCP } from './mcp/mcp'
-export { Privacy } from './privacy/privacy'
-export { SettingsNavigation } from './settings-navigation/settings-navigation'
 export { SSO } from './sso/sso'
 export { Subscription } from './subscription/subscription'
 export { TeamManagement } from './team-management/team-management'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx
new file mode 100644
index 000000000..c6b5e8e9b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx
@@ -0,0 +1,413 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Check, ChevronDown, ExternalLink, Search } from 'lucide-react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Button, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton } from '@/components/ui'
+import { cn } from '@/lib/core/utils/cn'
+import { createLogger } from '@/lib/logs/console/logger'
+import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
+import {
+  type ServiceInfo,
+  useConnectOAuthService,
+  useDisconnectOAuthService,
+  useOAuthConnections,
+} from '@/hooks/queries/oauth-connections'
+
+const logger = createLogger('Integrations')
+
+/**
+ * Static skeleton structure matching OAUTH_PROVIDERS layout
+ * Each entry: [providerName, serviceCount]
+ */
+const SKELETON_STRUCTURE: [string, number][] = [
+  ['Google', 7],
+  ['Microsoft', 6],
+  ['GitHub', 1],
+  ['X', 1],
+  ['Confluence', 1],
+  ['Jira', 1],
+  ['Airtable', 1],
+  ['Notion', 1],
+  ['Linear', 1],
+  ['Slack', 1],
+  ['Reddit', 1],
+  ['Wealthbox', 1],
+  ['Webflow', 1],
+  ['Trello', 1],
+  ['Asana', 1],
+  ['Pipedrive', 1],
+  ['HubSpot', 1],
+  ['Salesforce', 1],
+]
+
+function IntegrationsSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex w-full items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+        <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+        <Input
+          placeholder='Search integrations...'
+          disabled
+          className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+        />
+      </div>
+
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {SKELETON_STRUCTURE.map(([providerName, serviceCount]) => (
+            <div key={providerName} className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[60px]' />
+              {Array.from({ length: serviceCount }).map((_, index) => (
+                <div key={index} className='flex items-center justify-between'>
+                  <div className='flex items-center gap-[12px]'>
+                    <Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
+                    <div className='flex flex-col justify-center gap-[1px]'>
+                      <Skeleton className='h-[14px] w-[100px]' />
+                      <Skeleton className='h-[13px] w-[200px]' />
+                    </div>
+                  </div>
+                  <Skeleton className='h-[32px] w-[72px] rounded-[6px]' />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface IntegrationsProps {
+  onOpenChange?: (open: boolean) => void
+  registerCloseHandler?: (handler: (open: boolean) => void) => void
+}
+
+export function Integrations({ onOpenChange, registerCloseHandler }: IntegrationsProps) {
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  const pendingServiceRef = useRef<HTMLDivElement>(null)
+
+  const { data: services = [], isPending } = useOAuthConnections()
+  const connectService = useConnectOAuthService()
+  const disconnectService = useDisconnectOAuthService()
+
+  const [searchTerm, setSearchTerm] = useState('')
+  const [pendingService, setPendingService] = useState<string | null>(null)
+  const [authSuccess, setAuthSuccess] = useState(false)
+  const [showActionRequired, setShowActionRequired] = useState(false)
+  const prevConnectedIdsRef = useRef<Set<string>>(new Set())
+  const connectionAddedRef = useRef<boolean>(false)
+
+  // Disconnect confirmation dialog state
+  const [showDisconnectDialog, setShowDisconnectDialog] = useState(false)
+  const [serviceToDisconnect, setServiceToDisconnect] = useState<{
+    service: ServiceInfo
+    accountId: string
+  } | null>(null)
+
+  // Check for OAuth callback - just show success message
+  useEffect(() => {
+    const code = searchParams.get('code')
+    const state = searchParams.get('state')
+    const error = searchParams.get('error')
+
+    if (code && state) {
+      logger.info('OAuth callback successful')
+      setAuthSuccess(true)
+
+      // Clear URL parameters without changing the page
+      const url = new URL(window.location.href)
+      url.searchParams.delete('code')
+      url.searchParams.delete('state')
+      router.replace(url.pathname + url.search)
+    } else if (error) {
+      logger.error('OAuth error:', { error })
+    }
+  }, [searchParams, router])
+
+  // Track when a new connection is added compared to previous render
+  useEffect(() => {
+    try {
+      const currentConnected = new Set<string>()
+      services.forEach((svc) => {
+        if (svc.isConnected) currentConnected.add(svc.id)
+      })
+      // Detect new connections by comparing to previous connected set
+      for (const id of currentConnected) {
+        if (!prevConnectedIdsRef.current.has(id)) {
+          connectionAddedRef.current = true
+          break
+        }
+      }
+      prevConnectedIdsRef.current = currentConnected
+    } catch {}
+  }, [services])
+
+  // On mount, register a close handler so the parent modal can delegate close events here
+  useEffect(() => {
+    if (!registerCloseHandler) return
+    const handle = (open: boolean) => {
+      if (open) return
+      try {
+        if (typeof window !== 'undefined') {
+          window.dispatchEvent(
+            new CustomEvent('oauth-integration-closed', {
+              detail: { success: connectionAddedRef.current === true },
+            })
+          )
+        }
+      } catch {}
+      onOpenChange?.(open)
+    }
+    registerCloseHandler(handle)
+  }, [registerCloseHandler, onOpenChange])
+
+  // Handle connect button click
+  const handleConnect = async (service: ServiceInfo) => {
+    try {
+      logger.info('Connecting service:', {
+        serviceId: service.id,
+        providerId: service.providerId,
+        scopes: service.scopes,
+      })
+
+      // better-auth will automatically redirect back to this URL after OAuth
+      await connectService.mutateAsync({
+        providerId: service.providerId,
+        callbackURL: window.location.href,
+      })
+    } catch (error) {
+      logger.error('OAuth connection error:', { error })
+    }
+  }
+
+  /**
+   * Opens the disconnect confirmation dialog for a service.
+   */
+  const handleDisconnect = (service: ServiceInfo, accountId: string) => {
+    setServiceToDisconnect({ service, accountId })
+    setShowDisconnectDialog(true)
+  }
+
+  /**
+   * Confirms and executes the service disconnection.
+   */
+  const confirmDisconnect = async () => {
+    if (!serviceToDisconnect) return
+
+    setShowDisconnectDialog(false)
+    const { service, accountId } = serviceToDisconnect
+    setServiceToDisconnect(null)
+
+    try {
+      await disconnectService.mutateAsync({
+        provider: service.providerId.split('-')[0],
+        providerId: service.providerId,
+        serviceId: service.id,
+        accountId,
+      })
+    } catch (error) {
+      logger.error('Error disconnecting service:', { error })
+    }
+  }
+
+  // Group services by provider
+  const groupedServices = services.reduce(
+    (acc, service) => {
+      // Find the provider for this service
+      const providerKey =
+        Object.keys(OAUTH_PROVIDERS).find((key) =>
+          Object.keys(OAUTH_PROVIDERS[key].services).includes(service.id)
+        ) || 'other'
+
+      if (!acc[providerKey]) {
+        acc[providerKey] = []
+      }
+
+      acc[providerKey].push(service)
+      return acc
+    },
+    {} as Record<string, ServiceInfo[]>
+  )
+
+  // Filter services based on search term
+  const filteredGroupedServices = Object.entries(groupedServices).reduce(
+    (acc, [providerKey, providerServices]) => {
+      const filteredServices = providerServices.filter(
+        (service) =>
+          service.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          service.description.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+
+      if (filteredServices.length > 0) {
+        acc[providerKey] = filteredServices
+      }
+
+      return acc
+    },
+    {} as Record<string, ServiceInfo[]>
+  )
+
+  const scrollToHighlightedService = () => {
+    if (pendingServiceRef.current) {
+      pendingServiceRef.current.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+      })
+    }
+  }
+
+  if (isPending) {
+    return <IntegrationsSkeleton />
+  }
+
+  return (
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex w-full items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+          <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+          <Input
+            placeholder='Search services...'
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+          />
+        </div>
+
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {authSuccess && (
+              <div className='flex items-center gap-[12px] rounded-[8px] border border-green-200 bg-green-50 p-[12px]'>
+                <Check className='h-4 w-4 flex-shrink-0 text-green-500' />
+                <p className='font-medium text-[13px] text-green-800'>
+                  Account connected successfully!
+                </p>
+              </div>
+            )}
+
+            {pendingService && showActionRequired && (
+              <div className='flex items-start gap-[12px] rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[12px]'>
+                <ExternalLink className='mt-0.5 h-4 w-4 flex-shrink-0 text-[var(--text-muted)]' />
+                <div className='flex flex-1 flex-col gap-[8px]'>
+                  <p className='text-[13px] text-[var(--text-muted)]'>
+                    <span className='font-medium text-[var(--text-primary)]'>Action Required:</span>{' '}
+                    Please connect your account to enable the requested features.
+                  </p>
+                  <Button variant='outline' onClick={scrollToHighlightedService}>
+                    <span>Go to service</span>
+                    <ChevronDown className='h-3 w-3' />
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <div className='flex flex-col gap-[16px]'>
+              {Object.entries(filteredGroupedServices).map(([providerKey, providerServices]) => (
+                <div key={providerKey} className='flex flex-col gap-[8px]'>
+                  <Label className='text-[12px] text-[var(--text-muted)]'>
+                    {OAUTH_PROVIDERS[providerKey]?.name || 'Other Services'}
+                  </Label>
+                  {providerServices.map((service) => (
+                    <div
+                      key={service.id}
+                      className={cn(
+                        'flex items-center justify-between',
+                        pendingService === service.id &&
+                          '-m-[8px] rounded-[8px] bg-[var(--bg)] p-[8px]'
+                      )}
+                      ref={pendingService === service.id ? pendingServiceRef : undefined}
+                    >
+                      <div className='flex items-center gap-[12px]'>
+                        <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
+                          {typeof service.icon === 'function'
+                            ? service.icon({ className: 'h-4 w-4' })
+                            : service.icon}
+                        </div>
+                        <div className='flex flex-col justify-center gap-[1px]'>
+                          <span className='font-medium text-[14px]'>{service.name}</span>
+                          {service.accounts && service.accounts.length > 0 ? (
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {service.accounts.map((a) => a.name).join(', ')}
+                            </p>
+                          ) : (
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {service.description}
+                            </p>
+                          )}
+                        </div>
+                      </div>
+
+                      {service.accounts && service.accounts.length > 0 ? (
+                        <Button
+                          variant='ghost'
+                          onClick={() => handleDisconnect(service, service.accounts![0].id)}
+                          disabled={disconnectService.isPending}
+                        >
+                          Disconnect
+                        </Button>
+                      ) : (
+                        <Button
+                          variant='primary'
+                          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                          onClick={() => handleConnect(service)}
+                          disabled={connectService.isPending}
+                        >
+                          Connect
+                        </Button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ))}
+
+              {searchTerm.trim() && Object.keys(filteredGroupedServices).length === 0 && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No services found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <Modal open={showDisconnectDialog} onOpenChange={setShowDisconnectDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Disconnect Service</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to disconnect{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {serviceToDisconnect?.service.name}
+              </span>
+              ?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will revoke access and you will need to reconnect to use this service.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDisconnectDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={confirmDisconnect}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+            >
+              Disconnect
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx
deleted file mode 100644
index 331c480ea..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-'use client'
-
-import { Plus, X } from 'lucide-react'
-import { Button, Input, Label } from '@/components/emcn'
-import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
-import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
-import type { McpServerFormData, McpServerTestResult } from '../types'
-
-interface AddServerFormProps {
-  formData: McpServerFormData
-  testResult: McpServerTestResult | null
-  isTestingConnection: boolean
-  isAddingServer: boolean
-  serversLoading: boolean
-  showEnvVars: boolean
-  activeInputField: 'url' | 'header-key' | 'header-value' | null
-  activeHeaderIndex: number | null
-  envSearchTerm: string
-  cursorPosition: number
-  urlScrollLeft: number
-  headerScrollLeft: Record<string, number>
-  workspaceId: string
-  urlInputRef: React.RefObject<HTMLInputElement | null>
-  onNameChange: (value: string) => void
-  onInputChange: (
-    field: 'url' | 'header-key' | 'header-value',
-    value: string,
-    index?: number
-  ) => void
-  onUrlScroll: (scrollLeft: number) => void
-  onHeaderScroll: (key: string, scrollLeft: number) => void
-  onEnvVarSelect: (value: string) => void
-  onEnvVarClose: () => void
-  onAddHeader: () => void
-  onRemoveHeader: (key: string) => void
-  onTestConnection: () => void
-  onCancel: () => void
-  onAddServer: () => void
-  onClearTestResult: () => void
-}
-
-export function AddServerForm({
-  formData,
-  testResult,
-  isTestingConnection,
-  isAddingServer,
-  serversLoading,
-  showEnvVars,
-  activeInputField,
-  activeHeaderIndex,
-  envSearchTerm,
-  cursorPosition,
-  urlScrollLeft,
-  headerScrollLeft,
-  workspaceId,
-  urlInputRef,
-  onNameChange,
-  onInputChange,
-  onUrlScroll,
-  onHeaderScroll,
-  onEnvVarSelect,
-  onEnvVarClose,
-  onAddHeader,
-  onRemoveHeader,
-  onTestConnection,
-  onCancel,
-  onAddServer,
-  onClearTestResult,
-}: AddServerFormProps) {
-  return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
-      <div className='space-y-1.5'>
-        <div className='flex items-center justify-between gap-3'>
-          <Label className='w-[100px] shrink-0 font-normal text-sm'>Server Name</Label>
-          <div className='flex-1'>
-            <Input
-              placeholder='e.g., My MCP Server'
-              value={formData.name}
-              onChange={(e) => {
-                if (testResult) onClearTestResult()
-                onNameChange(e.target.value)
-              }}
-              className='h-9'
-            />
-          </div>
-        </div>
-
-        <div className='flex items-center justify-between gap-3'>
-          <Label className='w-[100px] shrink-0 font-normal text-sm'>Server URL</Label>
-          <div className='relative flex-1'>
-            <Input
-              ref={urlInputRef}
-              placeholder='https://mcp.server.dev/{{YOUR_API_KEY}}/sse'
-              value={formData.url}
-              onChange={(e) => onInputChange('url', e.target.value)}
-              onScroll={(e) => onUrlScroll(e.currentTarget.scrollLeft)}
-              onInput={(e) => onUrlScroll(e.currentTarget.scrollLeft)}
-              className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-            />
-            {/* Overlay for styled text display */}
-            <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-              <div
-                className='whitespace-nowrap'
-                style={{ transform: `translateX(-${urlScrollLeft}px)` }}
-              >
-                {formatDisplayText(formData.url || '')}
-              </div>
-            </div>
-
-            {/* Environment Variables Dropdown */}
-            {showEnvVars && activeInputField === 'url' && (
-              <EnvVarDropdown
-                visible={showEnvVars}
-                onSelect={onEnvVarSelect}
-                searchTerm={envSearchTerm}
-                inputValue={formData.url || ''}
-                cursorPosition={cursorPosition}
-                workspaceId={workspaceId}
-                onClose={onEnvVarClose}
-                className='w-full'
-                maxHeight='200px'
-                style={{
-                  position: 'absolute',
-                  top: '100%',
-                  left: 0,
-                  zIndex: 99999,
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {Object.entries(formData.headers || {}).map(([key, value], index) => (
-          <div key={index} className='relative flex items-center justify-between gap-3'>
-            <Label className='w-[100px] shrink-0 font-normal text-sm'>Header</Label>
-            <div className='relative flex flex-1 gap-2'>
-              {/* Header Key Input */}
-              <div className='relative flex-1'>
-                <Input
-                  placeholder='Name'
-                  value={key}
-                  onChange={(e) => onInputChange('header-key', e.target.value, index)}
-                  onScroll={(e) => onHeaderScroll(`key-${index}`, e.currentTarget.scrollLeft)}
-                  onInput={(e) => onHeaderScroll(`key-${index}`, e.currentTarget.scrollLeft)}
-                  className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-                />
-                <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-                  <div
-                    className='whitespace-nowrap'
-                    style={{
-                      transform: `translateX(-${headerScrollLeft[`key-${index}`] || 0}px)`,
-                    }}
-                  >
-                    {formatDisplayText(key || '')}
-                  </div>
-                </div>
-              </div>
-
-              {/* Header Value Input */}
-              <div className='relative flex-1'>
-                <Input
-                  placeholder='Value'
-                  value={value}
-                  onChange={(e) => onInputChange('header-value', e.target.value, index)}
-                  onScroll={(e) => onHeaderScroll(`value-${index}`, e.currentTarget.scrollLeft)}
-                  onInput={(e) => onHeaderScroll(`value-${index}`, e.currentTarget.scrollLeft)}
-                  className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-                />
-                <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-                  <div
-                    className='whitespace-nowrap'
-                    style={{
-                      transform: `translateX(-${headerScrollLeft[`value-${index}`] || 0}px)`,
-                    }}
-                  >
-                    {formatDisplayText(value || '')}
-                  </div>
-                </div>
-              </div>
-
-              <Button
-                type='button'
-                variant='ghost'
-                onClick={() => onRemoveHeader(key)}
-                className='h-9 w-9 p-0 text-muted-foreground hover:text-foreground'
-              >
-                <X className='h-3 w-3' />
-              </Button>
-
-              {/* Environment Variables Dropdown for Header Key */}
-              {showEnvVars && activeInputField === 'header-key' && activeHeaderIndex === index && (
-                <EnvVarDropdown
-                  visible={showEnvVars}
-                  onSelect={onEnvVarSelect}
-                  searchTerm={envSearchTerm}
-                  inputValue={key}
-                  cursorPosition={cursorPosition}
-                  workspaceId={workspaceId}
-                  onClose={onEnvVarClose}
-                  className='w-full'
-                  maxHeight='200px'
-                  style={{
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    zIndex: 99999,
-                  }}
-                />
-              )}
-
-              {/* Environment Variables Dropdown for Header Value */}
-              {showEnvVars &&
-                activeInputField === 'header-value' &&
-                activeHeaderIndex === index && (
-                  <EnvVarDropdown
-                    visible={showEnvVars}
-                    onSelect={onEnvVarSelect}
-                    searchTerm={envSearchTerm}
-                    inputValue={value}
-                    cursorPosition={cursorPosition}
-                    workspaceId={workspaceId}
-                    onClose={onEnvVarClose}
-                    className='w-full'
-                    maxHeight='200px'
-                    style={{
-                      position: 'absolute',
-                      top: '100%',
-                      left: 0,
-                      zIndex: 99999,
-                    }}
-                  />
-                )}
-            </div>
-          </div>
-        ))}
-
-        <div className='flex items-center justify-between gap-3'>
-          <div className='w-[100px] shrink-0' />
-          <div className='flex-1'>
-            <Button
-              type='button'
-              variant='outline'
-              onClick={onAddHeader}
-              className='h-9 text-muted-foreground hover:text-foreground'
-            >
-              <Plus className='mr-2 h-3 w-3' />
-              Add Header
-            </Button>
-          </div>
-        </div>
-
-        <div className='border-border border-t pt-2'>
-          <div className='space-y-1.5'>
-            {/* Error message above buttons */}
-            {testResult && !testResult.success && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {testResult.error || testResult.message}
-              </p>
-            )}
-
-            {/* Buttons row */}
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <Button
-                  variant='ghost'
-                  onClick={onTestConnection}
-                  disabled={isTestingConnection || !formData.name.trim() || !formData.url?.trim()}
-                  className='h-9 text-muted-foreground hover:text-foreground'
-                >
-                  {isTestingConnection ? 'Testing...' : 'Test Connection'}
-                </Button>
-                {testResult?.success && (
-                  <span className='text-muted-foreground text-xs'>✓ Connected</span>
-                )}
-              </div>
-              <div className='flex items-center gap-2'>
-                <Button
-                  variant='ghost'
-                  onClick={onCancel}
-                  className='h-9 text-muted-foreground hover:text-foreground'
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={onAddServer}
-                  disabled={
-                    serversLoading ||
-                    isAddingServer ||
-                    !formData.name.trim() ||
-                    !formData.url?.trim()
-                  }
-                  className='h-9 rounded-[8px]'
-                >
-                  {serversLoading || isAddingServer ? 'Adding...' : 'Add Server'}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx
new file mode 100644
index 000000000..9e9f61887
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx
@@ -0,0 +1,17 @@
+import { Label } from '@/components/emcn'
+
+interface FormFieldProps {
+  label: string
+  children: React.ReactNode
+}
+
+export function FormField({ label, children }: FormFieldProps) {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <Label className='w-[100px] shrink-0 font-medium text-[13px] text-[var(--text-secondary)]'>
+        {label}
+      </Label>
+      <div className='relative flex-1'>{children}</div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
new file mode 100644
index 000000000..8b52447b2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
@@ -0,0 +1,66 @@
+import { Input } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
+import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import type { EnvVarDropdownConfig } from '../types'
+
+interface FormattedInputProps {
+  ref?: React.RefObject<HTMLInputElement | null>
+  placeholder: string
+  value: string
+  scrollLeft: number
+  showEnvVars: boolean
+  envVarProps: EnvVarDropdownConfig
+  className?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onScroll: (scrollLeft: number) => void
+}
+
+export function FormattedInput({
+  ref,
+  placeholder,
+  value,
+  scrollLeft,
+  showEnvVars,
+  envVarProps,
+  className,
+  onChange,
+  onScroll,
+}: FormattedInputProps) {
+  const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
+    onScroll(e.currentTarget.scrollLeft)
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <Input
+        ref={ref}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onScroll={handleScroll}
+        onInput={handleScroll}
+        className='h-9 text-transparent caret-foreground placeholder:text-[var(--text-tertiary)]'
+      />
+      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-[8px] py-[6px] font-medium font-sans text-sm'>
+        <div className='whitespace-nowrap' style={{ transform: `translateX(-${scrollLeft}px)` }}>
+          {formatDisplayText(value)}
+        </div>
+      </div>
+      {showEnvVars && (
+        <EnvVarDropdown
+          visible={showEnvVars}
+          onSelect={envVarProps.onSelect}
+          searchTerm={envVarProps.searchTerm}
+          inputValue={value}
+          cursorPosition={envVarProps.cursorPosition}
+          workspaceId={envVarProps.workspaceId}
+          onClose={envVarProps.onClose}
+          className='w-full'
+          maxHeight='200px'
+          style={{ position: 'absolute', top: '100%', left: 0, zIndex: 99999 }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx
new file mode 100644
index 000000000..06198447b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx
@@ -0,0 +1,81 @@
+import { X } from 'lucide-react'
+import { Button } from '@/components/emcn'
+import { FormattedInput } from '../formatted-input/formatted-input'
+import type { EnvVarDropdownConfig, HeaderEntry, InputFieldType } from '../types'
+
+interface HeaderRowProps {
+  header: HeaderEntry
+  index: number
+  headerScrollLeft: Record<string, number>
+  showEnvVars: boolean
+  activeInputField: InputFieldType | null
+  activeHeaderIndex: number | null
+  envSearchTerm: string
+  cursorPosition: number
+  workspaceId: string
+  onInputChange: (field: InputFieldType, value: string, index?: number) => void
+  onHeaderScroll: (key: string, scrollLeft: number) => void
+  onEnvVarSelect: (value: string) => void
+  onEnvVarClose: () => void
+  onRemove: () => void
+}
+
+export function HeaderRow({
+  header,
+  index,
+  headerScrollLeft,
+  showEnvVars,
+  activeInputField,
+  activeHeaderIndex,
+  envSearchTerm,
+  cursorPosition,
+  workspaceId,
+  onInputChange,
+  onHeaderScroll,
+  onEnvVarSelect,
+  onEnvVarClose,
+  onRemove,
+}: HeaderRowProps) {
+  const isKeyActive =
+    showEnvVars && activeInputField === 'header-key' && activeHeaderIndex === index
+  const isValueActive =
+    showEnvVars && activeInputField === 'header-value' && activeHeaderIndex === index
+
+  const envVarProps: EnvVarDropdownConfig = {
+    searchTerm: envSearchTerm,
+    cursorPosition,
+    workspaceId,
+    onSelect: onEnvVarSelect,
+    onClose: onEnvVarClose,
+  }
+
+  return (
+    <div className='relative flex items-center gap-[8px]'>
+      <FormattedInput
+        placeholder='Name'
+        value={header.key || ''}
+        scrollLeft={headerScrollLeft[`key-${index}`] || 0}
+        showEnvVars={isKeyActive}
+        envVarProps={envVarProps}
+        className='flex-1'
+        onChange={(e) => onInputChange('header-key', e.target.value, index)}
+        onScroll={(scrollLeft) => onHeaderScroll(`key-${index}`, scrollLeft)}
+      />
+
+      <FormattedInput
+        placeholder='Value'
+        value={header.value || ''}
+        scrollLeft={headerScrollLeft[`value-${index}`] || 0}
+        showEnvVars={isValueActive}
+        envVarProps={envVarProps}
+        className='flex-1'
+        onChange={(e) => onInputChange('header-value', e.target.value, index)}
+        onScroll={(scrollLeft) => onHeaderScroll(`value-${index}`, scrollLeft)}
+      />
+
+      <Button type='button' variant='ghost' onClick={onRemove} className='h-6 w-6 shrink-0 p-0'>
+        <X className='h-3 w-3' />
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts
new file mode 100644
index 000000000..7e68b4157
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts
@@ -0,0 +1,12 @@
+export { FormField } from './form-field/form-field'
+export { FormattedInput } from './formatted-input/formatted-input'
+export { HeaderRow } from './header-row/header-row'
+export { McpServerSkeleton } from './mcp-server-skeleton/mcp-server-skeleton'
+export { ServerListItem } from './server-list-item/server-list-item'
+export type {
+  EnvVarDropdownConfig,
+  HeaderEntry,
+  InputFieldType,
+  McpServerFormData,
+  McpServerTestResult,
+} from './types'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
new file mode 100644
index 000000000..5c84f70ab
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/ui'
+
+/**
+ * Skeleton loader for MCP server list items.
+ * Matches the structure of ServerListItem component.
+ */
+export function McpServerSkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Skeleton className='h-[14px] w-[100px]' />
+          <Skeleton className='h-[13px] w-[80px]' />
+        </div>
+        <Skeleton className='h-[13px] w-[120px]' />
+      </div>
+      <Skeleton className='h-[30px] w-[54px] flex-shrink-0 rounded-[4px]' />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
new file mode 100644
index 000000000..9993b905d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
@@ -0,0 +1,54 @@
+import { Button } from '@/components/emcn'
+
+/**
+ * Formats transport type for display (e.g., "streamable-http" -> "Streamable-HTTP").
+ */
+function formatTransportLabel(transport: string): string {
+  return transport
+    .split('-')
+    .map((word) =>
+      ['http', 'sse', 'stdio'].includes(word.toLowerCase())
+        ? word.toUpperCase()
+        : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join('-')
+}
+
+/**
+ * Formats tools count and names for display.
+ */
+function formatToolsLabel(tools: any[]): string {
+  const count = tools.length
+  const plural = count !== 1 ? 's' : ''
+  const names = count > 0 ? `: ${tools.map((t) => t.name).join(', ')}` : ''
+  return `${count} tool${plural}${names}`
+}
+
+interface ServerListItemProps {
+  server: any
+  tools: any[]
+  isDeleting: boolean
+  onRemove: () => void
+}
+
+export function ServerListItem({ server, tools, isDeleting, onRemove }: ServerListItemProps) {
+  const transportLabel = formatTransportLabel(server.transport || 'http')
+  const toolsLabel = formatToolsLabel(tools)
+
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <span className='max-w-[280px] truncate font-medium text-[14px]'>
+            {server.name || 'Unnamed Server'}
+          </span>
+          <span className='text-[13px] text-[var(--text-secondary)]'>({transportLabel})</span>
+        </div>
+        <p className='truncate text-[13px] text-[var(--text-muted)]'>{toolsLabel}</p>
+      </div>
+      <Button variant='ghost' className='flex-shrink-0' onClick={onRemove} disabled={isDeleting}>
+        {isDeleting ? 'Deleting...' : 'Delete'}
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts
new file mode 100644
index 000000000..5b1bfd90d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts
@@ -0,0 +1,35 @@
+import type { McpTransport } from '@/lib/mcp/types'
+
+/**
+ * Represents a single header entry in the form.
+ * Using an array of objects allows duplicate keys during editing.
+ */
+export interface HeaderEntry {
+  key: string
+  value: string
+}
+
+export interface McpServerFormData {
+  name: string
+  transport: McpTransport
+  url?: string
+  timeout?: number
+  headers?: HeaderEntry[]
+}
+
+export interface McpServerTestResult {
+  success: boolean
+  message?: string
+  error?: string
+  warnings?: string[]
+}
+
+export type InputFieldType = 'url' | 'header-key' | 'header-value'
+
+export interface EnvVarDropdownConfig {
+  searchTerm: string
+  cursorPosition: number
+  workspaceId: string
+  onSelect: (value: string) => void
+  onClose: () => void
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
index 8b45d2050..455df8078 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
@@ -1,15 +1,19 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Button } from '@/components/emcn'
-import { Input, Skeleton } from '@/components/ui'
+import { Button, Input as EmcnInput } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Input } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import { createMcpToolId } from '@/lib/mcp/utils'
 import { checkEnvVarTrigger } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
-import { AddServerForm } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form'
-import type { McpServerFormData } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types'
 import {
   useCreateMcpServer,
   useDeleteMcpServer,
@@ -17,9 +21,42 @@ import {
   useMcpToolsQuery,
 } from '@/hooks/queries/mcp'
 import { useMcpServerTest } from '@/hooks/use-mcp-server-test'
+import type { InputFieldType, McpServerFormData, McpServerTestResult } from './components'
+import {
+  FormattedInput,
+  FormField,
+  HeaderRow,
+  McpServerSkeleton,
+  ServerListItem,
+} from './components'
 
 const logger = createLogger('McpSettings')
 
+const DEFAULT_FORM_DATA: McpServerFormData = {
+  name: '',
+  transport: 'streamable-http',
+  url: '',
+  timeout: 30000,
+  headers: [{ key: '', value: '' }],
+}
+
+/**
+ * Determines the label for the test connection button based on current state.
+ */
+function getTestButtonLabel(
+  testResult: McpServerTestResult | null,
+  isTestingConnection: boolean
+): string {
+  if (isTestingConnection) return 'Testing...'
+  if (testResult?.success) return 'Connection success'
+  if (testResult && !testResult.success) return 'No connection: retry'
+  return 'Test Connection'
+}
+
+/**
+ * MCP Settings component for managing Model Context Protocol servers.
+ * Handles server CRUD operations, connection testing, and environment variable integration.
+ */
 export function MCP() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -32,62 +69,88 @@ export function MCP() {
   const { data: mcpToolsData = [], error: toolsError } = useMcpToolsQuery(workspaceId)
   const createServerMutation = useCreateMcpServer()
   const deleteServerMutation = useDeleteMcpServer()
+  const { testResult, isTestingConnection, testConnection, clearTestResult } = useMcpServerTest()
 
+  const urlInputRef = useRef<HTMLInputElement>(null)
+
+  // Form state
   const [showAddForm, setShowAddForm] = useState(false)
+  const [formData, setFormData] = useState<McpServerFormData>(DEFAULT_FORM_DATA)
+  const [isAddingServer, setIsAddingServer] = useState(false)
+
+  // Search and filtering state
   const [searchTerm, setSearchTerm] = useState('')
   const [deletingServers, setDeletingServers] = useState<Set<string>>(new Set())
-  const [formData, setFormData] = useState<McpServerFormData>({
-    name: '',
-    transport: 'streamable-http',
-    url: '',
-    timeout: 30000,
-    headers: {},
-  })
 
+  // Delete confirmation dialog state
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [serverToDelete, setServerToDelete] = useState<{ id: string; name: string } | null>(null)
+
+  // Environment variable dropdown state
   const [showEnvVars, setShowEnvVars] = useState(false)
   const [envSearchTerm, setEnvSearchTerm] = useState('')
   const [cursorPosition, setCursorPosition] = useState(0)
-  const [activeInputField, setActiveInputField] = useState<
-    'url' | 'header-key' | 'header-value' | null
-  >(null)
+  const [activeInputField, setActiveInputField] = useState<InputFieldType | null>(null)
   const [activeHeaderIndex, setActiveHeaderIndex] = useState<number | null>(null)
-  const urlInputRef = useRef<HTMLInputElement>(null)
-
-  const { testResult, isTestingConnection, testConnection, clearTestResult } = useMcpServerTest()
-
-  const [isAddingServer, setIsAddingServer] = useState(false)
 
+  // Scroll position state for formatted text overlays
   const [urlScrollLeft, setUrlScrollLeft] = useState(0)
   const [headerScrollLeft, setHeaderScrollLeft] = useState<Record<string, number>>({})
 
+  /**
+   * Resets environment variable dropdown state.
+   */
+  const resetEnvVarState = useCallback(() => {
+    setShowEnvVars(false)
+    setActiveInputField(null)
+    setActiveHeaderIndex(null)
+  }, [])
+
+  /**
+   * Resets the form to its default state.
+   */
+  const resetForm = useCallback(() => {
+    setFormData(DEFAULT_FORM_DATA)
+    setShowAddForm(false)
+    resetEnvVarState()
+    clearTestResult()
+  }, [clearTestResult, resetEnvVarState])
+
+  /**
+   * Updates a header field at the specified index.
+   */
+  const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
+    setFormData((prev) => {
+      const newHeaders = [...(prev.headers || [])]
+      if (newHeaders[index]) {
+        newHeaders[index] = { ...newHeaders[index], [field]: value }
+      }
+      return { ...prev, headers: newHeaders }
+    })
+  }, [])
+
+  /**
+   * Handles environment variable selection and updates the appropriate field.
+   */
   const handleEnvVarSelect = useCallback(
     (newValue: string) => {
       if (activeInputField === 'url') {
         setFormData((prev) => ({ ...prev, url: newValue }))
-      } else if (activeInputField === 'header-key' && activeHeaderIndex !== null) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [oldKey, value] = headerEntries[activeHeaderIndex]
-        const newHeaders = { ...formData.headers }
-        delete newHeaders[oldKey]
-        newHeaders[newValue.replace(/[{}]/g, '')] = value
-        setFormData((prev) => ({ ...prev, headers: newHeaders }))
-      } else if (activeInputField === 'header-value' && activeHeaderIndex !== null) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [key] = headerEntries[activeHeaderIndex]
-        setFormData((prev) => ({
-          ...prev,
-          headers: { ...prev.headers, [key]: newValue },
-        }))
+      } else if (activeHeaderIndex !== null) {
+        const field = activeInputField === 'header-key' ? 'key' : 'value'
+        const processedValue = field === 'key' ? newValue.replace(/[{}]/g, '') : newValue
+        updateHeader(activeHeaderIndex, field, processedValue)
       }
-      setShowEnvVars(false)
-      setActiveInputField(null)
-      setActiveHeaderIndex(null)
+      resetEnvVarState()
     },
-    [activeInputField, activeHeaderIndex, formData.headers]
+    [activeInputField, activeHeaderIndex, updateHeader, resetEnvVarState]
   )
 
+  /**
+   * Handles input changes and manages environment variable dropdown visibility.
+   */
   const handleInputChange = useCallback(
-    (field: 'url' | 'header-key' | 'header-value', value: string, headerIndex?: number) => {
+    (field: InputFieldType, value: string, headerIndex?: number) => {
       const input = document.activeElement as HTMLInputElement
       const pos = input?.selectionStart || 0
 
@@ -105,31 +168,39 @@ export function MCP() {
         setActiveInputField(field)
         setActiveHeaderIndex(headerIndex ?? null)
       } else {
-        setActiveInputField(null)
-        setActiveHeaderIndex(null)
+        resetEnvVarState()
       }
 
       if (field === 'url') {
         setFormData((prev) => ({ ...prev, url: value }))
-      } else if (field === 'header-key' && headerIndex !== undefined) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [oldKey, headerValue] = headerEntries[headerIndex]
-        const newHeaders = { ...formData.headers }
-        delete newHeaders[oldKey]
-        newHeaders[value] = headerValue
-        setFormData((prev) => ({ ...prev, headers: newHeaders }))
-      } else if (field === 'header-value' && headerIndex !== undefined) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [key] = headerEntries[headerIndex]
-        setFormData((prev) => ({
-          ...prev,
-          headers: { ...prev.headers, [key]: value },
-        }))
+      } else if (headerIndex !== undefined) {
+        const headerField = field === 'header-key' ? 'key' : 'value'
+        updateHeader(headerIndex, headerField, value)
       }
     },
-    [formData.headers]
+    [testResult, clearTestResult, updateHeader, resetEnvVarState]
   )
 
+  /**
+   * Converts headers array to Record format for API calls.
+   * Filters out entries with empty keys.
+   */
+  const headersToRecord = useCallback(
+    (headers: typeof formData.headers): Record<string, string> => {
+      const record: Record<string, string> = {}
+      for (const header of headers || []) {
+        if (header.key.trim()) {
+          record[header.key] = header.value
+        }
+      }
+      return record
+    },
+    []
+  )
+
+  /**
+   * Tests the connection to the MCP server with current form data.
+   */
   const handleTestConnection = useCallback(async () => {
     if (!formData.name.trim() || !formData.url?.trim()) return
 
@@ -137,35 +208,37 @@ export function MCP() {
       name: formData.name,
       transport: formData.transport,
       url: formData.url,
-      headers: formData.headers,
+      headers: headersToRecord(formData.headers),
       timeout: formData.timeout,
       workspaceId,
     })
-  }, [formData, testConnection, workspaceId])
+  }, [formData, testConnection, workspaceId, headersToRecord])
 
+  /**
+   * Adds a new MCP server after validating and testing the connection.
+   */
   const handleAddServer = useCallback(async () => {
     if (!formData.name.trim()) return
 
     setIsAddingServer(true)
     try {
+      const headersRecord = headersToRecord(formData.headers)
+      const serverConfig = {
+        name: formData.name,
+        transport: formData.transport,
+        url: formData.url,
+        headers: headersRecord,
+        timeout: formData.timeout,
+        workspaceId,
+      }
+
+      // Test connection if not already tested
       if (!testResult) {
-        const result = await testConnection({
-          name: formData.name,
-          transport: formData.transport,
-          url: formData.url,
-          headers: formData.headers,
-          timeout: formData.timeout,
-          workspaceId,
-        })
-
-        if (!result.success) {
-          return
-        }
+        const result = await testConnection(serverConfig)
+        if (!result.success) return
       }
 
-      if (testResult && !testResult.success) {
-        return
-      }
+      if (testResult && !testResult.success) return
 
       await createServerMutation.mutateAsync({
         workspaceId,
@@ -174,319 +247,320 @@ export function MCP() {
           transport: formData.transport,
           url: formData.url,
           timeout: formData.timeout || 30000,
-          headers: formData.headers,
+          headers: headersRecord,
           enabled: true,
         },
       })
 
       logger.info(`Added MCP server: ${formData.name}`)
-
-      setFormData({
-        name: '',
-        transport: 'streamable-http',
-        url: '',
-        timeout: 30000,
-        headers: {},
-      })
-      setShowAddForm(false)
-      setShowEnvVars(false)
-      setActiveInputField(null)
-      setActiveHeaderIndex(null)
-      clearTestResult()
+      resetForm()
     } catch (error) {
       logger.error('Failed to add MCP server:', error)
     } finally {
       setIsAddingServer(false)
     }
-  }, [formData, testResult, testConnection, createServerMutation, clearTestResult, workspaceId])
+  }, [
+    formData,
+    testResult,
+    testConnection,
+    createServerMutation,
+    workspaceId,
+    headersToRecord,
+    resetForm,
+  ])
 
-  const handleRemoveServer = useCallback(
-    async (serverId: string) => {
-      setDeletingServers((prev) => new Set(prev).add(serverId))
+  /**
+   * Opens the delete confirmation dialog for an MCP server.
+   */
+  const handleRemoveServer = useCallback((serverId: string, serverName: string) => {
+    setServerToDelete({ id: serverId, name: serverName })
+    setShowDeleteDialog(true)
+  }, [])
 
-      try {
-        await deleteServerMutation.mutateAsync({ workspaceId, serverId })
+  /**
+   * Confirms and executes the server deletion.
+   */
+  const confirmDeleteServer = useCallback(async () => {
+    if (!serverToDelete) return
 
-        logger.info(`Removed MCP server: ${serverId}`)
-      } catch (error) {
-        logger.error('Failed to remove MCP server:', error)
-        setDeletingServers((prev) => {
-          const newSet = new Set(prev)
-          newSet.delete(serverId)
-          return newSet
-        })
-      } finally {
-        setDeletingServers((prev) => {
-          const newSet = new Set(prev)
-          newSet.delete(serverId)
-          return newSet
-        })
-      }
-    },
-    [deleteServerMutation, workspaceId]
-  )
+    setShowDeleteDialog(false)
+    const { id: serverId, name: serverName } = serverToDelete
+    setServerToDelete(null)
 
-  const toolsByServer = (mcpToolsData || []).reduce(
-    (acc, tool) => {
-      if (!tool || !tool.serverId) {
+    setDeletingServers((prev) => new Set(prev).add(serverId))
+
+    try {
+      await deleteServerMutation.mutateAsync({ workspaceId, serverId })
+      logger.info(`Removed MCP server: ${serverName}`)
+    } catch (error) {
+      logger.error('Failed to remove MCP server:', error)
+    } finally {
+      setDeletingServers((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(serverId)
+        return newSet
+      })
+    }
+  }, [serverToDelete, deleteServerMutation, workspaceId])
+
+  /**
+   * Groups tools by their server ID for display.
+   */
+  const toolsByServer = useMemo(() => {
+    return (mcpToolsData || []).reduce(
+      (acc, tool) => {
+        if (!tool?.serverId) return acc
+        if (!acc[tool.serverId]) {
+          acc[tool.serverId] = []
+        }
+        acc[tool.serverId].push(tool)
         return acc
-      }
-      if (!acc[tool.serverId]) {
-        acc[tool.serverId] = []
-      }
-      acc[tool.serverId].push(tool)
-      return acc
-    },
-    {} as Record<string, typeof mcpToolsData>
-  )
+      },
+      {} as Record<string, typeof mcpToolsData>
+    )
+  }, [mcpToolsData])
 
-  const filteredServers = (servers || []).filter((server) =>
-    server.name?.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+  /**
+   * Filters servers based on search term.
+   */
+  const filteredServers = useMemo(() => {
+    return (servers || []).filter((server) =>
+      server.name?.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  }, [servers, searchTerm])
+
+  const handleNameChange = useCallback((value: string) => {
+    setFormData((prev) => ({ ...prev, name: value }))
+  }, [])
+
+  const handleUrlScroll = useCallback((scrollLeft: number) => {
+    setUrlScrollLeft(scrollLeft)
+  }, [])
+
+  const handleHeaderScroll = useCallback((key: string, scrollLeft: number) => {
+    setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
+  }, [])
+
+  const handleAddHeader = useCallback(() => {
+    setFormData((prev) => ({
+      ...prev,
+      headers: [...(prev.headers || []), { key: '', value: '' }],
+    }))
+  }, [])
+
+  const handleRemoveHeader = useCallback((index: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      headers: (prev.headers || []).filter((_, i) => i !== index),
+    }))
+  }, [])
+
+  const handleCancelForm = useCallback(() => {
+    setShowAddForm(false)
+  }, [])
+
+  const error = toolsError || serversError
+  const hasServers = servers && servers.length > 0
+  const showEmptyState = !hasServers && !showAddForm
+  const showNoResults = searchTerm.trim() && filteredServers.length === 0 && servers.length > 0
+
+  // Form validation state
+  const isFormValid = formData.name.trim() && formData.url?.trim()
+  const isSubmitDisabled = serversLoading || isAddingServer || !isFormValid
+  const testButtonLabel = getTestButtonLabel(testResult, isTestingConnection)
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header with Search */}
-      <div className='px-6 pt-4 pb-2'>
-        {/* Search Input */}
-        {serversLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
             <Input
-              placeholder='Search servers...'
+              placeholder='Search MCPs...'
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
             />
           </div>
-        )}
-      </div>
+          <Button
+            onClick={() => setShowAddForm(!showAddForm)}
+            variant='primary'
+            disabled={serversLoading}
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+        </div>
 
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
-          {/* Server List */}
-          {toolsError || serversError ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
+        {showAddForm && !serversLoading && (
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-[10px]'>
+            <div className='flex flex-col gap-[8px]'>
+              <FormField label='Server Name'>
+                <EmcnInput
+                  placeholder='e.g., My MCP Server'
+                  value={formData.name}
+                  onChange={(e) => {
+                    if (testResult) clearTestResult()
+                    handleNameChange(e.target.value)
+                  }}
+                  className='h-9'
+                />
+              </FormField>
+
+              <FormField label='Server URL'>
+                <FormattedInput
+                  ref={urlInputRef}
+                  placeholder='https://mcp.server.dev/{{YOUR_API_KEY}}/sse'
+                  value={formData.url || ''}
+                  scrollLeft={urlScrollLeft}
+                  showEnvVars={showEnvVars && activeInputField === 'url'}
+                  envVarProps={{
+                    searchTerm: envSearchTerm,
+                    cursorPosition,
+                    workspaceId,
+                    onSelect: handleEnvVarSelect,
+                    onClose: resetEnvVarState,
+                  }}
+                  onChange={(e) => handleInputChange('url', e.target.value)}
+                  onScroll={(scrollLeft) => handleUrlScroll(scrollLeft)}
+                />
+              </FormField>
+
+              <div className='flex flex-col gap-[8px]'>
+                <div className='flex items-center justify-between'>
+                  <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Headers
+                  </span>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={handleAddHeader}
+                    className='h-6 w-6 p-0'
+                  >
+                    <Plus className='h-3 w-3' />
+                  </Button>
+                </div>
+
+                <div className='flex max-h-[140px] flex-col gap-[8px] overflow-y-auto'>
+                  {(formData.headers || []).map((header, index) => (
+                    <HeaderRow
+                      key={index}
+                      header={header}
+                      index={index}
+                      headerScrollLeft={headerScrollLeft}
+                      showEnvVars={showEnvVars}
+                      activeInputField={activeInputField}
+                      activeHeaderIndex={activeHeaderIndex}
+                      envSearchTerm={envSearchTerm}
+                      cursorPosition={cursorPosition}
+                      workspaceId={workspaceId}
+                      onInputChange={handleInputChange}
+                      onHeaderScroll={handleHeaderScroll}
+                      onEnvVarSelect={handleEnvVarSelect}
+                      onEnvVarClose={resetEnvVarState}
+                      onRemove={() => handleRemoveHeader(index)}
+                    />
+                  ))}
+                </div>
+              </div>
+
+              <div className='flex items-center justify-between pt-[12px]'>
+                <Button
+                  variant='default'
+                  onClick={handleTestConnection}
+                  disabled={isTestingConnection || !isFormValid}
+                >
+                  {testButtonLabel}
+                </Button>
+
+                <div className='flex items-center gap-[8px]'>
+                  <Button variant='ghost' onClick={handleCancelForm}>
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleAddServer}
+                    disabled={isSubmitDisabled}
+                    className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                  >
+                    {isSubmitDisabled && isFormValid ? 'Adding...' : 'Add Server'}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {error ? (
+            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
               <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {toolsError instanceof Error
-                  ? toolsError.message
-                  : serversError instanceof Error
-                    ? serversError.message
-                    : 'Failed to load MCP servers'}
+                {error instanceof Error ? error.message : 'Failed to load MCP servers'}
               </p>
             </div>
           ) : serversLoading ? (
-            <div className='space-y-2'>
+            <div className='flex flex-col gap-[8px]'>
               <McpServerSkeleton />
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
-          ) : !servers || servers.length === 0 ? (
-            showAddForm ? (
-              <AddServerForm
-                formData={formData}
-                testResult={testResult}
-                isTestingConnection={isTestingConnection}
-                isAddingServer={isAddingServer}
-                serversLoading={serversLoading}
-                showEnvVars={showEnvVars}
-                activeInputField={activeInputField}
-                activeHeaderIndex={activeHeaderIndex}
-                envSearchTerm={envSearchTerm}
-                cursorPosition={cursorPosition}
-                urlScrollLeft={urlScrollLeft}
-                headerScrollLeft={headerScrollLeft}
-                workspaceId={workspaceId}
-                urlInputRef={urlInputRef}
-                onNameChange={(value) => setFormData((prev) => ({ ...prev, name: value }))}
-                onInputChange={handleInputChange}
-                onUrlScroll={(scrollLeft) => setUrlScrollLeft(scrollLeft)}
-                onHeaderScroll={(key, scrollLeft) =>
-                  setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
-                }
-                onEnvVarSelect={handleEnvVarSelect}
-                onEnvVarClose={() => {
-                  setShowEnvVars(false)
-                  setActiveInputField(null)
-                  setActiveHeaderIndex(null)
-                }}
-                onAddHeader={() =>
-                  setFormData((prev) => ({ ...prev, headers: { ...prev.headers, '': '' } }))
-                }
-                onRemoveHeader={(key) => {
-                  const newHeaders = { ...formData.headers }
-                  delete newHeaders[key]
-                  setFormData((prev) => ({ ...prev, headers: newHeaders }))
-                }}
-                onTestConnection={handleTestConnection}
-                onCancel={() => setShowAddForm(false)}
-                onAddServer={handleAddServer}
-                onClearTestResult={clearTestResult}
-              />
-            ) : (
-              !showAddForm && (
-                <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-                  Click "Add Server" below to get started
-                </div>
-              )
-            )
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
+            </div>
           ) : (
-            <div className='space-y-2'>
-              {filteredServers.map((server: any) => {
-                if (!server || !server.id) {
-                  return null
-                }
-
+            <div className='flex flex-col gap-[8px]'>
+              {filteredServers.map((server) => {
+                if (!server?.id) return null
                 const tools = toolsByServer[server.id] || []
 
                 return (
-                  <div key={server.id} className='flex flex-col gap-2'>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                          <code className='font-mono text-foreground text-xs'>
-                            {server.name || 'Unnamed Server'}
-                          </code>
-                        </div>
-                        <span className='text-muted-foreground text-xs'>
-                          {server.transport?.toUpperCase() || 'HTTP'}
-                        </span>
-                        <span className='text-muted-foreground text-xs'>•</span>
-                        <span className='text-muted-foreground text-xs'>
-                          {tools.length} tool{tools.length !== 1 ? 's' : ''}
-                        </span>
-                      </div>
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleRemoveServer(server.id)}
-                        disabled={deletingServers.has(server.id)}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        {deletingServers.has(server.id) ? 'Deleting...' : 'Delete'}
-                      </Button>
-                    </div>
-                    {tools.length > 0 && (
-                      <div className='mt-1 ml-2 flex flex-wrap gap-1'>
-                        {tools.map((tool) => (
-                          <span
-                            key={createMcpToolId(tool.serverId, tool.name)}
-                            className='inline-flex h-5 items-center rounded bg-muted/50 px-2 text-muted-foreground text-xs'
-                          >
-                            {tool.name}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
+                  <ServerListItem
+                    key={server.id}
+                    server={server}
+                    tools={tools}
+                    isDeleting={deletingServers.has(server.id)}
+                    onRemove={() => handleRemoveServer(server.id, server.name || 'this server')}
+                  />
                 )
               })}
-              {/* Show message when search has no results but there are servers */}
-              {searchTerm.trim() && filteredServers.length === 0 && servers.length > 0 && (
-                <div className='py-8 text-center text-muted-foreground text-sm'>
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
                   No servers found matching "{searchTerm}"
                 </div>
               )}
-
-              {/* Add Server Form for when servers exist */}
-              {showAddForm && (
-                <div className='mt-2'>
-                  <AddServerForm
-                    formData={formData}
-                    testResult={testResult}
-                    isTestingConnection={isTestingConnection}
-                    isAddingServer={isAddingServer}
-                    serversLoading={serversLoading}
-                    showEnvVars={showEnvVars}
-                    activeInputField={activeInputField}
-                    activeHeaderIndex={activeHeaderIndex}
-                    envSearchTerm={envSearchTerm}
-                    cursorPosition={cursorPosition}
-                    urlScrollLeft={urlScrollLeft}
-                    headerScrollLeft={headerScrollLeft}
-                    workspaceId={workspaceId}
-                    urlInputRef={urlInputRef}
-                    onNameChange={(value) => setFormData((prev) => ({ ...prev, name: value }))}
-                    onInputChange={handleInputChange}
-                    onUrlScroll={(scrollLeft) => setUrlScrollLeft(scrollLeft)}
-                    onHeaderScroll={(key, scrollLeft) =>
-                      setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
-                    }
-                    onEnvVarSelect={handleEnvVarSelect}
-                    onEnvVarClose={() => {
-                      setShowEnvVars(false)
-                      setActiveInputField(null)
-                      setActiveHeaderIndex(null)
-                    }}
-                    onAddHeader={() =>
-                      setFormData((prev) => ({ ...prev, headers: { ...prev.headers, '': '' } }))
-                    }
-                    onRemoveHeader={(key) => {
-                      const newHeaders = { ...formData.headers }
-                      delete newHeaders[key]
-                      setFormData((prev) => ({ ...prev, headers: newHeaders }))
-                    }}
-                    onTestConnection={handleTestConnection}
-                    onCancel={() => setShowAddForm(false)}
-                    onAddServer={handleAddServer}
-                    onClearTestResult={clearTestResult}
-                  />
-                </div>
-              )}
             </div>
           )}
         </div>
       </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
-          {serversLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <div className='w-[200px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={() => setShowAddForm(!showAddForm)}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                disabled={serversLoading}
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Add Server
-              </Button>
-              <div className='text-muted-foreground text-xs'>
-                Configure MCP servers to extend workflow capabilities
-              </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function McpServerSkeleton() {
-  return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-40 rounded-[8px]' /> {/* Server name */}
-          <Skeleton className='h-4 w-16' /> {/* Transport type */}
-          <Skeleton className='h-1 w-1 rounded-full' /> {/* Dot separator */}
-          <Skeleton className='h-4 w-12' /> {/* Tool count */}
-        </div>
-        <Skeleton className='h-8 w-16' /> {/* Delete button */}
-      </div>
-      <div className='mt-1 ml-2 flex flex-wrap gap-1'>
-        <Skeleton className='h-5 w-16 rounded' /> {/* Tool name 1 */}
-        <Skeleton className='h-5 w-20 rounded' /> {/* Tool name 2 */}
-        <Skeleton className='h-5 w-14 rounded' /> {/* Tool name 3 */}
-      </div>
-    </div>
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete MCP Server</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{serverToDelete?.name}</span>
+              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={confirmDeleteServer}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+            >
+              Delete
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts
deleted file mode 100644
index 15e6908a7..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { McpTransport } from '@/lib/mcp/types'
-
-export interface McpServerFormData {
-  name: string
-  transport: McpTransport
-  url?: string
-  timeout?: number
-  headers?: Record<string, string>
-}
-
-export interface McpServerTestResult {
-  success: boolean
-  message?: string
-  error?: string
-  warnings?: string[]
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx
deleted file mode 100644
index 003c68379..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Info } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
-
-const TOOLTIPS = {
-  telemetry:
-    'We collect anonymous data about feature usage, performance, and errors to improve the application.',
-}
-
-export function Privacy() {
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: settings } = useGeneralSettings()
-  const updateSetting = useUpdateGeneralSetting()
-
-  const handleTelemetryToggle = async (checked: boolean) => {
-    if (checked !== settings?.telemetryEnabled && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'telemetryEnabled', value: checked })
-
-      // Send telemetry event when enabling
-      if (checked) {
-        if (typeof window !== 'undefined') {
-          fetch('/api/telemetry', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              category: 'consent',
-              action: 'enable_from_settings',
-              timestamp: new Date().toISOString(),
-            }),
-          }).catch(() => {
-            // Silently fail - this is just telemetry
-          })
-        }
-      }
-    }
-  }
-
-  return (
-    <div className='px-6 pt-4 pb-2'>
-      <div className='flex flex-col gap-2'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='telemetry' className='font-normal'>
-              Allow anonymous telemetry
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about telemetry data collection'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.telemetry}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='telemetry'
-            checked={settings?.telemetryEnabled ?? true}
-            onCheckedChange={handleTelemetryToggle}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        <div className='border-t pt-4'>
-          <p className='text-muted-foreground text-xs'>
-            We use OpenTelemetry to collect anonymous usage data to improve Sim. All data is
-            collected in accordance with our privacy policy, and you can opt-out at any time. This
-            setting applies to your account on all devices.
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx
deleted file mode 100644
index 04bf7e9b1..000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import { useMemo } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-import {
-  Bot,
-  CreditCard,
-  FileCode,
-  Files,
-  Home,
-  Key,
-  LogIn,
-  Palette,
-  Server,
-  Settings,
-  Shield,
-  User,
-  Users,
-  Waypoints,
-  Wrench,
-} from 'lucide-react'
-import { useSession } from '@/lib/auth/auth-client'
-import { getSubscriptionStatus } from '@/lib/billing/client/utils'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { isHosted } from '@/lib/core/config/environment'
-import { cn } from '@/lib/core/utils/cn'
-import { getUserRole } from '@/lib/workspaces/organization/utils'
-import { generalSettingsKeys } from '@/hooks/queries/general-settings'
-import { organizationKeys, useOrganizations } from '@/hooks/queries/organization'
-import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
-import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
-
-const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
-
-interface SettingsNavigationProps {
-  activeSection: string
-  onSectionChange: (
-    section:
-      | 'general'
-      | 'environment'
-      | 'account'
-      | 'creator-profile'
-      | 'credentials'
-      | 'apikeys'
-      | 'files'
-      | 'subscription'
-      | 'team'
-      | 'sso'
-      | 'privacy'
-      | 'copilot'
-      | 'mcp'
-      | 'custom-tools'
-  ) => void
-  hasOrganization: boolean
-}
-
-type NavigationItem = {
-  id:
-    | 'general'
-    | 'environment'
-    | 'account'
-    | 'creator-profile'
-    | 'credentials'
-    | 'apikeys'
-    | 'files'
-    | 'subscription'
-    | 'team'
-    | 'sso'
-    | 'copilot'
-    | 'privacy'
-    | 'mcp'
-    | 'custom-tools'
-  label: string
-  icon: React.ComponentType<{ className?: string }>
-  hideWhenBillingDisabled?: boolean
-  requiresTeam?: boolean
-  requiresEnterprise?: boolean
-  requiresOwner?: boolean
-  requiresHosted?: boolean
-}
-
-const allNavigationItems: NavigationItem[] = [
-  {
-    id: 'general',
-    label: 'General',
-    icon: Settings,
-  },
-  {
-    id: 'credentials',
-    label: 'Integrations',
-    icon: Waypoints,
-  },
-  {
-    id: 'mcp',
-    label: 'MCP Servers',
-    icon: Server,
-  },
-  {
-    id: 'custom-tools',
-    label: 'Custom Tools',
-    icon: Wrench,
-  },
-  {
-    id: 'environment',
-    label: 'Environment',
-    icon: FileCode,
-  },
-  {
-    id: 'account',
-    label: 'Account',
-    icon: User,
-  },
-  {
-    id: 'creator-profile',
-    label: 'Creator Profile',
-    icon: Palette,
-  },
-  {
-    id: 'apikeys',
-    label: 'API Keys',
-    icon: Key,
-  },
-  {
-    id: 'files',
-    label: 'Files',
-    icon: Files,
-  },
-  {
-    id: 'copilot',
-    label: 'Copilot',
-    icon: Bot,
-    requiresHosted: true,
-  },
-  {
-    id: 'privacy',
-    label: 'Privacy',
-    icon: Shield,
-  },
-  {
-    id: 'subscription',
-    label: 'Subscription',
-    icon: CreditCard,
-    hideWhenBillingDisabled: true,
-  },
-  {
-    id: 'team',
-    label: 'Team',
-    icon: Users,
-    hideWhenBillingDisabled: true,
-    requiresTeam: true,
-  },
-  {
-    id: 'sso',
-    label: 'Single Sign-On',
-    icon: LogIn,
-    requiresTeam: true,
-    requiresEnterprise: true,
-    requiresOwner: true,
-  },
-]
-
-export function SettingsNavigation({
-  activeSection,
-  onSectionChange,
-  hasOrganization,
-}: SettingsNavigationProps) {
-  const { data: session } = useSession()
-  const queryClient = useQueryClient()
-  const { data: orgsData } = useOrganizations()
-  const { data: subscriptionData } = useSubscriptionData()
-  const activeOrg = orgsData?.activeOrganization
-  const userEmail = session?.user?.email
-  const userId = session?.user?.id
-  const userRole = getUserRole(activeOrg, userEmail)
-  const isOwner = userRole === 'owner'
-  const isAdmin = userRole === 'admin'
-  const canManageSSO = isOwner || isAdmin
-  const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
-  const hasEnterprisePlan = subscriptionStatus.isEnterprise
-
-  // Use React Query to check SSO provider ownership (with proper caching)
-  // Only fetch if not hosted (hosted uses billing/org checks)
-  const { data: ssoProvidersData, isLoading: isLoadingSSO } = useSSOProviders()
-
-  // Memoize SSO provider ownership check
-  const isSSOProviderOwner = useMemo(() => {
-    if (isHosted) return null
-    if (!userId || isLoadingSSO) return null
-    return ssoProvidersData?.providers?.some((p: any) => p.userId === userId) || false
-  }, [userId, isHosted, ssoProvidersData?.providers, isLoadingSSO])
-
-  // Memoize navigation items to avoid filtering on every render
-  const navigationItems = useMemo(() => {
-    return allNavigationItems.filter((item) => {
-      if (item.hideWhenBillingDisabled && !isBillingEnabled) {
-        return false
-      }
-
-      if (item.requiresTeam) {
-        const isMember = userRole === 'member' || isAdmin
-        const hasTeamPlan = subscriptionStatus.isTeam || subscriptionStatus.isEnterprise
-
-        if (isMember) return true
-        if (isOwner && hasTeamPlan) return true
-
-        return false
-      }
-
-      if (item.requiresEnterprise && !hasEnterprisePlan) {
-        return false
-      }
-
-      if (item.requiresHosted && !isHosted) {
-        return false
-      }
-
-      if (item.id === 'sso') {
-        if (isHosted) {
-          return hasOrganization && hasEnterprisePlan && canManageSSO
-        }
-        // For non-hosted, only show if we know the ownership status
-        return isSSOProviderOwner === true
-      }
-
-      if (item.requiresOwner && !isOwner) {
-        return false
-      }
-
-      return true
-    })
-  }, [hasOrganization, hasEnterprisePlan, canManageSSO, isSSOProviderOwner, isOwner])
-
-  // Prefetch functions for React Query
-  const prefetchGeneral = () => {
-    // Prefetch general settings using React Query
-    queryClient.prefetchQuery({
-      queryKey: generalSettingsKeys.settings(),
-      queryFn: async () => {
-        const response = await fetch('/api/users/me/settings')
-        if (!response.ok) {
-          throw new Error('Failed to fetch general settings')
-        }
-        const { data } = await response.json()
-        return {
-          autoConnect: data.autoConnect ?? true,
-          autoPan: data.autoPan ?? true,
-          consoleExpandedByDefault: data.consoleExpandedByDefault ?? true,
-          showFloatingControls: data.showFloatingControls ?? true,
-          showTrainingControls: data.showTrainingControls ?? false,
-          superUserModeEnabled: data.superUserModeEnabled ?? true,
-          theme: data.theme || 'system',
-          telemetryEnabled: data.telemetryEnabled ?? true,
-          billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
-        }
-      },
-      staleTime: 60 * 60 * 1000, // 1 hour
-    })
-  }
-
-  const prefetchSubscription = () => {
-    queryClient.prefetchQuery({
-      queryKey: subscriptionKeys.user(),
-      queryFn: async () => {
-        const response = await fetch('/api/billing?context=user')
-        if (!response.ok) {
-          throw new Error('Failed to fetch subscription data')
-        }
-        return response.json()
-      },
-      staleTime: 30 * 1000,
-    })
-  }
-
-  const prefetchOrganization = () => {
-    queryClient.prefetchQuery({
-      queryKey: organizationKeys.lists(),
-      queryFn: async () => {
-        const { client } = await import('@/lib/auth/auth-client')
-        const [orgsResponse, activeOrgResponse, billingResponse] = await Promise.all([
-          client.organization.list(),
-          client.organization.getFullOrganization(),
-          fetch('/api/billing?context=user').then((r) => r.json()),
-        ])
-
-        return {
-          organizations: orgsResponse.data || [],
-          activeOrganization: activeOrgResponse.data,
-          billingData: billingResponse,
-        }
-      },
-      staleTime: 30 * 1000,
-    })
-  }
-
-  const prefetchSSO = () => {
-    queryClient.prefetchQuery({
-      queryKey: ssoKeys.providers(),
-      queryFn: async () => {
-        const response = await fetch('/api/auth/sso/providers')
-        if (!response.ok) {
-          throw new Error('Failed to fetch SSO providers')
-        }
-        return response.json()
-      },
-      staleTime: 5 * 60 * 1000, // 5 minutes
-    })
-  }
-
-  const handleHomepageClick = () => {
-    window.location.href = '/?from=settings'
-  }
-
-  return (
-    <div className='h-full overflow-y-auto px-2 py-4'>
-      {navigationItems.map((item) => (
-        <div key={item.id} className='mb-1'>
-          <button
-            onMouseEnter={() => {
-              switch (item.id) {
-                case 'general':
-                  prefetchGeneral()
-                  break
-                case 'subscription':
-                  prefetchSubscription()
-                  break
-                case 'team':
-                  prefetchOrganization()
-                  break
-                case 'sso':
-                  prefetchSSO()
-                  break
-                default:
-                  break
-              }
-            }}
-            onClick={() => onSectionChange(item.id)}
-            data-section={item.id}
-            className={cn(
-              'group flex h-9 w-full cursor-pointer items-center rounded-[8px] px-2 py-2 font-medium font-sans text-sm transition-colors',
-              activeSection === item.id ? 'bg-muted' : 'hover:bg-muted'
-            )}
-          >
-            <item.icon
-              className={cn(
-                'mr-2 h-[14px] w-[14px] flex-shrink-0 transition-colors',
-                activeSection === item.id
-                  ? 'text-foreground'
-                  : 'text-muted-foreground group-hover:text-foreground'
-              )}
-            />
-            <span
-              className={cn(
-                'min-w-0 flex-1 select-none truncate pr-1 text-left transition-colors',
-                activeSection === item.id
-                  ? 'text-foreground'
-                  : 'text-muted-foreground group-hover:text-foreground'
-              )}
-            >
-              {item.label}
-            </span>
-          </button>
-        </div>
-      ))}
-
-      {/* Homepage link */}
-      {isHosted && (
-        <div className='mb-1'>
-          <button
-            onClick={handleHomepageClick}
-            className='group flex h-9 w-full cursor-pointer items-center rounded-[8px] px-2 py-2 font-medium font-sans text-sm transition-colors hover:bg-muted'
-          >
-            <Home className='mr-2 h-[14px] w-[14px] flex-shrink-0 text-muted-foreground transition-colors group-hover:text-foreground' />
-            <span className='min-w-0 flex-1 select-none truncate pr-1 text-left text-muted-foreground transition-colors group-hover:text-foreground'>
-              Homepage
-            </span>
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
index 062a978fb..371395d6c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
@@ -74,15 +74,17 @@ export function UsageHeader({
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
             {isBlocked ? (
-              <span className='font-medium text-[#B1B1B1] text-[12px]'>Payment required</span>
+              <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                Payment required
+              </span>
             ) : (
               <>
-                <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                   ${current.toFixed(2)}
                 </span>
-                <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
                 {rightContent ?? (
-                  <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                  <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                     ${limit}
                   </span>
                 )}
@@ -100,7 +102,11 @@ export function UsageHeader({
                 key={i}
                 className='h-[6px] flex-1 rounded-[2px]'
                 style={{
-                  backgroundColor: isFilled ? (isAlmostOut ? '#ef4444' : '#34B5FF') : '#414141',
+                  backgroundColor: isFilled
+                    ? isAlmostOut
+                      ? 'var(--text-error)'
+                      : '#34B5FF'
+                    : '#414141',
                 }}
               />
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
index 842ccb678..b453c19a7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
@@ -2,9 +2,8 @@
 
 import { useState } from 'react'
 import { Check, ChevronDown, Copy, Eye, EyeOff } from 'lucide-react'
-import { Button, Combobox, Input, Label } from '@/components/emcn'
-import { Alert, AlertDescription } from '@/components/ui'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Button, Combobox, Input, Switch, Textarea } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/environment'
@@ -73,24 +72,56 @@ interface SSOProvider {
   providerType: 'oidc' | 'saml'
 }
 
+const DEFAULT_FORM_DATA = {
+  providerType: 'oidc' as 'oidc' | 'saml',
+  providerId: '',
+  issuerUrl: '',
+  domain: '',
+  clientId: '',
+  clientSecret: '',
+  scopes: 'openid,profile,email',
+  entryPoint: '',
+  cert: '',
+  callbackUrl: '',
+  audience: '',
+  wantAssertionsSigned: true,
+  idpMetadata: '',
+  showAdvanced: false,
+}
+
+const DEFAULT_ERRORS = {
+  providerType: [],
+  providerId: [],
+  issuerUrl: [],
+  domain: [],
+  clientId: [],
+  clientSecret: [],
+  entryPoint: [],
+  cert: [],
+  scopes: [],
+  callbackUrl: [],
+  audience: [],
+}
+
 export function SSO() {
   const { data: session } = useSession()
   const { data: orgsData } = useOrganizations()
   const { data: subscriptionData } = useSubscriptionData()
+  const { data: providersData, isLoading: isLoadingProviders } = useSSOProviders()
+
   const activeOrganization = orgsData?.activeOrganization
+  const providers = providersData?.providers || []
+  const existingProvider = providers[0] as SSOProvider | undefined
 
   const userEmail = session?.user?.email
   const userId = session?.user?.id
-  const userRole = getUserRole(activeOrganization, userEmail)
+  const userRole = getUserRole(orgsData?.activeOrganization, userEmail)
   const isOwner = userRole === 'owner'
   const isAdmin = userRole === 'admin'
   const canManageSSO = isOwner || isAdmin
   const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
   const hasEnterprisePlan = subscriptionStatus.isEnterprise
 
-  const { data: providersData, isLoading: isLoadingProviders } = useSSOProviders()
-
-  const providers = providersData?.providers || []
   const isSSOProviderOwner =
     !isBillingEnabled && userId ? providers.some((p: any) => p.userId === userId) : null
 
@@ -99,91 +130,42 @@ export function SSO() {
   const [error, setError] = useState<string | null>(null)
   const [showClientSecret, setShowClientSecret] = useState(false)
   const [copied, setCopied] = useState(false)
-  const [showConfigForm, setShowConfigForm] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
 
-  const [formData, setFormData] = useState({
-    providerType: 'oidc' as 'oidc' | 'saml',
-    providerId: '',
-    issuerUrl: '',
-    domain: '',
-    // OIDC fields
-    clientId: '',
-    clientSecret: '',
-    scopes: 'openid,profile,email',
-    // SAML fields
-    entryPoint: '',
-    cert: '',
-    callbackUrl: '',
-    audience: '',
-    wantAssertionsSigned: true,
-    idpMetadata: '', // Optional IDP metadata XML
-    // Advanced options
-    showAdvanced: false,
-  })
-
-  const [errors, setErrors] = useState<Record<string, string[]>>({
-    providerType: [],
-    providerId: [],
-    issuerUrl: [],
-    domain: [],
-    clientId: [],
-    clientSecret: [],
-    entryPoint: [],
-    cert: [],
-    scopes: [],
-    callbackUrl: [],
-    audience: [],
-  })
+  const [formData, setFormData] = useState(DEFAULT_FORM_DATA)
+  const [errors, setErrors] = useState<Record<string, string[]>>(DEFAULT_ERRORS)
   const [showErrors, setShowErrors] = useState(false)
 
+  // Permission checks with early returns
   if (isBillingEnabled) {
     if (!activeOrganization) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              You must be part of an organization to configure Single Sign-On.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          You must be part of an organization to configure Single Sign-On.
         </div>
       )
     }
 
     if (!hasEnterprisePlan) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Single Sign-On is available on Enterprise plans only.
-              <br />
-              Contact your admin to upgrade your plan.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Single Sign-On is available on Enterprise plans only.
         </div>
       )
     }
 
     if (!canManageSSO) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Only organization owners and admins can configure Single Sign-On settings.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Only organization owners and admins can configure Single Sign-On settings.
         </div>
       )
     }
   } else {
     if (!isLoadingProviders && isSSOProviderOwner === false && providers.length > 0) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Only the user who configured SSO can manage these settings.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Only the user who configured SSO can manage these settings.
         </div>
       )
     }
@@ -331,26 +313,11 @@ export function SSO() {
       await configureSSOMutation.mutateAsync(requestBody)
 
       logger.info('SSO provider configured', { providerId: formData.providerId })
-
-      setFormData({
-        providerType: 'oidc',
-        providerId: '',
-        issuerUrl: '',
-        domain: '',
-        clientId: '',
-        clientSecret: '',
-        scopes: 'openid,profile,email',
-        entryPoint: '',
-        cert: '',
-        callbackUrl: '',
-        audience: '',
-        wantAssertionsSigned: true,
-        idpMetadata: '',
-        showAdvanced: false,
-      })
-
-      setShowConfigForm(false)
+      setFormData(DEFAULT_FORM_DATA)
+      setErrors(DEFAULT_ERRORS)
+      setShowErrors(false)
       setIsEditing(false)
+      setError(null)
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Unknown error occurred'
       setError(message)
@@ -370,19 +337,7 @@ export function SSO() {
 
       if (field === 'providerType') {
         setShowErrors(false)
-        setErrors({
-          providerType: [],
-          providerId: [],
-          issuerUrl: [],
-          domain: [],
-          clientId: [],
-          clientSecret: [],
-          entryPoint: [],
-          cert: [],
-          scopes: [],
-          callbackUrl: [],
-          audience: [],
-        })
+        setErrors(DEFAULT_ERRORS)
       } else {
         validateAll(next)
       }
@@ -391,34 +346,36 @@ export function SSO() {
     })
   }
 
-  const callbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${formData.providerId}`
+  const callbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${formData.providerId || existingProvider?.providerId || 'provider-id'}`
 
-  const copyCallback = async () => {
+  const copyToClipboard = async (url: string) => {
     try {
-      await navigator.clipboard.writeText(callbackUrl)
+      await navigator.clipboard.writeText(url)
       setCopied(true)
       setTimeout(() => setCopied(false), 1500)
     } catch {}
   }
 
-  const handleReconfigure = (provider: SSOProvider) => {
+  const handleEdit = () => {
+    if (!existingProvider) return
+
     try {
       let clientId = ''
       let clientSecret = ''
       let scopes = 'openid,profile,email'
 
-      if (provider.providerType === 'oidc' && provider.oidcConfig) {
-        const config = JSON.parse(provider.oidcConfig)
+      if (existingProvider.providerType === 'oidc' && existingProvider.oidcConfig) {
+        const config = JSON.parse(existingProvider.oidcConfig)
         clientId = config.clientId || ''
         clientSecret = config.clientSecret || ''
         scopes = config.scopes?.join(',') || 'openid,profile,email'
       }
 
       setFormData({
-        providerType: provider.providerType,
-        providerId: provider.providerId,
-        issuerUrl: provider.issuer,
-        domain: provider.domain,
+        providerType: existingProvider.providerType,
+        providerId: existingProvider.providerId,
+        issuerUrl: existingProvider.issuer,
+        domain: existingProvider.domain,
         clientId,
         clientSecret,
         scopes,
@@ -431,9 +388,10 @@ export function SSO() {
         showAdvanced: false,
       })
       setIsEditing(true)
-      setShowConfigForm(true)
-    } catch (error) {
-      logger.error('Failed to parse provider config', { error })
+      setError(null)
+      setShowErrors(false)
+    } catch (err) {
+      logger.error('Failed to parse provider config', { error: err })
       setError('Failed to load provider configuration')
     }
   }
@@ -442,11 +400,97 @@ export function SSO() {
     return <SsoSkeleton />
   }
 
-  const hasProviders = providers.length > 0
-  const showStatus = hasProviders && !showConfigForm
+  // Show preview if provider exists and not editing
+  if (existingProvider && !isEditing) {
+    const providerCallbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${existingProvider.providerId}`
 
+    return (
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Scrollable Content */}
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {/* Provider Info */}
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Provider ID
+              </span>
+              <p className='text-[14px] text-[var(--text-primary)]'>
+                {existingProvider.providerId}
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Provider Type
+              </span>
+              <p className='text-[14px] text-[var(--text-primary)]'>
+                {existingProvider.providerType.toUpperCase()}
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
+              <p className='text-[14px] text-[var(--text-primary)]'>{existingProvider.domain}</p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Issuer URL
+              </span>
+              <p className='break-all font-mono text-[13px] text-[var(--text-primary)]'>
+                {existingProvider.issuer}
+              </p>
+            </div>
+
+            {/* Callback URL */}
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Callback URL
+              </span>
+              <div className='relative'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {providerCallbackUrl}
+                  </code>
+                </div>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => copyToClipboard(providerCallbackUrl)}
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                >
+                  {copied ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy callback URL</span>
+                </Button>
+              </div>
+              <p className='text-[13px] text-[var(--text-muted)]'>
+                Configure this in your identity provider
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className='mt-auto flex items-center justify-end'>
+          <Button
+            onClick={handleEdit}
+            variant='primary'
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            Edit
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // Form View (no provider or editing)
   return (
-    <div className='relative flex h-full flex-col'>
+    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-[16px]'>
       {/* Hidden dummy inputs to prevent browser password manager autofill */}
       <input
         type='text'
@@ -472,600 +516,463 @@ export function SSO() {
         tabIndex={-1}
         readOnly
       />
-      <div className='flex-1 overflow-y-auto px-6 pt-4 pb-4'>
-        <div className='space-y-6'>
-          {showStatus ? (
-            <div className='space-y-4'>
-              {providers.map((provider: SSOProvider) => (
-                <div key={provider.id} className='rounded-[8px] bg-muted/30 p-4'>
-                  <div className='flex items-start justify-between gap-3'>
-                    <div className='flex-1'>
-                      <h3 className='font-medium text-base'>Single Sign-On Provider</h3>
-                      <p className='mt-1 text-muted-foreground text-sm'>
-                        {provider.providerId} • {provider.domain}
-                      </p>
-                    </div>
-                    <div className='flex items-center space-x-2'>
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleReconfigure(provider)}
-                        className='h-8'
-                      >
-                        Reconfigure
-                      </Button>
-                    </div>
-                  </div>
+      <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
 
-                  <div className='mt-4 border-border border-t pt-4'>
-                    <div className='grid grid-cols-2 gap-4 text-sm'>
-                      <div>
-                        <span className='font-medium text-muted-foreground'>Issuer URL</span>
-                        <p className='mt-1 break-all font-mono text-foreground text-xs'>
-                          {provider.issuer}
-                        </p>
-                      </div>
-                      <div>
-                        <span className='font-medium text-muted-foreground'>Provider ID</span>
-                        <p className='mt-1 text-foreground'>{provider.providerId}</p>
-                      </div>
-                    </div>
+      {/* Scrollable Content */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {/* Provider Type Selection */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Provider Type
+            </span>
+            <Combobox
+              value={formData.providerType}
+              onChange={(value: string) =>
+                handleInputChange('providerType', value as 'oidc' | 'saml')
+              }
+              options={[
+                { label: 'OIDC', value: 'oidc' },
+                { label: 'SAML', value: 'saml' },
+              ]}
+              placeholder='Select provider type'
+              editable={false}
+              className='h-9'
+            />
+            <p className='text-[13px] text-[var(--text-muted)]'>
+              {formData.providerType === 'oidc'
+                ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
+                : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
+            </p>
+          </div>
 
-                    <div className='mt-4'>
-                      <span className='font-medium text-muted-foreground text-sm'>
-                        Callback URL
-                      </span>
-                      <div className='relative mt-2'>
-                        <Input
-                          readOnly
-                          value={`${getBaseUrl()}/api/auth/sso/callback/${provider.providerId}`}
-                          className='h-9 w-full cursor-text pr-10 font-mono text-xs focus-visible:ring-2 focus-visible:ring-primary/20'
-                          onClick={(e) => (e.target as HTMLInputElement).select()}
-                        />
-                        <button
-                          type='button'
-                          onClick={() => {
-                            const url = `${getBaseUrl()}/api/auth/sso/callback/${provider.providerId}`
-                            navigator.clipboard.writeText(url)
-                            setCopied(true)
-                            setTimeout(() => setCopied(false), 1500)
-                          }}
-                          aria-label='Copy callback URL'
-                          className='-translate-y-1/2 absolute top-1/2 right-3 rounded p-1 text-muted-foreground transition hover:text-foreground'
-                        >
-                          {copied ? (
-                            <Check className='h-4 w-4 text-green-500' />
-                          ) : (
-                            <Copy className='h-4 w-4' />
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
+          {/* Provider ID */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Provider ID
+            </span>
+            <Combobox
+              value={formData.providerId}
+              onChange={(value: string) => handleInputChange('providerId', value)}
+              options={TRUSTED_SSO_PROVIDERS.map((id) => ({
+                label: id,
+                value: id,
+              }))}
+              placeholder='Select a provider ID'
+              editable={true}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.providerId.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.providerId.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.providerId.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Issuer URL */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Issuer URL</span>
+            <Input
+              type='url'
+              placeholder='https://your-identity-provider.com/oauth2/default'
+              value={formData.issuerUrl}
+              name='sso_issuer_endpoint'
+              autoComplete='off'
+              autoCapitalize='none'
+              spellCheck={false}
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.issuerUrl.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.issuerUrl.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.issuerUrl.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Domain */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
+            <Input
+              type='text'
+              placeholder='your-domain.identityprovider.com'
+              value={formData.domain}
+              name='sso_identity_domain'
+              autoComplete='off'
+              autoCapitalize='none'
+              spellCheck={false}
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              onChange={(e) => handleInputChange('domain', e.target.value)}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.domain.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.domain.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.domain.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Provider-specific fields */}
+          {formData.providerType === 'oidc' ? (
+            <>
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Client ID
+                </span>
+                <Input
+                  type='text'
+                  placeholder='Enter Client ID'
+                  value={formData.clientId}
+                  name='sso_client_identifier'
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  readOnly
+                  onFocus={(e) => e.target.removeAttribute('readOnly')}
+                  onChange={(e) => handleInputChange('clientId', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.clientId.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                  )}
+                />
+                {showErrors && errors.clientId.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.clientId.join(' ')}
+                  </p>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Client Secret
+                </span>
+                <div className='relative'>
+                  <Input
+                    type='text'
+                    placeholder='Enter Client Secret'
+                    value={formData.clientSecret}
+                    name='sso_client_key'
+                    autoComplete='off'
+                    autoCapitalize='none'
+                    spellCheck={false}
+                    readOnly
+                    onFocus={(e) => {
+                      e.target.removeAttribute('readOnly')
+                      setShowClientSecret(true)
+                    }}
+                    onBlurCapture={() => setShowClientSecret(false)}
+                    onChange={(e) => handleInputChange('clientSecret', e.target.value)}
+                    style={
+                      !showClientSecret
+                        ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
+                        : undefined
+                    }
+                    className={cn(
+                      'h-9 pr-[36px]',
+                      showErrors &&
+                        errors.clientSecret.length > 0 &&
+                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                    )}
+                  />
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => setShowClientSecret((s) => !s)}
+                    className='-translate-y-1/2 absolute top-1/2 right-[8px] h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    aria-label={showClientSecret ? 'Hide client secret' : 'Show client secret'}
+                  >
+                    {showClientSecret ? (
+                      <EyeOff className='h-4 w-4' />
+                    ) : (
+                      <Eye className='h-4 w-4' />
+                    )}
+                  </Button>
                 </div>
-              ))}
-            </div>
+                {showErrors && errors.clientSecret.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.clientSecret.join(' ')}
+                  </p>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Scopes</span>
+                <Input
+                  type='text'
+                  placeholder='openid,profile,email'
+                  value={formData.scopes}
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  onChange={(e) => handleInputChange('scopes', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.scopes.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                  )}
+                />
+                {showErrors && errors.scopes.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.scopes.join(' ')}
+                  </p>
+                )}
+                <p className='text-[13px] text-[var(--text-muted)]'>
+                  Comma-separated list of OIDC scopes to request
+                </p>
+              </div>
+            </>
           ) : (
             <>
-              {hasProviders && (
-                <div className='mb-4'>
-                  <Button
-                    variant='ghost'
-                    onClick={() => {
-                      setShowConfigForm(false)
-                      setIsEditing(false)
-                    }}
-                    className='h-8'
-                  >
-                    ← Back to SSO Status
-                  </Button>
-                </div>
-              )}
-              <form onSubmit={handleSubmit} className='space-y-3' autoComplete='off'>
-                {/* Hidden dummy input to prevent autofill */}
-                <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
-                {/* Provider Type Selection */}
-                <div className='space-y-1'>
-                  <Label>Provider Type</Label>
-                  <div className='flex gap-2 rounded-[10px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-1'>
-                    <button
-                      type='button'
-                      className={cn(
-                        'flex-1 rounded-[6px] px-3 py-2 font-medium text-sm transition-all',
-                        formData.providerType === 'oidc'
-                          ? 'bg-[var(--surface-1)] text-[var(--text-primary)] shadow-sm ring-1 ring-[var(--border-muted)]'
-                          : 'text-muted-foreground hover:bg-[var(--surface-2)] hover:text-foreground'
-                      )}
-                      onClick={() => handleInputChange('providerType', 'oidc')}
-                    >
-                      OIDC
-                    </button>
-                    <button
-                      type='button'
-                      className={cn(
-                        'flex-1 rounded-[6px] px-3 py-2 font-medium text-sm transition-all',
-                        formData.providerType === 'saml'
-                          ? 'bg-[var(--surface-1)] text-[var(--text-primary)] shadow-sm ring-1 ring-[var(--border-muted)]'
-                          : 'text-muted-foreground hover:bg-[var(--surface-2)] hover:text-foreground'
-                      )}
-                      onClick={() => handleInputChange('providerType', 'saml')}
-                    >
-                      SAML
-                    </button>
-                  </div>
-                  <p className='text-muted-foreground text-xs'>
-                    {formData.providerType === 'oidc'
-                      ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
-                      : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
-                  </p>
-                </div>
-
-                <div className='space-y-1'>
-                  <Label htmlFor='provider-id'>Provider ID</Label>
-                  <Combobox
-                    value={formData.providerId}
-                    onChange={(value: string) => handleInputChange('providerId', value)}
-                    options={TRUSTED_SSO_PROVIDERS.map((id) => ({
-                      label: id,
-                      value: id,
-                    }))}
-                    placeholder='Select a provider ID'
-                    editable={true}
-                    className={cn(
-                      showErrors &&
-                        errors.providerId.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                    )}
-                  />
-                  {showErrors && errors.providerId.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.providerId.join(' ')}
-                    </p>
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Entry Point URL
+                </span>
+                <Input
+                  type='url'
+                  placeholder='https://idp.example.com/sso/saml'
+                  value={formData.entryPoint}
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  onChange={(e) => handleInputChange('entryPoint', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.entryPoint.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
-                  <p className='text-muted-foreground text-xs'>
-                    Select a pre-configured provider ID from the trusted providers list
-                  </p>
-                </div>
-
-                <div className='space-y-1'>
-                  <Label htmlFor='issuer-url'>Issuer URL</Label>
-                  <Input
-                    id='issuer-url'
-                    type='url'
-                    placeholder='Enter Issuer URL'
-                    value={formData.issuerUrl}
-                    name='sso_issuer_endpoint'
-                    autoComplete='off'
-                    autoCapitalize='none'
-                    spellCheck={false}
-                    readOnly
-                    onFocus={(e) => e.target.removeAttribute('readOnly')}
-                    onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
-                    className={cn(
-                      'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                      showErrors &&
-                        errors.issuerUrl.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                    )}
-                  />
-                  {showErrors && errors.issuerUrl.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.issuerUrl.join(' ')}
-                    </p>
-                  )}
-                  <p className='text-muted-foreground text-xs' />
-                </div>
-
-                <div className='space-y-1'>
-                  <Label htmlFor='domain'>Domain</Label>
-                  <Input
-                    id='domain'
-                    type='text'
-                    placeholder='Enter Domain'
-                    value={formData.domain}
-                    name='sso_identity_domain'
-                    autoComplete='off'
-                    autoCapitalize='none'
-                    spellCheck={false}
-                    readOnly
-                    onFocus={(e) => e.target.removeAttribute('readOnly')}
-                    onChange={(e) => handleInputChange('domain', e.target.value)}
-                    className={cn(
-                      'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                      showErrors &&
-                        errors.domain.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                    )}
-                  />
-                  {showErrors && errors.domain.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.domain.join(' ')}
-                    </p>
-                  )}
-                </div>
-
-                {/* Provider-specific fields */}
-                {formData.providerType === 'oidc' ? (
-                  <>
-                    <div className='space-y-1'>
-                      <Label htmlFor='client-id'>Client ID</Label>
-                      <Input
-                        id='client-id'
-                        type='text'
-                        placeholder='Enter Client ID'
-                        value={formData.clientId}
-                        name='sso_client_identifier'
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        readOnly
-                        onFocus={(e) => e.target.removeAttribute('readOnly')}
-                        onChange={(e) => handleInputChange('clientId', e.target.value)}
-                        className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.clientId.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                      />
-                      {showErrors && errors.clientId.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.clientId.join(' ')}
-                        </p>
-                      )}
-                    </div>
-
-                    <div className='space-y-1'>
-                      <Label htmlFor='client-secret'>Client Secret</Label>
-                      <div className='relative'>
-                        <Input
-                          id='client-secret'
-                          type='text'
-                          placeholder='Enter Client Secret'
-                          value={formData.clientSecret}
-                          name='sso_client_key'
-                          autoComplete='off'
-                          autoCapitalize='none'
-                          spellCheck={false}
-                          readOnly
-                          onFocus={(e) => {
-                            e.target.removeAttribute('readOnly')
-                            setShowClientSecret(true)
-                          }}
-                          onBlurCapture={() => setShowClientSecret(false)}
-                          onChange={(e) => handleInputChange('clientSecret', e.target.value)}
-                          style={
-                            !showClientSecret
-                              ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                              : undefined
-                          }
-                          className={cn(
-                            'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                            showErrors &&
-                              errors.clientSecret.length > 0 &&
-                              'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                          )}
-                        />
-                        <Button
-                          variant='ghost'
-                          onClick={() => setShowClientSecret((s) => !s)}
-                          className='-translate-y-1/2 absolute top-1/2 right-3 h-6 w-6 rounded-[4px] p-0 text-muted-foreground hover:text-foreground'
-                          aria-label={
-                            showClientSecret ? 'Hide client secret' : 'Show client secret'
-                          }
-                        >
-                          {showClientSecret ? (
-                            <EyeOff className='h-4 w-4' />
-                          ) : (
-                            <Eye className='h-4 w-4' />
-                          )}
-                        </Button>
-                      </div>
-                      {showErrors && errors.clientSecret.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.clientSecret.join(' ')}
-                        </p>
-                      )}
-                    </div>
-
-                    <div className='space-y-1'>
-                      <Label htmlFor='scopes'>Scopes</Label>
-                      <Input
-                        id='scopes'
-                        type='text'
-                        placeholder='openid,profile,email'
-                        value={formData.scopes}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('scopes', e.target.value)}
-                        className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.scopes.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                      />
-                      {showErrors && errors.scopes.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.scopes.join(' ')}
-                        </p>
-                      )}
-                      <p className='text-muted-foreground text-xs'>
-                        Comma-separated list of OIDC scopes to request
-                      </p>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className='space-y-1'>
-                      <Label htmlFor='entry-point'>Entry Point URL</Label>
-                      <Input
-                        id='entry-point'
-                        type='url'
-                        placeholder='Enter Entry Point URL'
-                        value={formData.entryPoint}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('entryPoint', e.target.value)}
-                        className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.entryPoint.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                      />
-                      {showErrors && errors.entryPoint.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.entryPoint.join(' ')}
-                        </p>
-                      )}
-                      <p className='text-muted-foreground text-xs' />
-                    </div>
-
-                    <div className='space-y-1'>
-                      <Label htmlFor='cert'>Identity Provider Certificate</Label>
-                      <textarea
-                        id='cert'
-                        placeholder='-----BEGIN CERTIFICATE-----&#10;MIIDBjCCAe4CAQAwDQYJKoZIhvcNAQEFBQAwEjEQMA...&#10;-----END CERTIFICATE-----'
-                        value={formData.cert}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('cert', e.target.value)}
-                        className={cn(
-                          'min-h-[100px] w-full rounded-[10px] border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.cert.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                        rows={4}
-                      />
-                      {showErrors && errors.cert.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.cert.join(' ')}
-                        </p>
-                      )}
-                      <p className='text-muted-foreground text-xs' />
-                    </div>
-
-                    {/* Advanced SAML Options */}
-                    <div className='space-y-3'>
-                      <button
-                        type='button'
-                        onClick={() =>
-                          handleInputChange(
-                            'showAdvanced',
-                            formData.showAdvanced ? 'false' : 'true'
-                          )
-                        }
-                        className='flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground'
-                      >
-                        <ChevronDown
-                          className={cn(
-                            'h-4 w-4 transition-transform',
-                            formData.showAdvanced && 'rotate-180'
-                          )}
-                        />
-                        Advanced SAML Options
-                      </button>
-
-                      {formData.showAdvanced && (
-                        <>
-                          <div className='space-y-1'>
-                            <Label htmlFor='audience'>Audience (Entity ID)</Label>
-                            <Input
-                              id='audience'
-                              type='text'
-                              placeholder='Enter Audience'
-                              value={formData.audience}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('audience', e.target.value)}
-                              className='rounded-[10px] shadow-sm'
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              The SAML audience restriction (optional, defaults to app URL)
-                            </p>
-                          </div>
-
-                          <div className='space-y-1'>
-                            <Label htmlFor='callback-url'>Callback URL Override</Label>
-                            <Input
-                              id='callback-url'
-                              type='url'
-                              placeholder='Enter Callback URL'
-                              value={formData.callbackUrl}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
-                              className='rounded-[10px] shadow-sm'
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              Custom SAML callback URL (optional, auto-generated if empty)
-                            </p>
-                          </div>
-
-                          <div className='flex items-center space-x-2'>
-                            <input
-                              type='checkbox'
-                              id='want-assertions-signed'
-                              checked={formData.wantAssertionsSigned}
-                              onChange={(e) =>
-                                handleInputChange(
-                                  'wantAssertionsSigned',
-                                  e.target.checked ? 'true' : 'false'
-                                )
-                              }
-                              className='rounded'
-                            />
-                            <Label htmlFor='want-assertions-signed' className='text-sm'>
-                              Require signed SAML assertions
-                            </Label>
-                          </div>
-
-                          <div className='space-y-1'>
-                            <Label htmlFor='idp-metadata'>Identity Provider Metadata XML</Label>
-                            <textarea
-                              id='idp-metadata'
-                              placeholder='<?xml version="1.0" encoding="UTF-8"?>&#10;<md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata">&#10;  ...&#10;</md:EntityDescriptor>'
-                              value={formData.idpMetadata}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
-                              className='min-h-[100px] w-full rounded-[10px] border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
-                              rows={4}
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              Paste the complete IDP metadata XML from your identity provider for
-                              advanced configuration
-                            </p>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </>
-                )}
-
-                {error && (
+                />
+                {showErrors && errors.entryPoint.length > 0 && (
                   <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                    {error}
+                    {errors.entryPoint.join(' ')}
                   </p>
                 )}
+              </div>
 
-                <Button
-                  type='submit'
-                  className='h-9 w-full'
-                  disabled={
-                    configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Identity Provider Certificate
+                </span>
+                <Textarea
+                  placeholder='-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----'
+                  value={formData.cert}
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  onChange={(e) => handleInputChange('cert', e.target.value)}
+                  className={cn(
+                    'min-h-[80px] font-mono',
+                    showErrors &&
+                      errors.cert.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                  )}
+                  rows={3}
+                />
+                {showErrors && errors.cert.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.cert.join(' ')}
+                  </p>
+                )}
+              </div>
+
+              {/* Advanced SAML Options */}
+              <div className='flex flex-col gap-[8px]'>
+                <button
+                  type='button'
+                  onClick={() =>
+                    handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
                   }
+                  className='flex w-fit items-center gap-[6px] text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                 >
-                  {configureSSOMutation.isPending
-                    ? isEditing
-                      ? 'Updating...'
-                      : 'Configuring...'
-                    : isEditing
-                      ? 'Update SSO Provider'
-                      : 'Configure SSO Provider'}
-                </Button>
-              </form>
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 transition-transform',
+                      formData.showAdvanced && 'rotate-180'
+                    )}
+                  />
+                  Advanced Options
+                </button>
 
-              <div className='space-y-1'>
-                <Label htmlFor='callback-url'>Callback URL</Label>
-                <p className='text-muted-foreground text-xs'>
-                  Configure this URL in your identity provider as the callback/redirect URI
-                </p>
-                <div className='relative flex h-9 items-center rounded-[8px] bg-muted px-3 pr-10'>
-                  <code className='flex-1 truncate font-mono text-foreground text-xs'>
-                    {callbackUrl}
-                  </code>
-                  <Button
-                    variant='ghost'
-                    onClick={copyCallback}
-                    aria-label='Copy callback URL'
-                    className='absolute right-1 h-6 w-6 rounded-[4px] p-0 text-muted-foreground hover:text-foreground'
-                  >
-                    {copied ? <Check className='h-4 w-4' /> : <Copy className='h-4 w-4' />}
-                  </Button>
-                </div>
+                {formData.showAdvanced && (
+                  <div className='flex flex-col gap-[16px] pt-[8px]'>
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Audience (Entity ID)
+                      </span>
+                      <Input
+                        type='text'
+                        placeholder='Enter Audience'
+                        value={formData.audience}
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        onChange={(e) => handleInputChange('audience', e.target.value)}
+                        className='h-9'
+                      />
+                    </div>
+
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Callback URL Override
+                      </span>
+                      <Input
+                        type='url'
+                        placeholder='Enter Callback URL'
+                        value={formData.callbackUrl}
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
+                        className='h-9'
+                      />
+                    </div>
+
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Require signed SAML assertions
+                      </span>
+                      <Switch
+                        checked={formData.wantAssertionsSigned}
+                        onCheckedChange={(checked) =>
+                          handleInputChange('wantAssertionsSigned', checked ? 'true' : 'false')
+                        }
+                      />
+                    </div>
+
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        IDP Metadata XML
+                      </span>
+                      <Textarea
+                        placeholder='Paste IDP metadata XML here (optional)'
+                        value={formData.idpMetadata}
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
+                        className='min-h-[60px] font-mono'
+                        rows={2}
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
             </>
           )}
+
+          {/* Callback URL display */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Callback URL
+            </span>
+            <div className='relative'>
+              <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                  {callbackUrl}
+                </code>
+              </div>
+              <Button
+                type='button'
+                variant='ghost'
+                onClick={() => copyToClipboard(callbackUrl)}
+                className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+              >
+                {copied ? (
+                  <Check className='h-[14px] w-[14px]' />
+                ) : (
+                  <Copy className='h-[14px] w-[14px]' />
+                )}
+                <span className='sr-only'>Copy callback URL</span>
+              </Button>
+            </div>
+            <p className='text-[13px] text-[var(--text-muted)]'>
+              Configure this in your identity provider
+            </p>
+          </div>
         </div>
       </div>
-    </div>
+
+      {/* Footer */}
+      <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        {error && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{error}</p>}
+        <Button
+          type='submit'
+          variant='primary'
+          disabled={configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()}
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+        >
+          {configureSSOMutation.isPending
+            ? isEditing
+              ? 'Updating...'
+              : 'Saving...'
+            : isEditing
+              ? 'Update'
+              : 'Save'}
+        </Button>
+      </div>
+    </form>
   )
 }
 
 function SsoSkeleton() {
   return (
-    <div className='flex h-full flex-col'>
-      <div className='flex-1 overflow-y-auto px-6 pt-4 pb-4'>
-        <div className='space-y-3'>
-          {/* Provider type toggle */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-28' />
-            <Skeleton className='h-10 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-64' />
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Form fields skeleton */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[80px]' />
+            <Skeleton className='h-9 w-full' />
+            <Skeleton className='h-[13px] w-[200px]' />
           </div>
-
-          {/* Provider ID */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-80' />
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[70px]' />
+            <Skeleton className='h-9 w-full' />
           </div>
-
-          {/* Issuer URL */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[60px]' />
+            <Skeleton className='h-9 w-full' />
           </div>
-
-          {/* Domain */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-16' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[50px]' />
+            <Skeleton className='h-9 w-full' />
           </div>
-
-          {/* Client ID */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-20' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[60px]' />
+            <Skeleton className='h-9 w-full' />
           </div>
-
-          {/* Client Secret */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <div className='relative'>
-              <Skeleton className='h-9 w-full rounded-[10px]' />
-              <Skeleton className='-translate-y-1/2 absolute top-1/2 right-3 h-4 w-4 rounded' />
-            </div>
-          </div>
-
-          {/* Scopes */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-16' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-56' />
-          </div>
-
-          {/* Submit button */}
-          <Skeleton className='h-9 w-full rounded-[10px]' />
-
-          {/* Callback URL */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-3 w-96' />
-            <div className='relative flex h-9 items-center rounded-[8px] bg-muted px-3'>
-              <Skeleton className='h-3 w-64' />
-            </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[80px]' />
+            <Skeleton className='h-9 w-full' />
           </div>
         </div>
       </div>
+
+      {/* Footer skeleton */}
+      <div className='mt-auto flex items-center justify-end'>
+        <Skeleton className='h-9 w-[60px]' />
+      </div>
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
index 2e014e6b5..04015ada0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
@@ -211,11 +211,11 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
     <>
       <div className='flex items-center justify-between'>
         <div>
-          <span className='font-medium text-sm'>
+          <span className='font-medium text-[13px]'>
             {isCancelAtPeriodEnd ? 'Restore Subscription' : 'Manage Subscription'}
           </span>
           {isCancelAtPeriodEnd && (
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               You'll keep access until {formatDate(periodEndDate)}
             </p>
           )}
@@ -226,7 +226,7 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
           disabled={isLoading}
           className={cn(
             'h-8 rounded-[8px] font-medium text-xs',
-            error && 'border-red-500 text-red-500 dark:border-red-500 dark:text-red-500'
+            error && 'border-[var(--text-error)] text-[var(--text-error)]'
           )}
         >
           {error ? 'Error' : isCancelAtPeriodEnd ? 'Restore' : 'Manage'}
@@ -255,8 +255,8 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
 
           {!isCancelAtPeriodEnd && (
             <div className='py-2'>
-              <div className='rounded-[8px] bg-muted/50 p-3 text-sm'>
-                <ul className='space-y-1 text-muted-foreground text-xs'>
+              <div className='rounded-[8px] bg-[var(--surface-3)] p-3 text-sm'>
+                <ul className='space-y-1 text-[var(--text-muted)] text-xs'>
                   <li>• Keep all features until {formatDate(periodEndDate)}</li>
                   <li>• No more charges</li>
                   <li>• Data preserved</li>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
index 1c82da3b8..f53cbcc57 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
@@ -17,28 +17,30 @@ export function CostBreakdown({ copilotCost, totalCost }: CostBreakdownProps) {
   const workflowExecutionCost = totalCost - copilotCost
 
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         <div className='flex items-center justify-between'>
-          <span className='font-medium text-muted-foreground text-sm'>Cost Breakdown</span>
+          <span className='font-medium text-[var(--text-muted)] text-sm'>Cost Breakdown</span>
         </div>
 
         <div className='space-y-1.5'>
           <div className='flex items-center justify-between'>
-            <span className='text-muted-foreground text-xs'>Workflow Executions:</span>
-            <span className='text-foreground text-xs tabular-nums'>
+            <span className='text-[var(--text-muted)] text-xs'>Workflow Executions:</span>
+            <span className='text-[var(--text-primary)] text-xs tabular-nums'>
               {formatCost(workflowExecutionCost)}
             </span>
           </div>
 
           <div className='flex items-center justify-between'>
-            <span className='text-muted-foreground text-xs'>Copilot:</span>
-            <span className='text-foreground text-xs tabular-nums'>{formatCost(copilotCost)}</span>
+            <span className='text-[var(--text-muted)] text-xs'>Copilot:</span>
+            <span className='text-[var(--text-primary)] text-xs tabular-nums'>
+              {formatCost(copilotCost)}
+            </span>
           </div>
 
-          <div className='flex items-center justify-between border-border border-t pt-1.5'>
-            <span className='font-medium text-foreground text-xs'>Total:</span>
-            <span className='font-medium text-foreground text-xs tabular-nums'>
+          <div className='flex items-center justify-between border-[var(--border)] border-t pt-1.5'>
+            <span className='font-medium text-[var(--text-primary)] text-xs'>Total:</span>
+            <span className='font-medium text-[var(--text-primary)] text-xs tabular-nums'>
               {formatCost(totalCost)}
             </span>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
index 244c5123b..1e5d1b64b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import type { LucideIcon } from 'lucide-react'
-import { Button } from '@/components/ui'
+import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 export interface PlanFeature {
@@ -47,7 +47,7 @@ export function PlanCard({
         <>
           <span className='font-semibold text-xl'>{price}</span>
           {priceSubtext && (
-            <span className='ml-1 text-muted-foreground text-xs'>{priceSubtext}</span>
+            <span className='ml-1 text-[var(--text-muted)] text-xs'>{priceSubtext}</span>
           )}
         </>
       )
@@ -61,10 +61,10 @@ export function PlanCard({
         <div className='mt-3 flex flex-wrap items-center gap-4'>
           {features.map((feature, index) => (
             <div key={`${feature.text}-${index}`} className='flex items-center gap-2 text-xs'>
-              <feature.icon className='h-3 w-3 flex-shrink-0 text-muted-foreground' />
-              <span className='text-muted-foreground'>{feature.text}</span>
+              <feature.icon className='h-3 w-3 flex-shrink-0 text-[var(--text-muted)]' />
+              <span className='text-[var(--text-muted)]'>{feature.text}</span>
               {index < features.length - 1 && (
-                <div className='ml-4 h-4 w-px bg-border' aria-hidden='true' />
+                <div className='ml-4 h-4 w-px bg-[var(--border)]' aria-hidden='true' />
               )}
             </div>
           ))}
@@ -77,10 +77,10 @@ export function PlanCard({
         {features.map((feature, index) => (
           <li key={`${feature.text}-${index}`} className='flex items-start gap-2 text-xs'>
             <feature.icon
-              className='mt-0.5 h-3 w-3 flex-shrink-0 text-muted-foreground'
+              className='mt-0.5 h-3 w-3 flex-shrink-0 text-[var(--text-muted)]'
               aria-hidden='true'
             />
-            <span className='text-muted-foreground'>{feature.text}</span>
+            <span className='text-[var(--text-muted)]'>{feature.text}</span>
           </li>
         ))}
       </ul>
@@ -90,7 +90,7 @@ export function PlanCard({
   return (
     <article
       className={cn(
-        'relative flex rounded-[8px] border p-4 transition-colors hover:border-muted-foreground/20',
+        'relative flex rounded-[8px] border p-4 transition-colors hover:border-[var(--border-hover)]',
         isHorizontal ? 'flex-row items-center justify-between' : 'flex-col',
         className
       )}
@@ -109,7 +109,7 @@ export function PlanCard({
           className={cn(
             'h-9 rounded-[8px] text-xs',
             isHorizontal ? 'px-4' : 'w-full',
-            isError && 'border-red-500 text-red-500 dark:border-red-500 dark:text-red-500'
+            isError && 'border-[var(--text-error)] text-[var(--text-error)]'
           )}
           variant='outline'
           aria-label={`${buttonText} ${name} plan`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
index 134624d4a..0ce65973e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
@@ -2,7 +2,7 @@
 
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { Check, Pencil, X } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useUpdateOrganizationUsageLimit } from '@/hooks/queries/organization'
@@ -173,7 +173,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
       <div className='flex items-center'>
         {isEditing ? (
           <>
-            <span className='text-muted-foreground text-xs tabular-nums'>$</span>
+            <span className='text-[var(--text-muted)] text-xs tabular-nums'>$</span>
             <input
               ref={inputRef}
               type='number'
@@ -191,7 +191,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
                 'border-0 bg-transparent p-0 text-xs tabular-nums',
                 'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                hasError && 'text-red-500'
+                hasError && 'text-[var(--text-error)]'
               )}
               min={minimumLimit}
               step='1'
@@ -204,19 +204,18 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
             />
           </>
         ) : (
-          <span className='text-muted-foreground text-xs tabular-nums'>
+          <span className='text-[var(--text-muted)] text-xs tabular-nums'>
             ${pendingLimit !== null ? pendingLimit : currentLimit}
           </span>
         )}
         {canEdit && (
           <Button
             variant='ghost'
-            size='icon'
             className={cn(
               'ml-1 h-4 w-4 p-0 transition-colors hover:bg-transparent',
               hasError
-                ? 'text-red-500 hover:text-red-600'
-                : 'text-muted-foreground hover:text-foreground'
+                ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
             )}
             onClick={isEditing ? handleSubmit : handleStartEdit}
             disabled={isUpdating}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
index 4b6d2c630..247603144 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
@@ -1,7 +1,8 @@
 'use client'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Skeleton, Switch } from '@/components/ui'
+import { Switch } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
 import {
   Select,
   SelectContent,
@@ -64,90 +65,88 @@ interface SubscriptionProps {
  */
 function SubscriptionSkeleton() {
   return (
-    <div className='px-6 pt-4 pb-4'>
-      <div className='flex flex-col gap-2'>
-        {/* Current Plan & Usage Header */}
-        <div className='mb-2'>
-          <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
-            <div className='space-y-2'>
-              <div className='flex items-center justify-between'>
-                <div className='flex items-center gap-2'>
-                  <Skeleton className='h-5 w-16' />
-                  <Skeleton className='h-[1.125rem] w-14 rounded-[6px]' />
-                </div>
-                <div className='flex items-center gap-1'>
-                  <Skeleton className='h-4 w-12' />
-                  <span className='text-muted-foreground text-xs'>/</span>
-                  <Skeleton className='h-4 w-12' />
-                </div>
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Current Plan & Usage Header */}
+      <div>
+        <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
+          <div className='space-y-[8px]'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-[8px]'>
+                <Skeleton className='h-5 w-16' />
+                <Skeleton className='h-[1.125rem] w-14 rounded-[6px]' />
+              </div>
+              <div className='flex items-center gap-[4px]'>
+                <Skeleton className='h-4 w-12' />
+                <span className='text-[var(--text-muted)] text-xs'>/</span>
+                <Skeleton className='h-4 w-12' />
               </div>
-              <Skeleton className='h-2 w-full rounded' />
             </div>
+            <Skeleton className='h-2 w-full rounded' />
+          </div>
+        </div>
+      </div>
+
+      {/* Plan Cards */}
+      <div className='flex flex-col gap-[8px]'>
+        {/* Pro and Team Cards Grid */}
+        <div className='grid grid-cols-2 gap-[8px]'>
+          {/* Pro Plan Card */}
+          <div className='flex flex-col rounded-[8px] border p-4'>
+            <div className='mb-[16px]'>
+              <Skeleton className='mb-[8px] h-5 w-10' />
+              <div className='flex items-baseline gap-[4px]'>
+                <Skeleton className='h-6 w-12' />
+                <Skeleton className='h-3 w-14' />
+              </div>
+            </div>
+            <div className='mb-[16px] flex-1 space-y-[8px]'>
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className='flex items-start gap-[8px]'>
+                  <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
+                  <Skeleton className='h-3 w-24' />
+                </div>
+              ))}
+            </div>
+            <Skeleton className='h-9 w-full rounded-[8px]' />
+          </div>
+
+          {/* Team Plan Card */}
+          <div className='flex flex-col rounded-[8px] border p-4'>
+            <div className='mb-[16px]'>
+              <Skeleton className='mb-[8px] h-5 w-12' />
+              <div className='flex items-baseline gap-[4px]'>
+                <Skeleton className='h-6 w-12' />
+                <Skeleton className='h-3 w-14' />
+              </div>
+            </div>
+            <div className='mb-[16px] flex-1 space-y-[8px]'>
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className='flex items-start gap-[8px]'>
+                  <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
+                  <Skeleton className='h-3 w-28' />
+                </div>
+              ))}
+            </div>
+            <Skeleton className='h-9 w-full rounded-[8px]' />
           </div>
         </div>
 
-        {/* Plan Cards */}
-        <div className='flex flex-col gap-2'>
-          {/* Pro and Team Cards Grid */}
-          <div className='grid grid-cols-2 gap-2'>
-            {/* Pro Plan Card */}
-            <div className='flex flex-col rounded-[8px] border p-4'>
-              <div className='mb-4'>
-                <Skeleton className='mb-2 h-5 w-10' />
-                <div className='flex items-baseline gap-1'>
-                  <Skeleton className='h-6 w-12' />
-                  <Skeleton className='h-3 w-14' />
+        {/* Enterprise Card - Horizontal Layout */}
+        <div className='flex items-center justify-between rounded-[8px] border p-4'>
+          <div className='flex-1'>
+            <Skeleton className='mb-[8px] h-5 w-24' />
+            <Skeleton className='mb-[12px] h-3 w-80' />
+            <div className='flex items-center gap-[16px]'>
+              {[...Array(3)].map((_, i) => (
+                <div key={i} className='flex items-center gap-[8px]'>
+                  <Skeleton className='h-3 w-3 rounded-full' />
+                  <Skeleton className='h-3 w-20' />
+                  {i < 2 && <div className='ml-[8px] h-4 w-px bg-[var(--border)]' />}
                 </div>
-              </div>
-              <div className='mb-4 flex-1 space-y-2'>
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className='flex items-start gap-2'>
-                    <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-24' />
-                  </div>
-                ))}
-              </div>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
-            </div>
-
-            {/* Team Plan Card */}
-            <div className='flex flex-col rounded-[8px] border p-4'>
-              <div className='mb-4'>
-                <Skeleton className='mb-2 h-5 w-12' />
-                <div className='flex items-baseline gap-1'>
-                  <Skeleton className='h-6 w-12' />
-                  <Skeleton className='h-3 w-14' />
-                </div>
-              </div>
-              <div className='mb-4 flex-1 space-y-2'>
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className='flex items-start gap-2'>
-                    <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-28' />
-                  </div>
-                ))}
-              </div>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
+              ))}
             </div>
           </div>
-
-          {/* Enterprise Card - Horizontal Layout */}
-          <div className='flex items-center justify-between rounded-[8px] border p-4'>
-            <div className='flex-1'>
-              <Skeleton className='mb-2 h-5 w-24' />
-              <Skeleton className='mb-3 h-3 w-80' />
-              <div className='flex items-center gap-4'>
-                {[...Array(3)].map((_, i) => (
-                  <div key={i} className='flex items-center gap-2'>
-                    <Skeleton className='h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-20' />
-                    {i < 2 && <div className='ml-2 h-4 w-px bg-border' />}
-                  </div>
-                ))}
-              </div>
-            </div>
-            <Skeleton className='h-9 w-20 rounded-[8px]' />
-          </div>
+          <Skeleton className='h-9 w-20 rounded-[8px]' />
         </div>
       </div>
     </div>
@@ -363,114 +362,113 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
   }
 
   return (
-    <div className='px-6 pt-4 pb-4'>
-      <div className='flex flex-col gap-2'>
-        {/* Current Plan & Usage Overview */}
-        <div className='mb-2'>
-          <UsageHeader
-            title={formatPlanName(subscription.plan)}
-            gradientTitle={!subscription.isFree}
-            showBadge={showBadge}
-            badgeText={badgeText}
-            onBadgeClick={handleBadgeClick}
-            seatsText={
-              permissions.canManageTeam || subscription.isEnterprise
-                ? `${organizationBillingData?.totalSeats || subscription.seats || 1} seats`
-                : undefined
-            }
-            current={
-              subscription.isEnterprise || subscription.isTeam
-                ? (organizationBillingData?.totalCurrentUsage ?? usage.current)
-                : usage.current
-            }
-            limit={
-              subscription.isEnterprise || subscription.isTeam
-                ? organizationBillingData?.totalUsageLimit ||
-                  organizationBillingData?.minimumBillingAmount ||
-                  usage.limit
-                : !subscription.isFree &&
-                    (permissions.canEditUsageLimit || permissions.showTeamMemberView)
-                  ? usage.current // placeholder; rightContent will render UsageLimit
-                  : usage.limit
-            }
-            isBlocked={Boolean(subscriptionData?.data?.billingBlocked)}
-            status={billingStatus}
-            percentUsed={
-              subscription.isEnterprise || subscription.isTeam
-                ? organizationBillingData?.totalUsageLimit &&
-                  organizationBillingData.totalUsageLimit > 0 &&
-                  organizationBillingData.totalCurrentUsage !== undefined
-                  ? (organizationBillingData.totalCurrentUsage /
-                      organizationBillingData.totalUsageLimit) *
-                    100
-                  : usage.percentUsed
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Current Plan & Usage Overview */}
+      <div>
+        <UsageHeader
+          title={formatPlanName(subscription.plan)}
+          gradientTitle={!subscription.isFree}
+          showBadge={showBadge}
+          badgeText={badgeText}
+          onBadgeClick={handleBadgeClick}
+          seatsText={
+            permissions.canManageTeam || subscription.isEnterprise
+              ? `${organizationBillingData?.totalSeats || subscription.seats || 1} seats`
+              : undefined
+          }
+          current={
+            subscription.isEnterprise || subscription.isTeam
+              ? (organizationBillingData?.totalCurrentUsage ?? usage.current)
+              : usage.current
+          }
+          limit={
+            subscription.isEnterprise || subscription.isTeam
+              ? organizationBillingData?.totalUsageLimit ||
+                organizationBillingData?.minimumBillingAmount ||
+                usage.limit
+              : !subscription.isFree &&
+                  (permissions.canEditUsageLimit || permissions.showTeamMemberView)
+                ? usage.current // placeholder; rightContent will render UsageLimit
+                : usage.limit
+          }
+          isBlocked={Boolean(subscriptionData?.data?.billingBlocked)}
+          status={billingStatus}
+          percentUsed={
+            subscription.isEnterprise || subscription.isTeam
+              ? organizationBillingData?.totalUsageLimit &&
+                organizationBillingData.totalUsageLimit > 0 &&
+                organizationBillingData.totalCurrentUsage !== undefined
+                ? (organizationBillingData.totalCurrentUsage /
+                    organizationBillingData.totalUsageLimit) *
+                  100
                 : usage.percentUsed
+              : usage.percentUsed
+          }
+          onResolvePayment={async () => {
+            try {
+              const res = await fetch('/api/billing/portal', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  context:
+                    subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user',
+                  organizationId: activeOrgId,
+                  returnUrl: `${getBaseUrl()}/workspace?billing=updated`,
+                }),
+              })
+              const data = await res.json()
+              if (!res.ok || !data?.url)
+                throw new Error(data?.error || 'Failed to start billing portal')
+              window.location.href = data.url
+            } catch (e) {
+              alert(e instanceof Error ? e.message : 'Failed to open billing portal')
             }
-            onResolvePayment={async () => {
-              try {
-                const res = await fetch('/api/billing/portal', {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({
-                    context:
-                      subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user',
-                    organizationId: activeOrgId,
-                    returnUrl: `${getBaseUrl()}/workspace?billing=updated`,
-                  }),
-                })
-                const data = await res.json()
-                if (!res.ok || !data?.url)
-                  throw new Error(data?.error || 'Failed to start billing portal')
-                window.location.href = data.url
-              } catch (e) {
-                alert(e instanceof Error ? e.message : 'Failed to open billing portal')
-              }
-            }}
-            rightContent={
-              !subscription.isFree &&
-              (permissions.canEditUsageLimit || permissions.showTeamMemberView) ? (
-                <UsageLimit
-                  ref={usageLimitRef}
-                  currentLimit={
-                    subscription.isTeam && isTeamAdmin
-                      ? organizationBillingData?.totalUsageLimit || usage.limit
-                      : usageLimitData.currentLimit || usage.limit
-                  }
-                  currentUsage={usage.current}
-                  canEdit={permissions.canEditUsageLimit}
-                  minimumLimit={
-                    subscription.isTeam && isTeamAdmin
-                      ? organizationBillingData?.minimumBillingAmount ||
-                        (subscription.isPro ? 20 : 40)
-                      : usageLimitData.minimumLimit || (subscription.isPro ? 20 : 40)
-                  }
-                  context={subscription.isTeam && isTeamAdmin ? 'organization' : 'user'}
-                  organizationId={subscription.isTeam && isTeamAdmin ? activeOrgId : undefined}
-                  onLimitUpdated={() => {
-                    logger.info('Usage limit updated')
-                  }}
-                />
-              ) : undefined
-            }
-            progressValue={Math.min(usage.percentUsed, 100)}
-          />
+          }}
+          rightContent={
+            !subscription.isFree &&
+            (permissions.canEditUsageLimit || permissions.showTeamMemberView) ? (
+              <UsageLimit
+                ref={usageLimitRef}
+                currentLimit={
+                  subscription.isTeam && isTeamAdmin
+                    ? organizationBillingData?.totalUsageLimit || usage.limit
+                    : usageLimitData.currentLimit || usage.limit
+                }
+                currentUsage={usage.current}
+                canEdit={permissions.canEditUsageLimit}
+                minimumLimit={
+                  subscription.isTeam && isTeamAdmin
+                    ? organizationBillingData?.minimumBillingAmount ||
+                      (subscription.isPro ? 20 : 40)
+                    : usageLimitData.minimumLimit || (subscription.isPro ? 20 : 40)
+                }
+                context={subscription.isTeam && isTeamAdmin ? 'organization' : 'user'}
+                organizationId={subscription.isTeam && isTeamAdmin ? activeOrgId : undefined}
+                onLimitUpdated={() => {
+                  logger.info('Usage limit updated')
+                }}
+              />
+            ) : undefined
+          }
+          progressValue={Math.min(usage.percentUsed, 100)}
+        />
+      </div>
+
+      {/* Enterprise Usage Limit Notice */}
+      {subscription.isEnterprise && (
+        <div className='text-center'>
+          <p className='text-[var(--text-muted)] text-xs'>
+            Contact enterprise for support usage limit changes
+          </p>
         </div>
+      )}
 
-        {/* Enterprise Usage Limit Notice */}
-        {subscription.isEnterprise && (
-          <div className='text-center'>
-            <p className='text-muted-foreground text-xs'>
-              Contact enterprise for support usage limit changes
-            </p>
-          </div>
-        )}
-
-        {/* Cost Breakdown */}
-        {/* TODO: Re-enable CostBreakdown component in the next billing period
+      {/* Cost Breakdown */}
+      {/* TODO: Re-enable CostBreakdown component in the next billing period
             once sufficient copilot cost data has been collected for accurate display.
             Currently hidden to avoid confusion with initial zero values.
         */}
-        {/*
+      {/*
         {subscriptionData?.usage && typeof subscriptionData.usage.copilotCost === 'number' && (
           <div className='mb-2'>
             <CostBreakdown
@@ -481,135 +479,134 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
         )}
         */}
 
-        {/* Team Member Notice */}
-        {permissions.showTeamMemberView && (
-          <div className='text-center'>
-            <p className='text-muted-foreground text-xs'>
-              Contact your team admin to increase limits
-            </p>
-          </div>
-        )}
+      {/* Team Member Notice */}
+      {permissions.showTeamMemberView && (
+        <div className='text-center'>
+          <p className='text-[var(--text-muted)] text-xs'>
+            Contact your team admin to increase limits
+          </p>
+        </div>
+      )}
 
-        {/* Upgrade Plans */}
-        {permissions.showUpgradePlans && (
-          <div className='flex flex-col gap-2'>
-            {/* Render plans based on what should be visible */}
-            {(() => {
-              const totalPlans = visiblePlans.length
-              const hasEnterprise = visiblePlans.includes('enterprise')
-
-              // Special handling for Pro users - show team and enterprise side by side
-              if (subscription.isPro && totalPlans === 2) {
-                return (
-                  <div className='grid grid-cols-2 gap-2'>
-                    {visiblePlans.map((plan) => renderPlanCard(plan, 'vertical'))}
-                  </div>
-                )
-              }
-
-              // Default behavior for other users
-              const otherPlans = visiblePlans.filter((p) => p !== 'enterprise')
-
-              // Layout logic:
-              // Free users (3 plans): Pro and Team vertical in grid, Enterprise horizontal below
-              // Team admins (1 plan): Enterprise horizontal
-              const enterpriseLayout =
-                totalPlans === 1 || totalPlans === 3 ? 'horizontal' : 'vertical'
+      {/* Upgrade Plans */}
+      {permissions.showUpgradePlans && (
+        <div className='flex flex-col gap-[8px]'>
+          {/* Render plans based on what should be visible */}
+          {(() => {
+            const totalPlans = visiblePlans.length
+            const hasEnterprise = visiblePlans.includes('enterprise')
 
+            // Special handling for Pro users - show team and enterprise side by side
+            if (subscription.isPro && totalPlans === 2) {
               return (
-                <>
-                  {otherPlans.length > 0 && (
-                    <div
-                      className={cn(
-                        'grid gap-2',
-                        otherPlans.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
-                      )}
-                    >
-                      {otherPlans.map((plan) => renderPlanCard(plan, 'vertical'))}
-                    </div>
-                  )}
-
-                  {/* Enterprise plan */}
-                  {hasEnterprise && renderPlanCard('enterprise', enterpriseLayout)}
-                </>
+                <div className='grid grid-cols-2 gap-[8px]'>
+                  {visiblePlans.map((plan) => renderPlanCard(plan, 'vertical'))}
+                </div>
               )
-            })()}
-          </div>
-        )}
+            }
 
-        {/* Next Billing Date */}
-        {subscription.isPaid && subscriptionData?.data?.periodEnd && (
-          <div className='mt-4 flex items-center justify-between'>
-            <span className='font-medium text-sm'>Next Billing Date</span>
-            <span className='text-muted-foreground text-sm'>
-              {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
-            </span>
-          </div>
-        )}
+            // Default behavior for other users
+            const otherPlans = visiblePlans.filter((p) => p !== 'enterprise')
 
-        {/* Billing usage notifications toggle */}
-        {subscription.isPaid && <BillingUsageNotificationsToggle />}
+            // Layout logic:
+            // Free users (3 plans): Pro and Team vertical in grid, Enterprise horizontal below
+            // Team admins (1 plan): Enterprise horizontal
+            const enterpriseLayout =
+              totalPlans === 1 || totalPlans === 3 ? 'horizontal' : 'vertical'
 
-        {/* Cancel Subscription */}
-        {permissions.canCancelSubscription && (
-          <div className='mt-2'>
-            <CancelSubscription
-              subscription={{
-                plan: subscription.plan,
-                status: subscription.status,
-                isPaid: subscription.isPaid,
+            return (
+              <>
+                {otherPlans.length > 0 && (
+                  <div
+                    className={cn(
+                      'grid gap-[8px]',
+                      otherPlans.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
+                    )}
+                  >
+                    {otherPlans.map((plan) => renderPlanCard(plan, 'vertical'))}
+                  </div>
+                )}
+
+                {/* Enterprise plan */}
+                {hasEnterprise && renderPlanCard('enterprise', enterpriseLayout)}
+              </>
+            )
+          })()}
+        </div>
+      )}
+
+      {/* Next Billing Date */}
+      {subscription.isPaid && subscriptionData?.data?.periodEnd && (
+        <div className='mt-[16px] flex items-center justify-between'>
+          <span className='font-medium text-[13px]'>Next Billing Date</span>
+          <span className='text-[13px] text-[var(--text-muted)]'>
+            {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
+          </span>
+        </div>
+      )}
+
+      {/* Billing usage notifications toggle */}
+      {subscription.isPaid && <BillingUsageNotificationsToggle />}
+
+      {/* Cancel Subscription */}
+      {permissions.canCancelSubscription && (
+        <div className='mt-[8px]'>
+          <CancelSubscription
+            subscription={{
+              plan: subscription.plan,
+              status: subscription.status,
+              isPaid: subscription.isPaid,
+            }}
+            subscriptionData={{
+              periodEnd: subscriptionData?.data?.periodEnd || null,
+              cancelAtPeriodEnd: subscriptionData?.data?.cancelAtPeriodEnd,
+            }}
+          />
+        </div>
+      )}
+
+      {/* Workspace API Billing Settings */}
+      {canManageWorkspaceKeys && (
+        <div className='mt-[24px] flex items-center justify-between'>
+          <span className='font-medium text-[13px]'>Billed Account for Workspace</span>
+          {isWorkspaceLoading ? (
+            <Skeleton className='h-8 w-[200px] rounded-[6px]' />
+          ) : workspaceAdmins.length === 0 ? (
+            <div className='rounded-[6px] border border-dashed px-3 py-1.5 text-[var(--text-muted)] text-xs'>
+              No admin members available
+            </div>
+          ) : (
+            <Select
+              value={billedAccountUserId ?? ''}
+              onValueChange={async (value) => {
+                if (value === billedAccountUserId) return
+                try {
+                  await updateWorkspaceSettings({ billedAccountUserId: value })
+                } catch (error) {
+                  // Error is already logged in updateWorkspaceSettings
+                }
               }}
-              subscriptionData={{
-                periodEnd: subscriptionData?.data?.periodEnd || null,
-                cancelAtPeriodEnd: subscriptionData?.data?.cancelAtPeriodEnd,
-              }}
-            />
-          </div>
-        )}
-
-        {/* Workspace API Billing Settings */}
-        {canManageWorkspaceKeys && (
-          <div className='mt-6 flex items-center justify-between'>
-            <span className='font-medium text-sm'>Billed Account for Workspace</span>
-            {isWorkspaceLoading ? (
-              <Skeleton className='h-8 w-[200px] rounded-md' />
-            ) : workspaceAdmins.length === 0 ? (
-              <div className='rounded-md border border-dashed px-3 py-1.5 text-muted-foreground text-xs'>
-                No admin members available
-              </div>
-            ) : (
-              <Select
-                value={billedAccountUserId ?? ''}
-                onValueChange={async (value) => {
-                  if (value === billedAccountUserId) return
-                  try {
-                    await updateWorkspaceSettings({ billedAccountUserId: value })
-                  } catch (error) {
-                    // Error is already logged in updateWorkspaceSettings
-                  }
-                }}
-                disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
-              >
-                <SelectTrigger className='h-8 w-[200px] justify-between text-left text-xs'>
-                  <SelectValue placeholder='Select admin' />
-                </SelectTrigger>
-                <SelectContent align='start' className='z-[10000050]'>
-                  <SelectGroup>
-                    <SelectLabel className='px-3 py-1 text-[11px] text-muted-foreground uppercase'>
-                      Workspace admins
-                    </SelectLabel>
-                    {workspaceAdmins.map((admin: any) => (
-                      <SelectItem key={admin.userId} value={admin.userId} className='py-1 text-xs'>
-                        {admin.email}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            )}
-          </div>
-        )}
-      </div>
+              disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
+            >
+              <SelectTrigger className='h-8 w-[200px] justify-between text-left text-xs'>
+                <SelectValue placeholder='Select admin' />
+              </SelectTrigger>
+              <SelectContent align='start' className='z-[10000050]'>
+                <SelectGroup>
+                  <SelectLabel className='px-3 py-1 text-[11px] text-[var(--text-muted)] uppercase'>
+                    Workspace admins
+                  </SelectLabel>
+                  {workspaceAdmins.map((admin: any) => (
+                    <SelectItem key={admin.userId} value={admin.userId} className='py-1 text-xs'>
+                      {admin.email}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
     </div>
   )
 }
@@ -620,10 +617,10 @@ function BillingUsageNotificationsToggle() {
   const isLoading = updateSetting.isPending
 
   return (
-    <div className='mt-4 flex items-center justify-between'>
+    <div className='mt-[16px] flex items-center justify-between'>
       <div className='flex flex-col'>
-        <span className='font-medium text-sm'>Usage notifications</span>
-        <span className='text-muted-foreground text-xs'>Email me when I reach 80% usage</span>
+        <span className='font-medium text-[13px]'>Usage notifications</span>
+        <span className='text-[var(--text-muted)] text-xs'>Email me when I reach 80% usage</span>
       </div>
       <Switch
         checked={!!enabled}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
index c577713a3..4285142fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
@@ -132,8 +132,8 @@ export function MemberInvitationCard({
       <div className='space-y-3'>
         {/* Header */}
         <div>
-          <h4 className='font-medium text-sm'>Invite Team Members</h4>
-          <p className='text-muted-foreground text-xs'>
+          <h4 className='font-medium text-[13px]'>Invite Team Members</h4>
+          <p className='text-[var(--text-muted)] text-xs'>
             Add new members to your team and optionally give them access to specific workspaces
           </p>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
index cc8333a47..40e1754c8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -1,6 +1,8 @@
 import { RefreshCw } from 'lucide-react'
 import {
   Button,
+  Input,
+  Label,
   Modal,
   ModalContent,
   ModalDescription,
@@ -8,8 +10,6 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@/components/emcn'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 
 interface NoOrganizationViewProps {
   hasTeamPlan: boolean
@@ -42,12 +42,12 @@ export function NoOrganizationView({
 }: NoOrganizationViewProps) {
   if (hasTeamPlan || hasEnterprisePlan) {
     return (
-      <div className='px-6 pt-4 pb-4'>
+      <div>
         <div className='flex flex-col gap-6'>
           {/* Header - matching settings page style */}
           <div>
-            <h4 className='font-medium text-sm'>Create Your Team Workspace</h4>
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <h4 className='font-medium text-[13px]'>Create Your Team Workspace</h4>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
               workspace to start collaborating with your team.
             </p>
@@ -56,7 +56,7 @@ export function NoOrganizationView({
           {/* Form fields - clean layout without card */}
           <div className='space-y-4'>
             <div>
-              <Label htmlFor='orgName' className='font-medium text-sm'>
+              <Label htmlFor='orgName' className='font-medium text-[13px]'>
                 Team Name
               </Label>
               <Input
@@ -69,11 +69,11 @@ export function NoOrganizationView({
             </div>
 
             <div>
-              <Label htmlFor='orgSlug' className='font-medium text-sm'>
+              <Label htmlFor='orgSlug' className='font-medium text-[13px]'>
                 Team URL
               </Label>
               <div className='mt-1 flex items-center'>
-                <div className='rounded-l-[8px] border border-r-0 bg-muted px-3 py-2 text-muted-foreground text-sm'>
+                <div className='rounded-l-[8px] border border-r-0 bg-[var(--surface-3)] px-3 py-2 text-[var(--text-muted)] text-sm'>
                   sim.ai/team/
                 </div>
                 <Input
@@ -117,7 +117,7 @@ export function NoOrganizationView({
 
             <div className='space-y-4'>
               <div>
-                <Label htmlFor='org-name' className='font-medium text-sm'>
+                <Label htmlFor='org-name' className='font-medium text-[13px]'>
                   Organization Name
                 </Label>
                 <Input
@@ -131,7 +131,7 @@ export function NoOrganizationView({
               </div>
 
               <div>
-                <Label htmlFor='org-slug' className='font-medium text-sm'>
+                <Label htmlFor='org-slug' className='font-medium text-[13px]'>
                   Organization Slug
                 </Label>
                 <Input
@@ -178,8 +178,8 @@ export function NoOrganizationView({
   return (
     <div className='space-y-4 p-6'>
       <div className='space-y-6'>
-        <h3 className='font-medium text-sm'>No Team Workspace</h3>
-        <p className='text-muted-foreground text-sm'>
+        <h3 className='font-medium text-[13px]'>No Team Workspace</h3>
+        <p className='text-[var(--text-muted)] text-sm'>
           You don't have a team workspace yet. To collaborate with others, first upgrade to a team
           or enterprise plan.
         </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 06c459f5f..9d18438ca 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -40,9 +40,7 @@ export function RemoveMemberDialog({
             {isSelfRemoval
               ? 'Are you sure you want to leave this organization? You will lose access to all team resources.'
               : `Are you sure you want to remove ${memberName} from the team?`}{' '}
-            <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-              This action cannot be undone.
-            </span>
+            <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </ModalDescription>
         </ModalHeader>
 
@@ -60,7 +58,7 @@ export function RemoveMemberDialog({
                 Also reduce seat count in my subscription
               </label>
             </div>
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               If selected, your team seat count will be reduced by 1, lowering your monthly billing.
             </p>
           </div>
@@ -80,7 +78,7 @@ export function RemoveMemberDialog({
           </Button>
           <Button
             onClick={() => onConfirmRemove(shouldReduceSeats)}
-            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
           >
             {isSelfRemoval ? 'Leave Organization' : 'Remove'}
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
index 69d08e370..da8d69355 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
@@ -112,7 +112,7 @@ export function TeamMembers({
   }
 
   if (teamItems.length === 0) {
-    return <div className='text-center text-muted-foreground text-sm'>No team members yet.</div>
+    return <div className='text-center text-[var(--text-muted)] text-sm'>No team members yet.</div>
   }
 
   // Check if current user can leave (is a member but not owner)
@@ -147,7 +147,7 @@ export function TeamMembers({
     <div className='flex flex-col gap-4'>
       {/* Header - simple like account page */}
       <div>
-        <h4 className='font-medium text-sm'>Team Members</h4>
+        <h4 className='font-medium text-[13px]'>Team Members</h4>
       </div>
 
       {/* Members list - clean like account page */}
@@ -173,29 +173,29 @@ export function TeamMembers({
                       className={`inline-flex h-[1.125rem] items-center rounded-[6px] px-2 py-0 font-medium text-xs ${
                         item.role === 'owner'
                           ? 'gradient-text border-gradient-primary/20 bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
-                          : 'bg-primary/10 text-muted-foreground'
+                          : 'bg-[var(--surface-3)] text-[var(--text-muted)]'
                       } `}
                     >
                       {item.role.charAt(0).toUpperCase() + item.role.slice(1)}
                     </span>
                   )}
                   {item.type === 'invitation' && (
-                    <span className='inline-flex h-[1.125rem] items-center rounded-[6px] bg-muted px-2 py-0 font-medium text-muted-foreground text-xs'>
+                    <span className='inline-flex h-[1.125rem] items-center rounded-[6px] bg-[var(--surface-3)] px-2 py-0 font-medium text-[var(--text-muted)] text-xs'>
                       Pending
                     </span>
                   )}
                 </div>
-                <div className='truncate text-muted-foreground text-xs'>{item.email}</div>
+                <div className='truncate text-[var(--text-muted)] text-xs'>{item.email}</div>
               </div>
 
               {/* Usage stats - matching subscription layout */}
               {isAdminOrOwner && (
                 <div className='hidden items-center text-xs tabular-nums sm:flex'>
                   <div className='text-center'>
-                    <div className='text-muted-foreground'>Usage</div>
+                    <div className='text-[var(--text-muted)]'>Usage</div>
                     <div className='font-medium'>
                       {isLoadingUsage && item.type === 'member' ? (
-                        <span className='inline-block h-3 w-12 animate-pulse rounded bg-muted' />
+                        <span className='inline-block h-3 w-12 animate-pulse rounded bg-[var(--surface-3)]' />
                       ) : (
                         item.usage
                       )}
@@ -215,7 +215,7 @@ export function TeamMembers({
                   <Button
                     variant='ghost'
                     onClick={() => onRemoveMember(item.member)}
-                    className='h-8 text-muted-foreground hover:text-foreground'
+                    className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                   >
                     Remove
                   </Button>
@@ -227,7 +227,7 @@ export function TeamMembers({
                   variant='ghost'
                   onClick={() => handleCancelInvitation(item.invitation.id)}
                   disabled={cancellingInvitations.has(item.invitation.id)}
-                  className='h-8 text-muted-foreground hover:text-foreground'
+                  className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                 >
                   {cancellingInvitations.has(item.invitation.id) ? 'Cancelling...' : 'Cancel'}
                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 7240f9797..b2b2e8d25 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -29,7 +29,7 @@ interface TeamSeatsOverviewProps {
 
 function TeamSeatsSkeleton() {
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-2'>
@@ -38,7 +38,7 @@ function TeamSeatsSkeleton() {
           </div>
           <div className='flex items-center gap-1 text-xs'>
             <Skeleton className='h-4 w-8' />
-            <span className='text-muted-foreground'>/</span>
+            <span className='text-[var(--text-muted)]'>/</span>
             <Skeleton className='h-4 w-8' />
           </div>
         </div>
@@ -67,11 +67,11 @@ export function TeamSeatsOverview({
 
   if (!subscriptionData) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <div className='space-y-3 text-center'>
           <div className='space-y-2'>
             <p className='font-medium text-sm'>No Team Subscription Found</p>
-            <p className='text-muted-foreground text-xs'>
+            <p className='text-[var(--text-muted)] text-xs'>
               Your subscription may need to be transferred to this organization.
             </p>
           </div>
@@ -93,12 +93,12 @@ export function TeamSeatsOverview({
   const isEnterprise = checkEnterprisePlan(subscriptionData)
 
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         {/* Top row - matching UsageHeader */}
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-2'>
-            <span className='font-medium text-[#FFFFFF] text-[12px]'>Seats</span>
+            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Seats</span>
             {!isEnterprise && (
               <Badge
                 className='gradient-text h-[1.125rem] cursor-pointer rounded-[6px] border-gradient-primary/20 bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary px-2 py-0 font-medium text-xs'
@@ -109,11 +109,11 @@ export function TeamSeatsOverview({
             )}
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
-            <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {totalSeats} total
             </span>
           </div>
@@ -128,7 +128,7 @@ export function TeamSeatsOverview({
                 key={i}
                 className={cn(
                   'h-[6px] flex-1 rounded-full transition-colors',
-                  isFilled ? 'bg-[#34B5FF]' : 'bg-[#2C2C2C]'
+                  isFilled ? 'bg-[#34B5FF]' : 'bg-[var(--border)]'
                 )}
               />
             )
@@ -138,7 +138,7 @@ export function TeamSeatsOverview({
         {/* Enterprise message */}
         {isEnterprise && (
           <div className='pt-1 text-center'>
-            <p className='text-muted-foreground text-xs'>
+            <p className='text-[var(--text-muted)] text-xs'>
               Contact support for enterprise usage limit changes
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
index e29d657a5..daac171e3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Combobox,
   type ComboboxOption,
+  Label,
   Modal,
   ModalContent,
   ModalDescription,
@@ -11,7 +12,6 @@ import {
   ModalTitle,
   Tooltip,
 } from '@/components/emcn'
-import { Label } from '@/components/ui/label'
 import { DEFAULT_TEAM_TIER_COST_LIMIT } from '@/lib/billing/constants'
 import { env } from '@/lib/core/config/env'
 
@@ -82,23 +82,23 @@ export function TeamSeats({
             placeholder='Select number of seats'
           />
 
-          <p className='mt-2 text-muted-foreground text-sm'>
+          <p className='mt-2 text-[var(--text-muted)] text-sm'>
             Your team will have {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} with a
             total of ${totalMonthlyCost} inference credits per month.
           </p>
 
           {showCostBreakdown && currentSeats !== undefined && (
-            <div className='mt-3 rounded-md bg-muted/50 p-3'>
+            <div className='mt-3 rounded-[8px] bg-[var(--surface-3)] p-3'>
               <div className='flex justify-between text-sm'>
-                <span>Current seats:</span>
+                <span className='text-[var(--text-muted)]'>Current seats:</span>
                 <span>{currentSeats}</span>
               </div>
               <div className='flex justify-between text-sm'>
-                <span>New seats:</span>
+                <span className='text-[var(--text-muted)]'>New seats:</span>
                 <span>{selectedSeats}</span>
               </div>
               <div className='mt-2 flex justify-between border-t pt-2 font-medium text-sm'>
-                <span>Monthly cost change:</span>
+                <span className='text-[var(--text-muted)]'>Monthly cost change:</span>
                 <span>
                   {costChange > 0 ? '+' : ''}${costChange}
                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
index 8db05bf9e..da4704fad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
@@ -30,7 +30,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (isLoadingOrgBilling) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <div className='space-y-2'>
           <div className='flex items-center justify-between'>
             <div className='flex items-center gap-2'>
@@ -39,7 +39,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
             </div>
             <div className='flex items-center gap-1 text-xs'>
               <Skeleton className='h-4 w-8' />
-              <span className='text-muted-foreground'>/</span>
+              <span className='text-[var(--text-muted)]'>/</span>
               <Skeleton className='h-4 w-8' />
             </div>
           </div>
@@ -51,7 +51,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (error) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <p className='text-center text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
           {error instanceof Error ? error.message : 'Failed to load billing data'}
         </p>
@@ -126,7 +126,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
             organizationId={activeOrg.id}
           />
         ) : (
-          <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+          <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
             ${currentCap.toFixed(0)}
           </span>
         )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
index 5ddb240cb..e38655e53 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
@@ -281,63 +281,61 @@ export function TeamManagement() {
 
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
     return (
-      <div className='flex h-full flex-col'>
-        <div className='flex flex-1 flex-col overflow-y-auto px-6 pt-4 pb-4'>
-          {/* Team Seats Overview */}
-          <div className='mb-4'>
-            <div className='rounded-[8px] border bg-background p-4 shadow-xs'>
-              <div className='space-y-3'>
-                <div className='flex items-center justify-between'>
-                  <Skeleton className='h-5 w-24' />
-                  <Skeleton className='h-8 w-20 rounded-[6px]' />
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Team Seats Overview */}
+        <div>
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4 shadow-xs'>
+            <div className='space-y-[12px]'>
+              <div className='flex items-center justify-between'>
+                <Skeleton className='h-5 w-24' />
+                <Skeleton className='h-8 w-20 rounded-[6px]' />
+              </div>
+              <div className='flex items-center gap-[16px]'>
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-16' />
+                  <Skeleton className='h-6 w-8' />
                 </div>
-                <div className='flex items-center gap-4'>
-                  <div className='flex flex-col gap-1'>
-                    <Skeleton className='h-3 w-16' />
-                    <Skeleton className='h-6 w-8' />
-                  </div>
-                  <div className='h-8 w-px bg-border' />
-                  <div className='flex flex-col gap-1'>
-                    <Skeleton className='h-3 w-20' />
-                    <Skeleton className='h-6 w-8' />
-                  </div>
-                  <div className='h-8 w-px bg-border' />
-                  <div className='flex flex-col gap-1'>
+                <div className='h-8 w-px bg-[var(--border)]' />
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-20' />
+                  <Skeleton className='h-6 w-8' />
+                </div>
+                <div className='h-8 w-px bg-[var(--border)]' />
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-24' />
+                  <Skeleton className='h-6 w-12' />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Team Members */}
+        <div>
+          <Skeleton className='mb-[12px] h-5 w-32' />
+          <div className='space-y-[8px]'>
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
+                <div className='flex items-center gap-[12px]'>
+                  <Skeleton className='h-10 w-10 rounded-full' />
+                  <div className='space-y-[4px]'>
+                    <Skeleton className='h-4 w-32' />
                     <Skeleton className='h-3 w-24' />
-                    <Skeleton className='h-6 w-12' />
                   </div>
                 </div>
+                <Skeleton className='h-6 w-16 rounded-full' />
               </div>
-            </div>
+            ))}
           </div>
+        </div>
 
-          {/* Team Members */}
-          <div className='mb-4'>
-            <Skeleton className='mb-3 h-5 w-32' />
-            <div className='space-y-2'>
-              {[...Array(3)].map((_, i) => (
-                <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
-                  <div className='flex items-center gap-3'>
-                    <Skeleton className='h-10 w-10 rounded-full' />
-                    <div className='space-y-1'>
-                      <Skeleton className='h-4 w-32' />
-                      <Skeleton className='h-3 w-24' />
-                    </div>
-                  </div>
-                  <Skeleton className='h-6 w-16 rounded-full' />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Invite Member Card */}
-          <div className='mb-4'>
-            <div className='rounded-[8px] border bg-background p-4'>
-              <Skeleton className='mb-3 h-5 w-32' />
-              <div className='space-y-3'>
-                <Skeleton className='h-9 w-full rounded-[8px]' />
-                <Skeleton className='h-9 w-full rounded-[8px]' />
-              </div>
+        {/* Invite Member Card */}
+        <div>
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4'>
+            <Skeleton className='mb-[12px] h-5 w-32' />
+            <div className='space-y-[12px]'>
+              <Skeleton className='h-9 w-full rounded-[8px]' />
+              <Skeleton className='h-9 w-full rounded-[8px]' />
             </div>
           </div>
         </div>
@@ -365,72 +363,106 @@ export function TeamManagement() {
   }
 
   return (
-    <div className='flex h-full flex-col'>
-      <div className='flex flex-1 flex-col overflow-y-auto px-6 pt-4 pb-4'>
-        {/* Seats Overview - Full Width */}
-        {adminOrOwner && (
-          <div className='mb-4'>
-            <TeamSeatsOverview
-              subscriptionData={subscriptionData || null}
-              isLoadingSubscription={isLoadingSubscription}
-              usedSeats={usedSeats.used}
-              isLoading={isLoading}
-              onConfirmTeamUpgrade={confirmTeamUpgrade}
-              onReduceSeats={handleReduceSeats}
-              onAddSeatDialog={handleAddSeatDialog}
-            />
-          </div>
-        )}
-
-        {/* Action: Invite New Members */}
-        {adminOrOwner && (
-          <div className='mb-4'>
-            <MemberInvitationCard
-              inviteEmail={inviteEmail}
-              setInviteEmail={setInviteEmail}
-              isInviting={inviteMutation.isPending}
-              showWorkspaceInvite={showWorkspaceInvite}
-              setShowWorkspaceInvite={setShowWorkspaceInvite}
-              selectedWorkspaces={selectedWorkspaces}
-              userWorkspaces={adminWorkspaces}
-              onInviteMember={handleInviteMember}
-              onLoadUserWorkspaces={async () => {}} // No-op: data is auto-loaded by React Query
-              onWorkspaceToggle={handleWorkspaceToggle}
-              inviteSuccess={inviteSuccess}
-              availableSeats={Math.max(0, (subscriptionData?.seats || 0) - usedSeats.used)}
-              maxSeats={subscriptionData?.seats || 0}
-              invitationError={inviteMutation.error}
-              isLoadingWorkspaces={isLoadingWorkspaces}
-            />
-          </div>
-        )}
-
-        {/* Main Content: Team Members */}
-        <div className='mb-4'>
-          <TeamMembers
-            organization={displayOrganization}
-            currentUserEmail={session?.user?.email ?? ''}
-            isAdminOrOwner={adminOrOwner}
-            onRemoveMember={handleRemoveMember}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Seats Overview - Full Width */}
+      {adminOrOwner && (
+        <div>
+          <TeamSeatsOverview
+            subscriptionData={subscriptionData || null}
+            isLoadingSubscription={isLoadingSubscription}
+            usedSeats={usedSeats.used}
+            isLoading={isLoading}
+            onConfirmTeamUpgrade={confirmTeamUpgrade}
+            onReduceSeats={handleReduceSeats}
+            onAddSeatDialog={handleAddSeatDialog}
           />
         </div>
+      )}
 
-        {/* Additional Info - Subtle and collapsed */}
-        <div className='space-y-3'>
-          {/* Single Organization Notice */}
-          {adminOrOwner && (
-            <div className='rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)] p-3'>
-              <p className='text-muted-foreground text-xs'>
-                <span className='font-medium'>Note:</span> Users can only be part of one
-                organization at a time.
-              </p>
+      {/* Action: Invite New Members */}
+      {adminOrOwner && (
+        <div>
+          <MemberInvitationCard
+            inviteEmail={inviteEmail}
+            setInviteEmail={setInviteEmail}
+            isInviting={inviteMutation.isPending}
+            showWorkspaceInvite={showWorkspaceInvite}
+            setShowWorkspaceInvite={setShowWorkspaceInvite}
+            selectedWorkspaces={selectedWorkspaces}
+            userWorkspaces={adminWorkspaces}
+            onInviteMember={handleInviteMember}
+            onLoadUserWorkspaces={async () => {}} // No-op: data is auto-loaded by React Query
+            onWorkspaceToggle={handleWorkspaceToggle}
+            inviteSuccess={inviteSuccess}
+            availableSeats={Math.max(0, (subscriptionData?.seats || 0) - usedSeats.used)}
+            maxSeats={subscriptionData?.seats || 0}
+            invitationError={inviteMutation.error}
+            isLoadingWorkspaces={isLoadingWorkspaces}
+          />
+        </div>
+      )}
+
+      {/* Main Content: Team Members */}
+      <div>
+        <TeamMembers
+          organization={displayOrganization}
+          currentUserEmail={session?.user?.email ?? ''}
+          isAdminOrOwner={adminOrOwner}
+          onRemoveMember={handleRemoveMember}
+        />
+      </div>
+
+      {/* Additional Info - Subtle and collapsed */}
+      <div className='space-y-[12px]'>
+        {/* Single Organization Notice */}
+        {adminOrOwner && (
+          <div className='rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-3'>
+            <p className='text-[var(--text-muted)] text-xs'>
+              <span className='font-medium'>Note:</span> Users can only be part of one organization
+              at a time.
+            </p>
+          </div>
+        )}
+
+        {/* Team Information */}
+        <details className='group rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)]'>
+          <summary className='flex cursor-pointer items-center justify-between rounded-[8px] p-3 font-medium text-[13px] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+            <span>Team Information</span>
+            <svg
+              className='h-4 w-4 transition-transform group-open:rotate-180'
+              fill='none'
+              viewBox='0 0 24 24'
+              stroke='currentColor'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                d='M19 9l-7 7-7-7'
+              />
+            </svg>
+          </summary>
+          <div className='space-y-[8px] border-[var(--border-muted)] border-t p-3 text-xs'>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Team ID:</span>
+              <span className='font-mono text-[10px]'>{displayOrganization.id}</span>
             </div>
-          )}
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Created:</span>
+              <span>{new Date(displayOrganization.createdAt).toLocaleDateString()}</span>
+            </div>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Your Role:</span>
+              <span className='font-medium capitalize'>{userRole}</span>
+            </div>
+          </div>
+        </details>
 
-          {/* Team Information */}
-          <details className='group rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)]'>
-            <summary className='flex cursor-pointer items-center justify-between rounded-lg p-3 font-medium text-sm hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
-              <span>Team Information</span>
+        {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
+        {hasTeamPlan && !hasEnterprisePlan && (
+          <details className='group rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)]'>
+            <summary className='flex cursor-pointer items-center justify-between rounded-[8px] p-3 font-medium text-[13px] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+              <span>Billing Information</span>
               <svg
                 className='h-4 w-4 transition-transform group-open:rotate-180'
                 fill='none'
@@ -445,64 +477,28 @@ export function TeamManagement() {
                 />
               </svg>
             </summary>
-            <div className='space-y-2 border-[var(--border-muted)] border-t p-3 text-xs'>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Team ID:</span>
-                <span className='font-mono text-[10px]'>{displayOrganization.id}</span>
-              </div>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Created:</span>
-                <span>{new Date(displayOrganization.createdAt).toLocaleDateString()}</span>
-              </div>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Your Role:</span>
-                <span className='font-medium capitalize'>{userRole}</span>
-              </div>
+            <div className='border-[var(--border-muted)] border-t p-3'>
+              <ul className='ml-4 list-disc space-y-[8px] text-[var(--text-muted)] text-xs'>
+                <li>
+                  Your team is billed a minimum of $
+                  {(subscriptionData?.seats || 0) *
+                    (env.TEAM_TIER_COST_LIMIT ?? DEFAULT_TEAM_TIER_COST_LIMIT)}
+                  /month for {subscriptionData?.seats || 0} licensed seats
+                </li>
+                <li>All team member usage is pooled together from a shared limit</li>
+                <li>
+                  When pooled usage exceeds the limit, all members are blocked from using the
+                  service
+                </li>
+                <li>You can increase the usage limit to allow for higher usage</li>
+                <li>
+                  Any usage beyond the minimum seat cost is billed as overage at the end of the
+                  billing period
+                </li>
+              </ul>
             </div>
           </details>
-
-          {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
-          {hasTeamPlan && !hasEnterprisePlan && (
-            <details className='group rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)]'>
-              <summary className='flex cursor-pointer items-center justify-between rounded-lg p-3 font-medium text-sm hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
-                <span>Billing Information</span>
-                <svg
-                  className='h-4 w-4 transition-transform group-open:rotate-180'
-                  fill='none'
-                  viewBox='0 0 24 24'
-                  stroke='currentColor'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M19 9l-7 7-7-7'
-                  />
-                </svg>
-              </summary>
-              <div className='border-[var(--border-muted)] border-t p-3'>
-                <ul className='ml-4 list-disc space-y-2 text-muted-foreground text-xs'>
-                  <li>
-                    Your team is billed a minimum of $
-                    {(subscriptionData?.seats || 0) *
-                      (env.TEAM_TIER_COST_LIMIT ?? DEFAULT_TEAM_TIER_COST_LIMIT)}
-                    /month for {subscriptionData?.seats || 0} licensed seats
-                  </li>
-                  <li>All team member usage is pooled together from a shared limit</li>
-                  <li>
-                    When pooled usage exceeds the limit, all members are blocked from using the
-                    service
-                  </li>
-                  <li>You can increase the usage limit to allow for higher usage</li>
-                  <li>
-                    Any usage beyond the minimum seat cost is billed as overage at the end of the
-                    billing period
-                  </li>
-                </ul>
-              </div>
-            </details>
-          )}
-        </div>
+        )}
       </div>
 
       <RemoveMemberDialog
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
new file mode 100644
index 000000000..f7aa00092
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
@@ -0,0 +1,499 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Camera, Globe, Linkedin, Mail } from 'lucide-react'
+import Image from 'next/image'
+import { Button, Combobox, Input, Textarea } from '@/components/emcn'
+import { AgentIcon, xIcon as XIcon } from '@/components/icons'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useSession } from '@/lib/auth/auth-client'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
+import {
+  useCreatorProfile,
+  useOrganizations,
+  useSaveCreatorProfile,
+} from '@/hooks/queries/creator-profile'
+
+const logger = createLogger('TemplateProfile')
+
+type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
+
+interface FormData {
+  referenceType: 'user' | 'organization'
+  referenceId: string
+  name: string
+  profileImageUrl: string
+  about: string
+  xUrl: string
+  linkedinUrl: string
+  websiteUrl: string
+  contactEmail: string
+}
+
+/**
+ * Extracts initials from a name string.
+ * @param name - The name to extract initials from
+ * @returns Up to 2 uppercase characters representing the initials
+ */
+function getInitials(name: string | undefined | null): string {
+  if (!name?.trim()) return ''
+  const parts = name.trim().split(' ')
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
+  }
+  return parts[0][0].toUpperCase()
+}
+
+/**
+ * Strips the protocol (http:// or https://) from a URL for display purposes.
+ * @param url - The URL to strip the protocol from
+ * @returns The URL without the protocol prefix
+ */
+function stripProtocol(url: string): string {
+  if (!url) return ''
+  return url.replace(/^https?:\/\//, '')
+}
+
+/**
+ * Normalizes a URL by adding https:// protocol if not present.
+ * @param url - The URL to normalize (may or may not have protocol)
+ * @returns The URL with https:// protocol, or empty string if input is empty
+ */
+function normalizeUrl(url: string): string {
+  if (!url?.trim()) return ''
+  const trimmed = url.trim()
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed
+  }
+  return `https://${trimmed}`
+}
+
+/**
+ * Template Profile settings component for managing user/organization profiles
+ */
+export function TemplateProfile() {
+  const { data: session, isPending: isSessionLoading } = useSession()
+  const userId = session?.user?.id || ''
+
+  const { data: organizations = [], isLoading: isOrganizationsLoading } = useOrganizations()
+  const { data: existingProfile, isLoading: isProfileLoading } = useCreatorProfile(userId)
+  const saveProfile = useSaveCreatorProfile()
+
+  const isLoading = isSessionLoading || isOrganizationsLoading || (!!userId && isProfileLoading)
+
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof FormData, string>>>({})
+  const [imageLoadError, setImageLoadError] = useState(false)
+
+  const [formData, setFormData] = useState<FormData>({
+    referenceType: 'user',
+    referenceId: session?.user?.id || '',
+    name: session?.user?.name || session?.user?.email || '',
+    profileImageUrl: '',
+    about: '',
+    xUrl: '',
+    linkedinUrl: '',
+    websiteUrl: '',
+    contactEmail: '',
+  })
+
+  const [initialFormData, setInitialFormData] = useState<FormData | null>(null)
+
+  const {
+    previewUrl: profilePictureUrl,
+    fileInputRef: profilePictureInputRef,
+    handleThumbnailClick: handleProfilePictureClick,
+    handleFileChange: handleProfilePictureChange,
+    isUploading: isUploadingProfilePicture,
+  } = useProfilePictureUpload({
+    currentImage: formData.profileImageUrl,
+    onUpload: async (url) => {
+      setFormData((prev) => ({ ...prev, profileImageUrl: url || '' }))
+      setUploadError(null)
+      setImageLoadError(false)
+    },
+    onError: (error) => {
+      setUploadError(error)
+      setTimeout(() => setUploadError(null), 5000)
+    },
+  })
+
+  // Reset image load error when the URL changes
+  useEffect(() => {
+    setImageLoadError(false)
+  }, [profilePictureUrl])
+
+  // Initialize referenceId and initial form data when session loads (for new profiles)
+  useEffect(() => {
+    if (userId && !existingProfile && !isProfileLoading) {
+      setFormData((prev) => {
+        const newData = {
+          ...prev,
+          referenceId: prev.referenceType === 'user' ? userId : prev.referenceId,
+        }
+        // Set initial form data for new profiles to track changes
+        if (initialFormData === null) {
+          setInitialFormData(newData)
+        }
+        return newData
+      })
+    }
+  }, [userId, existingProfile, isProfileLoading, initialFormData])
+
+  // Load existing profile data
+  useEffect(() => {
+    if (existingProfile) {
+      const details = existingProfile.details as CreatorProfileDetails | null
+      const loadedData: FormData = {
+        referenceType: existingProfile.referenceType,
+        referenceId: existingProfile.referenceId,
+        name: existingProfile.name || '',
+        profileImageUrl: existingProfile.profileImageUrl || '',
+        about: details?.about || '',
+        // Strip protocol from URLs for display
+        xUrl: stripProtocol(details?.xUrl || ''),
+        linkedinUrl: stripProtocol(details?.linkedinUrl || ''),
+        websiteUrl: stripProtocol(details?.websiteUrl || ''),
+        contactEmail: details?.contactEmail || '',
+      }
+      setFormData(loadedData)
+      setInitialFormData(loadedData)
+    }
+  }, [existingProfile])
+
+  const handleSubmit = async () => {
+    if (!userId) return
+    if (!formData.name.trim() || !formData.profileImageUrl) return
+
+    setSaveStatus('saving')
+    setSaveError(null)
+
+    try {
+      const details: CreatorProfileDetails = {}
+      if (formData.about) details.about = formData.about
+      // Normalize URLs by adding https:// protocol before saving
+      if (formData.xUrl) details.xUrl = normalizeUrl(formData.xUrl)
+      if (formData.linkedinUrl) details.linkedinUrl = normalizeUrl(formData.linkedinUrl)
+      if (formData.websiteUrl) details.websiteUrl = normalizeUrl(formData.websiteUrl)
+      if (formData.contactEmail) details.contactEmail = formData.contactEmail
+
+      await saveProfile.mutateAsync({
+        referenceType: formData.referenceType,
+        referenceId: formData.referenceId,
+        name: formData.name,
+        profileImageUrl: formData.profileImageUrl,
+        details: Object.keys(details).length > 0 ? details : undefined,
+        existingProfileId: existingProfile?.id,
+      })
+
+      setInitialFormData({ ...formData })
+      setSaveStatus('saved')
+      setTimeout(() => setSaveStatus('idle'), 2000)
+    } catch (error) {
+      logger.error('Error saving creator profile:', error)
+      const errorMessage = error instanceof Error ? error.message : 'Failed to save creator profile'
+      setSaveError(errorMessage)
+      setSaveStatus('idle')
+    }
+  }
+
+  /**
+   * Validates a URL by normalizing it first (adding protocol if needed).
+   * @param value - The URL value to validate (with or without protocol)
+   * @returns Error message if invalid, null if valid
+   */
+  const validateUrl = (value: string): string | null => {
+    if (!value) return null
+    try {
+      new URL(normalizeUrl(value))
+      return null
+    } catch {
+      return 'Please enter a valid URL'
+    }
+  }
+
+  const validateEmail = (value: string): string | null => {
+    if (!value) return null
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return emailRegex.test(value) ? null : 'Please enter a valid email'
+  }
+
+  const updateField = <K extends keyof FormData>(field: K, value: FormData[K]) => {
+    // For URL fields, strip the protocol for display
+    const isUrlField = field === 'xUrl' || field === 'linkedinUrl' || field === 'websiteUrl'
+    const processedValue = isUrlField ? (stripProtocol(value as string) as FormData[K]) : value
+
+    setFormData((prev) => ({ ...prev, [field]: processedValue }))
+
+    // Validate URL fields on change
+    if (isUrlField) {
+      const error = validateUrl(processedValue as string)
+      setFieldErrors((prev) => ({ ...prev, [field]: error || undefined }))
+    } else if (field === 'contactEmail') {
+      const error = validateEmail(value as string)
+      setFieldErrors((prev) => ({ ...prev, [field]: error || undefined }))
+    }
+  }
+
+  const hasFieldErrors = Object.values(fieldErrors).some(Boolean)
+  const hasChanges =
+    initialFormData !== null &&
+    (formData.referenceType !== initialFormData.referenceType ||
+      formData.referenceId !== initialFormData.referenceId ||
+      formData.name !== initialFormData.name ||
+      formData.profileImageUrl !== initialFormData.profileImageUrl ||
+      formData.about !== initialFormData.about ||
+      formData.xUrl !== initialFormData.xUrl ||
+      formData.linkedinUrl !== initialFormData.linkedinUrl ||
+      formData.websiteUrl !== initialFormData.websiteUrl ||
+      formData.contactEmail !== initialFormData.contactEmail)
+  const isFormValid =
+    formData.name.trim() && formData.profileImageUrl && !hasFieldErrors && hasChanges
+
+  if (isLoading) {
+    return (
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {/* Display Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[50px]' />
+              <div className='flex items-center gap-[10px]'>
+                <Skeleton className='h-9 w-9 flex-shrink-0 rounded-full' />
+                <Skeleton className='h-9 flex-1' />
+              </div>
+            </div>
+
+            {/* About Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[35px]' />
+              <Skeleton className='min-h-[100px] w-full' />
+            </div>
+
+            {/* Socials Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[45px]' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+            </div>
+          </div>
+        </div>
+
+        {/* Save Button Skeleton */}
+        <div className='mt-auto flex items-center justify-end gap-[8px]'>
+          <Skeleton className='h-9 w-[60px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Scrollable Content */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {/* Profile Selection - only show if user has organizations */}
+          {organizations.length > 0 && (
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Profile</span>
+              <Combobox
+                options={[
+                  { label: 'Personal', value: userId },
+                  ...organizations.map((org) => ({
+                    label: org.name,
+                    value: org.id,
+                  })),
+                ]}
+                value={formData.referenceId}
+                onChange={(value) => {
+                  const isPersonal = value === userId
+                  setFormData((prev) => ({
+                    ...prev,
+                    referenceType: isPersonal ? 'user' : 'organization',
+                    referenceId: value,
+                  }))
+                }}
+                placeholder='Select profile'
+                editable={false}
+              />
+            </div>
+          )}
+
+          {/* Display */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Display<span className='ml-[6px] text-[var(--text-secondary)]'>*</span>
+            </span>
+            <div className='flex items-center gap-[10px]'>
+              <div className='relative'>
+                <div
+                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover:bg-[var(--bg)] ${
+                    profilePictureUrl && !imageLoadError
+                      ? 'border-transparent'
+                      : 'border-[var(--border)]'
+                  }`}
+                  onClick={handleProfilePictureClick}
+                >
+                  {(() => {
+                    if (profilePictureUrl && !imageLoadError) {
+                      return (
+                        <Image
+                          src={profilePictureUrl}
+                          alt={formData.name || 'Profile picture'}
+                          width={36}
+                          height={36}
+                          className={`h-full w-full object-cover transition-opacity duration-300 ${
+                            isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
+                          }`}
+                          onError={() => setImageLoadError(true)}
+                        />
+                      )
+                    }
+                    const initials = getInitials(formData.name)
+                    if (initials) {
+                      return (
+                        <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                          {initials}
+                        </span>
+                      )
+                    }
+                    return <AgentIcon className='h-4 w-4 text-[var(--text-muted)]' />
+                  })()}
+                  <div
+                    className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
+                      isUploadingProfilePicture
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100'
+                    }`}
+                  >
+                    {isUploadingProfilePicture ? (
+                      <div className='h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent' />
+                    ) : (
+                      <Camera className='h-3 w-3 text-white' />
+                    )}
+                  </div>
+                </div>
+                <input
+                  type='file'
+                  accept='image/png,image/jpeg,image/jpg'
+                  className='hidden'
+                  ref={profilePictureInputRef}
+                  onChange={handleProfilePictureChange}
+                  disabled={isUploadingProfilePicture}
+                />
+              </div>
+              <Input
+                placeholder='Name'
+                value={formData.name}
+                onChange={(e) => updateField('name', e.target.value)}
+                className='h-9 flex-1'
+              />
+            </div>
+            {uploadError && <p className='text-[12px] text-[var(--text-error)]'>{uploadError}</p>}
+          </div>
+
+          {/* About */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>About</span>
+            <Textarea
+              placeholder='Tell people about yourself or your organization'
+              value={formData.about}
+              onChange={(e) => updateField('about', e.target.value)}
+              className='min-h-[100px] w-full resize-none'
+            />
+          </div>
+
+          {/* Social Links */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Socials</span>
+
+            <div>
+              <div className='relative'>
+                <XIcon className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='x.com/username'
+                  value={formData.xUrl}
+                  onChange={(e) => updateField('xUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.xUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{fieldErrors.xUrl}</p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Linkedin className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='linkedin.com/in/username'
+                  value={formData.linkedinUrl}
+                  onChange={(e) => updateField('linkedinUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.linkedinUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.linkedinUrl}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Globe className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='yourwebsite.com'
+                  value={formData.websiteUrl}
+                  onChange={(e) => updateField('websiteUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.websiteUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.websiteUrl}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Mail className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='contact@example.com'
+                  type='email'
+                  value={formData.contactEmail}
+                  onChange={(e) => updateField('contactEmail', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.contactEmail && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.contactEmail}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        {saveError && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{saveError}</p>}
+        <Button
+          onClick={handleSubmit}
+          disabled={saveStatus === 'saving' || !isFormValid}
+          variant='primary'
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+        >
+          {saveStatus === 'saving' ? 'Saving...' : saveStatus === 'saved' ? 'Saved' : 'Save'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
similarity index 97%
rename from apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts
rename to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
index a2e1d1093..df76c7c49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
@@ -11,6 +11,10 @@ interface UseProfilePictureUploadProps {
   currentImage?: string | null
 }
 
+/**
+ * Hook for handling profile picture upload functionality.
+ * Manages file validation, preview generation, and server upload.
+ */
 export function useProfilePictureUpload({
   onUpload,
   onError,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
index 3330879cf..892434bce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
@@ -1,31 +1,51 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
-import { Modal, ModalContent, ModalDescription, ModalTitle } from '@/components/emcn'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { createLogger } from '@/lib/logs/console/logger'
+import { useQueryClient } from '@tanstack/react-query'
+import { Files, LogIn, Settings, User, Users, Wrench } from 'lucide-react'
+import {
+  Card,
+  Connections,
+  FolderCode,
+  HexSimple,
+  Key,
+  SModal,
+  SModalContent,
+  SModalMain,
+  SModalMainBody,
+  SModalMainHeader,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarItem,
+  SModalSidebarSection,
+  SModalSidebarSectionTitle,
+} from '@/components/emcn'
+import { McpIcon } from '@/components/icons'
+import { useSession } from '@/lib/auth/auth-client'
+import { getSubscriptionStatus } from '@/lib/billing/client'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { isHosted } from '@/lib/core/config/environment'
+import { getUserRole } from '@/lib/workspaces/organization'
 import {
-  Account,
   ApiKeys,
   Copilot,
-  Credentials,
   CustomTools,
   EnvironmentVariables,
   FileUploads,
   General,
+  Integrations,
   MCP,
-  Privacy,
-  SettingsNavigation,
   SSO,
   Subscription,
   TeamManagement,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components'
-import { CreatorProfile } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile'
-import { useGeneralSettings } from '@/hooks/queries/general-settings'
-import { useOrganizations } from '@/hooks/queries/organization'
-
-const logger = createLogger('SettingsModal')
+import { TemplateProfile } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile'
+import { generalSettingsKeys, useGeneralSettings } from '@/hooks/queries/general-settings'
+import { organizationKeys, useOrganizations } from '@/hooks/queries/organization'
+import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
+import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
 
 const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
 
@@ -37,37 +57,186 @@ interface SettingsModalProps {
 type SettingsSection =
   | 'general'
   | 'environment'
-  | 'account'
-  | 'creator-profile'
-  | 'credentials'
+  | 'template-profile'
+  | 'integrations'
   | 'apikeys'
   | 'files'
   | 'subscription'
   | 'team'
   | 'sso'
-  | 'privacy'
   | 'copilot'
   | 'mcp'
   | 'custom-tools'
 
+type NavigationSection = 'account' | 'subscription' | 'tools' | 'system'
+
+type NavigationItem = {
+  id: SettingsSection
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  section: NavigationSection
+  hideWhenBillingDisabled?: boolean
+  requiresTeam?: boolean
+  requiresEnterprise?: boolean
+  requiresOwner?: boolean
+  requiresHosted?: boolean
+}
+
+const sectionConfig: { key: NavigationSection; title: string }[] = [
+  { key: 'account', title: 'Account' },
+  { key: 'tools', title: 'Tools' },
+  { key: 'subscription', title: 'Subscription' },
+  { key: 'system', title: 'System' },
+]
+
+const allNavigationItems: NavigationItem[] = [
+  { id: 'general', label: 'General', icon: Settings, section: 'account' },
+  { id: 'template-profile', label: 'Template Profile', icon: User, section: 'account' },
+  {
+    id: 'subscription',
+    label: 'Subscription',
+    icon: Card,
+    section: 'subscription',
+    hideWhenBillingDisabled: true,
+  },
+  {
+    id: 'team',
+    label: 'Team',
+    icon: Users,
+    section: 'subscription',
+    hideWhenBillingDisabled: true,
+    requiresTeam: true,
+  },
+  { id: 'integrations', label: 'Integrations', icon: Connections, section: 'tools' },
+  { id: 'custom-tools', label: 'Custom Tools', icon: Wrench, section: 'tools' },
+  { id: 'mcp', label: 'MCPs', icon: McpIcon, section: 'tools' },
+  { id: 'environment', label: 'Environment', icon: FolderCode, section: 'system' },
+  { id: 'apikeys', label: 'API Keys', icon: Key, section: 'system' },
+  {
+    id: 'copilot',
+    label: 'Copilot Keys',
+    icon: HexSimple,
+    section: 'system',
+    requiresHosted: true,
+  },
+  { id: 'files', label: 'Files', icon: Files, section: 'system' },
+  {
+    id: 'sso',
+    label: 'Single Sign-On',
+    icon: LogIn,
+    section: 'system',
+    requiresTeam: true,
+    requiresEnterprise: true,
+    requiresOwner: true,
+  },
+]
+
 export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   const [activeSection, setActiveSection] = useState<SettingsSection>('general')
+  const { data: session } = useSession()
+  const queryClient = useQueryClient()
   const { data: organizationsData } = useOrganizations()
+  const { data: subscriptionData } = useSubscriptionData()
+  const { data: ssoProvidersData, isLoading: isLoadingSSO } = useSSOProviders()
+
   const activeOrganization = organizationsData?.activeOrganization
-  const environmentCloseHandler = useRef<((open: boolean) => void) | null>(null)
-  const credentialsCloseHandler = useRef<((open: boolean) => void) | null>(null)
+  const environmentBeforeLeaveHandler = useRef<((onProceed: () => void) => void) | null>(null)
+  const integrationsCloseHandler = useRef<((open: boolean) => void) | null>(null)
+
+  const userEmail = session?.user?.email
+  const userId = session?.user?.id
+  const userRole = getUserRole(activeOrganization, userEmail)
+  const isOwner = userRole === 'owner'
+  const isAdmin = userRole === 'admin'
+  const canManageSSO = isOwner || isAdmin
+  const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
+  const hasEnterprisePlan = subscriptionStatus.isEnterprise
+  const hasOrganization = !!activeOrganization?.id
+
+  // Memoize SSO provider ownership check
+  const isSSOProviderOwner = useMemo(() => {
+    if (isHosted) return null
+    if (!userId || isLoadingSSO) return null
+    return ssoProvidersData?.providers?.some((p: any) => p.userId === userId) || false
+  }, [userId, ssoProvidersData?.providers, isLoadingSSO])
+
+  // Memoize navigation items to avoid filtering on every render
+  const navigationItems = useMemo(() => {
+    return allNavigationItems.filter((item) => {
+      if (item.hideWhenBillingDisabled && !isBillingEnabled) {
+        return false
+      }
+
+      if (item.requiresTeam) {
+        const isMember = userRole === 'member' || isAdmin
+        const hasTeamPlan = subscriptionStatus.isTeam || subscriptionStatus.isEnterprise
+
+        if (isMember) return true
+        if (isOwner && hasTeamPlan) return true
+
+        return false
+      }
+
+      if (item.requiresEnterprise && !hasEnterprisePlan) {
+        return false
+      }
+
+      if (item.requiresHosted && !isHosted) {
+        return false
+      }
+
+      if (item.id === 'sso') {
+        if (isHosted) {
+          return hasOrganization && hasEnterprisePlan && canManageSSO
+        }
+        return isSSOProviderOwner === true
+      }
+
+      if (item.requiresOwner && !isOwner) {
+        return false
+      }
+
+      return true
+    })
+  }, [
+    hasOrganization,
+    hasEnterprisePlan,
+    canManageSSO,
+    isSSOProviderOwner,
+    isOwner,
+    isAdmin,
+    userRole,
+    subscriptionStatus.isTeam,
+    subscriptionStatus.isEnterprise,
+  ])
 
   // Memoized callbacks to prevent infinite loops in child components
-  const registerEnvironmentCloseHandler = useCallback((handler: (open: boolean) => void) => {
-    environmentCloseHandler.current = handler
+  const registerEnvironmentBeforeLeaveHandler = useCallback(
+    (handler: (onProceed: () => void) => void) => {
+      environmentBeforeLeaveHandler.current = handler
+    },
+    []
+  )
+
+  const registerIntegrationsCloseHandler = useCallback((handler: (open: boolean) => void) => {
+    integrationsCloseHandler.current = handler
   }, [])
 
-  const registerCredentialsCloseHandler = useCallback((handler: (open: boolean) => void) => {
-    credentialsCloseHandler.current = handler
-  }, [])
+  const handleSectionChange = useCallback(
+    (sectionId: SettingsSection) => {
+      if (sectionId === activeSection) return
+
+      if (activeSection === 'environment' && environmentBeforeLeaveHandler.current) {
+        environmentBeforeLeaveHandler.current(() => setActiveSection(sectionId))
+        return
+      }
+
+      setActiveSection(sectionId)
+    },
+    [activeSection]
+  )
 
   // React Query hook automatically loads and syncs settings
-  // No need for manual loading logic - placeholderData provides instant UI
   useGeneralSettings()
 
   useEffect(() => {
@@ -96,125 +265,177 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     }
   }, [activeSection])
 
+  // Prefetch functions for React Query
+  const prefetchGeneral = () => {
+    queryClient.prefetchQuery({
+      queryKey: generalSettingsKeys.settings(),
+      queryFn: async () => {
+        const response = await fetch('/api/users/me/settings')
+        if (!response.ok) {
+          throw new Error('Failed to fetch general settings')
+        }
+        const { data } = await response.json()
+        return {
+          autoConnect: data.autoConnect ?? true,
+          showTrainingControls: data.showTrainingControls ?? false,
+          superUserModeEnabled: data.superUserModeEnabled ?? true,
+          theme: data.theme || 'system',
+          telemetryEnabled: data.telemetryEnabled ?? true,
+          billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
+        }
+      },
+      staleTime: 60 * 60 * 1000,
+    })
+  }
+
+  const prefetchSubscription = () => {
+    queryClient.prefetchQuery({
+      queryKey: subscriptionKeys.user(),
+      queryFn: async () => {
+        const response = await fetch('/api/billing?context=user')
+        if (!response.ok) {
+          throw new Error('Failed to fetch subscription data')
+        }
+        return response.json()
+      },
+      staleTime: 30 * 1000,
+    })
+  }
+
+  const prefetchOrganization = () => {
+    queryClient.prefetchQuery({
+      queryKey: organizationKeys.lists(),
+      queryFn: async () => {
+        const { client } = await import('@/lib/auth/auth-client')
+        const [orgsResponse, activeOrgResponse, billingResponse] = await Promise.all([
+          client.organization.list(),
+          client.organization.getFullOrganization(),
+          fetch('/api/billing?context=user').then((r) => r.json()),
+        ])
+
+        return {
+          organizations: orgsResponse.data || [],
+          activeOrganization: activeOrgResponse.data,
+          billingData: billingResponse,
+        }
+      },
+      staleTime: 30 * 1000,
+    })
+  }
+
+  const prefetchSSO = () => {
+    queryClient.prefetchQuery({
+      queryKey: ssoKeys.providers(),
+      queryFn: async () => {
+        const response = await fetch('/api/auth/sso/providers')
+        if (!response.ok) {
+          throw new Error('Failed to fetch SSO providers')
+        }
+        return response.json()
+      },
+      staleTime: 5 * 60 * 1000,
+    })
+  }
+
+  const handlePrefetch = (id: SettingsSection) => {
+    switch (id) {
+      case 'general':
+        prefetchGeneral()
+        break
+      case 'subscription':
+        prefetchSubscription()
+        break
+      case 'team':
+        prefetchOrganization()
+        break
+      case 'sso':
+        prefetchSSO()
+        break
+      default:
+        break
+    }
+  }
+
   // Handle dialog close - delegate to environment component if it's active
   const handleDialogOpenChange = (newOpen: boolean) => {
-    if (!newOpen && activeSection === 'environment' && environmentCloseHandler.current) {
-      environmentCloseHandler.current(newOpen)
-    } else if (!newOpen && activeSection === 'credentials' && credentialsCloseHandler.current) {
-      credentialsCloseHandler.current(newOpen)
+    if (!newOpen && activeSection === 'environment' && environmentBeforeLeaveHandler.current) {
+      environmentBeforeLeaveHandler.current(() => onOpenChange(false))
+    } else if (!newOpen && activeSection === 'integrations' && integrationsCloseHandler.current) {
+      integrationsCloseHandler.current(newOpen)
     } else {
       onOpenChange(newOpen)
     }
   }
 
   return (
-    <Modal open={open} onOpenChange={handleDialogOpenChange}>
-      <ModalContent className='flex h-[70vh] w-full max-w-[840px] flex-col gap-0 p-0'>
+    <SModal open={open} onOpenChange={handleDialogOpenChange}>
+      <SModalContent>
         <VisuallyHidden.Root>
-          <ModalTitle>Settings</ModalTitle>
+          <DialogPrimitive.Title>Settings</DialogPrimitive.Title>
         </VisuallyHidden.Root>
         <VisuallyHidden.Root>
-          <ModalDescription>
-            Configure your workspace settings, environment variables, credentials, and preferences
-          </ModalDescription>
+          <DialogPrimitive.Description>
+            Configure your workspace settings, environment variables, integrations, and preferences
+          </DialogPrimitive.Description>
         </VisuallyHidden.Root>
-        <div className='flex flex-col border-[var(--surface-11)] border-b px-[16px] py-[12px]'>
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Settings
-          </h2>
-        </div>
 
-        <div className='flex min-h-0 flex-1'>
-          {/* Navigation Sidebar */}
-          <div className='w-[180px] border-[var(--surface-11)] border-r'>
-            <SettingsNavigation
-              activeSection={activeSection}
-              onSectionChange={setActiveSection}
-              hasOrganization={!!activeOrganization?.id}
-            />
-          </div>
+        <SModalSidebar>
+          <SModalSidebarHeader>Settings</SModalSidebarHeader>
+          {sectionConfig.map(({ key, title }) => {
+            const sectionItems = navigationItems.filter((item) => item.section === key)
+            if (sectionItems.length === 0) return null
 
-          {/* Content Area */}
-          <div className='flex-1 overflow-y-auto'>
-            {activeSection === 'general' && (
-              <div className='h-full'>
-                <General />
-              </div>
-            )}
+            return (
+              <SModalSidebarSection key={key}>
+                <SModalSidebarSectionTitle>{title}</SModalSidebarSectionTitle>
+                {sectionItems.map((item) => (
+                  <SModalSidebarItem
+                    key={item.id}
+                    active={activeSection === item.id}
+                    icon={<item.icon />}
+                    onMouseEnter={() => handlePrefetch(item.id)}
+                    onClick={() => handleSectionChange(item.id)}
+                    data-section={item.id}
+                  >
+                    {item.label}
+                  </SModalSidebarItem>
+                ))}
+              </SModalSidebarSection>
+            )
+          })}
+        </SModalSidebar>
+
+        <SModalMain>
+          <SModalMainHeader>
+            {navigationItems.find((item) => item.id === activeSection)?.label || activeSection}
+          </SModalMainHeader>
+          <SModalMainBody>
+            {activeSection === 'general' && <General onOpenChange={onOpenChange} />}
             {activeSection === 'environment' && (
-              <div className='h-full'>
-                <EnvironmentVariables
-                  onOpenChange={onOpenChange}
-                  registerCloseHandler={registerEnvironmentCloseHandler}
-                />
-              </div>
+              <EnvironmentVariables
+                registerBeforeLeaveHandler={registerEnvironmentBeforeLeaveHandler}
+              />
             )}
-            {activeSection === 'account' && (
-              <div className='h-full'>
-                <Account onOpenChange={onOpenChange} />
-              </div>
-            )}
-            {activeSection === 'creator-profile' && (
-              <div className='h-full'>
-                <CreatorProfile />
-              </div>
-            )}
-            {activeSection === 'credentials' && (
-              <div className='h-full'>
-                <Credentials
-                  onOpenChange={onOpenChange}
-                  registerCloseHandler={registerCredentialsCloseHandler}
-                />
-              </div>
-            )}
-            {activeSection === 'apikeys' && (
-              <div className='h-full'>
-                <ApiKeys onOpenChange={onOpenChange} />
-              </div>
-            )}
-            {activeSection === 'files' && (
-              <div className='h-full'>
-                <FileUploads />
-              </div>
+            {activeSection === 'template-profile' && <TemplateProfile />}
+            {activeSection === 'integrations' && (
+              <Integrations
+                onOpenChange={onOpenChange}
+                registerCloseHandler={registerIntegrationsCloseHandler}
+              />
             )}
+            {activeSection === 'apikeys' && <ApiKeys onOpenChange={onOpenChange} />}
+            {activeSection === 'files' && <FileUploads />}
             {isBillingEnabled && activeSection === 'subscription' && (
-              <div className='h-full'>
-                <Subscription onOpenChange={onOpenChange} />
-              </div>
+              <Subscription onOpenChange={onOpenChange} />
             )}
-            {isBillingEnabled && activeSection === 'team' && (
-              <div className='h-full'>
-                <TeamManagement />
-              </div>
-            )}
-            {activeSection === 'sso' && (
-              <div className='h-full'>
-                <SSO />
-              </div>
-            )}
-            {activeSection === 'copilot' && (
-              <div className='h-full'>
-                <Copilot />
-              </div>
-            )}
-            {activeSection === 'privacy' && (
-              <div className='h-full'>
-                <Privacy />
-              </div>
-            )}
-            {activeSection === 'mcp' && (
-              <div className='h-full'>
-                <MCP />
-              </div>
-            )}
-            {activeSection === 'custom-tools' && (
-              <div className='h-full'>
-                <CustomTools />
-              </div>
-            )}
-          </div>
-        </div>
-      </ModalContent>
-    </Modal>
+            {isBillingEnabled && activeSection === 'team' && <TeamManagement />}
+            {activeSection === 'sso' && <SSO />}
+            {activeSection === 'copilot' && <Copilot />}
+            {activeSection === 'mcp' && <MCP />}
+            {activeSection === 'custom-tools' && <CustomTools />}
+          </SModalMainBody>
+        </SModalMain>
+      </SModalContent>
+    </SModal>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
index d9f22ba3d..ee61282ff 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
@@ -97,9 +97,7 @@ export function DeleteModal({
           <ModalTitle>{title}</ModalTitle>
           <ModalDescription>
             {description}{' '}
-            <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-              This action cannot be undone.
-            </span>
+            <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </ModalDescription>
         </ModalHeader>
         <ModalFooter>
@@ -112,7 +110,7 @@ export function DeleteModal({
             Cancel
           </Button>
           <Button
-            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             onClick={onConfirm}
             disabled={isDeleting}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
index 3eedbf405..755bab5c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
@@ -204,19 +204,19 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
       >
         <ChevronRight
           className={clsx(
-            'mr-[8px] h-[10px] w-[10px] flex-shrink-0 text-[var(--text-muted)] transition-all dark:text-[var(--text-muted)]',
+            'mr-[8px] h-[10px] w-[10px] flex-shrink-0 text-[var(--text-muted)] transition-all',
             isExpanded ? 'rotate-90' : ''
           )}
           aria-hidden='true'
         />
         {isExpanded ? (
           <FolderOpen
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)] dark:text-[var(--text-muted)]'
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
             aria-hidden='true'
           />
         ) : (
           <Folder
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)] dark:text-[var(--text-muted)]'
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
             aria-hidden='true'
           />
         )}
@@ -228,7 +228,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
             className={clsx(
-              'min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-tertiary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-tertiary)]'
+              'min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-tertiary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             )}
             maxLength={50}
             disabled={isRenaming}
@@ -243,7 +243,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
           />
         ) : (
           <span
-            className='truncate font-medium text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'
+            className='truncate font-medium text-[var(--text-tertiary)]'
             onDoubleClick={handleDoubleClick}
           >
             {folder.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
index 5e272d8e6..36d763cd2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
@@ -236,12 +236,8 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
         data-item-id={workflow.id}
         className={clsx(
           'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-          active
-            ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-            : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]',
-          isSelected && selectedWorkflows.size > 1 && !active
-            ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-            : '',
+          active ? 'bg-[var(--surface-9)]' : 'hover:bg-[var(--surface-9)]',
+          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--surface-9)]' : '',
           isDragging ? 'opacity-50' : ''
         )}
         draggable={!isEditing}
@@ -265,7 +261,7 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
               className={clsx(
                 'w-full border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 active
-                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  ? 'text-[var(--text-primary)]'
                   : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               )}
               maxLength={100}
@@ -284,8 +280,8 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
               className={clsx(
                 'truncate font-medium',
                 active
-                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                  ? 'text-[var(--text-primary)]'
+                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               )}
               onDoubleClick={handleDoubleClick}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
new file mode 100644
index 000000000..933e577c3
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+
+export interface EmailTagProps {
+  email: string
+  onRemove: () => void
+  disabled?: boolean
+  isInvalid?: boolean
+  isSent?: boolean
+}
+
+export const EmailTag = React.memo<EmailTagProps>(
+  ({ email, onRemove, disabled, isInvalid, isSent }) => (
+    <div
+      className={cn(
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
+        isInvalid
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+      )}
+    >
+      <span className='max-w-[200px] truncate'>{email}</span>
+      {isSent && <span className='text-[11px] text-[var(--text-tertiary)]'>sent</span>}
+      {!disabled && !isSent && (
+        <button
+          type='button'
+          onClick={onRemove}
+          className={cn(
+            'flex-shrink-0 transition-colors focus:outline-none',
+            isInvalid
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
+          )}
+          aria-label={`Remove ${email}`}
+        >
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+        </button>
+      )}
+    </div>
+  )
+)
+
+EmailTag.displayName = 'EmailTag'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts
new file mode 100644
index 000000000..da6e90947
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts
@@ -0,0 +1,5 @@
+export * from './email-tag'
+export * from './permission-selector'
+export * from './permissions-table'
+export * from './permissions-table-skeleton'
+export * from './types'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
new file mode 100644
index 000000000..67a0b96a6
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react'
+import { Button } from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
+
+export interface PermissionSelectorProps {
+  value: PermissionType
+  onChange: (value: PermissionType) => void
+  disabled?: boolean
+  className?: string
+}
+
+export const PermissionSelector = React.memo<PermissionSelectorProps>(
+  ({ value, onChange, disabled = false, className = '' }) => {
+    const permissionOptions = useMemo(
+      () => [
+        { value: 'read' as PermissionType, label: 'Read' },
+        { value: 'write' as PermissionType, label: 'Write' },
+        { value: 'admin' as PermissionType, label: 'Admin' },
+      ],
+      []
+    )
+
+    return (
+      <div className={cn('inline-flex gap-[2px]', className)}>
+        {permissionOptions.map((option, index) => {
+          const radiusClasses =
+            index === 0
+              ? 'rounded-r-none'
+              : index === permissionOptions.length - 1
+                ? 'rounded-l-none'
+                : 'rounded-none'
+
+          return (
+            <Button
+              key={option.value}
+              type='button'
+              variant={value === option.value ? 'active' : 'default'}
+              onClick={() => !disabled && onChange(option.value)}
+              disabled={disabled}
+              className={cn(
+                'px-[8px] py-[4px] text-[12px]',
+                radiusClasses,
+                disabled && 'cursor-not-allowed'
+              )}
+            >
+              {option.label}
+            </Button>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+PermissionSelector.displayName = 'PermissionSelector'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
new file mode 100644
index 000000000..ca9105d7a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export const PermissionsTableSkeleton = React.memo(() => (
+  <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
+    <div className='flex items-center justify-between gap-[8px] py-[8px]'>
+      <div className='min-w-0 flex-1'>
+        <div className='flex items-center gap-[8px]'>
+          <Skeleton className='h-[14px] w-40 rounded-[4px]' />
+        </div>
+      </div>
+      <div className='flex flex-shrink-0 items-center'>
+        <div className='inline-flex gap-[2px]'>
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+        </div>
+      </div>
+    </div>
+  </div>
+))
+
+PermissionsTableSkeleton.displayName = 'PermissionsTableSkeleton'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
new file mode 100644
index 000000000..fbd7bd00a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -0,0 +1,297 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Loader2, RotateCw, X } from 'lucide-react'
+import { Badge, Button, Tooltip } from '@/components/emcn'
+import { useSession } from '@/lib/auth/auth-client'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import type { WorkspacePermissions } from '@/hooks/use-workspace-permissions'
+import { PermissionSelector } from './permission-selector'
+import { PermissionsTableSkeleton } from './permissions-table-skeleton'
+import type { UserPermissions } from './types'
+
+export interface PermissionsTableProps {
+  userPermissions: UserPermissions[]
+  onPermissionChange: (userId: string, permissionType: PermissionType) => void
+  onRemoveMember?: (userId: string, email: string) => void
+  onRemoveInvitation?: (invitationId: string, email: string) => void
+  onResendInvitation?: (invitationId: string, email: string) => void
+  disabled?: boolean
+  existingUserPermissionChanges: Record<string, Partial<UserPermissions>>
+  isSaving?: boolean
+  workspacePermissions: WorkspacePermissions | null
+  permissionsLoading: boolean
+  pendingInvitations: UserPermissions[]
+  isPendingInvitationsLoading: boolean
+  resendingInvitationIds?: Record<string, boolean>
+  resentInvitationIds?: Record<string, boolean>
+  resendCooldowns?: Record<string, number>
+}
+
+export const PermissionsTable = ({
+  userPermissions,
+  onPermissionChange,
+  onRemoveMember,
+  onRemoveInvitation,
+  disabled,
+  existingUserPermissionChanges,
+  isSaving,
+  workspacePermissions,
+  permissionsLoading,
+  pendingInvitations,
+  isPendingInvitationsLoading,
+  onResendInvitation,
+  resendingInvitationIds,
+  resentInvitationIds,
+  resendCooldowns,
+}: PermissionsTableProps) => {
+  const { data: session } = useSession()
+  const userPerms = useUserPermissionsContext()
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+
+  useEffect(() => {
+    if (!permissionsLoading && !userPerms.isLoading && !isPendingInvitationsLoading) {
+      setHasLoadedOnce(true)
+    }
+  }, [permissionsLoading, userPerms.isLoading, isPendingInvitationsLoading])
+
+  const existingUsers: UserPermissions[] = useMemo(
+    () =>
+      workspacePermissions?.users?.map((user) => {
+        const changes = existingUserPermissionChanges[user.userId] || {}
+        const permissionType = user.permissionType || 'read'
+
+        return {
+          userId: user.userId,
+          email: user.email,
+          permissionType:
+            changes.permissionType !== undefined ? changes.permissionType : permissionType,
+          isCurrentUser: user.email === session?.user?.email,
+        }
+      }) || [],
+    [workspacePermissions?.users, existingUserPermissionChanges, session?.user?.email]
+  )
+
+  const currentUser: UserPermissions | null = useMemo(
+    () =>
+      session?.user?.email
+        ? existingUsers.find((user) => user.isCurrentUser) || {
+            email: session.user.email,
+            permissionType: 'admin',
+            isCurrentUser: true,
+          }
+        : null,
+    [session?.user?.email, existingUsers]
+  )
+
+  const filteredExistingUsers = useMemo(
+    () => existingUsers.filter((user) => !user.isCurrentUser),
+    [existingUsers]
+  )
+
+  const allUsers: UserPermissions[] = useMemo(() => {
+    const existingUserEmails = new Set([
+      ...(currentUser ? [currentUser.email] : []),
+      ...filteredExistingUsers.map((user) => user.email),
+    ])
+
+    const filteredPendingInvitations = pendingInvitations.filter(
+      (invitation) => !existingUserEmails.has(invitation.email)
+    )
+
+    return [
+      ...(currentUser ? [currentUser] : []),
+      ...filteredExistingUsers,
+      ...userPermissions,
+      ...filteredPendingInvitations,
+    ]
+  }, [currentUser, filteredExistingUsers, userPermissions, pendingInvitations])
+
+  const shouldShowSkeleton =
+    !hasLoadedOnce && (permissionsLoading || userPerms.isLoading || isPendingInvitationsLoading)
+
+  if (shouldShowSkeleton) {
+    return <PermissionsTableSkeleton />
+  }
+
+  if (userPermissions.length === 0 && !session?.user?.email && !workspacePermissions?.users?.length)
+    return null
+
+  if (isSaving) {
+    return (
+      <div className='space-y-[12px]'>
+        <h3 className='font-medium text-[14px] text-[var(--text-primary)]'>Member Permissions</h3>
+        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)]'>
+          <div className='flex items-center justify-center py-[48px]'>
+            <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+              <Loader2 className='h-[16px] w-[16px] animate-spin' />
+              <span className='font-medium text-[13px]'>Saving permission changes...</span>
+            </div>
+          </div>
+        </div>
+        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)]'>
+          Please wait while we update the permissions.
+        </p>
+      </div>
+    )
+  }
+
+  const currentUserIsAdmin = userPerms.canAdmin
+
+  return (
+    <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
+      {allUsers.length > 0 && (
+        <div>
+          {allUsers.map((user) => {
+            const isCurrentUser = user.isCurrentUser === true
+            const isExistingUser = filteredExistingUsers.some((eu) => eu.email === user.email)
+            const isPendingInvitation = user.isPendingInvitation === true
+            const userIdentifier = user.userId || user.email
+            const originalPermission = workspacePermissions?.users?.find(
+              (eu) => eu.userId === user.userId
+            )?.permissionType
+            const currentPermission =
+              existingUserPermissionChanges[userIdentifier]?.permissionType ?? user.permissionType
+            const hasChanges = originalPermission && currentPermission !== originalPermission
+            const isWorkspaceMember = workspacePermissions?.users?.some(
+              (eu) => eu.email === user.email && eu.userId
+            )
+            const canShowRemoveButton =
+              isWorkspaceMember &&
+              !isCurrentUser &&
+              !isPendingInvitation &&
+              currentUserIsAdmin &&
+              user.userId
+
+            const uniqueKey = user.userId
+              ? `existing-${user.userId}`
+              : isPendingInvitation
+                ? `pending-${user.email}`
+                : `new-${user.email}`
+
+            return (
+              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
+                <div className='min-w-0 flex-1'>
+                  <div className='flex items-center gap-[8px]'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                      {user.email}
+                    </span>
+                    {isPendingInvitation && (
+                      <Badge variant='default' className='gap-[4px] text-[12px]'>
+                        {resendingInvitationIds &&
+                        user.invitationId &&
+                        resendingInvitationIds[user.invitationId] ? (
+                          <>
+                            <Loader2 className='h-[12px] w-[12px] animate-spin' />
+                            <span>Sending...</span>
+                          </>
+                        ) : resentInvitationIds &&
+                          user.invitationId &&
+                          resentInvitationIds[user.invitationId] ? (
+                          <span>Resent</span>
+                        ) : (
+                          <span>Sent</span>
+                        )}
+                      </Badge>
+                    )}
+                    {hasChanges && (
+                      <Badge variant='default' className='text-[12px]'>
+                        Modified
+                      </Badge>
+                    )}
+
+                    {isPendingInvitation &&
+                      currentUserIsAdmin &&
+                      user.invitationId &&
+                      onResendInvitation && (
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <span className='inline-flex'>
+                              <Button
+                                variant='ghost'
+                                onClick={() => onResendInvitation(user.invitationId!, user.email)}
+                                disabled={
+                                  disabled ||
+                                  isSaving ||
+                                  resendingInvitationIds?.[user.invitationId!] ||
+                                  (resendCooldowns && resendCooldowns[user.invitationId!] > 0)
+                                }
+                                className='h-[16px] w-[16px] p-0'
+                              >
+                                {resendingInvitationIds?.[user.invitationId!] ? (
+                                  <Loader2 className='h-[12px] w-[12px] animate-spin' />
+                                ) : (
+                                  <RotateCw className='h-[12px] w-[12px]' />
+                                )}
+                                <span className='sr-only'>Resend invite</span>
+                              </Button>
+                            </span>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>
+                            <p>
+                              {resendCooldowns?.[user.invitationId!]
+                                ? `Resend in ${resendCooldowns[user.invitationId!]}s`
+                                : 'Resend invite'}
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip.Root>
+                      )}
+                    {((canShowRemoveButton && onRemoveMember) ||
+                      (isPendingInvitation &&
+                        currentUserIsAdmin &&
+                        user.invitationId &&
+                        onRemoveInvitation)) && (
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <Button
+                            variant='ghost'
+                            onClick={() => {
+                              if (canShowRemoveButton && onRemoveMember) {
+                                onRemoveMember(user.userId!, user.email)
+                              } else if (
+                                isPendingInvitation &&
+                                user.invitationId &&
+                                onRemoveInvitation
+                              ) {
+                                onRemoveInvitation(user.invitationId, user.email)
+                              }
+                            }}
+                            disabled={disabled || isSaving}
+                            className='h-[16px] w-[16px] p-0'
+                          >
+                            <X className='h-[14px] w-[14px]' />
+                            <span className='sr-only'>
+                              {isPendingInvitation ? 'Revoke invite' : 'Remove member'}
+                            </span>
+                          </Button>
+                        </Tooltip.Trigger>
+                        <Tooltip.Content>
+                          <p>{isPendingInvitation ? 'Revoke invite' : 'Remove member'}</p>
+                        </Tooltip.Content>
+                      </Tooltip.Root>
+                    )}
+                  </div>
+                </div>
+
+                <div className='flex flex-shrink-0 items-center'>
+                  <PermissionSelector
+                    value={user.permissionType}
+                    onChange={(newPermission) => onPermissionChange(userIdentifier, newPermission)}
+                    disabled={
+                      disabled ||
+                      !currentUserIsAdmin ||
+                      isPendingInvitation ||
+                      (isCurrentUser && user.permissionType === 'admin')
+                    }
+                    className='w-auto'
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+PermissionsTable.displayName = 'PermissionsTable'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
new file mode 100644
index 000000000..7acb4db15
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
@@ -0,0 +1,12 @@
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
+
+export type { PermissionType }
+
+export interface UserPermissions {
+  userId?: string
+  email: string
+  permissionType: PermissionType
+  isCurrentUser?: boolean
+  isPendingInvitation?: boolean
+  invitationId?: string
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index 31e3abb33..9a0dd8385 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -1,66 +1,33 @@
 'use client'
 
-import React, { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Loader2, RotateCw, X } from 'lucide-react'
+import React, { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Badge, Button, Input, Modal, ModalContent, Tooltip } from '@/components/emcn'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Button, Input, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
 import { useSession } from '@/lib/auth/auth-client'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import type { PermissionType } from '@/lib/workspaces/permissions/utils'
-import {
-  useUserPermissionsContext,
-  useWorkspacePermissionsContext,
-} from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import type { WorkspacePermissions } from '@/hooks/use-workspace-permissions'
+import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { API_ENDPOINTS } from '@/stores/constants'
+import type { PermissionType, UserPermissions } from './components'
+import { EmailTag, PermissionsTable } from './components'
 
 const logger = createLogger('InviteModal')
 
 interface InviteModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  onInviteMember?: (email: string) => void
   workspaceName?: string
 }
 
-interface EmailTagProps {
-  email: string
-  onRemove: () => void
-  disabled?: boolean
-  isInvalid?: boolean
-  isSent?: boolean
-}
-
-interface UserPermissions {
-  userId?: string
-  email: string
-  permissionType: PermissionType
-  isCurrentUser?: boolean
-  isPendingInvitation?: boolean
-  invitationId?: string
-}
-
-interface PermissionsTableProps {
-  userPermissions: UserPermissions[]
-  onPermissionChange: (userId: string, permissionType: PermissionType) => void
-  onRemoveMember?: (userId: string, email: string) => void
-  onRemoveInvitation?: (invitationId: string, email: string) => void
-  onResendInvitation?: (invitationId: string, email: string) => void
-  disabled?: boolean
-  existingUserPermissionChanges: Record<string, Partial<UserPermissions>>
-  isSaving?: boolean
-  workspacePermissions: WorkspacePermissions | null
-  permissionsLoading: boolean
-  pendingInvitations: UserPermissions[]
-  isPendingInvitationsLoading: boolean
-  resendingInvitationIds?: Record<string, boolean>
-  resentInvitationIds?: Record<string, boolean>
-  resendCooldowns?: Record<string, number>
-}
-
 interface PendingInvitation {
   id: string
   workspaceId: string
@@ -70,375 +37,6 @@ interface PendingInvitation {
   createdAt: string
 }
 
-const EmailTag = React.memo<EmailTagProps>(({ email, onRemove, disabled, isInvalid, isSent }) => (
-  <div
-    className={cn(
-      'flex w-auto items-center gap-[4px] rounded-[4px] border px-[8px] py-[4px] text-[12px]',
-      isInvalid
-        ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-400'
-        : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'
-    )}
-  >
-    <span className='max-w-[200px] truncate'>{email}</span>
-    {isSent && (
-      <span className='text-[11px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-        sent
-      </span>
-    )}
-    {!disabled && !isSent && (
-      <button
-        type='button'
-        onClick={onRemove}
-        className={cn(
-          'flex-shrink-0 transition-colors focus:outline-none',
-          isInvalid
-            ? 'text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300'
-            : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
-        )}
-        aria-label={`Remove ${email}`}
-      >
-        <X className='h-3 w-3' />
-      </button>
-    )}
-  </div>
-))
-
-EmailTag.displayName = 'EmailTag'
-
-interface PermissionSelectorProps {
-  value: PermissionType
-  onChange: (value: PermissionType) => void
-  disabled?: boolean
-  className?: string
-}
-
-const PermissionSelector = React.memo<PermissionSelectorProps>(
-  ({ value, onChange, disabled = false, className = '' }) => {
-    const permissionOptions = useMemo(
-      () => [
-        { value: 'read' as PermissionType, label: 'Read' },
-        { value: 'write' as PermissionType, label: 'Write' },
-        { value: 'admin' as PermissionType, label: 'Admin' },
-      ],
-      []
-    )
-
-    return (
-      <div
-        className={cn(
-          'inline-flex rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)]',
-          className
-        )}
-      >
-        {permissionOptions.map((option, index) => (
-          <button
-            key={option.value}
-            type='button'
-            onClick={() => !disabled && onChange(option.value)}
-            disabled={disabled}
-            className={cn(
-              'px-[8px] py-[4px] font-medium text-[12px] transition-colors focus:outline-none',
-              'first:rounded-l-[4px] last:rounded-r-[4px]',
-              disabled && 'cursor-not-allowed opacity-50',
-              value === option.value
-                ? 'bg-[var(--surface-9)] text-[var(--text-primary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)]'
-                : 'text-[var(--text-secondary)] hover:bg-[var(--surface-8)] hover:text-[var(--text-primary)] dark:text-[var(--text-secondary)] dark:hover:bg-[var(--surface-8)] dark:hover:text-[var(--text-primary)]',
-              index > 0 && 'border-[var(--surface-11)] border-l'
-            )}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
-    )
-  }
-)
-
-PermissionSelector.displayName = 'PermissionSelector'
-
-const PermissionsTableSkeleton = React.memo(() => (
-  <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-    {Array.from({ length: 5 }).map((_, idx) => (
-      <div key={idx} className='flex items-center justify-between gap-[8px] py-[8px]'>
-        <Skeleton className='h-[14px] w-40 rounded-[4px]' />
-        <div className='flex items-center gap-[8px]'>
-          <Skeleton className='h-[28px] w-32 flex-shrink-0 rounded-[4px]' />
-          <div className='flex w-10 items-center gap-[4px] sm:w-12'>
-            <Skeleton className='h-4 w-4 rounded-[4px]' />
-            <Skeleton className='h-4 w-4 rounded-[4px]' />
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-))
-
-PermissionsTableSkeleton.displayName = 'PermissionsTableSkeleton'
-
-const PermissionsTable = ({
-  userPermissions,
-  onPermissionChange,
-  onRemoveMember,
-  onRemoveInvitation,
-  disabled,
-  existingUserPermissionChanges,
-  isSaving,
-  workspacePermissions,
-  permissionsLoading,
-  pendingInvitations,
-  isPendingInvitationsLoading,
-  onResendInvitation,
-  resendingInvitationIds,
-  resentInvitationIds,
-  resendCooldowns,
-}: PermissionsTableProps) => {
-  const { data: session } = useSession()
-  const userPerms = useUserPermissionsContext()
-
-  const existingUsers: UserPermissions[] = useMemo(
-    () =>
-      workspacePermissions?.users?.map((user) => {
-        const changes = existingUserPermissionChanges[user.userId] || {}
-        const permissionType = user.permissionType || 'read'
-
-        return {
-          userId: user.userId,
-          email: user.email,
-          permissionType:
-            changes.permissionType !== undefined ? changes.permissionType : permissionType,
-          isCurrentUser: user.email === session?.user?.email,
-        }
-      }) || [],
-    [workspacePermissions?.users, existingUserPermissionChanges, session?.user?.email]
-  )
-
-  const currentUser: UserPermissions | null = useMemo(
-    () =>
-      session?.user?.email
-        ? existingUsers.find((user) => user.isCurrentUser) || {
-            email: session.user.email,
-            permissionType: 'admin',
-            isCurrentUser: true,
-          }
-        : null,
-    [session?.user?.email, existingUsers]
-  )
-
-  const filteredExistingUsers = useMemo(
-    () => existingUsers.filter((user) => !user.isCurrentUser),
-    [existingUsers]
-  )
-
-  const allUsers: UserPermissions[] = useMemo(() => {
-    // Get emails of existing users to filter out duplicate invitations
-    const existingUserEmails = new Set([
-      ...(currentUser ? [currentUser.email] : []),
-      ...filteredExistingUsers.map((user) => user.email),
-    ])
-
-    // Filter out pending invitations for users who are already members
-    const filteredPendingInvitations = pendingInvitations.filter(
-      (invitation) => !existingUserEmails.has(invitation.email)
-    )
-
-    return [
-      ...(currentUser ? [currentUser] : []),
-      ...filteredExistingUsers,
-      ...userPermissions,
-      ...filteredPendingInvitations,
-    ]
-  }, [currentUser, filteredExistingUsers, userPermissions, pendingInvitations])
-
-  if (permissionsLoading || userPerms.isLoading || isPendingInvitationsLoading) {
-    return <PermissionsTableSkeleton />
-  }
-
-  if (userPermissions.length === 0 && !session?.user?.email && !workspacePermissions?.users?.length)
-    return null
-
-  if (isSaving) {
-    return (
-      <div className='space-y-[12px]'>
-        <h3 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-          Member Permissions
-        </h3>
-        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)] dark:bg-[var(--surface-3)]'>
-          <div className='flex items-center justify-center py-[48px]'>
-            <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-              <Loader2 className='h-5 w-5 animate-spin' />
-              <span className='font-medium text-[13px]'>Saving permission changes...</span>
-            </div>
-          </div>
-        </div>
-        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-          Please wait while we update the permissions.
-        </p>
-      </div>
-    )
-  }
-
-  const currentUserIsAdmin = userPerms.canAdmin
-
-  return (
-    <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-      {allUsers.length > 0 && (
-        <div>
-          {allUsers.map((user) => {
-            const isCurrentUser = user.isCurrentUser === true
-            const isExistingUser = filteredExistingUsers.some((eu) => eu.email === user.email)
-            const isPendingInvitation = user.isPendingInvitation === true
-            const userIdentifier = user.userId || user.email
-            // Check if current permission is different from original permission
-            const originalPermission = workspacePermissions?.users?.find(
-              (eu) => eu.userId === user.userId
-            )?.permissionType
-            const currentPermission =
-              existingUserPermissionChanges[userIdentifier]?.permissionType ?? user.permissionType
-            const hasChanges = originalPermission && currentPermission !== originalPermission
-            // Check if user is in workspace permissions directly
-            const isWorkspaceMember = workspacePermissions?.users?.some(
-              (eu) => eu.email === user.email && eu.userId
-            )
-            const canShowRemoveButton =
-              isWorkspaceMember &&
-              !isCurrentUser &&
-              !isPendingInvitation &&
-              currentUserIsAdmin &&
-              user.userId
-
-            const uniqueKey = user.userId
-              ? `existing-${user.userId}`
-              : isPendingInvitation
-                ? `pending-${user.email}`
-                : `new-${user.email}`
-
-            return (
-              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
-                {/* Email and status badges */}
-                <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                      {user.email}
-                    </span>
-                    {isPendingInvitation && (
-                      <Badge variant='default' className='gap-[4px]'>
-                        {resendingInvitationIds &&
-                        user.invitationId &&
-                        resendingInvitationIds[user.invitationId] ? (
-                          <>
-                            <Loader2 className='h-3.5 w-3.5 animate-spin' />
-                            <span>Sending...</span>
-                          </>
-                        ) : resentInvitationIds &&
-                          user.invitationId &&
-                          resentInvitationIds[user.invitationId] ? (
-                          <span>Resent</span>
-                        ) : (
-                          <span>Sent</span>
-                        )}
-                      </Badge>
-                    )}
-                    {hasChanges && <Badge variant='default'>Modified</Badge>}
-                  </div>
-                </div>
-
-                {/* Permission selector and fixed-width action area to keep rows aligned */}
-                <div className='flex flex-shrink-0 items-center gap-[8px]'>
-                  <PermissionSelector
-                    value={user.permissionType}
-                    onChange={(newPermission) => onPermissionChange(userIdentifier, newPermission)}
-                    disabled={
-                      disabled ||
-                      !currentUserIsAdmin ||
-                      isPendingInvitation ||
-                      (isCurrentUser && user.permissionType === 'admin')
-                    }
-                    className='w-auto'
-                  />
-
-                  {/* Fixed-width action area so selector stays inline across rows */}
-                  <div className='flex h-4 w-10 items-center justify-center gap-[4px] sm:w-12'>
-                    {isPendingInvitation &&
-                      currentUserIsAdmin &&
-                      user.invitationId &&
-                      onResendInvitation && (
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <span className='inline-flex'>
-                              <Button
-                                variant='ghost'
-                                onClick={() => onResendInvitation(user.invitationId!, user.email)}
-                                disabled={
-                                  disabled ||
-                                  isSaving ||
-                                  resendingInvitationIds?.[user.invitationId!] ||
-                                  (resendCooldowns && resendCooldowns[user.invitationId!] > 0)
-                                }
-                                className='h-4 w-4 p-0'
-                              >
-                                {resendingInvitationIds?.[user.invitationId!] ? (
-                                  <Loader2 className='h-3.5 w-3.5 animate-spin' />
-                                ) : (
-                                  <RotateCw className='h-3.5 w-3.5' />
-                                )}
-                                <span className='sr-only'>Resend invite</span>
-                              </Button>
-                            </span>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content>
-                            <p>
-                              {resendCooldowns?.[user.invitationId!]
-                                ? `Resend in ${resendCooldowns[user.invitationId!]}s`
-                                : 'Resend invite'}
-                            </p>
-                          </Tooltip.Content>
-                        </Tooltip.Root>
-                      )}
-                    {((canShowRemoveButton && onRemoveMember) ||
-                      (isPendingInvitation &&
-                        currentUserIsAdmin &&
-                        user.invitationId &&
-                        onRemoveInvitation)) && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            variant='ghost'
-                            onClick={() => {
-                              if (canShowRemoveButton && onRemoveMember) {
-                                onRemoveMember(user.userId!, user.email)
-                              } else if (
-                                isPendingInvitation &&
-                                user.invitationId &&
-                                onRemoveInvitation
-                              ) {
-                                onRemoveInvitation(user.invitationId, user.email)
-                              }
-                            }}
-                            disabled={disabled || isSaving}
-                            className='h-4 w-4 p-0'
-                          >
-                            <X className='h-3.5 w-3.5' />
-                            <span className='sr-only'>
-                              {isPendingInvitation ? 'Revoke invite' : 'Remove member'}
-                            </span>
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>
-                          <p>{isPendingInvitation ? 'Revoke invite' : 'Remove member'}</p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
 export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalProps) {
   const formRef = useRef<HTMLFormElement>(null)
   const [inputValue, setInputValue] = useState('')
@@ -976,8 +574,35 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         )
 
         const successCount = results.filter(Boolean).length
+        const successfulEmails = emails.filter((_, index) => results[index])
 
         if (successCount > 0) {
+          if (successfulEmails.length > 0) {
+            const newPendingInvitations: UserPermissions[] = successfulEmails.map((email) => {
+              const userPermission = userPermissions.find((up) => up.email === email)
+              const permissionType = userPermission?.permissionType || 'read'
+
+              return {
+                email,
+                permissionType,
+                isPendingInvitation: true,
+              }
+            })
+
+            setPendingInvitations((prev) => {
+              const existingEmails = new Set(prev.map((inv) => inv.email))
+              const merged = [...prev]
+
+              newPendingInvitations.forEach((inv) => {
+                if (!existingEmails.has(inv.email)) {
+                  merged.push(inv)
+                }
+              })
+
+              return merged
+            })
+          }
+
           fetchPendingInvitations()
           setInputValue('')
 
@@ -987,10 +612,6 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
           } else {
             setEmails([])
             setUserPermissions([])
-
-            setTimeout(() => {
-              onOpenChange(false)
-            }, 1500)
           }
 
           setInvalidEmails([])
@@ -1051,212 +672,193 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         onOpenChange(newOpen)
       }}
     >
-      <ModalContent className='flex max-h-[80vh] w-full max-w-[560px] flex-col gap-[12px]'>
-        <div className='flex flex-col gap-[8px]'>
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Invite members to {workspaceName || 'Workspace'}
-          </h2>
-        </div>
+      <ModalContent className='w-[500px]'>
+        <ModalHeader>Invite members to {workspaceName || 'Workspace'}</ModalHeader>
 
-        <form ref={formRef} onSubmit={handleSubmit} className='mt-[8px]'>
-          <div className='space-y-[8px]'>
-            <label
-              htmlFor='emails'
-              className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-            >
-              Email Addresses
-            </label>
-            <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
-              {invalidEmails.map((email, index) => (
-                <EmailTag
-                  key={`invalid-${index}`}
-                  email={email}
-                  onRemove={() => removeInvalidEmail(index)}
-                  disabled={isSubmitting || !userPerms.canAdmin}
-                  isInvalid={true}
-                />
-              ))}
-              {emails.map((email, index) => (
-                <EmailTag
-                  key={`valid-${index}`}
-                  email={email}
-                  onRemove={() => removeEmail(index)}
-                  disabled={isSubmitting || !userPerms.canAdmin}
-                />
-              ))}
-              <Input
-                id='emails'
-                type='text'
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onPaste={handlePaste}
-                onBlur={() => inputValue.trim() && addEmail(inputValue)}
-                placeholder={
-                  !userPerms.canAdmin
-                    ? 'Only administrators can invite new members'
-                    : emails.length > 0 || invalidEmails.length > 0
-                      ? 'Add another email'
-                      : 'Enter emails'
-                }
-                className={cn(
-                  'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
-                  emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
-                )}
-                autoFocus={userPerms.canAdmin}
-                disabled={isSubmitting || !userPerms.canAdmin}
+        <form ref={formRef} onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
+          <ModalBody>
+            <div className='space-y-[12px]'>
+              <div>
+                <Label
+                  htmlFor='emails'
+                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                >
+                  Email Addresses
+                </Label>
+                <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
+                  {invalidEmails.map((email, index) => (
+                    <EmailTag
+                      key={`invalid-${index}`}
+                      email={email}
+                      onRemove={() => removeInvalidEmail(index)}
+                      disabled={isSubmitting || !userPerms.canAdmin}
+                      isInvalid={true}
+                    />
+                  ))}
+                  {emails.map((email, index) => (
+                    <EmailTag
+                      key={`valid-${index}`}
+                      email={email}
+                      onRemove={() => removeEmail(index)}
+                      disabled={isSubmitting || !userPerms.canAdmin}
+                    />
+                  ))}
+                  <Input
+                    id='emails'
+                    type='text'
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    onBlur={() => inputValue.trim() && addEmail(inputValue)}
+                    placeholder={
+                      !userPerms.canAdmin
+                        ? 'Only administrators can invite new members'
+                        : emails.length > 0 || invalidEmails.length > 0
+                          ? 'Add another email'
+                          : 'Enter emails'
+                    }
+                    className={cn(
+                      'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+                      emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+                    )}
+                    autoFocus={userPerms.canAdmin}
+                    disabled={isSubmitting || !userPerms.canAdmin}
+                  />
+                </div>
+              </div>
+              {errorMessage && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{errorMessage}</p>
+              )}
+            </div>
+            <div className='mt-[8px]'>
+              <PermissionsTable
+                userPermissions={userPermissions}
+                onPermissionChange={handlePermissionChange}
+                onRemoveMember={handleRemoveMemberClick}
+                onRemoveInvitation={handleRemoveInvitationClick}
+                onResendInvitation={handleResendInvitation}
+                disabled={isSubmitting || isSaving || isRemovingMember || isRemovingInvitation}
+                existingUserPermissionChanges={existingUserPermissionChanges}
+                isSaving={isSaving}
+                workspacePermissions={workspacePermissions}
+                permissionsLoading={permissionsLoading}
+                pendingInvitations={pendingInvitations}
+                isPendingInvitationsLoading={isPendingInvitationsLoading}
+                resendingInvitationIds={resendingInvitationIds}
+                resentInvitationIds={resentInvitationIds}
+                resendCooldowns={resendCooldowns}
               />
             </div>
-            {errorMessage && (
-              <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                {errorMessage}
-              </p>
+          </ModalBody>
+
+          <ModalFooter className='justify-between'>
+            {hasPendingChanges && userPerms.canAdmin && (
+              <div className='flex gap-[8px]'>
+                <Button
+                  type='button'
+                  variant='default'
+                  disabled={isSaving || isSubmitting}
+                  onClick={handleRestoreChanges}
+                  className='h-[32px] gap-[8px] px-[12px] font-medium'
+                >
+                  Restore Changes
+                </Button>
+                <Button
+                  type='button'
+                  variant='default'
+                  disabled={isSaving || isSubmitting}
+                  onClick={handleSaveChanges}
+                  className='h-[32px] gap-[8px] px-[12px] font-medium'
+                >
+                  {isSaving && <Loader2 className='h-4 w-4 animate-spin' />}
+                  Save Changes
+                </Button>
+              </div>
             )}
-          </div>
 
-          {/* Line separator */}
-          <div className='mt-[16px] mb-[12px] border-[var(--surface-11)] border-t' />
-
-          <PermissionsTable
-            userPermissions={userPermissions}
-            onPermissionChange={handlePermissionChange}
-            onRemoveMember={handleRemoveMemberClick}
-            onRemoveInvitation={handleRemoveInvitationClick}
-            onResendInvitation={handleResendInvitation}
-            disabled={isSubmitting || isSaving || isRemovingMember || isRemovingInvitation}
-            existingUserPermissionChanges={existingUserPermissionChanges}
-            isSaving={isSaving}
-            workspacePermissions={workspacePermissions}
-            permissionsLoading={permissionsLoading}
-            pendingInvitations={pendingInvitations}
-            isPendingInvitationsLoading={isPendingInvitationsLoading}
-            resendingInvitationIds={resendingInvitationIds}
-            resentInvitationIds={resentInvitationIds}
-            resendCooldowns={resendCooldowns}
-          />
+            <Button
+              type='button'
+              variant='primary'
+              onClick={() => formRef.current?.requestSubmit()}
+              disabled={
+                !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites
+              }
+              className='ml-auto'
+            >
+              {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
+              {!userPerms.canAdmin ? 'Admin Access Required' : 'Invite'}
+            </Button>
+          </ModalFooter>
         </form>
-
-        {/* Consistent spacing below user list to match spacing above */}
-        <div className='mb-[12px]' />
-
-        <div className='flex justify-between gap-[8px]'>
-          {hasPendingChanges && userPerms.canAdmin && (
-            <>
-              <Button
-                type='button'
-                variant='default'
-                disabled={isSaving || isSubmitting}
-                onClick={handleRestoreChanges}
-                className='h-[32px] gap-[8px] px-[12px] font-medium'
-              >
-                Restore Changes
-              </Button>
-              <Button
-                type='button'
-                variant='default'
-                disabled={isSaving || isSubmitting}
-                onClick={handleSaveChanges}
-                className='h-[32px] gap-[8px] px-[12px] font-medium'
-              >
-                {isSaving && <Loader2 className='h-4 w-4 animate-spin' />}
-                Save Changes
-              </Button>
-            </>
-          )}
-
-          <button
-            type='button'
-            onClick={() => formRef.current?.requestSubmit()}
-            disabled={
-              !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites
-            }
-            className={cn(
-              'ml-auto flex h-[32px] items-center justify-center gap-[8px] rounded-[8px] px-[12px] font-medium text-[13px] transition-all duration-200',
-              'bg-[var(--brand-primary-hex)] text-white shadow-[0_0_0_0_var(--brand-primary-hex)] hover:bg-[var(--brand-primary-hover-hex)] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
-              'disabled:opacity-50 disabled:hover:bg-[var(--brand-primary-hex)] disabled:hover:shadow-none'
-            )}
-          >
-            {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
-            {!userPerms.canAdmin ? 'Admin Access Required' : 'Send Invite'}
-          </button>
-        </div>
       </ModalContent>
 
       {/* Remove Member Confirmation Dialog */}
       <Modal open={!!memberToRemove} onOpenChange={handleRemoveMemberCancel}>
         <ModalContent>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Remove Member
-            </h2>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+          <ModalHeader>Remove Member</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to remove{' '}
-              <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+              <span className='font-medium text-[var(--text-primary)]'>
                 {memberToRemove?.email}
               </span>{' '}
               from this workspace?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
-          </div>
-          <div className='flex justify-between gap-[8px]'>
+          </ModalBody>
+          <ModalFooter>
             <Button
               variant='default'
-              className='h-[32px] w-full px-[12px]'
               onClick={handleRemoveMemberCancel}
               disabled={isRemovingMember}
             >
               Cancel
             </Button>
-            <button
+            <Button
+              variant='primary'
               onClick={handleRemoveMemberConfirm}
               disabled={isRemovingMember}
-              className='h-[32px] w-full gap-[8px] rounded-[8px] bg-[var(--text-error)] px-[12px] font-medium text-[13px] text-white transition-all duration-200 hover:bg-[var(--text-error)] disabled:opacity-50 dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isRemovingMember && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Remove Member
-            </button>
-          </div>
+            </Button>
+          </ModalFooter>
         </ModalContent>
       </Modal>
 
       {/* Remove Invitation Confirmation Dialog */}
       <Modal open={!!invitationToRemove} onOpenChange={handleRemoveInvitationCancel}>
-        <ModalContent>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Cancel Invitation
-            </h2>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Cancel Invitation</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to cancel the invitation for{' '}
-              <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+              <span className='font-medium text-[var(--text-primary)]'>
                 {invitationToRemove?.email}
               </span>
-              ?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
-          </div>
-          <div className='flex justify-between gap-[8px]'>
+          </ModalBody>
+          <ModalFooter>
             <Button
               variant='default'
-              className='h-[32px] w-full px-[12px]'
               onClick={handleRemoveInvitationCancel}
               disabled={isRemovingInvitation}
             >
               Cancel
             </Button>
-            <button
+            <Button
+              variant='primary'
               onClick={handleRemoveInvitationConfirm}
               disabled={isRemovingInvitation}
-              className='h-[32px] w-full gap-[8px] rounded-[8px] bg-[var(--text-error)] px-[12px] font-medium text-[13px] text-white transition-all duration-200 hover:bg-[var(--text-error)] disabled:opacity-50 dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isRemovingInvitation && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Cancel Invitation
-            </button>
-          </div>
+            </Button>
+          </ModalFooter>
         </ModalContent>
       </Modal>
     </Modal>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
index 7cfc1a88a..e7fc1c1b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
@@ -359,7 +359,7 @@ export function WorkspaceHeader({
                   {workspaces.map((workspace, index) => (
                     <div key={workspace.id} className={index > 0 ? 'mt-[2px]' : ''}>
                       {editingWorkspaceId === workspace.id ? (
-                        <div className='flex h-[25px] items-center gap-[8px] rounded-[6px] bg-[var(--surface-9)] px-[6px] dark:bg-[var(--surface-9)]'>
+                        <div className='flex h-[25px] items-center gap-[8px] rounded-[6px] bg-[var(--surface-9)] px-[6px]'>
                           <input
                             ref={listRenameInputRef}
                             value={editingName}
@@ -389,7 +389,7 @@ export function WorkspaceHeader({
                                 setIsListRenaming(false)
                               }
                             }}
-                            className='w-full border-0 bg-transparent p-0 font-base text-[12px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-primary)]'
+                            className='w-full border-0 bg-transparent p-0 font-base text-[12px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                             maxLength={100}
                             autoComplete='off'
                             autoCorrect='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
index c59aa829f..fe16e2298 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
@@ -491,7 +491,7 @@ export function SidebarNew() {
             aria-label='Workspace sidebar'
             onClick={handleSidebarClick}
           >
-            <div className='flex h-full flex-col border-r pt-[14px] dark:border-[var(--border)]'>
+            <div className='flex h-full flex-col border-[var(--border)] border-r pt-[14px]'>
               {/* Header */}
               <div className='flex-shrink-0 px-[14px]'>
                 <WorkspaceHeader
@@ -518,18 +518,16 @@ export function SidebarNew() {
 
               {/* Search */}
               <div
-                className='mx-[8px] mt-[12px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[8px] bg-[var(--surface-5)] px-[8px] py-[7px]'
+                className='mx-[8px] mt-[12px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[8px] border border-[var(--border-strong)] bg-transparent px-[8px] py-[7px] dark:border-0 dark:bg-[var(--surface-5)]'
                 onClick={() => setIsSearchModalOpen(true)}
               >
                 <div className='flex items-center gap-[6px]'>
-                  <Search className='h-[14px] w-[14px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]' />
-                  <p className='translate-y-[0.25px] font-medium text-[var(--text-secondary)] text-small dark:text-[var(--text-secondary)]'>
+                  <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
+                  <p className='translate-y-[0.25px] font-medium text-[var(--text-secondary)] text-small'>
                     Search
                   </p>
                 </div>
-                <p className='font-medium text-[var(--text-subtle)] text-small dark:text-[var(--text-subtle)]'>
-                  ⌘K
-                </p>
+                <p className='font-medium text-[var(--text-subtle)] text-small'>⌘K</p>
               </div>
 
               {/* Workflows */}
@@ -537,7 +535,7 @@ export function SidebarNew() {
                 {/* Header - Always visible */}
                 <div className='flex flex-shrink-0 flex-col space-y-[4px] px-[14px]'>
                   <div className='flex items-center justify-between'>
-                    <div className='font-medium text-[var(--text-tertiary)] text-small dark:text-[var(--text-tertiary)]'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-small'>
                       Workflows
                     </div>
                     <div className='flex items-center justify-center gap-[10px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
index 32b605f44..ba2fdf0df 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import ReactFlow, {
   ConnectionLineType,
   type Edge,
@@ -8,6 +8,7 @@ import ReactFlow, {
   type Node,
   type NodeTypes,
   ReactFlowProvider,
+  useReactFlow,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 
@@ -64,6 +65,31 @@ const edgeTypes: EdgeTypes = {
   workflowEdge: WorkflowEdge, // Keep for backward compatibility
 }
 
+interface FitViewOnChangeProps {
+  nodes: Node[]
+  fitPadding: number
+}
+
+/**
+ * Helper component that calls fitView when nodes change.
+ * Must be rendered inside ReactFlowProvider.
+ */
+function FitViewOnChange({ nodes, fitPadding }: FitViewOnChangeProps) {
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (nodes.length > 0) {
+      // Small delay to ensure nodes are rendered before fitting
+      const timeoutId = setTimeout(() => {
+        fitView({ padding: fitPadding, duration: 200 })
+      }, 50)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [nodes, fitPadding, fitView])
+
+  return null
+}
+
 export function WorkflowPreview({
   workflowState,
   showSubBlocks = true,
@@ -329,7 +355,7 @@ export function WorkflowPreview({
 
   return (
     <ReactFlowProvider>
-      <div style={{ height, width, backgroundColor: '#1B1B1B' }} className={cn('preview-mode')}>
+      <div style={{ height, width, backgroundColor: 'var(--bg)' }} className={cn('preview-mode')}>
         <ReactFlow
           nodes={nodes}
           edges={edges}
@@ -362,6 +388,7 @@ export function WorkflowPreview({
               : undefined
           }
         />
+        <FitViewOnChange nodes={nodes} fitPadding={fitPadding} />
       </div>
     </ReactFlowProvider>
   )
diff --git a/apps/sim/blocks/blocks/mcp.ts b/apps/sim/blocks/blocks/mcp.ts
index c46c8f92a..5b0b65ed8 100644
--- a/apps/sim/blocks/blocks/mcp.ts
+++ b/apps/sim/blocks/blocks/mcp.ts
@@ -1,4 +1,4 @@
-import { ServerIcon } from '@/components/icons'
+import { McpIcon } from '@/components/icons'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import type { BlockConfig } from '@/blocks/types'
 import type { ToolResponse } from '@/tools/types'
@@ -16,7 +16,7 @@ export const McpBlock: BlockConfig<McpResponse> = {
   docsLink: 'https://docs.sim.ai/mcp',
   category: 'tools',
   bgColor: '#181C1E',
-  icon: ServerIcon,
+  icon: McpIcon,
   subBlocks: [
     {
       id: 'server',
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 553d165e1..829cd9186 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -11,9 +11,9 @@ const buttonVariants = cva(
           'bg-[var(--surface-5)] dark:bg-[var(--surface-5)] hover:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-9)]',
         active:
           'bg-[var(--surface-9)] dark:bg-[var(--surface-9)] hover:bg-[var(--surface-11)] dark:hover:bg-[var(--surface-11)] dark:text-[var(--text-primary)] text-[var(--text-primary)]',
-        '3d': 'text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)] border-t border-l border-r border-[#303030] dark:border-[#303030] shadow-[0_2px_0_0_rgba(48,48,48,1)] hover:shadow-[0_4px_0_0_rgba(48,48,48,1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
+        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-strong)] shadow-[0_2px_0_0_var(--border-strong)] hover:shadow-[0_4px_0_0_var(--border-strong)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]',
         outline:
-          'border border-[#727272] bg-[var(--border-strong)] hover:bg-[var(--surface-11)] dark:border-[#727272] dark:bg-[var(--border-strong)] dark:hover:bg-[var(--surface-11)]',
+          'border border-[var(--text-muted)] bg-[var(--border-strong)] hover:bg-[var(--surface-11)]',
         primary:
           'bg-[var(--brand-400)] dark:bg-[var(--brand-400)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:brightness-110 hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
         secondary:
diff --git a/apps/sim/components/emcn/components/code/code.css b/apps/sim/components/emcn/components/code/code.css
index b8167c77e..ea87108fd 100644
--- a/apps/sim/components/emcn/components/code/code.css
+++ b/apps/sim/components/emcn/components/code/code.css
@@ -1,75 +1,148 @@
 /**
- * Code editor syntax token theme (VSCode Dark+ inspired).
- * Only token colors are in CSS; all other styling uses Tailwind.
+ * Code editor syntax token theme.
+ * Light mode: Vibrant colors matching dark mode's aesthetic quality.
+ * Dark mode: VSCode Dark+ inspired colors with deep, vibrant palette.
  * Applied to elements with .code-editor-theme class.
  */
 
-/* Token colors with deep, vibrant palette */
+/**
+ * Light mode token colors (default) - vibrant palette
+ */
 .code-editor-theme .token.comment,
 .code-editor-theme .token.block-comment,
 .code-editor-theme .token.prolog,
 .code-editor-theme .token.doctype,
 .code-editor-theme .token.cdata {
-  color: #8bc985 !important;
+  color: #2e7d32 !important;
 }
 
 .code-editor-theme .token.punctuation {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.property,
 .code-editor-theme .token.attr-name,
 .code-editor-theme .token.variable {
-  color: #5fc9cb !important;
+  color: #0891b2 !important;
 }
 
 .code-editor-theme .token.tag,
 .code-editor-theme .token.boolean,
 .code-editor-theme .token.number,
 .code-editor-theme .token.constant {
-  color: #ffc857 !important;
+  color: #b45309 !important;
 }
 
 .code-editor-theme .token.string,
 .code-editor-theme .token.char,
 .code-editor-theme .token.builtin,
 .code-editor-theme .token.inserted {
-  color: #ff6b6b !important;
+  color: #dc2626 !important;
 }
 
 .code-editor-theme .token.operator,
 .code-editor-theme .token.entity,
 .code-editor-theme .token.url {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.atrule,
 .code-editor-theme .token.attr-value,
 .code-editor-theme .token.keyword {
-  color: #d896d8 !important;
+  color: #9333ea !important;
 }
 
 .code-editor-theme .token.function,
 .code-editor-theme .token.class-name {
-  color: #ffc857 !important;
+  color: #ca8a04 !important;
 }
 
 .code-editor-theme .token.regex,
 .code-editor-theme .token.important {
-  color: #ff6b6b !important;
+  color: #e11d48 !important;
 }
 
 .code-editor-theme .token.symbol {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.deleted {
+  color: #dc2626 !important;
+}
+
+/* Blue accents for <var> and {{ENV}} placeholders - light mode */
+.code-editor-theme .text-blue-500 {
+  color: #1d4ed8 !important;
+}
+
+/**
+ * Dark mode token colors
+ */
+.dark .code-editor-theme .token.comment,
+.dark .code-editor-theme .token.block-comment,
+.dark .code-editor-theme .token.prolog,
+.dark .code-editor-theme .token.doctype,
+.dark .code-editor-theme .token.cdata {
+  color: #8bc985 !important;
+}
+
+.dark .code-editor-theme .token.punctuation {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.property,
+.dark .code-editor-theme .token.attr-name,
+.dark .code-editor-theme .token.variable {
+  color: #5fc9cb !important;
+}
+
+.dark .code-editor-theme .token.tag,
+.dark .code-editor-theme .token.boolean,
+.dark .code-editor-theme .token.number,
+.dark .code-editor-theme .token.constant {
+  color: #ffc857 !important;
+}
+
+.dark .code-editor-theme .token.string,
+.dark .code-editor-theme .token.char,
+.dark .code-editor-theme .token.builtin,
+.dark .code-editor-theme .token.inserted {
   color: #ff6b6b !important;
 }
 
-/* Blue accents for <var> and {{ENV}} placeholders */
-.code-editor-theme .text-blue-500 {
-  color: #68c5ff !important;
+.dark .code-editor-theme .token.operator,
+.dark .code-editor-theme .token.entity,
+.dark .code-editor-theme .token.url {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.atrule,
+.dark .code-editor-theme .token.attr-value,
+.dark .code-editor-theme .token.keyword {
+  color: #d896d8 !important;
+}
+
+.dark .code-editor-theme .token.function,
+.dark .code-editor-theme .token.class-name {
+  color: #ffc857 !important;
+}
+
+.dark .code-editor-theme .token.regex,
+.dark .code-editor-theme .token.important {
+  color: #ff6b6b !important;
+}
+
+.dark .code-editor-theme .token.symbol {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.deleted {
+  color: #ff6b6b !important;
+}
+
+/* Blue accents for <var> and {{ENV}} placeholders - dark mode */
+.dark .code-editor-theme .text-blue-500 {
+  color: #35b6ff !important;
 }
 
 /* Ensure transparent backgrounds */
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index addaf40b4..bba8e683d 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -78,8 +78,8 @@ function Container({
       className={cn(
         // Base container styling
         'group relative min-h-[100px] rounded-[4px] border border-[var(--border-strong)]',
-        'bg-[#1F1F1F] font-medium font-mono text-sm transition-colors',
-        'dark:border-[var(--border-strong)]',
+        'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
+        'dark:bg-[#1F1F1F]',
         // Overflow handling for long content
         'overflow-x-auto overflow-y-auto',
         // Streaming state
@@ -143,7 +143,8 @@ export function getCodeEditorProps(options?: {
     padding: 8,
     className: cn(
       // Base editor classes
-      'bg-transparent font-[inherit] text-[inherit] font-medium text-[#eeeeee]',
+      'bg-transparent font-[inherit] text-[inherit] font-medium',
+      'text-[var(--text-primary)] dark:text-[#eeeeee]',
       'leading-[21px] outline-none focus:outline-none',
       'min-h-[106px]',
       // Streaming/disabled states
@@ -153,10 +154,11 @@ export function getCodeEditorProps(options?: {
       // Reset browser defaults
       'border-none bg-transparent outline-none resize-none',
       'focus:outline-none focus:ring-0',
-      // Selection styling
-      'selection:bg-[#264f78] selection:text-white',
-      // Caret color
-      'caret-white',
+      // Selection styling - light and dark modes
+      'selection:bg-[#add6ff] selection:text-[#1b1b1b]',
+      'dark:selection:bg-[#264f78] dark:selection:text-white',
+      // Caret color - adapts to mode
+      'caret-[var(--text-primary)] dark:caret-white',
       // Font smoothing
       '[-webkit-font-smoothing:antialiased] [-moz-osx-font-smoothing:grayscale]',
       // Disable interaction for streaming/preview
@@ -189,7 +191,7 @@ function Gutter({ children, width, className, style }: CodeGutterProps) {
       className={cn(
         'absolute top-0 bottom-0 left-0',
         'flex select-none flex-col items-end overflow-hidden',
-        'rounded-l-[4px] bg-[#1F1F1F]',
+        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[#1F1F1F]',
         'pr-0.5',
         className
       )}
@@ -327,13 +329,13 @@ function Viewer({
               return (
                 <Fragment key={idx}>
                   <div
-                    className='select-none pr-0.5 text-right text-[#a8a8a8] text-xs tabular-nums leading-[21px]'
+                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
                     style={{ transform: 'translateY(0.25px)', ...gutterStyle }}
                   >
                     {idx + 1}
                   </div>
                   <pre
-                    className='m-0 min-w-0 whitespace-pre-wrap break-words pr-2 pl-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]'
+                    className='m-0 min-w-0 whitespace-pre-wrap break-words pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
                     // Using per-line highlighting keeps the gutter height in sync with wrapped content
                     dangerouslySetInnerHTML={{ __html: perLineHighlighted || '&nbsp;' }}
                   />
@@ -354,7 +356,7 @@ function Viewer({
           <pre
             className={cn(
               whitespaceClass,
-              'p-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]'
+              'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
             )}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           />
@@ -371,7 +373,10 @@ function Viewer({
   const lineNumbers = []
   for (let i = 1; i <= lineCount; i++) {
     lineNumbers.push(
-      <div key={i} className='text-right text-[#a8a8a8] text-xs tabular-nums leading-[21px]'>
+      <div
+        key={i}
+        className='text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+      >
         {i}
       </div>
     )
@@ -384,7 +389,10 @@ function Viewer({
       </Gutter>
       <Content className='code-editor-theme' paddingLeft={`${gutterWidth + paddingLeft}px`}>
         <pre
-          className={cn(whitespaceClass, 'p-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]')}
+          className={cn(
+            whitespaceClass,
+            'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+          )}
           dangerouslySetInnerHTML={{ __html: highlightedCode }}
         />
       </Content>
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index e44d0c5dd..d9829ab9f 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -13,21 +13,26 @@ import {
   useState,
 } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { Check, ChevronDown, Loader2 } from 'lucide-react'
+import { ChevronDown, Loader2 } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 import { Input } from '../input/input'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
 
 const comboboxVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] py-[6px] font-sans font-medium text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
+  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
   {
     variants: {
       variant: {
         default: '',
       },
+      size: {
+        default: 'py-[6px] text-sm',
+        sm: 'py-[5px] text-[12px]',
+      },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
   }
 )
@@ -81,6 +86,12 @@ export interface ComboboxProps
   error?: string | null
   /** Callback when popover open state changes */
   onOpenChange?: (open: boolean) => void
+  /** Size variant */
+  size?: 'default' | 'sm'
+  /** Dropdown alignment */
+  align?: 'start' | 'center' | 'end'
+  /** Dropdown width - 'trigger' matches trigger width, or provide a pixel value */
+  dropdownWidth?: 'trigger' | number
 }
 
 /**
@@ -93,6 +104,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
     {
       className,
       variant,
+      size,
       options,
       value,
       multiSelectValues,
@@ -110,6 +122,8 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       isLoading = false,
       error = null,
       onOpenChange,
+      align = 'start',
+      dropdownWidth = 'trigger',
       ...props
     },
     ref
@@ -396,7 +410,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                   aria-disabled={disabled}
                   tabIndex={disabled ? -1 : 0}
                   className={cn(
-                    comboboxVariants({ variant }),
+                    comboboxVariants({ variant, size }),
                     'relative cursor-pointer items-center justify-between',
                     className
                   )}
@@ -430,9 +444,13 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
 
           <PopoverContent
             side='bottom'
-            align='start'
+            align={align}
             sideOffset={4}
-            className='w-[var(--radix-popover-trigger-width)] rounded-[4px] p-0'
+            className={cn(
+              'rounded-[6px] border border-[var(--surface-11)] p-0',
+              dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
+            )}
+            style={typeof dropdownWidth === 'number' ? { width: `${dropdownWidth}px` } : undefined}
             onOpenAutoFocus={(e) => {
               e.preventDefault()
             }}
@@ -483,39 +501,41 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                     {editable && value ? 'No matching options found' : 'No options available'}
                   </div>
                 ) : (
-                  filteredOptions.map((option, index) => {
-                    const isSelected = multiSelect
-                      ? multiSelectValues?.includes(option.value)
-                      : effectiveSelectedValue === option.value
-                    const isHighlighted = index === highlightedIndex
-                    const OptionIcon = option.icon
+                  <div className='space-y-[2px]'>
+                    {filteredOptions.map((option, index) => {
+                      const isSelected = multiSelect
+                        ? multiSelectValues?.includes(option.value)
+                        : effectiveSelectedValue === option.value
+                      const isHighlighted = index === highlightedIndex
+                      const OptionIcon = option.icon
 
-                    return (
-                      <div
-                        key={option.value}
-                        role='option'
-                        aria-selected={isSelected}
-                        data-option-index={index}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                          handleSelect(option.value)
-                        }}
-                        onMouseEnter={() => setHighlightedIndex(index)}
-                        className={cn(
-                          'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] py-[6px] font-medium font-sans text-sm',
-                          isHighlighted && 'bg-[var(--surface-11)]',
-                          !isHighlighted && 'hover:bg-[var(--surface-11)]'
-                        )}
-                      >
-                        {OptionIcon && <OptionIcon className='mr-[8px] h-3 w-3 opacity-60' />}
-                        <span className='flex-1 truncate text-[var(--text-primary)]'>
-                          {option.label}
-                        </span>
-                        {isSelected && <Check className='ml-[8px] h-4 w-4 flex-shrink-0' />}
-                      </div>
-                    )
-                  })
+                      return (
+                        <div
+                          key={option.value}
+                          role='option'
+                          aria-selected={isSelected}
+                          data-option-index={index}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            handleSelect(option.value)
+                          }}
+                          onMouseEnter={() => setHighlightedIndex(index)}
+                          className={cn(
+                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] font-medium font-sans',
+                            size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
+                            'hover:bg-[var(--surface-11)]',
+                            (isHighlighted || isSelected) && 'bg-[var(--surface-11)]'
+                          )}
+                        >
+                          {OptionIcon && <OptionIcon className='mr-[8px] h-3 w-3 opacity-60' />}
+                          <span className='flex-1 truncate text-[var(--text-primary)]'>
+                            {option.label}
+                          </span>
+                        </div>
+                      )
+                    })}
+                  </div>
                 )}
               </div>
             </PopoverScrollArea>
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index b4164136c..360217a8e 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -42,5 +42,21 @@ export {
   PopoverTrigger,
   usePopoverContext,
 } from './popover/popover'
+export {
+  SModal,
+  SModalClose,
+  SModalContent,
+  SModalMain,
+  SModalMainBody,
+  SModalMainHeader,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarItem,
+  type SModalSidebarItemProps,
+  SModalSidebarSection,
+  SModalSidebarSectionTitle,
+  SModalTrigger,
+} from './s-modal/s-modal'
+export { Switch } from './switch/switch'
 export { Textarea } from './textarea/textarea'
 export { Tooltip } from './tooltip/tooltip'
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index eeb5dbbfb..fa871d56d 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -18,7 +18,7 @@ function Label({ className, ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       className={cn(
-        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 dark:text-[var(--text-primary)]',
+        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index debada659..ba4a1b7ae 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -1,34 +1,36 @@
 /**
- * Minimal modal component following emcn design system styling.
- * Uses Radix UI Dialog primitives for accessibility.
+ * Compositional modal component with optional tabs.
+ * Uses Radix UI Dialog and Tabs primitives for accessibility.
+ * For sidebar modals, use `sidebar-modal.tsx` instead.
  *
  * @example
  * ```tsx
- * import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter } from '@/components/emcn'
+ * // Base modal
+ * <Modal>
+ *   <ModalTrigger>Open</ModalTrigger>
+ *   <ModalContent>
+ *     <ModalHeader>Title</ModalHeader>
+ *     <ModalBody>Content here</ModalBody>
+ *     <ModalFooter>
+ *       <Button>Save</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
  *
- * function MyComponent() {
- *   const [open, setOpen] = useState(false)
- *
- *   return (
- *     <Modal open={open} onOpenChange={setOpen}>
- *       <ModalTrigger asChild>
- *         <button>Open Modal</button>
- *       </ModalTrigger>
- *       <ModalContent>
- *         <ModalHeader>
- *           <ModalTitle>Delete workflow?</ModalTitle>
- *           <ModalDescription>
- *             This action cannot be undone.
- *           </ModalDescription>
- *         </ModalHeader>
- *         <ModalFooter>
- *           <button onClick={() => setOpen(false)}>Cancel</button>
- *           <button onClick={handleDelete}>Delete</button>
- *         </ModalFooter>
- *       </ModalContent>
- *     </Modal>
- *   )
- * }
+ * // Modal with tabs
+ * <Modal>
+ *   <ModalContent>
+ *     <ModalHeader>Title</ModalHeader>
+ *     <ModalTabs defaultValue="tab1">
+ *       <ModalTabsList>
+ *         <ModalTabsTrigger value="tab1">Tab 1</ModalTabsTrigger>
+ *         <ModalTabsTrigger value="tab2">Tab 2</ModalTabsTrigger>
+ *       </ModalTabsList>
+ *       <ModalTabsContent value="tab1">Content 1</ModalTabsContent>
+ *       <ModalTabsContent value="tab2">Content 2</ModalTabsContent>
+ *     </ModalTabs>
+ *   </ModalContent>
+ * </Modal>
  * ```
  */
 
@@ -36,65 +38,24 @@
 
 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 { cn } from '@/lib/core/utils/cn'
+import { Button } from '../button/button'
 
 /**
- * Modal z-index configuration
- * Set higher than Dialog component (10000000) to ensure Settings modal appears on top when opened from Deploy modal
- */
-const MODAL_Z_INDEX = 10000100
-
-/**
- * Modal sizing constants
- */
-const MODAL_SIZING = {
-  MAX_WIDTH: 'max-w-[400px]',
-  BORDER_RADIUS: 'rounded-[8px]',
-  CLOSE_BUTTON_RADIUS: 'rounded-[4px]',
-} as const
-
-/**
- * Modal spacing constants
- */
-const MODAL_SPACING = {
-  CONTENT_PADDING: 'p-[12px]',
-  CONTENT_GAP: 'gap-[12px]',
-  HEADER_GAP: 'gap-[8px]',
-  FOOTER_GAP: 'gap-[8px]',
-  CLOSE_BUTTON_POSITION: 'top-[12px] right-[12px]',
-} as const
-
-/**
- * Modal color constants
- */
-const MODAL_COLORS = {
-  OVERLAY_BG: 'bg-black/80',
-  CONTENT_BG: 'bg-[var(--surface-3)] dark:bg-[var(--surface-3)]',
-  TITLE_TEXT: 'text-[var(--text-primary)] dark:text-[var(--text-primary)]',
-  DESCRIPTION_TEXT: 'text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]',
-  CLOSE_BUTTON_TEXT: 'text-[var(--text-secondary)] dark:text-[var(--text-secondary)]',
-} as const
-
-/**
- * Modal typography constants
- */
-const MODAL_TYPOGRAPHY = {
-  TITLE_SIZE: 'text-[14px]',
-  DESCRIPTION_SIZE: 'text-[12px]',
-} as const
-
-/**
- * Shared animation classes for modal transitions
+ * Shared animation classes for modal transitions.
+ * 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'
 
 /**
- * Modal content animation classes
+ * 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]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]'
+  '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%]'
 
 /**
  * Root modal component. Manages open state.
@@ -106,11 +67,42 @@ const Modal = DialogPrimitive.Root
  */
 const ModalTrigger = DialogPrimitive.Trigger
 
+/**
+ * Portal component for rendering modal outside DOM hierarchy.
+ */
+const ModalPortal = DialogPrimitive.Portal
+
 /**
  * Close element that closes the modal when clicked.
  */
 const ModalClose = DialogPrimitive.Close
 
+/**
+ * Modal overlay component with fade transition.
+ * Clicking this overlay closes the dialog via DialogPrimitive.Close.
+ */
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => {
+  return (
+    <DialogPrimitive.Close asChild>
+      <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+          'fixed inset-0 z-[500] bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
+          ANIMATION_CLASSES,
+          className
+        )}
+        style={style}
+        {...props}
+      />
+    </DialogPrimitive.Close>
+  )
+})
+
+ModalOverlay.displayName = 'ModalOverlay'
+
 export interface ModalContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   /**
@@ -122,56 +114,51 @@ export interface ModalContentProps
 
 /**
  * Modal content component with overlay and styled container.
+ * Main container that can hold sidebar, header, tabs, and footer.
  */
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, showClose = true, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogPrimitive.Overlay
-      className={cn('fixed inset-0', ANIMATION_CLASSES, MODAL_COLORS.OVERLAY_BG)}
-      style={{ zIndex: MODAL_Z_INDEX }}
-    />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        // Animation classes
-        ANIMATION_CLASSES,
-        CONTENT_ANIMATION_CLASSES,
-        // Layout
-        'fixed top-[50%] left-[50%] flex w-full translate-x-[-50%] translate-y-[-50%] flex-col',
-        // Sizing
-        MODAL_SIZING.MAX_WIDTH,
-        MODAL_SIZING.BORDER_RADIUS,
-        // Spacing
-        MODAL_SPACING.CONTENT_PADDING,
-        MODAL_SPACING.CONTENT_GAP,
-        // Colors
-        MODAL_COLORS.CONTENT_BG,
-        // Transitions
-        'shadow-lg duration-200',
-        className
-      )}
-      style={{ zIndex: MODAL_Z_INDEX }}
-      {...props}
-    >
-      {children}
-      {showClose && (
-        <DialogPrimitive.Close
-          className={cn(
-            'absolute opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
-            MODAL_SPACING.CLOSE_BUTTON_POSITION,
-            MODAL_SIZING.CLOSE_BUTTON_RADIUS,
-            MODAL_COLORS.CLOSE_BUTTON_TEXT
-          )}
-        >
-          <X className='h-4 w-4' />
-          <span className='sr-only'>Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPrimitive.Portal>
-))
+>(({ className, children, showClose = true, style, ...props }, ref) => {
+  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsInteractionReady(true), 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          ANIMATION_CLASSES,
+          CONTENT_ANIMATION_CLASSES,
+          'fixed top-[50%] left-[50%] z-[500] flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          className
+        )}
+        style={style}
+        onEscapeKeyDown={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          e.stopPropagation()
+        }}
+        onPointerDown={(e) => {
+          e.stopPropagation()
+        }}
+        onPointerUp={(e) => {
+          e.stopPropagation()
+        }}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
 
 ModalContent.displayName = 'ModalContent'
 
@@ -179,12 +166,22 @@ ModalContent.displayName = 'ModalContent'
  * Modal header component for title and description.
  */
 const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+  ({ className, children, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex flex-col', MODAL_SPACING.HEADER_GAP, className)}
+      className={cn('flex items-center justify-between px-[16px] py-[10px]', className)}
       {...props}
-    />
+    >
+      <DialogPrimitive.Title className='font-medium text-[16px] text-[var(--text-primary)]'>
+        {children}
+      </DialogPrimitive.Title>
+      <DialogPrimitive.Close asChild>
+        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+          <X className='h-[16px] w-[16px]' />
+          <span className='sr-only'>Close</span>
+        </Button>
+      </DialogPrimitive.Close>
+    </div>
   )
 )
 
@@ -197,11 +194,7 @@ const ModalTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('font-medium', MODAL_TYPOGRAPHY.TITLE_SIZE, MODAL_COLORS.TITLE_TEXT, className)}
-    {...props}
-  />
+  <DialogPrimitive.Title ref={ref} className={cn('', className)} {...props} />
 ))
 
 ModalTitle.displayName = 'ModalTitle'
@@ -213,19 +206,130 @@ const ModalDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
+  <DialogPrimitive.Description ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalDescription.displayName = 'ModalDescription'
+
+/**
+ * Modal tabs root component. Wraps tab list and content panels.
+ */
+const ModalTabs = TabsPrimitive.Root
+
+interface ModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /** Currently active tab value for indicator positioning */
+  activeValue?: string
+}
+
+/**
+ * Modal tabs list component with animated sliding indicator.
+ */
+const ModalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  ModalTabsListProps
+>(({ className, children, activeValue, ...props }, ref) => {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const updateIndicator = () => {
+      const activeTab = list.querySelector('[data-state="active"]') as HTMLElement | null
+      if (!activeTab) return
+
+      setIndicator({
+        left: activeTab.offsetLeft,
+        width: activeTab.offsetWidth,
+      })
+      setReady(true)
+    }
+
+    updateIndicator()
+
+    const observer = new MutationObserver(updateIndicator)
+    observer.observe(list, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
+    window.addEventListener('resize', updateIndicator)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', updateIndicator)
+    }
+  }, [activeValue])
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn('relative flex gap-[16px] px-4', className)}
+      {...props}
+    >
+      <div ref={listRef} className='flex gap-[16px]'>
+        {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'
+        )}
+        style={{ left: indicator.left, width: indicator.width }}
+      />
+    </TabsPrimitive.List>
+  )
+})
+
+ModalTabsList.displayName = 'ModalTabsList'
+
+/**
+ * Modal tab trigger component. Individual tab button.
+ */
+const ModalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'font-base',
-      MODAL_TYPOGRAPHY.DESCRIPTION_SIZE,
-      MODAL_COLORS.DESCRIPTION_TEXT,
+      '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)]',
       className
     )}
     {...props}
   />
 ))
 
-ModalDescription.displayName = 'ModalDescription'
+ModalTabsTrigger.displayName = 'ModalTabsTrigger'
+
+/**
+ * Modal tab content component. Content panel for each tab.
+ */
+const ModalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalTabsContent.displayName = 'ModalTabsContent'
+
+/**
+ * Modal body/content area with background and padding.
+ */
+const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[var(--surface-2)] px-[14px] py-[10px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+ModalBody.displayName = 'ModalBody'
 
 /**
  * Modal footer component for action buttons.
@@ -234,7 +338,10 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex justify-between', MODAL_SPACING.FOOTER_GAP, className)}
+      className={cn(
+        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[var(--surface-2)] px-[16px] py-[10px]',
+        className
+      )}
       {...props}
     />
   )
@@ -245,10 +352,17 @@ ModalFooter.displayName = 'ModalFooter'
 export {
   Modal,
   ModalTrigger,
-  ModalClose,
   ModalContent,
   ModalHeader,
   ModalTitle,
   ModalDescription,
+  ModalBody,
+  ModalTabs,
+  ModalTabsList,
+  ModalTabsTrigger,
+  ModalTabsContent,
   ModalFooter,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
 }
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 21e034b70..041b9d9f2 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -241,6 +241,11 @@ export interface PopoverContentProps
    * @default 8
    */
   collisionPadding?: number
+  /**
+   * When true, adds a border to the popover content
+   * @default false
+   */
+  border?: boolean
 }
 
 /**
@@ -272,6 +277,7 @@ const PopoverContent = React.forwardRef<
       align = 'start',
       sideOffset,
       collisionPadding = 8,
+      border = false,
       ...restProps
     },
     ref
@@ -330,6 +336,7 @@ const PopoverContent = React.forwardRef<
           // If width is constrained by the caller (prop or style), ensure inner flexible text truncates by default,
           // and also truncate section headers.
           hasUserWidthConstraint && '[&_.flex-1]:truncate [&_[data-popover-section]]:truncate',
+          border && 'border border-[var(--surface-11)]',
           className
         )}
         style={{
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
new file mode 100644
index 000000000..4339179de
--- /dev/null
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -0,0 +1,263 @@
+/**
+ * Sidebar modal variant with navigation sidebar and main content area.
+ *
+ * @example
+ * ```tsx
+ * <SModal>
+ *   <SModalContent>
+ *     <SModalSidebar>
+ *       <SModalSidebarHeader>Settings</SModalSidebarHeader>
+ *       <SModalSidebarSection>
+ *         <SModalSidebarSectionTitle>Account</SModalSidebarSectionTitle>
+ *         <SModalSidebarItem icon={<User />} active>Profile</SModalSidebarItem>
+ *         <SModalSidebarItem icon={<Key />}>Security</SModalSidebarItem>
+ *       </SModalSidebarSection>
+ *     </SModalSidebar>
+ *     <SModalMain>
+ *       <SModalMainHeader>Profile</SModalMainHeader>
+ *       <SModalMainBody>Content here</SModalMainBody>
+ *     </SModalMain>
+ *   </SModalContent>
+ * </SModal>
+ * ```
+ */
+
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/core/utils/cn'
+import { Button } from '../button/button'
+import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
+
+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'
+
+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%]'
+
+/**
+ * Root sidebar modal component.
+ */
+const SModal = Modal
+
+/**
+ * Trigger element that opens the modal.
+ */
+const SModalTrigger = DialogPrimitive.Trigger
+
+/**
+ * Close element that closes the modal.
+ */
+const SModalClose = DialogPrimitive.Close
+
+/**
+ * Modal content with horizontal flex layout.
+ */
+const SModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(({ className, children, style, ...props }, ref) => {
+  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsInteractionReady(true), 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          ANIMATION_CLASSES,
+          CONTENT_ANIMATION_CLASSES,
+          'fixed top-[50%] left-[50%] z-[500] flex h-[620px] w-[760px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          className
+        )}
+        style={style}
+        onEscapeKeyDown={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          e.stopPropagation()
+        }}
+        onPointerDown={(e) => {
+          e.stopPropagation()
+        }}
+        onPointerUp={(e) => {
+          e.stopPropagation()
+        }}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
+
+SModalContent.displayName = 'SModalContent'
+
+/**
+ * Sidebar container.
+ */
+const SModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex w-[166px] flex-col py-[12px]', className)} {...props} />
+  )
+)
+
+SModalSidebar.displayName = 'SModalSidebar'
+
+/**
+ * Sidebar header with title.
+ */
+const SModalSidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'mb-[16px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+SModalSidebarHeader.displayName = 'SModalSidebarHeader'
+
+/**
+ * Sidebar section container. Groups related items.
+ */
+const SModalSidebarSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col gap-[4px] px-[12px] [&+&]:mt-[12px]', className)}
+      {...props}
+    />
+  )
+)
+
+SModalSidebarSection.displayName = 'SModalSidebarSection'
+
+/**
+ * Sidebar section title.
+ */
+const SModalSidebarSectionTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mb-[2px] font-medium text-[12px] text-[var(--text-muted)]', className)}
+    {...props}
+  />
+))
+
+SModalSidebarSectionTitle.displayName = 'SModalSidebarSectionTitle'
+
+export interface SModalSidebarItemProps extends React.ComponentPropsWithoutRef<typeof Button> {
+  /** Whether the item is currently active/selected */
+  active?: boolean
+  /** Icon element to display */
+  icon?: React.ReactNode
+}
+
+/**
+ * Sidebar item with icon and text. Uses Button component with ghost variant.
+ */
+function SModalSidebarItem({
+  className,
+  active,
+  icon,
+  children,
+  ...props
+}: SModalSidebarItemProps) {
+  return (
+    <Button
+      variant={active ? 'active' : 'ghost'}
+      className={cn(
+        'w-full justify-start gap-[8px] rounded-[6px] text-[13px]',
+        !active &&
+          'text-[var(--text-tertiary)] hover:bg-[var(--border)] hover:text-[var(--text-primary)]',
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className='h-[14px] w-[14px] flex-shrink-0 [&>svg]:h-full [&>svg]:w-full'>
+          {icon}
+        </span>
+      )}
+      {children}
+    </Button>
+  )
+}
+
+/**
+ * Main content container.
+ */
+const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex min-w-0 flex-1 flex-col gap-[16px] rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+SModalMain.displayName = 'SModalMain'
+
+/**
+ * Main header with title and close button.
+ */
+const SModalMainHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>
+      <span className='font-base text-[14px] text-[var(--text-muted)]'>{children}</span>
+      <DialogPrimitive.Close asChild>
+        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+          <X className='h-[16px] w-[16px]' />
+          <span className='sr-only'>Close</span>
+        </Button>
+      </DialogPrimitive.Close>
+    </div>
+  )
+)
+
+SModalMainHeader.displayName = 'SModalMainHeader'
+
+/**
+ * Main body content area.
+ */
+const SModalMainBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('min-w-0 flex-1 overflow-y-auto', className)} {...props} />
+  )
+)
+
+SModalMainBody.displayName = 'SModalMainBody'
+
+export {
+  SModal,
+  SModalTrigger,
+  SModalClose,
+  SModalContent,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarSection,
+  SModalSidebarSectionTitle,
+  SModalSidebarItem,
+  SModalMain,
+  SModalMainHeader,
+  SModalMainBody,
+}
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
new file mode 100644
index 000000000..47c7538e2
--- /dev/null
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cn } from '@/lib/core/utils/cn'
+
+/**
+ * Custom switch component with thin track design.
+ * Track: 28px width, 6px height, 20px border-radius
+ * Thumb: 14px diameter circle that overlaps the track
+ */
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-[17px] w-[30px] shrink-0 cursor-pointer items-center rounded-[20px] transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      'bg-[var(--surface-12)] data-[state=checked]:bg-[var(--surface-14)]',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-[14px] w-[14px] rounded-full shadow-sm ring-0 transition-transform',
+        'bg-[var(--text-primary)] data-[state=checked]:bg-[var(--white)]',
+        'data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-[2px]'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+
+Switch.displayName = 'Switch'
+
+export { Switch }
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index 55b969d05..79ff958f3 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const textareaVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
index 60a8d0d76..cea7f9057 100644
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -38,20 +38,22 @@ const Content = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 6, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    collisionPadding={8}
-    avoidCollisions={true}
-    className={cn(
-      'z-[60] rounded-[3px] bg-black px-[7.5px] py-[6px] font-base text-white text-xs shadow-md dark:bg-white dark:text-black',
-      className
-    )}
-    {...props}
-  >
-    {props.children}
-    <TooltipPrimitive.Arrow className='fill-black dark:fill-white' />
-  </TooltipPrimitive.Content>
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      avoidCollisions={true}
+      className={cn(
+        'z-50 rounded-[3px] bg-black px-[7.5px] py-[6px] font-base text-white text-xs shadow-md dark:bg-white dark:text-black',
+        className
+      )}
+      {...props}
+    >
+      {props.children}
+      <TooltipPrimitive.Arrow className='fill-black dark:fill-white' />
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
 ))
 Content.displayName = TooltipPrimitive.Content.displayName
 
diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx
new file mode 100644
index 000000000..74d1c4ea8
--- /dev/null
+++ b/apps/sim/components/emcn/icons/card.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Card icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Card(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='15'
+      height='12'
+      viewBox='0 0 15 12'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M8.16699 0C9.40796 0 10.3809 -0.000511354 11.1465 0.0859375C11.9212 0.173467 12.5501 0.355175 13.0723 0.767578C13.2285 0.891003 13.3731 1.02802 13.5049 1.17578C13.9489 1.67389 14.1477 2.27788 14.2422 3.01855C14.3348 3.74544 14.334 4.66725 14.334 5.83301C14.334 6.99877 14.3348 7.92057 14.2422 8.64746C14.1477 9.38814 13.9489 9.99213 13.5049 10.4902C13.3731 10.638 13.2285 10.775 13.0723 10.8984C12.5501 11.3108 11.9212 11.4925 11.1465 11.5801C10.3809 11.6665 9.40796 11.666 8.16699 11.666H6.16699C4.92602 11.666 3.95304 11.6665 3.1875 11.5801C2.41283 11.4925 1.78392 11.3108 1.26172 10.8984C1.10544 10.775 0.960851 10.638 0.829102 10.4902C0.385099 9.99213 0.18625 9.38814 0.0917969 8.64746C-0.000859505 7.92057 0 6.99877 0 5.83301C-1.11693e-10 4.66725 -0.000859542 3.74544 0.0917969 3.01855C0.18625 2.27788 0.385099 1.67389 0.829102 1.17578C0.960851 1.02802 1.10544 0.891003 1.26172 0.767578C1.78392 0.355175 2.41283 0.173467 3.1875 0.0859375C3.95304 -0.000511365 4.92602 0 6.16699 0H8.16699ZM1.01074 4.33301C1.00118 4.76375 1 5.25822 1 5.83301C1 7.02533 1.00123 7.87246 1.08398 8.52148C1.165 9.15652 1.31748 9.53613 1.5752 9.8252C1.66787 9.92914 1.77067 10.0255 1.88184 10.1133C2.19602 10.3614 2.61269 10.5093 3.2998 10.5869C3.99617 10.6656 4.9025 10.666 6.16699 10.666H8.16699C9.43148 10.666 10.3378 10.6656 11.0342 10.5869C11.7213 10.5093 12.138 10.3614 12.4521 10.1133C12.5633 10.0255 12.6661 9.92914 12.7588 9.8252C13.0165 9.53613 13.169 9.15652 13.25 8.52148C13.3328 7.87246 13.334 7.02533 13.334 5.83301C13.334 5.25822 13.3328 4.76375 13.3232 4.33301H1.01074ZM6.83398 8C7.10998 8.00018 7.33398 8.22397 7.33398 8.5C7.33381 8.77588 7.10987 8.99982 6.83398 9H5.83398C5.55795 9 5.33416 8.77599 5.33398 8.5C5.33398 8.22386 5.55784 8 5.83398 8H6.83398ZM11.167 8C11.4431 8 11.667 8.22386 11.667 8.5C11.6668 8.77599 11.443 9 11.167 9H8.83398C8.55795 9 8.33416 8.77599 8.33398 8.5C8.33398 8.22386 8.55784 8 8.83398 8H11.167ZM6.16699 1C4.9025 1 3.99617 1.00046 3.2998 1.0791C2.61269 1.15672 2.19602 1.30465 1.88184 1.55273C1.77067 1.64054 1.66787 1.73687 1.5752 1.84082C1.31748 2.12988 1.165 2.5095 1.08398 3.14453C1.07622 3.20545 1.06987 3.26848 1.06348 3.33301H13.2705C13.2641 3.26848 13.2578 3.20545 13.25 3.14453C13.169 2.5095 13.0165 2.12988 12.7588 1.84082C12.6661 1.73687 12.5633 1.64054 12.4521 1.55273C12.138 1.30465 11.7213 1.15672 11.0342 1.0791C10.3378 1.00046 9.43148 1 8.16699 1H6.16699Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.3'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx
new file mode 100644
index 000000000..5baed7004
--- /dev/null
+++ b/apps/sim/components/emcn/icons/connections.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Connections icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Connections(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='13'
+      height='13'
+      viewBox='0 0 13 13'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M10.167 0C11.7315 0.000172202 12.9998 1.26846 13 2.83301C13 4.22694 11.993 5.38366 10.667 5.62012V7.33691C10.9894 7.34 11.2727 7.34749 11.5137 7.37988C11.8867 7.43005 12.2326 7.54222 12.5117 7.82129C12.7908 8.1004 12.9029 8.44639 12.9531 8.81934C13.0014 9.1781 13 9.63116 13 10.167C13 10.7027 13.0013 11.155 12.9531 11.5137C12.9029 11.8867 12.7909 12.2325 12.5117 12.5117C12.2325 12.7909 11.8867 12.9029 11.5137 12.9531C11.155 13.0013 10.7027 13 10.167 13C9.63116 13 9.1781 13.0014 8.81934 12.9531C8.44639 12.9029 8.1004 12.7908 7.82129 12.5117C7.54222 12.2326 7.43005 11.8867 7.37988 11.5137C7.34749 11.2727 7.34 10.9894 7.33691 10.667H5.66309C5.66 10.9894 5.65251 11.2727 5.62012 11.5137C5.56995 11.8867 5.45778 12.2326 5.17871 12.5117C4.8996 12.7908 4.55362 12.9029 4.18066 12.9531C3.8219 13.0014 3.36884 13 2.83301 13C2.29732 13 1.84501 13.0013 1.48633 12.9531C1.11326 12.9029 0.76747 12.7909 0.488281 12.5117C0.209097 12.2325 0.0970544 11.8867 0.046875 11.5137C-0.00134798 11.155 -5.30227e-07 10.7027 0 10.167C0 9.63116 -0.00135908 9.1781 0.046875 8.81934C0.0970767 8.44639 0.209171 8.1004 0.488281 7.82129C0.767445 7.54222 1.11333 7.43005 1.48633 7.37988C1.84501 7.33166 2.29733 7.33301 2.83301 7.33301C3.36884 7.33301 3.8219 7.33165 4.18066 7.37988C4.55363 7.43008 4.89959 7.54217 5.17871 7.82129C5.45783 8.10041 5.56992 8.44637 5.62012 8.81934C5.65254 9.06049 5.66 9.34431 5.66309 9.66699H7.33691C7.34 9.34431 7.34746 9.06049 7.37988 8.81934C7.43008 8.44637 7.54217 8.10041 7.82129 7.82129C8.10041 7.54217 8.44637 7.43008 8.81934 7.37988C9.06049 7.34746 9.34431 7.34 9.66699 7.33691V5.62012C8.50306 5.41282 7.58717 4.49694 7.37988 3.33301H5.66309C5.66 3.65569 5.65254 3.9395 5.62012 4.18066C5.56992 4.55363 5.45784 4.89959 5.17871 5.17871C4.89959 5.45784 4.55363 5.56992 4.18066 5.62012C3.8219 5.66835 3.36884 5.66699 2.83301 5.66699C2.29733 5.66699 1.84501 5.66834 1.48633 5.62012C1.11332 5.56995 0.767447 5.45779 0.488281 5.17871C0.209166 4.8996 0.0970752 4.55362 0.046875 4.18066C-0.00135908 3.8219 0 3.36884 0 2.83301C-5.66942e-07 2.29732 -0.00134897 1.84501 0.046875 1.48633C0.0970557 1.11326 0.209092 0.767471 0.488281 0.488281C0.767471 0.209092 1.11326 0.0970557 1.48633 0.046875C1.84501 -0.00134897 2.29732 -5.66942e-07 2.83301 0C3.36884 0 3.8219 -0.00135908 4.18066 0.046875C4.55362 0.0970752 4.8996 0.209166 5.17871 0.488281C5.45779 0.767447 5.56995 1.11332 5.62012 1.48633C5.65251 1.72731 5.66 2.01061 5.66309 2.33301H7.37988C7.61635 1.00705 8.77306 0 10.167 0ZM2.83301 8.33301C2.26927 8.33301 1.89667 8.33492 1.62012 8.37207C1.35812 8.4073 1.25779 8.46591 1.19531 8.52832C1.13285 8.59079 1.07335 8.6909 1.03809 8.95312C1.0009 9.22976 1 9.60291 1 10.167C1 10.7307 1.00095 11.1033 1.03809 11.3799C1.07334 11.6421 1.13285 11.7422 1.19531 11.8047C1.25778 11.8672 1.35789 11.9267 1.62012 11.9619C1.89667 11.9991 2.26933 12 2.83301 12C3.39708 12 3.77024 11.9991 4.04688 11.9619C4.3091 11.9267 4.40921 11.8672 4.47168 11.8047C4.53409 11.7422 4.5927 11.6419 4.62793 11.3799C4.66508 11.1033 4.66699 10.7307 4.66699 10.167C4.66699 9.60289 4.66512 9.22976 4.62793 8.95312C4.59267 8.69094 4.53414 8.59078 4.47168 8.52832C4.40921 8.46586 4.30907 8.40733 4.04688 8.37207C3.77024 8.33488 3.39711 8.33301 2.83301 8.33301ZM10.167 8.33301C9.60289 8.33301 9.22976 8.33488 8.95312 8.37207C8.69094 8.40733 8.59078 8.46586 8.52832 8.52832C8.46586 8.59078 8.40733 8.69094 8.37207 8.95312C8.33488 9.22976 8.33301 9.60289 8.33301 10.167C8.33301 10.7307 8.33492 11.1033 8.37207 11.3799C8.4073 11.6419 8.46592 11.7422 8.52832 11.8047C8.59079 11.8672 8.6909 11.9267 8.95312 11.9619C9.22976 11.9991 9.60291 12 10.167 12C10.7307 12 11.1033 11.9991 11.3799 11.9619C11.6421 11.9267 11.7422 11.8672 11.8047 11.8047C11.8672 11.7422 11.9267 11.6421 11.9619 11.3799C11.9991 11.1033 12 10.7307 12 10.167C12 9.60291 11.9991 9.22976 11.9619 8.95312C11.9267 8.6909 11.8672 8.59079 11.8047 8.52832C11.7422 8.46592 11.6419 8.4073 11.3799 8.37207C11.1033 8.33492 10.7307 8.33301 10.167 8.33301ZM2.83301 1C2.26933 1 1.89666 1.00095 1.62012 1.03809C1.35789 1.07335 1.25778 1.13285 1.19531 1.19531C1.13285 1.25778 1.07335 1.35789 1.03809 1.62012C1.00095 1.89666 1 2.26933 1 2.83301C1 3.39708 1.0009 3.77024 1.03809 4.04688C1.07335 4.3091 1.13285 4.40921 1.19531 4.47168C1.25779 4.53409 1.3581 4.5927 1.62012 4.62793C1.89667 4.66508 2.26927 4.66699 2.83301 4.66699C3.39711 4.66699 3.77024 4.66512 4.04688 4.62793C4.30908 4.59267 4.40922 4.53414 4.47168 4.47168C4.53414 4.40922 4.59267 4.30908 4.62793 4.04688C4.66512 3.77024 4.66699 3.39711 4.66699 2.83301C4.66699 2.26927 4.66508 1.89667 4.62793 1.62012C4.5927 1.3581 4.53409 1.25779 4.47168 1.19531C4.40921 1.13285 4.3091 1.07335 4.04688 1.03809C3.77024 1.0009 3.39708 1 2.83301 1ZM10.167 1C9.15458 1 8.33319 1.82064 8.33301 2.83301C8.33301 3.84553 9.15447 4.66699 10.167 4.66699C11.1794 4.66682 12 3.84542 12 2.83301C11.9998 1.82074 11.1793 1.00017 10.167 1Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.2'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/folder-code.tsx b/apps/sim/components/emcn/icons/folder-code.tsx
new file mode 100644
index 000000000..1f0ee590d
--- /dev/null
+++ b/apps/sim/components/emcn/icons/folder-code.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+/**
+ * FolderCode icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function FolderCode(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='15'
+      height='13'
+      viewBox='0 0 15 13'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M4.32234e-07 5.83339V3.79628C4.32234e-07 3.19982 -0.000206684 2.71995 0.0338546 2.33339C0.0685083 1.94027 0.141749 1.59614 0.317058 1.28196C0.542977 0.877129 0.87707 0.543036 1.2819 0.317117C1.59608 0.141808 1.94021 0.0685674 2.33333 0.0339137C2.71989 -0.000147559 3.19976 5.9557e-05 3.79622 5.9557e-05C4.53268 5.9264e-05 5.03054 -0.0078558 5.47526 0.158914C6.46893 0.531571 6.86678 1.44909 7.19141 2.09837L7.47591 2.66673H10.3333C11.025 2.66673 11.5814 2.66637 12.0267 2.71165C12.4803 2.75779 12.874 2.85548 13.222 3.08795C13.495 3.27035 13.7297 3.50508 13.9121 3.77805C14.1446 4.12607 14.2423 4.51976 14.2884 4.97337C14.3337 5.41867 14.3333 5.97505 14.3333 6.66673C14.3333 7.82671 14.3338 8.73433 14.2604 9.45579C14.1862 10.1855 14.0323 10.7801 13.6875 11.2963C13.4078 11.7148 13.0481 12.0746 12.6296 12.3542C12.1134 12.6991 11.5188 12.8529 10.7891 12.9271C10.0676 13.0005 9.15998 13.0001 8 13.0001H7.16667C5.6096 13.0001 4.39144 13.0013 3.44271 12.8738C2.47955 12.7443 1.71959 12.4736 1.12305 11.877C0.526507 11.2805 0.255796 10.5205 0.126303 9.55735C-0.00122168 8.60861 4.32234e-07 7.39046 4.32234e-07 5.83339ZM1 5.83339C1 7.41888 1.00132 8.55789 1.11784 9.42454C1.23243 10.2767 1.45034 10.7902 1.83008 11.17C2.20982 11.5497 2.72339 11.7676 3.57552 11.8822C4.44217 11.9987 5.58118 12.0001 7.16667 12.0001H8C9.18079 12.0001 10.029 11.9994 10.6882 11.9324C11.3387 11.8661 11.7498 11.7396 12.0742 11.5228C12.3836 11.3161 12.6494 11.0503 12.8561 10.7409C13.0729 10.4165 13.1994 10.0054 13.2656 9.35488C13.3327 8.69577 13.3333 7.84752 13.3333 6.66673C13.3333 5.9541 13.3326 5.45727 13.2936 5.07428C13.2555 4.69972 13.1852 4.48976 13.0807 4.33339C12.9713 4.16961 12.8305 4.02877 12.6667 3.91933C12.5103 3.81488 12.3003 3.74454 11.9258 3.70644C11.5428 3.66748 11.046 3.66673 10.3333 3.66673H5.16667C4.89052 3.66673 4.66667 3.44287 4.66667 3.16673C4.66667 2.89058 4.89052 2.66673 5.16667 2.66673H6.35742L6.29688 2.54563C5.92188 1.79565 5.68045 1.30454 5.1237 1.09576C4.88932 1.00791 4.6112 1.00006 3.79622 1.00006C3.18196 1.00006 2.75368 1.00072 2.42122 1.03001C2.09531 1.05874 1.90901 1.11196 1.76888 1.19016C1.52605 1.3257 1.32564 1.52611 1.1901 1.76894C1.1119 1.90907 1.05868 2.09537 1.02995 2.42128C1.00066 2.75373 1 3.18202 1 3.79628V5.83339Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.3'
+      />
+      <g transform='translate(0, 0.3)'>
+        <path
+          d='M9.82617 6.12097C9.617 5.94091 9.30131 5.96462 9.12109 6.1737C8.94103 6.38287 8.96474 6.69856 9.17383 6.87878L9.78711 7.40743C9.82764 7.44236 9.86236 7.47281 9.89323 7.49988C9.86236 7.52694 9.82764 7.55739 9.78711 7.59232L9.17383 8.12097C8.96474 8.30119 8.94103 8.61688 9.12109 8.82605C9.30131 9.03514 9.617 9.05885 9.82617 8.87878L10.4395 8.35014C10.5572 8.24863 10.6858 8.13988 10.778 8.03568C10.8645 7.93797 10.9698 7.78983 10.9948 7.58907L11 7.49988L10.9948 7.41068C10.9698 7.20992 10.8645 7.06178 10.778 6.96407C10.6858 6.85988 10.5572 6.75113 10.4395 6.64962L9.82617 6.12097Z'
+          fill='currentColor'
+        />
+        <path
+          d='M4.50732 6.12097C4.71649 5.94091 5.03218 5.96462 5.2124 6.1737C5.39247 6.38287 5.36876 6.69856 5.15967 6.87878L4.54639 7.40743C4.50586 7.44236 4.47113 7.47281 4.44027 7.49988C4.47113 7.52694 4.50586 7.55739 4.54639 7.59232L5.15967 8.12097C5.36876 8.30119 5.39247 8.61688 5.2124 8.82605C5.03218 9.03514 4.71649 9.05885 4.50732 8.87878L3.89404 8.35014C3.77627 8.24863 3.64773 8.13988 3.5555 8.03568C3.469 7.93797 3.36366 7.78983 3.3387 7.58907L3.3335 7.49988L3.3387 7.41068C3.36366 7.20992 3.469 7.06178 3.5555 6.96407C3.64773 6.85988 3.77627 6.75113 3.89404 6.64962L4.50732 6.12097Z'
+          fill='currentColor'
+        />
+        <path
+          d='M7.36917 5.64798C7.47172 5.39163 7.76255 5.26686 8.01891 5.36934C8.27527 5.47188 8.40004 5.76271 8.29756 6.01908L6.96423 9.35241C6.86169 9.60877 6.57085 9.73353 6.31449 9.63106C6.05813 9.52851 5.93337 9.23768 6.03584 8.98132L7.36917 5.64798Z'
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/hex-simple.tsx b/apps/sim/components/emcn/icons/hex-simple.tsx
new file mode 100644
index 000000000..fb8c7cf03
--- /dev/null
+++ b/apps/sim/components/emcn/icons/hex-simple.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * HexSimple icon component - regular hexagon with centered circle
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function HexSimple(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M12 2L20.66 7V17L12 22L3.34 17V7L12 2Z'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinejoin='round'
+      />
+      <circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' strokeWidth='2' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 096bde3a5..0eaea96e5 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -1,8 +1,13 @@
 export { BubbleChatPreview } from './bubble-chat-preview'
+export { Card } from './card'
 export { ChevronDown } from './chevron-down'
+export { Connections } from './connections'
 export { Copy } from './copy'
 export { Duplicate } from './duplicate'
+export { FolderCode } from './folder-code'
 export { FolderPlus } from './folder-plus'
+export { HexSimple } from './hex-simple'
+export { Key } from './key'
 export { Layout } from './layout'
 export { MoreHorizontal } from './more-horizontal'
 export { NoWrap } from './no-wrap'
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
new file mode 100644
index 000000000..34e7221ec
--- /dev/null
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Key icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Key(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='8'
+      viewBox='-0.5 -0.5 17 9'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M7.92 3.20645H16V6.41206C16 6.84919 15.64 7.20947 15.2 7.20947C14.76 7.20947 14.4 6.84919 14.4 6.41206V4.80765H12.8V6.40886C12.8 6.84919 12.44 7.20947 12 7.20947C11.56 7.20947 11.2 6.84919 11.2 6.40886V4.80765H7.92C7.71926 5.77747 7.16654 6.63843 6.36859 7.22427C5.57064 7.81011 4.58407 8.07925 3.59943 7.97972C2.61479 7.88018 1.70193 7.41903 1.03716 6.68534C0.372398 5.95164 0.00288855 4.99745 2.02229e-06 4.00705C-0.000994899 3.01434 0.366627 2.05667 1.0315 1.31996C1.69637 0.583243 2.61107 0.120042 3.598 0.0202756C4.58494 -0.0794905 5.57372 0.191296 6.37238 0.780068C7.17104 1.36884 7.72261 2.23359 7.92 3.20645ZM4 6.40886C4.63652 6.40886 5.24697 6.15582 5.69706 5.70539C6.14715 5.25496 6.4 4.64405 6.4 4.00705C6.4 3.37005 6.14715 2.75914 5.69706 2.30871C5.24697 1.85829 4.63652 1.60524 4 1.60524C3.36348 1.60524 2.75303 1.85829 2.30295 2.30871C1.85286 2.75914 1.6 3.37005 1.6 4.00705C1.6 4.64405 1.85286 5.25496 2.30295 5.70539C2.75303 6.15582 3.36348 6.40886 4 6.40886Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index b85680a25..e8d254975 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -2710,111 +2710,19 @@ export function MicrosoftSharepointIcon(props: SVGProps<SVGSVGElement>) {
 
 export function MicrosoftPlannerIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <g clipPath='url(#msplanner_clip0)'>
-        <path
-          d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
-          fill='url(#msplanner_paint0_linear)'
-        />
-        <path
-          d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
-          fill='url(#msplanner_paint1_linear)'
-        />
-        <path
-          d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
-          fill='url(#msplanner_paint2_linear)'
-        />
-        <path
-          d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
-          fill='url(#msplanner_paint3_linear)'
-        />
-        <path
-          d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
-          fill='url(#msplanner_paint4_linear)'
-        />
-        <path
-          d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
-          fill='url(#msplanner_paint5_linear)'
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id='msplanner_paint0_linear'
-          x1='6.38724'
-          y1='3.74167'
-          x2='2.15779'
-          y2='12.777'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#8752E0' />
-          <stop offset='1' stopColor='#541278' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint1_linear'
-          x1='8.38032'
-          y1='11.0696'
-          x2='4.94062'
-          y2='7.69244'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop offset='0.12172' stopColor='#3D0D59' />
-          <stop offset='1' stopColor='#7034B0' stopOpacity='0' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint2_linear'
-          x1='18.3701'
-          y1='-3.33385e-05'
-          x2='9.85717'
-          y2='20.4192'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#DB45E0' />
-          <stop offset='1' stopColor='#6C0F71' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint3_linear'
-          x1='18.3701'
-          y1='-3.33385e-05'
-          x2='9.85717'
-          y2='20.4192'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#DB45E0' />
-          <stop offset='0.677403' stopColor='#A829AE' />
-          <stop offset='1' stopColor='#8F28B3' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint4_linear'
-          x1='18.0002'
-          y1='7.49958'
-          x2='14.0004'
-          y2='23.9988'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#3DCBFF' />
-          <stop offset='1' stopColor='#00479E' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint5_linear'
-          x1='18.2164'
-          y1='7.92626'
-          x2='10.5237'
-          y2='22.9363'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#3DCBFF' />
-          <stop offset='1' stopColor='#4A40D4' />
-        </linearGradient>
-        <clipPath id='msplanner_clip0'>
-          <rect width='24' height='24' fill='white' />
-        </clipPath>
-      </defs>
+    <svg {...props} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
+        fill='#185ABD'
+      />
+      <path
+        d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
+        fill='#41A5EE'
+      />
+      <path
+        d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
+        fill='#2B7CD3'
+      />
     </svg>
   )
 }
@@ -3297,29 +3205,10 @@ export function TrelloIcon(props: SVGProps<SVGSVGElement>) {
 
 export function AsanaIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='781.361 0 944.893 873.377'
-    >
-      <radialGradient
-        id='asana_radial_gradient'
-        cx='943.992'
-        cy='1221.416'
-        r='.663'
-        gradientTransform='matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)'
-        gradientUnits='userSpaceOnUse'
-      >
-        <stop offset='0' stopColor='#ffb900' />
-        <stop offset='.6' stopColor='#f95d8f' />
-        <stop offset='.999' stopColor='#f95353' />
-      </radialGradient>
-      <path
-        fill='url(#asana_radial_gradient)'
-        d='M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z'
-      />
+    <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>
+      <circle cx='18' cy='16' r='4' fill='#F06A6A' />
+      <circle cx='6' cy='16' r='4' fill='#F06A6A' />
+      <circle cx='12' cy='6.5' r='4' fill='#F06A6A' />
     </svg>
   )
 }
@@ -3887,3 +3776,30 @@ export function DynamoDBIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function McpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g clipPath='url(#mcp-clip)'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M14.5572 7.87503L14.5022 7.92903L8.69824 13.62C8.68102 13.6368 8.66728 13.6569 8.65781 13.679C8.64834 13.7011 8.64332 13.7248 8.64304 13.7489C8.64276 13.773 8.64723 13.7968 8.65619 13.8192C8.66514 13.8415 8.67842 13.8618 8.69524 13.879L8.69824 13.882L9.89024 15.052C9.99431 15.1536 10.0539 15.2923 10.056 15.4378C10.058 15.5832 10.0024 15.7235 9.90124 15.828L9.89124 15.838C9.78385 15.9428 9.63977 16.0014 9.48974 16.0014C9.33972 16.0014 9.19564 15.9428 9.08824 15.838L7.89624 14.67C7.77347 14.5507 7.67588 14.408 7.60923 14.2503C7.54259 14.0927 7.50825 13.9232 7.50825 13.752C7.50825 13.5808 7.54259 13.4114 7.60923 13.2537C7.67588 13.096 7.77347 12.9533 7.89624 12.834L13.7012 7.14203C14.0139 6.83733 14.1928 6.42097 14.1986 5.98444C14.2044 5.54792 14.0367 5.12694 13.7322 4.81403L13.7012 4.78203L13.6672 4.75003C13.3455 4.43669 12.9143 4.26118 12.4651 4.2608C12.016 4.26043 11.5845 4.43522 11.2622 4.74803L6.48124 9.43803H6.47924L6.41424 9.50303C6.30685 9.60778 6.16277 9.66642 6.01274 9.66642C5.86272 9.66642 5.71864 9.60778 5.61124 9.50303C5.50731 9.40128 5.44791 9.26252 5.44604 9.11709C5.44417 8.97166 5.49997 8.83141 5.60124 8.72703L5.61124 8.71703L10.4602 3.96003C11.1102 3.32403 11.1232 2.28203 10.4872 1.63103L10.4582 1.60103C10.1362 1.28736 9.70433 1.11183 9.25474 1.11183C8.80516 1.11183 8.37333 1.28736 8.05124 1.60103L1.63524 7.89603C1.5279 8.00048 1.38403 8.05893 1.23424 8.05893C1.08446 8.05893 0.940591 8.00048 0.833243 7.89603C0.729179 7.79442 0.669597 7.65573 0.667536 7.5103C0.665474 7.36487 0.7211 7.22454 0.822243 7.12003L0.833243 7.11003L7.25024 0.814026C7.78698 0.291743 8.50633 -0.000488281 9.25524 -0.000488281C10.0042 -0.000488281 10.7235 0.291743 11.2602 0.814026C11.8902 1.42703 12.1892 2.30403 12.0632 3.17403C12.9432 3.04903 13.8332 3.34003 14.4692 3.96103L14.5032 3.99403C14.7616 4.24525 14.9679 4.54492 15.1104 4.87591C15.2529 5.2069 15.3287 5.56272 15.3337 5.92304C15.3386 6.28337 15.2725 6.64113 15.1391 6.97589C15.0057 7.31064 14.8076 7.61584 14.5562 7.87403M12.8652 6.32103C12.9692 6.21928 13.0286 6.08052 13.0304 5.93509C13.0323 5.78966 12.9765 5.64941 12.8752 5.54503L12.8652 5.53503C12.7578 5.43027 12.6138 5.37164 12.4637 5.37164C12.3137 5.37164 12.1696 5.43027 12.0622 5.53503L7.31724 10.19C6.99515 10.5037 6.56333 10.6792 6.11374 10.6792C5.66416 10.6792 5.23233 10.5037 4.91024 10.19C4.7552 10.0391 4.63143 9.85901 4.54601 9.66018C4.46058 9.46135 4.41518 9.24763 4.4124 9.03124C4.40961 8.81486 4.4495 8.60004 4.52977 8.39908C4.61005 8.19812 4.72914 8.01494 4.88024 7.86003L4.91124 7.82903L9.65824 3.17403C9.76231 3.07242 9.82189 2.93373 9.82395 2.7883C9.82601 2.64287 9.77039 2.50254 9.66924 2.39803L9.65824 2.38803C9.55085 2.28327 9.40677 2.22464 9.25674 2.22464C9.10672 2.22464 8.96264 2.28327 8.85524 2.38803L4.10824 7.04203C3.84537 7.29765 3.63642 7.60338 3.49374 7.94115C3.35107 8.27892 3.27755 8.64186 3.27755 9.00853C3.27755 9.37519 3.35107 9.73814 3.49374 10.0759C3.63642 10.4137 3.84537 10.7194 4.10824 10.975C4.64515 11.4974 5.36467 11.7896 6.11374 11.7896C6.86282 11.7896 7.58234 11.4974 8.11924 10.975L12.8652 6.32103Z'
+          fill='currentColor'
+        />
+      </g>
+      <defs>
+        <clipPath id='mcp-clip'>
+          <rect width='16' height='16' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/sim/components/ui/dialog.tsx b/apps/sim/components/ui/dialog.tsx
index 4e69d43bf..6c3921eb3 100644
--- a/apps/sim/components/ui/dialog.tsx
+++ b/apps/sim/components/ui/dialog.tsx
@@ -17,14 +17,6 @@ const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, style, ...props }, ref) => {
-  const [isStable, setIsStable] = React.useState(false)
-
-  React.useEffect(() => {
-    // Add a small delay before allowing overlay interactions to prevent rapid state changes
-    const timer = setTimeout(() => setIsStable(true), 150)
-    return () => clearTimeout(timer)
-  }, [])
-
   return (
     <DialogPrimitive.Overlay
       ref={ref}
@@ -33,17 +25,6 @@ const DialogOverlay = React.forwardRef<
         className
       )}
       style={{ backdropFilter: 'blur(1.5px)', ...style }}
-      onPointerDown={(e) => {
-        // Only allow overlay clicks after component is stable
-        if (!isStable) {
-          e.preventDefault()
-          return
-        }
-        // Ensure click is on the overlay itself, not a child
-        if (e.target !== e.currentTarget) {
-          e.preventDefault()
-        }
-      }}
       {...props}
     />
   )
@@ -73,18 +54,6 @@ const DialogContent = React.forwardRef<
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[10000000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in dark:bg-[var(--surface-3)]',
           className
         )}
-        onInteractOutside={(e) => {
-          // Prevent accidental closes from child element interactions during initial render
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          // More restrictive interaction outside handling
-          const target = e.target as Element
-          if (target.closest('[role="dialog"]')) {
-            e.preventDefault()
-          }
-        }}
         onEscapeKeyDown={(e) => {
           // Prevent escape during rapid interactions
           if (!isInteractionReady) {
diff --git a/apps/sim/components/ui/tag-input.tsx b/apps/sim/components/ui/tag-input.tsx
index 2a9a516da..4b7cd83cd 100644
--- a/apps/sim/components/ui/tag-input.tsx
+++ b/apps/sim/components/ui/tag-input.tsx
@@ -2,7 +2,6 @@
 
 import { type KeyboardEvent, useRef, useState } from 'react'
 import { X } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -43,13 +42,11 @@ export function TagInput({
       e.preventDefault()
       addTag(inputValue)
     } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
-      // Remove last tag when backspace is pressed with empty input
       removeTag(value[value.length - 1])
     }
   }
 
   const handleBlur = () => {
-    // Add tag on blur if there's input
     if (inputValue.trim()) {
       addTag(inputValue)
     }
@@ -58,32 +55,14 @@ export function TagInput({
   return (
     <div
       className={cn(
-        'flex min-h-[34px] flex-wrap gap-1 rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] dark:bg-[var(--surface-9)]',
+        'scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]',
         disabled && 'cursor-not-allowed opacity-50',
         className
       )}
       onClick={() => !disabled && inputRef.current?.focus()}
     >
       {value.map((tag) => (
-        <Badge
-          key={tag}
-          variant='secondary'
-          className='h-[22px] gap-1 border-0 bg-muted/60 pr-1 pl-2 text-xs hover:bg-muted/80'
-        >
-          <span>{tag}</span>
-          {!disabled && (
-            <button
-              type='button'
-              onClick={(e) => {
-                e.stopPropagation()
-                removeTag(tag)
-              }}
-              className='ml-auto rounded-full p-0.5 hover:bg-muted-foreground/20'
-            >
-              <X className='h-3 w-3' />
-            </button>
-          )}
-        </Badge>
+        <Tag key={tag} value={tag} onRemove={() => removeTag(tag)} disabled={disabled} />
       ))}
       {!disabled && value.length < maxTags && (
         <Input
@@ -95,9 +74,39 @@ export function TagInput({
           onBlur={handleBlur}
           placeholder={value.length === 0 ? placeholder : ''}
           disabled={disabled}
-          className='h-[22px] min-w-[120px] flex-1 border-0 bg-transparent p-0 text-sm shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0'
+          className={cn(
+            'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+            value.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+          )}
         />
       )}
     </div>
   )
 }
+
+interface TagProps {
+  value: string
+  onRemove: () => void
+  disabled?: boolean
+}
+
+function Tag({ value, onRemove, disabled }: TagProps) {
+  return (
+    <div className='flex w-auto items-center gap-[4px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-5)] px-[6px] py-[2px] text-[12px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'>
+      <span className='max-w-[200px] truncate'>{value}</span>
+      {!disabled && (
+        <button
+          type='button'
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className='flex-shrink-0 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)] focus:outline-none'
+          aria-label={`Remove ${value}`}
+        >
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts
index 00b806660..9d049d68c 100644
--- a/apps/sim/hooks/queries/general-settings.ts
+++ b/apps/sim/hooks/queries/general-settings.ts
@@ -1,4 +1,6 @@
+import { useEffect } from 'react'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { syncThemeToNextThemes } from '@/lib/core/utils/theme'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useGeneralStore } from '@/stores/settings/general/store'
 
@@ -17,9 +19,6 @@ export const generalSettingsKeys = {
  */
 export interface GeneralSettings {
   autoConnect: boolean
-  autoPan: boolean
-  consoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   theme: 'light' | 'dark' | 'system'
@@ -42,9 +41,6 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
 
   return {
     autoConnect: data.autoConnect ?? true,
-    autoPan: data.autoPan ?? true,
-    consoleExpandedByDefault: data.consoleExpandedByDefault ?? true,
-    showFloatingControls: data.showFloatingControls ?? true,
     showTrainingControls: data.showTrainingControls ?? false,
     superUserModeEnabled: data.superUserModeEnabled ?? true,
     theme: data.theme || 'system',
@@ -55,17 +51,15 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
 }
 
 /**
- * Sync React Query cache to Zustand store
- * This ensures the rest of the app (which uses Zustand) stays in sync
+ * Sync React Query cache to Zustand store and next-themes.
+ * This ensures the rest of the app (which uses Zustand) stays in sync.
+ * @param settings - The general settings to sync
  */
 function syncSettingsToZustand(settings: GeneralSettings) {
   const { setSettings } = useGeneralStore.getState()
 
   setSettings({
     isAutoConnectEnabled: settings.autoConnect,
-    isAutoPanEnabled: settings.autoPan,
-    isConsoleExpandedByDefault: settings.consoleExpandedByDefault,
-    showFloatingControls: settings.showFloatingControls,
     showTrainingControls: settings.showTrainingControls,
     superUserModeEnabled: settings.superUserModeEnabled,
     theme: settings.theme,
@@ -73,24 +67,27 @@ function syncSettingsToZustand(settings: GeneralSettings) {
     isBillingUsageNotificationsEnabled: settings.billingUsageNotificationsEnabled,
     isErrorNotificationsEnabled: settings.errorNotificationsEnabled,
   })
+
+  syncThemeToNextThemes(settings.theme)
 }
 
 /**
- * Hook to fetch general settings
- * Also syncs to Zustand store to keep the rest of the app in sync
+ * Hook to fetch general settings.
+ * Also syncs to Zustand store to keep the rest of the app in sync.
  */
 export function useGeneralSettings() {
   const query = useQuery({
     queryKey: generalSettingsKeys.settings(),
     queryFn: fetchGeneralSettings,
-    staleTime: 60 * 60 * 1000, // 1 hour - settings rarely change
-    placeholderData: keepPreviousData, // Show cached data immediately while refetching
+    staleTime: 60 * 60 * 1000,
+    placeholderData: keepPreviousData,
   })
 
-  // Sync to Zustand whenever React Query cache updates
-  if (query.data) {
-    syncSettingsToZustand(query.data)
-  }
+  useEffect(() => {
+    if (query.data) {
+      syncSettingsToZustand(query.data)
+    }
+  }, [query.data])
 
   return query
 }
diff --git a/apps/sim/hooks/use-mcp-tools.ts b/apps/sim/hooks/use-mcp-tools.ts
index 4960bedcf..594caecee 100644
--- a/apps/sim/hooks/use-mcp-tools.ts
+++ b/apps/sim/hooks/use-mcp-tools.ts
@@ -8,7 +8,7 @@
 import type React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { WrenchIcon } from 'lucide-react'
+import { McpIcon } from '@/components/icons'
 import { createLogger } from '@/lib/logs/console/logger'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { mcpKeys, useMcpToolsQuery } from '@/hooks/queries/mcp'
@@ -51,7 +51,7 @@ export function useMcpTools(workspaceId: string): UseMcpToolsResult {
       type: 'mcp' as const,
       inputSchema: tool.inputSchema,
       bgColor: '#6366F1',
-      icon: WrenchIcon,
+      icon: McpIcon,
     }))
   }, [mcpToolsData])
 
diff --git a/apps/sim/lib/core/utils/theme.ts b/apps/sim/lib/core/utils/theme.ts
index ed28fc710..fb19fcf26 100644
--- a/apps/sim/lib/core/utils/theme.ts
+++ b/apps/sim/lib/core/utils/theme.ts
@@ -3,38 +3,31 @@
  */
 
 /**
- * Updates the theme in next-themes by dispatching a storage event
- * This works by updating localStorage and notifying next-themes of the change
- *
- * COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
+ * Updates the theme in next-themes by dispatching a storage event.
+ * This works by updating localStorage and notifying next-themes of the change.
+ * @param theme - The theme to apply: 'system', 'light', or 'dark'
  */
 export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
   if (typeof window === 'undefined') return
 
-  // COMMENTED OUT: Dark mode is forced for workspace pages
-  // // Update localStorage
-  // localStorage.setItem('sim-theme', theme)
+  localStorage.setItem('sim-theme', theme)
 
-  // // Dispatch storage event to notify next-themes
-  // window.dispatchEvent(
-  //   new StorageEvent('storage', {
-  //     key: 'sim-theme',
-  //     newValue: theme,
-  //     oldValue: localStorage.getItem('sim-theme'),
-  //     storageArea: localStorage,
-  //     url: window.location.href,
-  //   })
-  // )
+  window.dispatchEvent(
+    new StorageEvent('storage', {
+      key: 'sim-theme',
+      newValue: theme,
+      oldValue: localStorage.getItem('sim-theme'),
+      storageArea: localStorage,
+      url: window.location.href,
+    })
+  )
 
-  // // Also update the HTML class immediately for instant feedback
-  // const root = document.documentElement
-  // const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  // const actualTheme = theme === 'system' ? systemTheme : theme
+  const root = document.documentElement
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const actualTheme = theme === 'system' ? systemTheme : theme
 
-  // // Remove existing theme classes
-  // root.classList.remove('light', 'dark')
-  // // Add new theme class
-  // root.classList.add(actualTheme)
+  root.classList.remove('light', 'dark')
+  root.classList.add(actualTheme)
 }
 
 /**
diff --git a/apps/sim/stores/execution/store.ts b/apps/sim/stores/execution/store.ts
index 6c3235556..669c79bc3 100644
--- a/apps/sim/stores/execution/store.ts
+++ b/apps/sim/stores/execution/store.ts
@@ -1,68 +1,26 @@
 import { create } from 'zustand'
-import {
-  type ExecutionActions,
-  type ExecutionState,
-  initialState,
-  type PanToBlockCallback,
-  type SetPanToBlockCallback,
-} from '@/stores/execution/types'
-import { useGeneralStore } from '@/stores/settings/general/store'
-
-// Global callback for panning to active blocks
-let panToBlockCallback: PanToBlockCallback | null = null
-
-export const setPanToBlockCallback: SetPanToBlockCallback = (callback) => {
-  panToBlockCallback = callback
-}
+import { type ExecutionActions, type ExecutionState, initialState } from '@/stores/execution/types'
 
 export const useExecutionStore = create<ExecutionState & ExecutionActions>()((set, get) => ({
   ...initialState,
 
   setActiveBlocks: (blockIds) => {
     set({ activeBlockIds: new Set(blockIds) })
-
-    // Pan to the first active block if auto-pan is enabled and we have a callback and blocks are active
-    const { autoPanDisabled } = get()
-    const isAutoPanEnabled = useGeneralStore.getState().isAutoPanEnabled
-
-    if (panToBlockCallback && !autoPanDisabled && isAutoPanEnabled && blockIds.size > 0) {
-      const firstActiveBlockId = Array.from(blockIds)[0]
-      panToBlockCallback(firstActiveBlockId)
-    }
   },
 
   setPendingBlocks: (pendingBlocks) => {
     set({ pendingBlocks })
-
-    // Pan to the first pending block if auto-pan is enabled, we have a callback, blocks are pending, and we're in debug mode
-    const { isDebugging, autoPanDisabled } = get()
-    const isAutoPanEnabled = useGeneralStore.getState().isAutoPanEnabled
-
-    if (
-      panToBlockCallback &&
-      !autoPanDisabled &&
-      isAutoPanEnabled &&
-      pendingBlocks.length > 0 &&
-      isDebugging
-    ) {
-      const firstPendingBlockId = pendingBlocks[0]
-      panToBlockCallback(firstPendingBlockId)
-    }
   },
 
   setIsExecuting: (isExecuting) => {
     set({ isExecuting })
-    // Reset auto-pan disabled state when starting execution
     if (isExecuting) {
-      set({ autoPanDisabled: false })
-      // Clear run path when starting a new execution
       set({ lastRunPath: new Map(), lastRunEdges: new Map() })
     }
   },
   setIsDebugging: (isDebugging) => set({ isDebugging }),
   setExecutor: (executor) => set({ executor }),
   setDebugContext: (debugContext) => set({ debugContext }),
-  setAutoPanDisabled: (disabled) => set({ autoPanDisabled: disabled }),
   setBlockRunStatus: (blockId, status) => {
     const { lastRunPath } = get()
     const newRunPath = new Map(lastRunPath)
diff --git a/apps/sim/stores/execution/types.ts b/apps/sim/stores/execution/types.ts
index e374595b3..3994f4aab 100644
--- a/apps/sim/stores/execution/types.ts
+++ b/apps/sim/stores/execution/types.ts
@@ -18,7 +18,6 @@ export interface ExecutionState {
   pendingBlocks: string[]
   executor: Executor | null
   debugContext: ExecutionContext | null
-  autoPanDisabled: boolean
   /**
    * Tracks blocks from the last execution run and their success/error status.
    * Cleared when a new run starts. Used to show run path indicators (rings on blocks).
@@ -38,7 +37,6 @@ export interface ExecutionActions {
   setPendingBlocks: (blockIds: string[]) => void
   setExecutor: (executor: Executor | null) => void
   setDebugContext: (context: ExecutionContext | null) => void
-  setAutoPanDisabled: (disabled: boolean) => void
   setBlockRunStatus: (blockId: string, status: BlockRunStatus) => void
   setEdgeRunStatus: (edgeId: string, status: EdgeRunStatus) => void
   clearRunPath: () => void
@@ -52,11 +50,6 @@ export const initialState: ExecutionState = {
   pendingBlocks: [],
   executor: null,
   debugContext: null,
-  autoPanDisabled: false,
   lastRunPath: new Map(),
   lastRunEdges: new Map(),
 }
-
-// Types for panning functionality
-export type PanToBlockCallback = (blockId: string) => void
-export type SetPanToBlockCallback = (callback: PanToBlockCallback | null) => void
diff --git a/apps/sim/stores/settings/general/store.ts b/apps/sim/stores/settings/general/store.ts
index 99d358c4a..b63f6cc0c 100644
--- a/apps/sim/stores/settings/general/store.ts
+++ b/apps/sim/stores/settings/general/store.ts
@@ -7,9 +7,6 @@ const logger = createLogger('GeneralStore')
 
 const initialState: General = {
   isAutoConnectEnabled: true,
-  isAutoPanEnabled: true,
-  isConsoleExpandedByDefault: true,
-  showFloatingControls: true,
   showTrainingControls: false,
   superUserModeEnabled: true,
   theme: 'system',
diff --git a/apps/sim/stores/settings/general/types.ts b/apps/sim/stores/settings/general/types.ts
index 882a87b58..f44f27d72 100644
--- a/apps/sim/stores/settings/general/types.ts
+++ b/apps/sim/stores/settings/general/types.ts
@@ -1,8 +1,5 @@
 export interface General {
   isAutoConnectEnabled: boolean
-  isAutoPanEnabled: boolean
-  isConsoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   theme: 'system' | 'light' | 'dark'
@@ -19,9 +16,6 @@ export interface GeneralStore extends General {
 export type UserSettings = {
   theme: 'system' | 'light' | 'dark'
   autoConnect: boolean
-  autoPan: boolean
-  consoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   telemetryEnabled: boolean
diff --git a/apps/sim/stores/terminal/store.ts b/apps/sim/stores/terminal/store.ts
index 65c99366e..181ffc81d 100644
--- a/apps/sim/stores/terminal/store.ts
+++ b/apps/sim/stores/terminal/store.ts
@@ -2,20 +2,39 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 /**
- * Display mode type for terminal output
+ * Display mode type for terminal output.
+ *
+ * @remarks
+ * Currently unused but kept for future customization of terminal rendering.
  */
 // export type DisplayMode = 'raw' | 'prettier'
 
 /**
- * Terminal state interface
+ * Terminal state persisted across workspace sessions.
  */
 interface TerminalState {
   terminalHeight: number
   setTerminalHeight: (height: number) => void
+  lastExpandedHeight: number
   outputPanelWidth: number
   setOutputPanelWidth: (width: number) => void
   openOnRun: boolean
   setOpenOnRun: (open: boolean) => void
+  /**
+   * Indicates whether the terminal is currently being resized via mouse drag.
+   *
+   * @remarks
+   * This flag is used by other workspace UI elements (e.g. notifications,
+   * diff controls) to temporarily disable position transitions while the
+   * terminal height is actively changing, avoiding janky animations.
+   */
+  isResizing: boolean
+  /**
+   * Updates the {@link TerminalState.isResizing} flag.
+   *
+   * @param isResizing - True while the terminal is being resized.
+   */
+  setIsResizing: (isResizing: boolean) => void
   // displayMode: DisplayMode
   // setDisplayMode: (mode: DisplayMode) => void
   _hasHydrated: boolean
@@ -23,20 +42,23 @@ interface TerminalState {
 }
 
 /**
- * Terminal height constraints
- * Note: Maximum height is enforced dynamically at 70% of viewport height in the resize hook
+ * Terminal height constraints.
+ *
+ * @remarks
+ * The maximum height is enforced dynamically at 70% of the viewport height
+ * inside the resize hook to keep the workflow canvas visible.
  */
 export const MIN_TERMINAL_HEIGHT = 30
 export const DEFAULT_TERMINAL_HEIGHT = 196
 
 /**
- * Output panel width constraints
+ * Output panel width constraints.
  */
 const MIN_OUTPUT_PANEL_WIDTH = 300
 const DEFAULT_OUTPUT_PANEL_WIDTH = 400
 
 /**
- * Default display mode
+ * Default display mode for terminal output.
  */
 // const DEFAULT_DISPLAY_MODE: DisplayMode = 'prettier'
 
@@ -44,21 +66,56 @@ export const useTerminalStore = create<TerminalState>()(
   persist(
     (set) => ({
       terminalHeight: DEFAULT_TERMINAL_HEIGHT,
+      lastExpandedHeight: DEFAULT_TERMINAL_HEIGHT,
+      isResizing: false,
+      /**
+       * Updates the terminal height and synchronizes the CSS custom property.
+       *
+       * @remarks
+       * - Enforces a minimum height to keep the resize handle usable.
+       * - Persists {@link TerminalState.lastExpandedHeight} only when the
+       *   height is expanded above the minimum.
+       *
+       * @param height - Desired terminal height in pixels.
+       */
       setTerminalHeight: (height) => {
-        // Only enforce minimum - maximum is enforced dynamically by the resize hook
         const clampedHeight = Math.max(MIN_TERMINAL_HEIGHT, height)
-        set({ terminalHeight: clampedHeight })
+
+        set((state) => ({
+          terminalHeight: clampedHeight,
+          lastExpandedHeight:
+            clampedHeight > MIN_TERMINAL_HEIGHT ? clampedHeight : state.lastExpandedHeight,
+        }))
+
         // Update CSS variable for immediate visual feedback
         if (typeof window !== 'undefined') {
           document.documentElement.style.setProperty('--terminal-height', `${clampedHeight}px`)
         }
       },
+      /**
+       * Updates the terminal resize state used to coordinate layout transitions.
+       *
+       * @param isResizing - True while the terminal is being resized via mouse drag.
+       */
+      setIsResizing: (isResizing) => {
+        set({ isResizing })
+      },
       outputPanelWidth: DEFAULT_OUTPUT_PANEL_WIDTH,
+      /**
+       * Updates the output panel width, enforcing the minimum constraint.
+       *
+       * @param width - Desired width in pixels for the output panel.
+       */
       setOutputPanelWidth: (width) => {
         const clampedWidth = Math.max(MIN_OUTPUT_PANEL_WIDTH, width)
         set({ outputPanelWidth: clampedWidth })
       },
       openOnRun: true,
+      /**
+       * Enables or disables automatic terminal opening when new entries are added.
+       *
+       * @param open - Whether the terminal should open on new console entries.
+       */
       setOpenOnRun: (open) => {
         set({ openOnRun: open })
       },
@@ -66,15 +123,26 @@ export const useTerminalStore = create<TerminalState>()(
       // setDisplayMode: (mode) => {
       //   set({ displayMode: mode })
       // },
+      /**
+       * Indicates whether the terminal store has finished client-side hydration.
+       */
       _hasHydrated: false,
+      /**
+       * Marks the store as hydrated on the client.
+       *
+       * @param hasHydrated - True when client-side hydration is complete.
+       */
       setHasHydrated: (hasHydrated) => {
         set({ _hasHydrated: hasHydrated })
       },
     }),
     {
       name: 'terminal-state',
+      /**
+       * Synchronizes the `--terminal-height` CSS custom property with the
+       * persisted store value after client-side rehydration.
+       */
       onRehydrateStorage: () => (state) => {
-        // Sync CSS variables with stored state after rehydration
         if (state && typeof window !== 'undefined') {
           document.documentElement.style.setProperty(
             '--terminal-height',
diff --git a/apps/sim/stores/variables/store.ts b/apps/sim/stores/variables/store.ts
index a9404e8d3..aa3c54e01 100644
--- a/apps/sim/stores/variables/store.ts
+++ b/apps/sim/stores/variables/store.ts
@@ -16,10 +16,10 @@ const logger = createLogger('VariablesModalStore')
 
 /**
  * Floating variables modal default dimensions.
- * Matches the chat modal baseline for visual consistency.
+ * Slightly larger than the chat modal for more comfortable editing.
  */
-const DEFAULT_WIDTH = 250
-const DEFAULT_HEIGHT = 286
+const DEFAULT_WIDTH = 320
+const DEFAULT_HEIGHT = 320
 
 /**
  * Minimum and maximum modal dimensions.
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index 93b156c1d..4aa4e6bb7 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -79,9 +79,9 @@ export default {
         },
       },
       fontWeight: {
-        base: '450',
-        medium: '480',
-        semibold: '550',
+        base: 'var(--font-weight-base)',
+        medium: 'var(--font-weight-medium)',
+        semibold: 'var(--font-weight-semibold)',
       },
       borderRadius: {
         lg: 'var(--radius)',
diff --git a/packages/db/schema.ts b/packages/db/schema.ts
index 5570e2af2..340f06e01 100644
--- a/packages/db/schema.ts
+++ b/packages/db/schema.ts
@@ -408,8 +408,6 @@ export const settings = pgTable('settings', {
   // General settings
   theme: text('theme').notNull().default('system'),
   autoConnect: boolean('auto_connect').notNull().default(true),
-  autoPan: boolean('auto_pan').notNull().default(true),
-  consoleExpandedByDefault: boolean('console_expanded_by_default').notNull().default(true),
 
   // Privacy settings
   telemetryEnabled: boolean('telemetry_enabled').notNull().default(true),
@@ -423,7 +421,6 @@ export const settings = pgTable('settings', {
     .default(true),
 
   // UI preferences
-  showFloatingControls: boolean('show_floating_controls').notNull().default(true),
   showTrainingControls: boolean('show_training_controls').notNull().default(false),
   superUserModeEnabled: boolean('super_user_mode_enabled').notNull().default(true),