diff --git a/apps/sim/app/(landing)/careers/page.tsx b/apps/sim/app/(landing)/careers/page.tsx
index 2f12b3d9c4..b91aa1ec66 100644
--- a/apps/sim/app/(landing)/careers/page.tsx
+++ b/apps/sim/app/(landing)/careers/page.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
@@ -499,16 +499,11 @@ export default function CareersPage() {
                   className='min-w-[200px] rounded-[10px] border border-[#6F3DFA] bg-gradient-to-b from-[#8357FF] to-[#6F3DFA] text-white shadow-[inset_0_2px_4px_0_#9B77FF] transition-all duration-300 hover:opacity-90 disabled:opacity-50'
                   size='lg'
                 >
-                  {isSubmitting ? (
-                    <>
-                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      Submitting...
-                    </>
-                  ) : submitStatus === 'success' ? (
-                    'Submitted'
-                  ) : (
-                    'Submit Application'
-                  )}
+                  {isSubmitting
+                    ? 'Submitting...'
+                    : submitStatus === 'success'
+                      ? 'Submitted'
+                      : 'Submit Application'}
                 </Button>
               </div>
             </form>
diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index a6bc5444e0..cbb31e4423 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -7,7 +7,7 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force light mode on public/marketing pages, dark mode everywhere else
+  // Force light mode on public/marketing pages, allow user preference elsewhere
   const isLightModePage =
     pathname === '/' ||
     pathname.startsWith('/login') ||
@@ -27,10 +27,10 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     <NextThemesProvider
       attribute='class'
       defaultTheme='dark'
-      enableSystem={false}
+      enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'
-      forcedTheme={isLightModePage ? 'light' : 'dark'}
+      forcedTheme={isLightModePage ? 'light' : undefined}
       {...props}
     >
       {children}
diff --git a/apps/sim/app/_shell/zoom-prevention.tsx b/apps/sim/app/_shell/zoom-prevention.tsx
deleted file mode 100644
index 66f0ceb74b..0000000000
--- a/apps/sim/app/_shell/zoom-prevention.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-export function ZoomPrevention() {
-  useEffect(() => {
-    const preventZoom = (e: KeyboardEvent | WheelEvent) => {
-      // Prevent zoom on ctrl/cmd + wheel
-      if (e instanceof WheelEvent && (e.ctrlKey || e.metaKey)) {
-        e.preventDefault()
-      }
-
-      // Prevent zoom on ctrl/cmd + plus/minus/zero
-      if (e instanceof KeyboardEvent && (e.ctrlKey || e.metaKey)) {
-        if (e.key === '=' || e.key === '-' || e.key === '0') {
-          e.preventDefault()
-        }
-      }
-    }
-
-    // Add event listeners
-    document.addEventListener('wheel', preventZoom, { passive: false })
-    document.addEventListener('keydown', preventZoom)
-
-    // Cleanup
-    return () => {
-      document.removeEventListener('wheel', preventZoom)
-      document.removeEventListener('keydown', preventZoom)
-    }
-  }, [])
-
-  return null
-}
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index f67e27e375..3212f37f99 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -8,7 +8,7 @@
  */
 :root {
   --sidebar-width: 232px;
-  --panel-width: 244px;
+  --panel-width: 260px;
   --toolbar-triggers-height: 300px;
   --editor-connections-height: 200px;
   --terminal-height: 196px;
@@ -26,41 +26,6 @@
   height: var(--terminal-height);
 }
 
-/**
- * Workflow component z-index fixes and background colors
- */
-.workflow-container .react-flow__edges {
-  z-index: 0 !important;
-}
-
-.workflow-container .react-flow__node {
-  z-index: 21 !important;
-}
-
-.workflow-container .react-flow__handle {
-  z-index: 30 !important;
-}
-
-.workflow-container .react-flow__edge [data-testid="workflow-edge"] {
-  z-index: 0 !important;
-}
-
-.workflow-container .react-flow__edge-labels {
-  z-index: 60 !important;
-}
-
-.workflow-container,
-.workflow-container .react-flow__pane,
-.workflow-container .react-flow__renderer {
-  background-color: var(--bg) !important;
-}
-
-.dark .workflow-container,
-.dark .workflow-container .react-flow__pane,
-.dark .workflow-container .react-flow__renderer {
-  background-color: var(--bg) !important;
-}
-
 /**
  * Landing loop animation styles (keyframes defined in tailwind.config.ts)
  */
@@ -75,101 +40,93 @@
 }
 
 /**
- * Dark color tokens - single source of truth for all colors (dark-only)
+ * Color tokens - single source of truth for all colors
+ * Light mode: Warm theme
+ * Dark mode: Dark neutral theme
  */
 @layer base {
   :root,
   .light {
-    /* Neutrals (surfaces) - shadcn stone palette */
-    --bg: #ffffff; /* pure white for landing/auth pages */
-    --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 - 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 */
+    --bg: #fcfcf9; /* main canvas - warm off-white */
+    --surface-1: #f9faf7; /* sidebar, panels - very close to bg */
+    --surface-2: #fcfcf9; /* cards, modals - matches bg */
+    --surface-3: #f6f7f4; /* popovers, elevated */
+    --surface-4: #f2f3f0; /* buttons base */
+    --border: #e5e6e1; /* primary border */
+    --surface-5: #ecede8; /* inputs, hover states */
+    --border-1: #d7dcda; /* stronger border - sage gray */
+    --surface-6: #d7dcda; /* scroll thumbs, active states */
+
+    /* Text - warm neutrals */
+    --text-primary: #1a1a1a;
+    --text-secondary: #2d2d2d;
+    --text-tertiary: #525252;
+    --text-muted: #737373;
+    --text-subtle: #8c8c8c;
+    --text-inverse: #f0fff6;
     --text-error: #dc2626;
 
-    /* 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 */
+    /* Borders / dividers */
+    --divider: #e8e9e4;
+    --border-muted: #dfe0db;
+    --border-success: #d7dcda;
 
     /* Brand & state */
     --brand-400: #8e4cfb;
-    --brand-500: #6f3dfa;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c481;
+    --brand-tertiary-2: #32bd7e;
     --warning: #ea580c;
 
     /* Utility */
     --white: #ffffff;
 
-    /* Font weights - lighter for light mode (-20 from dark) */
+    /* Font weights - lighter for light mode */
     --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 */
+    /* RGB for opacity usage */
+    --surface-4-rgb: 242 243 240;
+    --surface-5-rgb: 236 237 232;
+    --surface-7-rgb: 246 247 244;
+    --surface-9-rgb: 232 233 228;
+    --divider-rgb: 232 233 228;
     --white-rgb: 255 255 255;
     --black-rgb: 0 0 0;
 
-    /* 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 */
+    /* Extended palette */
+    --c-0D0D0D: #0d0d0d;
+    --c-1A1A1A: #1a1a1a;
+    --c-1F1F1F: #1f1f1f;
+    --c-2A2A2A: #2a2a2a;
+    --c-383838: #383838;
+    --c-414141: #414141;
     --c-442929: #442929;
     --c-491515: #491515;
-    --c-575757: #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 */
+    --c-575757: #575757;
+    --c-686868: #686868;
+    --c-707070: #707070;
+    --c-727272: #727272;
+    --c-737373: #737373;
+    --c-808080: #808080;
+    --c-858585: #858585;
+    --c-868686: #868686;
+    --c-8D8D8D: #8d8d8d;
+    --c-939393: #939393;
+    --c-A8A8A8: #a8a8a8;
+    --c-B8B8B8: #b8b8b8;
+    --c-C0C0C0: #c0c0c0;
+    --c-CDCDCD: #cdcdcd;
+    --c-D0D0D0: #d0d0d0;
+    --c-D2D2D2: #d2d2d2;
+    --c-E0E0E0: #e0e0e0;
+    --c-E5E5E5: #e5e5e5;
+    --c-E8E8E8: #e8e8e8;
+    --c-EEEEEE: #eeeeee;
+    --c-F0F0F0: #f0f0f0;
+    --c-F4F4F4: #f4f4f4;
+    --c-F5F5F5: #f5f5f5;
 
     /* Blues and cyans */
     --c-00B0B0: #00b0b0;
@@ -203,30 +160,24 @@
     /* 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 */
+    --terminal-status-info-bg: #f5f5f4;
+    --terminal-status-info-border: #a8a29e;
+    --terminal-status-info-color: #57534e;
     --terminal-status-warning-bg: #fef9e7;
     --terminal-status-warning-border: #f5c842;
     --terminal-status-warning-color: #a16207;
   }
   .dark {
-    /* Neutrals (surfaces) */
+    /* Surface */
     --bg: #1b1b1b;
     --surface-1: #1e1e1e;
     --surface-2: #232323;
     --surface-3: #242424;
-    --surface-4: #252525;
-    --surface-5: #272727;
-    --surface-6: #282828;
-    --surface-9: #363636;
-    --surface-11: #3d3d3d;
-    --surface-12: #434343;
-    --surface-13: #454545;
-    --surface-14: #4a4a4a;
-    --surface-15: #5a5a5a;
-    --surface-elevated: #202020;
-    --bg-strong: #0c0c0c;
+    --surface-4: #292929;
+    --border: #2c2c2c;
+    --surface-5: #363636;
+    --border-1: #3d3d3d;
+    --surface-6: #454545;
 
     /* Text */
     --text-primary: #e6e6e6;
@@ -237,9 +188,7 @@
     --text-inverse: #1b1b1b;
     --text-error: #ef4444;
 
-    /* Borders / dividers */
-    --border: #2c2c2c;
-    --border-strong: #303030;
+    /* --border-strong: #303030; */
     --divider: #393939;
     --border-muted: #424242;
     --border-success: #575757;
@@ -248,7 +197,7 @@
     --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --brand-tertiary-2: #33c481;
+    --brand-tertiary-2: #32bd7e;
     --warning: #ff6600;
 
     /* Utility */
@@ -260,7 +209,7 @@
     --font-weight-semibold: 550;
 
     /* RGB for opacity usage */
-    --surface-4-rgb: 37 37 37;
+    --surface-4-rgb: 41 41 41;
     --surface-5-rgb: 39 39 39;
     --surface-7-rgb: 44 44 44;
     --surface-9-rgb: 54 54 54;
@@ -395,34 +344,34 @@
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: var(--surface-12);
+    background-color: var(--surface-6);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--surface-13);
+    background-color: var(--surface-6);
   }
 
   /* Dark Mode Global Scrollbar */
   .dark ::-webkit-scrollbar-track {
-    background: var(--surface-5);
+    background: var(--surface-4);
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: var(--surface-12);
+    background-color: var(--surface-6);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--surface-13);
+    background-color: var(--surface-6);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: var(--surface-12) var(--surface-1);
+    scrollbar-color: var(--surface-6) var(--surface-1);
   }
 
   .dark * {
-    scrollbar-color: var(--surface-12) var(--surface-5);
+    scrollbar-color: var(--surface-6) var(--surface-4);
   }
 
   .copilot-scrollable {
@@ -438,8 +387,8 @@
 }
 
 .panel-tab-active {
-  background-color: var(--white);
-  color: var(--text-inverse);
+  background-color: var(--surface-5);
+  color: var(--text-primary);
   border-color: var(--border-muted);
 }
 
@@ -450,7 +399,7 @@
 }
 
 .panel-tab-inactive:hover {
-  background-color: var(--surface-9);
+  background-color: var(--surface-5);
   color: var(--text-primary);
 }
 
@@ -642,7 +591,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="copilot"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="copilot"] .panel-container [data-tab-button="toolbar"],
@@ -652,7 +601,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="toolbar"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="toolbar"] .panel-container [data-tab-button="copilot"],
@@ -662,7 +611,7 @@ input[type="search"]::-ms-clear {
   }
 
   html[data-panel-active-tab="editor"] .panel-container [data-tab-button="editor"] {
-    background-color: var(--surface-11) !important;
+    background-color: var(--border-1) !important;
     color: var(--text-primary) !important;
   }
   html[data-panel-active-tab="editor"] .panel-container [data-tab-button="copilot"],
diff --git a/apps/sim/app/api/billing/route.ts b/apps/sim/app/api/billing/route.ts
index 33e1559afa..5c8bb42801 100644
--- a/apps/sim/app/api/billing/route.ts
+++ b/apps/sim/app/api/billing/route.ts
@@ -93,6 +93,7 @@ export async function GET(request: NextRequest) {
     const { searchParams } = new URL(request.url)
     const context = searchParams.get('context') || 'user'
     const contextId = searchParams.get('id')
+    const includeOrg = searchParams.get('includeOrg') === 'true'
 
     // Validate context parameter
     if (!['user', 'organization'].includes(context)) {
@@ -115,14 +116,38 @@ export async function GET(request: NextRequest) {
     if (context === 'user') {
       // Get user billing (may include organization if they're part of one)
       billingData = await getSimplifiedBillingSummary(session.user.id, contextId || undefined)
+
       // Attach effective billing blocked status (includes org owner check)
       const billingStatus = await getEffectiveBillingStatus(session.user.id)
+
       billingData = {
         ...billingData,
         billingBlocked: billingStatus.billingBlocked,
         billingBlockedReason: billingStatus.billingBlockedReason,
         blockedByOrgOwner: billingStatus.blockedByOrgOwner,
       }
+
+      // Optionally include organization membership and role
+      if (includeOrg) {
+        const userMembership = await db
+          .select({
+            organizationId: member.organizationId,
+            role: member.role,
+          })
+          .from(member)
+          .where(eq(member.userId, session.user.id))
+          .limit(1)
+
+        if (userMembership.length > 0) {
+          billingData = {
+            ...billingData,
+            organization: {
+              id: userMembership[0].organizationId,
+              role: userMembership[0].role as 'owner' | 'admin' | 'member',
+            },
+          }
+        }
+      }
     } else {
       // Get user role in organization for permission checks first
       const memberRecord = await db
diff --git a/apps/sim/app/chat/components/auth/email/email-auth.tsx b/apps/sim/app/chat/components/auth/email/email-auth.tsx
index 63281b454e..1711a9ce4f 100644
--- a/apps/sim/app/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/chat/components/auth/email/email-auth.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { type KeyboardEvent, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
@@ -299,14 +298,7 @@ export default function EmailAuth({
                     className={`${buttonClass} flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200`}
                     disabled={isSendingOtp}
                   >
-                    {isSendingOtp ? (
-                      <>
-                        <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                        Sending Code...
-                      </>
-                    ) : (
-                      'Continue'
-                    )}
+                    {isSendingOtp ? 'Sending Code...' : 'Continue'}
                   </Button>
                 </form>
               ) : (
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 65a2a30dc3..043300b080 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -162,14 +162,7 @@ export function InviteStatusCard({
               onClick={action.onClick}
               disabled={action.disabled || action.loading}
             >
-              {action.loading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  {action.label}...
-                </>
-              ) : (
-                action.label
-              )}
+              {action.loading ? `${action.label}...` : action.label}
             </Button>
           ))}
         </div>
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index bb40e8156f..da80a06d21 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -11,7 +11,6 @@ import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
-import { ZoomPrevention } from '@/app/_shell/zoom-prevention'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export const viewport: Viewport = {
@@ -85,7 +84,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     var panelWidth = panelState && panelState.panelWidth;
                     var maxPanelWidth = window.innerWidth * 0.4;
 
-                    if (panelWidth >= 244 && panelWidth <= maxPanelWidth) {
+                    if (panelWidth >= 260 && panelWidth <= maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', panelWidth + 'px');
                     } else if (panelWidth > maxPanelWidth) {
                       document.documentElement.style.setProperty('--panel-width', maxPanelWidth + 'px');
@@ -190,10 +189,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider>
             <QueryProvider>
               <SessionProvider>
-                <BrandedLayout>
-                  <ZoomPrevention />
-                  {children}
-                </BrandedLayout>
+                <BrandedLayout>{children}</BrandedLayout>
               </SessionProvider>
             </QueryProvider>
           </ThemeProvider>
diff --git a/apps/sim/app/playground/page.tsx b/apps/sim/app/playground/page.tsx
index 7a3804211a..8e3fb2fa22 100644
--- a/apps/sim/app/playground/page.tsx
+++ b/apps/sim/app/playground/page.tsx
@@ -317,10 +317,10 @@ export default function PlaygroundPage() {
                 </PopoverContent>
               </Popover>
             </VariantRow>
-            <VariantRow label='primary variant'>
-              <Popover variant='primary'>
+            <VariantRow label='secondary variant'>
+              <Popover variant='secondary'>
                 <PopoverTrigger asChild>
-                  <Button variant='primary'>Primary Popover</Button>
+                  <Button variant='secondary'>Secondary Popover</Button>
                 </PopoverTrigger>
                 <PopoverContent>
                   <PopoverItem>Item 1</PopoverItem>
@@ -550,7 +550,7 @@ export default function PlaygroundPage() {
               ].map(({ Icon, name }) => (
                 <Tooltip.Root key={name}>
                   <Tooltip.Trigger asChild>
-                    <div className='flex h-10 w-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-5)]'>
+                    <div className='flex h-10 w-10 cursor-pointer items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] transition-colors hover:bg-[var(--surface-4)]'>
                       <Icon className='h-5 w-5 text-[var(--text-secondary)]' />
                     </div>
                   </Tooltip.Trigger>
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
index 9b8c32a00a..5eead061a8 100644
--- a/apps/sim/app/templates/[id]/template.tsx
+++ b/apps/sim/app/templates/[id]/template.tsx
@@ -732,7 +732,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 <>
                   {!currentUserId ? (
                     <Button
-                      variant='primary'
+                      variant='tertiary'
                       onClick={() => {
                         const callbackUrl =
                           isWorkspaceContext && workspaceId
@@ -748,7 +748,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     </Button>
                   ) : isWorkspaceContext ? (
                     <Button
-                      variant='primary'
+                      variant='tertiary'
                       onClick={handleUseTemplate}
                       disabled={isUsing}
                       className='!text-[#FFFFFF] h-[32px] rounded-[6px] px-[12px] text-[14px]'
@@ -832,7 +832,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 />
               </div>
             ) : (
-              <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-elevated)]'>
+              <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
                 <User className='h-[14px] w-[14px] text-[var(--text-muted)]' />
               </div>
             )}
@@ -1001,7 +1001,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       />
                     </div>
                   ) : (
-                    <div className='flex h-[48px] w-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-elevated)]'>
+                    <div className='flex h-[48px] w-[48px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-2)]'>
                       <User className='h-[24px] w-[24px] text-[var(--text-muted)]' />
                     </div>
                   )}
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
index 35d23e5766..195cb20ecc 100644
--- a/apps/sim/app/templates/components/template-card.tsx
+++ b/apps/sim/app/templates/components/template-card.tsx
@@ -27,15 +27,15 @@ 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='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
+    <div className={cn('h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px]', className)}>
+      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
       <div className='mt-[14px] flex items-center justify-between'>
-        <div className='h-4 w-32 animate-pulse rounded bg-gray-700' />
+        <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-gray-700'
+              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-5)]'
             />
           ))}
         </div>
@@ -43,14 +43,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
 
       <div className='mt-[14px] flex items-center justify-between'>
         <div className='flex items-center gap-[6px]'>
-          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
-          <div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
+          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' />
+          <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
         <div className='flex items-center gap-[6px]'>
-          <div className='h-3 w-3 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-6 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-3 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-6 animate-pulse rounded bg-gray-700' />
+          <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
       </div>
     </div>
@@ -195,7 +195,7 @@ 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-3)] p-[8px]', className)}
     >
       <div
         ref={previewRef}
@@ -213,12 +213,14 @@ function TemplateCardInner({
             lightweight
           />
         ) : (
-          <div className='h-full w-full bg-[#2A2A2A]' />
+          <div className='h-full w-full bg-[var(--surface-4)]' />
         )}
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-white'>{title}</h3>
+        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+          {title}
+        </h3>
 
         <div className='flex flex-shrink-0'>
           {blockTypes.length > 4 ? (
@@ -241,10 +243,12 @@ 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-6)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-white'>+{blockTypes.length - 3}</span>
+                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                  +{blockTypes.length - 3}
+                </span>
               </div>
             </>
           ) : (
@@ -276,24 +280,26 @@ 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]'>
-              <User className='h-[12px] w-[12px] text-[#888888]' />
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-6)]'>
+              <User className='h-[12px] w-[12px] text-[var(--text-muted)]' />
             </div>
           )}
           <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
+            <span className='truncate font-medium text-[12px] text-[var(--text-muted)]'>
+              {author}
+            </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[#888888] text-[12px]'>
+        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-muted)]'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
             onClick={handleStarClick}
             className={cn(
               'h-[12px] w-[12px] cursor-pointer transition-colors',
-              isStarred ? 'fill-yellow-500 text-yellow-500' : 'text-[#888888]',
+              isStarred ? 'fill-yellow-500 text-yellow-500' : 'text-[var(--text-muted)]',
               isStarLoading && 'opacity-50'
             )}
           />
diff --git a/apps/sim/app/templates/templates.tsx b/apps/sim/app/templates/templates.tsx
index 46e5c447ec..945bccc8f9 100644
--- a/apps/sim/app/templates/templates.tsx
+++ b/apps/sim/app/templates/templates.tsx
@@ -149,7 +149,7 @@ export default function Templates({
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index 08f4a360e8..88abb7c6cf 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -294,14 +294,14 @@ function UnsubscribeContent() {
               variant='destructive'
               className='w-full'
             >
-              {processing ? (
-                <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-              ) : data?.currentPreferences.unsubscribeAll ? (
+              {data?.currentPreferences.unsubscribeAll ? (
                 <CheckCircle className='mr-2 h-4 w-4' />
               ) : null}
-              {data?.currentPreferences.unsubscribeAll
-                ? 'Unsubscribed from All Emails'
-                : 'Unsubscribe from All Marketing Emails'}
+              {processing
+                ? 'Unsubscribing...'
+                : data?.currentPreferences.unsubscribeAll
+                  ? 'Unsubscribed from All Emails'
+                  : 'Unsubscribe from All Marketing Emails'}
             </Button>
 
             <div className='text-center text-muted-foreground text-sm'>
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 c1952eed35..14f47d5597 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
@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useState } from 'react'
-import { AlertCircle, Loader2 } from 'lucide-react'
+import { AlertCircle } from 'lucide-react'
 import {
   Button,
   Label,
@@ -157,19 +157,12 @@ export function CreateChunkModal({
                 Cancel
               </Button>
               <Button
-                variant='primary'
+                variant='tertiary'
                 onClick={handleCreateChunk}
                 type='button'
                 disabled={!isFormValid || isCreating}
               >
-                {isCreating ? (
-                  <>
-                    <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                    Creating...
-                  </>
-                ) : (
-                  'Create Chunk'
-                )}
+                {isCreating ? 'Creating...' : 'Create Chunk'}
               </Button>
             </ModalFooter>
           </form>
@@ -181,7 +174,7 @@ export function CreateChunkModal({
         <ModalContent size='sm'>
           <ModalHeader>Discard Changes</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               You have unsaved changes. Are you sure you want to close without saving?
             </p>
           </ModalBody>
@@ -193,12 +186,7 @@ export function CreateChunkModal({
             >
               Keep Editing
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleConfirmDiscard}
-              type='button'
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleConfirmDiscard} type='button'>
               Discard Changes
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
index 96115db673..7fc8da5623 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/delete-chunk-modal/delete-chunk-modal.tsx
@@ -69,7 +69,7 @@ export function DeleteChunkModal({
       <ModalContent size='sm'>
         <ModalHeader>Delete Chunk</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-tertiary)]'>
+          <p className='text-[12px] text-[var(--text-secondary)]'>
             Are you sure you want to delete this chunk?{' '}
             <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>
@@ -78,12 +78,7 @@ export function DeleteChunkModal({
           <Button variant='active' disabled={isDeleting} onClick={onClose}>
             Cancel
           </Button>
-          <Button
-            variant='primary'
-            onClick={handleDeleteChunk}
-            disabled={isDeleting}
-            className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-          >
+          <Button variant='destructive' onClick={handleDeleteChunk} disabled={isDeleting}>
             {isDeleting ? <>Deleting...</> : <>Delete</>}
           </Button>
         </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index 1f40cd20dd..b8335bbb9d 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import {
   Button,
   Combobox,
@@ -575,7 +574,7 @@ export function DocumentTagsModal({
                           Cancel
                         </Button>
                         <Button
-                          variant='primary'
+                          variant='tertiary'
                           onClick={saveDocumentTag}
                           className='flex-1'
                           disabled={!canSaveTag}
@@ -741,7 +740,7 @@ export function DocumentTagsModal({
                       </Button>
                     )}
                     <Button
-                      variant='primary'
+                      variant='tertiary'
                       onClick={saveDocumentTag}
                       className='flex-1'
                       disabled={
@@ -755,14 +754,7 @@ export function DocumentTagsModal({
                           ))
                       }
                     >
-                      {isSavingTag ? (
-                        <>
-                          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                          Creating...
-                        </>
-                      ) : (
-                        'Create Tag'
-                      )}
+                      {isSavingTag ? 'Creating...' : 'Create Tag'}
                     </Button>
                   </div>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx
index 368a5df579..4dbff71ed1 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/edit-chunk-modal/edit-chunk-modal.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { AlertCircle, ChevronDown, ChevronUp, Loader2, X } from 'lucide-react'
+import { AlertCircle, ChevronDown, ChevronUp, X } from 'lucide-react'
 import {
   Button,
   Label,
@@ -275,19 +275,12 @@ export function EditChunkModal({
               </Button>
               {userPermissions.canEdit && (
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handleSaveContent}
                   type='button'
                   disabled={!isFormValid || isSaving || !hasUnsavedChanges || isNavigating}
                 >
-                  {isSaving ? (
-                    <>
-                      <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                      Saving...
-                    </>
-                  ) : (
-                    'Save'
-                  )}
+                  {isSaving ? 'Saving...' : 'Save'}
                 </Button>
               )}
             </ModalFooter>
@@ -300,7 +293,7 @@ export function EditChunkModal({
         <ModalContent size='sm'>
           <ModalHeader>Unsaved Changes</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               You have unsaved changes to this chunk content.
               {pendingNavigation
                 ? ' Do you want to discard your changes and navigate to the next chunk?'
@@ -318,12 +311,7 @@ export function EditChunkModal({
             >
               Keep Editing
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleConfirmDiscard}
-              type='button'
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleConfirmDiscard} type='button'>
               Discard Changes
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 494139db99..1f74ce9db1 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -234,7 +234,7 @@ function DocumentLoading({
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search chunks...'
@@ -242,7 +242,7 @@ function DocumentLoading({
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <Button disabled variant='primary' className='h-[32px] rounded-[6px]'>
+            <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
               Create Chunk
             </Button>
           </div>
@@ -851,7 +851,7 @@ export function Document({
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder={
@@ -882,7 +882,7 @@ export function Document({
                 <Button
                   onClick={() => setIsCreateChunkModalOpen(true)}
                   disabled={documentData?.processingStatus === 'failed' || !userPermissions.canEdit}
-                  variant='primary'
+                  variant='tertiary'
                   className='h-[32px] rounded-[6px]'
                 >
                   Create Chunk
@@ -1092,18 +1092,13 @@ export function Document({
             )}
 
             {documentData?.processingStatus === 'completed' && totalPages > 1 && (
-              <div className='flex items-center justify-center border-t bg-background px-6 py-4'>
+              <div className='flex items-center justify-center border-t bg-background px-4 pt-[10px]'>
                 <div className='flex items-center gap-1'>
-                  <Button
-                    variant='ghost'
-                    onClick={prevPage}
-                    disabled={!hasPrevPage}
-                    className='h-8 w-8 p-0'
-                  >
-                    <ChevronLeft className='h-4 w-4' />
+                  <Button variant='ghost' onClick={prevPage} disabled={!hasPrevPage}>
+                    <ChevronLeft className='h-3.5 w-3.5' />
                   </Button>
 
-                  <div className='mx-4 flex items-center gap-6'>
+                  <div className='mx-[12px] flex items-center gap-[16px]'>
                     {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                       let page: number
                       if (totalPages <= 5) {
@@ -1133,13 +1128,8 @@ export function Document({
                     })}
                   </div>
 
-                  <Button
-                    variant='ghost'
-                    onClick={nextPage}
-                    disabled={!hasNextPage}
-                    className='h-8 w-8 p-0'
-                  >
-                    <ChevronRight className='h-4 w-4' />
+                  <Button variant='ghost' onClick={nextPage} disabled={!hasNextPage}>
+                    <ChevronRight className='h-3.5 w-3.5' />
                   </Button>
                 </div>
               </div>
@@ -1229,7 +1219,7 @@ export function Document({
         <ModalContent size='sm'>
           <ModalHeader>Delete Document</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete "{effectiveDocumentName}"? This will permanently
               delete the document and all {documentData?.chunkCount ?? 0} chunk
               {documentData?.chunkCount === 1 ? '' : 's'} within it.{' '}
@@ -1245,10 +1235,9 @@ export function Document({
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleDeleteDocument}
               disabled={isDeletingDocument}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {isDeletingDocument ? 'Deleting...' : 'Delete Document'}
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index 2c4ce5a3a8..c68b11c99a 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -185,7 +185,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search documents...'
@@ -193,7 +193,7 @@ function KnowledgeBaseLoading({ knowledgeBaseName }: KnowledgeBaseLoadingProps)
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <Button disabled variant='primary' className='h-[32px] rounded-[6px]'>
+            <Button disabled variant='tertiary' className='h-[32px] rounded-[6px]'>
               Add Documents
             </Button>
           </div>
@@ -973,7 +973,7 @@ export function KnowledgeBase({
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search documents...'
@@ -999,7 +999,7 @@ export function KnowledgeBase({
                 <Button
                   onClick={handleAddDocuments}
                   disabled={userPermissions.canEdit !== true}
-                  variant='primary'
+                  variant='tertiary'
                   className='h-[32px] rounded-[6px]'
                 >
                   Add Documents
@@ -1253,18 +1253,17 @@ export function KnowledgeBase({
             )}
 
             {totalPages > 1 && (
-              <div className='flex items-center justify-center border-t bg-background px-6 py-4'>
+              <div className='flex items-center justify-center border-t bg-background px-4 pt-[10px]'>
                 <div className='flex items-center gap-1'>
                   <Button
                     variant='ghost'
                     onClick={prevPage}
                     disabled={!hasPrevPage || isLoadingDocuments}
-                    className='h-8 w-8 p-0'
                   >
-                    <ChevronLeft className='h-4 w-4' />
+                    <ChevronLeft className='h-3.5 w-3.5' />
                   </Button>
 
-                  <div className='mx-4 flex items-center gap-6'>
+                  <div className='mx-[12px] flex items-center gap-[16px]'>
                     {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
                       let page: number
                       if (totalPages <= 5) {
@@ -1298,9 +1297,8 @@ export function KnowledgeBase({
                     variant='ghost'
                     onClick={nextPage}
                     disabled={!hasNextPage || isLoadingDocuments}
-                    className='h-8 w-8 p-0'
                   >
-                    <ChevronRight className='h-4 w-4' />
+                    <ChevronRight className='h-3.5 w-3.5' />
                   </Button>
                 </div>
               </div>
@@ -1315,7 +1313,7 @@ export function KnowledgeBase({
         <ModalContent size='sm'>
           <ModalHeader>Delete Knowledge Base</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete "{knowledgeBaseName}"? This will permanently delete
               the knowledge base and all {pagination.total} document
               {pagination.total === 1 ? '' : 's'} within it.{' '}
@@ -1330,12 +1328,7 @@ export function KnowledgeBase({
             >
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleDeleteKnowledgeBase}
-              disabled={isDeleting}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleDeleteKnowledgeBase} disabled={isDeleting}>
               {isDeleting ? 'Deleting...' : 'Delete Knowledge Base'}
             </Button>
           </ModalFooter>
@@ -1346,7 +1339,7 @@ export function KnowledgeBase({
         <ModalContent size='sm'>
           <ModalHeader>Delete Document</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete "
               {documents.find((doc) => doc.id === documentToDelete)?.filename ?? 'this document'}"?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
@@ -1362,11 +1355,7 @@ export function KnowledgeBase({
             >
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={confirmDeleteDocument}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={confirmDeleteDocument}>
               Delete Document
             </Button>
           </ModalFooter>
@@ -1377,7 +1366,7 @@ export function KnowledgeBase({
         <ModalContent size='sm'>
           <ModalHeader>Delete Documents</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete {selectedDocuments.size} document
               {selectedDocuments.size === 1 ? '' : 's'}?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
@@ -1387,12 +1376,7 @@ export function KnowledgeBase({
             <Button variant='active' onClick={() => setShowBulkDeleteModal(false)}>
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={confirmBulkDelete}
-              disabled={isBulkOperating}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={confirmBulkDelete} disabled={isBulkOperating}>
               {isBulkOperating
                 ? 'Deleting...'
                 : `Delete ${selectedDocuments.size} Document${selectedDocuments.size === 1 ? '' : 's'}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index 03059bfd71..1f54f1c51e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -41,8 +41,8 @@ export function ActionBar({
       transition={{ duration: 0.2 }}
       className={cn('-translate-x-1/2 fixed bottom-6 left-1/2 z-50 transform', className)}
     >
-      <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border-strong)] bg-[var(--surface-1)] p-[8px]'>
-        <span className='px-[4px] text-[13px] text-[var(--text-muted)]'>
+      <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
+        <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>
           {selectedCount} selected
         </span>
 
@@ -54,14 +54,12 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onEnable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
+                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 >
                   <Circle className='h-[12px] w-[12px]' />
                 </Button>
               </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                Enable {disabledCount > 1 ? `${disabledCount} items` : 'item'}
-              </Tooltip.Content>
+              <Tooltip.Content side='top'>Enable</Tooltip.Content>
             </Tooltip.Root>
           )}
 
@@ -72,14 +70,12 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDisable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
+                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 >
                   <CircleOff className='h-[12px] w-[12px]' />
                 </Button>
               </Tooltip.Trigger>
-              <Tooltip.Content side='top'>
-                Disable {enabledCount > 1 ? `${enabledCount} items` : 'item'}
-              </Tooltip.Content>
+              <Tooltip.Content side='top'>Disable</Tooltip.Content>
             </Tooltip.Root>
           )}
 
@@ -90,12 +86,12 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDelete}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
+                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 >
                   <Trash2 className='h-[12px] w-[12px]' />
                 </Button>
               </Tooltip.Trigger>
-              <Tooltip.Content side='top'>Delete items</Tooltip.Content>
+              <Tooltip.Content side='top'>Delete</Tooltip.Content>
             </Tooltip.Root>
           )}
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index e88c79fe9e..3c59565f9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -352,7 +352,7 @@ export function AddDocumentsModal({
                 Cancel
               </Button>
               <Button
-                variant='primary'
+                variant='tertiary'
                 type='button'
                 onClick={handleUpload}
                 disabled={files.length === 0 || isUploading}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 2e78a014bf..6ae97b37de 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import {
   Button,
   Combobox,
@@ -429,7 +428,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         Cancel
                       </Button>
                       <Button
-                        variant='primary'
+                        variant='tertiary'
                         onClick={saveTagDefinition}
                         className='flex-1'
                         disabled={
@@ -438,14 +437,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                           !hasAvailableSlots(createTagForm.fieldType)
                         }
                       >
-                        {isSavingTag ? (
-                          <>
-                            <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                            Creating...
-                          </>
-                        ) : (
-                          'Create Tag'
-                        )}
+                        {isSavingTag ? 'Creating...' : 'Create Tag'}
                       </Button>
                     </div>
                   </div>
@@ -468,7 +460,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
           <ModalHeader>Delete Tag</ModalHeader>
           <ModalBody className='!pb-[16px]'>
             <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
+              <p className='text-[12px] text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
                 remove this tag from {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's' : ''}.{' '}
@@ -494,12 +486,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
             >
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={confirmDeleteTag}
-              disabled={isDeletingTag}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={confirmDeleteTag} disabled={isDeletingTag}>
               {isDeletingTag ? <>Deleting...</> : 'Delete Tag'}
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
index 50ba8d61d7..c643347a55 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
@@ -67,26 +67,26 @@ function formatAbsoluteDate(dateString: string): string {
  */
 export function BaseCardSkeleton() {
   return (
-    <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-elevated)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
+    <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
       <div className='flex items-center justify-between gap-[8px]'>
-        <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-9)]' />
-        <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
+        <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
+        <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
       </div>
 
       <div className='flex flex-1 flex-col gap-[8px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[6px]'>
-            <div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-9)]' />
-            <div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-9)]' />
+            <div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-5)]' />
+            <div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
           </div>
-          <div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
         </div>
 
         <div className='h-0 w-full border-[var(--divider)] border-t' />
 
         <div className='flex h-[36px] flex-col gap-[6px]'>
-          <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
-          <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
+          <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
         </div>
       </div>
     </div>
@@ -122,9 +122,9 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa
 
   return (
     <Link href={href} prefetch={true} className='h-full'>
-      <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-elevated)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
+      <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-4)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-5)]'>
         <div className='flex items-center justify-between gap-[8px]'>
-          <h3 className='min-w-0 flex-1 truncate text-[14px] text-[var(--text-primary)]'>
+          <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
             {title}
           </h3>
           {shortId && <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>}
@@ -139,7 +139,7 @@ export function BaseCard({ id, title, docCount, description, updatedAt }: BaseCa
             {updatedAt && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <span className='text-[12px] text-[var(--text-muted)]'>
+                  <span className='text-[12px] text-[var(--text-tertiary)]'>
                     last updated: {formatRelativeTime(updatedAt)}
                   </span>
                 </Tooltip.Trigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
index 07d6943b84..aa5b7618fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
@@ -1,8 +1,8 @@
 export const filterButtonClass =
-  'w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[var(--white)] font-normal text-sm dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
+  'w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[var(--white)] font-normal text-sm dark:border-[#414141] dark:bg-[var(--surface-2)]'
 
 export const dropdownContentClass =
-  'w-[220px] rounded-lg border-[#E5E5E5] bg-[var(--white)] p-0 shadow-xs dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
+  'w-[220px] rounded-lg border-[#E5E5E5] bg-[var(--white)] p-0 shadow-xs dark:border-[#414141] dark:bg-[var(--surface-2)]'
 
 export const commandListClass = 'overflow-y-auto overflow-x-hidden'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 928fd52954..4434093045 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -388,7 +388,7 @@ export function CreateBaseModal({
                   />
                 </div>
 
-                <div className='space-y-[12px] rounded-[6px] bg-[var(--surface-6)] px-[12px] py-[14px]'>
+                <div className='space-y-[12px] rounded-[6px] bg-[var(--surface-5)] px-[12px] py-[14px]'>
                   <div className='grid grid-cols-2 gap-[12px]'>
                     <div className='flex flex-col gap-[8px]'>
                       <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
@@ -562,7 +562,7 @@ export function CreateBaseModal({
                   Cancel
                 </Button>
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   type='submit'
                   disabled={isSubmitting || !nameValue?.trim()}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
index 757b0731fb..65c677c7a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/knowledge.tsx
@@ -145,7 +145,7 @@ export function Knowledge() {
             </div>
 
             <div className='mt-[14px] flex items-center justify-between'>
-              <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+              <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
                 <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
                 <Input
                   placeholder='Search'
@@ -184,7 +184,7 @@ export function Knowledge() {
                     <Button
                       onClick={() => setIsCreateModalOpen(true)}
                       disabled={userPermissions.canEdit !== true}
-                      variant='primary'
+                      variant='tertiary'
                       className='h-[32px] rounded-[6px]'
                     >
                       Create
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
index d4e4fab887..24a80a8f80 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
@@ -671,7 +671,7 @@ function LineChartComponent({
             const top = Math.min(Math.max(anchorY - 26, padding.top), height - padding.bottom - 18)
             return (
               <div
-                className='pointer-events-none absolute rounded-[8px] border border-[var(--border-strong)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium text-[11px] shadow-lg'
+                className='pointer-events-none absolute rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium text-[11px] shadow-lg'
                 style={{ left, top }}
               >
                 {currentHoverDate && (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
index 38510f497b..b701c78e8a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
@@ -97,7 +97,7 @@ export function StatusBar({
 
       {hoverIndex !== null && segments[hoverIndex] && (
         <div
-          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-[8px] border border-[var(--border-strong)] bg-[var(--surface-1)] px-[8px] py-[6px] text-center text-[11px] shadow-lg ${
+          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] text-center text-[11px] shadow-lg ${
             preferBelow ? '' : '-translate-y-full'
           }`}
           style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
index 4b73e5a32b..0cc5506253 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -66,8 +66,8 @@ export function WorkflowsList({
                 <div
                   key={workflow.workflowId}
                   className={cn(
-                    'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--c-2A2A2A)]',
-                    isSelected && 'bg-[var(--c-2A2A2A)]'
+                    'flex h-[44px] cursor-pointer items-center gap-[16px] px-[24px] hover:bg-[var(--surface-4)]',
+                    isSelected && 'bg-[var(--surface-4)]'
                   )}
                   onClick={() => onToggleWorkflow(workflow.workflowId)}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index ebbb3a88db..5aaafb4652 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -36,7 +36,7 @@ const SKELETON_BAR_HEIGHTS = [
 
 function GraphCardSkeleton({ title }: { title: string }) {
   return (
-    <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-elevated)]'>
+    <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
       <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
         <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
           {title}
@@ -570,7 +570,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
     <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
       <div className='mb-[16px] flex-shrink-0'>
         <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-elevated)]'>
+          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
             <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Runs
@@ -597,7 +597,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-elevated)]'>
+          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
             <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Errors
@@ -624,7 +624,7 @@ export default function Dashboard({ logs, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-elevated)]'>
+          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)]'>
             <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Latency
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/index.ts b/apps/sim/app/workspace/[workspaceId]/logs/components/index.ts
index 3458318613..b59a2eac56 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/index.ts
@@ -4,9 +4,4 @@ export { FileCards } from './log-details/components/file-download'
 export { FrozenCanvas } from './log-details/components/frozen-canvas'
 export { TraceSpans } from './log-details/components/trace-spans'
 export { LogsList } from './logs-list'
-export {
-  AutocompleteSearch,
-  Controls,
-  LogsToolbar,
-  NotificationSettings,
-} from './logs-toolbar'
+export { AutocompleteSearch, LogsToolbar, NotificationSettings } from './logs-toolbar'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
index 39020ea1cd..f422241cbe 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
@@ -277,10 +277,10 @@ function ExpandableRowHeader({
       aria-expanded={hasChildren ? isExpanded : undefined}
       aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
     >
-      <div className='flex items-center gap-[6px]'>
+      <div className='flex items-center gap-[8px]'>
         {hasChildren && (
           <ChevronDown
-            className='h-[10px] w-[10px] text-[var(--text-subtle)] transition-transform group-hover:text-[var(--text-tertiary)]'
+            className='h-[10px] w-[10px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]'
             style={{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
           />
         )}
@@ -418,14 +418,14 @@ function InputOutputSection({
             'font-medium text-[12px] transition-colors',
             isError
               ? 'text-[var(--text-error)]'
-              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )}
         >
           {label}
         </span>
         <ChevronDown
           className={clsx(
-            'h-[10px] w-[10px] text-[var(--text-subtle)] transition-colors transition-transform group-hover:text-[var(--text-tertiary)]'
+            'h-[10px] w-[10px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
           )}
           style={{
             transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
@@ -502,7 +502,7 @@ function NestedBlockItem({
 
       {/* Nested children */}
       {hasChildren && isChildrenExpanded && (
-        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
+        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
           {span.children!.map((child, childIndex) => (
             <NestedBlockItem
               key={child.id || `${spanId}-child-${childIndex}`}
@@ -643,7 +643,7 @@ const TraceSpanItem = memo(function TraceSpanItem({
 
         {/* For workflow blocks, keep children nested within the card (not as separate cards) */}
         {!isFirstSpan && isWorkflowBlock && inlineChildren.length > 0 && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
             {inlineChildren.map((childSpan, index) => (
               <NestedBlockItem
                 key={childSpan.id || `${spanId}-nested-${index}`}
@@ -663,7 +663,7 @@ const TraceSpanItem = memo(function TraceSpanItem({
 
         {/* For non-workflow blocks, render inline children/tool calls */}
         {!isFirstSpan && !isWorkflowBlock && isCardExpanded && (
-          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
             {[...toolCallSpans, ...inlineChildren].map((childSpan, index) => {
               const childId = childSpan.id || `${spanId}-inline-${index}`
               const childIsError = childSpan.status === 'error'
@@ -731,7 +731,7 @@ const TraceSpanItem = memo(function TraceSpanItem({
 
                   {/* Nested children */}
                   {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && (
-                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l-2 pl-[10px]'>
+                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
                       {childSpan.children!.map((nestedChild, nestedIndex) => (
                         <NestedBlockItem
                           key={nestedChild.id || `${childId}-nested-${nestedIndex}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index e87f8aa52b..bb01a9c888 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -270,7 +270,7 @@ export const LogDetails = memo(function LogDetails({
                     </span>
                     <button
                       onClick={() => setIsFrozenCanvasOpen(true)}
-                      className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--c-2A2A2A)]'
+                      className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--surface-4)]'
                     >
                       <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
                         View Snapshot
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
index 65d07744a6..b7a9118c79 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
@@ -36,8 +36,8 @@ const LogRow = memo(
       <div
         ref={isSelected ? selectedRowRef : null}
         className={cn(
-          'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--c-2A2A2A)]',
-          isSelected && 'bg-[var(--c-2A2A2A)]'
+          'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-4)]',
+          isSelected && 'bg-[var(--surface-4)]'
         )}
         onClick={handleClick}
       >
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/controls.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/controls.tsx
deleted file mode 100644
index dc8c05af66..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/controls.tsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import { type ReactNode, useState } from 'react'
-import { ArrowUp, Bell, ChevronDown, Loader2, RefreshCw, Search } from 'lucide-react'
-import {
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverScrollArea,
-  PopoverTrigger,
-  Tooltip,
-} from '@/components/emcn'
-import { MoreHorizontal } from '@/components/emcn/icons'
-import { Input } from '@/components/ui/input'
-import { cn } from '@/lib/core/utils/cn'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
-import { useFilterStore } from '@/stores/logs/filters/store'
-import type { TimeRange } from '@/stores/logs/filters/types'
-
-const FILTER_BUTTON_CLASS =
-  'w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[var(--white)] font-normal text-sm dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
-
-type TimelineProps = {
-  variant?: 'default' | 'header'
-}
-
-/**
- * Timeline component for time range selection.
- * Displays a dropdown with predefined time ranges.
- * @param props - The component props
- * @returns Time range selector dropdown
- */
-function Timeline({ variant = 'default' }: TimelineProps = {}) {
-  const { timeRange, setTimeRange } = useFilterStore()
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false)
-
-  const specificTimeRanges: TimeRange[] = [
-    'Past 30 minutes',
-    'Past hour',
-    'Past 6 hours',
-    'Past 12 hours',
-    'Past 24 hours',
-    'Past 3 days',
-    'Past 7 days',
-    'Past 14 days',
-    'Past 30 days',
-  ]
-
-  const handleTimeRangeSelect = (range: TimeRange) => {
-    setTimeRange(range)
-    setIsPopoverOpen(false)
-  }
-
-  return (
-    <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
-      <PopoverTrigger asChild>
-        <Button variant='outline' className={FILTER_BUTTON_CLASS}>
-          {timeRange}
-          <ChevronDown className='ml-2 h-4 w-4 text-muted-foreground' />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        align={variant === 'header' ? 'end' : 'start'}
-        side='bottom'
-        sideOffset={4}
-        maxHeight={144}
-      >
-        <PopoverScrollArea>
-          <PopoverItem
-            active={timeRange === 'All time'}
-            showCheck
-            onClick={() => handleTimeRangeSelect('All time')}
-          >
-            All time
-          </PopoverItem>
-
-          <div className='my-[2px] h-px bg-[var(--surface-11)]' />
-
-          {specificTimeRanges.map((range) => (
-            <PopoverItem
-              key={range}
-              active={timeRange === range}
-              showCheck
-              onClick={() => handleTimeRangeSelect(range)}
-            >
-              {range}
-            </PopoverItem>
-          ))}
-        </PopoverScrollArea>
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-interface ControlsProps {
-  searchQuery?: string
-  setSearchQuery?: (v: string) => void
-  isRefetching: boolean
-  resetToNow: () => void
-  live: boolean
-  setLive: (v: (prev: boolean) => boolean) => void
-  viewMode: string
-  setViewMode: (mode: 'logs' | 'dashboard') => void
-  searchComponent?: ReactNode
-  showExport?: boolean
-  onExport?: () => void
-  canConfigureNotifications?: boolean
-  onConfigureNotifications?: () => void
-}
-
-export function Controls({
-  searchQuery,
-  setSearchQuery,
-  isRefetching,
-  resetToNow,
-  live,
-  setLive,
-  viewMode,
-  setViewMode,
-  searchComponent,
-  onExport,
-  canConfigureNotifications,
-  onConfigureNotifications,
-}: ControlsProps) {
-  return (
-    <div
-      className={cn(
-        'mb-8 flex flex-col items-stretch justify-between gap-4 sm:flex-row sm:items-start',
-        soehne.className
-      )}
-    >
-      {searchComponent ? (
-        searchComponent
-      ) : (
-        <div className='relative w-full max-w-md'>
-          <Search className='-translate-y-1/2 absolute top-1/2 left-3 h-[18px] w-[18px] text-muted-foreground' />
-          <Input
-            type='text'
-            placeholder='Search workflows...'
-            value={searchQuery}
-            onChange={(e) => setSearchQuery?.(e.target.value)}
-            className='h-9 w-full border-[#E5E5E5] bg-[var(--white)] pr-10 pl-9 dark:border-[#414141] dark:bg-[var(--surface-elevated)]'
-          />
-          {searchQuery && (
-            <button
-              onClick={() => setSearchQuery?.('')}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-muted-foreground hover:text-foreground'
-            >
-              <svg
-                width='14'
-                height='14'
-                viewBox='0 0 16 16'
-                fill='none'
-                stroke='currentColor'
-                strokeWidth='2'
-                strokeLinecap='round'
-              >
-                <path d='M12 4L4 12M4 4l8 8' />
-              </svg>
-            </button>
-          )}
-        </div>
-      )}
-
-      <div className='ml-auto flex flex-shrink-0 items-center gap-3'>
-        {viewMode !== 'dashboard' && (
-          <Popover>
-            <PopoverTrigger asChild>
-              <Button variant='ghost' className='h-9 w-9 p-0 hover:bg-secondary'>
-                <MoreHorizontal className='h-4 w-4' />
-                <span className='sr-only'>More options</span>
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align='end' sideOffset={4}>
-              <PopoverScrollArea>
-                <PopoverItem onClick={onExport}>
-                  <ArrowUp className='h-3 w-3' />
-                  <span>Export as CSV</span>
-                </PopoverItem>
-                <PopoverItem
-                  onClick={canConfigureNotifications ? onConfigureNotifications : undefined}
-                  disabled={!canConfigureNotifications}
-                >
-                  <Bell className='h-3 w-3' />
-                  <span>Configure Notifications</span>
-                </PopoverItem>
-              </PopoverScrollArea>
-            </PopoverContent>
-          </Popover>
-        )}
-
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={resetToNow}
-              className='h-9 w-9 p-0 hover:bg-secondary'
-              disabled={isRefetching}
-            >
-              {isRefetching ? (
-                <Loader2 className='h-4 w-4 animate-spin' />
-              ) : (
-                <RefreshCw className='h-4 w-4' />
-              )}
-              <span className='sr-only'>Refresh</span>
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content>{isRefetching ? 'Refreshing...' : 'Refresh'}</Tooltip.Content>
-        </Tooltip.Root>
-
-        <div className='inline-flex h-9 items-center rounded-[11px] border bg-card p-1 shadow-sm'>
-          <Button
-            variant='ghost'
-            onClick={() => setLive((v) => !v)}
-            className={cn(
-              'h-7 rounded-[8px] px-3 font-normal text-xs',
-              live
-                ? 'bg-[var(--brand-primary-hex)] text-white shadow-[0_0_0_0_var(--brand-primary-hex)] hover:bg-[var(--brand-primary-hover-hex)] hover:text-white hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-            aria-pressed={live}
-          >
-            Live
-          </Button>
-        </div>
-
-        <div className='inline-flex h-9 items-center rounded-[11px] border bg-card p-1 shadow-sm'>
-          <Button
-            variant='ghost'
-            onClick={() => setViewMode('logs')}
-            className={cn(
-              'h-7 rounded-[8px] px-3 font-normal text-xs',
-              (viewMode as string) !== 'dashboard'
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-            aria-pressed={(viewMode as string) !== 'dashboard'}
-          >
-            Logs
-          </Button>
-          <Button
-            variant='ghost'
-            onClick={() => setViewMode('dashboard')}
-            className={cn(
-              'h-7 rounded-[8px] px-3 font-normal text-xs',
-              (viewMode as string) === 'dashboard'
-                ? 'bg-muted text-foreground'
-                : 'text-muted-foreground hover:text-foreground'
-            )}
-            aria-pressed={(viewMode as string) === 'dashboard'}
-          >
-            Dashboard
-          </Button>
-        </div>
-      </div>
-
-      <div className='sm:hidden'>
-        <Timeline />
-      </div>
-    </div>
-  )
-}
-
-export default Controls
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/index.ts b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/index.ts
deleted file mode 100644
index 0c5bf9faf6..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/controls/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Controls, default } from './controls'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 81bedb0393..a5c09c005e 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -39,9 +39,6 @@ import { WorkflowSelector } from './components/workflow-selector'
 
 const logger = createLogger('NotificationSettings')
 
-const PRIMARY_BUTTON_STYLES =
-  '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-
 type NotificationType = 'webhook' | 'email' | 'slack'
 type LogLevel = 'info' | 'error'
 type AlertRule =
@@ -618,10 +615,9 @@ export function NotificationSettings({
 
           <div className='flex flex-shrink-0 items-center gap-[8px]'>
             <Button
-              variant='primary'
+              variant='tertiary'
               onClick={() => handleTest(subscription.id)}
               disabled={testNotification.isPending && testStatus?.id !== subscription.id}
-              className={PRIMARY_BUTTON_STYLES}
             >
               {testStatus?.id === subscription.id
                 ? testStatus.success
@@ -703,7 +699,7 @@ export function NotificationSettings({
           {activeTab === 'email' && (
             <div className='flex flex-col gap-[8px]'>
               <Label className='text-[var(--text-secondary)]'>Email Recipients</Label>
-              <div className='scrollbar-hide flex max-h-32 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)]'>
+              <div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-5)]'>
                 {invalidEmails.map((email, index) => (
                   <EmailTag
                     key={`invalid-${index}`}
@@ -1302,10 +1298,9 @@ export function NotificationSettings({
                   </Button>
                 )}
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handleSave}
                   disabled={createNotification.isPending || updateNotification.isPending}
-                  className={PRIMARY_BUTTON_STYLES}
                 >
                   {createNotification.isPending || updateNotification.isPending
                     ? editingId
@@ -1322,9 +1317,8 @@ export function NotificationSettings({
                   resetForm()
                   setShowForm(true)
                 }}
-                variant='primary'
+                variant='tertiary'
                 disabled={isLoading}
-                className={PRIMARY_BUTTON_STYLES}
               >
                 <Plus className='mr-[6px] h-[13px] w-[13px]' />
                 Add
@@ -1338,7 +1332,7 @@ export function NotificationSettings({
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete Notification</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This will permanently remove the notification and stop all deliveries.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
@@ -1352,10 +1346,9 @@ export function NotificationSettings({
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleDelete}
               disabled={deleteNotification.isPending}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteNotification.isPending ? 'Deleting...' : 'Delete'}
             </Button>
@@ -1379,7 +1372,7 @@ function EmailTag({ email, onRemove, isInvalid }: EmailTagProps) {
         '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)]'
+          : 'border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
index e5ccb326db..2569d6c5fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
@@ -163,7 +163,7 @@ export function AutocompleteSearch({
         }}
       >
         <PopoverAnchor asChild>
-          <div className='relative flex h-[32px] w-full items-center rounded-[8px] bg-[var(--surface-5)]'>
+          <div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-4)]'>
             {/* Search Icon */}
             <Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
 
@@ -266,8 +266,8 @@ export function AutocompleteSearch({
                     data-index={0}
                     className={cn(
                       'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                      'hover:bg-[var(--surface-9)]',
-                      highlightedIndex === 0 && 'bg-[var(--surface-9)]'
+                      'hover:bg-[var(--surface-5)]',
+                      highlightedIndex === 0 && 'bg-[var(--surface-5)]'
                     )}
                     onMouseEnter={() => setHighlightedIndex(0)}
                     onMouseDown={(e) => {
@@ -296,8 +296,8 @@ export function AutocompleteSearch({
                           data-index={index}
                           className={cn(
                             'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                            'hover:bg-[var(--surface-9)]',
-                            isHighlighted && 'bg-[var(--surface-9)]'
+                            'hover:bg-[var(--surface-5)]',
+                            isHighlighted && 'bg-[var(--surface-5)]'
                           )}
                           onMouseEnter={() => setHighlightedIndex(index)}
                           onMouseDown={(e) => {
@@ -339,8 +339,8 @@ export function AutocompleteSearch({
                     data-index={index}
                     className={cn(
                       'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                      'hover:bg-[var(--surface-9)]',
-                      index === highlightedIndex && 'bg-[var(--surface-9)]'
+                      'hover:bg-[var(--surface-5)]',
+                      index === highlightedIndex && 'bg-[var(--surface-5)]'
                     )}
                     onMouseEnter={() => setHighlightedIndex(index)}
                     onMouseDown={(e) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/index.ts b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/index.ts
index a18f450876..2884924bb2 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/index.ts
@@ -1,4 +1,3 @@
-export { Controls } from './components/controls'
 export { NotificationSettings } from './components/notifications'
 export { AutocompleteSearch } from './components/search'
 export { LogsToolbar } from './logs-toolbar'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
index a84c69ac44..9bb8c9778a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
@@ -302,7 +302,7 @@ export function LogsToolbar({
         </div>
         <div className='flex items-center gap-[8px]'>
           {/* More options popover */}
-          <Popover>
+          <Popover size='sm'>
             <PopoverTrigger asChild>
               <Button variant='default' className='h-[32px] w-[32px] rounded-[6px] p-0'>
                 <MoreHorizontal className='h-[14px] w-[14px]' />
@@ -339,27 +339,36 @@ export function LogsToolbar({
 
           {/* Live button */}
           <Button
-            variant={isLive ? 'primary' : 'default'}
+            variant={isLive ? 'tertiary' : 'default'}
             onClick={onToggleLive}
-            className='h-[32px] rounded-[6px] px-[10px]'
+            className={cn(
+              'h-[32px] rounded-[6px] px-[10px]',
+              isLive && 'border border-[var(--brand-tertiary-2)]'
+            )}
           >
             Live
           </Button>
 
           {/* View mode toggle */}
           <div
-            className='flex h-[32px] cursor-pointer items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-elevated)] p-[2px]'
+            className='flex h-[32px] cursor-pointer items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] p-[2px]'
             onClick={() => onViewModeChange(isDashboardView ? 'logs' : 'dashboard')}
           >
             <Button
               variant={!isDashboardView ? 'active' : 'ghost'}
-              className='h-[26px] rounded-[4px] px-[10px]'
+              className={cn(
+                'h-[26px] rounded-[4px] px-[10px]',
+                isDashboardView && 'border border-transparent'
+              )}
             >
               Logs
             </Button>
             <Button
               variant={isDashboardView ? 'active' : 'ghost'}
-              className='h-[26px] rounded-[4px] px-[10px]'
+              className={cn(
+                'h-[26px] rounded-[4px] px-[10px]',
+                !isDashboardView && 'border border-transparent'
+              )}
             >
               Dashboard
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/utils.ts b/apps/sim/app/workspace/[workspaceId]/logs/utils.ts
index 1997309fe5..852b0e9959 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/logs/utils.ts
@@ -5,108 +5,57 @@ import { getIntegrationMetadata } from '@/lib/logs/get-trigger-options'
 import { getBlock } from '@/blocks/registry'
 
 const CORE_TRIGGER_TYPES = ['manual', 'api', 'schedule', 'chat', 'webhook'] as const
-const RUNNING_COLOR = '#22c55e' as const
-const PENDING_COLOR = '#f59e0b' as const
 
+/** Possible execution status values for workflow logs */
 export type LogStatus = 'error' | 'pending' | 'running' | 'info'
 
-/**
- * Checks if a hex color is gray/neutral (low saturation) or too light/dark
- */
-export function isGrayOrNeutral(hex: string): boolean {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-
-  const max = Math.max(r, g, b)
-  const min = Math.min(r, g, b)
-  const lightness = (max + min) / 2 / 255
-
-  const delta = max - min
-  const saturation = delta === 0 ? 0 : delta / (1 - Math.abs(2 * lightness - 1)) / 255
-
-  return saturation < 0.2 || lightness > 0.8 || lightness < 0.25
-}
-
-/**
- * Converts a hex color to a background variant with appropriate opacity
- */
-export function hexToBackground(hex: string): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-  return `rgba(${r}, ${g}, ${b}, 0.2)`
+/** Configuration mapping log status to Badge variant and display label */
+const STATUS_VARIANT_MAP: Record<
+  LogStatus,
+  { variant: React.ComponentProps<typeof Badge>['variant']; label: string }
+> = {
+  error: { variant: 'red', label: 'Error' },
+  pending: { variant: 'amber', label: 'Pending' },
+  running: { variant: 'green', label: 'Running' },
+  info: { variant: 'gray', label: 'Info' },
 }
 
-/**
- * Lightens a hex color to make it more vibrant for text
- */
-export function lightenColor(hex: string, percent = 30): string {
-  const r = Number.parseInt(hex.slice(1, 3), 16)
-  const g = Number.parseInt(hex.slice(3, 5), 16)
-  const b = Number.parseInt(hex.slice(5, 7), 16)
-
-  const newR = Math.min(255, Math.round(r + (255 - r) * (percent / 100)))
-  const newG = Math.min(255, Math.round(g + (255 - g) * (percent / 100)))
-  const newB = Math.min(255, Math.round(b + (255 - b) * (percent / 100)))
-
-  return `#${newR.toString(16).padStart(2, '0')}${newG.toString(16).padStart(2, '0')}${newB.toString(16).padStart(2, '0')}`
+/** Configuration mapping core trigger types to Badge color variants */
+const TRIGGER_VARIANT_MAP: Record<string, React.ComponentProps<typeof Badge>['variant']> = {
+  manual: 'gray-secondary',
+  api: 'blue',
+  schedule: 'teal',
+  chat: 'purple',
+  webhook: 'orange',
 }
 
 interface StatusBadgeProps {
+  /** The execution status to display */
   status: LogStatus
 }
 
 /**
- * Displays a styled badge for a log execution status
+ * Renders a colored badge indicating log execution status.
+ * @param props - Component props containing the status
+ * @returns A Badge with dot indicator and status label
  */
 export const StatusBadge = React.memo(({ status }: StatusBadgeProps) => {
-  const config = {
-    error: {
-      bg: 'var(--terminal-status-error-bg)',
-      color: 'var(--text-error)',
-      label: 'Error',
-    },
-    pending: {
-      bg: hexToBackground(PENDING_COLOR),
-      color: lightenColor(PENDING_COLOR, 65),
-      label: 'Pending',
-    },
-    running: {
-      bg: hexToBackground(RUNNING_COLOR),
-      color: lightenColor(RUNNING_COLOR, 65),
-      label: 'Running',
-    },
-    info: {
-      bg: 'var(--terminal-status-info-bg)',
-      color: 'var(--terminal-status-info-color)',
-      label: 'Info',
-    },
-  }[status]
-
-  return React.createElement(
-    'div',
-    {
-      className:
-        'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      style: { backgroundColor: config.bg, color: config.color },
-    },
-    React.createElement('div', {
-      className: 'h-[6px] w-[6px] rounded-[2px]',
-      style: { backgroundColor: config.color },
-    }),
-    config.label
-  )
+  const config = STATUS_VARIANT_MAP[status]
+  return React.createElement(Badge, { variant: config.variant, dot: true }, config.label)
 })
 
 StatusBadge.displayName = 'StatusBadge'
 
 interface TriggerBadgeProps {
+  /** The trigger type identifier (e.g., 'manual', 'api', or integration block type) */
   trigger: string
 }
 
 /**
- * Displays a styled badge for a workflow trigger type
+ * Renders a colored badge indicating the workflow trigger type.
+ * Core triggers display with their designated colors; integrations show with icons.
+ * @param props - Component props containing the trigger type
+ * @returns A Badge with appropriate styling for the trigger type
  */
 export const TriggerBadge = React.memo(({ trigger }: TriggerBadgeProps) => {
   const metadata = getIntegrationMetadata(trigger)
@@ -114,37 +63,20 @@ export const TriggerBadge = React.memo(({ trigger }: TriggerBadgeProps) => {
   const block = isIntegration ? getBlock(trigger) : null
   const IconComponent = block?.icon
 
-  const isUnknownIntegration = isIntegration && trigger !== 'generic' && !block
-  if (
-    trigger === 'manual' ||
-    trigger === 'generic' ||
-    isUnknownIntegration ||
-    isGrayOrNeutral(metadata.color)
-  ) {
+  const coreVariant = TRIGGER_VARIANT_MAP[trigger]
+  if (coreVariant) {
+    return React.createElement(Badge, { variant: coreVariant }, metadata.label)
+  }
+
+  if (IconComponent) {
     return React.createElement(
       Badge,
-      {
-        variant: 'default',
-        className:
-          'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      },
-      IconComponent && React.createElement(IconComponent, { className: 'h-[12px] w-[12px]' }),
+      { variant: 'gray-secondary', icon: IconComponent },
       metadata.label
     )
   }
 
-  const textColor = lightenColor(metadata.color, 65)
-
-  return React.createElement(
-    'div',
-    {
-      className:
-        'inline-flex items-center gap-[6px] rounded-[6px] px-[9px] py-[2px] font-medium text-[12px]',
-      style: { backgroundColor: hexToBackground(metadata.color), color: textColor },
-    },
-    IconComponent && React.createElement(IconComponent, { className: 'h-[12px] w-[12px]' }),
-    metadata.label
-  )
+  return React.createElement(Badge, { variant: 'gray-secondary' }, metadata.label)
 })
 
 TriggerBadge.displayName = 'TriggerBadge'
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 5199252d00..529dcb6b0b 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -29,19 +29,19 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'h-[268px] w-full rounded-[8px] bg-[var(--surface-elevated)] p-[8px] transition-colors hover:bg-[var(--surface-5)]',
+        'h-[268px] w-full rounded-[8px] bg-[var(--surface-4)] p-[8px] transition-colors hover:bg-[var(--surface-5)]',
         className
       )}
     >
-      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
+      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
 
       <div className='mt-[14px] flex items-center justify-between'>
-        <div className='h-4 w-32 animate-pulse rounded bg-gray-700' />
+        <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-gray-700'
+              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-5)]'
             />
           ))}
         </div>
@@ -49,14 +49,14 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
 
       <div className='mt-[14px] flex items-center justify-between'>
         <div className='flex items-center gap-[6px]'>
-          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-gray-700' />
-          <div className='h-3 w-20 animate-pulse rounded bg-gray-700' />
+          <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' />
+          <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
         <div className='flex items-center gap-[6px]'>
-          <div className='h-3 w-3 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-6 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-3 animate-pulse rounded bg-gray-700' />
-          <div className='h-3 w-6 animate-pulse rounded bg-gray-700' />
+          <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
+          <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
       </div>
     </div>
@@ -202,7 +202,7 @@ function TemplateCardInner({
     <div
       onClick={handleCardClick}
       className={cn(
-        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-elevated)] p-[8px] transition-colors hover:bg-[var(--surface-5)]',
+        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-4)] p-[8px] transition-colors hover:bg-[var(--surface-5)]',
         className
       )}
     >
@@ -223,12 +223,14 @@ function TemplateCardInner({
             cursorStyle='pointer'
           />
         ) : (
-          <div className='h-full w-full bg-[#2A2A2A]' />
+          <div className='h-full w-full bg-[var(--surface-4)]' />
         )}
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-white'>{title}</h3>
+        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+          {title}
+        </h3>
 
         <div className='flex flex-shrink-0'>
           {blockTypes.length > 4 ? (
@@ -251,10 +253,12 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-14)]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-6)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-white'>+{blockTypes.length - 3}</span>
+                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                  +{blockTypes.length - 3}
+                </span>
               </div>
             </>
           ) : (
@@ -286,24 +290,26 @@ 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-[var(--surface-14)]'>
-              <User className='h-[12px] w-[12px] text-[#888888]' />
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-6)]'>
+              <User className='h-[12px] w-[12px] text-[var(--text-tertiary)]' />
             </div>
           )}
           <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[#888888] text-[12px]'>{author}</span>
+            <span className='truncate font-medium text-[12px] text-[var(--text-tertiary)]'>
+              {author}
+            </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[#888888] text-[12px]'>
+        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-tertiary)]'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
             onClick={handleStarClick}
             className={cn(
               'h-[12px] w-[12px] cursor-pointer transition-colors',
-              isStarred ? 'fill-yellow-500 text-yellow-500' : 'text-[#888888]',
+              isStarred ? 'fill-yellow-500 text-yellow-500' : 'text-[var(--text-tertiary)]',
               isStarLoading && 'opacity-50'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
index 54f75ff22d..e21ddf305a 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
@@ -186,7 +186,7 @@ export default function Templates({
           </div>
 
           <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-5)] px-[8px]'>
+            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
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 7c6236b2be..9e872ce45d 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
@@ -29,7 +29,10 @@ import {
   OutputSelect,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components'
 import { useChatFileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
-import { useScrollManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  usePreventZoom,
+  useScrollManagement,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   useFloatBoundarySync,
   useFloatDrag,
@@ -225,6 +228,7 @@ export function Chat() {
   const inputRef = useRef<HTMLInputElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const abortControllerRef = useRef<AbortController | null>(null)
+  const preventZoomRef = usePreventZoom()
 
   // File upload hook
   const {
@@ -784,7 +788,8 @@ export function Chat() {
 
   return (
     <div
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      ref={preventZoomRef}
+      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -938,8 +943,8 @@ export function Chat() {
 
           {/* Combined input container */}
           <div
-            className={`rounded-[4px] border bg-[var(--surface-9)] py-0 pr-[6px] pl-[4px] transition-colors ${
-              isDragOver ? 'border-[var(--brand-secondary)]' : 'border-[var(--surface-11)]'
+            className={`rounded-[4px] border bg-[var(--surface-5)] py-0 pr-[6px] pl-[4px] transition-colors ${
+              isDragOver ? 'border-[var(--brand-secondary)]' : 'border-[var(--border-1)]'
             }`}
           >
             {/* File thumbnails */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
index ae9c5759ee..a669650216 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
@@ -156,7 +156,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
         )}
 
         {formattedContent && !formattedContent.startsWith('Uploaded') && (
-          <div className='rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-9)] px-[8px] py-[6px] transition-all duration-200'>
+          <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-all duration-200'>
             <div className='whitespace-pre-wrap break-words font-medium font-sans text-gray-100 text-sm leading-[1.25rem]'>
               <WordWrap text={formattedContent} />
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index 22ccc5b9ae..e23cc92f0d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -8,6 +8,7 @@ import { Button } from '@/components/emcn'
 import { AgentIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSearchModalStore } from '@/stores/search-modal/store'
 
 const logger = createLogger('WorkflowCommandList')
@@ -58,6 +59,7 @@ export function CommandList() {
   const params = useParams()
   const router = useRouter()
   const { open: openSearchModal } = useSearchModalStore()
+  const preventZoomRef = usePreventZoom()
 
   const workspaceId = params.workspaceId as string | undefined
 
@@ -171,6 +173,7 @@ export function CommandList() {
 
   return (
     <div
+      ref={preventZoomRef}
       className={cn(
         'pointer-events-none absolute inset-0 mb-[50px] flex items-center justify-center'
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
index a7c46d8a0a..23de16a25b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
@@ -3,6 +3,7 @@
 import { memo, useMemo } from 'react'
 import { useViewport } from 'reactflow'
 import { useSession } from '@/lib/auth/auth-client'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 
@@ -23,6 +24,7 @@ const CursorsComponent = () => {
   const viewport = useViewport()
   const session = useSession()
   const currentUserId = session.data?.user?.id
+  const preventZoomRef = usePreventZoom()
 
   const cursors = useMemo<CursorRenderData[]>(() => {
     return presenceUsers
@@ -41,7 +43,7 @@ const CursorsComponent = () => {
   }
 
   return (
-    <div className='pointer-events-none absolute inset-0 z-30 select-none'>
+    <div ref={preventZoomRef} className='pointer-events-none absolute inset-0 z-30 select-none'>
       {cursors.map(({ id, name, cursor, color }) => {
         const x = cursor.x * viewport.zoom + viewport.x
         const y = cursor.y * viewport.zoom + viewport.y
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 570b2edc04..3935fcefeb 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
@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
 import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
@@ -308,6 +309,8 @@ export const DiffControls = memo(function DiffControls() {
     })
   }, [clearPreviewYaml, updatePreviewToolCallState, rejectChanges])
 
+  const preventZoomRef = usePreventZoom()
+
   // Don't show anything if no diff is available or diff is not ready
   if (!hasActiveDiff || !isDiffReady) {
     return null
@@ -315,6 +318,7 @@ export const DiffControls = memo(function DiffControls() {
 
   return (
     <div
+      ref={preventZoomRef}
       className={clsx(
         '-translate-x-1/2 fixed left-1/2 z-30',
         !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
@@ -348,9 +352,9 @@ export const DiffControls = memo(function DiffControls() {
 
         {/* Accept */}
         <Button
-          variant='ghost'
+          variant='tertiary'
           onClick={handleAccept}
-          className='!text-[var(--bg)] h-[30px] rounded-[8px] bg-[var(--brand-tertiary)] px-3'
+          className='h-[30px] rounded-[8px] px-3'
           title='Accept changes'
         >
           Accept
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index fb7f292697..249962aeb6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -3,6 +3,7 @@
 import { Component, type ReactNode, useEffect } from 'react'
 import { createLogger } from '@/lib/logs/console/logger'
 import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 
 const logger = createLogger('ErrorBoundary')
@@ -23,12 +24,13 @@ export function ErrorUI({
   onReset,
   fullScreen = false,
 }: ErrorUIProps) {
+  const preventZoomRef = usePreventZoom()
   const containerClass = fullScreen
     ? 'flex flex-col w-full h-screen bg-[var(--surface-1)]'
     : 'flex flex-col w-full h-full bg-[var(--surface-1)]'
 
   return (
-    <div className={containerClass}>
+    <div ref={preventZoomRef} className={containerClass}>
       {/* Sidebar */}
       <Sidebar />
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/index.ts
index 948fc180cf..123cab3b1a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/index.ts
@@ -4,7 +4,6 @@ export { DiffControls } from './diff-controls/diff-controls'
 export { ErrorBoundary } from './error/index'
 export { Notifications } from './notifications/notifications'
 export { Panel } from './panel/panel'
-export { SkeletonLoading } from './skeleton-loading/skeleton-loading'
 export { SubflowNodeComponent } from './subflows/subflow-node'
 export { Terminal } from './terminal/terminal'
 export { WandPromptBar } from './wand-prompt-bar/wand-prompt-bar'
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 4ca430d854..655cf84f9b 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
@@ -27,6 +27,21 @@ function extractFieldValue(rawValue: unknown): string | undefined {
   return undefined
 }
 
+/**
+ * Extract YouTube video ID from various YouTube URL formats
+ */
+function getYouTubeVideoId(url: string): string | null {
+  const patterns = [
+    /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/,
+    /youtube\.com\/watch\?.*v=([a-zA-Z0-9_-]{11})/,
+  ]
+  for (const pattern of patterns) {
+    const match = url.match(pattern)
+    if (match) return match[1]
+  }
+  return null
+}
+
 /**
  * Compact markdown renderer for note blocks with tight spacing
  */
@@ -36,39 +51,41 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
       remarkPlugins={[remarkGfm]}
       components={{
         p: ({ children }: any) => (
-          <p className='mb-2 break-words text-[#E5E5E5] text-sm'>{children}</p>
+          <p className='mb-1 break-words text-[#E5E5E5] text-sm leading-[1.25rem] last:mb-0'>
+            {children}
+          </p>
         ),
         h1: ({ children }: any) => (
-          <h1 className='mt-3 mb-1 break-words font-semibold text-[#E5E5E5] text-lg first:mt-0'>
+          <h1 className='mt-3 mb-3 break-words font-semibold text-[#E5E5E5] text-lg first:mt-0'>
             {children}
           </h1>
         ),
         h2: ({ children }: any) => (
-          <h2 className='mt-3 mb-1 break-words font-semibold text-[#E5E5E5] text-base first:mt-0'>
+          <h2 className='mt-2.5 mb-2.5 break-words font-semibold text-[#E5E5E5] text-base first:mt-0'>
             {children}
           </h2>
         ),
         h3: ({ children }: any) => (
-          <h3 className='mt-3 mb-1 break-words font-semibold text-[#E5E5E5] text-sm first:mt-0'>
+          <h3 className='mt-2 mb-2 break-words font-semibold text-[#E5E5E5] text-sm first:mt-0'>
             {children}
           </h3>
         ),
         h4: ({ children }: any) => (
-          <h4 className='mt-3 mb-1 break-words font-semibold text-[#E5E5E5] text-xs first:mt-0'>
+          <h4 className='mt-2 mb-2 break-words font-semibold text-[#E5E5E5] text-xs first:mt-0'>
             {children}
           </h4>
         ),
         ul: ({ children }: any) => (
-          <ul className='mt-1 mb-2 list-disc break-words pl-4 text-[#E5E5E5] text-sm'>
+          <ul className='mt-1 mb-1 list-disc space-y-1 break-words pl-6 text-[#E5E5E5] text-sm'>
             {children}
           </ul>
         ),
         ol: ({ children }: any) => (
-          <ol className='mt-1 mb-2 list-decimal break-words pl-4 text-[#E5E5E5] text-sm'>
+          <ol className='mt-1 mb-1 list-decimal space-y-1 break-words pl-6 text-[#E5E5E5] text-sm'>
             {children}
           </ol>
         ),
-        li: ({ children }: any) => <li className='mb-0 break-words'>{children}</li>,
+        li: ({ children }: any) => <li className='break-words'>{children}</li>,
         code: ({ inline, className, children, ...props }: any) => {
           const isInline = inline || !className?.includes('language-')
 
@@ -76,7 +93,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)]'
+                className='whitespace-normal rounded bg-gray-200 px-1 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[var(--border-1)]'
               >
                 {children}
               </code>
@@ -92,22 +109,51 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             </code>
           )
         },
-        a: ({ href, children }: any) => (
-          <a
-            href={href}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='text-[var(--brand-secondary)] underline-offset-2 hover:underline'
-          >
-            {children}
-          </a>
-        ),
+        a: ({ href, children }: any) => {
+          const videoId = href ? getYouTubeVideoId(href) : null
+          if (videoId) {
+            return (
+              <span className='inline'>
+                <a
+                  href={href}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  className='text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+                >
+                  {children}
+                </a>
+                <span className='mt-1.5 block overflow-hidden rounded-md'>
+                  <iframe
+                    src={`https://www.youtube.com/embed/${videoId}`}
+                    title='YouTube video'
+                    allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; web-share'
+                    allowFullScreen
+                    loading='lazy'
+                    referrerPolicy='strict-origin-when-cross-origin'
+                    sandbox='allow-scripts allow-same-origin allow-presentation allow-popups'
+                    className='aspect-video w-full'
+                  />
+                </span>
+              </span>
+            )
+          }
+          return (
+            <a
+              href={href}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+            >
+              {children}
+            </a>
+          )
+        },
         strong: ({ children }: any) => (
           <strong className='break-words font-semibold text-white'>{children}</strong>
         ),
         em: ({ children }: any) => <em className='break-words text-[#B8B8B8]'>{children}</em>,
         blockquote: ({ children }: any) => (
-          <blockquote className='mt-1 mb-2 break-words border-[#F59E0B] border-l-2 pl-3 text-[#B8B8B8] italic'>
+          <blockquote className='my-4 break-words border-[var(--border-1)] border-l-4 py-1 pl-4 text-[#B8B8B8] italic'>
             {children}
           </blockquote>
         ),
@@ -135,28 +181,16 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
     )
   )
 
-  const noteValues = useMemo(() => {
+  const content = useMemo(() => {
     if (data.isPreview && data.subBlockValues) {
-      const extractedPreviewFormat = extractFieldValue(data.subBlockValues.format)
-      const extractedPreviewContent = extractFieldValue(data.subBlockValues.content)
-      return {
-        format: typeof extractedPreviewFormat === 'string' ? extractedPreviewFormat : 'plain',
-        content: typeof extractedPreviewContent === 'string' ? extractedPreviewContent : '',
-      }
-    }
-
-    const format = extractFieldValue(storedValues?.format)
-    const content = extractFieldValue(storedValues?.content)
-
-    return {
-      format: typeof format === 'string' ? format : 'plain',
-      content: typeof content === 'string' ? content : '',
+      const extractedContent = extractFieldValue(data.subBlockValues.content)
+      return typeof extractedContent === 'string' ? extractedContent : ''
     }
+    const storedContent = extractFieldValue(storedValues?.content)
+    return typeof storedContent === 'string' ? storedContent : ''
   }, [data.isPreview, data.subBlockValues, storedValues])
 
-  const content = noteValues.content ?? ''
   const isEmpty = content.trim().length === 0
-  const showMarkdown = noteValues.format === 'markdown' && !isEmpty
 
   const userPermissions = useUserPermissionsContext()
 
@@ -182,7 +216,7 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
     <div className='group relative'>
       <div
         className={cn(
-          'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] bg-[var(--surface-2)]'
+          'relative z-[20] w-[250px] cursor-default select-none rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)]'
         )}
         onClick={handleClick}
       >
@@ -194,15 +228,12 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
             event.stopPropagation()
           }}
         >
-          <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
-            <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
-              style={{ background: isEnabled ? config.bgColor : 'gray' }}
-            >
-              <config.icon className='h-[16px] w-[16px] text-white' />
-            </div>
+          <div className='flex min-w-0 flex-1 items-center'>
             <span
-              className={cn('font-medium text-[16px]', !isEnabled && 'truncate text-[#808080]')}
+              className={cn(
+                'truncate font-medium text-[16px]',
+                !isEnabled && 'text-[var(--text-muted)]'
+              )}
               title={name}
             >
               {name}
@@ -210,14 +241,12 @@ export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlo
           </div>
         </div>
 
-        <div className='relative px-[12px] pt-[6px] pb-[8px]'>
+        <div className='relative p-[8px]'>
           <div className='relative break-words'>
             {isEmpty ? (
-              <p className='text-[#868686] text-sm italic'>Add a note...</p>
-            ) : showMarkdown ? (
-              <NoteMarkdown content={content} />
+              <p className='text-[#868686] text-sm'>Add note...</p>
             ) : (
-              <p className='whitespace-pre-wrap text-[#E5E5E5] text-sm leading-snug'>{content}</p>
+              <NoteMarkdown content={content} />
             )}
           </div>
         </div>
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 410f877507..44f20d96ef 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,17 +1,18 @@
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useMemo } from 'react'
 import clsx from 'clsx'
 import { X } from 'lucide-react'
-import { useParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   type NotificationAction,
   openCopilotWithMessage,
   useNotificationStore,
 } from '@/stores/notifications'
 import { useTerminalStore } from '@/stores/terminal'
+import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const logger = createLogger('Notifications')
 const MAX_VISIBLE_NOTIFICATIONS = 4
@@ -22,15 +23,18 @@ const MAX_VISIBLE_NOTIFICATIONS = 4
  * Shows both global notifications and workflow-specific notifications
  */
 export const Notifications = memo(function Notifications() {
-  const params = useParams()
-  const workflowId = params.workflowId as string
+  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
 
-  const notifications = useNotificationStore((state) =>
-    state.notifications.filter((n) => !n.workflowId || n.workflowId === workflowId)
-  )
+  const allNotifications = useNotificationStore((state) => state.notifications)
   const removeNotification = useNotificationStore((state) => state.removeNotification)
   const clearNotifications = useNotificationStore((state) => state.clearNotifications)
-  const visibleNotifications = notifications.slice(0, MAX_VISIBLE_NOTIFICATIONS)
+
+  const visibleNotifications = useMemo(() => {
+    if (!activeWorkflowId) return []
+    return allNotifications
+      .filter((n) => !n.workflowId || n.workflowId === activeWorkflowId)
+      .slice(0, MAX_VISIBLE_NOTIFICATIONS)
+  }, [allNotifications, activeWorkflowId])
   const isTerminalResizing = useTerminalStore((state) => state.isResizing)
 
   /**
@@ -84,7 +88,7 @@ export const Notifications = memo(function Notifications() {
       {
         id: 'clear-notifications',
         handler: () => {
-          clearNotifications(workflowId)
+          clearNotifications(activeWorkflowId ?? undefined)
         },
         overrides: {
           allowInEditable: false,
@@ -93,12 +97,15 @@ export const Notifications = memo(function Notifications() {
     ])
   )
 
+  const preventZoomRef = usePreventZoom()
+
   if (visibleNotifications.length === 0) {
     return null
   }
 
   return (
     <div
+      ref={preventZoomRef}
       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'
@@ -113,8 +120,8 @@ 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-[var(--surface-2)] transition-transform duration-200 ${
-              index > 0 ? '-mt-[78px]' : ''
+            className={`relative h-[80px] w-[240px] overflow-hidden rounded-[4px] border bg-[var(--surface-2)] transition-transform duration-200 ${
+              index > 0 ? '-mt-[80px]' : ''
             }`}
           >
             <div className='flex h-full flex-col justify-between px-[8px] pt-[6px] pb-[8px]'>
@@ -137,19 +144,17 @@ export const Notifications = memo(function Notifications() {
                 {notification.message}
               </div>
               {hasAction && (
-                <div className='mt-[4px]'>
-                  <Button
-                    variant='active'
-                    onClick={() => executeAction(notification.id, notification.action!)}
-                    className='w-full px-[8px] py-[4px] font-medium text-[12px]'
-                  >
-                    {notification.action!.type === 'copilot'
-                      ? 'Fix in Copilot'
-                      : notification.action!.type === 'refresh'
-                        ? 'Refresh'
-                        : 'Take action'}
-                  </Button>
-                </div>
+                <Button
+                  variant='active'
+                  onClick={() => executeAction(notification.id, notification.action!)}
+                  className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+                >
+                  {notification.action!.type === 'copilot'
+                    ? 'Fix in Copilot'
+                    : notification.action!.type === 'refresh'
+                      ? 'Refresh'
+                      : 'Take action'}
+                </Button>
               )}
             </div>
           </div>
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 982cf8662d..3132b49176 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-base font-season text-[#1f2124] text-sm leading-[1.25rem] last:mb-0 dark:font-[470] dark:text-[#E8E8E8]'>
+        <p className='mb-1 font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] last:mb-0 dark:font-[470]'>
           {children}
         </p>
       ),
 
       // Headings
       h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)] dark:text-[#F0F0F0]'>
+        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)]'>
           {children}
         </h1>
       ),
       h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl dark:text-[#F0F0F0]'>
+        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl'>
           {children}
         </h2>
       ),
       h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg dark:text-[#F0F0F0]'>
+        <h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg'>
           {children}
         </h3>
       ),
       h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base dark:text-[#F0F0F0]'>
+        <h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base'>
           {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-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
           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-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[var(--text-primary)] dark:font-[470]'
           style={{ listStyleType: 'decimal' }}
         >
           {children}
@@ -186,7 +186,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         ordered,
       }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
         <li
-          className='font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
+          className='font-base font-season text-[var(--text-primary)] dark:font-[470]'
           style={{ display: 'list-item' }}
         >
           {children}
@@ -256,14 +256,14 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
               : 'javascript'
 
         return (
-          <div className='my-6 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-strong)] bg-[#1F1F1F] text-sm'>
-            <div className='flex items-center justify-between border-[var(--border-strong)] border-b px-4 py-1.5'>
-              <span className='font-season text-[#A3A3A3] text-xs'>
+          <div className='my-6 w-0 min-w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)] text-sm'>
+            <div className='flex items-center justify-between border-[var(--border-1)] border-b px-4 py-1.5'>
+              <span className='font-season text-[var(--text-muted)] text-xs'>
                 {language === 'code' ? viewerLanguage : language}
               </span>
               <button
                 onClick={handleCopy}
-                className='text-[#A3A3A3] transition-colors hover:text-gray-300'
+                className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-tertiary)]'
                 title='Copy'
               >
                 {showCopySuccess ? (
@@ -293,7 +293,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         if (inline) {
           return (
             <code
-              className='whitespace-normal break-all rounded border border-[var(--border-strong)] bg-[#1F1F1F] px-1 py-0.5 font-mono text-[#eeeeee] text-[0.9em]'
+              className='whitespace-normal break-all rounded border border-[var(--border-1)] bg-[var(--surface-1)] px-1 py-0.5 font-mono text-[0.9em] text-[var(--text-primary)]'
               {...props}
             >
               {children}
@@ -309,35 +309,33 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
 
       // Bold text
       strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <strong className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>
-          {children}
-        </strong>
+        <strong className='font-semibold text-[var(--text-primary)]'>{children}</strong>
       ),
 
       // Bold text (alternative)
       b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <b className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>{children}</b>
+        <b className='font-semibold text-[var(--text-primary)]'>{children}</b>
       ),
 
       // Italic text
       em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <em className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</em>
+        <em className='text-[var(--text-primary)] italic'>{children}</em>
       ),
 
       // Italic text (alternative)
       i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <i className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</i>
+        <i className='text-[var(--text-primary)] italic'>{children}</i>
       ),
 
       // Blockquotes
       blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <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]'>
+        <blockquote className='my-4 border-[var(--border-1)] border-l-4 py-1 pl-4 font-season text-[var(--text-secondary)] italic'>
           {children}
         </blockquote>
       ),
 
       // Horizontal rule
-      hr: () => <hr className='my-8 border-[var(--divider)] border-t dark:border-gray-400/[.07]' />,
+      hr: () => <hr className='my-8 border-[var(--divider)] border-t' />,
 
       // Links
       a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
@@ -349,29 +347,31 @@ 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-[var(--border)] font-season text-sm dark:border-gray-600'>
+          <table className='min-w-full table-auto border border-[var(--border-1)] font-season text-sm'>
             {children}
           </table>
         </div>
       ),
       thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <thead className='bg-[var(--surface-9)] text-left dark:bg-[#2A2A2A]'>{children}</thead>
+        <thead className='bg-[var(--surface-5)] text-left dark:bg-[var(--surface-4)]'>
+          {children}
+        </thead>
       ),
       tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <tbody className='divide-y divide-[var(--border)] dark:divide-gray-600'>{children}</tbody>
+        <tbody className='divide-y divide-[var(--border-1)]'>{children}</tbody>
       ),
       tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-        <tr className='border-[var(--border)] border-b transition-colors hover:bg-[var(--surface-9)] dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
+        <tr className='border-[var(--border-1)] border-b transition-colors hover:bg-[var(--surface-5)] dark:hover:bg-[var(--surface-4)]/60'>
           {children}
         </tr>
       ),
       th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
-        <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]'>
+        <th className='border-[var(--border-1)] border-r px-4 py-2 align-top font-base text-[var(--text-secondary)] last:border-r-0 dark:font-[470]'>
           {children}
         </th>
       ),
       td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
-        <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]'>
+        <td className='break-words border-[var(--border-1)] border-r px-4 py-2 align-top font-base text-[var(--text-primary)] last:border-r-0 dark:font-[470]'>
           {children}
         </td>
       ),
@@ -390,7 +390,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
   )
 
   return (
-    <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]'>
+    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[var(--text-primary)] text-sm leading-[1.25rem] dark:font-[470]'>
       <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 92bc338c8b..a647c50f03 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
@@ -36,8 +36,8 @@ interface ShimmerOverlayTextProps {
 function ShimmerOverlayText({ label, value, active = false }: ShimmerOverlayTextProps) {
   return (
     <span className='relative inline-block'>
-      <span style={{ color: '#B8B8B8' }}>{label}</span>
-      <span style={{ color: 'var(--text-muted)' }}>{value}</span>
+      <span className='text-[var(--text-tertiary)]'>{label}</span>
+      <span className='text-[var(--text-muted)]'>{value}</span>
       {active ? (
         <span
           aria-hidden='true'
@@ -194,14 +194,11 @@ export function ThinkingBlock({
       </button>
 
       {isExpanded && (
-        <div className='ml-1 border-[var(--border-strong)] border-l-2 pl-2'>
-          <pre
-            className='whitespace-pre-wrap font-[470] font-season text-[12px] leading-[1.15rem]'
-            style={{ color: '#B8B8B8' }}
-          >
+        <div className='ml-1 border-[var(--border-1)] border-l-2 pl-2'>
+          <pre className='whitespace-pre-wrap font-[470] font-season text-[12px] text-[var(--text-tertiary)] leading-[1.15rem]'>
             {content}
             {isStreaming && (
-              <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[#B8B8B8]' />
+              <span className='ml-1 inline-block h-2 w-1 animate-pulse bg-[var(--text-tertiary)]' />
             )}
           </pre>
         </div>
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 8a865cfbf0..11b59c369e 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
@@ -108,6 +108,8 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
     const {
       showRestoreConfirmation,
       showCheckpointDiscardModal,
+      isReverting,
+      isProcessingDiscard,
       pendingEditRef,
       setShowCheckpointDiscardModal,
       handleRevertToCheckpoint,
@@ -265,30 +267,35 @@ 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:bg-[var(--surface-9)]'>
-                  <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
+                <div className='mt-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] p-[10px]'>
+                  <p className='mb-[8px] text-[12px] text-[var(--text-primary)]'>
                     Continue from a previous message?
                   </p>
-                  <div className='flex gap-[6px]'>
+                  <div className='flex gap-[8px]'>
                     <Button
                       onClick={handleCancelCheckpointDiscard}
-                      variant='default'
-                      className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
+                      variant='active'
+                      size='sm'
+                      className='flex-1'
+                      disabled={isProcessingDiscard}
                     >
-                      <span>Cancel</span>
-                      <span className='text-[10px] text-[var(--text-muted)]'>(Esc)</span>
+                      Cancel
                     </Button>
                     <Button
                       onClick={handleContinueAndRevert}
-                      variant='outline'
-                      className='flex-1 px-[8px] py-[4px] text-xs'
+                      variant='destructive'
+                      size='sm'
+                      className='flex-1'
+                      disabled={isProcessingDiscard}
                     >
-                      Revert
+                      {isProcessingDiscard ? 'Reverting...' : 'Revert'}
                     </Button>
                     <Button
                       onClick={handleContinueWithoutRevert}
-                      variant='outline'
-                      className='flex-1 px-[8px] py-[4px] text-xs'
+                      variant='tertiary'
+                      size='sm'
+                      className='flex-1'
+                      disabled={isProcessingDiscard}
                     >
                       Continue
                     </Button>
@@ -312,11 +319,11 @@ 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: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(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]'
               >
                 <div
                   ref={messageContentRef}
-                  className={`relative whitespace-pre-wrap break-words px-[2px] py-1 font-medium font-sans text-[#0D0D0D] text-sm leading-[1.25rem] dark:text-gray-100 ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
+                  className={`relative whitespace-pre-wrap break-words px-[2px] py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
                 >
                   {(() => {
                     const text = message.content || ''
@@ -358,7 +365,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Gradient fade when truncated - applies to entire message box */}
                 {!isExpanded && needsExpansion && (
-                  <div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[var(--surface-6)] via-40% via-[var(--surface-6)]/70 to-100% to-transparent group-hover:from-[var(--surface-9)] group-hover:via-[var(--surface-9)]/70 dark:from-[var(--surface-9)] dark:via-[var(--surface-9)]/70 dark:group-hover:from-[var(--surface-11)] dark:group-hover:via-[var(--surface-11)]/70' />
+                  <div className='pointer-events-none absolute right-0 bottom-0 left-0 h-6 bg-gradient-to-t from-0% from-[var(--surface-5)] via-40% via-[var(--surface-5)]/70 to-100% to-transparent group-hover:from-[var(--surface-5)] group-hover:via-[var(--surface-5)]/70 dark:from-[var(--surface-5)] dark:via-[var(--surface-5)]/70 dark:group-hover:from-[var(--border-1)] dark:group-hover:via-[var(--border-1)]/70' />
                 )}
 
                 {/* Abort button when hovering and response is generating (only on last user message) */}
@@ -369,7 +376,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                         e.stopPropagation()
                         abortMessage()
                       }}
-                      className='h-[20px] w-[20px] rounded-full bg-[#C0C0C0] p-0 transition-colors hover:bg-[#D0D0D0] dark:bg-[#C0C0C0] dark:hover:bg-[#D0D0D0]'
+                      className='h-[20px] w-[20px] rounded-full bg-[var(--c-C0C0C0)] p-0 transition-colors hover:bg-[var(--c-D0D0D0)]'
                       title='Stop generation'
                     >
                       <svg
@@ -406,29 +413,30 @@ 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:bg-[var(--surface-9)]'>
-              <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
+            <div className='mt-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] p-[10px]'>
+              <p className='mb-[8px] text-[12px] text-[var(--text-primary)]'>
                 Revert to checkpoint? This will restore your workflow to the state saved at this
                 checkpoint.{' '}
-                <span className='font-medium text-[var(--text-error)]'>
-                  This action cannot be undone.
-                </span>
+                <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
               </p>
-              <div className='flex gap-[6px]'>
+              <div className='flex gap-[8px]'>
                 <Button
                   onClick={handleCancelRevert}
-                  variant='default'
-                  className='flex flex-1 items-center justify-center gap-[6px] px-[8px] py-[4px] text-xs'
+                  variant='active'
+                  size='sm'
+                  className='flex-1'
+                  disabled={isReverting}
                 >
-                  <span>Cancel</span>
-                  <span className='text-[10px] text-[var(--text-muted)]'>(Esc)</span>
+                  Cancel
                 </Button>
                 <Button
                   onClick={handleConfirmRevert}
-                  variant='outline'
-                  className='flex-1 px-[8px] py-[4px] text-xs'
+                  variant='destructive'
+                  size='sm'
+                  className='flex-1'
+                  disabled={isReverting}
                 >
-                  Revert
+                  {isReverting ? 'Reverting...' : 'Revert'}
                 </Button>
               </div>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts
index 07c67775d5..edf0e5eacb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/hooks/use-checkpoint-management.ts
@@ -26,6 +26,8 @@ export function useCheckpointManagement(
 ) {
   const [showRestoreConfirmation, setShowRestoreConfirmation] = useState(false)
   const [showCheckpointDiscardModal, setShowCheckpointDiscardModal] = useState(false)
+  const [isReverting, setIsReverting] = useState(false)
+  const [isProcessingDiscard, setIsProcessingDiscard] = useState(false)
   const pendingEditRef = useRef<{
     message: string
     fileAttachments?: any[]
@@ -48,6 +50,7 @@ export function useCheckpointManagement(
   const handleConfirmRevert = useCallback(async () => {
     if (messageCheckpoints.length > 0) {
       const latestCheckpoint = messageCheckpoints[0]
+      setIsReverting(true)
       try {
         await revertToCheckpoint(latestCheckpoint.id)
 
@@ -100,6 +103,8 @@ export function useCheckpointManagement(
         logger.error('Failed to revert to checkpoint:', error)
         setShowRestoreConfirmation(false)
         onRevertModeChange?.(false)
+      } finally {
+        setIsReverting(false)
       }
     }
   }, [
@@ -125,50 +130,55 @@ export function useCheckpointManagement(
    * Reverts to checkpoint then proceeds with pending edit
    */
   const handleContinueAndRevert = useCallback(async () => {
-    if (messageCheckpoints.length > 0) {
-      const latestCheckpoint = messageCheckpoints[0]
-      try {
-        await revertToCheckpoint(latestCheckpoint.id)
+    setIsProcessingDiscard(true)
+    try {
+      if (messageCheckpoints.length > 0) {
+        const latestCheckpoint = messageCheckpoints[0]
+        try {
+          await revertToCheckpoint(latestCheckpoint.id)
 
-        const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
-        const updatedCheckpoints = {
-          ...currentCheckpoints,
-          [message.id]: messageCheckpoints.slice(1),
-        }
-        useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
+          const { messageCheckpoints: currentCheckpoints } = useCopilotStore.getState()
+          const updatedCheckpoints = {
+            ...currentCheckpoints,
+            [message.id]: messageCheckpoints.slice(1),
+          }
+          useCopilotStore.setState({ messageCheckpoints: updatedCheckpoints })
 
-        logger.info('Reverted to checkpoint before editing message', {
-          messageId: message.id,
-          checkpointId: latestCheckpoint.id,
-        })
-      } catch (error) {
-        logger.error('Failed to revert to checkpoint:', error)
+          logger.info('Reverted to checkpoint before editing message', {
+            messageId: message.id,
+            checkpointId: latestCheckpoint.id,
+          })
+        } catch (error) {
+          logger.error('Failed to revert to checkpoint:', error)
+        }
       }
-    }
 
-    setShowCheckpointDiscardModal(false)
+      setShowCheckpointDiscardModal(false)
 
-    const { sendMessage } = useCopilotStore.getState()
-    if (pendingEditRef.current) {
-      const { message: msg, fileAttachments, contexts } = pendingEditRef.current
-      const editIndex = messages.findIndex((m) => m.id === message.id)
-      if (editIndex !== -1) {
-        const truncatedMessages = messages.slice(0, editIndex)
-        const updatedMessage = {
-          ...message,
-          content: msg,
-          fileAttachments: fileAttachments || message.fileAttachments,
-          contexts: contexts || (message as any).contexts,
-        }
-        useCopilotStore.setState({ messages: [...truncatedMessages, updatedMessage] })
+      const { sendMessage } = useCopilotStore.getState()
+      if (pendingEditRef.current) {
+        const { message: msg, fileAttachments, contexts } = pendingEditRef.current
+        const editIndex = messages.findIndex((m) => m.id === message.id)
+        if (editIndex !== -1) {
+          const truncatedMessages = messages.slice(0, editIndex)
+          const updatedMessage = {
+            ...message,
+            content: msg,
+            fileAttachments: fileAttachments || message.fileAttachments,
+            contexts: contexts || (message as any).contexts,
+          }
+          useCopilotStore.setState({ messages: [...truncatedMessages, updatedMessage] })
 
-        await sendMessage(msg, {
-          fileAttachments: fileAttachments || message.fileAttachments,
-          contexts: contexts || (message as any).contexts,
-          messageId: message.id,
-        })
+          await sendMessage(msg, {
+            fileAttachments: fileAttachments || message.fileAttachments,
+            contexts: contexts || (message as any).contexts,
+            messageId: message.id,
+          })
+        }
+        pendingEditRef.current = null
       }
-      pendingEditRef.current = null
+    } finally {
+      setIsProcessingDiscard(false)
     }
   }, [messageCheckpoints, revertToCheckpoint, message, messages])
 
@@ -252,6 +262,8 @@ export function useCheckpointManagement(
     // State
     showRestoreConfirmation,
     showCheckpointDiscardModal,
+    isReverting,
+    isProcessingDiscard,
     pendingEditRef,
 
     // Operations
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 ec59e62373..e718a0f99f 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)]'
-const SURFACE_9 = 'bg-[var(--surface-9)]'
-const BORDER_STRONG = 'border-[var(--border-strong)]'
+const SURFACE_5 = 'bg-[var(--surface-4)]'
+const SURFACE_9 = 'bg-[var(--surface-5)]'
+const BORDER_STRONG = 'border-[var(--border-1)]'
 
 export interface PlanModeSectionProps {
   /**
@@ -184,7 +184,7 @@ 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]'>
+      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-1)] border-b py-[6px] pr-[2px] pl-[12px]'>
         <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide'>
           Workflow Plan
         </span>
@@ -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)]',
+          'transition-colors hover:bg-[var(--surface-5)]',
           isResizing && SURFACE_9
         )}
         onMouseDown={handleResizeStart}
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 8eafe62168..8c865f1c21 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:bg-[var(--surface-9)]',
+        'w-full rounded-t-[4px] rounded-b-none border-[var(--border-1)] border-x border-t bg-[var(--surface-5)] dark:bg-[var(--surface-5)]',
         className
       )}
     >
@@ -92,7 +92,7 @@ export const TodoList = memo(function TodoList({
 
         <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)]'>
+          <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--border-1)]'>
             <div
               className='h-full bg-[var(--brand-400)] transition-all duration-300 ease-out'
               style={{ width: `${progress}%` }}
@@ -119,8 +119,8 @@ export const TodoList = memo(function TodoList({
             <div
               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'
+                'flex items-start gap-2 px-3 py-1.5 transition-colors hover:bg-[var(--surface-5)]/50 dark:hover:bg-[var(--border-1)]/50',
+                index !== todos.length - 1 && 'border-[var(--border-1)] border-b'
               )}
             >
               {todo.executing ? (
@@ -133,7 +133,7 @@ export const TodoList = memo(function TodoList({
                     '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)]'
-                      : 'border-[#707070]'
+                      : 'border-[var(--text-muted)]'
                   )}
                 >
                   {todo.completed ? <Check className='h-3 w-3 text-white' strokeWidth={3} /> : null}
@@ -143,7 +143,9 @@ 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' : 'text-[var(--white)]'
+                  todo.completed
+                    ? 'text-[var(--text-muted)] line-through'
+                    : 'text-[var(--text-primary)]'
                 )}
               >
                 {todo.content}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index 0c61ea0b8a..3df44fe0ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { Button, Code } from '@/components/emcn'
 import { ClientToolCallState } from '@/lib/copilot/tools/client/base-tool'
 import { getClientTool } from '@/lib/copilot/tools/client/manager'
@@ -141,13 +140,11 @@ function ShimmerOverlayText({
 }: ShimmerOverlayTextProps) {
   const [actionVerb, remainder] = splitActionVerb(text)
 
-  // Special tools: use gradient for entire text
+  // Special tools: use tertiary-2 color for entire text with shimmer
   if (isSpecial) {
     return (
       <span className={`relative inline-block ${className || ''}`}>
-        <span className='bg-gradient-to-r from-[#7c3aed] to-[#9061f9] bg-clip-text text-transparent dark:from-[#B99FFD] dark:to-[#D1BFFF]'>
-          {text}
-        </span>
+        <span className='text-[var(--brand-tertiary-2)]'>{text}</span>
         {active ? (
           <span
             aria-hidden='true'
@@ -157,7 +154,7 @@ function ShimmerOverlayText({
               className='block text-transparent'
               style={{
                 backgroundImage:
-                  'linear-gradient(90deg, rgba(142,76,251,0) 0%, rgba(255,255,255,0.6) 50%, rgba(142,76,251,0) 100%)',
+                  'linear-gradient(90deg, rgba(51,196,129,0) 0%, rgba(255,255,255,0.6) 50%, rgba(51,196,129,0) 100%)',
                 backgroundSize: '200% 100%',
                 backgroundRepeat: 'no-repeat',
                 WebkitBackgroundClip: 'text',
@@ -186,8 +183,12 @@ function ShimmerOverlayText({
     <span className={`relative inline-block ${className || ''}`}>
       {actionVerb ? (
         <>
-          <span className='text-[#1f2124] dark:text-[#B8B8B8]'>{actionVerb}</span>
-          <span className='text-[#6b7075] dark:text-[var(--text-muted)]'>{remainder}</span>
+          <span className='text-[var(--text-primary)] dark:text-[var(--text-tertiary)]'>
+            {actionVerb}
+          </span>
+          <span className='text-[var(--text-secondary)] dark:text-[var(--text-muted)]'>
+            {remainder}
+          </span>
         </>
       ) : (
         <span>{text}</span>
@@ -504,13 +505,11 @@ function RunSkipButtons({
   // Standardized buttons for all interrupt tools: Allow, Always Allow, Skip
   return (
     <div className='mt-[12px] flex gap-[6px]'>
-      <Button onClick={onRun} disabled={isProcessing} variant='primary'>
-        {isProcessing ? <Loader2 className='mr-1 h-3 w-3 animate-spin' /> : null}
-        Allow
+      <Button onClick={onRun} disabled={isProcessing} variant='tertiary'>
+        {isProcessing ? 'Allowing...' : 'Allow'}
       </Button>
       <Button onClick={onAlwaysAllow} disabled={isProcessing} variant='default'>
-        {isProcessing ? <Loader2 className='mr-1 h-3 w-3 animate-spin' /> : null}
-        Always Allow
+        {isProcessing ? 'Allowing...' : 'Always Allow'}
       </Button>
       <Button onClick={onSkip} disabled={isProcessing} variant='default'>
         Skip
@@ -606,11 +605,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       const url = editedParams.url || ''
       const method = (editedParams.method || '').toUpperCase()
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'>
+        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <table className='w-full table-fixed bg-transparent'>
             <thead className='bg-transparent'>
-              <tr className='border-[var(--border-strong)] border-b bg-transparent'>
-                <th className='w-[26%] border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+              <tr className='border-[var(--border-1)] border-b bg-transparent'>
+                <th className='w-[26%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
                   Method
                 </th>
                 <th className='w-[74%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
@@ -619,8 +618,8 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
               </tr>
             </thead>
             <tbody className='bg-transparent'>
-              <tr className='group relative border-[var(--border-strong)] border-t bg-transparent'>
-                <td className='relative w-[26%] border-[var(--border-strong)] border-r bg-transparent p-0'>
+              <tr className='group relative border-[var(--border-1)] border-t bg-transparent'>
+                <td className='relative w-[26%] border-[var(--border-1)] border-r bg-transparent p-0'>
                   <div className='px-[10px] py-[8px]'>
                     <input
                       type='text'
@@ -668,11 +667,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       })
 
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'>
+        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <table className='w-full table-fixed bg-transparent'>
             <thead className='bg-transparent'>
-              <tr className='border-[var(--border-strong)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+              <tr className='border-[var(--border-1)] border-b bg-transparent'>
+                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
                   Name
                 </th>
                 <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
@@ -682,8 +681,8 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             </thead>
             <tbody className='bg-transparent'>
               {normalizedEntries.length === 0 ? (
-                <tr className='border-[var(--border-strong)] border-t bg-transparent'>
-                  <td colSpan={2} className='px-[10px] py-[8px] text-muted-foreground text-xs'>
+                <tr className='border-[var(--border-1)] border-t bg-transparent'>
+                  <td colSpan={2} className='px-[10px] py-[8px] text-[var(--text-muted)] text-xs'>
                     No variables provided
                   </td>
                 </tr>
@@ -691,9 +690,9 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                 normalizedEntries.map(([originalKey, name, value]) => (
                   <tr
                     key={originalKey}
-                    className='group relative border-[var(--border-strong)] border-t bg-transparent'
+                    className='group relative border-[var(--border-1)] border-t bg-transparent'
                   >
-                    <td className='relative w-[36%] border-[var(--border-strong)] border-r bg-transparent p-0'>
+                    <td className='relative w-[36%] border-[var(--border-1)] border-r bg-transparent p-0'>
                       <div className='px-[10px] py-[8px]'>
                         <input
                           type='text'
@@ -720,7 +719,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                             }
                             setEditedParams({ ...editedParams, variables: newVariables })
                           }}
-                          className='w-full bg-transparent font-medium text-foreground text-xs outline-none'
+                          className='w-full bg-transparent font-medium text-[var(--text-primary)] text-xs outline-none'
                         />
                       </div>
                     </td>
@@ -755,7 +754,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                             }
                             setEditedParams({ ...editedParams, variables: newVariables })
                           }}
-                          className='w-full bg-transparent font-mono text-muted-foreground text-xs outline-none focus:text-foreground'
+                          className='w-full bg-transparent font-mono text-[var(--text-muted)] text-xs outline-none focus:text-[var(--text-primary)]'
                         />
                       </div>
                     </td>
@@ -771,24 +770,24 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
     if (toolCall.name === 'set_global_workflow_variables') {
       const ops = Array.isArray(editedParams.operations) ? (editedParams.operations as any[]) : []
       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-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
+          <div className='grid grid-cols-3 gap-0 border-[var(--border-1)] border-b bg-[var(--surface-4)] py-1.5'>
+            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
               Name
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
               Type
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
               Value
             </div>
           </div>
           {ops.length === 0 ? (
-            <div className='px-2 py-2 font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
+            <div className='px-2 py-2 font-[470] font-season text-[var(--text-primary)] text-xs'>
               No operations provided
             </div>
           ) : (
-            <div className='divide-y divide-amber-200 dark:divide-amber-800'>
+            <div className='divide-y divide-[var(--border-1)]'>
               {ops.map((op, idx) => (
                 <div key={idx} className='grid grid-cols-3 gap-0 py-1.5'>
                   <div className='min-w-0 self-start px-2'>
@@ -800,11 +799,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                         newOps[idx] = { ...op, name: e.target.value }
                         setEditedParams({ ...editedParams, operations: newOps })
                       }}
-                      className='w-full bg-transparent font-season text-amber-800 text-xs outline-none dark:text-amber-200'
+                      className='w-full bg-transparent font-season text-[var(--text-primary)] text-xs outline-none'
                     />
                   </div>
                   <div className='self-start px-2'>
-                    <span className='rounded border px-1 py-0.5 font-[470] font-season text-[#1f2124] text-[10px] dark:text-[#E8E8E8]'>
+                    <span className='rounded border border-[var(--border-1)] px-1 py-0.5 font-[470] font-season text-[10px] text-[var(--text-primary)]'>
                       {String(op.type || '')}
                     </span>
                   </div>
@@ -818,10 +817,10 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                           newOps[idx] = { ...op, value: e.target.value }
                           setEditedParams({ ...editedParams, operations: newOps })
                         }}
-                        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'
+                        className='w-full bg-transparent font-[470] font-mono text-[var(--text-muted)] text-xs outline-none focus:text-[var(--text-primary)]'
                       />
                     ) : (
-                      <span className='font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
+                      <span className='font-[470] font-season text-[var(--text-primary)] text-xs'>
                         —
                       </span>
                     )}
@@ -864,11 +863,11 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       const inputEntries = Object.entries(safeInputs)
 
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'>
+        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <table className='w-full table-fixed bg-transparent'>
             <thead className='bg-transparent'>
-              <tr className='border-[var(--border-strong)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+              <tr className='border-[var(--border-1)] border-b bg-transparent'>
+                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
                   Input
                 </th>
                 <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
@@ -878,8 +877,8 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             </thead>
             <tbody className='bg-transparent'>
               {inputEntries.length === 0 ? (
-                <tr className='border-[var(--border-strong)] border-t bg-transparent'>
-                  <td colSpan={2} className='px-[10px] py-[8px] text-muted-foreground text-xs'>
+                <tr className='border-[var(--border-1)] border-t bg-transparent'>
+                  <td colSpan={2} className='px-[10px] py-[8px] text-[var(--text-muted)] text-xs'>
                     No inputs provided
                   </td>
                 </tr>
@@ -887,11 +886,13 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                 inputEntries.map(([key, value]) => (
                   <tr
                     key={key}
-                    className='group relative border-[var(--border-strong)] border-t bg-transparent'
+                    className='group relative border-[var(--border-1)] border-t bg-transparent'
                   >
-                    <td className='relative w-[36%] border-[var(--border-strong)] border-r bg-transparent p-0'>
+                    <td className='relative w-[36%] border-[var(--border-1)] border-r bg-transparent p-0'>
                       <div className='px-[10px] py-[8px]'>
-                        <span className='truncate font-medium text-foreground text-xs'>{key}</span>
+                        <span className='truncate font-medium text-[var(--text-primary)] text-xs'>
+                          {key}
+                        </span>
                       </div>
                     </td>
                     <td className='relative w-[64%] bg-transparent p-0'>
@@ -926,7 +927,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                               setEditedParams({ ...editedParams, [key]: e.target.value })
                             }
                           }}
-                          className='w-full bg-transparent font-mono text-muted-foreground text-xs outline-none focus:text-foreground'
+                          className='w-full bg-transparent font-mono text-[var(--text-muted)] text-xs outline-none focus:text-[var(--text-primary)]'
                         />
                       </div>
                     </td>
@@ -959,7 +960,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             text={displayName}
             active={isLoadingState}
             isSpecial={isSpecial}
-            className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
+            className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
           />
         </div>
         <div className='mt-[8px]'>{renderPendingDetails()}</div>
@@ -1010,7 +1011,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
             text={displayName}
             active={isLoadingState}
             isSpecial={false}
-            className='font-[470] font-season text-[#939393] text-sm dark:text-[#939393]'
+            className='font-[470] font-season text-[var(--text-muted)] text-sm'
           />
         </div>
         {code && (
@@ -1062,7 +1063,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
+          className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
         />
       </div>
       {isExpandableTool && expanded && <div>{renderPendingDetails()}</div>}
@@ -1104,7 +1105,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                 onStateChange?.('background')
               } catch {}
             }}
-            variant='primary'
+            variant='tertiary'
             title='Move to Background'
           >
             Move to Background
@@ -1135,7 +1136,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                 onStateChange?.('background')
               } catch {}
             }}
-            variant='primary'
+            variant='tertiary'
             title='Wake'
           >
             Wake
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
index a240cabc9c..9968487f40 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
@@ -71,7 +71,7 @@ export function AttachedFilesDisplay({
       {files.map((file) => (
         <div
           key={file.id}
-          className='group relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-md border border-border/50 bg-muted/20 transition-all hover:bg-muted/40'
+          className='group relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-md border bg-muted/20 transition-all hover:bg-muted/40'
           title={`${file.name} (${formatFileSize(file.size)})`}
           onClick={() => onFileClick(file)}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-usage-indicator/context-usage-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-usage-indicator/context-usage-indicator.tsx
index 0b245389a1..26b00f89ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-usage-indicator/context-usage-indicator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-usage-indicator/context-usage-indicator.tsx
@@ -29,9 +29,9 @@ export function ContextUsageIndicator({
   const offset = circumference - (percentage / 100) * circumference
 
   const color = useMemo(() => {
-    if (percentage >= 90) return '#dc2626'
-    if (percentage >= 75) return '#d97706'
-    return '#6b7280'
+    if (percentage >= 90) return 'var(--text-error)'
+    if (percentage >= 75) return 'var(--warning)'
+    return 'var(--text-muted)'
   }, [percentage])
 
   const displayPercentage = useMemo(() => {
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 47e455dcb8..5ba95d91fc 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
@@ -29,7 +29,7 @@ function formatTimestamp(iso: string): string {
 /**
  * Common text styling for loading and empty states
  */
-const STATE_TEXT_CLASSES = 'px-[8px] py-[8px] text-[#868686] text-[12px] dark:text-[#868686]'
+const STATE_TEXT_CLASSES = 'px-[8px] py-[8px] text-[12px] text-[var(--text-muted)]'
 
 /**
  * Loading state component for mention folders
@@ -541,9 +541,7 @@ export function MentionMenu({
                         active={index === submenuActiveIndex}
                       >
                         <span className='flex-1 truncate'>{tpl.name}</span>
-                        <span className='text-[#868686] text-[10px] dark:text-[#868686]'>
-                          {tpl.stars}
-                        </span>
+                        <span className='text-[10px] text-[var(--text-muted)]'>{tpl.stars}</span>
                       </PopoverItem>
                     ))
                   )}
@@ -745,9 +743,7 @@ export function MentionMenu({
                   mentionData.templatesList.map((tpl) => (
                     <PopoverItem key={tpl.id} onClick={() => insertTemplateMention(tpl)}>
                       <span className='flex-1 truncate'>{tpl.name}</span>
-                      <span className='text-[#868686] text-[10px] dark:text-[#868686]'>
-                        {tpl.stars}
-                      </span>
+                      <span className='text-[10px] text-[var(--text-muted)]'>{tpl.stars}</span>
                     </PopoverItem>
                   ))
                 )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index e222fec62e..54e12c5df3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -619,7 +619,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         <div
           ref={setInputContainerRef}
           className={cn(
-            'relative w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[6px] transition-colors dark:bg-[var(--surface-9)]',
+            'relative w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[6px] transition-colors dark:bg-[var(--surface-5)]',
             fileAttachments.isDragging && 'ring-[1.75px] ring-[var(--brand-secondary)]'
           )}
           onDragEnter={fileAttachments.handleDragEnter}
@@ -679,7 +679,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
             {/* Highlight overlay - must have identical flow as textarea */}
             <div
               ref={overlayRef}
-              className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-0 bg-transparent px-[2px] py-1 font-medium font-sans text-[#0D0D0D] text-sm leading-[1.25rem] outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:optimizeLegibility] dark:text-gray-100 [&::-webkit-scrollbar]:hidden'
+              className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-0 bg-transparent px-[2px] py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:optimizeLegibility] [&::-webkit-scrollbar]:hidden'
               aria-hidden='true'
             >
               {renderOverlayContent()}
@@ -760,8 +760,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   className={cn(
                     'h-[20px] w-[20px] rounded-full p-0 transition-colors',
                     !isAborting
-                      ? 'bg-[#C0C0C0] hover:bg-[#D0D0D0] dark:bg-[#C0C0C0] dark:hover:bg-[#D0D0D0]'
-                      : 'bg-[#C0C0C0] dark:bg-[#C0C0C0]'
+                      ? 'bg-[var(--c-C0C0C0)] hover:bg-[var(--c-D0D0D0)]'
+                      : 'bg-[var(--c-C0C0C0)]'
                   )}
                   title='Stop generation'
                 >
@@ -787,8 +787,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                   className={cn(
                     'h-[22px] w-[22px] rounded-full p-0 transition-colors',
                     canSubmit
-                      ? 'bg-[#C0C0C0] hover:bg-[#D0D0D0] dark:bg-[#C0C0C0] dark:hover:bg-[#D0D0D0]'
-                      : 'bg-[#C0C0C0] dark:bg-[#C0C0C0]'
+                      ? 'bg-[var(--c-C0C0C0)] hover:bg-[var(--c-D0D0D0)]'
+                      : 'bg-[var(--c-C0C0C0)]'
                   )}
                 >
                   {isLoading ? (
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 b6050a2276..b412e2aa0d 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
@@ -398,7 +398,7 @@ 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 gap-[8px] rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'>
+        <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
           <h2 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
             {currentChat?.title || 'New Chat'}
           </h2>
@@ -418,7 +418,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)]'>
+                  <div className='px-[6px] py-[16px] text-center text-[12px] text-muted-foreground'>
                     No chats yet
                   </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
index 577e37ba70..3f10bf62b6 100644
--- 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
@@ -478,7 +478,7 @@ console.log(limits);`
           code={info.endpoint}
           language='javascript'
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
         />
       </div> */}
 
@@ -534,7 +534,7 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
         />
       </div>
 
@@ -577,7 +577,7 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
         />
       </div>
 
@@ -655,7 +655,7 @@ console.log(limits);`
             code={getAsyncCommand()}
             language={LANGUAGE_SYNTAX[language]}
             wrapText
-            className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+            className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
           />
         </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
index 5abaf5623d..1ea49931ea 100644
--- 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
@@ -394,7 +394,7 @@ export function ChatDeploy({
         <ModalContent size='sm'>
           <ModalHeader>Delete Chat</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               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}"
@@ -410,13 +410,7 @@ export function ChatDeploy({
             >
               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' />}
+            <Button variant='destructive' onClick={handleDelete} disabled={isDeleting}>
               {isDeleting ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
@@ -507,11 +501,11 @@ function IdentifierInput({
       </Label>
       <div
         className={cn(
-          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--surface-11)]',
+          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]',
           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)]'>
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] px-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
           {getDomainPrefix()}
         </div>
         <div className='relative flex-1'>
@@ -787,7 +781,7 @@ function AuthSelector({
           <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 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)]'>
+          <div className='scrollbar-hide flex max-h-32 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-5)]'>
             {invalidEmails.map((email, index) => (
               <EmailTag
                 key={`invalid-${index}`}
@@ -851,7 +845,7 @@ function EmailTag({ email, onRemove, disabled, isInvalid }: EmailTagProps) {
         '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)]'
+          : 'border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
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
index bf8c11d9d0..95a3febc13 100644
--- 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
@@ -257,7 +257,7 @@ export function GeneralDeploy({
         <ModalContent size='sm'>
           <ModalHeader>Load Deployment</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to load{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {versionToLoadInfo?.name || `v${versionToLoad}`}
@@ -272,11 +272,7 @@ export function GeneralDeploy({
             <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)]'
-            >
+            <Button variant='destructive' onClick={confirmLoadDeployment}>
               Load deployment
             </Button>
           </ModalFooter>
@@ -302,7 +298,7 @@ export function GeneralDeploy({
             <Button variant='default' onClick={() => setShowPromoteDialog(false)}>
               Cancel
             </Button>
-            <Button variant='primary' onClick={confirmPromoteToLive}>
+            <Button variant='tertiary' onClick={confirmPromoteToLive}>
               Promote to live
             </Button>
           </ModalFooter>
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
index c7ae555050..a6fe480330 100644
--- 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
@@ -1,7 +1,6 @@
 'use client'
 
-import React, { useEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
+import { forwardRef, useEffect, useRef, useState } from 'react'
 import {
   Button,
   Combobox,
@@ -364,7 +363,7 @@ export function TemplateDeploy({
               </p>
               <Button
                 type='button'
-                variant='primary'
+                variant='tertiary'
                 onClick={() => {
                   try {
                     const event = new CustomEvent('open-settings', {
@@ -425,7 +424,7 @@ export function TemplateDeploy({
         <ModalContent size='sm'>
           <ModalHeader>Delete Template</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete this template?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
@@ -435,19 +434,11 @@ export function TemplateDeploy({
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               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'
-              )}
+              {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
         </ModalContent>
@@ -463,7 +454,7 @@ export function TemplateDeploy({
  * Hidden container for OG image capture.
  * Lazy-rendered only when capturing - gets workflow state from store on mount.
  */
-const OGCaptureContainer = React.forwardRef<HTMLDivElement>((_, ref) => {
+const OGCaptureContainer = forwardRef<HTMLDivElement>((_, ref) => {
   const blocks = useWorkflowStore((state) => state.blocks)
   const edges = useWorkflowStore((state) => state.edges)
   const loops = useWorkflowStore((state) => state.loops)
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 84b3996fbb..6d65140631 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,8 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import clsx from 'clsx'
 import {
+  Badge,
   Button,
   Modal,
   ModalBody,
@@ -630,7 +630,7 @@ export function DeployModal({
                 {chatExists && (
                   <Button
                     type='button'
-                    variant='default'
+                    variant='destructive'
                     onClick={handleChatDelete}
                     disabled={chatSubmitting}
                   >
@@ -639,7 +639,7 @@ export function DeployModal({
                 )}
                 <Button
                   type='button'
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handleChatFormSubmit}
                   disabled={chatSubmitting || !isChatFormValid}
                 >
@@ -669,7 +669,7 @@ export function DeployModal({
                 {hasExistingTemplate && (
                   <Button
                     type='button'
-                    variant='default'
+                    variant='destructive'
                     onClick={handleTemplateDelete}
                     disabled={templateSubmitting}
                   >
@@ -678,7 +678,7 @@ export function DeployModal({
                 )}
                 <Button
                   type='button'
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handleTemplateFormSubmit}
                   disabled={templateSubmitting || !templateFormValid}
                 >
@@ -700,7 +700,7 @@ export function DeployModal({
         <ModalContent size='sm'>
           <ModalHeader>Undeploy API</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               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.
@@ -715,12 +715,7 @@ export function DeployModal({
             >
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleUndeploy}
-              disabled={isUndeploying}
-              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
-            >
+            <Button variant='destructive' onClick={handleUndeploy} disabled={isUndeploying}>
               {isUndeploying ? 'Undeploying...' : 'Undeploy'}
             </Button>
           </ModalFooter>
@@ -736,29 +731,10 @@ interface StatusBadgeProps {
 
 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>
+    <Badge variant={isWarning ? 'amber' : 'green'} size='lg' dot>
+      {label}
+    </Badge>
   )
 }
 
@@ -778,35 +754,10 @@ function TemplateStatusBadge({ status, views, stars }: TemplateStatusBadgeProps)
       : 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>
+    <Badge variant={isPending ? 'amber' : 'green'} size='lg' dot>
+      {label}
+      {statsText && <span>• {statsText}</span>}
+    </Badge>
   )
 }
 
@@ -832,8 +783,8 @@ function GeneralFooter({
   if (!isDeployed) {
     return (
       <ModalFooter>
-        <Button variant='primary' onClick={onDeploy} disabled={isSubmitting}>
-          {isSubmitting ? 'Deploying...' : 'Deploy API'}
+        <Button variant='tertiary' onClick={onDeploy} disabled={isSubmitting}>
+          {isSubmitting ? 'Deploying...' : 'Deploy'}
         </Button>
       </ModalFooter>
     )
@@ -847,7 +798,7 @@ function GeneralFooter({
           {isUndeploying ? 'Undeploying...' : 'Undeploy'}
         </Button>
         {needsRedeployment && (
-          <Button variant='primary' onClick={onRedeploy} disabled={isSubmitting || isUndeploying}>
+          <Button variant='tertiary' onClick={onRedeploy} disabled={isSubmitting || isUndeploying}>
             {isSubmitting ? 'Updating...' : 'Update'}
           </Button>
         )}
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 7c2253351b..2d842ec541 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
@@ -2,7 +2,7 @@
 
 import { useCallback, useState } from 'react'
 import { Loader2 } from 'lucide-react'
-import { Button, Rocket, Tooltip } from '@/components/emcn'
+import { Button, Tooltip } from '@/components/emcn'
 import { DeployModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal'
 import {
   useChangeDetection,
@@ -113,17 +113,15 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
         <Tooltip.Trigger asChild>
           <span>
             <Button
-              className='h-[32px] gap-[8px] px-[10px]'
-              variant='active'
+              className='h-[30px] gap-[6px] px-[10px]'
+              variant={
+                isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
+              }
               onClick={onDeployClick}
-              disabled={isDisabled}
+              disabled={isRegistryLoading || isDisabled}
             >
-              {isDeploying ? (
-                <Loader2 className='h-[13px] w-[13px] animate-spin' />
-              ) : (
-                <Rocket className='h-[13px] w-[13px]' />
-              )}
-              {changeDetected ? 'Update' : isDeployed ? 'Active' : 'Deploy'}
+              {isDeploying && <Loader2 className='h-[13px] w-[13px] animate-spin' />}
+              {changeDetected ? 'Update' : isDeployed ? 'Live' : 'Deploy'}
             </Button>
           </span>
         </Tooltip.Trigger>
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 44f881c62e..d6e315e1f7 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
@@ -29,17 +29,6 @@ interface FieldItemProps {
   onToggleExpand?: (path: string) => void
 }
 
-/**
- * Tree layout constants shared with parent component
- */
-export const TREE_SPACING = {
-  INDENT_PER_LEVEL: 20,
-  BASE_INDENT: 20,
-  VERTICAL_LINE_LEFT_OFFSET: 4,
-  ITEM_GAP: 0,
-  ITEM_HEIGHT: 25,
-} as const
-
 /**
  * Individual field item component with drag functionality
  */
@@ -52,8 +41,6 @@ export function FieldItem({
   isExpanded,
   onToggleExpand,
 }: FieldItemProps) {
-  const indent = TREE_SPACING.BASE_INDENT + level * TREE_SPACING.INDENT_PER_LEVEL
-
   const handleDragStart = useCallback(
     (e: React.DragEvent) => {
       const normalizedBlockName = connection.name.replace(/\s+/g, '').toLowerCase()
@@ -91,25 +78,26 @@ 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',
+        'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)] active:cursor-grabbing',
         hasChildren && 'cursor-pointer'
       )}
-      style={{ marginLeft: `${indent}px` }}
     >
       <span
         className={clsx(
-          'flex-1 truncate font-medium',
-          'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+          'min-w-0 flex-1 truncate font-medium',
+          'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
         )}
       >
         {field.name}
       </span>
-      <Badge className='rounded-[2px] px-[4px] py-[1px] font-mono text-[10px]'>{field.type}</Badge>
+      <Badge className='flex-shrink-0 rounded-[4px] px-[6px] py-[1px] font-mono text-[11px]'>
+        {field.type}
+      </Badge>
       {hasChildren && (
         <ChevronDown
           className={clsx(
-            'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
+            'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+            'text-[var(--text-secondary)] 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 61a8cd91a7..556975bced 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
@@ -8,7 +8,6 @@ import { createLogger } from '@/lib/logs/console/logger'
 import {
   FieldItem,
   type SchemaField,
-  TREE_SPACING,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item'
 import type { ConnectedBlock } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/hooks/use-block-connections'
 import { useBlockOutputFields } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-output-fields'
@@ -24,43 +23,6 @@ interface ConnectionBlocksProps {
   currentBlockId: string
 }
 
-const TREE_STYLES = {
-  LINE_COLOR: 'var(--border)',
-  LINE_OFFSET: 4,
-} as const
-
-/**
- * Calculates total height of visible nested fields recursively
- */
-const calculateFieldsHeight = (
-  fields: SchemaField[] | undefined,
-  parentPath: string,
-  connectionId: string,
-  isExpanded: (connectionId: string, path: string) => boolean
-): number => {
-  if (!fields || fields.length === 0) return 0
-
-  let totalHeight = 0
-
-  fields.forEach((field, index) => {
-    const fieldPath = parentPath ? `${parentPath}.${field.name}` : field.name
-    const expanded = isExpanded(connectionId, fieldPath)
-
-    totalHeight += TREE_SPACING.ITEM_HEIGHT
-
-    if (index < fields.length - 1) {
-      totalHeight += TREE_SPACING.ITEM_GAP
-    }
-
-    if (expanded && field.children && field.children.length > 0) {
-      totalHeight += TREE_SPACING.ITEM_GAP
-      totalHeight += calculateFieldsHeight(field.children, fieldPath, connectionId, isExpanded)
-    }
-  })
-
-  return totalHeight
-}
-
 interface ConnectionItemProps {
   connection: ConnectedBlock
   isExpanded: boolean
@@ -123,13 +85,13 @@ 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',
+          'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)] active:cursor-grabbing',
           hasFields && 'cursor-pointer'
         )}
         onClick={() => hasFields && onToggleExpand(connection.id)}
       >
         <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: bgColor }}
         >
           {Icon && (
@@ -137,7 +99,7 @@ function ConnectionItem({
               className={clsx(
                 'text-white transition-transform duration-200',
                 hasFields && 'group-hover:scale-110',
-                '!h-[10px] !w-[10px]'
+                '!h-[9px] !w-[9px]'
               )}
             />
           )}
@@ -145,7 +107,7 @@ function ConnectionItem({
         <span
           className={clsx(
             'truncate font-medium',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
+            'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'
           )}
         >
           {connection.name}
@@ -153,8 +115,8 @@ function ConnectionItem({
         {hasFields && (
           <ChevronDown
             className={clsx(
-              'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-              'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
+              'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+              'text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]',
               isExpanded && 'rotate-180'
             )}
           />
@@ -162,17 +124,8 @@ function ConnectionItem({
       </div>
 
       {isExpanded && hasFields && (
-        <div className='relative'>
-          <div
-            className='pointer-events-none absolute'
-            style={{
-              left: `${TREE_SPACING.VERTICAL_LINE_LEFT_OFFSET}px`,
-              top: `${TREE_STYLES.LINE_OFFSET}px`,
-              width: '1px',
-              height: `${calculateFieldsHeight(fields, '', connection.id, isFieldExpanded) - TREE_STYLES.LINE_OFFSET * 2}px`,
-              background: TREE_STYLES.LINE_COLOR,
-            }}
-          />
+        <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
+          <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
           {renderFieldTree(fields, '', 0, connection)}
         </div>
       )}
@@ -311,18 +264,9 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
               onToggleExpand={(p) => toggleFieldExpansion(connection.id, p)}
             />
             {hasChildren && expanded && (
-              <div className='relative'>
-                <div
-                  className='pointer-events-none absolute'
-                  style={{
-                    left: `${TREE_SPACING.BASE_INDENT + level * TREE_SPACING.INDENT_PER_LEVEL + TREE_SPACING.VERTICAL_LINE_LEFT_OFFSET}px`,
-                    top: `${TREE_STYLES.LINE_OFFSET}px`,
-                    width: '1px',
-                    height: `${calculateFieldsHeight(field.children, fieldPath, connection.id, isFieldExpanded) - TREE_STYLES.LINE_OFFSET * 2}px`,
-                    background: TREE_STYLES.LINE_COLOR,
-                  }}
-                />
-                <div>{renderFieldTree(field.children!, fieldPath, level + 1, connection)}</div>
+              <div className='relative mt-[2px] ml-[6px] space-y-[2px] pl-[10px]'>
+                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+                {renderFieldTree(field.children!, fieldPath, level + 1, connection)}
               </div>
             )}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index 657011e3d5..839a3334ff 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -285,6 +285,7 @@ export function ComboBox({
             overlayContent={overlayContent}
             inputRef={ref as React.RefObject<HTMLInputElement>}
             filterOptions
+            searchable={config.searchable}
             className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-[28px]')}
             inputProps={{
               onDrop: onDrop as (e: React.DragEvent<HTMLInputElement>) => void,
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 7dd19a0497..af1eb7acb7 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,14 +709,14 @@ export function ConditionInput({
       {conditionalBlocks.map((block, index) => (
         <div
           key={block.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
         >
           <div
             className={cn(
               'flex items-center justify-between overflow-hidden bg-transparent px-[10px] py-[5px]',
               block.title === 'else'
                 ? 'rounded-[4px] border-0'
-                : 'rounded-t-[4px] border-[var(--border-strong)] border-b'
+                : 'rounded-t-[4px] border-[var(--border-1)] border-b'
             )}
           >
             <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
index 2744a2b23b..23f43e0d1d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -26,15 +26,15 @@ export interface OAuthRequiredModalProps {
 }
 
 const SCOPE_DESCRIPTIONS: Record<string, string> = {
-  'https://www.googleapis.com/auth/gmail.send': 'Send emails on your behalf',
-  'https://www.googleapis.com/auth/gmail.labels': 'View and manage your email labels',
-  'https://www.googleapis.com/auth/gmail.modify': 'View and manage your email messages',
-  'https://www.googleapis.com/auth/drive.file': 'View and manage your Google Drive files',
-  'https://www.googleapis.com/auth/drive': 'Full access to all your Google Drive files',
-  'https://www.googleapis.com/auth/calendar': 'View and manage your calendar',
-  'https://www.googleapis.com/auth/userinfo.email': 'View your email address',
-  'https://www.googleapis.com/auth/userinfo.profile': 'View your basic profile info',
-  'https://www.googleapis.com/auth/forms.responses.readonly': 'View responses to your Google Forms',
+  'https://www.googleapis.com/auth/gmail.send': 'Send emails',
+  'https://www.googleapis.com/auth/gmail.labels': 'View and manage email labels',
+  'https://www.googleapis.com/auth/gmail.modify': 'View and manage email messages',
+  'https://www.googleapis.com/auth/drive.file': 'View and manage Google Drive files',
+  'https://www.googleapis.com/auth/drive': 'Access all Google Drive files',
+  'https://www.googleapis.com/auth/calendar': 'View and manage calendar',
+  'https://www.googleapis.com/auth/userinfo.email': 'View email address',
+  'https://www.googleapis.com/auth/userinfo.profile': 'View basic profile info',
+  'https://www.googleapis.com/auth/forms.responses.readonly': 'View responses to Google Forms',
   'https://www.googleapis.com/auth/ediscovery': 'Access Google Vault for eDiscovery',
   'https://www.googleapis.com/auth/devstorage.read_only': 'Read files from Google Cloud Storage',
   'https://www.googleapis.com/auth/admin.directory.group': 'Manage Google Workspace groups',
@@ -66,50 +66,50 @@ const SCOPE_DESCRIPTIONS: Record<string, string> = {
   'write:label:confluence': 'Add and remove labels',
   'search:confluence': 'Search Confluence content',
   'readonly:content.attachment:confluence': 'View attachments',
-  'read:me': 'Read your profile information',
-  'database.read': 'Read your database',
-  'database.write': 'Write to your database',
-  'projects.read': 'Read your projects',
-  offline_access: 'Access your account when you are not using the application',
-  repo: 'Access your repositories',
+  'read:me': 'Read profile information',
+  'database.read': 'Read database',
+  'database.write': 'Write to database',
+  'projects.read': 'Read projects',
+  offline_access: 'Access account when not using the application',
+  repo: 'Access repositories',
   workflow: 'Manage repository workflows',
-  'read:user': 'Read your public user information',
-  'user:email': 'Access your email address',
-  'tweet.read': 'Read your tweets and timeline',
-  'tweet.write': 'Post tweets on your behalf',
-  'users.read': 'Read your profile information',
-  'offline.access': 'Access your account when you are not using the application',
-  'data.records:read': 'Read your records',
-  'data.records:write': 'Write to your records',
-  'webhook:manage': 'Manage your webhooks',
-  'page.read': 'Read your Notion pages',
-  'page.write': 'Write to your Notion pages',
-  'workspace.content': 'Read your Notion content',
-  'workspace.name': 'Read your Notion workspace name',
-  'workspace.read': 'Read your Notion workspace',
-  'workspace.write': 'Write to your Notion workspace',
-  'user.email:read': 'Read your email address',
-  'read:jira-user': 'Read your Jira user',
-  'read:jira-work': 'Read your Jira work',
-  'write:jira-work': 'Write to your Jira work',
+  'read:user': 'Read public user information',
+  'user:email': 'Access email address',
+  'tweet.read': 'Read tweets and timeline',
+  'tweet.write': 'Post tweets',
+  'users.read': 'Read profile information',
+  'offline.access': 'Access account when not using the application',
+  'data.records:read': 'Read records',
+  'data.records:write': 'Write to records',
+  'webhook:manage': 'Manage webhooks',
+  'page.read': 'Read Notion pages',
+  'page.write': 'Write to Notion pages',
+  'workspace.content': 'Read Notion content',
+  'workspace.name': 'Read Notion workspace name',
+  'workspace.read': 'Read Notion workspace',
+  'workspace.write': 'Write to Notion workspace',
+  'user.email:read': 'Read email address',
+  'read:jira-user': 'Read Jira user',
+  'read:jira-work': 'Read Jira work',
+  'write:jira-work': 'Write to Jira work',
   'manage:jira-webhook': 'Register and manage Jira webhooks',
   'read:webhook:jira': 'View Jira webhooks',
   'write:webhook:jira': 'Create and update Jira webhooks',
   'delete:webhook:jira': 'Delete Jira webhooks',
-  'read:issue-event:jira': 'Read your Jira issue events',
-  'write:issue:jira': 'Write to your Jira issues',
-  'read:project:jira': 'Read your Jira projects',
-  'read:issue-type:jira': 'Read your Jira issue types',
-  'read:issue-meta:jira': 'Read your Jira issue meta',
-  'read:issue-security-level:jira': 'Read your Jira issue security level',
-  'read:issue.vote:jira': 'Read your Jira issue votes',
-  'read:issue.changelog:jira': 'Read your Jira issue changelog',
-  'read:avatar:jira': 'Read your Jira avatar',
-  'read:issue:jira': 'Read your Jira issues',
-  'read:status:jira': 'Read your Jira status',
-  'read:user:jira': 'Read your Jira user',
-  'read:field-configuration:jira': 'Read your Jira field configuration',
-  'read:issue-details:jira': 'Read your Jira issue details',
+  'read:issue-event:jira': 'Read Jira issue events',
+  'write:issue:jira': 'Write to Jira issues',
+  'read:project:jira': 'Read Jira projects',
+  'read:issue-type:jira': 'Read Jira issue types',
+  'read:issue-meta:jira': 'Read Jira issue meta',
+  'read:issue-security-level:jira': 'Read Jira issue security level',
+  'read:issue.vote:jira': 'Read Jira issue votes',
+  'read:issue.changelog:jira': 'Read Jira issue changelog',
+  'read:avatar:jira': 'Read Jira avatar',
+  'read:issue:jira': 'Read Jira issues',
+  'read:status:jira': 'Read Jira status',
+  'read:user:jira': 'Read Jira user',
+  'read:field-configuration:jira': 'Read Jira field configuration',
+  'read:issue-details:jira': 'Read Jira issue details',
   'read:field:jira': 'Read Jira field configurations',
   'read:jql:jira': 'Use JQL to filter Jira issues',
   'read:comment.property:jira': 'Read Jira comment properties',
@@ -125,57 +125,57 @@ const SCOPE_DESCRIPTIONS: Record<string, string> = {
   'delete:issue-worklog:jira': 'Delete worklog entries from Jira issues',
   'write:issue-link:jira': 'Create links between Jira issues',
   'delete:issue-link:jira': 'Delete links between Jira issues',
-  'User.Read': 'Read your Microsoft user',
-  'Chat.Read': 'Read your Microsoft chats',
-  'Chat.ReadWrite': 'Write to your Microsoft chats',
-  'Chat.ReadBasic': 'Read your Microsoft chats',
-  'ChatMessage.Send': 'Send chat messages on your behalf',
-  'Channel.ReadBasic.All': 'Read your Microsoft channels',
-  'ChannelMessage.Send': 'Write to your Microsoft channels',
-  'ChannelMessage.Read.All': 'Read your Microsoft channels',
-  'ChannelMessage.ReadWrite': 'Read and write to your Microsoft channels',
+  'User.Read': 'Read Microsoft user',
+  'Chat.Read': 'Read Microsoft chats',
+  'Chat.ReadWrite': 'Write to Microsoft chats',
+  'Chat.ReadBasic': 'Read Microsoft chats',
+  'ChatMessage.Send': 'Send chat messages',
+  'Channel.ReadBasic.All': 'Read Microsoft channels',
+  'ChannelMessage.Send': 'Write to Microsoft channels',
+  'ChannelMessage.Read.All': 'Read Microsoft channels',
+  'ChannelMessage.ReadWrite': 'Read and write to Microsoft channels',
   'ChannelMember.Read.All': 'Read team channel members',
-  'Group.Read.All': 'Read your Microsoft groups',
-  'Group.ReadWrite.All': 'Write to your Microsoft groups',
-  'Team.ReadBasic.All': 'Read your Microsoft teams',
+  'Group.Read.All': 'Read Microsoft groups',
+  'Group.ReadWrite.All': 'Write to Microsoft groups',
+  'Team.ReadBasic.All': 'Read Microsoft teams',
   'TeamMember.Read.All': 'Read team members',
-  'Mail.ReadWrite': 'Write to your Microsoft emails',
-  'Mail.ReadBasic': 'Read your Microsoft emails',
-  'Mail.Read': 'Read your Microsoft emails',
-  'Mail.Send': 'Send emails on your behalf',
-  'Files.Read': 'Read your OneDrive files',
-  'Files.ReadWrite': 'Read and write your OneDrive files',
-  'Tasks.ReadWrite': 'Read and manage your Planner tasks',
+  'Mail.ReadWrite': 'Write to Microsoft emails',
+  'Mail.ReadBasic': 'Read Microsoft emails',
+  'Mail.Read': 'Read Microsoft emails',
+  'Mail.Send': 'Send emails',
+  'Files.Read': 'Read OneDrive files',
+  'Files.ReadWrite': 'Read and write OneDrive files',
+  'Tasks.ReadWrite': 'Read and manage Planner tasks',
   'Sites.Read.All': 'Read Sharepoint sites',
   'Sites.ReadWrite.All': 'Read and write Sharepoint sites',
   'Sites.Manage.All': 'Manage Sharepoint sites',
   openid: 'Standard authentication',
-  profile: 'Access your profile information',
-  email: 'Access your email address',
-  identify: 'Read your Discord user',
-  bot: 'Read your Discord bot',
-  'messages.read': 'Read your Discord messages',
-  guilds: 'Read your Discord guilds',
-  'guilds.members.read': 'Read your Discord guild members',
-  identity: 'Access your Reddit identity',
-  submit: 'Submit posts and comments on your behalf',
+  profile: 'Access profile information',
+  email: 'Access email address',
+  identify: 'Read Discord user',
+  bot: 'Read Discord bot',
+  'messages.read': 'Read Discord messages',
+  guilds: 'Read Discord guilds',
+  'guilds.members.read': 'Read Discord guild members',
+  identity: 'Access Reddit identity',
+  submit: 'Submit posts and comments',
   vote: 'Vote on posts and comments',
   save: 'Save and unsave posts and comments',
-  edit: 'Edit your posts and comments',
+  edit: 'Edit posts and comments',
   subscribe: 'Subscribe and unsubscribe from subreddits',
-  history: 'Access your Reddit history',
-  privatemessages: 'Access your inbox and send private messages',
-  account: 'Update your account preferences and settings',
-  mysubreddits: 'Access your subscribed and moderated subreddits',
+  history: 'Access Reddit history',
+  privatemessages: 'Access inbox and send private messages',
+  account: 'Update account preferences and settings',
+  mysubreddits: 'Access subscribed and moderated subreddits',
   flair: 'Manage user and post flair',
   report: 'Report posts and comments for rule violations',
-  modposts: 'Approve, remove, and moderate posts in subreddits you moderate',
-  modflair: 'Manage flair in subreddits you moderate',
+  modposts: 'Approve, remove, and moderate posts in moderated subreddits',
+  modflair: 'Manage flair in moderated subreddits',
   modmail: 'Access and respond to moderator mail',
-  login: 'Access your Wealthbox account',
-  data: 'Access your Wealthbox data',
-  read: 'Read access to your workspace',
-  write: 'Write access to your Linear workspace',
+  login: 'Access Wealthbox account',
+  data: 'Access Wealthbox data',
+  read: 'Read access to workspace',
+  write: 'Write access to Linear workspace',
   'channels:read': 'View public channels',
   'channels:history': 'Read channel messages',
   'groups:read': 'View private channels',
@@ -190,15 +190,15 @@ const SCOPE_DESCRIPTIONS: Record<string, string> = {
   'files:read': 'Download and read files',
   'canvases:write': 'Create canvas documents',
   'reactions:write': 'Add emoji reactions to messages',
-  'sites:read': 'View your Webflow sites',
+  'sites:read': 'View Webflow sites',
   'sites:write': 'Manage webhooks and site settings',
-  'cms:read': 'View your CMS content',
-  'cms:write': 'Manage your CMS content',
-  'crm.objects.contacts.read': 'Read your HubSpot contacts',
+  'cms:read': 'View CMS content',
+  'cms:write': 'Manage CMS content',
+  'crm.objects.contacts.read': 'Read HubSpot contacts',
   'crm.objects.contacts.write': 'Create and update HubSpot contacts',
-  'crm.objects.companies.read': 'Read your HubSpot companies',
+  'crm.objects.companies.read': 'Read HubSpot companies',
   'crm.objects.companies.write': 'Create and update HubSpot companies',
-  'crm.objects.deals.read': 'Read your HubSpot deals',
+  'crm.objects.deals.read': 'Read HubSpot deals',
   'crm.objects.deals.write': 'Create and update HubSpot deals',
   'crm.objects.owners.read': 'Read HubSpot object owners',
   'crm.objects.users.read': 'Read HubSpot users',
@@ -218,74 +218,74 @@ const SCOPE_DESCRIPTIONS: Record<string, string> = {
   'crm.lists.write': 'Create and update HubSpot lists',
   tickets: 'Manage HubSpot tickets',
   api: 'Access Salesforce API',
-  refresh_token: 'Maintain long-term access to your Salesforce account',
-  default: 'Access your Asana workspace',
-  base: 'Basic access to your Pipedrive account',
-  'deals:read': 'Read your Pipedrive deals',
-  'deals:full': 'Full access to manage your Pipedrive deals',
-  'contacts:read': 'Read your Pipedrive contacts',
-  'contacts:full': 'Full access to manage your Pipedrive contacts',
-  'leads:read': 'Read your Pipedrive leads',
-  'leads:full': 'Full access to manage your Pipedrive leads',
-  'activities:read': 'Read your Pipedrive activities',
-  'activities:full': 'Full access to manage your Pipedrive activities',
-  'mail:read': 'Read your Pipedrive emails',
-  'mail:full': 'Full access to manage your Pipedrive emails',
-  'projects:read': 'Read your Pipedrive projects',
-  'projects:full': 'Full access to manage your Pipedrive projects',
-  'webhooks:read': 'Read your Pipedrive webhooks',
-  'webhooks:full': 'Full access to manage your Pipedrive webhooks',
-  w_member_social: 'Access your LinkedIn profile',
+  refresh_token: 'Maintain long-term access to Salesforce account',
+  default: 'Access Asana workspace',
+  base: 'Basic access to Pipedrive account',
+  'deals:read': 'Read Pipedrive deals',
+  'deals:full': 'Full access to manage Pipedrive deals',
+  'contacts:read': 'Read Pipedrive contacts',
+  'contacts:full': 'Full access to manage Pipedrive contacts',
+  'leads:read': 'Read Pipedrive leads',
+  'leads:full': 'Full access to manage Pipedrive leads',
+  'activities:read': 'Read Pipedrive activities',
+  'activities:full': 'Full access to manage Pipedrive activities',
+  'mail:read': 'Read Pipedrive emails',
+  'mail:full': 'Full access to manage Pipedrive emails',
+  'projects:read': 'Read Pipedrive projects',
+  'projects:full': 'Full access to manage Pipedrive projects',
+  'webhooks:read': 'Read Pipedrive webhooks',
+  'webhooks:full': 'Full access to manage Pipedrive webhooks',
+  w_member_social: 'Access LinkedIn profile',
   // Box scopes
-  root_readwrite: 'Read and write all files and folders in your Box account',
-  root_readonly: 'Read all files and folders in your Box account',
+  root_readwrite: 'Read and write all files and folders in Box account',
+  root_readonly: 'Read all files and folders in Box account',
   // Shopify scopes (write_* implicitly includes read access)
-  write_products: 'Read and manage your Shopify products',
-  write_orders: 'Read and manage your Shopify orders',
-  write_customers: 'Read and manage your Shopify customers',
-  write_inventory: 'Read and manage your Shopify inventory levels',
-  read_locations: 'View your store locations',
+  write_products: 'Read and manage Shopify products',
+  write_orders: 'Read and manage Shopify orders',
+  write_customers: 'Read and manage Shopify customers',
+  write_inventory: 'Read and manage Shopify inventory levels',
+  read_locations: 'View store locations',
   write_merchant_managed_fulfillment_orders: 'Create fulfillments for orders',
   // Zoom scopes
-  'user:read:user': 'View your Zoom profile information',
+  'user:read:user': 'View Zoom profile information',
   'meeting:write:meeting': 'Create Zoom meetings',
   'meeting:read:meeting': 'View Zoom meeting details',
-  'meeting:read:list_meetings': 'List your Zoom meetings',
+  'meeting:read:list_meetings': 'List Zoom meetings',
   'meeting:update:meeting': 'Update Zoom meetings',
   'meeting:delete:meeting': 'Delete Zoom meetings',
   'meeting:read:invitation': 'View Zoom meeting invitations',
   'meeting:read:list_past_participants': 'View past meeting participants',
-  'cloud_recording:read:list_user_recordings': 'List your Zoom cloud recordings',
+  'cloud_recording:read:list_user_recordings': 'List Zoom cloud recordings',
   'cloud_recording:read:list_recording_files': 'View recording files',
   'cloud_recording:delete:recording_file': 'Delete cloud recordings',
   // Dropbox scopes
-  'account_info.read': 'View your Dropbox account information',
+  'account_info.read': 'View Dropbox account information',
   'files.metadata.read': 'View file and folder names, sizes, and dates',
   'files.metadata.write': 'Modify file and folder metadata',
-  'files.content.read': 'Download and read your Dropbox files',
-  'files.content.write': 'Upload, copy, move, and delete files in your Dropbox',
-  'sharing.read': 'View your shared files and folders',
+  'files.content.read': 'Download and read Dropbox files',
+  'files.content.write': 'Upload, copy, move, and delete files in Dropbox',
+  'sharing.read': 'View shared files and folders',
   'sharing.write': 'Share files and folders with others',
   // WordPress.com scopes
-  global: 'Full access to manage your WordPress.com sites, posts, pages, media, and settings',
+  global: 'Full access to manage WordPress.com sites, posts, pages, media, and settings',
   // Spotify scopes
-  'user-read-private': 'View your Spotify account details',
-  'user-read-email': 'View your email address on Spotify',
-  'user-library-read': 'View your saved tracks and albums',
-  'user-library-modify': 'Save and remove tracks and albums from your library',
-  'playlist-read-private': 'View your private playlists',
-  'playlist-read-collaborative': 'View collaborative playlists you have access to',
-  'playlist-modify-public': 'Create and manage your public playlists',
-  'playlist-modify-private': 'Create and manage your private playlists',
-  'user-read-playback-state': 'View your current playback state',
-  'user-modify-playback-state': 'Control playback on your Spotify devices',
-  'user-read-currently-playing': 'View your currently playing track',
-  'user-read-recently-played': 'View your recently played tracks',
-  'user-top-read': 'View your top artists and tracks',
-  'user-follow-read': 'View artists and users you follow',
+  'user-read-private': 'View Spotify account details',
+  'user-read-email': 'View email address on Spotify',
+  'user-library-read': 'View saved tracks and albums',
+  'user-library-modify': 'Save and remove tracks and albums from library',
+  'playlist-read-private': 'View private playlists',
+  'playlist-read-collaborative': 'View collaborative playlists',
+  'playlist-modify-public': 'Create and manage public playlists',
+  'playlist-modify-private': 'Create and manage private playlists',
+  'user-read-playback-state': 'View current playback state',
+  'user-modify-playback-state': 'Control playback on Spotify devices',
+  'user-read-currently-playing': 'View currently playing track',
+  'user-read-recently-played': 'View recently played tracks',
+  'user-top-read': 'View top artists and tracks',
+  'user-follow-read': 'View followed artists and users',
   'user-follow-modify': 'Follow and unfollow artists and users',
-  'user-read-playback-position': 'View your playback position in podcasts',
-  'ugc-image-upload': 'Upload images to your Spotify playlists',
+  'user-read-playback-position': 'View playback position in podcasts',
+  'ugc-image-upload': 'Upload images to Spotify playlists',
 }
 
 function getScopeDescription(scope: string): string {
@@ -380,7 +380,7 @@ export function OAuthRequiredModal({
         <ModalBody>
           <div className='flex flex-col gap-[16px]'>
             <div className='flex items-center gap-[14px]'>
-              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-6)]'>
+              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
                 <ProviderIcon className='h-[18px] w-[18px]' />
               </div>
               <div className='flex-1'>
@@ -394,22 +394,22 @@ export function OAuthRequiredModal({
             </div>
 
             {displayScopes.length > 0 && (
-              <div className='rounded-[8px] border bg-[var(--surface-6)]'>
-                <div className='border-b px-[14px] py-[10px]'>
-                  <h4 className='font-medium text-[13px] text-[var(--text-primary)]'>
+              <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+                <div className='border-[var(--border-1)] border-b px-[14px] py-[10px]'>
+                  <h4 className='font-medium text-[12px] text-[var(--text-primary)]'>
                     Permissions requested
                   </h4>
                 </div>
                 <ul className='max-h-[330px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
                   {displayScopes.map((scope) => (
                     <li key={scope} className='flex items-start gap-[10px]'>
-                      <div className='mt-[3px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                      <div className='mt-[2px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                       </div>
-                      <div className='flex-1 text-[12px] text-[var(--text-primary)]'>
+                      <div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
                         <span>{getScopeDescription(scope)}</span>
                         {newScopesSet.has(scope) && (
-                          <span className='ml-[8px] rounded-[4px] border border-amber-500/30 bg-amber-500/10 px-[6px] py-[2px] text-[10px] text-amber-300'>
+                          <span className='inline-flex items-center gap-[6px] rounded-[6px] bg-[rgba(245,158,11,0.2)] px-[7px] py-[1px] font-medium text-[#fcd34d] text-[11px]'>
                             New
                           </span>
                         )}
@@ -425,12 +425,7 @@ export function OAuthRequiredModal({
           <Button variant='active' onClick={onClose}>
             Cancel
           </Button>
-          <Button
-            variant='primary'
-            type='button'
-            onClick={handleConnectDirectly}
-            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-          >
+          <Button variant='tertiary' type='button' onClick={handleConnectDirectly}>
             Connect
           </Button>
         </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 32e90aacc1..2757dea663 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -127,7 +127,7 @@ export function EvalInput({
   }
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-strong)] border-b bg-transparent px-[10px] py-[5px]'>
+    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-transparent px-[10px] py-[5px]'>
       <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
         Metric {index + 1}
       </span>
@@ -171,11 +171,11 @@ export function EvalInput({
         <div
           key={metric.id}
           data-metric-id={metric.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-1)] bg-[#1F1F1F]'
         >
           {renderMetricHeader(metric, index)}
 
-          <div className='flex flex-col gap-[6px] border-[var(--border-strong)] px-[10px] pt-[6px] pb-[10px]'>
+          <div className='flex flex-col gap-[6px] border-[var(--border-1)] px-[10px] pt-[6px] pb-[10px]'>
             <div key={`name-${metric.id}`} className='space-y-[4px]'>
               <Label className='text-[13px]'>Name</Label>
               <Input
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 82a845bc88..aad68455cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -420,7 +420,7 @@ export function FileUpload({
     return (
       <div
         key={fileKey}
-        className='flex items-center justify-between rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-11)]'
+        className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
       >
         <div className='flex-1 truncate pr-2 text-sm' title={file.name}>
           <span className='text-[var(--text-primary)]'>{truncateMiddle(file.name)}</span>
@@ -447,7 +447,7 @@ export function FileUpload({
     return (
       <div
         key={file.id}
-        className='flex items-center justify-between rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] dark:bg-[var(--surface-9)]'
+        className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] dark:bg-[var(--surface-5)]'
       >
         <div className='flex-1 truncate pr-2 text-sm'>
           <span className='text-[var(--text-primary)]'>{file.name}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index b627ba1315..cbdce385c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -107,8 +107,8 @@ export function GroupedCheckboxList({
           variant='ghost'
           disabled={disabled}
           className={cn(
-            'flex w-full cursor-pointer items-center justify-between rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-9)]',
-            '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 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
+            'hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]'
           )}
         >
           <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
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 e018c69a92..869f5d5f40 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
@@ -256,7 +256,7 @@ export function InputMapping({
 
   if (!selectedWorkflowId) {
     return (
-      <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]'>
+      <div className='flex flex-col items-center justify-center rounded-[4px] border border-[var(--border-1)] 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'
@@ -368,7 +368,7 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
+        'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
@@ -385,7 +385,7 @@ function InputMappingField({
       </div>
 
       {!collapsed && (
-        <div className='flex flex-col gap-[6px] border-[var(--border-strong)] border-t px-[10px] pt-[6px] pb-[10px]'>
+        <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
           <div className='space-y-[4px]'>
             <Label className='text-[13px]'>Value</Label>
             <div className='relative'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 6e6112c4ba..5b8dd874a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -369,7 +369,7 @@ export function LongInput({
               {/* Custom resize handle */}
               {!wandHook.isStreaming && (
                 <div
-                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)]'
+                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                   onMouseDown={startResize}
                   onDragStart={(e) => {
                     e.preventDefault()
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 4d13018807..f81dd6ac5b 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
@@ -313,7 +313,7 @@ export function MessagesInput({
         <div
           key={`message-${index}`}
           className={cn(
-            'relative flex w-full flex-col rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] transition-colors dark:bg-[var(--surface-9)]',
+            'relative flex w-full flex-col rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'
           )}
         >
@@ -364,7 +364,7 @@ export function MessagesInput({
                         type='button'
                         disabled={isPreview || disabled}
                         className={cn(
-                          '-ml-1.5 -my-1 rounded px-1.5 py-1 font-medium text-[13px] text-[var(--text-primary)] leading-none transition-colors hover:bg-[var(--surface-8)] hover:text-[var(--text-secondary)]',
+                          '-ml-1.5 -my-1 rounded px-1.5 py-1 font-medium text-[13px] text-[var(--text-primary)] leading-none transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-secondary)]',
                           (isPreview || disabled) &&
                             'cursor-default hover:bg-transparent hover:text-[var(--text-primary)]'
                         )}
@@ -534,7 +534,7 @@ export function MessagesInput({
 
                   {!isPreview && !disabled && (
                     <div
-                      className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)]'
+                      className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                       onMouseDown={(e) => handleResizeStart(fieldId, e)}
                       onDragStart={(e) => {
                         e.preventDefault()
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 94bf588c4a..82966fcb9e 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
@@ -374,12 +374,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             saveStatus === 'error' && 'bg-red-600 hover:bg-red-700'
           )}
         >
-          {saveStatus === 'saving' && (
-            <>
-              <div className='mr-2 h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-              Saving...
-            </>
-          )}
+          {saveStatus === 'saving' && 'Saving...'}
           {saveStatus === 'saved' && 'Saved'}
           {saveStatus === 'idle' && (scheduleId ? 'Update Schedule' : 'Save Schedule')}
           {saveStatus === 'error' && 'Error'}
@@ -392,11 +387,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             disabled={disabled || isPreview || deleteStatus === 'deleting' || isSaving}
             className='h-9 rounded-[8px] px-3'
           >
-            {deleteStatus === 'deleting' ? (
-              <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-            ) : (
-              <Trash className='h-[14px] w-[14px]' />
-            )}
+            <Trash className='h-[14px] w-[14px]' />
           </Button>
         )}
       </div>
@@ -474,7 +465,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
         <ModalContent size='sm'>
           <ModalHeader>Delete Schedule</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete this schedule configuration? This will stop the
               workflow from running automatically.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
@@ -484,11 +475,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             <Button variant='active' onClick={() => setShowDeleteDialog(false)}>
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleDeleteConfirm}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleDeleteConfirm}>
               Delete
             </Button>
           </ModalFooter>
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 960356aaf0..a8207aa313 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
@@ -407,14 +407,14 @@ export function FieldFormat({
           key={field.id}
           data-field-id={field.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
+            'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
             field.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
           {renderFieldHeader(field, index)}
 
           {!field.collapsed && (
-            <div className='flex flex-col gap-[6px] border-[var(--border-strong)] border-t px-[10px] pt-[6px] pb-[10px]'>
+            <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
               <div className='flex flex-col gap-[4px]'>
                 <Label className='text-[13px]'>Name</Label>
                 <Input
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 8fbd4ac2a8..8e9cf413d9 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
@@ -148,13 +148,13 @@ export function Table({
 
   const renderHeader = () => (
     <thead className='bg-transparent'>
-      <tr className='border-[var(--border-strong)] border-b bg-transparent'>
+      <tr className='border-[var(--border-1)] border-b bg-transparent'>
         {columns.map((column, index) => (
           <th
             key={column}
             className={cn(
               'bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]',
-              index < columns.length - 1 && 'border-[var(--border-strong)] border-r'
+              index < columns.length - 1 && 'border-[var(--border-1)] border-r'
             )}
           >
             {column}
@@ -223,7 +223,7 @@ export function Table({
         key={`${row.id}-${column}`}
         className={cn(
           'relative bg-transparent p-0',
-          cellIndex < columns.length - 1 && 'border-[var(--border-strong)] border-r'
+          cellIndex < columns.length - 1 && 'border-[var(--border-1)] border-r'
         )}
       >
         <div className='relative w-full'>
@@ -310,14 +310,14 @@ export function Table({
 
   return (
     <div className='relative'>
-      <div className='overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
+      <div className='overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
         <table className='w-full bg-transparent'>
           {renderHeader()}
           <tbody className='bg-transparent'>
             {rows.map((row, rowIndex) => (
               <tr
                 key={row.id}
-                className='group relative border-[var(--border-strong)] border-t bg-transparent'
+                className='group relative border-[var(--border-1)] border-t bg-transparent'
               >
                 {columns.map((column, cellIndex) => renderCell(row, rowIndex, column, cellIndex))}
                 {renderDeleteButton(rowIndex)}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index b5a38cece2..d453ab3467 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -68,10 +68,15 @@ interface TagDropdownProps {
 }
 
 /**
- * Checks if the tag trigger (<) should show the tag dropdown
- * @param text - The full text content
- * @param cursorPosition - Current cursor position
- * @returns Object indicating whether to show the dropdown
+ * Checks if the tag trigger (`<`) should show the tag dropdown.
+ *
+ * @remarks
+ * The dropdown appears when there's an unclosed `<` bracket before the cursor.
+ * A closing `>` bracket after the last `<` will prevent the dropdown from showing.
+ *
+ * @param text - The full text content of the input field
+ * @param cursorPosition - Current cursor position in the text
+ * @returns Object with `show` property indicating whether to display the dropdown
  */
 export const checkTagTrigger = (text: string, cursorPosition: number): { show: boolean } => {
   if (cursorPosition >= 1) {
@@ -86,6 +91,17 @@ export const checkTagTrigger = (text: string, cursorPosition: number): { show: b
   return { show: false }
 }
 
+/**
+ * Extracts the search term for tag filtering from the current input.
+ *
+ * @remarks
+ * Returns the text between the last unclosed `<` and the cursor position,
+ * converted to lowercase for case-insensitive matching.
+ *
+ * @param text - The full text content of the input field
+ * @param cursorPosition - Current cursor position in the text
+ * @returns The search term for filtering tags, or empty string if not in tag context
+ */
 export const getTagSearchTerm = (text: string, cursorPosition: number): string => {
   if (cursorPosition <= 0) {
     return ''
@@ -107,6 +123,9 @@ export const getTagSearchTerm = (text: string, cursorPosition: number): string =
   return textBeforeCursor.slice(lastOpenBracket + 1).toLowerCase()
 }
 
+/**
+ * Color constants for block type icons in the tag dropdown.
+ */
 const BLOCK_COLORS = {
   VARIABLE: '#2F8BFF',
   DEFAULT: '#2F55FF',
@@ -114,6 +133,9 @@ const BLOCK_COLORS = {
   PARALLEL: '#FEE12B',
 } as const
 
+/**
+ * Prefix constants for special tag types.
+ */
 const TAG_PREFIXES = {
   VARIABLE: 'variable.',
 } as const
@@ -128,14 +150,29 @@ const ensureRootTag = (tags: string[], rootTag: string): string[] => {
 }
 
 /**
- * Gets a subblock value from the store
+ * Gets a subblock value from the store.
+ *
+ * @param blockId - The block identifier
+ * @param property - The property name to retrieve
+ * @returns The value from the subblock store
  */
 const getSubBlockValue = (blockId: string, property: string): any => {
   return useSubBlockStore.getState().getValue(blockId, property)
 }
 
 /**
- * Gets the output type for a specific path in a block's outputs
+ * Gets the output type for a specific path in a block's outputs.
+ *
+ * @remarks
+ * Handles special cases for trigger blocks, starter blocks with chat mode,
+ * and tool-based operations.
+ *
+ * @param block - The block state
+ * @param blockConfig - The block configuration, or null
+ * @param blockId - The block identifier
+ * @param outputPath - The dot-separated path to the output field
+ * @param mergedSubBlocksOverride - Optional override for subblock values
+ * @returns The type of the output field (e.g., 'string', 'array', 'any')
  */
 const getOutputTypeForPath = (
   block: BlockState,
@@ -181,7 +218,15 @@ const getOutputTypeForPath = (
 }
 
 /**
- * Recursively generates all output paths from an outputs schema
+ * Recursively generates all output paths from an outputs schema.
+ *
+ * @remarks
+ * Traverses nested objects and arrays to build dot-separated paths
+ * for all leaf values in the schema.
+ *
+ * @param outputs - The outputs schema object
+ * @param prefix - Current path prefix for recursion
+ * @returns Array of dot-separated paths to all output fields
  */
 const generateOutputPaths = (outputs: Record<string, any>, prefix = ''): string[] => {
   const paths: string[] = []
@@ -230,7 +275,15 @@ const generateOutputPaths = (outputs: Record<string, any>, prefix = ''): string[
 }
 
 /**
- * Recursively generates all output paths with their types from an outputs schema
+ * Recursively generates all output paths with their types from an outputs schema.
+ *
+ * @remarks
+ * Similar to generateOutputPaths but also captures the type information
+ * for each path, useful for displaying type hints in the UI.
+ *
+ * @param outputs - The outputs schema object
+ * @param prefix - Current path prefix for recursion
+ * @returns Array of objects containing path and type for each output field
  */
 const generateOutputPathsWithTypes = (
   outputs: Record<string, any>,
@@ -269,7 +322,11 @@ const generateOutputPathsWithTypes = (
 }
 
 /**
- * Generates output paths for a tool-based block
+ * Generates output paths for a tool-based block.
+ *
+ * @param blockConfig - The block configuration containing tools config
+ * @param operation - The selected operation for the tool
+ * @returns Array of output paths for the tool, or empty array on error
  */
 const generateToolOutputPaths = (blockConfig: BlockConfig, operation: string): string[] => {
   if (!blockConfig?.tools?.config?.tool) return []
@@ -289,7 +346,12 @@ const generateToolOutputPaths = (blockConfig: BlockConfig, operation: string): s
 }
 
 /**
- * Gets the output type for a specific path in a tool's outputs
+ * Gets the output type for a specific path in a tool's outputs.
+ *
+ * @param blockConfig - The block configuration containing tools config
+ * @param operation - The selected operation for the tool
+ * @param path - The dot-separated path to the output field
+ * @returns The type of the output field, or 'any' if not found
  */
 const getToolOutputType = (blockConfig: BlockConfig, operation: string, path: string): string => {
   if (!blockConfig?.tools?.config?.tool) return 'any'
@@ -311,7 +373,16 @@ const getToolOutputType = (blockConfig: BlockConfig, operation: string, path: st
 }
 
 /**
- * Calculates the viewport position of the caret in a textarea/input
+ * Calculates the viewport position of the caret in a textarea/input.
+ *
+ * @remarks
+ * Creates a hidden mirror div with identical styling to measure the
+ * precise position of the caret for popover anchoring.
+ *
+ * @param element - The textarea or input element
+ * @param caretPosition - The character position of the caret
+ * @param text - The text content of the element
+ * @returns Object with `left` and `top` viewport coordinates
  */
 const getCaretViewportPosition = (
   element: HTMLTextAreaElement | HTMLInputElement,
@@ -361,7 +432,15 @@ const getCaretViewportPosition = (
 }
 
 /**
- * Renders a tag icon with background color - can use either a React icon component or a letter
+ * Renders a tag icon with background color.
+ *
+ * @remarks
+ * Supports either a React icon component or a single letter string
+ * for flexible icon display in the tag dropdown.
+ *
+ * @param icon - Either a letter string or a Lucide icon component
+ * @param color - Background color for the icon container
+ * @returns A styled icon element
  */
 const TagIcon: React.FC<{
   icon: string | React.ComponentType<{ className?: string }>
@@ -372,18 +451,29 @@ const TagIcon: React.FC<{
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
-      <span className='font-bold text-[10px] text-white'>{icon}</span>
+      <span className='!text-white font-bold text-[10px]'>{icon}</span>
     ) : (
       (() => {
         const IconComponent = icon
-        return <IconComponent className='h-[9px] w-[9px] text-white' />
+        return <IconComponent className='!text-white size-[9px]' />
       })()
     )}
   </div>
 )
 
 /**
- * Wrapper for PopoverBackButton that handles parent tag navigation
+ * Wrapper for PopoverBackButton that handles parent tag navigation.
+ *
+ * @remarks
+ * Extends the base PopoverBackButton to support selecting the parent tag
+ * when navigating back from a nested folder view.
+ *
+ * @param selectedIndex - Currently selected item index
+ * @param setSelectedIndex - Callback to update selection
+ * @param flatTagList - Flat list of all available tags
+ * @param nestedBlockTagGroups - Groups of nested block tags
+ * @param itemRefs - Refs to item DOM elements for scrolling
+ * @returns The back button component with parent tag support
  */
 const TagDropdownBackButton: React.FC<{
   selectedIndex: number
@@ -432,8 +522,26 @@ const TagDropdownBackButton: React.FC<{
 }
 
 /**
- * TagDropdown component that displays available tags (variables and block outputs)
- * for selection in input fields. Uses the Popover component system for consistent styling.
+ * TagDropdown component that displays available tags for selection in input fields.
+ *
+ * @remarks
+ * Displays variables and block outputs that can be referenced in workflow inputs.
+ * Uses the Popover component system for consistent styling and positioning.
+ * Supports keyboard navigation, search filtering, and nested folder views.
+ *
+ * @example
+ * ```tsx
+ * <TagDropdown
+ *   visible={showDropdown}
+ *   onSelect={handleTagSelect}
+ *   blockId={currentBlockId}
+ *   activeSourceBlockId={null}
+ *   inputValue={inputText}
+ *   cursorPosition={cursor}
+ *   onClose={() => setShowDropdown(false)}
+ *   inputRef={textareaRef}
+ * />
+ * ```
  */
 export const TagDropdown: React.FC<TagDropdownProps> = ({
   visible,
@@ -1382,13 +1490,13 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                         }}
                       >
                         <TagIcon icon='V' color={BLOCK_COLORS.VARIABLE} />
-                        <span className='flex-1 truncate'>
+                        <span className='flex-1 truncate text-[var(--text-primary)]'>
                           {tag.startsWith(TAG_PREFIXES.VARIABLE)
                             ? tag.substring(TAG_PREFIXES.VARIABLE.length)
                             : tag}
                         </span>
                         {variableInfo && (
-                          <span className='ml-auto text-[10px] text-[var(--white)]/60'>
+                          <span className='ml-auto text-[10px] text-[var(--text-secondary)]'>
                             {variableInfo.type}
                           </span>
                         )}
@@ -1502,9 +1610,11 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                                   }}
                                 >
                                   <TagIcon icon={tagIcon} color={blockColor} />
-                                  <span className='flex-1 truncate'>{child.display}</span>
+                                  <span className='flex-1 truncate text-[var(--text-primary)]'>
+                                    {child.display}
+                                  </span>
                                   {childType && childType !== 'any' && (
-                                    <span className='ml-auto text-[10px] text-[var(--white)]/60'>
+                                    <span className='ml-auto text-[10px] text-[var(--text-secondary)]'>
                                       {childType}
                                     </span>
                                   )}
@@ -1578,9 +1688,11 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                           }}
                         >
                           <TagIcon icon={displayIcon} color={blockColor} />
-                          <span className='flex-1 truncate'>{nestedTag.display}</span>
+                          <span className='flex-1 truncate text-[var(--text-primary)]'>
+                            {nestedTag.display}
+                          </span>
                           {tagDescription && tagDescription !== 'any' && (
-                            <span className='ml-auto text-[10px] text-[var(--white)]/60'>
+                            <span className='ml-auto text-[10px] text-[var(--text-secondary)]'>
                               {tagDescription}
                             </span>
                           )}
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 5c5a660341..d730a6229f 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
@@ -1131,11 +1131,7 @@ try {
           {activeSection === 'schema' && (
             <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)]'
-                >
+                <Button variant='destructive' onClick={() => setShowDeleteConfirm(true)}>
                   Delete
                 </Button>
               ) : (
@@ -1146,7 +1142,7 @@ try {
                   Cancel
                 </Button>
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={() => setActiveSection('code')}
                   disabled={!isSchemaValid || !!schemaError}
                 >
@@ -1159,11 +1155,7 @@ try {
           {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)]'
-                >
+                <Button variant='destructive' onClick={() => setShowDeleteConfirm(true)}>
                   Delete
                 </Button>
               ) : (
@@ -1176,7 +1168,7 @@ try {
                   Cancel
                 </Button>
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handleSave}
                   disabled={!isSchemaValid || !!schemaError}
                 >
@@ -1192,7 +1184,7 @@ try {
         <ModalContent size='sm'>
           <ModalHeader>Delete Custom Tool</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               This will permanently delete the tool and remove it from any workflows that are using
               it. <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
@@ -1206,10 +1198,9 @@ try {
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleDelete}
               disabled={deleteToolMutation.isPending}
-              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/components/mcp-tools-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/mcp-tools-list.tsx
index dbaa41d32b..bb6f085a80 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/mcp-tools-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/mcp-tools-list.tsx
@@ -98,10 +98,10 @@ export function McpToolsList({
             }}
           >
             <div
-              className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded'
+              className='flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center rounded-[4px]'
               style={{ background: mcpTool.bgColor }}
             >
-              <IconComponent icon={mcpTool.icon} className='h-[11px] w-[11px] text-white' />
+              <IconComponent icon={mcpTool.icon} className='h-[9px] w-[9px] text-white' />
             </div>
             <span className='truncate' title={`${mcpTool.name} (${mcpTool.serverName})`}>
               {mcpTool.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx
index 08d223219f..c04716e168 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-command/tool-command.tsx
@@ -232,8 +232,8 @@ export function CommandItem({
     <button
       id={value}
       className={cn(
-        'flex h-[25px] w-full cursor-pointer select-none items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[12px] text-[var(--text-primary)] outline-none transition-colors hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-[var(--surface-9)] data-[selected=true]:text-[var(--text-primary)] data-[disabled=true]:opacity-50',
-        (isActive || isHovered) && 'bg-[var(--surface-9)] text-[var(--text-primary)]',
+        'flex h-[25px] w-full cursor-pointer select-none items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[12px] text-[var(--text-primary)] outline-none transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[selected=true]:bg-[var(--surface-5)] data-[selected=true]:text-[var(--text-primary)] data-[disabled=true]:opacity-50',
+        (isActive || isHovered) && 'bg-[var(--surface-5)] text-[var(--text-primary)]',
         className
       )}
       onClick={() => !disabled && onSelect?.()}
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 7d209c115a..cc1c3c58c9 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,17 +1,15 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Loader2, PlusIcon, WrenchIcon, XIcon } from 'lucide-react'
+import { Loader2, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Badge,
   Combobox,
+  type ComboboxOptionGroup,
   Popover,
   PopoverContent,
   PopoverItem,
-  PopoverScrollArea,
-  PopoverSearch,
-  PopoverSection,
   PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
@@ -45,11 +43,6 @@ import {
   type CustomTool,
   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 { McpToolsList } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/mcp-tools-list'
-import {
-  ToolCommand,
-  useCommandKeyDown,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-command/tool-command'
 import { ToolCredentialSelector } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tool-credential-selector'
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-value'
 import { getAllBlocks } from '@/blocks'
@@ -122,16 +115,16 @@ interface StoredTool {
 }
 
 /**
- * Resolves a custom tool reference to its full definition
+ * Resolves a custom tool reference to its full definition.
  *
  * @remarks
  * Custom tools can be stored in two formats:
- * 1. Reference-only (new): { customToolId: "...", usageControl: "auto" } - loads from database
- * 2. Inline (legacy): { schema: {...}, code: "..." } - uses embedded definition
+ * 1. Reference-only (new): `{ customToolId: "...", usageControl: "auto" }` - loads from database
+ * 2. Inline (legacy): `{ schema: {...}, code: "..." }` - uses embedded definition
  *
- * @param storedTool - The stored tool reference
- * @param customToolsList - List of custom tools from the database
- * @returns The resolved custom tool with full definition, or null if not found
+ * @param storedTool - The stored tool reference containing either a customToolId or inline definition
+ * @param customToolsList - List of custom tools fetched from the database
+ * @returns The resolved custom tool with schema, code, and title, or `null` if not found
  */
 function resolveCustomToolFromReference(
   storedTool: StoredTool,
@@ -164,19 +157,35 @@ function resolveCustomToolFromReference(
 }
 
 /**
- * Checks if a stored custom tool is a reference-only format (no inline code/schema)
+ * Checks if a stored custom tool uses the reference-only format.
+ *
+ * @remarks
+ * Reference-only format means the tool has a customToolId but no inline code/schema,
+ * requiring resolution from the database at runtime.
+ *
+ * @param storedTool - The stored tool to check
+ * @returns `true` if the tool is a reference-only custom tool, `false` otherwise
  */
 function isCustomToolReference(storedTool: StoredTool): boolean {
   return storedTool.type === 'custom-tool' && !!storedTool.customToolId && !storedTool.code
 }
 
 /**
- * Generic sync wrapper that synchronizes store values with local component state
+ * Generic sync wrapper that synchronizes store values with local component state.
  *
  * @remarks
- * Used to sync tool parameter values between the workflow store and local controlled inputs
+ * Used to sync tool parameter values between the workflow store and local controlled inputs.
+ * Listens for changes in the store and propagates them to the local component via onChange.
+ *
+ * @typeParam T - The type of the store value being synchronized
  *
- * @typeParam T - The type of the store value
+ * @param blockId - The block identifier for store lookup
+ * @param paramId - The parameter identifier within the block
+ * @param value - Current local value
+ * @param onChange - Callback to update the local value
+ * @param children - Child components to render
+ * @param transformer - Optional function to transform store value before comparison
+ * @returns The children wrapped with synchronization logic
  */
 function GenericSyncWrapper<T = unknown>({
   blockId,
@@ -759,12 +768,44 @@ function CodeEditorSyncWrapper({
 }
 
 /**
- * Wrapper component that attaches keyboard navigation handler from ToolCommand context
+ * Set of built-in tool types that are core platform tools.
+ *
+ * @remarks
+ * These are distinguished from third-party integrations for categorization
+ * in the tool selection dropdown.
  */
-const CommandKeyboardWrapper = ({ children }: { children: React.ReactNode }) => {
-  const handleKeyDown = useCommandKeyDown()
+const BUILT_IN_TOOL_TYPES = new Set([
+  'file',
+  'function',
+  'knowledge',
+  'search',
+  'thinking',
+  'image_generator',
+  'video_generator',
+  'vision',
+  'translate',
+  'tts',
+  'stt',
+  'memory',
+  'workflow',
+])
 
-  return <div onKeyDown={handleKeyDown}>{children}</div>
+/**
+ * Creates a styled icon element for tool items in the selection dropdown.
+ *
+ * @param bgColor - Background color for the icon container
+ * @param IconComponent - The Lucide icon component to render
+ * @returns A styled div containing the icon with consistent dimensions
+ */
+function createToolIcon(bgColor: string, IconComponent: any) {
+  return (
+    <div
+      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+      style={{ background: bgColor }}
+    >
+      <IconComponent className='h-[10px] w-[10px] text-white' />
+    </div>
+  )
 }
 
 /**
@@ -793,7 +834,6 @@ export function ToolInput({
   const [open, setOpen] = useState(false)
   const [customToolModalOpen, setCustomToolModalOpen] = useState(false)
   const [editingToolIndex, setEditingToolIndex] = useState<number | null>(null)
-  const [searchQuery, setSearchQuery] = useState('')
   const [draggedIndex, setDraggedIndex] = useState<number | null>(null)
   const [dragOverIndex, setDragOverIndex] = useState<number | null>(null)
   const [usageControlPopoverIndex, setUsageControlPopoverIndex] = useState<number | null>(null)
@@ -866,13 +906,6 @@ export function ToolInput({
     })
   }, [mcpTools, mcpServers])
 
-  // Reset search query when popover opens
-  useEffect(() => {
-    if (open) {
-      setSearchQuery('')
-    }
-  }, [open])
-
   const modelValue = useSubBlockStore.getState().getValue(blockId, 'model')
   const model = typeof modelValue === 'string' ? modelValue : ''
   const provider = model ? getProviderFromModel(model) : ''
@@ -890,21 +923,6 @@ export function ToolInput({
 
   const value = isPreview ? previewValue : storeValue
 
-  const customFilter = useCallback((value: string, search: string) => {
-    if (!search.trim()) return 1
-
-    const normalizedValue = value.toLowerCase()
-    const normalizedSearch = search.toLowerCase()
-
-    if (normalizedValue === normalizedSearch) return 1
-
-    if (normalizedValue.startsWith(normalizedSearch)) return 0.8
-
-    if (normalizedValue.includes(normalizedSearch)) return 0.6
-
-    return 0
-  }, [])
-
   const selectedTools: StoredTool[] =
     Array.isArray(value) && value.length > 0 && typeof value[0] === 'object'
       ? (value as unknown as StoredTool[])
@@ -973,10 +991,15 @@ export function ToolInput({
   }, [mcpTools, mcpLoading, selectedTools, isPreview, setStoreValue])
 
   /**
-   * Checks if a tool is already selected in the current workflow
+   * Checks if a tool is already selected in the current workflow.
+   *
+   * @remarks
+   * Multi-operation tools, workflow blocks, and knowledge blocks can have
+   * multiple instances, so they always return `false`.
+   *
    * @param toolId - The tool identifier to check
    * @param blockType - The block type for the tool
-   * @returns True if tool is already selected (for single-operation tools only)
+   * @returns `true` if tool is already selected (for single-operation tools only)
    */
   const isToolAlreadySelected = (toolId: string, blockType: string) => {
     if (hasMultipleOperations(blockType)) {
@@ -991,9 +1014,10 @@ export function ToolInput({
   }
 
   /**
-   * Checks if a block supports multiple operations
+   * Checks if a block supports multiple operations.
+   *
    * @param blockType - The block type to check
-   * @returns True if the block has multiple tool operations
+   * @returns `true` if the block has more than one tool operation available
    */
   const hasMultipleOperations = (blockType: string): boolean => {
     const block = getAllBlocks().find((block) => block.type === blockType)
@@ -1001,9 +1025,14 @@ export function ToolInput({
   }
 
   /**
-   * Gets the available operation options for a multi-operation tool
+   * Gets the available operation options for a multi-operation tool.
+   *
+   * @remarks
+   * First attempts to find options from the block's operation dropdown subBlock,
+   * then falls back to creating options from the tools.access array.
+   *
    * @param blockType - The block type to get operations for
-   * @returns Array of operation options with label and id
+   * @returns Array of operation options with label and id properties
    */
   const getOperationOptions = (blockType: string): { label: string; id: string }[] => {
     const block = getAllBlocks().find((block) => block.type === blockType)
@@ -1038,10 +1067,15 @@ export function ToolInput({
   }
 
   /**
-   * Gets the correct tool ID for a given operation
+   * Gets the correct tool ID for a given operation.
+   *
+   * @remarks
+   * For single-tool blocks, returns the first tool. For multi-operation blocks,
+   * uses the block's tool selection function or matches the operation to a tool ID.
+   *
    * @param blockType - The block type
    * @param operation - The selected operation (for multi-operation tools)
-   * @returns The tool ID to use for execution, or undefined if not found
+   * @returns The tool ID to use for execution, or `undefined` if not found
    */
   const getToolIdForOperation = (blockType: string, operation?: string): string | undefined => {
     const block = getAllBlocks().find((block) => block.type === blockType)
@@ -1071,11 +1105,16 @@ export function ToolInput({
   }
 
   /**
-   * Initializes tool parameters with empty values
+   * Initializes tool parameters with empty values.
+   *
+   * @remarks
+   * Returns an empty object as parameters are populated dynamically
+   * based on user input and default values from the tool configuration.
+   *
    * @param toolId - The tool identifier
    * @param params - Array of parameter configurations
-   * @param instanceId - Optional instance identifier
-   * @returns Empty parameter object
+   * @param instanceId - Optional instance identifier for unique param keys
+   * @returns Empty parameter object to be populated by the user
    */
   const initializeToolParams = (
     toolId: string,
@@ -1447,6 +1486,149 @@ export function ToolInput({
     return <Icon className={className} />
   }
 
+  /**
+   * Generates grouped options for the tool selection combobox.
+   *
+   * @remarks
+   * Groups tools into categories: Actions (create/add), Custom Tools,
+   * MCP Tools, Built-in Tools, and Integrations.
+   *
+   * @returns Array of option groups for the combobox component
+   */
+  const toolGroups = useMemo((): ComboboxOptionGroup[] => {
+    const groups: ComboboxOptionGroup[] = []
+
+    // Actions group (no section header)
+    groups.push({
+      items: [
+        {
+          label: 'Create Tool',
+          value: 'action-create-tool',
+          icon: WrenchIcon,
+          onSelect: () => {
+            setCustomToolModalOpen(true)
+            setOpen(false)
+          },
+          disabled: isPreview,
+        },
+        {
+          label: 'Add MCP Server',
+          value: 'action-add-mcp',
+          icon: McpIcon,
+          onSelect: () => {
+            setOpen(false)
+            window.dispatchEvent(new CustomEvent('open-settings', { detail: { tab: 'mcp' } }))
+          },
+          disabled: isPreview,
+        },
+      ],
+    })
+
+    // Custom Tools section
+    if (customTools.length > 0) {
+      groups.push({
+        section: 'Custom Tools',
+        items: customTools.map((customTool) => ({
+          label: customTool.title,
+          value: `custom-${customTool.id}`,
+          iconElement: createToolIcon('#3B82F6', WrenchIcon),
+          onSelect: () => {
+            const newTool: StoredTool = {
+              type: 'custom-tool',
+              customToolId: customTool.id,
+              usageControl: 'auto',
+              isExpanded: true,
+            }
+            setStoreValue([
+              ...selectedTools.map((tool) => ({ ...tool, isExpanded: false })),
+              newTool,
+            ])
+            setOpen(false)
+          },
+        })),
+      })
+    }
+
+    // MCP Tools section
+    if (availableMcpTools.length > 0) {
+      groups.push({
+        section: 'MCP Tools',
+        items: availableMcpTools.map((mcpTool) => {
+          const server = mcpServers.find((s) => s.id === mcpTool.serverId)
+          return {
+            label: mcpTool.name,
+            value: `mcp-${mcpTool.id}`,
+            iconElement: createToolIcon(mcpTool.bgColor || '#6366F1', mcpTool.icon || McpIcon),
+            onSelect: () => {
+              const newTool: StoredTool = {
+                type: 'mcp',
+                title: mcpTool.name,
+                toolId: mcpTool.id,
+                params: {
+                  serverId: mcpTool.serverId,
+                  ...(server?.url && { serverUrl: server.url }),
+                  toolName: mcpTool.name,
+                  serverName: mcpTool.serverName,
+                },
+                isExpanded: true,
+                usageControl: 'auto',
+                schema: {
+                  ...mcpTool.inputSchema,
+                  description: mcpTool.description,
+                },
+              }
+              handleMcpToolSelect(newTool, true)
+            },
+            disabled: isPreview || disabled,
+          }
+        }),
+      })
+    }
+
+    // Split tool blocks into built-in tools and integrations
+    const builtInTools = toolBlocks.filter((block) => BUILT_IN_TOOL_TYPES.has(block.type))
+    const integrations = toolBlocks.filter((block) => !BUILT_IN_TOOL_TYPES.has(block.type))
+
+    // Built-in Tools section
+    if (builtInTools.length > 0) {
+      groups.push({
+        section: 'Built-in Tools',
+        items: builtInTools.map((block) => ({
+          label: block.name,
+          value: `builtin-${block.type}`,
+          iconElement: createToolIcon(block.bgColor, block.icon),
+          onSelect: () => handleSelectTool(block),
+        })),
+      })
+    }
+
+    // Integrations section
+    if (integrations.length > 0) {
+      groups.push({
+        section: 'Integrations',
+        items: integrations.map((block) => ({
+          label: block.name,
+          value: `builtin-${block.type}`,
+          iconElement: createToolIcon(block.bgColor, block.icon),
+          onSelect: () => handleSelectTool(block),
+        })),
+      })
+    }
+
+    return groups
+  }, [
+    customTools,
+    availableMcpTools,
+    mcpServers,
+    toolBlocks,
+    isPreview,
+    disabled,
+    selectedTools,
+    setStoreValue,
+    handleMcpToolSelect,
+    handleSelectTool,
+  ])
+
   const toolRequiresOAuth = (toolId: string): boolean => {
     const toolParams = getToolParametersConfig(toolId)
     return toolParams?.toolConfig?.oauth?.required || false
@@ -1458,10 +1640,15 @@ export function ToolInput({
   }
 
   /**
-   * Evaluates parameter conditions to determine if a parameter should be visible
+   * Evaluates parameter conditions to determine if a parameter should be visible.
+   *
+   * @remarks
+   * Supports field value matching with arrays, negation via `not`, and
+   * compound conditions via `and`. Used for conditional parameter visibility.
+   *
    * @param param - The parameter configuration with optional condition
-   * @param tool - The current tool instance with its values
-   * @returns True if the parameter should be shown based on its condition
+   * @param tool - The current tool instance with its parameter values
+   * @returns `true` if the parameter should be shown based on its condition
    */
   const evaluateParameterCondition = (param: any, tool: StoredTool): boolean => {
     if (!('uiComponent' in param) || !param.uiComponent?.condition) return true
@@ -1506,13 +1693,19 @@ export function ToolInput({
   }
 
   /**
-   * Renders the appropriate UI component for a tool parameter
-   * @param param - The parameter configuration
+   * Renders the appropriate UI component for a tool parameter.
+   *
+   * @remarks
+   * Supports multiple input types including dropdown, switch, long-input,
+   * short-input, file-selector, table, slider, and more. Falls back to
+   * ShortInput for unknown types.
+   *
+   * @param param - The parameter configuration defining the input type
    * @param value - The current parameter value
    * @param onChange - Callback to handle value changes
    * @param toolIndex - Index of the tool in the selected tools array
-   * @param currentToolParams - Current values of all tool parameters
-   * @returns JSX element for the parameter input
+   * @param currentToolParams - Current values of all tool parameters for dependencies
+   * @returns JSX element for the parameter input component
    */
   const renderParameterInput = (
     param: ToolParameterConfig,
@@ -1821,727 +2014,440 @@ export function ToolInput({
 
   return (
     <div className='w-full space-y-[8px]'>
-      {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-[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
-              </div>
-            </div>
-          </PopoverTrigger>
-          <PopoverContent
-            maxHeight={240}
-            className='w-[var(--radix-popover-trigger-width)]'
-            align='start'
-            sideOffset={6}
-          >
-            <ToolCommand.Root filter={customFilter} searchQuery={searchQuery}>
-              <CommandKeyboardWrapper>
-                <PopoverSearch placeholder='Search tools...' onValueChange={setSearchQuery} />
-                <PopoverScrollArea>
-                  <ToolCommand.List>
-                    <ToolCommand.Empty>No tools found</ToolCommand.Empty>
-
-                    <ToolCommand.Item
-                      value='Create Tool'
-                      onSelect={() => {
-                        if (!isPreview) {
-                          setCustomToolModalOpen(true)
-                          setOpen(false)
-                        }
-                      }}
-                      disabled={isPreview}
-                    >
-                      <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
-                      <span className='truncate'>Create Tool</span>
-                    </ToolCommand.Item>
-
-                    <ToolCommand.Item
-                      value='Add MCP Server'
-                      onSelect={() => {
-                        if (!isPreview) {
-                          setOpen(false)
-                          window.dispatchEvent(
-                            new CustomEvent('open-settings', { detail: { tab: 'mcp' } })
-                          )
-                        }
-                      }}
-                      disabled={isPreview}
-                    >
-                      <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
-                      <span className='truncate'>Add MCP Server</span>
-                    </ToolCommand.Item>
-
-                    {/* Display saved custom tools at the top */}
-                    {(() => {
-                      const matchingCustomTools = customTools.filter(
-                        (tool) => customFilter(tool.title, searchQuery || '') > 0
-                      )
-                      if (matchingCustomTools.length === 0) return null
-
-                      return (
-                        <>
-                          <PopoverSection>Custom Tools</PopoverSection>
-                          {matchingCustomTools.map((customTool) => (
-                            <ToolCommand.Item
-                              key={customTool.id}
-                              value={customTool.title}
-                              onSelect={() => {
-                                // Store minimal reference - only ID, usageControl, isExpanded
-                                // Everything else (title, toolId, params) loaded dynamically
-                                const newTool: StoredTool = {
-                                  type: 'custom-tool',
-                                  customToolId: customTool.id,
-                                  usageControl: 'auto',
-                                  isExpanded: true,
-                                }
+      {/* Add Tool Combobox - always at top */}
+      <Combobox
+        options={[]}
+        groups={toolGroups}
+        placeholder='Add tool...'
+        disabled={disabled}
+        searchable
+        searchPlaceholder='Search tools...'
+        maxHeight={240}
+        emptyMessage='No tools found'
+        onOpenChange={setOpen}
+      />
 
-                                setStoreValue([
-                                  ...selectedTools.map((tool) => ({
-                                    ...tool,
-                                    isExpanded: false,
-                                  })),
-                                  newTool,
-                                ])
-                                setOpen(false)
-                              }}
-                            >
-                              <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded bg-blue-500'>
-                                <WrenchIcon className='h-[11px] w-[11px] text-white' />
-                              </div>
-                              <span className='truncate'>{customTool.title}</span>
-                            </ToolCommand.Item>
-                          ))}
-                        </>
-                      )
-                    })()}
+      {/* Selected Tools List */}
+      {selectedTools.length > 0 &&
+        selectedTools.map((tool, toolIndex) => {
+          // Handle custom tools and MCP tools differently
+          const isCustomTool = tool.type === 'custom-tool'
+          const isMcpTool = tool.type === 'mcp'
+          const toolBlock =
+            !isCustomTool && !isMcpTool
+              ? toolBlocks.find((block) => block.type === tool.type)
+              : null
 
-                    {/* Display MCP tools (only from available servers) */}
-                    <McpToolsList
-                      mcpTools={availableMcpTools}
-                      mcpServers={mcpServers}
-                      searchQuery={searchQuery || ''}
-                      customFilter={customFilter}
-                      onToolSelect={handleMcpToolSelect}
-                      disabled={isPreview || disabled}
-                    />
-
-                    {/* Display built-in tools */}
-                    {(() => {
-                      const matchingBlocks = toolBlocks.filter(
-                        (block) => customFilter(block.name, searchQuery || '') > 0
-                      )
-                      if (matchingBlocks.length === 0) return null
+          // Get the current tool ID (may change based on operation)
+          const currentToolId =
+            !isCustomTool && !isMcpTool
+              ? getToolIdForOperation(tool.type, tool.operation) || tool.toolId || ''
+              : tool.toolId || ''
 
-                      return (
-                        <>
-                          <PopoverSection>Built-in Tools</PopoverSection>
-                          {matchingBlocks.map((block) => (
-                            <ToolCommand.Item
-                              key={block.type}
-                              value={block.name}
-                              onSelect={() => handleSelectTool(block)}
-                            >
-                              <div
-                                className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded'
-                                style={{ background: block.bgColor }}
-                              >
-                                <IconComponent
-                                  icon={block.icon}
-                                  className='h-[11px] w-[11px] text-white'
-                                />
-                              </div>
-                              <span className='truncate'>{block.name}</span>
-                            </ToolCommand.Item>
-                          ))}
-                        </>
-                      )
-                    })()}
-                  </ToolCommand.List>
-                </PopoverScrollArea>
-              </CommandKeyboardWrapper>
-            </ToolCommand.Root>
-          </PopoverContent>
-        </Popover>
-      ) : (
-        <>
-          {selectedTools.map((tool, toolIndex) => {
-            // Handle custom tools and MCP tools differently
-            const isCustomTool = tool.type === 'custom-tool'
-            const isMcpTool = tool.type === 'mcp'
-            const toolBlock =
-              !isCustomTool && !isMcpTool
-                ? toolBlocks.find((block) => block.type === tool.type)
-                : null
-
-            // Get the current tool ID (may change based on operation)
-            const currentToolId =
-              !isCustomTool && !isMcpTool
-                ? getToolIdForOperation(tool.type, tool.operation) || tool.toolId || ''
-                : tool.toolId || ''
-
-            // Get tool parameters using the new utility with block type for UI components
-            const toolParams =
-              !isCustomTool && !isMcpTool && currentToolId
-                ? getToolParametersConfig(currentToolId, tool.type)
-                : null
-
-            // For custom tools, resolve from reference (new format) or use inline (legacy)
-            const resolvedCustomTool = isCustomTool
-              ? resolveCustomToolFromReference(tool, customTools)
+          // Get tool parameters using the new utility with block type for UI components
+          const toolParams =
+            !isCustomTool && !isMcpTool && currentToolId
+              ? getToolParametersConfig(currentToolId, tool.type)
               : null
 
-            // Derive title and schema from resolved tool or inline data
-            const customToolTitle = isCustomTool
-              ? tool.title || resolvedCustomTool?.title || 'Unknown Tool'
-              : null
-            const customToolSchema = isCustomTool ? tool.schema || resolvedCustomTool?.schema : null
-            const customToolParams =
-              isCustomTool && customToolSchema?.function?.parameters?.properties
-                ? Object.entries(customToolSchema.function.parameters.properties || {}).map(
-                    ([paramId, param]: [string, any]) => ({
-                      id: paramId,
-                      type: param.type || 'string',
-                      description: param.description || '',
-                      visibility: (customToolSchema.function.parameters.required?.includes(paramId)
-                        ? 'user-or-llm'
-                        : 'user-only') as 'user-or-llm' | 'user-only' | 'llm-only' | 'hidden',
-                    })
-                  )
-                : []
-
-            // For MCP tools, extract parameters from input schema
-            // Use cached schema from tool object if available, otherwise fetch from mcpTools
-            const mcpTool = isMcpTool ? mcpTools.find((t) => t.id === tool.toolId) : null
-            const mcpToolSchema = isMcpTool ? tool.schema || mcpTool?.inputSchema : null
-            const mcpToolParams =
-              isMcpTool && mcpToolSchema?.properties
-                ? Object.entries(mcpToolSchema.properties || {}).map(
-                    ([paramId, param]: [string, any]) => ({
-                      id: paramId,
-                      type: param.type || 'string',
-                      description: param.description || '',
-                      visibility: (mcpToolSchema.required?.includes(paramId)
-                        ? 'user-or-llm'
-                        : 'user-only') as 'user-or-llm' | 'user-only' | 'llm-only' | 'hidden',
-                    })
-                  )
-                : []
-
-            // Get all parameters to display
-            const displayParams = isCustomTool
-              ? customToolParams
-              : isMcpTool
-                ? mcpToolParams
-                : toolParams?.userInputParameters || []
-
-            // Check if tool requires OAuth
-            const requiresOAuth =
-              !isCustomTool && !isMcpTool && currentToolId && toolRequiresOAuth(currentToolId)
-            const oauthConfig =
-              !isCustomTool && !isMcpTool && currentToolId
-                ? getToolOAuthConfig(currentToolId)
-                : null
-
-            // Tools are always expandable so users can access the interface
-            const isExpandedForDisplay = isPreview
+          // For custom tools, resolve from reference (new format) or use inline (legacy)
+          const resolvedCustomTool = isCustomTool
+            ? resolveCustomToolFromReference(tool, customTools)
+            : null
+
+          // Derive title and schema from resolved tool or inline data
+          const customToolTitle = isCustomTool
+            ? tool.title || resolvedCustomTool?.title || 'Unknown Tool'
+            : null
+          const customToolSchema = isCustomTool ? tool.schema || resolvedCustomTool?.schema : null
+          const customToolParams =
+            isCustomTool && customToolSchema?.function?.parameters?.properties
+              ? Object.entries(customToolSchema.function.parameters.properties || {}).map(
+                  ([paramId, param]: [string, any]) => ({
+                    id: paramId,
+                    type: param.type || 'string',
+                    description: param.description || '',
+                    visibility: (customToolSchema.function.parameters.required?.includes(paramId)
+                      ? 'user-or-llm'
+                      : 'user-only') as 'user-or-llm' | 'user-only' | 'llm-only' | 'hidden',
+                  })
+                )
+              : []
+
+          // For MCP tools, extract parameters from input schema
+          // Use cached schema from tool object if available, otherwise fetch from mcpTools
+          const mcpTool = isMcpTool ? mcpTools.find((t) => t.id === tool.toolId) : null
+          const mcpToolSchema = isMcpTool ? tool.schema || mcpTool?.inputSchema : null
+          const mcpToolParams =
+            isMcpTool && mcpToolSchema?.properties
+              ? Object.entries(mcpToolSchema.properties || {}).map(
+                  ([paramId, param]: [string, any]) => ({
+                    id: paramId,
+                    type: param.type || 'string',
+                    description: param.description || '',
+                    visibility: (mcpToolSchema.required?.includes(paramId)
+                      ? 'user-or-llm'
+                      : 'user-only') as 'user-or-llm' | 'user-only' | 'llm-only' | 'hidden',
+                  })
+                )
+              : []
+
+          // Get all parameters to display
+          const displayParams = isCustomTool
+            ? customToolParams
+            : isMcpTool
+              ? mcpToolParams
+              : toolParams?.userInputParameters || []
+
+          // Check if tool requires OAuth
+          const requiresOAuth =
+            !isCustomTool && !isMcpTool && currentToolId && toolRequiresOAuth(currentToolId)
+          const oauthConfig =
+            !isCustomTool && !isMcpTool && currentToolId ? getToolOAuthConfig(currentToolId) : null
+
+          // Determine if tool has expandable body content
+          const hasOperations = !isCustomTool && !isMcpTool && hasMultipleOperations(tool.type)
+          const filteredDisplayParams = displayParams.filter((param) =>
+            evaluateParameterCondition(param, tool)
+          )
+          const hasToolBody =
+            hasOperations || (requiresOAuth && oauthConfig) || filteredDisplayParams.length > 0
+
+          // Only show expansion if tool has body content
+          const isExpandedForDisplay = hasToolBody
+            ? isPreview
               ? (previewExpanded[toolIndex] ?? !!tool.isExpanded)
               : !!tool.isExpanded
-
-            return (
+            : false
+
+          return (
+            <div
+              key={`${tool.customToolId || tool.toolId || toolIndex}-${toolIndex}`}
+              className={cn(
+                'group relative flex flex-col overflow-hidden rounded-[4px] border border-[var(--border-1)] 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'
+                  : '',
+                selectedTools.length > 1 && !isPreview && !disabled && 'active:cursor-grabbing'
+              )}
+              draggable={selectedTools.length > 1 && !isPreview && !disabled}
+              onDragStart={(e) => handleDragStart(e, toolIndex)}
+              onDragEnd={handleDragEnd}
+              onDragOver={(e) => handleDragOver(e, toolIndex)}
+              onDrop={(e) => handleDrop(e, toolIndex)}
+            >
               <div
-                key={`${tool.customToolId || tool.toolId || toolIndex}-${toolIndex}`}
                 className={cn(
-                  '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'
-                    : ''
+                  'flex items-center justify-between gap-[8px] px-[8px] py-[6.5px]',
+                  (isCustomTool || hasToolBody) && 'cursor-pointer'
                 )}
-                onDragOver={(e) => handleDragOver(e, toolIndex)}
-                onDrop={(e) => handleDrop(e, toolIndex)}
+                onClick={() => {
+                  if (isCustomTool) {
+                    handleEditCustomTool(toolIndex)
+                  } else if (hasToolBody) {
+                    toggleToolExpansion(toolIndex)
+                  }
+                }}
               >
-                <div
-                  className={cn(
-                    'flex items-center justify-between gap-[8px] px-[10px] py-[8px]',
-                    isExpandedForDisplay &&
-                      !isCustomTool &&
-                      'border-[var(--border-strong)] border-b',
-                    'cursor-pointer',
-                    selectedTools.length > 1 && !isPreview && !disabled
-                      ? 'cursor-grab active:cursor-grabbing'
-                      : ''
-                  )}
-                  draggable={selectedTools.length > 1 && !isPreview && !disabled}
-                  onDragStart={(e) => handleDragStart(e, toolIndex)}
-                  onDragEnd={handleDragEnd}
-                  onClick={() => {
-                    if (isCustomTool) {
-                      handleEditCustomTool(toolIndex)
-                    } else {
-                      toggleToolExpansion(toolIndex)
-                    }
-                  }}
-                >
-                  <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
-                    <div
-                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
-                      style={{
-                        backgroundColor: isCustomTool
-                          ? '#3B82F6'
-                          : isMcpTool
-                            ? mcpTool?.bgColor || '#6366F1'
-                            : toolBlock?.bgColor,
-                      }}
-                    >
-                      {isCustomTool ? (
-                        <WrenchIcon className='h-[10px] w-[10px] text-white' />
-                      ) : isMcpTool ? (
-                        <IconComponent icon={McpIcon} className='h-[10px] w-[10px] text-white' />
-                      ) : (
-                        <IconComponent
-                          icon={toolBlock?.icon}
-                          className='h-[10px] w-[10px] text-white'
-                        />
-                      )}
-                    </div>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
-                      {isCustomTool ? customToolTitle : tool.title}
-                    </span>
-                    {isMcpTool &&
-                      !mcpDataLoading &&
-                      (() => {
-                        const issue = getMcpToolIssue(tool)
-                        if (!issue) return null
-                        const { getIssueBadgeLabel } = require('@/lib/mcp/tool-validation')
-                        const serverId = tool.params?.serverId
-                        return (
-                          <div
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              e.preventDefault()
-                              openSettingsModal({ section: 'mcp', mcpServerId: serverId })
-                            }}
-                          >
-                            <Tooltip.Root>
-                              <Tooltip.Trigger asChild>
-                                <Badge
-                                  variant='outline'
-                                  className='cursor-pointer transition-colors hover:bg-[var(--warning)]/10'
-                                  style={{
-                                    borderColor: 'var(--warning)',
-                                    color: 'var(--warning)',
-                                  }}
-                                >
-                                  {getIssueBadgeLabel(issue)}
-                                </Badge>
-                              </Tooltip.Trigger>
-                              <Tooltip.Content>
-                                <span className='text-sm'>
-                                  {issue.message} · Click to open settings
-                                </span>
-                              </Tooltip.Content>
-                            </Tooltip.Root>
-                          </div>
-                        )
-                      })()}
+                <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                  <div
+                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    style={{
+                      backgroundColor: isCustomTool
+                        ? '#3B82F6'
+                        : isMcpTool
+                          ? mcpTool?.bgColor || '#6366F1'
+                          : toolBlock?.bgColor,
+                    }}
+                  >
+                    {isCustomTool ? (
+                      <WrenchIcon className='h-[10px] w-[10px] text-white' />
+                    ) : isMcpTool ? (
+                      <IconComponent icon={McpIcon} className='h-[10px] w-[10px] text-white' />
+                    ) : (
+                      <IconComponent
+                        icon={toolBlock?.icon}
+                        className='h-[10px] w-[10px] text-white'
+                      />
+                    )}
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
-                    {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
-                      <Popover
-                        open={usageControlPopoverIndex === toolIndex}
-                        onOpenChange={(open) =>
-                          setUsageControlPopoverIndex(open ? toolIndex : null)
-                        }
-                      >
-                        <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'
-                          >
-                            {tool.usageControl === 'auto' && 'Auto'}
-                            {tool.usageControl === 'force' && 'Force'}
-                            {tool.usageControl === 'none' && 'None'}
-                            {!tool.usageControl && 'Auto'}
-                          </button>
-                        </PopoverTrigger>
-                        <PopoverContent
-                          side='bottom'
-                          align='end'
-                          sideOffset={8}
+                  <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                    {isCustomTool ? customToolTitle : tool.title}
+                  </span>
+                  {isMcpTool &&
+                    !mcpDataLoading &&
+                    (() => {
+                      const issue = getMcpToolIssue(tool)
+                      if (!issue) return null
+                      const { getIssueBadgeLabel } = require('@/lib/mcp/tool-validation')
+                      const serverId = tool.params?.serverId
+                      return (
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <Badge
+                              variant='amber'
+                              className='cursor-pointer'
+                              size='sm'
+                              dot
+                              onClick={(e: React.MouseEvent) => {
+                                e.stopPropagation()
+                                e.preventDefault()
+                                openSettingsModal({ section: 'mcp', mcpServerId: serverId })
+                              }}
+                            >
+                              {getIssueBadgeLabel(issue)}
+                            </Badge>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>{issue.message}: click to open settings</Tooltip.Content>
+                        </Tooltip.Root>
+                      )
+                    })()}
+                </div>
+                <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
+                    <Popover
+                      open={usageControlPopoverIndex === toolIndex}
+                      onOpenChange={(open) => setUsageControlPopoverIndex(open ? toolIndex : null)}
+                    >
+                      <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()}
-                          className='gap-[2px]'
+                          aria-label='Tool usage control'
                         >
-                          <PopoverItem
-                            active={(tool.usageControl || 'auto') === 'auto'}
-                            onClick={() => {
-                              handleUsageControlChange(toolIndex, 'auto')
-                              setUsageControlPopoverIndex(null)
-                            }}
-                          >
-                            Auto{' '}
-                            <span className='text-[var(--text-tertiary)]'>(model decides)</span>
-                          </PopoverItem>
-                          <PopoverItem
-                            active={tool.usageControl === 'force'}
-                            onClick={() => {
-                              handleUsageControlChange(toolIndex, 'force')
-                              setUsageControlPopoverIndex(null)
-                            }}
-                          >
-                            Force <span className='text-[var(--text-tertiary)]'>(always use)</span>
-                          </PopoverItem>
-                          <PopoverItem
-                            active={tool.usageControl === 'none'}
-                            onClick={() => {
-                              handleUsageControlChange(toolIndex, 'none')
-                              setUsageControlPopoverIndex(null)
-                            }}
-                          >
-                            None
-                          </PopoverItem>
-                        </PopoverContent>
-                      </Popover>
-                    )}
-                    <button
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleRemoveTool(toolIndex)
-                      }}
-                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
-                      aria-label='Remove tool'
-                    >
-                      <XIcon className='h-[13px] w-[13px]' />
-                    </button>
-                  </div>
+                          {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]'
+                        border
+                      >
+                        <PopoverItem
+                          active={(tool.usageControl || 'auto') === 'auto'}
+                          onClick={() => {
+                            handleUsageControlChange(toolIndex, 'auto')
+                            setUsageControlPopoverIndex(null)
+                          }}
+                        >
+                          Auto <span className='text-[var(--text-tertiary)]'>(model decides)</span>
+                        </PopoverItem>
+                        <PopoverItem
+                          active={tool.usageControl === 'force'}
+                          onClick={() => {
+                            handleUsageControlChange(toolIndex, 'force')
+                            setUsageControlPopoverIndex(null)
+                          }}
+                        >
+                          Force <span className='text-[var(--text-tertiary)]'>(always use)</span>
+                        </PopoverItem>
+                        <PopoverItem
+                          active={tool.usageControl === 'none'}
+                          onClick={() => {
+                            handleUsageControlChange(toolIndex, 'none')
+                            setUsageControlPopoverIndex(null)
+                          }}
+                        >
+                          None
+                        </PopoverItem>
+                      </PopoverContent>
+                    </Popover>
+                  )}
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleRemoveTool(toolIndex)
+                    }}
+                    className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                    aria-label='Remove tool'
+                  >
+                    <XIcon className='h-[13px] w-[13px]' />
+                  </button>
                 </div>
+              </div>
 
-                {!isCustomTool && isExpandedForDisplay && (
-                  <div className='space-y-[12px] overflow-visible p-[10px]'>
-                    {/* Operation dropdown for tools with multiple operations */}
-                    {(() => {
-                      const hasOperations = hasMultipleOperations(tool.type)
-                      const operationOptions = hasOperations ? getOperationOptions(tool.type) : []
-
-                      return hasOperations && operationOptions.length > 0 ? (
-                        <div className='relative space-y-[6px]'>
-                          <div className='font-medium text-[13px] text-[var(--text-tertiary)]'>
-                            Operation
-                          </div>
-                          <Combobox
-                            options={operationOptions
-                              .filter((option) => option.id !== '')
-                              .map((option) => ({
-                                label: option.label,
-                                value: option.id,
-                              }))}
-                            value={tool.operation || operationOptions[0].id}
-                            onChange={(value) => handleOperationChange(toolIndex, value)}
-                            placeholder='Select operation'
-                            disabled={disabled}
-                          />
-                        </div>
-                      ) : null
-                    })()}
-
-                    {/* OAuth credential selector if required */}
-                    {requiresOAuth && oauthConfig && (
-                      <div className='relative min-w-0 space-y-[6px]'>
-                        <div className='font-medium text-[13px] text-[var(--text-tertiary)]'>
-                          Account
-                        </div>
-                        <div className='w-full min-w-0'>
-                          <ToolCredentialSelector
-                            value={tool.params?.credential || ''}
-                            onChange={(value) => handleParamChange(toolIndex, 'credential', value)}
-                            provider={oauthConfig.provider as OAuthProvider}
-                            requiredScopes={
-                              toolBlock?.subBlocks?.find((sb) => sb.id === 'credential')
-                                ?.requiredScopes ||
-                              getCanonicalScopesForProvider(oauthConfig.provider)
-                            }
-                            label={`Select ${oauthConfig.provider} account`}
-                            serviceId={oauthConfig.provider}
-                            disabled={disabled}
-                          />
+              {!isCustomTool && isExpandedForDisplay && (
+                <div className='flex flex-col gap-[10px] overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[8px] py-[8px]'>
+                  {/* Operation dropdown for tools with multiple operations */}
+                  {(() => {
+                    const hasOperations = hasMultipleOperations(tool.type)
+                    const operationOptions = hasOperations ? getOperationOptions(tool.type) : []
+
+                    return hasOperations && operationOptions.length > 0 ? (
+                      <div className='relative space-y-[6px]'>
+                        <div className='font-medium text-[13px] text-[var(--text-primary)]'>
+                          Operation
                         </div>
+                        <Combobox
+                          options={operationOptions
+                            .filter((option) => option.id !== '')
+                            .map((option) => ({
+                              label: option.label,
+                              value: option.id,
+                            }))}
+                          value={tool.operation || operationOptions[0].id}
+                          onChange={(value) => handleOperationChange(toolIndex, value)}
+                          placeholder='Select operation'
+                          disabled={disabled}
+                        />
                       </div>
-                    )}
-
-                    {/* Tool parameters */}
-                    {(() => {
-                      const filteredParams = displayParams.filter((param) =>
-                        evaluateParameterCondition(param, tool)
-                      )
-                      const groupedParams: { [key: string]: ToolParameterConfig[] } = {}
-                      const standaloneParams: ToolParameterConfig[] = []
-
-                      // Group checkbox-list parameters by their UI component title
-                      filteredParams.forEach((param) => {
-                        const paramConfig = param as ToolParameterConfig
-                        if (
-                          paramConfig.uiComponent?.type === 'checkbox-list' &&
-                          paramConfig.uiComponent?.title
-                        ) {
-                          const groupKey = paramConfig.uiComponent.title
-                          if (!groupedParams[groupKey]) {
-                            groupedParams[groupKey] = []
+                    ) : null
+                  })()}
+
+                  {/* OAuth credential selector if required */}
+                  {requiresOAuth && oauthConfig && (
+                    <div className='relative min-w-0 space-y-[6px]'>
+                      <div className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Account
+                      </div>
+                      <div className='w-full min-w-0'>
+                        <ToolCredentialSelector
+                          value={tool.params?.credential || ''}
+                          onChange={(value) => handleParamChange(toolIndex, 'credential', value)}
+                          provider={oauthConfig.provider as OAuthProvider}
+                          requiredScopes={
+                            toolBlock?.subBlocks?.find((sb) => sb.id === 'credential')
+                              ?.requiredScopes ||
+                            getCanonicalScopesForProvider(oauthConfig.provider)
                           }
-                          groupedParams[groupKey].push(paramConfig)
-                        } else {
-                          standaloneParams.push(paramConfig)
+                          label={`Select ${oauthConfig.provider} account`}
+                          serviceId={oauthConfig.provider}
+                          disabled={disabled}
+                        />
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Tool parameters */}
+                  {(() => {
+                    const filteredParams = displayParams.filter((param) =>
+                      evaluateParameterCondition(param, tool)
+                    )
+                    const groupedParams: { [key: string]: ToolParameterConfig[] } = {}
+                    const standaloneParams: ToolParameterConfig[] = []
+
+                    // Group checkbox-list parameters by their UI component title
+                    filteredParams.forEach((param) => {
+                      const paramConfig = param as ToolParameterConfig
+                      if (
+                        paramConfig.uiComponent?.type === 'checkbox-list' &&
+                        paramConfig.uiComponent?.title
+                      ) {
+                        const groupKey = paramConfig.uiComponent.title
+                        if (!groupedParams[groupKey]) {
+                          groupedParams[groupKey] = []
                         }
-                      })
-
-                      const renderedElements: React.ReactNode[] = []
-
-                      // Render grouped checkbox-lists
-                      Object.entries(groupedParams).forEach(([groupTitle, params]) => {
-                        const firstParam = params[0] as ToolParameterConfig
-                        const groupValue = JSON.stringify(
-                          params.reduce(
-                            (acc, p) => ({ ...acc, [p.id]: tool.params?.[p.id] === 'true' }),
-                            {}
-                          )
+                        groupedParams[groupKey].push(paramConfig)
+                      } else {
+                        standaloneParams.push(paramConfig)
+                      }
+                    })
+
+                    const renderedElements: React.ReactNode[] = []
+
+                    // Render grouped checkbox-lists
+                    Object.entries(groupedParams).forEach(([groupTitle, params]) => {
+                      const firstParam = params[0] as ToolParameterConfig
+                      const groupValue = JSON.stringify(
+                        params.reduce(
+                          (acc, p) => ({ ...acc, [p.id]: tool.params?.[p.id] === 'true' }),
+                          {}
                         )
+                      )
 
-                        renderedElements.push(
-                          <div
-                            key={`group-${groupTitle}`}
-                            className='relative min-w-0 space-y-[6px]'
-                          >
-                            <div className='flex items-center font-medium text-[13px] text-[var(--text-tertiary)]'>
-                              {groupTitle}
-                            </div>
-                            <div className='relative w-full min-w-0'>
-                              <CheckboxListSyncWrapper
+                      renderedElements.push(
+                        <div key={`group-${groupTitle}`} className='relative min-w-0 space-y-[6px]'>
+                          <div className='flex items-center font-medium text-[13px] text-[var(--text-primary)]'>
+                            {groupTitle}
+                          </div>
+                          <div className='relative w-full min-w-0'>
+                            <CheckboxListSyncWrapper
+                              blockId={blockId}
+                              paramId={`group-${groupTitle}`}
+                              value={groupValue}
+                              onChange={(value) => {
+                                try {
+                                  const parsed = JSON.parse(value)
+                                  params.forEach((param) => {
+                                    handleParamChange(
+                                      toolIndex,
+                                      param.id,
+                                      parsed[param.id] ? 'true' : 'false'
+                                    )
+                                  })
+                                } catch (e) {
+                                  // Handle error
+                                }
+                              }}
+                              uiComponent={firstParam.uiComponent}
+                              disabled={disabled}
+                            />
+                          </div>
+                        </div>
+                      )
+                    })
+
+                    // Render standalone parameters
+                    standaloneParams.forEach((param) => {
+                      renderedElements.push(
+                        <div key={param.id} className='relative min-w-0 space-y-[6px]'>
+                          <div className='flex items-center font-medium text-[13px] text-[var(--text-primary)]'>
+                            {param.uiComponent?.title || formatParameterLabel(param.id)}
+                            {param.required && param.visibility === 'user-only' && (
+                              <span className='ml-1'>*</span>
+                            )}
+                            {(!param.required || param.visibility !== 'user-only') && (
+                              <span className='ml-[6px] text-[12px] text-[var(--text-tertiary)]'>
+                                (optional)
+                              </span>
+                            )}
+                          </div>
+                          <div className='relative w-full min-w-0'>
+                            {param.uiComponent ? (
+                              renderParameterInput(
+                                param,
+                                tool.params?.[param.id] || '',
+                                (value) => handleParamChange(toolIndex, param.id, value),
+                                toolIndex,
+                                tool.params || {}
+                              )
+                            ) : (
+                              <ShortInput
                                 blockId={blockId}
-                                paramId={`group-${groupTitle}`}
-                                value={groupValue}
-                                onChange={(value) => {
-                                  try {
-                                    const parsed = JSON.parse(value)
-                                    params.forEach((param) => {
-                                      handleParamChange(
-                                        toolIndex,
-                                        param.id,
-                                        parsed[param.id] ? 'true' : 'false'
-                                      )
-                                    })
-                                  } catch (e) {
-                                    // Handle error
-                                  }
+                                subBlockId={`${subBlockId}-tool-${toolIndex}-${param.id}`}
+                                placeholder={
+                                  param.description ||
+                                  `Enter ${formatParameterLabel(param.id).toLowerCase()}`
+                                }
+                                password={isPasswordParameter(param.id)}
+                                config={{
+                                  id: `${subBlockId}-tool-${toolIndex}-${param.id}`,
+                                  type: 'short-input',
+                                  title: param.id,
                                 }}
-                                uiComponent={firstParam.uiComponent}
-                                disabled={disabled}
+                                value={tool.params?.[param.id] || ''}
+                                onChange={(value) => handleParamChange(toolIndex, param.id, value)}
                               />
-                            </div>
+                            )}
                           </div>
-                        )
-                      })
-
-                      // Render standalone parameters
-                      standaloneParams.forEach((param) => {
-                        renderedElements.push(
-                          <div key={param.id} className='relative min-w-0 space-y-[6px]'>
-                            <div className='flex items-center font-medium text-[13px] text-[var(--text-tertiary)]'>
-                              {param.uiComponent?.title || formatParameterLabel(param.id)}
-                              {param.required && param.visibility === 'user-only' && (
-                                <span className='ml-1 text-red-500'>*</span>
-                              )}
-                              {(!param.required || param.visibility !== 'user-only') && (
-                                <span className='ml-1 text-[var(--text-muted)] text-xs'>
-                                  (Optional)
-                                </span>
-                              )}
-                            </div>
-                            <div className='relative w-full min-w-0'>
-                              {param.uiComponent ? (
-                                renderParameterInput(
-                                  param,
-                                  tool.params?.[param.id] || '',
-                                  (value) => handleParamChange(toolIndex, param.id, value),
-                                  toolIndex,
-                                  tool.params || {}
-                                )
-                              ) : (
-                                <ShortInput
-                                  blockId={blockId}
-                                  subBlockId={`${subBlockId}-tool-${toolIndex}-${param.id}`}
-                                  placeholder={
-                                    param.description ||
-                                    `Enter ${formatParameterLabel(param.id).toLowerCase()}`
-                                  }
-                                  password={isPasswordParameter(param.id)}
-                                  config={{
-                                    id: `${subBlockId}-tool-${toolIndex}-${param.id}`,
-                                    type: 'short-input',
-                                    title: param.id,
-                                  }}
-                                  value={tool.params?.[param.id] || ''}
-                                  onChange={(value) =>
-                                    handleParamChange(toolIndex, param.id, value)
-                                  }
-                                />
-                              )}
-                            </div>
-                          </div>
-                        )
-                      })
+                        </div>
+                      )
+                    })
 
-                      return renderedElements
-                    })()}
-                  </div>
-                )}
-              </div>
-            )
-          })}
-
-          {/* 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-[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
+                    return renderedElements
+                  })()}
                 </div>
-              </div>
-            </PopoverTrigger>
-            <PopoverContent
-              maxHeight={240}
-              className='w-[var(--radix-popover-trigger-width)]'
-              align='start'
-              sideOffset={6}
-            >
-              <ToolCommand.Root filter={customFilter} searchQuery={searchQuery}>
-                <CommandKeyboardWrapper>
-                  <PopoverSearch placeholder='Search tools...' onValueChange={setSearchQuery} />
-                  <PopoverScrollArea>
-                    <ToolCommand.List>
-                      <ToolCommand.Empty>No tools found</ToolCommand.Empty>
-
-                      <ToolCommand.Item
-                        value='Create Tool'
-                        onSelect={() => {
-                          setOpen(false)
-                          setCustomToolModalOpen(true)
-                        }}
-                      >
-                        <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
-                        <span className='truncate'>Create Tool</span>
-                      </ToolCommand.Item>
-
-                      <ToolCommand.Item
-                        value='Add MCP Server'
-                        onSelect={() => {
-                          setOpen(false)
-                          window.dispatchEvent(
-                            new CustomEvent('open-settings', { detail: { tab: 'mcp' } })
-                          )
-                        }}
-                      >
-                        <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
-                        <span className='truncate'>Add MCP Server</span>
-                      </ToolCommand.Item>
-
-                      {/* Display saved custom tools at the top */}
-                      {(() => {
-                        const matchingCustomTools = customTools.filter(
-                          (tool) => customFilter(tool.title, searchQuery || '') > 0
-                        )
-                        if (matchingCustomTools.length === 0) return null
-
-                        return (
-                          <>
-                            <PopoverSection>Custom Tools</PopoverSection>
-                            {matchingCustomTools.map((customTool) => (
-                              <ToolCommand.Item
-                                key={customTool.id}
-                                value={customTool.title}
-                                onSelect={() => {
-                                  const newTool: StoredTool = {
-                                    type: 'custom-tool',
-                                    title: customTool.title,
-                                    toolId: `custom-${customTool.schema?.function?.name || 'unknown'}`,
-                                    params: {},
-                                    isExpanded: true,
-                                    schema: customTool.schema,
-                                    code: customTool.code,
-                                    usageControl: 'auto',
-                                  }
-
-                                  setStoreValue([
-                                    ...selectedTools.map((tool) => ({
-                                      ...tool,
-                                      isExpanded: false,
-                                    })),
-                                    newTool,
-                                  ])
-                                  setOpen(false)
-                                }}
-                              >
-                                <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded bg-blue-500'>
-                                  <WrenchIcon className='h-[11px] w-[11px] text-white' />
-                                </div>
-                                <span className='truncate'>{customTool.title}</span>
-                              </ToolCommand.Item>
-                            ))}
-                          </>
-                        )
-                      })()}
-
-                      {/* Display MCP tools (only from available servers) */}
-                      <McpToolsList
-                        mcpTools={availableMcpTools}
-                        mcpServers={mcpServers}
-                        searchQuery={searchQuery || ''}
-                        customFilter={customFilter}
-                        onToolSelect={handleMcpToolSelect}
-                        disabled={false}
-                      />
-
-                      {/* Display built-in tools */}
-                      {(() => {
-                        const matchingBlocks = toolBlocks.filter(
-                          (block) => customFilter(block.name, searchQuery || '') > 0
-                        )
-                        if (matchingBlocks.length === 0) return null
-
-                        return (
-                          <>
-                            <PopoverSection>Built-in Tools</PopoverSection>
-                            {matchingBlocks.map((block) => (
-                              <ToolCommand.Item
-                                key={block.type}
-                                value={block.name}
-                                onSelect={() => handleSelectTool(block)}
-                              >
-                                <div
-                                  className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded'
-                                  style={{ background: block.bgColor }}
-                                >
-                                  <IconComponent
-                                    icon={block.icon}
-                                    className='h-[11px] w-[11px] text-white'
-                                  />
-                                </div>
-                                <span className='truncate'>{block.name}</span>
-                              </ToolCommand.Item>
-                            ))}
-                          </>
-                        )
-                      })()}
-                    </ToolCommand.List>
-                  </PopoverScrollArea>
-                </CommandKeyboardWrapper>
-              </ToolCommand.Root>
-            </PopoverContent>
-          </Popover>
-        </>
-      )}
+              )}
+            </div>
+          )
+        })}
 
       {/* Custom Tool Modal */}
       <CustomToolModal
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 ab9f43f080..8fea2e43e1 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
@@ -367,12 +367,7 @@ export function TriggerSave({
             saveStatus === 'error' && 'bg-red-600 hover:bg-red-700'
           )}
         >
-          {saveStatus === 'saving' && (
-            <>
-              <div className='mr-2 h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-              Saving...
-            </>
-          )}
+          {saveStatus === 'saving' && 'Saving...'}
           {saveStatus === 'saved' && 'Saved'}
           {saveStatus === 'error' && 'Error'}
           {saveStatus === 'idle' && (webhookId ? 'Update Configuration' : 'Save Configuration')}
@@ -385,11 +380,7 @@ export function TriggerSave({
             disabled={disabled || isProcessing}
             className='h-[32px] rounded-[8px] px-[12px]'
           >
-            {deleteStatus === 'deleting' ? (
-              <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-            ) : (
-              <Trash className='h-[14px] w-[14px]' />
-            )}
+            <Trash className='h-[14px] w-[14px]' />
           </Button>
         )}
       </div>
@@ -410,16 +401,7 @@ export function TriggerSave({
               disabled={isGeneratingTestUrl || isProcessing}
               className='h-[32px] rounded-[8px] px-[12px]'
             >
-              {isGeneratingTestUrl ? (
-                <>
-                  <div className='mr-2 h-3 w-3 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-                  Generating…
-                </>
-              ) : testUrl ? (
-                'Regenerate'
-              ) : (
-                'Generate'
-              )}
+              {isGeneratingTestUrl ? 'Generating…' : testUrl ? 'Regenerate' : 'Generate'}
             </Button>
           </div>
           {testUrl ? (
@@ -456,7 +438,7 @@ export function TriggerSave({
         <ModalContent size='sm'>
           <ModalHeader>Delete Trigger</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to delete this trigger configuration? This will remove the
               webhook and stop all incoming triggers.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
@@ -466,11 +448,7 @@ export function TriggerSave({
             <Button variant='active' onClick={() => setShowDeleteDialog(false)}>
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleDeleteConfirm}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleDeleteConfirm}>
               Delete
             </Button>
           </ModalFooter>
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 4ba0dce443..b52792a651 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-[var(--surface-3)] dark:bg-[#1F1F1F]',
+                  'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
@@ -336,7 +336,7 @@ export function VariablesInput({
                 </div>
 
                 {!collapsed && (
-                  <div className='flex flex-col gap-[6px] border-[var(--border-strong)] border-t px-[10px] pt-[6px] pb-[10px]'>
+                  <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
                     <div className='flex flex-col gap-[4px]'>
                       <Label className='text-[13px]'>Variable</Label>
                       <Combobox
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 0fb5dc6eda..3275088067 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
@@ -54,7 +54,11 @@ export interface WandControlHandlers {
 }
 
 /**
- * Props for the `SubBlock` UI element. Renders a single configurable input within a workflow block.
+ * Props for the SubBlock component.
+ *
+ * @remarks
+ * SubBlock renders a single configurable input within a workflow block,
+ * supporting various input types, preview mode, and conditional requirements.
  */
 interface SubBlockProps {
   blockId: string
@@ -68,10 +72,14 @@ interface SubBlockProps {
 
 /**
  * Returns whether the field is required for validation.
+ *
+ * @remarks
  * Evaluates conditional requirements based on current field values.
- * @param config - The sub-block configuration
- * @param subBlockValues - Current values of all subblocks
- * @returns True if the field is required
+ * Supports boolean, condition objects, and functions that return conditions.
+ *
+ * @param config - The sub-block configuration containing requirement rules
+ * @param subBlockValues - Current values of all subblocks for condition evaluation
+ * @returns `true` if the field is required based on current context
  */
 const isFieldRequired = (config: SubBlockConfig, subBlockValues?: Record<string, any>): boolean => {
   if (!config.required) return false
@@ -126,10 +134,15 @@ const isFieldRequired = (config: SubBlockConfig, subBlockValues?: Record<string,
 
 /**
  * Retrieves the preview value for a specific sub-block.
+ *
+ * @remarks
+ * Only returns a value when in preview mode and subBlockValues are provided.
+ * Returns `null` if the value is not found in the subblock values.
+ *
  * @param config - The sub-block configuration
  * @param isPreview - Whether the component is in preview mode
  * @param subBlockValues - Optional record of sub-block values
- * @returns The preview value or undefined
+ * @returns The preview value, `null` if not found, or `undefined` if not in preview
  */
 const getPreviewValue = (
   config: SubBlockConfig,
@@ -142,11 +155,16 @@ const getPreviewValue = (
 
 /**
  * Renders the label with optional validation, description tooltips, and inline wand control.
- * @param config - The sub-block configuration
- * @param isValidJson - Whether the JSON is valid
- * @param wandState - Wand interaction state
+ *
+ * @remarks
+ * Handles JSON validation indicators for code blocks, required field markers,
+ * and AI generation (wand) input interface.
+ *
+ * @param config - The sub-block configuration defining the label content
+ * @param isValidJson - Whether the JSON content is valid (for code blocks)
+ * @param wandState - State and handlers for the AI wand feature
  * @param subBlockValues - Current values of all subblocks for evaluating conditional requirements
- * @returns The label JSX element or null if no title or for switch types
+ * @returns The label JSX element, or `null` for switch types or when no title is defined
  */
 const renderLabel = (
   config: SubBlockConfig,
@@ -251,9 +269,14 @@ const renderLabel = (
 
 /**
  * Compares props to prevent unnecessary re-renders.
+ *
+ * @remarks
+ * Used with React.memo to optimize performance by skipping re-renders
+ * when props haven't meaningfully changed.
+ *
  * @param prevProps - Previous component props
  * @param nextProps - Next component props
- * @returns True if props are equal (skip re-render)
+ * @returns `true` if props are equal and re-render should be skipped
  */
 const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): boolean => {
   return (
@@ -268,7 +291,21 @@ const arePropsEqual = (prevProps: SubBlockProps, nextProps: SubBlockProps): bool
 }
 
 /**
- * Renders a single workflow sub-block input based on `config.type`, supporting preview and disabled states.
+ * Renders a single workflow sub-block input based on config.type.
+ *
+ * @remarks
+ * Supports multiple input types including short-input, long-input, dropdown,
+ * combobox, slider, table, code, switch, tool-input, and many more.
+ * Handles preview mode, disabled states, and AI wand generation.
+ *
+ * @param blockId - The parent block identifier
+ * @param config - Configuration defining the input type and properties
+ * @param isPreview - Whether to render in preview mode
+ * @param subBlockValues - Current values of all subblocks
+ * @param disabled - Whether the input is disabled
+ * @param fieldDiffStatus - Optional diff status for visual indicators
+ * @param allowExpandInPreview - Whether to allow expanding in preview mode
+ * @returns The rendered sub-block input component
  */
 function SubBlockComponent({
   blockId,
@@ -297,7 +334,8 @@ function SubBlockComponent({
   const isWandEnabled = config.wandConfig?.enabled ?? false
 
   /**
-   * Handle wand icon click to activate inline prompt mode
+   * Handles wand icon click to activate inline prompt mode.
+   * Focuses the input after a brief delay to ensure DOM is ready.
    */
   const handleSearchClick = (): void => {
     setIsSearchActive(true)
@@ -307,7 +345,8 @@ function SubBlockComponent({
   }
 
   /**
-   * Handle search input blur - deactivate if empty and not streaming
+   * Handles search input blur event.
+   * Deactivates the search mode if the query is empty and not currently streaming.
    */
   const handleSearchBlur = (): void => {
     if (!searchQuery.trim() && !wandControlRef.current?.isWandStreaming) {
@@ -316,14 +355,17 @@ function SubBlockComponent({
   }
 
   /**
-   * Handle search query change
+   * Handles search query change.
+   *
+   * @param value - The new search query value
    */
   const handleSearchChange = (value: string): void => {
     setSearchQuery(value)
   }
 
   /**
-   * Handle search submit - trigger generation
+   * Handles search submit to trigger AI generation.
+   * Clears the query and deactivates search mode after submission.
    */
   const handleSearchSubmit = (): void => {
     if (searchQuery.trim() && wandControlRef.current) {
@@ -334,7 +376,8 @@ function SubBlockComponent({
   }
 
   /**
-   * Handle search cancel
+   * Handles search cancel to exit AI prompt mode.
+   * Clears the query and deactivates search mode.
    */
   const handleSearchCancel = (): void => {
     setSearchQuery('')
@@ -358,7 +401,13 @@ function SubBlockComponent({
   const isDisabled = gatedDisabled
 
   /**
-   * Selects and renders the appropriate input component for the current sub-block `config.type`.
+   * Selects and renders the appropriate input component based on config.type.
+   *
+   * @remarks
+   * Maps the config type to the corresponding input component with all
+   * necessary props. Falls back to an error message for unknown types.
+   *
+   * @returns The appropriate input component JSX element
    */
   const renderInput = (): JSX.Element => {
     switch (config.type) {
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 82351ac8a9..d3e2d78503 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
@@ -172,9 +172,9 @@ 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-[var(--surface-5)] px-[12px] py-[8px]'>
+      <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
         <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-          {(blockConfig || isSubflow) && (
+          {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
             <div
               className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px]'
               style={{ background: isSubflow ? subflowBgColor : blockConfig?.bgColor }}
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 ec6be45d92..1f752e0a61 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,7 +488,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
     >
       {/* Header */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'
+        className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'
         onClick={handleSearchClick}
       >
         <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
@@ -532,7 +532,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
             Triggers
           </div>
           <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-            <div ref={triggersContentRef} className='space-y-[4px] pb-[8px]'>
+            <div ref={triggersContentRef} className='space-y-[2px] pb-[8px]'>
               {filteredTriggers.map((trigger, index) => {
                 const Icon = trigger.icon
                 const isTriggerCapable = hasTriggerCapability(trigger)
@@ -554,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-[5.5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--surface-9)] active:cursor-grabbing',
-                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
+                      'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
+                      'cursor-pointer hover:bg-[var(--surface-5)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-5)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -567,7 +567,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: trigger.bgColor }}
                     >
                       {Icon && (
@@ -575,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-[9px] !w-[9px]'
+                            '!h-[10px] !w-[10px]'
                           )}
                         />
                       )}
@@ -614,7 +614,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
             Blocks
           </div>
           <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-            <div className='space-y-[4px] pb-[8px]'>
+            <div className='space-y-[2px] pb-[8px]'>
               {filteredBlocks.map((block, index) => {
                 const Icon = block.icon
                 return (
@@ -643,9 +643,9 @@ 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(--surface-9)] active:cursor-grabbing',
-                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
+                      'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
+                      'cursor-pointer hover:bg-[var(--surface-5)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-5)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -656,7 +656,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: block.bgColor }}
                     >
                       {Icon && (
@@ -664,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-[9px] !w-[9px]'
+                            '!h-[10px] !w-[10px]'
                           )}
                         />
                       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/workflow-controls/workflow-controls.tsx
index d5c05894f2..c3cbc08ba5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/workflow-controls/workflow-controls.tsx
@@ -1,10 +1,5 @@
-/**
- * @deprecated This component is deprecated and kept as reference only.
- */
-
 'use client'
 
-import { useStore } from 'reactflow'
 import { Button, Redo, Undo } from '@/components/emcn'
 import { useSession } from '@/lib/auth/auth-client'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
@@ -12,15 +7,10 @@ import { useUndoRedoStore } from '@/stores/undo-redo'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 /**
- * Workflow controls component that provides undo/redo and zoom functionality
- * Integrates directly into the panel header for easy access
+ * Workflow controls component that provides undo/redo functionality.
+ * Styled to align with the panel tab buttons.
  */
 export function WorkflowControls() {
-  // Subscribe to React Flow store so zoom % live-updates while zooming
-  const zoom = useStore((s: any) =>
-    Array.isArray(s.transform) ? s.transform[2] : s.viewport?.zoom
-  )
-
   const { undo, redo } = useCollaborativeWorkflow()
   const { activeWorkflowId } = useWorkflowRegistry()
   const { data: session } = useSession()
@@ -33,34 +23,28 @@ export function WorkflowControls() {
     return { undoSize: stack.undo.length, redoSize: stack.redo.length }
   })()
 
-  const currentZoom = Math.round(((zoom as number) || 1) * 100)
+  const canUndo = undoRedoSizes.undoSize > 0
+  const canRedo = undoRedoSizes.redoSize > 0
 
   return (
-    <div className='flex items-center gap-[4px]'>
-      {/* Undo/Redo Controls - Connected Two-Sided Button */}
-      <div className='flex gap-[1px]'>
-        <Button
-          className='h-[28px] rounded-r-none px-[8px] py-[5px] text-[12.5px]'
-          onClick={undo}
-          variant={undoRedoSizes.undoSize === 0 ? 'default' : 'active'}
-          title='Undo (Cmd+Z)'
-        >
-          <Undo className='h-[12px] w-[12px]' />
-        </Button>
-
-        <Button
-          className='h-[28px] rounded-l-none px-[8px] py-[5px] text-[12.5px]'
-          onClick={redo}
-          variant={undoRedoSizes.redoSize === 0 ? 'default' : 'active'}
-          title='Redo (Cmd+Shift+Z)'
-        >
-          <Redo className='h-[12px] w-[12px]' />
-        </Button>
-      </div>
-
-      {/* Zoom Badge */}
-      <Button className='flex h-[28px] w-[40px] items-center justify-center rounded-[4px] px-[8px] py-[5px] font-medium text-[12.5px]'>
-        {currentZoom}%
+    <div className='flex gap-[2px]'>
+      <Button
+        className='h-[28px] rounded-[6px] rounded-r-none border border-transparent px-[6px] py-[5px] hover:border-[var(--border-1)] hover:bg-[var(--surface-5)]'
+        onClick={undo}
+        variant={canUndo ? 'active' : 'ghost'}
+        disabled={!canUndo}
+        title='Undo (Cmd+Z)'
+      >
+        <Undo className='h-[12px] w-[12px]' />
+      </Button>
+      <Button
+        className='h-[28px] rounded-[6px] rounded-l-none border border-transparent px-[6px] py-[5px] hover:border-[var(--border-1)] hover:bg-[var(--surface-5)]'
+        onClick={redo}
+        variant={canRedo ? 'active' : 'ghost'}
+        disabled={!canRedo}
+        title='Redo (Cmd+Shift+Z)'
+      >
+        <Redo className='h-[12px] w-[12px]' />
       </Button>
     </div>
   )
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 fd214a521f..03efd2d636 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
@@ -362,10 +362,10 @@ export function Panel() {
           {/* Header */}
           <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
             {/* More and Chat */}
-            <div className='flex gap-[4px]'>
+            <div className='flex gap-[6px]'>
               <Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <PopoverTrigger asChild>
-                  <Button className='h-[32px] w-[32px]'>
+                  <Button className='h-[30px] w-[30px] rounded-[5px]'>
                     <MoreHorizontal />
                   </Button>
                 </PopoverTrigger>
@@ -418,7 +418,7 @@ export function Panel() {
                 </PopoverContent>
               </Popover>
               <Button
-                className='h-[32px] w-[32px]'
+                className='h-[30px] w-[30px] rounded-[5px]'
                 variant={isChatOpen ? 'active' : 'default'}
                 onClick={() => setIsChatOpen(!isChatOpen)}
               >
@@ -427,11 +427,11 @@ export function Panel() {
             </div>
 
             {/* Deploy and Run */}
-            <div className='flex gap-[4px]'>
+            <div className='flex gap-[6px]'>
               <Deploy activeWorkflowId={activeWorkflowId} userPermissions={userPermissions} />
               <Button
-                className='h-[32px] w-[61.5px] gap-[8px]'
-                variant={isExecuting ? 'active' : 'primary'}
+                className='h-[30px] gap-[8px] px-[10px]'
+                variant={isExecuting ? 'active' : 'tertiary'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
                 disabled={!isExecuting && isButtonDisabled}
               >
@@ -440,7 +440,7 @@ export function Panel() {
                 ) : (
                   <Play className='h-[11.5px] w-[11.5px]' />
                 )}
-                Run
+                {isExecuting ? 'Stop' : 'Run'}
               </Button>
             </div>
           </div>
@@ -449,7 +449,11 @@ 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] truncate px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
+                className={`h-[28px] truncate rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                  _hasHydrated && activeTab === 'copilot'
+                    ? 'border-[var(--border-1)]'
+                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                }`}
                 variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('copilot')}
                 data-tab-button='copilot'
@@ -457,7 +461,11 @@ 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)]'
+                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                  _hasHydrated && activeTab === 'toolbar'
+                    ? 'border-[var(--border-1)]'
+                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                }`}
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
@@ -465,7 +473,11 @@ 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)]'
+                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                  _hasHydrated && activeTab === 'editor'
+                    ? 'border-[var(--border-1)]'
+                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                }`}
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
@@ -474,7 +486,7 @@ export function Panel() {
               </Button>
             </div>
 
-            {/* Workflow Controls (Undo/Redo and Zoom) */}
+            {/* Workflow Controls (Undo/Redo) */}
             {/* <WorkflowControls /> */}
           </div>
 
@@ -534,7 +546,7 @@ export function Panel() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Workflow</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Deleting this workflow will permanently remove all associated blocks, executions, and
               configuration.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
@@ -548,12 +560,7 @@ export function Panel() {
             >
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleDeleteWorkflow}
-              disabled={isDeleting}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleDeleteWorkflow} disabled={isDeleting}>
               {isDeleting ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/skeleton-loading/skeleton-loading.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/skeleton-loading/skeleton-loading.tsx
deleted file mode 100644
index efb0d4659f..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/skeleton-loading/skeleton-loading.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-'use client'
-
-import { Bug, Copy, Layers, Play, Rocket, Trash2 } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-import { Skeleton } from '@/components/ui/skeleton'
-
-const SkeletonControlBar = () => {
-  return (
-    <div className='fixed top-4 right-4 z-20 flex items-center gap-1'>
-      {/* Delete Button */}
-      <Button
-        variant='outline'
-        className='h-12 w-12 cursor-not-allowed rounded-[11px] border-[hsl(var(--card-border))] bg-[hsl(var(--card-background))] text-[hsl(var(--card-text))] opacity-50 shadow-xs hover:border-[hsl(var(--card-border))] hover:bg-[hsl(var(--card-background))]'
-        disabled
-      >
-        <Trash2 className='h-5 w-5' />
-      </Button>
-
-      {/* Duplicate Button */}
-      <Button
-        variant='outline'
-        className='h-12 w-12 cursor-not-allowed rounded-[11px] border-[hsl(var(--card-border))] bg-[hsl(var(--card-background))] text-[hsl(var(--card-text))] opacity-50 shadow-xs hover:border-[hsl(var(--card-border))] hover:bg-[hsl(var(--card-background))] hover:bg-gray-100'
-        disabled
-      >
-        <Copy className='h-5 w-5' />
-      </Button>
-
-      {/* Auto Layout Button */}
-      <Button
-        variant='outline'
-        className='h-12 w-12 cursor-not-allowed rounded-[11px] border-[hsl(var(--card-border))] bg-[hsl(var(--card-background))] text-[hsl(var(--card-text))] opacity-50 shadow-xs hover:border-[hsl(var(--card-border))] hover:bg-[hsl(var(--card-background))] hover:bg-gray-100'
-        disabled
-      >
-        <Layers className='h-5 w-5' />
-      </Button>
-
-      {/* Debug Mode Button */}
-      <Button
-        variant='outline'
-        className='h-12 w-12 cursor-not-allowed rounded-[11px] border-[hsl(var(--card-border))] bg-[hsl(var(--card-background))] text-[hsl(var(--card-text))] opacity-50 shadow-xs hover:border-[hsl(var(--card-border))] hover:bg-[hsl(var(--card-background))] hover:bg-gray-100'
-        disabled
-      >
-        <Bug className='h-5 w-5' />
-      </Button>
-
-      {/* Deploy Button */}
-      <Button
-        variant='outline'
-        className='h-12 w-12 cursor-not-allowed rounded-[11px] border-[hsl(var(--card-border))] bg-[hsl(var(--card-background))] text-[hsl(var(--card-text))] opacity-50 shadow-xs hover:border-[hsl(var(--card-border))] hover:bg-[hsl(var(--card-background))] hover:bg-gray-100'
-        disabled
-      >
-        <Rocket className='h-5 w-5' />
-      </Button>
-
-      {/* Run Button */}
-      <Button
-        className='h-12 cursor-not-allowed gap-2 rounded-[11px] bg-[var(--brand-primary-hex)] px-4 py-2 font-medium text-white shadow-[0_0_0_0_var(--brand-primary-hex)] transition-all duration-200 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'
-        disabled
-      >
-        <Play className='h-3.5 w-3.5 fill-current stroke-current' />
-      </Button>
-    </div>
-  )
-}
-
-const SkeletonPanelComponent = () => {
-  return (
-    <div className='fixed top-0 right-0 z-10'>
-      {/* Panel skeleton */}
-      <div className='h-96 w-80 space-y-4 rounded-bl-lg border-b border-l bg-background p-4'>
-        {/* Tab headers skeleton */}
-        <div className='flex gap-2 border-b pb-2'>
-          {Array.from({ length: 3 }).map((_, i) => (
-            <Skeleton key={i} className='h-6 w-16' />
-          ))}
-        </div>
-
-        {/* Content skeleton */}
-        <div className='space-y-3'>
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Skeleton key={i} className='h-4' style={{ width: `${Math.random() * 40 + 60}%` }} />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-const SkeletonNodes = () => {
-  return [
-    // Starter node skeleton
-    {
-      id: 'skeleton-starter',
-      type: 'workflowBlock',
-      position: { x: 100, y: 100 },
-      data: {
-        type: 'skeleton',
-        config: { name: '', description: '', bgColor: '#9CA3AF' },
-        name: '',
-        isActive: false,
-        isPending: false,
-        isSkeleton: true,
-      },
-      dragHandle: '.workflow-drag-handle',
-    },
-    // Additional skeleton nodes
-    {
-      id: 'skeleton-node-1',
-      type: 'workflowBlock',
-      position: { x: 500, y: 100 },
-      data: {
-        type: 'skeleton',
-        config: { name: '', description: '', bgColor: '#9CA3AF' },
-        name: '',
-        isActive: false,
-        isPending: false,
-        isSkeleton: true,
-      },
-      dragHandle: '.workflow-drag-handle',
-    },
-    {
-      id: 'skeleton-node-2',
-      type: 'workflowBlock',
-      position: { x: 300, y: 300 },
-      data: {
-        type: 'skeleton',
-        config: { name: '', description: '', bgColor: '#9CA3AF' },
-        name: '',
-        isActive: false,
-        isPending: false,
-        isSkeleton: true,
-      },
-      dragHandle: '.workflow-drag-handle',
-    },
-  ]
-}
-
-interface SkeletonLoadingProps {
-  showSkeleton: boolean
-  isSidebarCollapsed: boolean
-  children: React.ReactNode
-}
-
-export function SkeletonLoading({
-  showSkeleton,
-  isSidebarCollapsed,
-  children,
-}: SkeletonLoadingProps) {
-  return (
-    <div className='flex h-full w-full flex-1 flex-col overflow-hidden'>
-      {/* Skeleton Control Bar */}
-      <div
-        className={`transition-opacity duration-500 ${showSkeleton ? 'opacity-100' : 'pointer-events-none absolute opacity-0'}`}
-        style={{ zIndex: showSkeleton ? 10 : -1 }}
-      >
-        <SkeletonControlBar />
-      </div>
-
-      {/* Real Control Bar */}
-      <div
-        className={`transition-opacity duration-500 ${showSkeleton ? 'pointer-events-none absolute opacity-0' : 'opacity-100'}`}
-        style={{ zIndex: showSkeleton ? -1 : 10 }}
-      >
-        {children}
-      </div>
-
-      {/* Real content will be rendered by children - sidebar will show its own loading state */}
-    </div>
-  )
-}
-
-export function SkeletonPanelWrapper({ showSkeleton }: { showSkeleton: boolean }) {
-  return (
-    <div
-      className={`transition-opacity duration-500 ${showSkeleton ? 'opacity-100' : 'pointer-events-none absolute opacity-0'}`}
-      style={{ zIndex: showSkeleton ? 10 : -1 }}
-    >
-      <SkeletonPanelComponent />
-    </div>
-  )
-}
-
-export { SkeletonNodes, SkeletonPanelComponent }
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 28970fd484..cc13880994 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
@@ -108,7 +108,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
    */
   const getHandleClasses = (position: 'left' | 'right') => {
     const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-    const colorClasses = '!bg-[var(--surface-12)]'
+    const colorClasses = '!bg-[var(--surface-6)]'
 
     const positionClasses = {
       left: '!left-[-7px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-10px] hover:!w-[10px] hover:!rounded-l-full',
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 49ccb04b47..ae2fef882d 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
@@ -24,6 +24,7 @@ import {
 import Link from 'next/link'
 import { useShallow } from 'zustand/react/shallow'
 import {
+  Badge,
   Button,
   Code,
   Input,
@@ -1305,8 +1306,8 @@ export function Terminal() {
                     <div
                       key={entry.id}
                       className={clsx(
-                        '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)]'
+                        'flex h-[36px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-4)]',
+                        isSelected && 'bg-[var(--surface-4)]'
                       )}
                       onClick={() => handleRowClick(entry)}
                     >
@@ -1327,33 +1328,9 @@ export function Terminal() {
                       {/* Status */}
                       <div className={clsx(COLUMN_WIDTHS.STATUS, COLUMN_BASE_CLASS)}>
                         {statusInfo ? (
-                          <div
-                            className={clsx(
-                              'flex h-[24px] w-[56px] items-center justify-start rounded-[6px] border pl-[9px]',
-                              statusInfo.isError
-                                ? '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
-                                  ? 'var(--text-error)'
-                                  : 'var(--terminal-status-info-color)',
-                              }}
-                            />
-                            <span
-                              className='font-medium text-[11.5px]'
-                              style={{
-                                color: statusInfo.isError
-                                  ? 'var(--text-error)'
-                                  : 'var(--terminal-status-info-color)',
-                              }}
-                            >
-                              {statusInfo.label}
-                            </span>
-                          </div>
+                          <Badge variant={statusInfo.isError ? 'red' : 'gray'} dot>
+                            {statusInfo.label}
+                          </Badge>
                         ) : (
                           <span className={ROW_TEXT_CLASS}>-</span>
                         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
index b898fd2637..561c3b32c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
@@ -371,12 +371,12 @@ export function TrainingModal() {
                     Cancel
                   </Button>
                   <Button
-                    variant='primary'
+                    variant='tertiary'
                     onClick={() => {
                       useCopilotTrainingStore.getState().stopTraining()
                       setLocalPrompt('')
                     }}
-                    className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 flex-1'
+                    className='flex-1'
                   >
                     <Check className='mr-[6px] h-[14px] w-[14px]' />
                     Save Dataset
@@ -438,7 +438,8 @@ export function TrainingModal() {
               <Button
                 onClick={handleStart}
                 disabled={!localTitle.trim() || !localPrompt.trim()}
-                className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 w-full'
+                variant='tertiary'
+                className='w-full'
               >
                 Start Training Session
               </Button>
@@ -468,10 +469,9 @@ export function TrainingModal() {
                     <div className='flex gap-[8px]'>
                       {selectedDatasets.size > 0 && (
                         <Button
-                          variant='primary'
+                          variant='tertiary'
                           onClick={handleSendSelected}
                           disabled={sendingSelected}
-                          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
                         >
                           <Send className='mr-[6px] h-[12px] w-[12px]' />
                           {sendingSelected
@@ -511,7 +511,7 @@ export function TrainingModal() {
                       {datasets.map((dataset, index) => (
                         <div
                           key={dataset.id}
-                          className='rounded-[8px] border bg-[var(--surface-3)] transition-colors hover:bg-[var(--surface-5)]'
+                          className='rounded-[8px] border bg-[var(--surface-3)] transition-colors hover:bg-[var(--surface-4)]'
                         >
                           <div className='flex items-start p-[12px]'>
                             <Checkbox
@@ -604,7 +604,7 @@ export function TrainingModal() {
                                 <p className='mb-[4px] font-medium text-[13px] text-[var(--text-primary)]'>
                                   Edit Sequence
                                 </p>
-                                <div className='max-h-[100px] overflow-y-auto rounded-[6px] border bg-[var(--surface-6)] p-[8px]'>
+                                <div className='max-h-[100px] overflow-y-auto rounded-[6px] border bg-[var(--surface-5)] p-[8px]'>
                                   <ul className='flex flex-col gap-[4px] font-mono text-[11px]'>
                                     {formatEditSequence(dataset.editSequence).map((desc, i) => (
                                       <li key={i} className='text-[var(--text-secondary)]'>
@@ -635,10 +635,7 @@ export function TrainingModal() {
                                   }
                                 >
                                   {sendingDatasets.has(dataset.id) ? (
-                                    <>
-                                      <div className='mr-[6px] h-[12px] w-[12px] animate-spin rounded-full border-2 border-current border-t-transparent' />
-                                      Sending...
-                                    </>
+                                    'Sending...'
                                   ) : sentDatasets.has(dataset.id) ? (
                                     <>
                                       <CheckCircle2 className='mr-[6px] h-[12px] w-[12px]' />
@@ -682,7 +679,7 @@ export function TrainingModal() {
                               </div>
 
                               {viewingDataset === dataset.id && (
-                                <div className='rounded-[6px] border bg-[var(--surface-6)] p-[12px]'>
+                                <div className='rounded-[6px] border bg-[var(--surface-5)] p-[12px]'>
                                   <pre className='max-h-[200px] overflow-auto text-[11px] text-[var(--text-secondary)]'>
                                     {JSON.stringify(
                                       {
@@ -755,20 +752,15 @@ export function TrainingModal() {
                   sendingLiveWorkflow ||
                   currentWorkflow.getBlockCount() === 0
                 }
+                variant='tertiary'
                 className={cn(
                   'w-full',
-                  liveWorkflowSent
-                    ? '!bg-green-600 !text-white hover:!bg-green-700'
-                    : liveWorkflowFailed
-                      ? '!bg-red-600 !text-white hover:!bg-red-700'
-                      : '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                  liveWorkflowSent && '!bg-green-600 !text-white hover:!bg-green-700',
+                  liveWorkflowFailed && '!bg-red-600 !text-white hover:!bg-red-700'
                 )}
               >
                 {sendingLiveWorkflow ? (
-                  <>
-                    <div className='mr-[6px] h-[14px] w-[14px] animate-spin rounded-full border-2 border-current border-t-transparent' />
-                    Sending...
-                  </>
+                  'Sending...'
                 ) : liveWorkflowSent ? (
                   <>
                     <CheckCircle2 className='mr-[6px] h-[14px] w-[14px]' />
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 95a51f75d7..c080fe2373 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
@@ -23,6 +23,7 @@ import {
   useFloatBoundarySync,
   useFloatDrag,
   useFloatResize,
+  usePreventZoom,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useVariablesStore as usePanelVariablesStore } from '@/stores/panel/variables/store'
@@ -140,6 +141,8 @@ export function Variables() {
     maxHeight: MAX_VARIABLES_HEIGHT,
   })
 
+  const preventZoomRef = usePreventZoom()
+
   const [collapsedById, setCollapsedById] = useState<Record<string, boolean>>({})
   const [localNames, setLocalNames] = useState<Record<string, string>>({})
   const [nameErrors, setNameErrors] = useState<Record<string, string>>({})
@@ -389,7 +392,8 @@ export function Variables() {
 
   return (
     <div
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      ref={preventZoomRef}
+      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -447,7 +451,7 @@ export function Variables() {
                 <div
                   key={variable.id}
                   className={cn(
-                    'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-1)]',
+                    'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]',
                     (collapsedById[variable.id] ?? false) ? 'overflow-hidden' : 'overflow-visible'
                   )}
                 >
@@ -456,7 +460,7 @@ export function Variables() {
                   {!(collapsedById[variable.id] ?? false) && (
                     <div
                       id={`variable-content-${variable.id}`}
-                      className='flex flex-col gap-[6px] border-[var(--border-strong)] border-t px-[10px] pt-[6px] pb-[10px]'
+                      className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'
                     >
                       <div className='flex flex-col gap-[4px]'>
                         <Label className='text-[13px]'>{STRINGS.labels.name}</Label>
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 f5a5c0659d..279d82c44e 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
@@ -54,9 +54,9 @@ export const ActionBar = memo(
 
     const userPermissions = useUserPermissionsContext()
 
-    const isStarterBlock = blockType === 'starter'
     // Check for start_trigger (unified start block) - prevent duplication but allow deletion
     const isStartBlock = blockType === 'starter' || blockType === 'start_trigger'
+    const isNoteBlock = blockType === 'note'
 
     /**
      * Get appropriate tooltip message based on disabled state
@@ -77,33 +77,35 @@ export const ActionBar = memo(
           '-top-[46px] absolute right-0',
           'flex flex-row items-center',
           'opacity-0 transition-opacity duration-200 group-hover:opacity-100',
-          'gap-[5px] rounded-[10px] bg-[var(--surface-3)] p-[5px]'
+          'gap-[5px] rounded-[10px] bg-[var(--surface-2)] p-[5px]'
         )}
       >
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={(e) => {
-                e.stopPropagation()
-                if (!disabled) {
-                  collaborativeToggleBlockEnabled(blockId)
-                }
-              }}
-              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 ? (
-                <Circle className='h-[11px] w-[11px]' />
-              ) : (
-                <CircleOff className='h-[11px] w-[11px]' />
-              )}
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
-          </Tooltip.Content>
-        </Tooltip.Root>
+        {!isNoteBlock && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!disabled) {
+                    collaborativeToggleBlockEnabled(blockId)
+                  }
+                }}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                disabled={disabled}
+              >
+                {isEnabled ? (
+                  <Circle className='h-[11px] w-[11px]' />
+                ) : (
+                  <CircleOff className='h-[11px] w-[11px]' />
+                )}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
 
         {!isStartBlock && (
           <Tooltip.Root>
@@ -116,7 +118,7 @@ export const ActionBar = memo(
                     collaborativeDuplicateBlock(blockId)
                   }
                 }}
-                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)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
                 <Copy className='h-[11px] w-[11px]' />
@@ -139,7 +141,7 @@ export const ActionBar = memo(
                     )
                   }
                 }}
-                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)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled || !userPermissions.canEdit}
               >
                 <LogOut className='h-[11px] w-[11px]' />
@@ -149,30 +151,32 @@ export const ActionBar = memo(
           </Tooltip.Root>
         )}
 
-        <Tooltip.Root>
-          <Tooltip.Trigger asChild>
-            <Button
-              variant='ghost'
-              onClick={(e) => {
-                e.stopPropagation()
-                if (!disabled) {
-                  collaborativeToggleBlockHandles(blockId)
-                }
-              }}
-              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 ? (
-                <ArrowLeftRight className='h-[11px] w-[11px]' />
-              ) : (
-                <ArrowUpDown className='h-[11px] w-[11px]' />
-              )}
-            </Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content side='top'>
-            {getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
-          </Tooltip.Content>
-        </Tooltip.Root>
+        {!isNoteBlock && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!disabled) {
+                    collaborativeToggleBlockHandles(blockId)
+                  }
+                }}
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                disabled={disabled}
+              >
+                {horizontalHandles ? (
+                  <ArrowLeftRight className='h-[11px] w-[11px]' />
+                ) : (
+                  <ArrowUpDown className='h-[11px] w-[11px]' />
+                )}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content side='top'>
+              {getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')}
+            </Tooltip.Content>
+          </Tooltip.Root>
+        )}
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
@@ -184,7 +188,7 @@ export const ActionBar = memo(
                   collaborativeRemoveBlock(blockId)
                 }
               }}
-              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)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] 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 d548ee0be0..18db32503a 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
@@ -787,7 +787,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
    */
   const getHandleClasses = (position: 'left' | 'right' | 'top' | 'bottom', isError = false) => {
     const baseClasses = '!z-[10] !cursor-crosshair !border-none !transition-[colors] !duration-150'
-    const colorClasses = isError ? '!bg-red-400 dark:!bg-red-500' : '!bg-[var(--surface-12)]'
+    const colorClasses = isError ? '!bg-red-400 dark:!bg-red-500' : '!bg-[var(--surface-6)]'
 
     const positionClasses = {
       left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
@@ -975,12 +975,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Badge
-                      variant='outline'
+                      variant={!childIsDeployed ? 'red' : 'amber'}
                       className='cursor-pointer'
-                      style={{
-                        borderColor: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
-                        color: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
-                      }}
+                      dot
                       onClick={(e) => {
                         e.stopPropagation()
                         if (childWorkflowId && !isDeploying) {
@@ -998,18 +995,15 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                   </Tooltip.Content>
                 </Tooltip.Root>
               )}
-            {!isEnabled && <Badge>disabled</Badge>}
+            {!isEnabled && <Badge variant='gray-secondary'>disabled</Badge>}
 
             {type === 'schedule' && shouldShowScheduleBadge && scheduleInfo?.isDisabled && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Badge
-                    variant='outline'
+                    variant='amber'
                     className='cursor-pointer'
-                    style={{
-                      borderColor: 'var(--warning)',
-                      color: 'var(--warning)',
-                    }}
+                    dot
                     onClick={(e) => {
                       e.stopPropagation()
                       if (scheduleInfo?.id) {
@@ -1029,14 +1023,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             {showWebhookIndicator && (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
-                  <Badge
-                    variant='outline'
-                    className='bg-[var(--brand-tertiary)] text-[var(--brand-tertiary)]'
-                  >
-                    <div className='relative flex items-center justify-center'>
-                      <div className='197, 94, 0.2)] absolute h-3 w-3 rounded-full bg-[rgba(34,' />
-                      <div className='relative h-2 w-2 rounded-full bg-[var(--brand-tertiary)]' />
-                    </div>
+                  <Badge variant='orange' dot>
                     Webhook
                   </Badge>
                 </Tooltip.Trigger>
@@ -1059,9 +1046,9 @@ export const WorkflowBlock = memo(function WorkflowBlock({
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Badge
-                    variant='outline'
+                    variant='amber'
                     className='cursor-pointer'
-                    style={{ borderColor: 'var(--warning)', color: 'var(--warning)' }}
+                    dot
                     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 f631651054..2b048c3ce1 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
@@ -86,7 +86,7 @@ const WorkflowEdgeComponent = ({
 
   // Memoize edge style to prevent object recreation
   const edgeStyle = useMemo(() => {
-    let color = 'var(--surface-12)'
+    let color = 'var(--surface-6)'
     if (edgeDiffStatus === 'deleted') color = 'var(--text-error)'
     else if (isErrorEdge) color = 'var(--text-error)'
     else if (edgeDiffStatus === 'new') color = 'var(--brand-tertiary)'
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 4292f8743c..18747c43d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -4,5 +4,6 @@ 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 { usePreventZoom } from './use-prevent-zoom'
 export { useScrollManagement } from './use-scroll-management'
 export { useWorkflowExecution } from './use-workflow-execution'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-prevent-zoom.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-prevent-zoom.ts
new file mode 100644
index 0000000000..df271f1a62
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-prevent-zoom.ts
@@ -0,0 +1,33 @@
+'use client'
+
+import { type RefObject, useEffect, useRef } from 'react'
+
+/**
+ * Prevents browser zoom (Ctrl/Cmd + wheel) on the referenced element.
+ * Use this hook on overlay components that sit above the canvas to prevent
+ * accidental zoom when scrolling over them.
+ *
+ * @returns A ref to attach to the container element
+ */
+export function usePreventZoom<T extends HTMLElement = HTMLDivElement>(): RefObject<T | null> {
+  const ref = useRef<T>(null)
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element) return
+
+    const handleWheel = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault()
+      }
+    }
+
+    element.addEventListener('wheel', handleWheel, { passive: false })
+
+    return () => {
+      element.removeEventListener('wheel', handleWheel)
+    }
+  }, [])
+
+  return ref
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 7159ce3e47..bcdcad6d2d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -4,6 +4,8 @@ import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useStat
 import { useParams, useRouter } from 'next/navigation'
 import ReactFlow, {
   applyNodeChanges,
+  Background,
+  BackgroundVariant,
   ConnectionLineType,
   type Edge,
   type EdgeTypes,
@@ -92,6 +94,22 @@ const edgeTypes: EdgeTypes = {
 
 /** ReactFlow configuration constants. */
 const defaultEdgeOptions = { type: 'custom' }
+
+/** Tailwind classes for ReactFlow internal element styling */
+const reactFlowStyles = [
+  // Z-index layering
+  '[&_.react-flow__edges]:!z-0',
+  '[&_.react-flow__node]:!z-[21]',
+  '[&_.react-flow__handle]:!z-[30]',
+  '[&_.react-flow__edge-labels]:!z-[60]',
+  // Light mode: transparent pane to show dots
+  '[&_.react-flow__pane]:!bg-transparent',
+  '[&_.react-flow__renderer]:!bg-transparent',
+  // Dark mode: solid background, hide dots
+  'dark:[&_.react-flow__pane]:!bg-[var(--bg)]',
+  'dark:[&_.react-flow__renderer]:!bg-[var(--bg)]',
+  'dark:[&_.react-flow__background]:hidden',
+].join(' ')
 const reactFlowFitViewOptions = { padding: 0.6 } as const
 const reactFlowProOptions = { hideAttribution: true } as const
 
@@ -342,7 +360,7 @@ const WorkflowContent = React.memo(() => {
   /** Connection line style - red for error handles, default otherwise. */
   const connectionLineStyle = useMemo(
     () => ({
-      stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--surface-12)',
+      stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--surface-6)',
       strokeWidth: 2,
     }),
     [isErrorConnectionDrag]
@@ -1127,20 +1145,51 @@ const WorkflowContent = React.memo(() => {
   }, [screenToFlowPosition, handleToolbarDrop])
 
   /**
-   * Recenter canvas when diff appears
-   * Tracks when diff becomes ready to automatically fit the view with smooth animation
+   * Focus canvas on changed blocks when diff appears
+   * Focuses on new/edited blocks rather than fitting the entire workflow
    */
   const prevDiffReadyRef = useRef(false)
   useEffect(() => {
-    // Only recenter when diff transitions from not ready to ready
+    // Only focus when diff transitions from not ready to ready
     if (isDiffReady && !prevDiffReadyRef.current && diffAnalysis) {
-      logger.info('Diff ready - recentering canvas to show changes')
-      requestAnimationFrame(() => {
-        fitView({ padding: 0.3, duration: 600 })
-      })
+      const changedBlockIds = [
+        ...(diffAnalysis.new_blocks || []),
+        ...(diffAnalysis.edited_blocks || []),
+      ]
+
+      if (changedBlockIds.length > 0) {
+        const allNodes = getNodes()
+        const changedNodes = allNodes.filter((node) => changedBlockIds.includes(node.id))
+
+        if (changedNodes.length > 0) {
+          logger.info('Diff ready - focusing on changed blocks', {
+            changedBlockIds,
+            foundNodes: changedNodes.length,
+          })
+          requestAnimationFrame(() => {
+            fitView({
+              nodes: changedNodes,
+              duration: 600,
+              padding: 0.3,
+              minZoom: 0.5,
+              maxZoom: 1.0,
+            })
+          })
+        } else {
+          logger.info('Diff ready - no changed nodes found, fitting all')
+          requestAnimationFrame(() => {
+            fitView({ padding: 0.3, duration: 600 })
+          })
+        }
+      } else {
+        logger.info('Diff ready - no changed blocks, fitting all')
+        requestAnimationFrame(() => {
+          fitView({ padding: 0.3, duration: 600 })
+        })
+      }
     }
     prevDiffReadyRef.current = isDiffReady
-  }, [isDiffReady, diffAnalysis, fitView])
+  }, [isDiffReady, diffAnalysis, fitView, getNodes])
 
   /** Displays trigger warning notifications. */
   useEffect(() => {
@@ -2321,7 +2370,7 @@ const WorkflowContent = React.memo(() => {
               noWheelClassName='allow-scroll'
               edgesFocusable={true}
               edgesUpdatable={effectivePermissions.canEdit}
-              className={`workflow-container h-full bg-[var(--bg)] transition-opacity duration-150 ${isCanvasReady ? 'opacity-100' : 'opacity-0'}`}
+              className={`workflow-container h-full bg-[var(--bg)] transition-opacity duration-150 ${reactFlowStyles} ${isCanvasReady ? 'opacity-100' : 'opacity-0'}`}
               onNodeDrag={effectivePermissions.canEdit ? onNodeDrag : undefined}
               onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined}
               onNodeDragStart={effectivePermissions.canEdit ? onNodeDragStart : undefined}
@@ -2333,7 +2382,11 @@ const WorkflowContent = React.memo(() => {
               elevateNodesOnSelect={true}
               autoPanOnConnect={effectivePermissions.canEdit}
               autoPanOnNodeDrag={effectivePermissions.canEdit}
-            />
+            >
+              <div className='block dark:hidden'>
+                <Background variant={BackgroundVariant.Dots} gap={20} size={1.75} color='#D5CEE0' />
+              </div>
+            </ReactFlow>
 
             <Cursors />
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index 8dbed1fdea..8a9d484360 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -536,7 +536,7 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
             <Button variant='default' onClick={handleClose} type='button' disabled={isSubmitting}>
               Cancel
             </Button>
-            <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
+            <Button type='submit' variant='tertiary' disabled={isSubmitting || isProcessing}>
               {isSubmitting
                 ? 'Submitting...'
                 : submitStatus === 'error'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index cbe1880ded..2eed14889a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -516,7 +516,7 @@ 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'>
+          <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[8px] shadow-sm'>
             <Search className='h-[15px] w-[15px] flex-shrink-0 text-[var(--text-subtle)]' />
             <input
               type='text'
@@ -624,7 +624,7 @@ export function SearchModal({
               })}
             </div>
           ) : searchQuery ? (
-            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-5)] px-[16px] py-[24px] shadow-sm'>
+            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-4)] px-[16px] py-[24px] shadow-sm'>
               <p className='text-[15px] text-[var(--text-subtle)]'>
                 No results found for "{searchQuery}"
               </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
index bbe6063814..7f366dca83 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/api-keys/api-keys.tsx
@@ -207,7 +207,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
     <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]'>
+        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
           <Search
             className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
@@ -229,9 +229,8 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
             setKeyType(defaultKeyType)
             setCreateError(null)
           }}
-          variant='primary'
+          variant='tertiary'
           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
@@ -542,14 +541,13 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
             </Button>
             <Button
               type='button'
-              variant='primary'
+              variant='tertiary'
               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>
@@ -608,7 +606,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Deleting{' '}
               <span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
               immediately revoke access for any integrations using it.{' '}
@@ -627,10 +625,9 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleDeleteKey}
               disabled={deleteApiKeyMutation.isPending}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteApiKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
index 214dd71855..5ed5662452 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/copilot/copilot.tsx
@@ -133,7 +133,7 @@ export function Copilot() {
       <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]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -150,9 +150,8 @@ export function Copilot() {
               setIsCreateDialogOpen(true)
               setCreateError(null)
             }}
-            variant='primary'
+            variant='tertiary'
             disabled={isLoading}
-            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
@@ -253,10 +252,9 @@ export function Copilot() {
             </Button>
             <Button
               type='button'
-              variant='primary'
+              variant='tertiary'
               onClick={handleCreateKey}
               disabled={!newKeyName.trim() || generateKey.isPending}
-              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
             >
               {generateKey.isPending ? 'Creating...' : 'Create'}
             </Button>
@@ -315,7 +313,7 @@ export function Copilot() {
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete API key</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Deleting{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {deleteKey?.name || 'Unnamed Key'}
@@ -336,10 +334,9 @@ export function Copilot() {
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleDeleteKey}
               disabled={deleteKeyMutation.isPending}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
index 5b1f5c5a60..3cf9fef7b2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/custom-tools/custom-tools.tsx
@@ -105,7 +105,7 @@ export function CustomTools() {
         <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]',
+              'flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]',
               isLoading && 'opacity-50'
             )}
           >
@@ -121,12 +121,7 @@ export function CustomTools() {
               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>
-          <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'
-          >
+          <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='tertiary'>
             <Plus className='mr-[6px] h-[13px] w-[13px]' />
             Add
           </Button>
@@ -214,7 +209,7 @@ export function CustomTools() {
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete Custom Tool</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               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>
@@ -224,11 +219,7 @@ export function CustomTools() {
             <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
               Cancel
             </Button>
-            <Button
-              variant='primary'
-              onClick={handleDeleteTool}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
+            <Button variant='destructive' onClick={handleDeleteTool}>
               Delete
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
index a3a535e73f..ac5e7cb12b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/environment/environment.tsx
@@ -29,8 +29,6 @@ const logger = createLogger('EnvironmentVariables')
 
 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'
 
 const generateRowId = (() => {
   let counter = 0
@@ -697,7 +695,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
           />
         </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]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -715,12 +713,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
               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={addEnvVar}
-            variant='primary'
-            disabled={isLoading}
-            className={PRIMARY_BUTTON_STYLES}
-          >
+          <Button onClick={addEnvVar} variant='tertiary' disabled={isLoading}>
             <Plus className='mr-[6px] h-[13px] w-[13px]' />
             Add
           </Button>
@@ -729,8 +722,8 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
               <Button
                 onClick={handleSave}
                 disabled={isLoading || !hasChanges || hasConflicts || hasInvalidKeys}
-                variant='primary'
-                className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts || hasInvalidKeys ? 'cursor-not-allowed opacity-50' : ''}`}
+                variant='tertiary'
+                className={`${hasConflicts || hasInvalidKeys ? 'cursor-not-allowed opacity-50' : ''}`}
               >
                 Save
               </Button>
@@ -846,8 +839,8 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
                 <Tooltip.Trigger asChild>
                   <Button
                     disabled={true}
-                    variant='primary'
-                    className={`${PRIMARY_BUTTON_STYLES} cursor-not-allowed opacity-50`}
+                    variant='tertiary'
+                    className='cursor-not-allowed opacity-50'
                   >
                     Save Changes
                   </Button>
@@ -859,7 +852,7 @@ export function EnvironmentVariables({ registerBeforeLeaveHandler }: Environment
                 </Tooltip.Content>
               </Tooltip.Root>
             ) : (
-              <Button onClick={handleSave} variant='primary' className={PRIMARY_BUTTON_STYLES}>
+              <Button onClick={handleSave} variant='tertiary'>
                 Save Changes
               </Button>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/files/files.tsx
index 031e5e1dc8..99798a5735 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/files/files.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useMemo, useRef, useState } from 'react'
-import { ArrowDown, Loader2, Plus, Search } from 'lucide-react'
+import { ArrowDown, Loader2, Plus, Search, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Tooltip, Trash } from '@/components/emcn'
-import { Input, Progress, Skeleton } from '@/components/ui'
+import { Input, Skeleton } from '@/components/ui'
 import {
   Table,
   TableBody,
@@ -31,9 +31,6 @@ 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',
@@ -91,7 +88,7 @@ export function Files() {
 
   // Local UI state
   const [uploading, setUploading] = useState(false)
-  const [uploadError, setUploadError] = useState<string | null>(null)
+  const [failedFiles, setFailedFiles] = useState<string[]>([])
   const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 })
   const [downloadingFileId, setDownloadingFileId] = useState<string | null>(null)
   const [search, setSearch] = useState('')
@@ -112,7 +109,7 @@ export function Files() {
 
     try {
       setUploading(true)
-      setUploadError(null)
+      setFailedFiles([])
 
       const filesToUpload = Array.from(list)
       const unsupported: string[] = []
@@ -124,7 +121,7 @@ export function Files() {
       })
 
       setUploadProgress({ completed: 0, total: allowedFiles.length })
-      let lastError: string | null = null
+      const failed: string[] = [...unsupported]
 
       for (let i = 0; i < allowedFiles.length; i++) {
         const selectedFile = allowedFiles[i]
@@ -133,18 +130,15 @@ export function Files() {
           setUploadProgress({ completed: i + 1, total: allowedFiles.length })
         } catch (err) {
           logger.error('Error uploading file:', err)
-          lastError = 'Upload failed'
+          failed.push(selectedFile.name)
         }
       }
 
-      if (unsupported.length) {
-        lastError = `Unsupported file type: ${unsupported.join(', ')}`
+      if (failed.length > 0) {
+        setFailedFiles(failed)
       }
-      if (lastError) setUploadError(lastError)
     } catch (error) {
       logger.error('Error uploading file:', error)
-      setUploadError('Upload failed')
-      setTimeout(() => setUploadError(null), 5000)
     } finally {
       setUploading(false)
       setUploadProgress({ completed: 0, total: 0 })
@@ -237,19 +231,19 @@ export function Files() {
   const displayPlanName = PLAN_NAMES[planName as keyof typeof PLAN_NAMES] || 'Free'
 
   const renderTableSkeleton = () => (
-    <Table className='table-auto text-[13px]'>
+    <Table className='table-fixed text-[13px]'>
       <TableHeader>
         <TableRow className='hover:bg-transparent'>
-          <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+          <TableHead className='w-[56%] px-[12px] py-[8px] 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)]'>
+          <TableHead className='w-[14%] px-[12px] py-[8px] 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)]'>
+          <TableHead className='w-[15%] px-[12px] py-[8px] 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)]'>
+          <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
             <Skeleton className='h-[12px] w-[48px]' />
           </TableHead>
         </TableRow>
@@ -257,19 +251,19 @@ export function Files() {
       <TableBody>
         {Array.from({ length: 3 }, (_, i) => (
           <TableRow key={i} className='hover:bg-transparent'>
-            <TableCell className='px-[12px] py-[6px]'>
+            <TableCell className='px-[12px] py-[8px]'>
               <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]'>
+            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px]'>
               <Skeleton className='h-[12px] w-[48px]' />
             </TableCell>
-            <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px]'>
+            <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px]'>
               <Skeleton className='h-[12px] w-[56px]' />
             </TableCell>
-            <TableCell className='px-[12px] py-[6px]'>
+            <TableCell className='px-[12px] py-[8px]'>
               <div className='flex items-center gap-[4px]'>
                 <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
                 <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
@@ -287,7 +281,7 @@ export function Files() {
       <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]',
+            'flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]',
             permissionsLoading && 'opacity-50'
           )}
         >
@@ -303,29 +297,6 @@ export function Files() {
             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>
-        {!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
-                )}
-              >
-                {displayPlanName}
-              </span>
-              <span className='text-[var(--text-muted)] 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>
-        )}
         {(permissionsLoading || userPermissions.canEdit) && (
           <>
             <input
@@ -340,8 +311,7 @@ export function Files() {
             <Button
               onClick={handleUploadClick}
               disabled={uploading || permissionsLoading}
-              variant='primary'
-              className={PRIMARY_BUTTON_STYLES}
+              variant='tertiary'
             >
               <Plus className='mr-[6px] h-[13px] w-[13px]' />
               {uploading && uploadProgress.total > 0
@@ -354,47 +324,79 @@ export function Files() {
         )}
       </div>
 
-      {/* Error message */}
-      {uploadError && (
-        <p className='text-[11px] text-[var(--text-error)] leading-tight'>{uploadError}</p>
-      )}
-
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
         {permissionsLoading ? (
           renderTableSkeleton()
-        ) : files.length === 0 ? (
+        ) : files.length === 0 && failedFiles.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 ? (
+        ) : filteredFiles.length === 0 && failedFiles.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]'>
+          <Table className='table-fixed text-[13px]'>
             <TableHeader>
               <TableRow className='hover:bg-transparent'>
-                <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[56%] px-[12px] py-[8px] text-[12px] text-[var(--text-secondary)]'>
                   Name
                 </TableHead>
-                <TableHead className='w-[14%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                <TableHead className='w-[14%] px-[12px] py-[8px] 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)]'>
+                <TableHead className='w-[15%] px-[12px] py-[8px] 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)]'>
+                <TableHead className='w-[15%] px-[12px] py-[8px] text-left text-[12px] text-[var(--text-secondary)]'>
                   Actions
                 </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
+              {failedFiles.map((fileName, index) => {
+                const Icon = getDocumentIcon('', fileName)
+                return (
+                  <TableRow
+                    key={`failed-${fileName}-${index}`}
+                    className='hover:bg-[var(--surface-2)]'
+                  >
+                    <TableCell className='px-[12px] py-[8px]'>
+                      <div className='flex min-w-0 items-center gap-[8px]'>
+                        <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-error)]' />
+                        <span
+                          className='min-w-0 truncate text-[14px] text-[var(--text-error)]'
+                          title={fileName}
+                        >
+                          {truncateMiddle(fileName)}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-error)]'>
+                      —
+                    </TableCell>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-error)]'>
+                      —
+                    </TableCell>
+                    <TableCell className='px-[12px] py-[8px]'>
+                      <Button
+                        variant='ghost'
+                        onClick={() => setFailedFiles((prev) => prev.filter((_, i) => i !== index))}
+                        className='h-[28px] w-[28px] p-0'
+                        aria-label={`Dismiss ${fileName}`}
+                      >
+                        <X className='h-[14px] w-[14px]' />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
               {filteredFiles.map((file) => {
                 const Icon = getDocumentIcon(file.type || '', file.name)
                 return (
                   <TableRow key={file.id} className='hover:bg-[var(--surface-2)]'>
-                    <TableCell className='px-[12px] py-[6px]'>
+                    <TableCell className='px-[12px] py-[8px]'>
                       <div className='flex min-w-0 items-center gap-[8px]'>
                         <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
                         <button
@@ -407,13 +409,13 @@ export function Files() {
                         </button>
                       </div>
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-muted)]'>
                       {formatFileSize(file.size)}
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[8px] text-[12px] text-[var(--text-muted)]'>
                       {formatDate(file.uploadedAt)}
                     </TableCell>
-                    <TableCell className='px-[12px] py-[6px]'>
+                    <TableCell className='px-[12px] py-[8px]'>
                       <div className='flex items-center gap-[4px]'>
                         <Tooltip.Root>
                           <Tooltip.Trigger asChild>
@@ -458,6 +460,71 @@ export function Files() {
           </Table>
         )}
       </div>
+
+      {/* Storage Info - Fixed at bottom */}
+      {isBillingEnabled &&
+        (permissionsLoading ? (
+          <div className='mt-auto flex flex-col gap-[8px] pt-[10px]'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-[6px]'>
+                <Skeleton className='h-[14px] w-[32px] rounded-[2px]' />
+                <div className='h-[14px] w-[1.5px] bg-[var(--divider)]' />
+                <div className='flex items-center gap-[4px]'>
+                  <Skeleton className='h-[12px] w-[40px] rounded-[2px]' />
+                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
+                  <Skeleton className='h-[12px] w-[32px] rounded-[2px]' />
+                </div>
+              </div>
+            </div>
+            <div className='flex items-center gap-[3px]'>
+              {Array.from({ length: 12 }).map((_, i) => (
+                <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+              ))}
+            </div>
+          </div>
+        ) : (
+          storageInfo && (
+            <div className='mt-auto flex flex-col gap-[8px] pt-[10px]'>
+              <div className='flex items-center justify-between'>
+                <div className='flex items-center gap-[6px]'>
+                  <span
+                    className={cn(
+                      'font-medium text-[12px]',
+                      planName === 'free' ? 'text-[var(--text-primary)]' : GRADIENT_TEXT_STYLES
+                    )}
+                  >
+                    {displayPlanName}
+                  </span>
+                  <div className='h-[14px] w-[1.5px] bg-[var(--divider)]' />
+                  <div className='flex items-center gap-[4px]'>
+                    <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                      {formatStorageSize(storageInfo.usedBytes)}
+                    </span>
+                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
+                    <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                      {formatStorageSize(storageInfo.limitBytes)}
+                    </span>
+                  </div>
+                </div>
+              </div>
+              <div className='flex items-center gap-[3px]'>
+                {Array.from({ length: 12 }).map((_, i) => {
+                  const filledCount = Math.ceil((Math.min(storageInfo.percentUsed, 100) / 100) * 16)
+                  const isFilled = i < filledCount
+                  return (
+                    <div
+                      key={i}
+                      className={cn(
+                        'h-[6px] flex-1 rounded-[2px]',
+                        isFilled ? 'bg-[var(--brand-secondary)]' : 'bg-[var(--surface-5)]'
+                      )}
+                    />
+                  )
+                })}
+              </div>
+            </div>
+          )
+        ))}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
index 8cdf8c5412..cf1e71fe5a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
@@ -6,6 +6,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/navigation'
 import {
   Button,
+  Combobox,
   Label,
   Modal,
   ModalBody,
@@ -43,6 +44,62 @@ function getInitials(name: string | undefined | null): string {
   return parts[0][0].toUpperCase()
 }
 
+/**
+ * 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-5 w-24' />
+            <Skeleton className='h-[10.5px] w-[10.5px]' />
+          </div>
+          <Skeleton className='h-5 w-40' />
+        </div>
+      </div>
+
+      {/* Theme selector 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-[4px]' />
+      </div>
+
+      {/* Auto-connect row */}
+      <div className='flex items-center justify-between pt-[12px]'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-[17px] w-[30px] rounded-full' />
+      </div>
+
+      {/* Error notifications row */}
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-4 w-40' />
+        <Skeleton className='h-[17px] w-[30px] rounded-full' />
+      </div>
+
+      {/* Telemetry row */}
+      <div className='flex items-center justify-between border-t pt-[12px]'>
+        <Skeleton className='h-4 w-44' />
+        <Skeleton className='h-[17px] w-[30px] rounded-full' />
+      </div>
+
+      {/* Telemetry description */}
+      <Skeleton className='h-[12px] w-full' />
+      <Skeleton className='-mt-2 h-[12px] w-4/5' />
+
+      {/* 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>
+  )
+}
+
 interface GeneralProps {
   onOpenChange?: (open: boolean) => void
 }
@@ -400,7 +457,7 @@ export function General({ onOpenChange }: GeneralProps) {
       </div>
       {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
 
-      {/* <div className='flex items-center justify-between border-b pb-[12px]'>
+      <div className='flex items-center justify-between border-b pb-[12px]'>
         <Label htmlFor='theme-select'>Theme</Label>
         <div className='w-[100px]'>
           <Combobox
@@ -417,7 +474,7 @@ export function General({ onOpenChange }: GeneralProps) {
             ]}
           />
         </div>
-      </div> */}
+      </div>
 
       <div className='flex items-center justify-between pt-[12px]'>
         <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
@@ -494,8 +551,12 @@ export function General({ onOpenChange }: GeneralProps) {
 
       {!isAuthDisabled && (
         <div className='mt-auto flex items-center gap-[8px]'>
-          <Button onClick={handleSignOut}>Sign out</Button>
-          <Button onClick={() => setShowResetPasswordModal(true)}>Reset password</Button>
+          <Button onClick={handleSignOut} variant='active'>
+            Sign out
+          </Button>
+          <Button onClick={() => setShowResetPasswordModal(true)} variant='active'>
+            Reset password
+          </Button>
         </div>
       )}
 
@@ -521,7 +582,7 @@ export function General({ onOpenChange }: GeneralProps) {
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='tertiary'
               onClick={handleResetPasswordConfirm}
               disabled={isResettingPassword || resetPasswordSuccess}
             >
@@ -537,62 +598,3 @@ export function General({ onOpenChange }: GeneralProps) {
     </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-5 w-24' />
-            <Skeleton className='h-[10.5px] w-[10.5px]' />
-          </div>
-          <Skeleton className='h-5 w-40' />
-        </div>
-      </div>
-
-      {/* Auto-connect row */}
-      <div className='flex items-center justify-between pt-[12px]'>
-        <Skeleton className='h-4 w-36' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      {/* Snap to grid row */}
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-24' />
-        <div className='flex items-center gap-[12px]'>
-          <Skeleton className='h-3 w-[32px]' />
-          <Skeleton className='h-[6px] w-[100px] rounded-[20px]' />
-        </div>
-      </div>
-
-      {/* Error notifications row */}
-      <div className='flex items-center justify-between'>
-        <Skeleton className='h-4 w-40' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      {/* Telemetry row */}
-      <div className='flex items-center justify-between border-t pt-[12px]'>
-        <Skeleton className='h-4 w-44' />
-        <Skeleton className='h-[17px] w-[30px] rounded-full' />
-      </div>
-
-      {/* Telemetry description */}
-      <Skeleton className='h-[12px] w-full' />
-      <Skeleton className='-mt-2 h-[12px] w-4/5' />
-
-      {/* 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/settings-modal/components/integrations/integrations.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
index 614d182836..129dca0f8a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/integrations/integrations.tsx
@@ -53,7 +53,7 @@ const SKELETON_STRUCTURE: [string, number][] = [
 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]'>
+      <div className='flex w-full items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
         <Input
           placeholder='Search integrations...'
@@ -274,7 +274,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
   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]'>
+        <div className='flex w-full items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
           <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
           <Input
             placeholder='Search services...'
@@ -328,7 +328,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
                       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)]'>
+                        <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-5)]'>
                           {typeof service.icon === 'function'
                             ? service.icon({ className: 'h-4 w-4' })
                             : service.icon}
@@ -357,8 +357,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
                         </Button>
                       ) : (
                         <Button
-                          variant='primary'
-                          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                          variant='tertiary'
                           onClick={() => handleConnect(service)}
                           disabled={connectService.isPending}
                         >
@@ -384,7 +383,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
         <ModalContent className='w-[400px]'>
           <ModalHeader>Disconnect Service</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to disconnect{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {serviceToDisconnect?.service.name}
@@ -399,11 +398,7 @@ export function Integrations({ onOpenChange, registerCloseHandler }: Integration
             <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'
-            >
+            <Button variant='destructive' onClick={confirmDisconnect}>
               Disconnect
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
index c434c577fa..5f822c9553 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
@@ -64,14 +64,10 @@ export function ServerListItem({
         </p>
       </div>
       <div className='flex flex-shrink-0 items-center gap-[4px]'>
-        <Button
-          variant='primary'
-          onClick={onViewDetails}
-          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-        >
+        <Button variant='tertiary' onClick={onViewDetails}>
           Details
         </Button>
-        <Button variant='ghost' onClick={onRemove} disabled={isDeleting}>
+        <Button variant='destructive' onClick={onRemove} disabled={isDeleting}>
           {isDeleting ? 'Deleting...' : 'Delete'}
         </Button>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
index cf08e08aaa..f1923cb336 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/mcp/mcp.tsx
@@ -595,11 +595,7 @@ export function MCP({ initialServerId }: MCPProps) {
                 ? 'Refreshed'
                 : 'Refresh Tools'}
           </Button>
-          <Button
-            onClick={handleBackToList}
-            variant='primary'
-            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-          >
+          <Button onClick={handleBackToList} variant='tertiary'>
             Back
           </Button>
         </div>
@@ -611,7 +607,7 @@ export function MCP({ initialServerId }: MCPProps) {
     <>
       <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]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -625,9 +621,8 @@ export function MCP({ initialServerId }: MCPProps) {
           </div>
           <Button
             onClick={() => setShowAddForm(!showAddForm)}
-            variant='primary'
+            variant='tertiary'
             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
@@ -719,11 +714,7 @@ export function MCP({ initialServerId }: MCPProps) {
                   <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'
-                  >
+                  <Button onClick={handleAddServer} disabled={isSubmitDisabled} variant='tertiary'>
                     {isSubmitDisabled && isFormValid ? 'Adding...' : 'Add Server'}
                   </Button>
                 </div>
@@ -783,7 +774,7 @@ export function MCP({ initialServerId }: MCPProps) {
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete MCP Server</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               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>
@@ -793,11 +784,7 @@ export function MCP({ initialServerId }: MCPProps) {
             <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'
-            >
+            <Button variant='destructive' onClick={confirmDeleteServer}>
               Delete
             </Button>
           </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/shared/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/shared/usage-header.tsx
deleted file mode 100644
index 090664a126..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/shared/usage-header.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import { Badge } from '@/components/emcn'
-import { calculateFilledPills, USAGE_PILL_COUNT } from '@/lib/billing/client/usage-visualization'
-import { cn } from '@/lib/core/utils/cn'
-
-const GRADIENT_BADGE_STYLES =
-  'gradient-text h-[1.125rem] 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 cursor-pointer'
-
-interface UsageHeaderProps {
-  title: string
-  gradientTitle?: boolean
-  showBadge?: boolean
-  badgeText?: string
-  onBadgeClick?: () => void
-  rightContent?: ReactNode
-  current: number
-  limit: number
-  progressValue?: number
-  seatsText?: string
-  isBlocked?: boolean
-  blockedReason?: 'payment_failed' | 'dispute' | null
-  blockedByOrgOwner?: boolean
-  onResolvePayment?: () => void
-  onContactSupport?: () => void
-  status?: 'ok' | 'warning' | 'exceeded' | 'blocked'
-  percentUsed?: number
-}
-
-export function UsageHeader({
-  title,
-  gradientTitle = false,
-  showBadge = false,
-  badgeText,
-  onBadgeClick,
-  rightContent,
-  current,
-  limit,
-  progressValue,
-  seatsText,
-  isBlocked,
-  blockedReason,
-  blockedByOrgOwner,
-  onResolvePayment,
-  onContactSupport,
-  status,
-  percentUsed,
-}: UsageHeaderProps) {
-  const progress = progressValue ?? (limit > 0 ? Math.min((current / limit) * 100, 100) : 0)
-
-  // Calculate filled pills based on usage percentage using shared utility (fixed 8 pills)
-  const filledPillsCount = calculateFilledPills(progress)
-  const isAlmostOut = filledPillsCount === USAGE_PILL_COUNT
-
-  return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
-      <div className='space-y-2'>
-        {/* Top row */}
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <span
-              className={cn(
-                'font-medium text-[12px]',
-                gradientTitle
-                  ? 'gradient-text bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
-                  : 'text-[#FFFFFF]'
-              )}
-            >
-              {title}
-            </span>
-            {showBadge && badgeText ? (
-              <Badge className={GRADIENT_BADGE_STYLES} onClick={onBadgeClick}>
-                {badgeText}
-              </Badge>
-            ) : null}
-            {seatsText ? (
-              <span className='text-muted-foreground text-xs'>({seatsText})</span>
-            ) : null}
-          </div>
-          <div className='flex items-center gap-[4px] text-xs tabular-nums'>
-            {isBlocked ? (
-              <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
-                Payment required
-              </span>
-            ) : (
-              <>
-                <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
-                  ${current.toFixed(2)}
-                </span>
-                <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
-                {rightContent ?? (
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
-                    ${limit}
-                  </span>
-                )}
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Pills row - fixed 8 pills with shared heuristic */}
-        <div className='flex items-center gap-[4px]'>
-          {Array.from({ length: USAGE_PILL_COUNT }).map((_, i) => {
-            const isFilled = i < filledPillsCount
-            return (
-              <div
-                key={i}
-                className='h-[6px] flex-1 rounded-[2px]'
-                style={{
-                  backgroundColor: isFilled
-                    ? isAlmostOut
-                      ? 'var(--text-error)'
-                      : '#34B5FF'
-                    : '#414141',
-                }}
-              />
-            )
-          })}
-        </div>
-
-        {/* Status messages */}
-        {isBlocked && blockedReason === 'dispute' && (
-          <div className='flex items-center justify-between rounded-[6px] bg-destructive/10 px-2 py-1'>
-            <span className='text-destructive text-xs'>
-              Account frozen. Please contact support to resolve this issue.
-            </span>
-            {onContactSupport && (
-              <button
-                type='button'
-                className='font-medium text-destructive text-xs underline underline-offset-2'
-                onClick={onContactSupport}
-              >
-                Get help
-              </button>
-            )}
-          </div>
-        )}
-
-        {isBlocked && blockedReason !== 'dispute' && !blockedByOrgOwner && (
-          <div className='flex items-center justify-between rounded-[6px] bg-destructive/10 px-2 py-1'>
-            <span className='text-destructive text-xs'>
-              Payment failed. Please update your payment method.
-            </span>
-            {onResolvePayment && (
-              <button
-                type='button'
-                className='font-medium text-destructive text-xs underline underline-offset-2'
-                onClick={onResolvePayment}
-              >
-                Resolve payment
-              </button>
-            )}
-          </div>
-        )}
-
-        {isBlocked && blockedByOrgOwner && blockedReason !== 'dispute' && (
-          <div className='rounded-[6px] bg-destructive/10 px-2 py-1'>
-            <span className='text-destructive text-xs'>
-              Organization billing issue. Please contact your organization owner.
-            </span>
-          </div>
-        )}
-
-        {isBlocked && blockedByOrgOwner && blockedReason === 'dispute' && (
-          <div className='rounded-[6px] bg-destructive/10 px-2 py-1'>
-            <span className='text-destructive text-xs'>
-              Organization account frozen. Please contact support.
-            </span>
-          </div>
-        )}
-
-        {!isBlocked && status === 'exceeded' && (
-          <div className='rounded-[6px] bg-amber-900/10 px-2 py-1'>
-            <span className='text-amber-600 text-xs'>
-              Usage limit exceeded. Increase your limit to continue.
-            </span>
-          </div>
-        )}
-
-        {!isBlocked && status === 'warning' && (
-          <div className='rounded-[6px] bg-yellow-900/10 px-2 py-1'>
-            <span className='text-xs text-yellow-600'>
-              {typeof percentUsed === 'number' ? `${percentUsed}%` : '80%+'} of your limit used.
-            </span>
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/sso/sso.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/sso/sso.tsx
index d01fb51d84..5a5e8191d3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/sso/sso.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/sso/sso.tsx
@@ -492,11 +492,7 @@ export function SSO() {
 
         {/* 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'
-          >
+          <Button onClick={handleEdit} variant='tertiary'>
             Edit
           </Button>
         </div>
@@ -933,9 +929,8 @@ export function SSO() {
         {error && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{error}</p>}
         <Button
           type='submit'
-          variant='primary'
+          variant='tertiary'
           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
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
index 36a26b6a0d..ad65098d0b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
@@ -21,6 +21,17 @@ import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscript
 
 const logger = createLogger('CancelSubscription')
 
+interface SubscriptionCancelParams {
+  returnUrl: string
+  referenceId: string
+  subscriptionId?: string
+}
+
+interface SubscriptionRestoreParams {
+  referenceId: string
+  subscriptionId?: string
+}
+
 interface CancelSubscriptionProps {
   subscription: {
     plan: string
@@ -33,6 +44,9 @@ interface CancelSubscriptionProps {
   }
 }
 
+/**
+ * Manages subscription cancellation and restoration.
+ */
 export function CancelSubscription({ subscription, subscriptionData }: CancelSubscriptionProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
@@ -46,7 +60,6 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
   const activeOrganization = orgsData?.activeOrganization
   const currentSubscriptionStatus = getSubscriptionStatus(subData?.data)
 
-  // Clear error after 3 seconds
   useEffect(() => {
     if (error) {
       const timer = setTimeout(() => {
@@ -56,7 +69,6 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
     }
   }, [error])
 
-  // Don't show for free plans
   if (!subscription.isPaid) {
     return null
   }
@@ -92,13 +104,10 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
 
       const returnUrl = getBaseUrl() + window.location.pathname.split('/w/')[0]
 
-      const cancelParams: any = {
+      const cancelParams: SubscriptionCancelParams = {
         returnUrl,
         referenceId,
-      }
-
-      if (subscriptionId) {
-        cancelParams.subscriptionId = subscriptionId
+        ...(subscriptionId && { subscriptionId }),
       }
 
       const result = await betterAuthSubscription.cancel(cancelParams)
@@ -109,14 +118,15 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
       } else {
         logger.info('Redirecting to Stripe Billing Portal for cancellation')
       }
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to cancel subscription'
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to cancel subscription'
       setError(errorMessage)
-      logger.error('Failed to cancel subscription', { error })
+      logger.error('Failed to cancel subscription', { error: err })
     } finally {
       setIsLoading(false)
     }
   }
+
   const handleKeep = async () => {
     if (!session?.user?.id) return
 
@@ -145,9 +155,9 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
 
         logger.info('Restoring subscription', { referenceId, subscriptionId })
 
-        const restoreParams: any = { referenceId }
-        if (subscriptionId) {
-          restoreParams.subscriptionId = subscriptionId
+        const restoreParams: SubscriptionRestoreParams = {
+          referenceId,
+          ...(subscriptionId && { subscriptionId }),
         }
 
         const result = await betterAuthSubscription.restore(restoreParams)
@@ -163,14 +173,15 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
       }
 
       setIsDialogOpen(false)
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to restore subscription'
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to restore subscription'
       setError(errorMessage)
-      logger.error('Failed to restore subscription', { error })
+      logger.error('Failed to restore subscription', { error: err })
     } finally {
       setIsLoading(false)
     }
   }
+
   const getPeriodEndDate = () => {
     return subscriptionData?.periodEnd || null
   }
@@ -190,14 +201,13 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
         month: 'long',
         day: 'numeric',
       }).format(dateObj)
-    } catch (error) {
-      console.warn('Invalid date in cancel subscription:', date, error)
+    } catch (err) {
+      logger.warn('Invalid date in cancel subscription', { date, error: err })
       return 'end of current billing period'
     }
   }
 
   const periodEndDate = getPeriodEndDate()
-
   const isCancelAtPeriodEnd = subscriptionData?.cancelAtPeriodEnd === true
 
   return (
@@ -212,11 +222,11 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
           )}
         </div>
         <Button
-          variant='outline'
+          variant='active'
           onClick={() => setIsDialogOpen(true)}
           disabled={isLoading}
           className={cn(
-            'h-8 rounded-[8px] text-[13px]',
+            'h-[32px] rounded-[6px] text-[12px]',
             error && 'border-[var(--text-error)] text-[var(--text-error)]'
           )}
         >
@@ -225,12 +235,12 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
       </div>
 
       <Modal open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <ModalContent className='w-[400px]'>
+        <ModalContent size='sm'>
           <ModalHeader>
             {isCancelAtPeriodEnd ? 'Restore' : 'Cancel'} {subscription.plan} Subscription
           </ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-muted)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               {isCancelAtPeriodEnd
                 ? 'Your subscription is set to cancel at the end of the billing period. Would you like to keep your subscription active?'
                 : `You'll be redirected to Stripe to manage your subscription. You'll keep access until ${formatDate(
@@ -242,13 +252,13 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
             </p>
 
             {!isCancelAtPeriodEnd && (
-              <div className='mt-3'>
-                <div className='rounded-[8px] bg-[var(--surface-5)] p-3'>
-                  <ul className='space-y-1 text-[12px] text-[var(--text-muted)]'>
-                    <li>• Keep all features until {formatDate(periodEndDate)}</li>
-                    <li>• No more charges</li>
-                    <li>• Data preserved</li>
-                    <li>• Can reactivate anytime</li>
+              <div className='mt-[12px]'>
+                <div className='rounded-[6px] bg-[var(--surface-4)] p-[12px]'>
+                  <ul className='space-y-[4px] text-[12px] text-[var(--text-secondary)]'>
+                    <li>- Keep all features until {formatDate(periodEndDate)}</li>
+                    <li>- No more charges</li>
+                    <li>- Data preserved</li>
+                    <li>- Can reactivate anytime</li>
                   </ul>
                 </div>
               </div>
@@ -263,29 +273,15 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
               {isCancelAtPeriodEnd ? 'Cancel' : 'Keep Subscription'}
             </Button>
 
-            {(() => {
-              const subscriptionStatus = currentSubscriptionStatus
-              if (subscriptionStatus.isPaid && isCancelAtPeriodEnd) {
-                return (
-                  <Button
-                    onClick={handleKeep}
-                    className='h-[32px] bg-green-500 px-[12px] text-white hover:bg-green-600 dark:bg-green-500 dark:hover:bg-green-600'
-                    disabled={isLoading}
-                  >
-                    {isLoading ? 'Restoring...' : 'Restore Subscription'}
-                  </Button>
-                )
-              }
-              return (
-                <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)]'
-                  disabled={isLoading}
-                >
-                  {isLoading ? 'Redirecting...' : 'Continue'}
-                </Button>
-              )
-            })()}
+            {currentSubscriptionStatus.isPaid && isCancelAtPeriodEnd ? (
+              <Button variant='tertiary' onClick={handleKeep} disabled={isLoading}>
+                {isLoading ? 'Restoring...' : 'Restore Subscription'}
+              </Button>
+            ) : (
+              <Button variant='destructive' onClick={handleCancel} disabled={isLoading}>
+                {isLoading ? 'Redirecting...' : 'Continue'}
+              </Button>
+            )}
           </ModalFooter>
         </ModalContent>
       </Modal>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
deleted file mode 100644
index f53cbcc571..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-interface CostBreakdownProps {
-  copilotCost: number
-  totalCost: number
-}
-
-export function CostBreakdown({ copilotCost, totalCost }: CostBreakdownProps) {
-  if (totalCost <= 0) {
-    return null
-  }
-
-  const formatCost = (cost: number): string => {
-    return `$${cost.toFixed(2)}`
-  }
-
-  const workflowExecutionCost = totalCost - copilotCost
-
-  return (
-    <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-[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-[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-[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-[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>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/index.ts
deleted file mode 100644
index 8bb718b16a..0000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/cost-breakdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { CostBreakdown } from './cost-breakdown'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx
index 56d6058d07..46b5983275 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/credit-balance/credit-balance.tsx
@@ -25,6 +25,9 @@ interface CreditBalanceProps {
   onPurchaseComplete?: () => void
 }
 
+/**
+ * Displays credit balance with optional purchase modal.
+ */
 export function CreditBalance({
   balance,
   canPurchase,
@@ -104,8 +107,8 @@ export function CreditBalance({
   return (
     <div className='flex items-center justify-between'>
       <div className='flex items-center gap-[8px]'>
-        <Label>Credit Balance</Label>
-        <span className='text-[13px] text-[var(--text-secondary)]'>
+        <Label>Credit Balance:</Label>
+        <span className='text-[12px] text-[var(--text-secondary)]'>
           {isLoading ? '...' : `$${balance.toFixed(2)}`}
         </span>
       </div>
@@ -113,27 +116,23 @@ export function CreditBalance({
       {canPurchase && (
         <Modal open={isOpen} onOpenChange={handleOpenChange}>
           <ModalTrigger asChild>
-            <Button variant='outline' className='h-8 rounded-[8px] text-[13px]'>
+            <Button variant='active' className='h-[32px] rounded-[6px] text-[12px]'>
               Add Credits
             </Button>
           </ModalTrigger>
           <ModalContent size='sm'>
             <ModalHeader>Add Credits</ModalHeader>
-            <ModalBody>
+            <ModalBody className='!pb-[16px]'>
               {success ? (
-                <p className='text-center text-[13px] text-[var(--text-primary)]'>
+                <p className='text-center text-[12px] text-[var(--text-primary)]'>
                   Credits added successfully!
                 </p>
               ) : (
-                <>
-                  <p className='text-[12px] text-[var(--text-muted)]'>
-                    Credits are used before overage charges. Min $10, max $1,000.
-                  </p>
-
-                  <div className='mt-4 flex flex-col gap-[4px]'>
+                <div className='space-y-[12px]'>
+                  <div className='flex flex-col gap-[8px]'>
                     <Label htmlFor='credit-amount'>Amount (USD)</Label>
                     <div className='relative'>
-                      <span className='-translate-y-1/2 absolute top-1/2 left-3 text-[13px] text-[var(--text-secondary)]'>
+                      <span className='-translate-y-1/2 absolute top-1/2 left-[12px] text-[12px] text-[var(--text-muted)]'>
                         $
                       </span>
                       <Input
@@ -143,29 +142,36 @@ export function CreditBalance({
                         value={amount}
                         onChange={(e) => handleAmountChange(e.target.value)}
                         placeholder='50'
-                        className='pl-7'
+                        className='pl-[28px]'
                         disabled={isPurchasing}
                       />
                     </div>
                     {error && <span className='text-[12px] text-[var(--text-error)]'>{error}</span>}
                   </div>
 
-                  <div className='mt-4 rounded-[6px] bg-[var(--surface-5)] p-3'>
-                    <p className='text-[12px] text-[var(--text-muted)]'>
+                  <div className='rounded-[6px] bg-[var(--surface-4)] p-[12px]'>
+                    <p className='text-[12px] text-[var(--text-secondary)]'>
+                      Credits are used before overage charges. Min: $10, Max: $1,000.
+                    </p>
+                  </div>
+                  <div className='rounded-[6px] bg-[var(--surface-4)] p-[12px]'>
+                    <p className='text-[12px] text-[var(--text-secondary)]'>
                       Credits are non-refundable and don't expire. They'll be applied automatically
                       to your {entityType === 'organization' ? 'team' : ''} usage.
                     </p>
                   </div>
-                </>
+                </div>
               )}
             </ModalBody>
             {!success && (
               <ModalFooter>
                 <ModalClose asChild>
-                  <Button disabled={isPurchasing}>Cancel</Button>
+                  <Button variant='default' disabled={isPurchasing}>
+                    Cancel
+                  </Button>
                 </ModalClose>
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={handlePurchase}
                   disabled={isPurchasing || !amount}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/index.ts
index 064e4ae7ef..cdfe8a0f54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/index.ts
@@ -1,6 +1,3 @@
 export { CancelSubscription } from './cancel-subscription'
-export { CostBreakdown } from './cost-breakdown'
 export { CreditBalance } from './credit-balance'
 export { PlanCard, type PlanCardProps, type PlanFeature } from './plan-card'
-export type { UsageLimitRef } from './usage-limit'
-export { UsageLimit } from './usage-limit'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card/plan-card.tsx
index b82fe62e84..cfdf21ea5c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card/plan-card.tsx
@@ -1,12 +1,12 @@
 'use client'
 
-import type { ReactNode } from 'react'
+import type { ComponentType, ReactNode, SVGProps } from 'react'
 import type { LucideIcon } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 export interface PlanFeature {
-  icon: LucideIcon
+  icon: LucideIcon | ComponentType<SVGProps<SVGSVGElement>>
   text: string
 }
 
@@ -18,14 +18,15 @@ export interface PlanCardProps {
   buttonText: string
   onButtonClick: () => void
   isError?: boolean
-  variant?: 'default' | 'compact'
-  layout?: 'vertical' | 'horizontal'
   className?: string
+  /** Renders the card in horizontal layout with features in a row */
+  horizontal?: boolean
+  /** Places the button inline to the right of features instead of below */
+  inlineButton?: boolean
 }
 
 /**
- * PlanCard component for displaying subscription plan information
- * Supports both vertical and horizontal layouts with flexible pricing display
+ * Displays subscription plan information with features and action button.
  */
 export function PlanCard({
   name,
@@ -35,19 +36,19 @@ export function PlanCard({
   buttonText,
   onButtonClick,
   isError = false,
-  variant = 'default',
-  layout = 'vertical',
   className,
+  horizontal = false,
+  inlineButton = false,
 }: PlanCardProps) {
-  const isHorizontal = layout === 'horizontal'
-
   const renderPrice = () => {
     if (typeof price === 'string') {
       return (
         <>
-          <span className='font-semibold text-[20px]'>{price}</span>
+          <span className='font-medium text-[14px] text-[var(--text-primary)]'>{price}</span>
           {priceSubtext && (
-            <span className='ml-1 text-[12px] text-[var(--text-muted)]'>{priceSubtext}</span>
+            <span className='ml-[4px] text-[12px] text-[var(--text-secondary)]'>
+              {priceSubtext}
+            </span>
           )}
         </>
       )
@@ -55,63 +56,83 @@ export function PlanCard({
     return price
   }
 
-  const renderFeatures = () => {
-    if (isHorizontal) {
-      return (
-        <div className='mt-3 flex flex-wrap items-center gap-3'>
-          {features.map((feature, index) => (
-            <div key={`${feature.text}-${index}`} className='flex items-center gap-2 text-[12px]'>
-              <feature.icon className='h-3 w-3 flex-shrink-0 text-[var(--text-secondary)]' />
-              <span className='text-[var(--text-secondary)]'>{feature.text}</span>
-              {index < features.length - 1 && (
-                <div className='ml-3 h-4 w-px bg-[var(--border)]' aria-hidden='true' />
-              )}
-            </div>
-          ))}
-        </div>
-      )
-    }
-
+  if (horizontal) {
     return (
-      <ul className='mb-4 flex-1 space-y-2'>
-        {features.map((feature, index) => (
-          <li key={`${feature.text}-${index}`} className='flex items-start gap-2 text-[12px]'>
-            <feature.icon
-              className='mt-0.5 h-3 w-3 flex-shrink-0 text-[var(--text-secondary)]'
-              aria-hidden='true'
-            />
-            <span className='text-[var(--text-secondary)]'>{feature.text}</span>
-          </li>
-        ))}
-      </ul>
+      <article
+        className={cn(
+          'flex flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
+          className
+        )}
+      >
+        <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+          <div className='flex items-baseline gap-[8px]'>
+            <span className='font-medium text-[14px] text-[var(--text-primary)]'>{name}</span>
+            <div className='flex items-baseline'>{renderPrice()}</div>
+          </div>
+          <Button
+            onClick={onButtonClick}
+            variant={isError ? 'outline' : 'tertiary'}
+            aria-label={`${buttonText} ${name} plan`}
+          >
+            {isError ? 'Error' : buttonText}
+          </Button>
+        </div>
+        <ul className='flex flex-wrap items-center gap-x-[16px] gap-y-[8px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
+          {features.map((feature, index) => {
+            const Icon = feature.icon
+            return (
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+                <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                <span className='text-[12px] text-[var(--text-primary)]'>{feature.text}</span>
+              </li>
+            )
+          })}
+        </ul>
+      </article>
     )
   }
 
   return (
     <article
       className={cn(
-        'relative flex rounded-[8px] border p-4 transition-colors hover:border-[var(--border-hover)]',
-        isHorizontal ? 'flex-row items-center justify-between gap-6' : 'flex-col',
+        'flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
         className
       )}
     >
-      <header className={isHorizontal ? 'flex-1' : 'mb-4'}>
-        <h3 className='mb-2 font-semibold text-[14px]'>{name}</h3>
+      <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+        <span className='font-medium text-[14px] text-[var(--text-primary)]'>{name}</span>
         <div className='flex items-baseline'>{renderPrice()}</div>
-        {isHorizontal && renderFeatures()}
-      </header>
-
-      {!isHorizontal && renderFeatures()}
-
-      <div className={isHorizontal ? 'flex-shrink-0' : undefined}>
-        <Button
-          onClick={onButtonClick}
+      </div>
+      <div
+        className={cn(
+          'flex rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px]',
+          inlineButton
+            ? 'items-center justify-between gap-[16px] py-[12px]'
+            : 'flex-1 flex-col gap-[16px] py-[16px]'
+        )}
+      >
+        <ul
           className={cn(
-            'h-9 rounded-[8px] text-[13px]',
-            isHorizontal ? 'min-w-[100px] px-6' : 'w-full',
-            isError && 'border-[var(--text-error)] text-[var(--text-error)]'
+            'flex gap-[14px]',
+            inlineButton
+              ? 'flex-row flex-wrap items-center gap-x-[16px] gap-y-[8px]'
+              : 'flex-1 flex-col'
           )}
-          variant='outline'
+        >
+          {features.map((feature, index) => {
+            const Icon = feature.icon
+            return (
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+                <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                <span className='text-[12px] text-[var(--text-primary)]'>{feature.text}</span>
+              </li>
+            )
+          })}
+        </ul>
+        <Button
+          onClick={onButtonClick}
+          className={cn(!inlineButton && 'w-full')}
+          variant={isError ? 'outline' : 'tertiary'}
           aria-label={`${buttonText} ${name} plan`}
         >
           {isError ? 'Error' : buttonText}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/plan-configs.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/plan-configs.ts
index 06281cba6b..f604dd76e1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/plan-configs.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/plan-configs.ts
@@ -4,12 +4,12 @@ import {
   Database,
   HardDrive,
   HeadphonesIcon,
-  Infinity as InfinityIcon,
-  MessageSquare,
   Server,
+  ShieldCheck,
   Users,
   Zap,
 } from 'lucide-react'
+import { SlackMonoIcon } from '@/components/icons'
 import type { PlanFeature } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/plan-card'
 
 export const PRO_PLAN_FEATURES: PlanFeature[] = [
@@ -25,13 +25,16 @@ export const TEAM_PLAN_FEATURES: PlanFeature[] = [
   { icon: Zap, text: '75 runs per minute (sync)' },
   { icon: Clock, text: '500 runs per minute (async)' },
   { icon: HardDrive, text: '500GB file storage (pooled)' },
-  { icon: InfinityIcon, text: 'Everything in Pro' },
-  { icon: MessageSquare, text: 'Dedicated Slack channel' },
+  { icon: Building2, text: 'Unlimited workspaces' },
+  { icon: Users, text: 'Unlimited invites' },
+  { icon: Database, text: 'Unlimited log retention' },
+  { icon: SlackMonoIcon, text: 'Dedicated Slack channel' },
 ]
 
 export const ENTERPRISE_PLAN_FEATURES: PlanFeature[] = [
   { icon: Zap, text: 'Custom rate limits' },
-  { icon: HardDrive, text: 'Custom file storage limits' },
-  { icon: Server, text: 'Enterprise hosting' },
+  { icon: HardDrive, text: 'Custom file storage' },
+  { icon: Server, text: 'SSO' },
+  { icon: ShieldCheck, text: 'SOC2' },
   { icon: HeadphonesIcon, text: 'Dedicated support' },
 ]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription.tsx
index b5b04d17a0..b35aea80ea 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription.tsx
@@ -1,31 +1,21 @@
 'use client'
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { ChevronDown } from 'lucide-react'
+import { Info } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import {
-  Label,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverSection,
-  PopoverTrigger,
-  Switch,
-} from '@/components/emcn'
+import { Combobox, Label, Switch, Tooltip } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { useSubscriptionUpgrade } from '@/lib/billing/client/upgrade'
+import { USAGE_THRESHOLDS } from '@/lib/billing/client/usage-visualization'
 import { cn } from '@/lib/core/utils/cn'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getUserRole } from '@/lib/workspaces/organization/utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { UsageHeader } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/shared/usage-header'
 import {
   CancelSubscription,
   CreditBalance,
   PlanCard,
-  UsageLimit,
-  type UsageLimitRef,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components'
 import {
   ENTERPRISE_PLAN_FEATURES,
@@ -36,6 +26,11 @@ import {
   getSubscriptionPermissions,
   getVisiblePlans,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/subscription-permissions'
+import { UsageHeader } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-header/usage-header'
+import {
+  UsageLimit,
+  type UsageLimitRef,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit'
 import { useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
 import { useOrganizationBilling, useOrganizations } from '@/hooks/queries/organization'
 import { useSubscriptionData, useUsageLimitData } from '@/hooks/queries/subscription'
@@ -52,94 +47,110 @@ const CONSTANTS = {
 
 type TargetPlan = 'pro' | 'team'
 
+interface WorkspaceAdmin {
+  userId: string
+  email: string
+  permissionType: string
+}
+
 /**
  * Skeleton component for subscription loading state.
  */
 function SubscriptionSkeleton() {
   return (
-    <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>
+    <div className='flex h-full flex-col gap-[20px]'>
+      {/* UsageHeader skeleton */}
+      <div className='flex flex-col gap-[12px]'>
+        <div className='flex items-center justify-between'>
+          {/* Left side: plan name and usage */}
+          <div className='flex flex-col gap-[4px]'>
+            <div className='flex h-[18px] items-center'>
+              <Skeleton className='h-[12px] w-[40px] rounded-[4px]' />
+            </div>
+            <div className='flex h-[21px] items-center gap-[4px]'>
+              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+              <span className='font-medium text-[14px] text-[var(--text-primary)]'>/</span>
+              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+            </div>
+          </div>
+          {/* Right side: pills */}
+          <div className='flex flex-col items-end gap-[8px]'>
+            <div className='flex w-[100px] items-center gap-[4px]'>
+              {[...Array(5)].map((_, i) => (
+                <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+              ))}
             </div>
-            <Skeleton className='h-2 w-full rounded' />
           </div>
         </div>
       </div>
 
       {/* Plan Cards */}
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-[10px]'>
         {/* Pro and Team Cards Grid */}
-        <div className='grid grid-cols-2 gap-[8px]'>
+        <div className='grid grid-cols-2 gap-[10px]'>
           {/* 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' />
+          <article className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+            <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+              <Skeleton className='h-[14px] w-[24px] rounded-[4px]' />
+              <div className='flex items-baseline'>
+                <Skeleton className='h-[14px] w-[28px] rounded-[4px]' />
+                <Skeleton className='ml-[4px] h-[12px] w-[40px] rounded-[4px]' />
               </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 className='flex flex-1 flex-col gap-[16px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
+              <ul className='flex flex-1 flex-col gap-[14px]'>
+                {[...Array(6)].map((_, i) => (
+                  <li key={i} className='flex items-center gap-[8px]'>
+                    <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-[4px]' />
+                    <Skeleton className='h-[12px] w-[120px] rounded-[4px]' />
+                  </li>
+                ))}
+              </ul>
+              <Skeleton className='h-[28px] w-full rounded-[5px]' />
             </div>
-            <Skeleton className='h-9 w-full rounded-[8px]' />
-          </div>
+          </article>
 
           {/* 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' />
+          <article className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+            <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+              <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
+              <div className='flex items-baseline'>
+                <Skeleton className='h-[14px] w-[28px] rounded-[4px]' />
+                <Skeleton className='ml-[4px] h-[12px] w-[40px] rounded-[4px]' />
               </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 className='flex flex-1 flex-col gap-[16px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
+              <ul className='flex flex-1 flex-col gap-[14px]'>
+                {[...Array(5)].map((_, i) => (
+                  <li key={i} className='flex items-center gap-[8px]'>
+                    <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-[4px]' />
+                    <Skeleton className='h-[12px] w-[130px] rounded-[4px]' />
+                  </li>
+                ))}
+              </ul>
+              <Skeleton className='h-[28px] w-full rounded-[5px]' />
             </div>
-            <Skeleton className='h-9 w-full rounded-[8px]' />
-          </div>
+          </article>
         </div>
 
-        {/* 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>
+        {/* Enterprise Card - inlineButton layout */}
+        <article className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+          <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
+            <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+            <div className='flex items-baseline' />
+          </div>
+          <div className='flex items-center justify-between gap-[16px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
+            <ul className='flex flex-row flex-wrap items-center gap-x-[16px] gap-y-[8px]'>
+              {[...Array(5)].map((_, i) => (
+                <li key={i} className='flex items-center gap-[8px]'>
+                  <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-[4px]' />
+                  <Skeleton className='h-[12px] w-[100px] rounded-[4px]' />
+                </li>
               ))}
-            </div>
+            </ul>
+            <Skeleton className='h-[28px] w-[64px] flex-shrink-0 rounded-[5px]' />
           </div>
-          <Skeleton className='h-9 w-20 rounded-[8px]' />
-        </div>
+        </article>
       </div>
     </div>
   )
@@ -207,11 +218,19 @@ export function Subscription() {
     minimumLimit: usageLimitResponse?.data?.minimumLimit || (subscription.isPro ? 20 : 40),
   }
 
-  const billingStatus = subscriptionData?.data?.billingBlocked ? 'blocked' : 'ok'
+  const isBlocked = Boolean(subscriptionData?.data?.billingBlocked)
+  const blockedReason = subscriptionData?.data?.billingBlockedReason as
+    | 'payment_failed'
+    | 'dispute'
+    | null
+  const isDispute = isBlocked && blockedReason === 'dispute'
+  const isCritical = isBlocked || usage.percentUsed >= USAGE_THRESHOLDS.CRITICAL
 
   const billedAccountUserId = workspaceData?.settings?.workspace?.billedAccountUserId ?? null
-  const workspaceAdmins =
-    workspaceData?.permissions?.users?.filter((user: any) => user.permissionType === 'admin') || []
+  const workspaceAdmins: WorkspaceAdmin[] =
+    workspaceData?.permissions?.users?.filter(
+      (user: WorkspaceAdmin) => user.permissionType === 'admin'
+    ) || []
 
   const updateWorkspaceSettings = async (updates: { billedAccountUserId?: string }) => {
     if (!workspaceId) return
@@ -270,16 +289,25 @@ export function Subscription() {
     }
   )
 
-  const showBadge = permissions.canEditUsageLimit && !permissions.showTeamMemberView
-  const badgeText = subscription.isFree ? 'Upgrade' : 'Increase Limit'
+  const showBadge =
+    (permissions.canEditUsageLimit && !permissions.showTeamMemberView) ||
+    permissions.showTeamMemberView ||
+    subscription.isEnterprise ||
+    isBlocked
 
-  const handleBadgeClick = () => {
-    if (subscription.isFree) {
-      handleUpgrade('pro')
-    } else if (permissions.canEditUsageLimit && usageLimitRef.current) {
-      usageLimitRef.current.startEdit()
+  const getBadgeConfig = (): { text: string; variant: 'blue-secondary' | 'red' } => {
+    if (permissions.showTeamMemberView || subscription.isEnterprise) {
+      return { text: `${subscription.seats} seats`, variant: 'blue-secondary' }
+    }
+    if (isDispute) return { text: 'Get Help', variant: 'red' }
+    if (isBlocked) return { text: 'Fix Now', variant: 'red' }
+    if (subscription.isFree) return { text: 'Upgrade', variant: 'blue-secondary' }
+    if (isCritical && permissions.canEditUsageLimit) {
+      return { text: 'Increase Limit', variant: 'red' }
     }
+    return { text: 'Increase Limit', variant: 'blue-secondary' }
   }
+  const badgeConfig = getBadgeConfig()
 
   const handleUpgradeWithErrorHandling = useCallback(
     async (targetPlan: TargetPlan) => {
@@ -292,8 +320,62 @@ export function Subscription() {
     [handleUpgrade]
   )
 
+  const handleBadgeClick = useCallback(async () => {
+    // Dispute: open help modal
+    if (isDispute) {
+      window.dispatchEvent(new CustomEvent('open-help-modal'))
+      return
+    }
+
+    // Blocked: open billing portal
+    if (isBlocked) {
+      try {
+        const context = subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user'
+        const res = await fetch('/api/billing/portal', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            context,
+            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) {
+        logger.error('Failed to open billing portal', { error: e })
+        alert(e instanceof Error ? e.message : 'Failed to open billing portal')
+      }
+      return
+    }
+
+    // Free: upgrade to pro
+    if (subscription.isFree) {
+      handleUpgradeWithErrorHandling('pro')
+      return
+    }
+
+    // Paid: edit usage limit
+    if (permissions.canEditUsageLimit && usageLimitRef.current) {
+      usageLimitRef.current.startEdit()
+    }
+  }, [
+    isDispute,
+    isBlocked,
+    subscription.isFree,
+    subscription.isTeam,
+    subscription.isEnterprise,
+    activeOrgId,
+    permissions.canEditUsageLimit,
+    handleUpgradeWithErrorHandling,
+    logger,
+  ])
+
   const renderPlanCard = useCallback(
-    (planType: 'pro' | 'team' | 'enterprise', layout: 'vertical' | 'horizontal' = 'vertical') => {
+    (planType: 'pro' | 'team' | 'enterprise', options?: { horizontal?: boolean }) => {
       const handleContactEnterprise = () => window.open(CONSTANTS.TYPEFORM_ENTERPRISE_URL, '_blank')
 
       switch (planType) {
@@ -308,7 +390,6 @@ export function Subscription() {
               buttonText={subscription.isFree ? 'Upgrade' : 'Upgrade to Pro'}
               onButtonClick={() => handleUpgradeWithErrorHandling('pro')}
               isError={upgradeError === 'pro'}
-              layout={layout}
             />
           )
 
@@ -323,7 +404,6 @@ export function Subscription() {
               buttonText={subscription.isFree ? 'Upgrade' : 'Upgrade to Team'}
               onButtonClick={() => handleUpgradeWithErrorHandling('team')}
               isError={upgradeError === 'team'}
-              layout={layout}
             />
           )
 
@@ -332,16 +412,11 @@ export function Subscription() {
             <PlanCard
               key='enterprise'
               name='Enterprise'
-              price={<span className='font-semibold text-[20px]'>Custom</span>}
-              priceSubtext={
-                layout === 'horizontal'
-                  ? 'Custom solutions tailored to your enterprise needs'
-                  : undefined
-              }
+              price=''
               features={ENTERPRISE_PLAN_FEATURES}
               buttonText='Contact'
               onButtonClick={handleContactEnterprise}
-              layout={layout}
+              inlineButton={options?.horizontal}
             />
           )
 
@@ -349,7 +424,7 @@ export function Subscription() {
           return null
       }
     },
-    [subscription.isFree, upgradeError, handleUpgrade]
+    [subscription.isFree, upgradeError, handleUpgradeWithErrorHandling]
   )
 
   if (isLoading) {
@@ -357,162 +432,91 @@ export function Subscription() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[20px]'>
       {/* Current Plan & Usage Overview */}
-      <div>
-        <UsageHeader
-          title={formatPlanName(subscription.plan)}
-          gradientTitle={!subscription.isFree}
-          showBadge={showBadge}
-          badgeText={badgeText}
-          onBadgeClick={handleBadgeClick}
-          seatsText={
-            permissions.canManageTeam || subscription.isEnterprise
-              ? `${subscription.seats} 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)}
-          blockedReason={subscriptionData?.data?.billingBlockedReason}
-          blockedByOrgOwner={Boolean(subscriptionData?.data?.blockedByOrgOwner)}
-          status={billingStatus}
-          percentUsed={
-            subscription.isEnterprise || subscription.isTeam
-              ? organizationBillingData?.totalUsageLimit &&
-                organizationBillingData.totalUsageLimit > 0 &&
-                organizationBillingData.totalCurrentUsage !== undefined
-                ? (organizationBillingData.totalCurrentUsage /
-                    organizationBillingData.totalUsageLimit) *
-                  100
-                : usage.percentUsed
-              : usage.percentUsed
-          }
-          onContactSupport={() => {
-            window.dispatchEvent(new CustomEvent('open-help-modal'))
-          }}
-          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)}
-        />
-      </div>
-
-      {/* Enterprise Usage Limit Notice */}
-      {subscription.isEnterprise && (
-        <div className='text-center'>
-          <p className='text-[12px] text-[var(--text-muted)]'>
-            Contact enterprise for support usage limit changes
-          </p>
-        </div>
-      )}
-
-      {/* Team Member Notice */}
-      {permissions.showTeamMemberView && (
-        <div className='text-center'>
-          <p className='text-[12px] text-[var(--text-muted)]'>
-            Contact your team admin to increase limits
-          </p>
-        </div>
-      )}
+      <UsageHeader
+        title={formatPlanName(subscription.plan)}
+        showBadge={showBadge}
+        badgeText={badgeConfig.text}
+        badgeVariant={badgeConfig.variant}
+        onBadgeClick={permissions.showTeamMemberView ? undefined : handleBadgeClick}
+        seatsText={
+          permissions.canManageTeam || subscription.isEnterprise
+            ? `${subscription.seats} 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={isBlocked}
+        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
+        }
+      />
 
       {/* Upgrade Plans */}
       {permissions.showUpgradePlans && (
-        <div className='flex flex-col gap-[8px]'>
+        <div className='flex flex-col gap-[10px]'>
           {/* Render plans based on what should be visible */}
           {(() => {
-            const totalPlans = visiblePlans.length
             const hasEnterprise = visiblePlans.includes('enterprise')
+            const nonEnterprisePlans = visiblePlans.filter((plan) => plan !== '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-[8px]'>
-                  {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'
+            // Free users: Pro + Team in 2-col grid, Enterprise horizontal
+            // Pro users: Team + Enterprise both vertical (single column)
+            // Team admins: Enterprise only (horizontal)
+            const showEnterpriseHorizontal =
+              subscription.isFree || (subscription.isTeam && isTeamAdmin)
 
             return (
               <>
-                {otherPlans.length > 0 && (
+                {nonEnterprisePlans.length > 0 && (
                   <div
                     className={cn(
-                      'grid gap-[8px]',
-                      otherPlans.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
+                      'grid gap-[10px]',
+                      nonEnterprisePlans.length === 2 ? 'grid-cols-2' : 'grid-cols-1'
                     )}
                   >
-                    {otherPlans.map((plan) => renderPlanCard(plan, 'vertical'))}
+                    {nonEnterprisePlans.map((plan) => renderPlanCard(plan))}
                   </div>
                 )}
-
-                {/* Enterprise plan */}
-                {hasEnterprise && renderPlanCard('enterprise', enterpriseLayout)}
+                {hasEnterprise &&
+                  renderPlanCard('enterprise', { horizontal: showEnterpriseHorizontal })}
               </>
             )
           })()}
@@ -530,15 +534,17 @@ export function Subscription() {
         />
       )}
 
-      {/* Next Billing Date */}
-      {subscription.isPaid && subscriptionData?.data?.periodEnd && (
-        <div className='flex items-center justify-between'>
-          <Label>Next Billing Date</Label>
-          <span className='text-[13px] text-[var(--text-secondary)]'>
-            {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
-          </span>
-        </div>
-      )}
+      {/* Next Billing Date - hidden from team members */}
+      {subscription.isPaid &&
+        subscriptionData?.data?.periodEnd &&
+        !permissions.showTeamMemberView && (
+          <div className='flex items-center justify-between'>
+            <Label>Next Billing Date</Label>
+            <span className='text-[12px] text-[var(--text-secondary)]'>
+              {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
+            </span>
+          </div>
+        )}
 
       {/* Usage notifications */}
       {subscription.isPaid && <BillingUsageNotificationsToggle />}
@@ -558,53 +564,48 @@ export function Subscription() {
         />
       )}
 
-      {/* Billed Account for Workspace */}
-      {canManageWorkspaceKeys && (
-        <div className='flex items-center justify-between'>
-          <Label>Billed Account for Workspace</Label>
-          {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-[12px] text-[var(--text-muted)]'>
-              No admin members available
+      {/* Billed Account for Workspace - Only visible to team admins */}
+      {!isLoading && isTeamAdmin && (
+        <div className='mt-auto flex items-center justify-between'>
+          <div className='flex items-center gap-[6px]'>
+            <Label htmlFor='billed-account'>Billed Account</Label>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Info className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <span>Usage from this workspace will be billed to this account</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </div>
+          {workspaceAdmins.length === 0 ? (
+            <div className='rounded-[6px] border border-[var(--border)] border-dashed px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
+              No admins available
             </div>
           ) : (
-            <Popover>
-              <PopoverTrigger asChild>
-                <button
-                  className='flex h-8 w-[200px] items-center justify-between gap-2 rounded-[6px] border border-[var(--border)] bg-transparent px-3 text-left text-[13px] transition-colors hover:bg-[var(--surface-3)] disabled:pointer-events-none disabled:opacity-50'
-                  disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
-                >
-                  <span className='flex-1 truncate text-[var(--text-primary)]'>
-                    {billedAccountUserId
-                      ? workspaceAdmins.find((admin: any) => admin.userId === billedAccountUserId)
-                          ?.email || 'Select admin'
-                      : 'Select admin'}
-                  </span>
-                  <ChevronDown className='h-3 w-3 shrink-0 text-[var(--text-secondary)]' />
-                </button>
-              </PopoverTrigger>
-              <PopoverContent align='end' minWidth={200} border>
-                <PopoverSection>Workspace admins</PopoverSection>
-                {workspaceAdmins.map((admin: any) => (
-                  <PopoverItem
-                    key={admin.userId}
-                    active={billedAccountUserId === admin.userId}
-                    showCheck
-                    onClick={async () => {
-                      if (admin.userId === billedAccountUserId) return
-                      try {
-                        await updateWorkspaceSettings({ billedAccountUserId: admin.userId })
-                      } catch (error) {
-                        // Error is already logged in updateWorkspaceSettings
-                      }
-                    }}
-                  >
-                    <span className='flex-1 truncate'>{admin.email}</span>
-                  </PopoverItem>
-                ))}
-              </PopoverContent>
-            </Popover>
+            <div className='w-[200px]'>
+              <Combobox
+                size='sm'
+                align='end'
+                dropdownWidth={200}
+                value={billedAccountUserId || ''}
+                onChange={async (value: string) => {
+                  if (value && value !== billedAccountUserId) {
+                    try {
+                      await updateWorkspaceSettings({ billedAccountUserId: value })
+                    } catch {
+                      // Error is already logged in updateWorkspaceSettings
+                    }
+                  }
+                }}
+                disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
+                placeholder='Select admin'
+                options={workspaceAdmins.map((admin) => ({
+                  label: admin.email,
+                  value: admin.userId,
+                }))}
+              />
+            </div>
           )}
         </div>
       )}
@@ -619,7 +620,7 @@ function BillingUsageNotificationsToggle() {
 
   return (
     <div className='flex items-center justify-between'>
-      <div className='flex flex-col gap-[2px]'>
+      <div className='flex flex-col gap-[4px]'>
         <Label htmlFor='usage-notifications'>Usage notifications</Label>
         <span className='text-[12px] text-[var(--text-muted)]'>
           Email me when I reach 80% usage
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
index 15b36fffbc..c91851d011 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import React, { useMemo, useState } from 'react'
 import { CheckCircle, ChevronDown } from 'lucide-react'
 import {
@@ -11,6 +13,7 @@ import {
 import { Checkbox } from '@/components/ui/checkbox'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
+import type { AdminWorkspace } from '@/hooks/queries/workspace'
 
 type PermissionType = 'read' | 'write' | 'admin'
 
@@ -61,7 +64,7 @@ interface MemberInvitationCardProps {
   showWorkspaceInvite: boolean
   setShowWorkspaceInvite: (show: boolean) => void
   selectedWorkspaces: Array<{ workspaceId: string; permission: string }>
-  userWorkspaces: any[]
+  userWorkspaces: AdminWorkspace[]
   onInviteMember: () => Promise<void>
   onLoadUserWorkspaces: () => Promise<void>
   onWorkspaceToggle: (workspaceId: string, permission: string) => void
@@ -128,18 +131,18 @@ export function MemberInvitationCard({
   }
 
   return (
-    <div className='rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)] p-4'>
-      <div className='space-y-3'>
-        {/* Header */}
-        <div>
-          <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>
+    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      {/* Header */}
+      <div className='px-[14px] py-[10px]'>
+        <h4 className='font-medium text-[14px] text-[var(--text-primary)]'>Invite Team Members</h4>
+        <p className='text-[12px] text-[var(--text-muted)]'>
+          Add new members to your team and optionally give them access to specific workspaces
+        </p>
+      </div>
 
+      <div className='flex flex-col gap-[12px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
         {/* Main invitation input */}
-        <div className='flex items-start gap-2'>
+        <div className='flex items-start gap-[8px]'>
           <div className='flex-1'>
             {/* Hidden decoy fields to prevent browser autofill */}
             <input
@@ -174,7 +177,7 @@ export function MemberInvitationCard({
               aria-autocomplete='none'
             />
             {emailError && (
-              <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='mt-1 text-[11px] text-[var(--text-error)] leading-tight'>
                 {emailError}
               </p>
             )}
@@ -190,7 +193,7 @@ export function MemberInvitationCard({
           >
             <PopoverTrigger asChild>
               <Button
-                variant='ghost'
+                variant='active'
                 disabled={isInviting || !hasAvailableSeats}
                 className='min-w-[110px]'
               >
@@ -276,7 +279,7 @@ export function MemberInvitationCard({
             </PopoverContent>
           </Popover>
           <Button
-            variant='secondary'
+            variant='tertiary'
             onClick={handleInviteClick}
             disabled={!inviteEmail || isInviting || !hasAvailableSeats}
           >
@@ -286,7 +289,7 @@ export function MemberInvitationCard({
 
         {/* Invitation error - inline */}
         {invitationError && (
-          <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+          <p className='text-[11px] text-[var(--text-error)] leading-tight'>
             {invitationError instanceof Error && invitationError.message
               ? invitationError.message
               : String(invitationError)}
@@ -295,9 +298,9 @@ export function MemberInvitationCard({
 
         {/* Success message */}
         {inviteSuccess && (
-          <div className='flex items-start gap-2 rounded-md bg-green-500/10 p-2.5 text-green-600 dark:text-green-400'>
+          <div className='flex items-start gap-[8px] rounded-[6px] bg-green-500/10 px-[10px] py-[8px] text-green-600 dark:text-green-400'>
             <CheckCircle className='h-4 w-4 flex-shrink-0' />
-            <p className='text-xs'>
+            <p className='text-[12px]'>
               Invitation sent successfully
               {selectedCount > 0 &&
                 ` with access to ${selectedCount} workspace${selectedCount !== 1 ? 's' : ''}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
index 582ca27d39..9e35a894da 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -1,4 +1,3 @@
-import { RefreshCw } from 'lucide-react'
 import {
   Button,
   Input,
@@ -43,18 +42,20 @@ export function NoOrganizationView({
   if (hasTeamPlan || hasEnterprisePlan) {
     return (
       <div>
-        <div className='flex flex-col gap-6'>
+        <div className='flex flex-col gap-[20px]'>
           {/* Header - matching settings page style */}
           <div>
-            <h4 className='font-medium text-[13px]'>Create Your Team Workspace</h4>
-            <p className='mt-1 text-[var(--text-muted)] text-xs'>
+            <h4 className='font-medium text-[14px] text-[var(--text-primary)]'>
+              Create Your Team Workspace
+            </h4>
+            <p className='mt-[4px] text-[12px] text-[var(--text-muted)]'>
               You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
               workspace to start collaborating with your team.
             </p>
           </div>
 
           {/* Form fields - clean layout without card */}
-          <div className='space-y-4'>
+          <div className='flex flex-col gap-[16px]'>
             {/* Hidden decoy field to prevent browser autofill */}
             <input
               type='text'
@@ -65,7 +66,7 @@ export function NoOrganizationView({
               readOnly
             />
             <div>
-              <Label htmlFor='team-name-field' className='font-medium text-[13px]'>
+              <Label htmlFor='team-name-field' className='font-medium text-[12px]'>
                 Team Name
               </Label>
               <Input
@@ -73,7 +74,7 @@ export function NoOrganizationView({
                 value={orgName}
                 onChange={onOrgNameChange}
                 placeholder='My Team'
-                className='mt-1'
+                className='mt-[4px]'
                 name='team_name_field'
                 autoComplete='off'
                 autoCorrect='off'
@@ -84,11 +85,11 @@ export function NoOrganizationView({
             </div>
 
             <div>
-              <Label htmlFor='orgSlug' className='font-medium text-[13px]'>
+              <Label htmlFor='orgSlug' className='font-medium text-[12px]'>
                 Team URL
               </Label>
-              <div className='mt-1 flex items-center'>
-                <div className='rounded-l-[8px] border border-r-0 bg-[var(--surface-3)] px-3 py-2 text-[var(--text-muted)] text-sm'>
+              <div className='mt-[4px] flex items-center'>
+                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
                   sim.ai/team/
                 </div>
                 <Input
@@ -101,20 +102,17 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            <div className='flex flex-col gap-2'>
+            <div className='flex flex-col gap-[8px]'>
               {error && (
-                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                  {error}
-                </p>
+                <p className='text-[11px] text-[var(--text-error)] leading-tight'>{error}</p>
               )}
               <div className='flex justify-end'>
                 <Button
+                  variant='tertiary'
                   onClick={onCreateOrganization}
                   disabled={!orgName || !orgSlug || isCreatingOrg}
-                  className='h-[32px] px-[12px]'
                 >
-                  {isCreatingOrg && <RefreshCw className='mr-2 h-4 w-4 animate-spin' />}
-                  Create Team Workspace
+                  {isCreatingOrg ? 'Creating...' : 'Create Team Workspace'}
                 </Button>
               </div>
             </div>
@@ -130,7 +128,7 @@ export function NoOrganizationView({
               </ModalDescription>
             </ModalHeader>
 
-            <div className='space-y-4'>
+            <div className='flex flex-col gap-[16px]'>
               {/* Hidden decoy field to prevent browser autofill */}
               <input
                 type='text'
@@ -141,7 +139,7 @@ export function NoOrganizationView({
                 readOnly
               />
               <div>
-                <Label htmlFor='org-name-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-name-field' className='font-medium text-[12px]'>
                   Organization Name
                 </Label>
                 <Input
@@ -150,7 +148,7 @@ export function NoOrganizationView({
                   value={orgName}
                   onChange={onOrgNameChange}
                   disabled={isCreatingOrg}
-                  className='mt-1'
+                  className='mt-[4px]'
                   name='org_name_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -161,7 +159,7 @@ export function NoOrganizationView({
               </div>
 
               <div>
-                <Label htmlFor='org-slug-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-slug-field' className='font-medium text-[12px]'>
                   Organization Slug
                 </Label>
                 <Input
@@ -170,7 +168,7 @@ export function NoOrganizationView({
                   value={orgSlug}
                   onChange={(e) => setOrgSlug(e.target.value)}
                   disabled={isCreatingOrg}
-                  className='mt-1'
+                  className='mt-[4px]'
                   name='org_slug_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -181,28 +179,22 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            {error && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {error}
-              </p>
-            )}
+            {error && <p className='text-[11px] text-[var(--text-error)] leading-tight'>{error}</p>}
 
             <ModalFooter>
               <Button
-                variant='outline'
+                variant='active'
                 onClick={() => setCreateOrgDialogOpen(false)}
                 disabled={isCreatingOrg}
-                className='h-[32px] px-[12px]'
               >
                 Cancel
               </Button>
               <Button
+                variant='tertiary'
                 onClick={onCreateOrganization}
                 disabled={isCreatingOrg || !orgName.trim()}
-                className='h-[32px] px-[12px]'
               >
-                {isCreatingOrg && <RefreshCw className='mr-2 h-4 w-4 animate-spin' />}
-                Create Organization
+                {isCreatingOrg ? 'Creating...' : 'Create Organization'}
               </Button>
             </ModalFooter>
           </ModalContent>
@@ -212,22 +204,24 @@ export function NoOrganizationView({
   }
 
   return (
-    <div className='space-y-4 p-6'>
-      <div className='space-y-6'>
-        <h3 className='font-medium text-[13px]'>No Team Workspace</h3>
-        <p className='text-[var(--text-muted)] text-sm'>
+    <div className='flex flex-col gap-[20px]'>
+      <div className='flex flex-col gap-[8px]'>
+        <h3 className='font-medium text-[14px] text-[var(--text-primary)]'>No Team Workspace</h3>
+        <p className='text-[12px] text-[var(--text-secondary)]'>
           You don't have a team workspace yet. To collaborate with others, first upgrade to a team
           or enterprise plan.
         </p>
+      </div>
 
+      <div>
         <Button
+          variant='tertiary'
           onClick={() => {
             const event = new CustomEvent('open-settings', {
               detail: { tab: 'subscription' },
             })
             window.dispatchEvent(event)
           }}
-          className='h-[32px] px-[12px]'
         >
           Upgrade to Team Plan
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 0a8f3ee9cd..e630997134 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -1,4 +1,5 @@
 import { Button, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@/components/emcn'
+import { Checkbox } from '@/components/ui/checkbox'
 
 interface RemoveMemberDialogProps {
   open: boolean
@@ -28,7 +29,7 @@ export function RemoveMemberDialog({
       <ModalContent className='w-[400px]'>
         <ModalHeader>{isSelfRemoval ? 'Leave Organization' : 'Remove Team Member'}</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-tertiary)]'>
+          <p className='text-[12px] text-[var(--text-secondary)]'>
             {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?`}{' '}
@@ -36,20 +37,18 @@ export function RemoveMemberDialog({
           </p>
 
           {!isSelfRemoval && (
-            <div className='mt-4'>
-              <div className='flex items-center space-x-2'>
-                <input
-                  type='checkbox'
+            <div className='mt-[16px]'>
+              <div className='flex items-center gap-[8px]'>
+                <Checkbox
                   id='reduce-seats'
-                  className='rounded-[4px]'
                   checked={shouldReduceSeats}
-                  onChange={(e) => onShouldReduceSeatsChange(e.target.checked)}
+                  onCheckedChange={(checked) => onShouldReduceSeatsChange(checked === true)}
                 />
-                <label htmlFor='reduce-seats' className='text-xs'>
+                <label htmlFor='reduce-seats' className='text-[12px] text-[var(--text-primary)]'>
                   Also reduce seat count in my subscription
                 </label>
               </div>
-              <p className='mt-1 text-[var(--text-muted)] text-xs'>
+              <p className='mt-[4px] text-[12px] text-[var(--text-muted)]'>
                 If selected, your team seat count will be reduced by 1, lowering your monthly
                 billing.
               </p>
@@ -57,8 +56,8 @@ export function RemoveMemberDialog({
           )}
 
           {error && (
-            <div className='mt-2'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='mt-[8px]'>
+              <p className='text-[11px] text-[var(--text-error)] leading-tight'>
                 {error instanceof Error && error.message ? error.message : String(error)}
               </p>
             </div>
@@ -68,11 +67,7 @@ export function RemoveMemberDialog({
           <Button variant='active' onClick={onCancel}>
             Cancel
           </Button>
-          <Button
-            variant='primary'
-            onClick={() => onConfirmRemove(shouldReduceSeats)}
-            className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-          >
+          <Button variant='destructive' onClick={() => onConfirmRemove(shouldReduceSeats)}>
             {isSelfRemoval ? 'Leave Organization' : 'Remove'}
           </Button>
         </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx
index 3a3a4e53cb..ae4ccfc07a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-members/team-members.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import { useState } from 'react'
-import { Button } from '@/components/emcn'
+import { Badge, Button } from '@/components/emcn'
 import { UserAvatar } from '@/components/user-avatar/user-avatar'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { Invitation, Member, Organization } from '@/lib/workspaces/organization'
@@ -43,6 +45,9 @@ export function TeamMembers({
   isAdminOrOwner,
   onRemoveMember,
 }: TeamMembersProps) {
+  // Track which invitations are being cancelled for individual loading states
+  const [cancellingInvitations, setCancellingInvitations] = useState<Set<string>>(new Set())
+
   // Fetch member usage data using React Query
   const { data: memberUsageResponse, isLoading: isLoadingUsage } = useOrganizationMembers(
     organization?.id || ''
@@ -53,11 +58,13 @@ export function TeamMembers({
   // Build usage data map from response
   const memberUsageData: Record<string, number> = {}
   if (memberUsageResponse?.data) {
-    memberUsageResponse.data.forEach((member: any) => {
-      if (member.currentPeriodCost !== null && member.currentPeriodCost !== undefined) {
-        memberUsageData[member.userId] = Number.parseFloat(member.currentPeriodCost.toString())
+    memberUsageResponse.data.forEach(
+      (member: { userId: string; currentPeriodCost?: number | null }) => {
+        if (member.currentPeriodCost !== null && member.currentPeriodCost !== undefined) {
+          memberUsageData[member.userId] = Number.parseFloat(member.currentPeriodCost.toString())
+        }
       }
-    })
+    )
   }
 
   // Combine members and pending invitations into a single list
@@ -120,9 +127,6 @@ export function TeamMembers({
   const canLeaveOrganization =
     currentUserMember && currentUserMember.role !== 'owner' && currentUserMember.user?.id
 
-  // Track which invitations are being cancelled for individual loading states
-  const [cancellingInvitations, setCancellingInvitations] = useState<Set<string>>(new Set())
-
   const handleCancelInvitation = async (invitationId: string) => {
     if (!organization?.id) return
 
@@ -144,18 +148,18 @@ export function TeamMembers({
   }
 
   return (
-    <div className='flex flex-col gap-4'>
+    <div className='flex flex-col gap-[16px]'>
       {/* Header - simple like account page */}
       <div>
-        <h4 className='font-medium text-[13px]'>Team Members</h4>
+        <h4 className='font-medium text-[14px] text-[var(--text-primary)]'>Team Members</h4>
       </div>
 
       {/* Members list - clean like account page */}
-      <div className='space-y-4'>
+      <div className='flex flex-col gap-[16px]'>
         {teamItems.map((item) => (
           <div key={item.id} className='flex items-center justify-between'>
             {/* Left section: Avatar + Name/Role + Action buttons */}
-            <div className='flex flex-1 items-center gap-3'>
+            <div className='flex flex-1 items-center gap-[12px]'>
               {/* Avatar */}
               <UserAvatar
                 userId={item.userId || item.email}
@@ -166,26 +170,25 @@ export function TeamMembers({
 
               {/* Name and email */}
               <div className='min-w-0'>
-                <div className='flex items-center gap-2'>
-                  <span className='truncate font-medium text-sm'>{item.name}</span>
+                <div className='flex items-center gap-[8px]'>
+                  <span className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                    {item.name}
+                  </span>
                   {item.type === 'member' && (
-                    <span
-                      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-[var(--surface-3)] text-[var(--text-muted)]'
-                      } `}
+                    <Badge
+                      variant={item.role === 'owner' ? 'blue-secondary' : 'gray-secondary'}
+                      size='sm'
                     >
                       {item.role.charAt(0).toUpperCase() + item.role.slice(1)}
-                    </span>
+                    </Badge>
                   )}
                   {item.type === 'invitation' && (
-                    <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'>
+                    <Badge variant='amber' size='sm'>
                       Pending
-                    </span>
+                    </Badge>
                   )}
                 </div>
-                <div className='truncate text-[var(--text-muted)] text-xs'>{item.email}</div>
+                <div className='truncate text-[12px] text-[var(--text-muted)]'>{item.email}</div>
               </div>
 
               {/* Action buttons */}
@@ -198,7 +201,7 @@ export function TeamMembers({
                       <Button
                         variant='ghost'
                         onClick={() => onRemoveMember(item.member)}
-                        className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                        className='h-8'
                       >
                         Remove
                       </Button>
@@ -210,7 +213,7 @@ export function TeamMembers({
                       variant='ghost'
                       onClick={() => handleCancelInvitation(item.invitation.id)}
                       disabled={cancellingInvitations.has(item.invitation.id)}
-                      className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                      className='h-8'
                     >
                       {cancellingInvitations.has(item.invitation.id) ? 'Cancelling...' : 'Cancel'}
                     </Button>
@@ -221,11 +224,11 @@ export function TeamMembers({
 
             {/* Right section: Usage column (right-aligned) */}
             {isAdminOrOwner && (
-              <div className='ml-4 flex flex-col items-end'>
-                <div className='text-[var(--text-muted)] text-xs'>Usage</div>
-                <div className='font-medium text-xs tabular-nums'>
+              <div className='ml-[16px] flex flex-col items-end'>
+                <div className='text-[12px] text-[var(--text-muted)]'>Usage</div>
+                <div className='font-medium text-[12px] text-[var(--text-primary)] tabular-nums'>
                   {isLoadingUsage && item.type === 'member' ? (
-                    <span className='inline-block h-3 w-12 animate-pulse rounded bg-[var(--surface-3)]' />
+                    <span className='inline-block h-3 w-12 animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
                   ) : (
                     item.usage
                   )}
@@ -238,9 +241,9 @@ export function TeamMembers({
 
       {/* Leave Organization button */}
       {canLeaveOrganization && (
-        <div className='mt-4 border-[var(--border-muted)] border-t pt-4'>
+        <div className='mt-[4px] border-[var(--border-1)] border-t pt-[16px]'>
           <Button
-            variant='default'
+            variant='active'
             onClick={() => {
               if (!currentUserMember?.user?.id) {
                 logger.error('Cannot leave organization: missing user ID', { currentUserMember })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 283adeb749..6096536ade 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -26,24 +26,20 @@ interface TeamSeatsOverviewProps {
 
 function TeamSeatsSkeleton() {
   return (
-    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
-      <div className='space-y-2'>
+    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Skeleton className='h-5 w-16' />
-            <Skeleton className='h-4 w-20' />
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-5 w-16 rounded-[4px]' />
+            <Skeleton className='h-4 w-20 rounded-[4px]' />
           </div>
-          <div className='flex items-center gap-1 text-xs'>
-            <Skeleton className='h-4 w-8' />
+          <div className='flex items-center gap-[4px] text-[12px]'>
+            <Skeleton className='h-4 w-8 rounded-[4px]' />
             <span className='text-[var(--text-muted)]'>/</span>
-            <Skeleton className='h-4 w-8' />
+            <Skeleton className='h-4 w-8 rounded-[4px]' />
           </div>
         </div>
-        <Skeleton className='h-2 w-full rounded' />
-        <div className='flex gap-2 pt-1'>
-          <Skeleton className='h-8 flex-1 rounded-[8px]' />
-          <Skeleton className='h-8 flex-1 rounded-[8px]' />
-        </div>
+        <Skeleton className='h-[6px] w-full rounded-full' />
       </div>
     </div>
   )
@@ -65,16 +61,18 @@ export function TeamSeatsOverview({
 
   if (!subscriptionData) {
     return (
-      <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-[var(--text-muted)] text-xs'>
+      <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+        <div className='flex flex-col items-center gap-[12px] px-[14px] py-[16px] text-center'>
+          <div className='flex flex-col gap-[4px]'>
+            <p className='font-medium text-[14px] text-[var(--text-primary)]'>
+              No Team Subscription Found
+            </p>
+            <p className='text-[12px] text-[var(--text-muted)]'>
               Your subscription may need to be transferred to this organization.
             </p>
           </div>
           <Button
-            variant='primary'
+            variant='tertiary'
             onClick={() => {
               onConfirmTeamUpgrade(2)
             }}
@@ -90,27 +88,29 @@ export function TeamSeatsOverview({
   const isEnterprise = checkEnterprisePlan(subscriptionData)
 
   return (
-    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
-      <div className='space-y-2'>
+    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
         {/* Top row - matching UsageHeader */}
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Seats</span>
+          <div className='flex items-center gap-[8px]'>
+            <span className='font-medium text-[14px] 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'
+                variant='blue-secondary'
+                size='sm'
+                className='cursor-pointer'
                 onClick={onAddSeatDialog}
               >
                 Add Seats
               </Badge>
             )}
           </div>
-          <div className='flex items-center gap-[4px] text-xs tabular-nums'>
-            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
+          <div className='flex items-center gap-[4px] text-[12px] tabular-nums'>
+            <span className='font-medium text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
-            <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
-            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
+            <span className='font-medium text-[var(--text-secondary)]'>/</span>
+            <span className='font-medium text-[var(--text-secondary)] tabular-nums'>
               {totalSeats} total
             </span>
           </div>
@@ -134,8 +134,8 @@ export function TeamSeatsOverview({
 
         {/* Enterprise message */}
         {isEnterprise && (
-          <div className='pt-1 text-center'>
-            <p className='text-[var(--text-muted)] text-xs'>
+          <div className='pt-[4px] text-center'>
+            <p className='text-[12px] text-[var(--text-muted)]'>
               Contact support for enterprise usage limit changes
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
index 83442f724f..58e8a2acd3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-seats/team-seats.tsx
@@ -66,8 +66,10 @@ export function TeamSeats({
         <ModalBody>
           <p className='text-[12px] text-[var(--text-muted)]'>{description}</p>
 
-          <div className='mt-4 flex flex-col gap-[4px]'>
-            <Label htmlFor='seats'>Number of seats</Label>
+          <div className='mt-[16px] flex flex-col gap-[4px]'>
+            <Label htmlFor='seats' className='text-[12px]'>
+              Number of seats
+            </Label>
             <Combobox
               options={seatOptions}
               value={selectedSeats > 0 ? selectedSeats.toString() : ''}
@@ -83,22 +85,22 @@ export function TeamSeats({
             />
           </div>
 
-          <p className='mt-3 text-[12px] text-[var(--text-muted)]'>
+          <p className='mt-[12px] text-[12px] text-[var(--text-muted)]'>
             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-4 rounded-[6px] bg-[var(--surface-5)] p-3'>
+            <div className='mt-[16px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[12px] py-[10px]'>
               <div className='flex justify-between text-[12px]'>
                 <span className='text-[var(--text-muted)]'>Current seats:</span>
                 <span className='text-[var(--text-primary)]'>{currentSeats}</span>
               </div>
-              <div className='mt-2 flex justify-between text-[12px]'>
+              <div className='mt-[8px] flex justify-between text-[12px]'>
                 <span className='text-[var(--text-muted)]'>New seats:</span>
                 <span className='text-[var(--text-primary)]'>{selectedSeats}</span>
               </div>
-              <div className='mt-3 flex justify-between border-[var(--border)] border-t pt-3 text-[12px]'>
+              <div className='mt-[12px] flex justify-between border-[var(--border-1)] border-t pt-[12px] text-[12px]'>
                 <span className='font-medium text-[var(--text-primary)]'>Monthly cost change:</span>
                 <span className='font-medium text-[var(--text-primary)]'>
                   {costChange > 0 ? '+' : ''}${costChange}
@@ -108,14 +110,14 @@ export function TeamSeats({
           )}
 
           {error && (
-            <p className='mt-3 text-[12px] text-[var(--text-error)]'>
+            <p className='mt-[12px] text-[12px] text-[var(--text-error)]'>
               {error instanceof Error && error.message ? error.message : String(error)}
             </p>
           )}
         </ModalBody>
 
         <ModalFooter>
-          <Button onClick={() => onOpenChange(false)} disabled={isLoading}>
+          <Button variant='active' onClick={() => onOpenChange(false)} disabled={isLoading}>
             Cancel
           </Button>
 
@@ -123,7 +125,7 @@ export function TeamSeats({
             <Tooltip.Trigger asChild>
               <span>
                 <Button
-                  variant='primary'
+                  variant='tertiary'
                   onClick={() => onConfirm(selectedSeats)}
                   disabled={
                     isLoading ||
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-usage/team-usage.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-usage/team-usage.tsx
index 010254e3d0..cfe51b89b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-usage/team-usage.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/components/team-usage/team-usage.tsx
@@ -1,13 +1,15 @@
+'use client'
+
 import { useRef } from 'react'
 import { Skeleton } from '@/components/ui/skeleton'
 import { useActiveOrganization } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client/utils'
 import { getBaseUrl } from '@/lib/core/utils/urls'
-import { UsageHeader } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/shared/usage-header'
+import { UsageHeader } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-header/usage-header'
 import {
   UsageLimit,
   type UsageLimitRef,
-} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components'
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit'
 import { useOrganizationBilling } from '@/hooks/queries/organization'
 import { useSubscriptionData } from '@/hooks/queries/subscription'
 
@@ -30,20 +32,20 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (isLoadingOrgBilling) {
     return (
-      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
-        <div className='space-y-2'>
+      <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+        <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
           <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <Skeleton className='h-5 w-16' />
-              <Skeleton className='h-4 w-20' />
+            <div className='flex items-center gap-[8px]'>
+              <Skeleton className='h-5 w-16 rounded-[4px]' />
+              <Skeleton className='h-4 w-20 rounded-[4px]' />
             </div>
-            <div className='flex items-center gap-1 text-xs'>
-              <Skeleton className='h-4 w-8' />
+            <div className='flex items-center gap-[4px] text-[12px]'>
+              <Skeleton className='h-4 w-8 rounded-[4px]' />
               <span className='text-[var(--text-muted)]'>/</span>
-              <Skeleton className='h-4 w-8' />
+              <Skeleton className='h-4 w-8 rounded-[4px]' />
             </div>
           </div>
-          <Skeleton className='h-2 w-full rounded' />
+          <Skeleton className='h-[6px] w-full rounded-full' />
         </div>
       </div>
     )
@@ -51,8 +53,8 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (error) {
     return (
-      <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]'>
+      <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[12px]'>
+        <p className='text-center text-[11px] text-[var(--text-error)] leading-tight'>
           {error instanceof Error ? error.message : 'Failed to load billing data'}
         </p>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/team-management.tsx
index 75982d7064..85049f1a1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/team-management/team-management.tsx
@@ -1,3 +1,5 @@
+'use client'
+
 import { useCallback, useEffect, useState } from 'react'
 import { Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
@@ -9,6 +11,7 @@ import {
   getUsedSeats,
   getUserRole,
   isAdminOrOwner,
+  type Member,
 } from '@/lib/workspaces/organization'
 import {
   MemberInvitationCard,
@@ -171,7 +174,7 @@ export function TeamManagement() {
   }, [])
 
   const handleRemoveMember = useCallback(
-    async (member: any) => {
+    async (member: Member) => {
       if (!session?.user || !activeOrganization?.id) return
 
       if (!member.user?.id) {
@@ -365,7 +368,7 @@ export function TeamManagement() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-[20px]'>
       {/* Seats Overview - Full Width */}
       {adminOrOwner && (
         <div>
@@ -416,11 +419,11 @@ export function TeamManagement() {
       </div>
 
       {/* Additional Info - Subtle and collapsed */}
-      <div className='space-y-[12px]'>
+      <div className='flex flex-col gap-[10px]'>
         {/* 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'>
+          <div className='rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[10px]'>
+            <p className='text-[12px] text-[var(--text-muted)]'>
               <span className='font-medium'>Note:</span> Users can only be part of one organization
               at a time.
             </p>
@@ -428,8 +431,8 @@ export function TeamManagement() {
         )}
 
         {/* 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'>
+        <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+          <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[14px] text-[var(--text-primary)] 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'
@@ -445,26 +448,30 @@ export function TeamManagement() {
               />
             </svg>
           </summary>
-          <div className='space-y-[8px] border-[var(--border-muted)] border-t p-3 text-xs'>
+          <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px] text-[12px]'>
             <div className='flex justify-between'>
               <span className='text-[var(--text-muted)]'>Team ID:</span>
-              <span className='font-mono text-[10px]'>{displayOrganization.id}</span>
+              <span className='font-mono text-[10px] text-[var(--text-primary)]'>
+                {displayOrganization.id}
+              </span>
             </div>
             <div className='flex justify-between'>
               <span className='text-[var(--text-muted)]'>Created:</span>
-              <span>{new Date(displayOrganization.createdAt).toLocaleDateString()}</span>
+              <span className='text-[var(--text-primary)]'>
+                {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>
+              <span className='font-medium text-[var(--text-primary)] capitalize'>{userRole}</span>
             </div>
           </div>
         </details>
 
         {/* 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'>
+          <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
+            <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[14px] text-[var(--text-primary)] 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'
@@ -480,8 +487,8 @@ export function TeamManagement() {
                 />
               </svg>
             </summary>
-            <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'>
+            <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
+              <ul className='ml-4 flex list-disc flex-col gap-[8px] text-[12px] text-[var(--text-muted)]'>
                 <li>
                   Your team is billed a minimum of $
                   {(subscriptionData?.seats ?? 0) * DEFAULT_TEAM_TIER_COST_LIMIT}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/template-profile/template-profile.tsx
index 882e59f422..ba7c06c5ea 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/template-profile/template-profile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/template-profile/template-profile.tsx
@@ -505,8 +505,7 @@ export function TemplateProfile() {
         <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'
+          variant='tertiary'
         >
           {saveStatus === 'saving' ? 'Saving...' : saveStatus === 'saved' ? 'Saved' : 'Save'}
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-header/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-header/usage-header.tsx
new file mode 100644
index 0000000000..eeae01faf2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-header/usage-header.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { Badge } from '@/components/emcn'
+import {
+  getFilledPillColor,
+  USAGE_PILL_COLORS,
+  USAGE_THRESHOLDS,
+} from '@/lib/billing/client/usage-visualization'
+
+const PILL_COUNT = 5
+
+interface UsageHeaderProps {
+  title: string
+  showBadge?: boolean
+  badgeText?: string
+  badgeVariant?: 'blue-secondary' | 'red'
+  onBadgeClick?: () => void
+  rightContent?: ReactNode
+  current: number
+  limit: number
+  seatsText?: string
+  isBlocked?: boolean
+  progressValue?: number
+}
+
+/**
+ * Displays usage header with plan info and usage pills.
+ */
+export function UsageHeader({
+  title,
+  showBadge = false,
+  badgeText,
+  badgeVariant = 'blue-secondary',
+  onBadgeClick,
+  rightContent,
+  current,
+  limit,
+  seatsText,
+  isBlocked,
+  progressValue,
+}: UsageHeaderProps) {
+  const progress = progressValue ?? (limit > 0 ? Math.min((current / limit) * 100, 100) : 0)
+  const filledPillsCount = Math.ceil((progress / 100) * PILL_COUNT)
+
+  const isCritical = isBlocked || progress >= USAGE_THRESHOLDS.CRITICAL
+  const isWarning = !isCritical && progress >= USAGE_THRESHOLDS.WARNING
+  const filledColor = getFilledPillColor(isCritical, isWarning)
+
+  return (
+    <div className='flex flex-col gap-[12px]'>
+      {/* Main row: left = plan + usage, right = badge + pills */}
+      <div className='flex items-center justify-between'>
+        {/* Left side: plan name and usage */}
+        <div className='flex flex-col gap-[4px]'>
+          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+            {title}
+            {seatsText && (
+              <span className='ml-[6px] text-[var(--text-tertiary)]'>({seatsText})</span>
+            )}
+          </span>
+          <div className='flex items-center gap-[4px]'>
+            {isBlocked ? (
+              <span className='font-medium text-[14px] text-[var(--text-error)]'>
+                Payment failed
+              </span>
+            ) : (
+              <>
+                <span className='font-medium text-[14px] text-[var(--text-primary)] tabular-nums'>
+                  ${current.toFixed(2)}
+                </span>
+                <span className='font-medium text-[14px] text-[var(--text-primary)]'>/</span>
+                {rightContent ?? (
+                  <span className='font-medium text-[14px] text-[var(--text-primary)] tabular-nums'>
+                    ${limit.toFixed(2)}
+                  </span>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* Right side: badge and pills */}
+        <div className='flex flex-col items-end gap-[8px]'>
+          {showBadge && badgeText && (
+            <Badge
+              variant={badgeVariant}
+              onClick={onBadgeClick}
+              className={onBadgeClick ? 'cursor-pointer' : 'cursor-default'}
+            >
+              {badgeText}
+            </Badge>
+          )}
+          {/* Pills row */}
+          <div className='flex w-[100px] items-center gap-[4px]'>
+            {Array.from({ length: PILL_COUNT }).map((_, i) => {
+              const isFilled = i < filledPillsCount
+              return (
+                <div
+                  key={i}
+                  className='h-[6px] flex-1 rounded-[2px]'
+                  style={{
+                    backgroundColor: isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED,
+                  }}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/usage-limit/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit/index.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/usage-limit/index.ts
rename to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit/index.ts
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit/usage-limit.tsx
similarity index 82%
rename from apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit/usage-limit.tsx
index 3de8fedcec..b329c62a45 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/usage-limit/usage-limit.tsx
@@ -1,8 +1,8 @@
 'use client'
 
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
-import { Check, Pencil, X } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { Check, X } from 'lucide-react'
+import { Badge, Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useUpdateOrganizationUsageLimit } from '@/hooks/queries/organization'
@@ -172,10 +172,12 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
     const inputWidthCh = Math.max(3, inputValue.length + 1)
 
     return (
-      <div className='flex items-center'>
+      <div className='flex items-center gap-[6px]'>
         {isEditing ? (
           <>
-            <span className='text-[var(--text-muted)] text-xs tabular-nums'>$</span>
+            <span className='font-medium text-[14px] text-[var(--text-primary)] tabular-nums'>
+              $
+            </span>
             <input
               ref={inputRef}
               type='number'
@@ -190,7 +192,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
                 handleSubmit()
               }}
               className={cn(
-                'border-0 bg-transparent p-0 text-xs tabular-nums',
+                'border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-primary)] 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-[var(--text-error)]'
@@ -204,35 +206,36 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
               spellCheck='false'
               style={{ width: `${inputWidthCh}ch` }}
             />
+            <Button
+              variant='ghost'
+              className='h-[12px] w-[12px] flex-shrink-0 p-0'
+              onClick={handleSubmit}
+              disabled={isUpdating}
+              aria-label='Save limit'
+            >
+              {hasError ? (
+                <X className='h-[12px] w-[12px] text-[var(--text-error)]' />
+              ) : (
+                <Check className='h-[12px] w-[12px]' />
+              )}
+            </Button>
           </>
         ) : (
-          <span className='text-[var(--text-muted)] text-xs tabular-nums'>
-            ${pendingLimit !== null ? pendingLimit : currentLimit}
-          </span>
-        )}
-        {canEdit && (
-          <Button
-            variant='ghost'
-            className={cn(
-              'ml-1 h-4 w-4 p-0 transition-colors hover:bg-transparent',
-              hasError
-                ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
-                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-            )}
-            onClick={isEditing ? handleSubmit : handleStartEdit}
-            disabled={isUpdating}
-          >
-            {isEditing ? (
-              hasError ? (
-                <X className='!h-3 !w-3' />
-              ) : (
-                <Check className='!h-3 !w-3' />
-              )
-            ) : (
-              <Pencil className='!h-3 !w-3' />
+          <>
+            <span className='font-medium text-[14px] text-[var(--text-primary)] tabular-nums'>
+              ${pendingLimit !== null ? pendingLimit : currentLimit}
+            </span>
+            {canEdit && (
+              <Badge
+                size='sm'
+                variant='outline'
+                className='cursor-pointer'
+                onClick={handleStartEdit}
+              >
+                Edit Limit
+              </Badge>
             )}
-            <span className='sr-only'>{isEditing ? 'Save limit' : 'Edit limit'}</span>
-          </Button>
+          </>
         )}
       </div>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
index b318006e96..c0f5fb0ed8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx
@@ -308,8 +308,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
           autoConnect: data.autoConnect ?? true,
           showTrainingControls: data.showTrainingControls ?? false,
           superUserModeEnabled: data.superUserModeEnabled ?? true,
-          // Force dark mode - light mode is temporarily disabled
-          theme: 'dark' as const,
+          theme: data.theme || 'system',
           telemetryEnabled: data.telemetryEnabled ?? true,
           billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
         }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
index 34c148ad9b..44640df5b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
@@ -2,15 +2,14 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { Button } from '@/components/emcn'
+import { Badge } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
-import { isUsageAtLimit, USAGE_PILL_COLORS } from '@/lib/billing/client/usage-visualization'
 import {
-  canUpgrade,
-  getBillingStatus,
-  getSubscriptionStatus,
-  getUsage,
-} from '@/lib/billing/client/utils'
+  getFilledPillColor,
+  USAGE_PILL_COLORS,
+  USAGE_THRESHOLDS,
+} from '@/lib/billing/client/usage-visualization'
+import { getBillingStatus, getSubscriptionStatus, getUsage } from '@/lib/billing/client/utils'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
@@ -19,106 +18,208 @@ import { MIN_SIDEBAR_WIDTH, useSidebarStore } from '@/stores/sidebar/store'
 const logger = createLogger('UsageIndicator')
 
 /**
- * Minimum number of pills to display (at minimum sidebar width).
+ * Pill display configuration.
  */
-const MIN_PILL_COUNT = 6
+const PILL_CONFIG = {
+  MIN_COUNT: 6,
+  MAX_COUNT: 8,
+  WIDTH_PER_PILL: 50,
+  ANIMATION_TICK_MS: 30,
+  PILLS_PER_SECOND: 1.8,
+} as const
 
-/**
- * Maximum number of pills to display.
- */
-const MAX_PILL_COUNT = 8
+const PILL_STEP_PER_TICK = (PILL_CONFIG.PILLS_PER_SECOND * PILL_CONFIG.ANIMATION_TICK_MS) / 1000
 
 /**
- * Width increase (in pixels) required to add one additional pill.
+ * Display width costs in "digit equivalents" for responsive layout.
  */
-const WIDTH_PER_PILL = 50
+const WIDTH_COSTS = {
+  BADGE: 6,
+  BLOCKED_TEXT: 4,
+  WIDTH_PER_EXTRA_DIGIT: 10,
+} as const
 
 /**
- * Animation tick interval in milliseconds.
- * Controls the update frequency of the wave animation.
+ * Base digit capacity by plan type (without badge).
  */
-const PILL_ANIMATION_TICK_MS = 30
+const PLAN_DIGIT_CAPACITY = {
+  enterprise: 14,
+  team: 14,
+  pro: 14,
+  free: 14,
+} as const
+
+const PLAN_NAMES = {
+  enterprise: 'Enterprise',
+  team: 'Team',
+  pro: 'Pro',
+  free: 'Free',
+} as const
+
+type PlanType = keyof typeof PLAN_NAMES
+type OrgRole = 'owner' | 'admin' | 'member'
+
+interface DisplayState {
+  planType: PlanType
+  isBlocked: boolean
+  isDispute: boolean
+  isCritical: boolean
+  isWarning: boolean
+  canManageBilling: boolean
+}
+
+interface BadgeConfig {
+  show: boolean
+  variant: 'red' | 'blue-secondary'
+  label: string
+}
+
+interface StatusTextConfig {
+  text: string
+  isError: boolean
+}
 
 /**
- * Speed of the wave animation in pills per second.
+ * Determines if user can manage billing based on plan type and org role.
+ *
+ * @param planType - The user's current plan type
+ * @param orgRole - The user's role in the organization, if applicable
+ * @returns True if the user has billing management permissions
  */
-const PILLS_PER_SECOND = 1.8
+function canManageBilling(planType: PlanType, orgRole: OrgRole | null): boolean {
+  if (planType === 'free' || planType === 'pro') return true
+  if (planType === 'team' || planType === 'enterprise') {
+    return orgRole === 'owner' || orgRole === 'admin'
+  }
+  return false
+}
 
 /**
- * Distance (in pill units) the wave advances per animation tick.
- * Derived from {@link PILLS_PER_SECOND} and {@link PILL_ANIMATION_TICK_MS}.
+ * Determines the badge configuration based on display state.
+ *
+ * Priority order:
+ * 1. Blocked/dispute states (all users including free with past due payments)
+ * 2. Free users see upgrade badge
+ * 3. Critical usage shows "Get Help" (enterprise) or "Set Limit" (others)
+ *
+ * @param state - The current display state
+ * @returns Badge configuration with visibility, variant, and label
  */
-const PILL_STEP_PER_TICK = (PILLS_PER_SECOND * PILL_ANIMATION_TICK_MS) / 1000
+function getBadgeConfig(state: DisplayState): BadgeConfig {
+  const { isBlocked, isDispute, planType, isCritical, canManageBilling } = state
+
+  if (isDispute && canManageBilling) {
+    return { show: true, variant: 'red', label: 'Get Help' }
+  }
+  if (isBlocked && canManageBilling) {
+    return { show: true, variant: 'red', label: 'Fix Now' }
+  }
+
+  if (planType === 'free') {
+    return { show: true, variant: 'blue-secondary', label: 'Upgrade' }
+  }
+
+  if (isCritical && canManageBilling) {
+    const label = planType === 'enterprise' ? 'Get Help' : 'Set Limit'
+    return { show: true, variant: 'red', label }
+  }
+
+  return { show: false, variant: 'blue-secondary', label: '' }
+}
 
 /**
- * Human-readable plan name labels.
+ * Determines the status text configuration for the usage display.
+ *
+ * @param isBlocked - Whether billing is blocked
+ * @param isDispute - Whether there is a payment dispute
+ * @param usage - Current and limit usage values
+ * @returns Status text configuration with display text and error state
  */
-const PLAN_NAMES = {
-  enterprise: 'Enterprise',
-  team: 'Team',
-  pro: 'Pro',
-  free: 'Free',
-} as const
+function getStatusTextConfig(
+  isBlocked: boolean,
+  isDispute: boolean,
+  usage: { current: number; limit: number }
+): StatusTextConfig {
+  if (isBlocked || isDispute) {
+    return {
+      text: 'Payment failed',
+      isError: true,
+    }
+  }
+  return {
+    text: `$${usage.current.toFixed(2)} / $${usage.limit.toFixed(2)}`,
+    isError: false,
+  }
+}
 
 /**
- * Props for the {@link UsageIndicator} component.
+ * Calculates whether plan text fits based on available sidebar space.
+ *
+ * @param planType - The user's current plan type
+ * @param usage - Current and limit usage values
+ * @param sidebarWidth - Current sidebar width in pixels
+ * @param badgeShowing - Whether a badge is currently displayed
+ * @param isBlocked - Whether billing is blocked
+ * @returns True if plan text should be displayed
  */
+function shouldShowPlanText(
+  planType: PlanType,
+  usage: { current: number; limit: number },
+  sidebarWidth: number,
+  badgeShowing: boolean,
+  isBlocked: boolean
+): boolean {
+  const countDigits = (value: number): number => value.toFixed(2).replace(/\D/g, '').length
+
+  const usageDigits = countDigits(usage.current) + countDigits(usage.limit)
+  const extraWidth = Math.max(0, sidebarWidth - MIN_SIDEBAR_WIDTH)
+  const bonusDigits = Math.floor(extraWidth / WIDTH_COSTS.WIDTH_PER_EXTRA_DIGIT)
+
+  let totalCost = usageDigits
+  if (badgeShowing) totalCost += WIDTH_COSTS.BADGE
+  if (isBlocked) totalCost += WIDTH_COSTS.BLOCKED_TEXT
+
+  const capacity = PLAN_DIGIT_CAPACITY[planType] + bonusDigits
+  return totalCost <= capacity
+}
+
 interface UsageIndicatorProps {
-  /**
-   * Optional click handler. If provided, overrides the default behavior
-   * of opening the settings modal to the subscription tab.
-   */
   onClick?: () => void
 }
 
 /**
- * Displays a visual usage indicator showing current subscription usage
- * with an animated pill bar that responds to hover interactions.
- *
- * The component shows:
- * - Current plan type (Free, Pro, Team, Enterprise)
- * - Current usage vs. limit (e.g., $7.00 / $10.00)
- * - Visual pill bar representing usage percentage
- * - Upgrade button for free plans or when blocked
- *
- * @param props - Component props
- * @returns A usage indicator component with responsive pill visualization
+ * Displays a visual usage indicator with animated pill bar.
  */
 export function UsageIndicator({ onClick }: UsageIndicatorProps) {
-  const { data: subscriptionData, isLoading } = useSubscriptionData()
+  const { data: subscriptionData, isLoading } = useSubscriptionData({ includeOrg: true })
   const sidebarWidth = useSidebarStore((state) => state.sidebarWidth)
   const { onOperationConfirmed } = useSocket()
   const queryClient = useQueryClient()
 
-  // Listen for completed operations to update usage
   useEffect(() => {
     const handleOperationConfirmed = () => {
-      // Small delay to ensure backend has updated usage
       setTimeout(() => {
         queryClient.invalidateQueries({ queryKey: subscriptionKeys.user() })
       }, 1000)
     }
-
     onOperationConfirmed(handleOperationConfirmed)
   }, [onOperationConfirmed, queryClient])
 
-  /**
-   * Calculate pill count based on sidebar width (6-8 pills dynamically).
-   * This provides responsive feedback as the sidebar width changes.
-   */
-  const pillCount = useMemo(() => {
-    const widthDelta = sidebarWidth - MIN_SIDEBAR_WIDTH
-    const additionalPills = Math.floor(widthDelta / WIDTH_PER_PILL)
-    const calculatedCount = MIN_PILL_COUNT + additionalPills
-    return Math.max(MIN_PILL_COUNT, Math.min(MAX_PILL_COUNT, calculatedCount))
-  }, [sidebarWidth])
-
   const usage = getUsage(subscriptionData?.data)
   const subscription = getSubscriptionStatus(subscriptionData?.data)
+  const billingStatus = getBillingStatus(subscriptionData?.data)
 
   const progressPercentage = Math.min(usage.percentUsed, 100)
+  const isBlocked = billingStatus === 'blocked'
+  const blockedReason = subscriptionData?.data?.billingBlockedReason as
+    | 'payment_failed'
+    | 'dispute'
+    | null
+  const isDispute = isBlocked && blockedReason === 'dispute'
 
-  const planType = subscription.isEnterprise
+  const orgRole = (subscriptionData?.data?.organization?.role as OrgRole) ?? null
+
+  const planType: PlanType = subscription.isEnterprise
     ? 'enterprise'
     : subscription.isTeam
       ? 'team'
@@ -126,24 +227,43 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
         ? 'pro'
         : 'free'
 
-  const billingStatus = getBillingStatus(subscriptionData?.data)
-  const isBlocked = billingStatus === 'blocked'
-  const blockedReason = subscriptionData?.data?.billingBlockedReason as
-    | 'payment_failed'
-    | 'dispute'
-    | null
-  const isDispute = isBlocked && blockedReason === 'dispute'
-  const showUpgradeButton =
-    (planType === 'free' || isBlocked || progressPercentage >= 80) && planType !== 'enterprise'
-
-  /**
-   * Calculate which pills should be filled based on usage percentage.
-   * Uses a percentage-based heuristic with dynamic pill count (6-8).
-   * The warning/limit (red) state is derived from shared usage visualization utilities
-   * so it is consistent with other parts of the app (e.g. UsageHeader).
-   */
+  const isCritical = isBlocked || progressPercentage >= USAGE_THRESHOLDS.CRITICAL
+  const isWarning = !isCritical && progressPercentage >= USAGE_THRESHOLDS.WARNING
+  const userCanManageBilling = canManageBilling(planType, orgRole)
+
+  const displayState: DisplayState = {
+    planType,
+    isBlocked,
+    isDispute,
+    isCritical,
+    isWarning,
+    canManageBilling: userCanManageBilling,
+  }
+
+  const badgeConfig = useMemo(
+    () => getBadgeConfig(displayState),
+    [isBlocked, isDispute, planType, isCritical, userCanManageBilling]
+  )
+
+  const statusText = useMemo(
+    () => getStatusTextConfig(isBlocked, isDispute, usage),
+    [isBlocked, isDispute, usage.current, usage.limit]
+  )
+
+  const showPlanText = useMemo(
+    () => shouldShowPlanText(planType, usage, sidebarWidth, badgeConfig.show, isBlocked),
+    [planType, usage.current, usage.limit, sidebarWidth, badgeConfig.show, isBlocked]
+  )
+
+  const pillCount = useMemo(() => {
+    const widthDelta = sidebarWidth - MIN_SIDEBAR_WIDTH
+    const additionalPills = Math.floor(widthDelta / PILL_CONFIG.WIDTH_PER_PILL)
+    const calculatedCount = PILL_CONFIG.MIN_COUNT + additionalPills
+    return Math.max(PILL_CONFIG.MIN_COUNT, Math.min(PILL_CONFIG.MAX_COUNT, calculatedCount))
+  }, [sidebarWidth])
+
   const filledPillsCount = Math.ceil((progressPercentage / 100) * pillCount)
-  const isAtLimit = isUsageAtLimit(progressPercentage)
+  const filledColor = getFilledPillColor(isCritical, isWarning)
 
   const [isHovered, setIsHovered] = useState(false)
   const [wavePosition, setWavePosition] = useState<number | null>(null)
@@ -151,52 +271,37 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
   const startAnimationIndex = pillCount === 0 ? 0 : Math.min(filledPillsCount, pillCount - 1)
 
   useEffect(() => {
-    // Animation enabled for all plans on hover
     if (!isHovered || pillCount <= 0) {
       setWavePosition(null)
       return
     }
 
-    /**
-     * Maximum distance (in pill units) the wave should travel from
-     * {@link startAnimationIndex} to the end of the row. The wave stops
-     * once it reaches the final pill and does not wrap.
-     */
-    const maxDistance = pillCount <= 0 ? 0 : Math.max(0, pillCount - startAnimationIndex)
-
+    const maxDistance = Math.max(0, pillCount - startAnimationIndex)
     setWavePosition(0)
 
     const interval = window.setInterval(() => {
       setWavePosition((prev) => {
         const current = prev ?? 0
-
-        if (current >= maxDistance) {
-          return current
-        }
-
+        if (current >= maxDistance) return current
         const next = current + PILL_STEP_PER_TICK
         return next >= maxDistance ? maxDistance : next
       })
-    }, PILL_ANIMATION_TICK_MS)
+    }, PILL_CONFIG.ANIMATION_TICK_MS)
 
-    return () => {
-      window.clearInterval(interval)
-    }
+    return () => window.clearInterval(interval)
   }, [isHovered, pillCount, startAnimationIndex])
 
   if (isLoading) {
     return (
-      <div className='flex flex-shrink-0 flex-col gap-[8px] border-t pt-[12px] pr-[13.5px] pb-[10px] pl-[12px] dark:border-[var(--border)]'>
-        {/* Top row skeleton */}
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[6px]'>
-            <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
-            <Skeleton className='h-[14px] w-[70px] rounded-[4px]' />
+      <div className='flex flex-shrink-0 flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'>
+        <div className='flex h-[18px] items-center justify-between'>
+          <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+            <Skeleton className='h-[12px] w-[28px] rounded-[4px]' />
+            <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
+            <Skeleton className='h-[12px] w-[90px] rounded-[4px]' />
           </div>
-          <Skeleton className='h-[12px] w-[50px] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[50px] rounded-[6px]' />
         </div>
-
-        {/* Pills skeleton */}
         <div className='flex items-center gap-[4px]'>
           {Array.from({ length: pillCount }).map((_, i) => (
             <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
@@ -213,28 +318,16 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
         return
       }
 
-      const blocked = getBillingStatus(subscriptionData?.data) === 'blocked'
-      const reason = subscriptionData?.data?.billingBlockedReason as
-        | 'payment_failed'
-        | 'dispute'
-        | null
-      const canUpg = canUpgrade(subscriptionData?.data)
-
-      // For disputes, open help modal instead of billing portal
-      if (blocked && reason === 'dispute') {
+      if (isDispute) {
         window.dispatchEvent(new CustomEvent('open-help-modal'))
         logger.info('Opened help modal for disputed account')
         return
       }
 
-      // For payment failures, open billing portal
-      if (blocked) {
+      if (isBlocked && userCanManageBilling) {
         try {
           const context = subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user'
-          const organizationId =
-            subscription.isTeam || subscription.isEnterprise
-              ? subscriptionData?.data?.organization?.id
-              : undefined
+          const organizationId = subscriptionData?.data?.organization?.id
 
           const response = await fetch('/api/billing/portal', {
             method: 'POST',
@@ -257,7 +350,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
       if (typeof window !== 'undefined') {
         window.dispatchEvent(new CustomEvent('open-settings', { detail: { tab: 'subscription' } }))
-        logger.info('Opened settings to subscription tab', { blocked, canUpgrade: canUpg })
+        logger.info('Opened settings to subscription tab')
       }
     } catch (error) {
       logger.error('Failed to handle usage indicator click', { error })
@@ -266,60 +359,44 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
   return (
     <div
-      className={`group flex flex-shrink-0 cursor-pointer flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px] ${
-        isBlocked ? 'border-red-500/50 bg-red-950/20' : ''
-      }`}
+      className='group flex flex-shrink-0 cursor-pointer flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'
       onClick={handleClick}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
       {/* Top row */}
-      <div className='flex items-center justify-between'>
+      <div className='flex h-[18px] items-center justify-between'>
         <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
-          <span className='flex-shrink-0 font-medium text-[#FFFFFF] text-[12px]'>
-            {PLAN_NAMES[planType]}
-          </span>
-          <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
+          {showPlanText && (
+            <>
+              <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-primary)]'>
+                {PLAN_NAMES[planType]}
+              </span>
+              <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
+            </>
+          )}
           <div className='flex min-w-0 flex-1 items-center gap-[4px]'>
-            {isBlocked ? (
-              isDispute ? (
-                <>
-                  <span className='font-medium text-[12px] text-red-400'>Account</span>
-                  <span className='font-medium text-[12px] text-red-400'>Frozen</span>
-                </>
-              ) : (
-                <>
-                  <span className='font-medium text-[12px] text-red-400'>Payment</span>
-                  <span className='font-medium text-[12px] text-red-400'>Required</span>
-                </>
-              )
+            {statusText.isError ? (
+              <span className='font-medium text-[12px] text-[var(--text-error)]'>
+                {statusText.text}
+              </span>
             ) : (
               <>
-                <span className='font-medium text-[12px] text-[var(--text-tertiary)] tabular-nums'>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                   ${usage.current.toFixed(2)}
                 </span>
-                <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>/</span>
-                <span className='font-medium text-[12px] text-[var(--text-tertiary)] 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'>
                   ${usage.limit.toFixed(2)}
                 </span>
               </>
             )}
           </div>
         </div>
-        {showUpgradeButton && (
-          <Button
-            variant='ghost'
-            className={`-mx-1 !h-auto !px-1 !py-0 mt-[-2px] transition-colors duration-100 ${
-              isBlocked
-                ? '!text-red-400 group-hover:!text-red-300'
-                : '!text-[#F473B7] group-hover:!text-[#F789C4]'
-            }`}
-            onClick={handleClick}
-          >
-            <span className='font-medium text-[12px]'>
-              {isBlocked ? (isDispute ? 'Get Help' : 'Fix Now') : 'Upgrade'}
-            </span>
-          </Button>
+        {badgeConfig.show && (
+          <Badge variant={badgeConfig.variant} size='sm' className='-translate-y-[1px]'>
+            {badgeConfig.label}
+          </Badge>
         )}
       </div>
 
@@ -327,42 +404,20 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
       <div className='flex items-center gap-[4px]'>
         {Array.from({ length: pillCount }).map((_, i) => {
           const isFilled = i < filledPillsCount
+          const baseColor = isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED
 
-          const baseColor = isFilled
-            ? isBlocked || isAtLimit
-              ? USAGE_PILL_COLORS.AT_LIMIT
-              : USAGE_PILL_COLORS.FILLED
-            : USAGE_PILL_COLORS.UNFILLED
-
-          let backgroundColor = baseColor
+          const backgroundColor = baseColor
           let backgroundImage: string | undefined
 
-          if (isHovered && wavePosition !== null && pillCount > 0) {
-            const grayColor = USAGE_PILL_COLORS.UNFILLED
-            const activeColor = isAtLimit ? USAGE_PILL_COLORS.AT_LIMIT : USAGE_PILL_COLORS.FILLED
-
-            /**
-             * Single-pass wave: travel from {@link startAnimationIndex} to the end
-             * of the row without wrapping. Previously highlighted pills remain
-             * filled; the wave only affects pills at or after the start index.
-             */
+          if (isHovered && wavePosition !== null) {
             const headIndex = Math.floor(wavePosition)
-            const progress = wavePosition - headIndex
-
             const pillOffsetFromStart = i - startAnimationIndex
 
-            if (pillOffsetFromStart < 0) {
-            } else if (pillOffsetFromStart < headIndex) {
-              backgroundColor = isFilled ? baseColor : grayColor
-              backgroundImage = `linear-gradient(to right, ${activeColor} 0%, ${activeColor} 100%)`
+            if (pillOffsetFromStart >= 0 && pillOffsetFromStart < headIndex) {
+              backgroundImage = `linear-gradient(to right, ${filledColor}, ${filledColor})`
             } else if (pillOffsetFromStart === headIndex) {
-              const fillPercent = Math.max(0, Math.min(1, progress)) * 100
-              backgroundColor = isFilled ? baseColor : grayColor
-              backgroundImage = `linear-gradient(to right, ${activeColor} 0%, ${activeColor} ${fillPercent}%, ${
-                isFilled ? baseColor : grayColor
-              } ${fillPercent}%, ${isFilled ? baseColor : grayColor} 100%)`
-            } else {
-              backgroundColor = isFilled ? baseColor : grayColor
+              const fillPercent = (wavePosition - headIndex) * 100
+              backgroundImage = `linear-gradient(to right, ${filledColor} ${fillPercent}%, ${baseColor} ${fillPercent}%)`
             }
           }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index 38301b5c47..2d46b3535b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -142,7 +142,7 @@ export function ContextMenu({
   disableCreateFolder = false,
 }: ContextMenuProps) {
   return (
-    <Popover open={isOpen} onOpenChange={onClose} variant='primary'>
+    <Popover open={isOpen} onOpenChange={onClose} variant='secondary' size='sm'>
       <PopoverAnchor
         style={{
           position: 'fixed',
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
index 5827f1fbd7..1ddb7f23f3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/delete-modal/delete-modal.tsx
@@ -105,7 +105,7 @@ export function DeleteModal({
       <ModalContent className='w-[400px]'>
         <ModalHeader>{title}</ModalHeader>
         <ModalBody>
-          <p className='text-[12px] text-[var(--text-tertiary)]'>
+          <p className='text-[12px] text-[var(--text-secondary)]'>
             {renderDescription()}{' '}
             <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>
@@ -114,12 +114,7 @@ export function DeleteModal({
           <Button variant='active' onClick={onClose} disabled={isDeleting}>
             Cancel
           </Button>
-          <Button
-            variant='primary'
-            onClick={onConfirm}
-            disabled={isDeleting}
-            className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-          >
+          <Button variant='destructive' onClick={onConfirm} disabled={isDeleting}>
             {isDeleting ? 'Deleting...' : 'Delete'}
           </Button>
         </ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index f29103dd51..decefdc57d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -246,7 +246,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
         aria-expanded={isExpanded}
         aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
         className={clsx(
-          'flex h-[25px] cursor-pointer items-center rounded-[8px] text-[14px]',
+          'group flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)]',
           isDragging ? 'opacity-50' : ''
         )}
         onClick={handleClick}
@@ -259,19 +259,20 @@ 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',
-            isExpanded ? 'rotate-90' : ''
+            'h-3.5 w-3.5 flex-shrink-0 transition-transform duration-100',
+            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
+            isExpanded && 'rotate-90'
           )}
           aria-hidden='true'
         />
         {isExpanded ? (
           <FolderOpen
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
             aria-hidden='true'
           />
         ) : (
           <Folder
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
             aria-hidden='true'
           />
         )}
@@ -298,7 +299,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
           />
         ) : (
           <span
-            className='truncate font-medium text-[var(--text-tertiary)]'
+            className='truncate font-medium text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
             onDoubleClick={handleDoubleClick}
           >
             {folder.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index ceeab77d19..3c10ee7eb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -250,9 +250,9 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
         href={`/workspace/${workspaceId}/w/${workflow.id}`}
         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(--surface-9)]' : 'hover:bg-[var(--surface-9)]',
-          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--surface-9)]' : '',
+          'group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
+          active ? 'bg-[var(--surface-5)]' : 'hover:bg-[var(--surface-5)]',
+          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--surface-5)]' : '',
           isDragging ? 'opacity-50' : ''
         )}
         draggable={!isEditing}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index 9f3a1b4427..27eb76de13 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -19,13 +19,6 @@ import type { WorkflowMetadata } from '@/stores/workflows/registry/types'
  */
 const TREE_SPACING = {
   INDENT_PER_LEVEL: 20,
-  VERTICAL_LINE_LEFT_OFFSET: 4,
-  ITEM_GAP: 4,
-  ITEM_HEIGHT: 25,
-} as const
-
-const TREE_STYLES = {
-  LINE_COLOR: 'hsl(var(--muted-foreground) / 0.2)',
 } as const
 
 interface WorkflowListProps {
@@ -183,32 +176,6 @@ export function WorkflowList({
     [isWorkflowActive, createItemDragHandlers, handleWorkflowClick]
   )
 
-  /**
-   * Calculate the height of the vertical line for folder trees
-   *
-   * @param workflowCount - Number of workflows in the folder
-   * @param folderCount - Number of child folders
-   * @returns Height string in pixels
-   */
-  const calculateVerticalLineHeight = useCallback((workflowCount: number, folderCount: number) => {
-    // If there are workflows, line extends only to the bottom of the last workflow
-    if (workflowCount > 0) {
-      // Account for: all workflows + gaps between workflows (no extra margin)
-      const totalHeight =
-        workflowCount * TREE_SPACING.ITEM_HEIGHT + (workflowCount - 1) * TREE_SPACING.ITEM_GAP
-      return `${totalHeight}px`
-    }
-
-    // If no workflows but there are child folders, extend to folders
-    if (folderCount > 0) {
-      const totalHeight =
-        folderCount * TREE_SPACING.ITEM_HEIGHT + (folderCount - 1) * TREE_SPACING.ITEM_GAP
-      return `${totalHeight}px`
-    }
-
-    return '0px'
-  }, [])
-
   const renderFolderSection = useCallback(
     (
       folder: FolderTreeNode,
@@ -243,42 +210,21 @@ export function WorkflowList({
 
           {isExpanded && hasChildren && (
             <div className='relative' {...createItemDragHandlers(folder.id)}>
-              {/* Vertical line from folder bottom extending through all children - only shown if folder has workflows */}
-              {workflowsInFolder.length > 0 && (
-                <div
-                  className='pointer-events-none absolute'
-                  style={{
-                    left: `${level * TREE_SPACING.INDENT_PER_LEVEL + TREE_SPACING.VERTICAL_LINE_LEFT_OFFSET}px`,
-                    top: '0px', // Start immediately after folder item
-                    width: '1px',
-                    height: calculateVerticalLineHeight(
-                      workflowsInFolder.length,
-                      folder.children.length
-                    ),
-                    background: TREE_STYLES.LINE_COLOR,
-                  }}
-                />
-              )}
-
-              {workflowsInFolder.length > 0 && (
-                <div className='mt-[2px] space-y-[4px]'>
-                  {workflowsInFolder.map((workflow: WorkflowMetadata) =>
-                    renderWorkflowItem(workflow, level + 1, folder.id)
-                  )}
-                </div>
-              )}
-
-              {folder.children.length > 0 && (
-                <div
-                  className={clsx('space-y-[4px]', workflowsInFolder.length > 0 ? 'mt-[2px]' : '')}
-                >
-                  {folder.children.map((childFolder) => (
-                    <div key={childFolder.id} className='relative'>
-                      {renderFolderSection(childFolder, level + 1, folder.id)}
-                    </div>
-                  ))}
-                </div>
-              )}
+              {/* Vertical line - positioned to align under folder chevron */}
+              <div
+                className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
+                style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
+              />
+              <div className='mt-[2px] space-y-[2px] pl-[2px]'>
+                {workflowsInFolder.map((workflow: WorkflowMetadata) =>
+                  renderWorkflowItem(workflow, level + 1, folder.id)
+                )}
+                {folder.children.map((childFolder) => (
+                  <div key={childFolder.id} className='relative'>
+                    {renderFolderSection(childFolder, level + 1, folder.id)}
+                  </div>
+                ))}
+              </div>
             </div>
           )}
         </div>
@@ -292,7 +238,6 @@ export function WorkflowList({
       createFolderDragHandlers,
       createItemDragHandlers,
       createFolderHeaderHoverHandlers,
-      calculateVerticalLineHeight,
       renderWorkflowItem,
     ]
   )
@@ -321,14 +266,14 @@ export function WorkflowList({
     <div className='flex min-h-full flex-col pb-[8px]' onClick={handleContainerClick}>
       {/* Folders Section */}
       {hasFolders && (
-        <div className='mb-[4px] space-y-[4px]'>
+        <div className='mb-[2px] space-y-[2px]'>
           {folderTree.map((folder) => renderFolderSection(folder, 0))}
         </div>
       )}
 
       {/* Root Workflows Section - Expands to fill remaining space */}
       <div
-        className={clsx('relative flex-1', !hasRootWorkflows && 'min-h-[25px]')}
+        className={clsx('relative flex-1', !hasRootWorkflows && 'min-h-[26px]')}
         {...handleRootDragEvents}
       >
         {/* Root drop target highlight overlay - always rendered for stable DOM */}
@@ -339,7 +284,7 @@ export function WorkflowList({
           )}
         />
 
-        <div className='space-y-[4px]'>
+        <div className='space-y-[2px]'>
           {rootWorkflows.map((workflow: WorkflowMetadata) => (
             <WorkflowItem
               key={workflow.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/email-tag.tsx
index 933e577c3f..2c63bb0a73 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/email-tag.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -17,7 +17,7 @@ export const EmailTag = React.memo<EmailTagProps>(
         '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)]'
+          : 'border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
index fbd7bd00a8..110fd7be5e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -120,7 +120,7 @@ export const PermissionsTable = ({
     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='rounded-[8px] border border-[var(--border-1)] 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' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index 3aaba70b4b..688d50421c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import React, { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Button,
@@ -719,7 +718,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                   tabIndex={-1}
                   readOnly
                 />
-                <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)]'>
+                <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(--border-1)] bg-[var(--surface-5)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-5)]'>
                   {invalidEmails.map((email, index) => (
                     <EmailTag
                       key={`invalid-${index}`}
@@ -813,23 +812,25 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                   onClick={handleSaveChanges}
                   className='h-[32px] gap-[8px] px-[12px] font-medium'
                 >
-                  {isSaving && <Loader2 className='h-4 w-4 animate-spin' />}
-                  Save Changes
+                  {isSaving ? 'Saving...' : 'Save Changes'}
                 </Button>
               </div>
             )}
 
             <Button
               type='button'
-              variant='primary'
+              variant='tertiary'
               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'}
+              {!userPerms.canAdmin
+                ? 'Admin Access Required'
+                : isSubmitting
+                  ? 'Inviting...'
+                  : 'Invite'}
             </Button>
           </ModalFooter>
         </form>
@@ -840,7 +841,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         <ModalContent>
           <ModalHeader>Remove Member</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to remove{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {memberToRemove?.email}
@@ -858,13 +859,11 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleRemoveMemberConfirm}
               disabled={isRemovingMember}
-              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
+              {isRemovingMember ? 'Removing...' : 'Remove Member'}
             </Button>
           </ModalFooter>
         </ModalContent>
@@ -875,7 +874,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         <ModalContent className='w-[400px]'>
           <ModalHeader>Cancel Invitation</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-secondary)]'>
               Are you sure you want to cancel the invitation for{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {invitationToRemove?.email}
@@ -892,13 +891,11 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               Cancel
             </Button>
             <Button
-              variant='primary'
+              variant='destructive'
               onClick={handleRemoveInvitationConfirm}
               disabled={isRemovingInvitation}
-              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
+              {isRemovingInvitation ? 'Cancelling...' : 'Cancel Invitation'}
             </Button>
           </ModalFooter>
         </ModalContent>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index 95a0cd17e3..5fbe42127b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -259,22 +259,9 @@ export function WorkspaceHeader({
   }
 
   return (
-    <div className='flex min-w-0 items-center justify-between gap-[8px]'>
-      {/* Workspace Name */}
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <h2
-          className='max-w-full truncate font-base text-[14px] dark:text-[var(--white)]'
-          title={activeWorkspace?.name || 'Loading...'}
-        >
-          {activeWorkspace?.name || 'Loading...'}
-        </h2>
-      </div>
-      {/* Workspace Actions */}
-      <div className='flex items-center gap-[10px]'>
-        {/* Invite */}
-        <Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}>
-          Invite
-        </Badge>
+    <div className='flex min-w-0 items-center justify-between gap-[2px]'>
+      {/* Workspace Name with Switcher */}
+      <div className='min-w-0 flex-1'>
         {/* Workspace Switcher Popover - only render after mount to avoid Radix ID hydration mismatch */}
         {isMounted ? (
           <Popover
@@ -288,21 +275,24 @@ export function WorkspaceHeader({
             }}
           >
             <PopoverTrigger asChild>
-              <Button
-                variant='ghost-secondary'
+              <button
                 type='button'
                 aria-label='Switch workspace'
-                className='group !p-[3px] -m-[3px]'
+                className='-mx-[6px] flex min-w-0 max-w-full cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-5)]'
+                title={activeWorkspace?.name || 'Loading...'}
               >
+                <span className='truncate font-base text-[14px] text-[var(--text-primary)]'>
+                  {activeWorkspace?.name || 'Loading...'}
+                </span>
                 <ChevronDown
-                  className={`h-[8px] w-[12px] transition-transform duration-100 ${
+                  className={`h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100 ${
                     isWorkspaceMenuOpen ? 'rotate-180' : ''
                   }`}
                 />
-              </Button>
+              </button>
             </PopoverTrigger>
             <PopoverContent
-              align='end'
+              align='start'
               side='bottom'
               sideOffset={8}
               style={{ maxWidth: '160px', minWidth: '160px' }}
@@ -316,7 +306,7 @@ export function WorkspaceHeader({
                 <>
                   <div className='relative flex items-center justify-between'>
                     <PopoverSection>Workspaces</PopoverSection>
-                    <div className='flex items-center gap-[6px]'>
+                    <div className='flex translate-y-[-2px] items-center gap-[6px]'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -368,7 +358,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]'>
+                          <div className='flex h-[26px] items-center gap-[8px] rounded-[8px] bg-[var(--surface-5)] px-[6px]'>
                             <input
                               ref={listRenameInputRef}
                               value={editingName}
@@ -398,7 +388,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'
+                              className='w-full border-0 bg-transparent p-0 font-base text-[13px] 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'
@@ -428,16 +418,26 @@ export function WorkspaceHeader({
             </PopoverContent>
           </Popover>
         ) : (
-          <Button
-            variant='ghost-secondary'
+          <button
             type='button'
             aria-label='Switch workspace'
-            className='group !p-[3px] -m-[3px]'
+            className='-mx-[6px] flex min-w-0 max-w-full cursor-pointer items-center gap-[8px] rounded-[6px] bg-transparent px-[6px] py-[4px] transition-colors hover:bg-[var(--surface-5)]'
+            title={activeWorkspace?.name || 'Loading...'}
             disabled
           >
-            <ChevronDown className='h-[8px] w-[12px]' />
-          </Button>
+            <span className='truncate font-base text-[14px] text-[var(--text-primary)] dark:text-[var(--white)]'>
+              {activeWorkspace?.name || 'Loading...'}
+            </span>
+            <ChevronDown className='h-[8px] w-[12px] flex-shrink-0 text-[var(--text-muted)]' />
+          </button>
         )}
+      </div>
+      {/* Workspace Actions */}
+      <div className='flex flex-shrink-0 items-center gap-[10px]'>
+        {/* Invite */}
+        <Badge className='cursor-pointer' onClick={() => setIsInviteModalOpen(true)}>
+          Invite
+        </Badge>
         {/* Sidebar Collapse Toggle */}
         {showCollapseButton && (
           <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 3077d6c39a..274af0b49a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -438,7 +438,7 @@ export function Sidebar() {
     <>
       {isCollapsed ? (
         /* Floating collapsed header */
-        <div className='fixed top-[14px] left-[10px] z-10 max-w-[232px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[12px] py-[8px]'>
+        <div className='fixed top-[14px] left-[10px] z-10 max-w-[232px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-1)] px-[12px] py-[6px]'>
           <WorkspaceHeader
             activeWorkspace={activeWorkspace}
             workspaceId={workspaceId}
@@ -469,7 +469,7 @@ export function Sidebar() {
             aria-label='Workspace sidebar'
             onClick={handleSidebarClick}
           >
-            <div className='flex h-full flex-col border-[var(--border)] border-r pt-[14px]'>
+            <div className='flex h-full flex-col border-[var(--border)] border-r pt-[12px]'>
               {/* Header */}
               <div className='flex-shrink-0 px-[14px]'>
                 <WorkspaceHeader
@@ -496,7 +496,7 @@ export function Sidebar() {
 
               {/* Search */}
               <div
-                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)]'
+                className='mx-[8px] mt-[10px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[6px] transition-colors duration-100 hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'
                 onClick={() => setIsSearchModalOpen(true)}
               >
                 <div className='flex items-center gap-[6px]'>
@@ -591,8 +591,8 @@ export function Sidebar() {
                   const Icon = item.icon
                   const active = item.href ? pathname?.startsWith(item.href) : false
                   const baseClasses =
-                    'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px] hover:bg-[var(--surface-9)]'
-                  const activeClasses = active ? 'bg-[var(--surface-9)]' : ''
+                    'group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-5)]'
+                  const activeClasses = active ? 'bg-[var(--surface-5)]' : ''
                   const textClasses = active
                     ? 'text-[var(--text-primary)]'
                     : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block.tsx
index 1e50f2a6ab..ca7496236c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-block.tsx
@@ -49,8 +49,8 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const showErrorRow = !isStarterOrTrigger
 
   // Handle styles based on orientation
-  const horizontalHandleClass = '!border-none !bg-[var(--surface-12)] !h-5 !w-[7px] !rounded-[2px]'
-  const verticalHandleClass = '!border-none !bg-[var(--surface-12)] !h-[7px] !w-5 !rounded-[2px]'
+  const horizontalHandleClass = '!border-none !bg-[var(--surface-6)] !h-5 !w-[7px] !rounded-[2px]'
+  const verticalHandleClass = '!border-none !bg-[var(--surface-6)] !h-[7px] !w-5 !rounded-[2px]'
 
   return (
     <div className='relative w-[250px] select-none rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx
index 56059ff80a..6a5468a9b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview-subflow.tsx
@@ -32,7 +32,7 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
   // Handle styles matching the actual subflow component
   const handleClass =
-    '!border-none !bg-[var(--surface-12)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-[2px]'
+    '!border-none !bg-[var(--surface-6)] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-[2px]'
 
   return (
     <div
diff --git a/apps/sim/blocks/blocks/agent.ts b/apps/sim/blocks/blocks/agent.ts
index 16227a2902..e623780d58 100644
--- a/apps/sim/blocks/blocks/agent.ts
+++ b/apps/sim/blocks/blocks/agent.ts
@@ -94,6 +94,7 @@ export const AgentBlock: BlockConfig<AgentResponse> = {
       placeholder: 'Type or select a model...',
       required: true,
       defaultValue: 'claude-sonnet-4-5',
+      searchable: true,
       options: () => {
         const providersState = useProvidersStore.getState()
         const baseModels = providersState.providers.base.models
diff --git a/apps/sim/blocks/blocks/note.ts b/apps/sim/blocks/blocks/note.ts
index a030fde10c..e41dbc0484 100644
--- a/apps/sim/blocks/blocks/note.ts
+++ b/apps/sim/blocks/blocks/note.ts
@@ -6,40 +6,24 @@ export const NoteBlock: BlockConfig = {
   name: 'Note',
   description: 'Add contextual annotations directly onto the workflow canvas.',
   longDescription:
-    'Use Note blocks to document decisions, share instructions, or leave context for collaborators directly on the workflow canvas. Notes support both plain text and Markdown rendering.',
+    'Use Note blocks to document decisions, share instructions, or leave context for collaborators directly on the workflow canvas. Notes support Markdown rendering and YouTube video embeds.',
   category: 'blocks',
   bgColor: '#F59E0B',
   icon: NoteIcon,
   subBlocks: [
-    {
-      id: 'format',
-      title: 'Display Format',
-      type: 'dropdown',
-      options: [
-        { label: 'Plain text', id: 'plain' },
-        { label: 'Markdown', id: 'markdown' },
-      ],
-      value: () => 'plain',
-      description: 'Choose how the note should render on the canvas.',
-    },
     {
       id: 'content',
-      title: 'Content',
       type: 'long-input',
       rows: 8,
       placeholder: 'Add context or instructions for collaborators...',
-      description: 'Write your note using plain text or Markdown depending on the selected format.',
+      description: 'Write your note using Markdown. YouTube links will display as embedded videos.',
     },
   ],
   tools: { access: [] },
   inputs: {
-    format: {
-      type: 'string',
-      description: 'Render mode for the note content.',
-    },
     content: {
       type: 'string',
-      description: 'Text for the note.',
+      description: 'Markdown text for the note.',
     },
   },
   outputs: {},
diff --git a/apps/sim/blocks/types.ts b/apps/sim/blocks/types.ts
index 64c1a89a24..17097f61eb 100644
--- a/apps/sim/blocks/types.ts
+++ b/apps/sim/blocks/types.ts
@@ -264,6 +264,8 @@ export interface SubBlockConfig {
   rows?: number
   // Multi-select functionality
   multiSelect?: boolean
+  // Combobox specific: Enable search input in dropdown
+  searchable?: boolean
   // Wand configuration for AI assistance
   wandConfig?: {
     enabled: boolean
diff --git a/apps/sim/components/emcn/components/badge/badge.tsx b/apps/sim/components/emcn/components/badge/badge.tsx
index 0508f92cd7..bb26280045 100644
--- a/apps/sim/components/emcn/components/badge/badge.tsx
+++ b/apps/sim/components/emcn/components/badge/badge.tsx
@@ -1,30 +1,115 @@
+'use client'
+
 import type * as React from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
+/** Shared base styles for status color badge variants */
+const STATUS_BASE = 'gap-[6px] rounded-[6px]'
+
 const badgeVariants = cva(
-  'inline-flex items-center px-[9px] py-[2.25px] text-[13px] font-medium gap-[4px] rounded-[40px] focus:outline-none transition-colors',
+  'inline-flex items-center font-medium focus:outline-none transition-colors',
   {
     variants: {
       variant: {
         default:
-          'bg-[var(--surface-5)] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:hover:text-[var(--text-primary)]',
+          'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover:text-[var(--text-primary)] hover:border-[var(--border-1)] hover:bg-[var(--surface-5)]',
         outline:
-          'border border-[#575757] bg-transparent text-[var(--text-secondary)] dark:border-[#575757] dark:bg-transparent dark:text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:hover:text-[var(--text-primary)]',
+          'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:border-[var(--surface-6)]',
+        green: `${STATUS_BASE} bg-[#bbf7d0] text-[#15803d] dark:bg-[rgba(34,197,94,0.2)] dark:text-[#86efac]`,
+        red: `${STATUS_BASE} bg-[#fecaca] text-[#b91c1c] dark:bg-[#551a1a] dark:text-[var(--text-error)]`,
+        gray: `${STATUS_BASE} bg-[#e7e5e4] text-[#57534e] dark:bg-[var(--terminal-status-info-bg)] dark:text-[var(--terminal-status-info-color)]`,
+        blue: `${STATUS_BASE} bg-[#bfdbfe] text-[#1d4ed8] dark:bg-[rgba(59,130,246,0.2)] dark:text-[#93c5fd]`,
+        'blue-secondary': `${STATUS_BASE} bg-[#bae6fd] text-[#0369a1] dark:bg-[rgba(51,180,255,0.2)] dark:text-[var(--brand-secondary)]`,
+        purple: `${STATUS_BASE} bg-[#e9d5ff] text-[#7c3aed] dark:bg-[rgba(168,85,247,0.2)] dark:text-[#d8b4fe]`,
+        orange: `${STATUS_BASE} bg-[#fed7aa] text-[#c2410c] dark:bg-[rgba(249,115,22,0.2)] dark:text-[#fdba74]`,
+        amber: `${STATUS_BASE} bg-[#fde68a] text-[#a16207] dark:bg-[rgba(245,158,11,0.2)] dark:text-[#fcd34d]`,
+        teal: `${STATUS_BASE} bg-[#99f6e4] text-[#0f766e] dark:bg-[rgba(20,184,166,0.2)] dark:text-[#5eead4]`,
+        'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
+      },
+      size: {
+        sm: 'px-[7px] py-[1px] text-[11px]',
+        md: 'px-[9px] py-[2px] text-[12px]',
+        lg: 'px-[9px] py-[2.25px] text-[12px]',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'md',
     },
   }
 )
 
+/** Color variants that support dot indicators */
+const STATUS_VARIANTS = [
+  'green',
+  'red',
+  'gray',
+  'blue',
+  'blue-secondary',
+  'purple',
+  'orange',
+  'amber',
+  'teal',
+  'gray-secondary',
+] as const
+
+/** Dot sizes corresponding to badge size variants */
+const DOT_SIZES: Record<string, string> = {
+  sm: 'h-[5px] w-[5px]',
+  md: 'h-[6px] w-[6px]',
+  lg: 'h-[6px] w-[6px]',
+}
+
+/** Icon sizes corresponding to badge size variants */
+const ICON_SIZES: Record<string, string> = {
+  sm: 'h-[10px] w-[10px]',
+  md: 'h-[12px] w-[12px]',
+  lg: 'h-[12px] w-[12px]',
+}
+
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+    VariantProps<typeof badgeVariants> {
+  /** Displays a dot indicator before content (only for color variants) */
+  dot?: boolean
+  /** Icon component to render before content */
+  icon?: React.ComponentType<{ className?: string }>
+}
+
+/**
+ * Displays a badge with configurable variant, size, and optional indicators.
+ *
+ * @remarks
+ * Supports two categories of variants:
+ * - **Bordered**: `default`, `outline` - traditional badges with borders
+ * - **Status colors**: `green`, `red`, `gray`, `blue`, `blue-secondary`, `purple`,
+ *   `orange`, `amber`, `teal`, `gray-secondary` - borderless colored badges
+ *
+ * Status color variants can display a dot indicator via the `dot` prop.
+ * All variants support an optional `icon` prop for leading icons.
+ */
+function Badge({
+  className,
+  variant,
+  size,
+  dot = false,
+  icon: Icon,
+  children,
+  ...props
+}: BadgeProps) {
+  const isStatusVariant = STATUS_VARIANTS.includes(variant as (typeof STATUS_VARIANTS)[number])
+  const effectiveSize = size ?? 'md'
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  return (
+    <div className={cn(badgeVariants({ variant, size }), className)} {...props}>
+      {isStatusVariant && dot && (
+        <div className={cn('rounded-[2px] bg-current', DOT_SIZES[effectiveSize])} />
+      )}
+      {Icon && <Icon className={ICON_SIZES[effectiveSize]} />}
+      {children}
+    </div>
+  )
 }
 
 export { Badge, badgeVariants }
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 829cd91860..d214b4e535 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -3,29 +3,33 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const buttonVariants = cva(
-  'inline-flex items-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:hover:text-[var(--text-primary)] dark:text-[var(--text-secondary)] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 outline-none focus:outline-none focus-visible:outline-none rounded-[4px] px-[8px] py-[6px] text-[12px]',
+  'inline-flex items-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
   {
     variants: {
       variant: {
         default:
-          'bg-[var(--surface-5)] dark:bg-[var(--surface-5)] hover:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-9)]',
+          'bg-[var(--surface-4)] hover:bg-[var(--surface-5)] border border-[var(--border)] hover:border-[var(--border-1)]',
         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)] 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)]',
+          'bg-[var(--surface-5)] hover:bg-[var(--border-1)] text-[var(--text-primary)] border border-[var(--border-1)]',
+        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover:shadow-[0_4px_0_0_var(--border-1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]',
         outline:
-          '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:
-          'bg-[var(--brand-secondary)] dark:bg-[var(--brand-secondary)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:bg-[var(--brand-secondary)] hover:dark:bg-[var(--brand-secondary)] hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
+          'border border-[var(--text-muted)] bg-[var(--surface-4)] hover:bg-[var(--surface-5)]',
+        primary: 'bg-[var(--brand-400)] text-[var(--text-primary)] hover:brightness-110',
+        destructive: 'bg-[var(--text-error)] text-white hover:brightness-110',
+        secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
-          'bg-[var(--brand-tertiary)] dark:bg-[var(--brand-tertiary)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:bg-[var(--brand-tertiary)] hover:dark:bg-[var(--brand-tertiary)] hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
+          '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:brightness-110 hover:!text-[var(--text-inverse)] ![transition-property:background-color,border-color,fill,stroke]',
         ghost: '',
-        'ghost-secondary': 'text-[var(--text-muted)] dark:text-[var(--text-muted)]',
+        'ghost-secondary': 'text-[var(--text-muted)]',
+      },
+      size: {
+        sm: 'px-[6px] py-[4px] text-[11px]',
+        md: 'px-[8px] py-[6px] text-[12px]',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'md',
     },
   }
 )
@@ -34,8 +38,8 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {}
 
-function Button({ className, variant, ...props }: ButtonProps) {
-  return <button className={cn(buttonVariants({ variant }), className)} {...props} />
+function Button({ className, variant, size, ...props }: ButtonProps) {
+  return <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
 }
 
 export { Button, buttonVariants }
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index 8f354e6e67..8d4048872c 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -89,7 +89,7 @@ function Container({
     <div
       className={cn(
         // Base container styling
-        'group relative min-h-[100px] rounded-[4px] border border-[var(--border-strong)]',
+        'group relative min-h-[100px] rounded-[4px] border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
         'dark:bg-[#1F1F1F]',
         // Overflow handling for long content
@@ -610,7 +610,7 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
     <div
       ref={setRefs}
       className={cn(
-        'code-editor-theme relative rounded-[4px] border border-[var(--border-strong)]',
+        'code-editor-theme relative rounded-[4px] border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm',
         'dark:bg-[#1F1F1F]',
         className
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index 8d5d00a76f..d9f82d65fe 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -19,20 +19,20 @@ 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] 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)]',
+  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)] 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-6)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        default: 'py-[6px] text-sm',
         sm: 'py-[5px] text-[12px]',
+        md: 'py-[6px] text-sm',
       },
     },
     defaultVariants: {
       variant: 'default',
-      size: 'default',
+      size: 'md',
     },
   }
 )
@@ -43,7 +43,24 @@ const comboboxVariants = cva(
 export type ComboboxOption = {
   label: string
   value: string
+  /** Icon component to render */
   icon?: React.ComponentType<{ className?: string }>
+  /** Pre-rendered icon element (alternative to icon component) */
+  iconElement?: ReactNode
+  /** Custom select handler - when provided, this is called instead of onChange */
+  onSelect?: () => void
+  /** Whether this option is disabled */
+  disabled?: boolean
+}
+
+/**
+ * Represents a group of options with an optional section header
+ */
+export type ComboboxOptionGroup = {
+  /** Optional section header label */
+  section?: string
+  /** Options in this group */
+  items: ComboboxOption[]
 }
 
 export interface ComboboxProps
@@ -91,7 +108,7 @@ export interface ComboboxProps
   /** Placeholder for search input */
   searchPlaceholder?: string
   /** Size variant */
-  size?: 'default' | 'sm'
+  size?: 'sm' | 'md'
   /** Dropdown alignment */
   align?: 'start' | 'center' | 'end'
   /** Dropdown width - 'trigger' matches trigger width, or provide a pixel value */
@@ -100,6 +117,12 @@ export interface ComboboxProps
   showAllOption?: boolean
   /** Custom label for the "All" option (default: "All") */
   allOptionLabel?: string
+  /** Grouped options with section headers - when provided, options prop is ignored */
+  groups?: ComboboxOptionGroup[]
+  /** Maximum height for the dropdown */
+  maxHeight?: number
+  /** Empty state message when no options match the search */
+  emptyMessage?: string
 }
 
 /**
@@ -136,6 +159,9 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       dropdownWidth = 'trigger',
       showAllOption = false,
       allOptionLabel = 'All',
+      groups,
+      maxHeight = 192,
+      emptyMessage,
       ...props
     },
     ref
@@ -151,21 +177,29 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
 
     const effectiveSelectedValue = selectedValue ?? value
 
+    // Flatten groups into options if groups are provided
+    const allOptions = useMemo(() => {
+      if (groups) {
+        return groups.flatMap((group) => group.items)
+      }
+      return options
+    }, [groups, options])
+
     const selectedOption = useMemo(
-      () => options.find((opt) => opt.value === effectiveSelectedValue),
-      [options, effectiveSelectedValue]
+      () => allOptions.find((opt) => opt.value === effectiveSelectedValue),
+      [allOptions, effectiveSelectedValue]
     )
 
     /**
      * Filter options based on current value or search query
      */
     const filteredOptions = useMemo(() => {
-      let result = options
+      let result = allOptions
 
       // Filter by editable input value
       if (filterOptions && value && open) {
         const currentValue = value.toString().toLowerCase()
-        const exactMatch = options.find(
+        const exactMatch = allOptions.find(
           (opt) => opt.value === value || opt.label.toLowerCase() === currentValue
         )
         if (!exactMatch) {
@@ -188,13 +222,41 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       }
 
       return result
-    }, [options, value, open, filterOptions, searchable, searchQuery])
+    }, [allOptions, value, open, filterOptions, searchable, searchQuery])
+
+    /**
+     * Filter groups based on search query (preserves group structure)
+     */
+    const filteredGroups = useMemo(() => {
+      if (!groups) return null
+      if (!searchable || !searchQuery) return groups
+
+      const query = searchQuery.toLowerCase()
+      return groups
+        .map((group) => ({
+          ...group,
+          items: group.items.filter((option) => {
+            const label = option.label.toLowerCase()
+            const optionValue = option.value.toLowerCase()
+            return label.includes(query) || optionValue.includes(query)
+          }),
+        }))
+        .filter((group) => group.items.length > 0)
+    }, [groups, searchable, searchQuery])
 
     /**
      * Handles selection of an option
      */
     const handleSelect = useCallback(
-      (selectedValue: string) => {
+      (selectedValue: string, customOnSelect?: () => void) => {
+        // If option has custom onSelect, use it instead
+        if (customOnSelect) {
+          customOnSelect()
+          setOpen(false)
+          setHighlightedIndex(-1)
+          return
+        }
+
         if (multiSelect && onMultiSelectChange) {
           const currentValues = multiSelectValues || []
           const newValues = currentValues.includes(selectedValue)
@@ -241,7 +303,11 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       // Delay to allow dropdown clicks
       setTimeout(() => {
         const activeElement = document.activeElement
-        if (!activeElement || !containerRef.current?.contains(activeElement)) {
+        // Check if focus is in the container, dropdown, or search input
+        const isInContainer = containerRef.current?.contains(activeElement)
+        const isInDropdown = dropdownRef.current?.contains(activeElement)
+        const isSearchInput = activeElement === searchInputRef.current
+        if (!activeElement || (!isInContainer && !isInDropdown && !isSearchInput)) {
           setOpen(false)
           setHighlightedIndex(-1)
         }
@@ -268,8 +334,8 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
           if (open && highlightedIndex >= 0) {
             e.preventDefault()
             const selectedOption = filteredOptions[highlightedIndex]
-            if (selectedOption) {
-              handleSelect(selectedOption.value)
+            if (selectedOption && !selectedOption.disabled) {
+              handleSelect(selectedOption.value, selectedOption.onSelect)
             }
           } else if (!editable) {
             e.preventDefault()
@@ -386,7 +452,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                   <Input
                     ref={inputRef}
                     className={cn(
-                      'w-full pr-[40px] font-medium transition-colors hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
+                      'w-full pr-[40px] font-medium transition-colors hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]',
                       (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
                       SelectedIcon && !overlayContent && 'pl-[28px]',
                       className
@@ -474,13 +540,14 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
             align={align}
             sideOffset={4}
             className={cn(
-              'rounded-[6px] border border-[var(--surface-11)] p-0',
+              'rounded-[6px] border border-[var(--border-1)] p-0',
               dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
             )}
             style={typeof dropdownWidth === 'number' ? { width: `${dropdownWidth}px` } : undefined}
             onOpenAutoFocus={(e) => {
               e.preventDefault()
-              if (searchable) {
+              // Only auto-focus search input when not in editable mode
+              if (searchable && !editable) {
                 setTimeout(() => searchInputRef.current?.focus(), 0)
               }
             }}
@@ -513,20 +580,16 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
               </div>
             )}
             <PopoverScrollArea
-              className='!flex-none max-h-48 p-[4px]'
+              className='!flex-none p-[4px]'
+              style={{ maxHeight: `${maxHeight}px` }}
               onWheelCapture={(e) => {
-                // Ensure wheel events are captured and don't get blocked by parent handlers
                 const target = e.currentTarget
                 const { scrollTop, scrollHeight, clientHeight } = target
                 const delta = e.deltaY
                 const isScrollingDown = delta > 0
                 const isScrollingUp = delta < 0
-
-                // Check if we're at scroll boundaries
                 const isAtTop = scrollTop === 0
                 const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1
-
-                // Only stop propagation if we can scroll in the requested direction
                 if ((isScrollingDown && !isAtBottom) || (isScrollingUp && !isAtTop)) {
                   e.stopPropagation()
                 }
@@ -541,18 +604,81 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                     </span>
                   </div>
                 ) : error ? (
-                  <div className='px-[8px] py-[14px] text-center font-base text-[12px] text-red-500'>
+                  <div className='px-[6px] py-[14px] text-center font-base text-[12px] text-red-500'>
                     {error}
                   </div>
                 ) : filteredOptions.length === 0 ? (
                   <div className='py-[14px] text-center font-base text-[12px] text-[var(--text-muted)]'>
-                    {searchQuery || (editable && value)
-                      ? 'No matching options found'
-                      : 'No options available'}
+                    {emptyMessage ||
+                      (searchQuery || (editable && value)
+                        ? 'No matching options found'
+                        : 'No options available')}
+                  </div>
+                ) : filteredGroups ? (
+                  // Render grouped options with section headers
+                  <div className='space-y-[2px]'>
+                    {filteredGroups.map((group, groupIndex) => (
+                      <div key={group.section || `group-${groupIndex}`}>
+                        {group.section && (
+                          <div className='px-[6px] py-[4px] font-base text-[11px] text-[var(--text-tertiary)] first:pt-[4px]'>
+                            {group.section}
+                          </div>
+                        )}
+                        {group.items.map((option) => {
+                          const isSelected = multiSelect
+                            ? multiSelectValues?.includes(option.value)
+                            : effectiveSelectedValue === option.value
+                          const globalIndex = filteredOptions.findIndex(
+                            (o) => o.value === option.value
+                          )
+                          const isHighlighted = globalIndex === highlightedIndex
+                          const OptionIcon = option.icon
+
+                          return (
+                            <div
+                              key={option.value}
+                              role='option'
+                              aria-selected={isSelected}
+                              aria-disabled={option.disabled}
+                              data-option-index={globalIndex}
+                              onMouseDown={(e) => {
+                                e.preventDefault()
+                                e.stopPropagation()
+                                if (!option.disabled) {
+                                  handleSelect(option.value, option.onSelect)
+                                }
+                              }}
+                              onMouseEnter={() =>
+                                !option.disabled && setHighlightedIndex(globalIndex)
+                              }
+                              className={cn(
+                                'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
+                                size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
+                                'hover:bg-[var(--border-1)]',
+                                (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
+                                option.disabled && 'cursor-not-allowed opacity-50'
+                              )}
+                            >
+                              {option.iconElement
+                                ? option.iconElement
+                                : OptionIcon && (
+                                    <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
+                                  )}
+                              <span className='flex-1 truncate text-[var(--text-primary)]'>
+                                {option.label}
+                              </span>
+                              {multiSelect && isSelected && (
+                                <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                              )}
+                            </div>
+                          )
+                        })}
+                      </div>
+                    ))}
                   </div>
                 ) : (
+                  // Render flat options (no groups)
                   <div className='space-y-[2px]'>
-                    {/* "All" option for multi-select mode */}
                     {showAllOption && multiSelect && (
                       <div
                         role='option'
@@ -565,10 +691,10 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                         }}
                         onMouseEnter={() => setHighlightedIndex(-1)}
                         className={cn(
-                          'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] font-medium font-sans',
+                          'relative flex cursor-pointer select-none items-center rounded-[4px] px-[6px] font-medium font-sans',
                           size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                          'hover:bg-[var(--surface-11)]',
-                          !multiSelectValues?.length && 'bg-[var(--surface-11)]'
+                          'hover:bg-[var(--border-1)]',
+                          !multiSelectValues?.length && 'bg-[var(--border-1)]'
                         )}
                       >
                         <span className='flex-1 truncate text-[var(--text-primary)]'>
@@ -588,21 +714,29 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                           key={option.value}
                           role='option'
                           aria-selected={isSelected}
+                          aria-disabled={option.disabled}
                           data-option-index={index}
                           onMouseDown={(e) => {
                             e.preventDefault()
                             e.stopPropagation()
-                            handleSelect(option.value)
+                            if (!option.disabled) {
+                              handleSelect(option.value, option.onSelect)
+                            }
                           }}
-                          onMouseEnter={() => setHighlightedIndex(index)}
+                          onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] font-medium font-sans',
+                            'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] 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)]'
+                            'hover:bg-[var(--border-1)]',
+                            (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
+                            option.disabled && 'cursor-not-allowed opacity-50'
                           )}
                         >
-                          {OptionIcon && <OptionIcon className='mr-[8px] h-3 w-3' />}
+                          {option.iconElement
+                            ? option.iconElement
+                            : OptionIcon && (
+                                <OptionIcon className='h-[14px] w-[14px] flex-shrink-0' />
+                              )}
                           <span className='flex-1 truncate text-[var(--text-primary)]'>
                             {option.label}
                           </span>
diff --git a/apps/sim/components/emcn/components/date-picker/date-picker.tsx b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
index c7acb6a7af..27b80d5c9e 100644
--- a/apps/sim/components/emcn/components/date-picker/date-picker.tsx
+++ b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
@@ -31,7 +31,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Matches the combobox and input styling patterns.
  */
 const datePickerVariants = cva(
-  '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)]',
+  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)] 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-6)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
@@ -332,13 +332,13 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
             align='start'
             sideOffset={4}
             avoidCollisions={false}
-            className='w-[280px] rounded-[6px] border border-[var(--surface-11)] p-0'
+            className='w-[280px] rounded-[6px] border border-[var(--border-1)] p-0'
           >
             {/* Calendar Header */}
-            <div className='flex items-center justify-between border-[var(--surface-11)] border-b px-[12px] py-[10px]'>
+            <div className='flex items-center justify-between border-[var(--border-1)] border-b px-[12px] py-[10px]'>
               <button
                 type='button'
-                className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
+                className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
                 onClick={goToPrevMonth}
               >
                 <ChevronLeft className='h-4 w-4' />
@@ -348,7 +348,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
               </span>
               <button
                 type='button'
-                className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
+                className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
                 onClick={goToNextMonth}
               >
                 <ChevronRight className='h-4 w-4' />
@@ -379,8 +379,8 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
                         isSelected(day)
                           ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
                           : isToday(day)
-                            ? 'bg-[var(--surface-9)] text-[var(--text-primary)]'
-                            : 'text-[var(--text-primary)] hover:bg-[var(--surface-9)]'
+                            ? 'bg-[var(--surface-5)] text-[var(--text-primary)]'
+                            : 'text-[var(--text-primary)] hover:bg-[var(--surface-5)]'
                       )}
                       onClick={() => handleSelectDate(day)}
                     >
@@ -392,7 +392,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
             </div>
 
             {/* Today Button */}
-            <div className='border-[var(--surface-11)] border-t px-[8px] py-[8px]'>
+            <div className='border-[var(--border-1)] border-t px-[8px] py-[8px]'>
               <Button variant='active' className='w-full' onClick={handleSelectToday}>
                 Today
               </Button>
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index ff345c65f7..3e7254f489 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -9,7 +9,11 @@ export {
   highlight,
   languages,
 } from './code/code'
-export { Combobox, type ComboboxOption } from './combobox/combobox'
+export {
+  Combobox,
+  type ComboboxOption,
+  type ComboboxOptionGroup,
+} from './combobox/combobox'
 export { DatePicker, type DatePickerProps, datePickerVariants } from './date-picker/date-picker'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { Label } from './label/label'
diff --git a/apps/sim/components/emcn/components/input/input.tsx b/apps/sim/components/emcn/components/input/input.tsx
index eb0e9eaff0..516ea98c74 100644
--- a/apps/sim/components/emcn/components/input/input.tsx
+++ b/apps/sim/components/emcn/components/input/input.tsx
@@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Currently supports a 'default' variant.
  */
 const inputVariants = 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-medium font-sans text-sm text-foreground 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 disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-foreground 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 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index fa871d56d2..a1e05d5c4a 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -7,7 +7,14 @@ export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelP
 
 /**
  * EMCN Label component built on Radix UI Label primitive.
+ *
+ * @remarks
  * Provides consistent typography and styling for form labels.
+ * Automatically handles disabled states through peer-disabled CSS.
+ *
+ * @param className - Additional CSS classes to apply
+ * @param props - Additional props passed to the Radix Label primitive
+ * @returns The styled label element
  *
  * @example
  * ```tsx
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 71f6f02252..a444033b42 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -20,14 +20,14 @@
  *       <PopoverContent>
  *         <PopoverBackButton />
  *         <PopoverItem rootOnly onClick={() => console.log('Docs')}>
- *           <BookOpen className="h-3 w-3" />
+ *           <BookOpen className="h-3.5 w-3.5" />
  *           <span>Docs</span>
  *         </PopoverItem>
  *
  *         <PopoverFolder
  *           id="workflows"
  *           title="All workflows"
- *           icon={<Workflow className="h-3 w-3" />}
+ *           icon={<Workflow className="h-3.5 w-3.5" />}
  *           onOpen={async () => {
  *             const data = await fetchWorkflows()
  *             setWorkflows(data)
@@ -35,7 +35,7 @@
  *         >
  *           {workflows.map(wf => (
  *             <PopoverItem key={wf.id} onClick={() => selectWorkflow(wf)}>
- *               <div className="h-3 w-3 rounded" style={{ backgroundColor: wf.color }} />
+ *               <div className="h-3.5 w-3.5 rounded" style={{ backgroundColor: wf.color }} />
  *               <span>{wf.name}</span>
  *             </PopoverItem>
  *           ))}
@@ -54,35 +54,53 @@ import * as PopoverPrimitive from '@radix-ui/react-popover'
 import { Check, ChevronLeft, ChevronRight, Search } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 
+type PopoverSize = 'sm' | 'md'
+
 /**
  * Shared base styles for all popover interactive items.
- * Ensures consistent height and styling across items, folders, and back button.
+ * Ensures consistent styling across items, folders, and back button.
  * Uses fast transitions (duration-75) to prevent hover state "jumping" during rapid mouse movement.
  */
 const POPOVER_ITEM_BASE_CLASSES =
-  'flex h-[25px] min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[var(--text-primary)] text-[12px] transition-colors duration-75 dark:text-[var(--text-primary)] [&_svg]:transition-colors [&_svg]:duration-75'
+  'flex min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-base text-[var(--text-primary)] transition-colors duration-75 [&_svg]:transition-colors [&_svg]:duration-75 disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed'
+
+/**
+ * Size-specific styles for popover items.
+ * SM: 11px text, 22px height
+ * MD: 13px text, 26px height
+ */
+const POPOVER_ITEM_SIZE_CLASSES: Record<PopoverSize, string> = {
+  sm: 'h-[22px] text-[11px]',
+  md: 'h-[26px] text-[13px]',
+}
+
+/**
+ * Size-specific icon classes for popover items.
+ */
+const POPOVER_ICON_SIZE_CLASSES: Record<PopoverSize, string> = {
+  sm: 'h-3 w-3',
+  md: 'h-3.5 w-3.5',
+}
 
 /**
  * Variant-specific active state styles for popover items.
  */
 const POPOVER_ITEM_ACTIVE_CLASSES = {
-  primary:
-    'bg-[var(--brand-secondary)] text-[var(--bg)] dark:bg-[var(--brand-secondary)] dark:text-[var(--bg)] [&_svg]:text-[var(--bg)] dark:[&_svg]:text-[var(--bg)]',
-  default:
-    'bg-[var(--surface-9)] text-[var(--text-primary)] dark:bg-[var(--surface-9)] dark:text-[var(--text-primary)] [&_svg]:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
+  secondary: 'bg-[var(--brand-secondary)] text-[var(--bg)] [&_svg]:text-[var(--bg)]',
+  default: 'bg-[var(--surface-5)] text-[var(--text-primary)] [&_svg]:text-[var(--text-primary)]',
 }
 
 /**
  * Variant-specific hover state styles for popover items.
  */
 const POPOVER_ITEM_HOVER_CLASSES = {
-  primary:
-    'hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)] hover:[&_svg]:text-[var(--bg)] dark:hover:[&_svg]:text-[var(--bg)]',
+  secondary:
+    'hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] hover:[&_svg]:text-[var(--bg)]',
   default:
-    'hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)] hover:[&_svg]:text-[var(--text-primary)] dark:hover:[&_svg]:text-[var(--text-primary)]',
+    'hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)] hover:[&_svg]:text-[var(--text-primary)]',
 }
 
-type PopoverVariant = 'default' | 'primary'
+type PopoverVariant = 'default' | 'secondary'
 
 interface PopoverContextValue {
   openFolder: (
@@ -97,6 +115,7 @@ interface PopoverContextValue {
   folderTitle: string | null
   onFolderSelect: (() => void) | null
   variant: PopoverVariant
+  size: PopoverSize
   searchQuery: string
   setSearchQuery: (query: string) => void
 }
@@ -117,6 +136,13 @@ export interface PopoverProps extends PopoverPrimitive.PopoverProps {
    * @default 'default'
    */
   variant?: PopoverVariant
+  /**
+   * Size variant of the popover
+   * - sm: 11px text, compact spacing (for logs, notifications, context menus)
+   * - md: 13px text, default spacing
+   * @default 'md'
+   */
+  size?: PopoverSize
 }
 
 /**
@@ -124,13 +150,18 @@ export interface PopoverProps extends PopoverPrimitive.PopoverProps {
  *
  * @example
  * ```tsx
- * <Popover open={open} onOpenChange={setOpen} variant="default">
+ * <Popover open={open} onOpenChange={setOpen} variant="default" size="md">
  *   <PopoverAnchor>...</PopoverAnchor>
  *   <PopoverContent>...</PopoverContent>
  * </Popover>
  * ```
  */
-const Popover: React.FC<PopoverProps> = ({ children, variant = 'default', ...props }) => {
+const Popover: React.FC<PopoverProps> = ({
+  children,
+  variant = 'default',
+  size = 'md',
+  ...props
+}) => {
   const [currentFolder, setCurrentFolder] = React.useState<string | null>(null)
   const [folderTitle, setFolderTitle] = React.useState<string | null>(null)
   const [onFolderSelect, setOnFolderSelect] = React.useState<(() => void) | null>(null)
@@ -163,10 +194,20 @@ const Popover: React.FC<PopoverProps> = ({ children, variant = 'default', ...pro
       folderTitle,
       onFolderSelect,
       variant,
+      size,
       searchQuery,
       setSearchQuery,
     }),
-    [openFolder, closeFolder, currentFolder, folderTitle, onFolderSelect, variant, searchQuery]
+    [
+      openFolder,
+      closeFolder,
+      currentFolder,
+      folderTitle,
+      onFolderSelect,
+      variant,
+      size,
+      searchQuery,
+    ]
   )
 
   return (
@@ -254,6 +295,12 @@ export interface PopoverContentProps
   avoidCollisions?: boolean
 }
 
+/**
+ * Shared styles for popover content container.
+ * Both sizes use same padding and 6px border radius.
+ */
+const POPOVER_CONTENT_CLASSES = 'px-[6px] py-[6px] rounded-[6px]'
+
 /**
  * Popover content component with automatic positioning and collision detection.
  * Wraps children in a styled container with scrollable area.
@@ -285,10 +332,15 @@ const PopoverContent = React.forwardRef<
       collisionPadding = 8,
       border = false,
       avoidCollisions = true,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
       ...restProps
     },
     ref
   ) => {
+    const context = React.useContext(PopoverContext)
+    const size = context?.size || 'md'
+
     // Smart default offset: larger offset when rendering above to avoid covering cursor
     const effectiveSideOffset = sideOffset ?? (side === 'top' ? 20 : 14)
 
@@ -327,6 +379,24 @@ const PopoverContent = React.forwardRef<
       container.scrollTop += deltaY
     }
 
+    const handleOpenAutoFocus = React.useCallback(
+      (e: Event) => {
+        // Always prevent auto-focus to avoid flickering from focus-triggered repositioning
+        e.preventDefault()
+        onOpenAutoFocus?.(e)
+      },
+      [onOpenAutoFocus]
+    )
+
+    const handleCloseAutoFocus = React.useCallback(
+      (e: Event) => {
+        // Always prevent auto-focus to avoid flickering from focus-triggered repositioning
+        e.preventDefault()
+        onCloseAutoFocus?.(e)
+      },
+      [onCloseAutoFocus]
+    )
+
     const content = (
       <PopoverPrimitive.Content
         ref={ref}
@@ -336,14 +406,19 @@ const PopoverContent = React.forwardRef<
         collisionPadding={collisionPadding}
         avoidCollisions={avoidCollisions}
         sticky='partial'
+        hideWhenDetached={false}
         onWheel={handleWheel}
+        onOpenAutoFocus={handleOpenAutoFocus}
+        onCloseAutoFocus={handleCloseAutoFocus}
         {...restProps}
         className={cn(
-          'z-[10000200] flex flex-col overflow-auto rounded-[8px] bg-[var(--surface-3)] px-[5.5px] py-[5px] text-foreground outline-none dark:bg-[var(--surface-3)]',
+          // will-change-transform creates a new GPU compositing layer to prevent paint flickering
+          'z-[10000200] flex flex-col overflow-auto bg-[var(--surface-3)] text-foreground outline-none will-change-transform',
+          POPOVER_CONTENT_CLASSES,
           // 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)]',
+          border && 'border border-[var(--border-1)]',
           className
         )}
         style={{
@@ -351,7 +426,13 @@ const PopoverContent = React.forwardRef<
           maxWidth: maxWidth !== undefined ? `${maxWidth}px` : 'calc(100vw - 16px)',
           // Only enforce default min width when the user hasn't set width constraints
           minWidth:
-            minWidth !== undefined ? `${minWidth}px` : hasUserWidthConstraint ? undefined : '160px',
+            minWidth !== undefined
+              ? `${minWidth}px`
+              : hasUserWidthConstraint
+                ? undefined
+                : size === 'sm'
+                  ? '140px'
+                  : '160px',
           ...style,
         }}
       >
@@ -389,7 +470,12 @@ const PopoverScrollArea = React.forwardRef<HTMLDivElement, PopoverScrollAreaProp
   ({ className, ...props }, ref) => {
     return (
       <div
-        className={cn('min-h-0 overflow-auto overscroll-contain', className)}
+        className={cn(
+          'min-h-0 overflow-auto overscroll-contain',
+          // Add margin to wrapper divs containing sections (not individual items)
+          '[&>div:has([data-popover-section]):not(:first-child)]:mt-[6px]',
+          className
+        )}
         ref={ref}
         {...props}
       />
@@ -425,7 +511,7 @@ export interface PopoverItemProps extends React.HTMLAttributes<HTMLDivElement> {
  * @example
  * ```tsx
  * <PopoverItem active={isActive} disabled={isDisabled} onClick={() => handleClick()}>
- *   <Icon className="h-4 w-4" />
+ *   <Icon className="h-3.5 w-3.5" />
  *   <span>Item label</span>
  * </PopoverItem>
  * ```
@@ -438,6 +524,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
     // Try to get context - if not available, we're outside Popover (shouldn't happen)
     const context = React.useContext(PopoverContext)
     const variant = context?.variant || 'default'
+    const size = context?.size || 'md'
 
     // If rootOnly is true and we're in a folder, don't render
     if (rootOnly && context?.isInFolder) {
@@ -456,9 +543,9 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
       <div
         className={cn(
           POPOVER_ITEM_BASE_CLASSES,
-          !disabled &&
-            (active ? POPOVER_ITEM_ACTIVE_CLASSES[variant] : POPOVER_ITEM_HOVER_CLASSES[variant]),
-          disabled && 'cursor-default opacity-50',
+          POPOVER_ITEM_SIZE_CLASSES[size],
+          active ? POPOVER_ITEM_ACTIVE_CLASSES[variant] : POPOVER_ITEM_HOVER_CLASSES[variant],
+          disabled && 'pointer-events-none cursor-not-allowed opacity-50',
           className
         )}
         ref={ref}
@@ -469,7 +556,9 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
         {...props}
       >
         {children}
-        {showCheck && active && <Check className='ml-auto h-[12px] w-[12px]' />}
+        {showCheck && active && (
+          <Check className={cn('ml-auto', POPOVER_ICON_SIZE_CLASSES[size])} />
+        )}
       </div>
     )
   }
@@ -484,6 +573,15 @@ export interface PopoverSectionProps extends React.HTMLAttributes<HTMLDivElement
   rootOnly?: boolean
 }
 
+/**
+ * Size-specific styles for popover section headers.
+ * Shared: 6px padding, 4px vertical padding
+ */
+const POPOVER_SECTION_SIZE_CLASSES: Record<PopoverSize, string> = {
+  sm: 'px-[6px] py-[4px] text-[11px]',
+  md: 'px-[6px] py-[4px] text-[13px]',
+}
+
 /**
  * Popover section header component for grouping items with a title.
  *
@@ -497,6 +595,7 @@ export interface PopoverSectionProps extends React.HTMLAttributes<HTMLDivElement
 const PopoverSection = React.forwardRef<HTMLDivElement, PopoverSectionProps>(
   ({ className, rootOnly, ...props }, ref) => {
     const context = React.useContext(PopoverContext)
+    const size = context?.size || 'md'
 
     // If rootOnly is true and we're in a folder, don't render
     if (rootOnly && context?.isInFolder) {
@@ -506,7 +605,8 @@ const PopoverSection = React.forwardRef<HTMLDivElement, PopoverSectionProps>(
     return (
       <div
         className={cn(
-          'min-w-0 px-[6px] py-[4px] font-base text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]',
+          'mt-[6px] min-w-0 font-base text-[var(--text-tertiary)] first:mt-0 first:pt-0 dark:text-[var(--text-tertiary)]',
+          POPOVER_SECTION_SIZE_CLASSES[size],
           className
         )}
         data-popover-section=''
@@ -564,7 +664,7 @@ export interface PopoverFolderProps extends Omit<React.HTMLAttributes<HTMLDivEle
  */
 const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
   ({ className, id, title, icon, onOpen, onSelect, children, active, ...props }, ref) => {
-    const { openFolder, currentFolder, isInFolder, variant } = usePopoverContext()
+    const { openFolder, currentFolder, isInFolder, variant, size } = usePopoverContext()
 
     // Don't render if we're in a different folder
     if (isInFolder && currentFolder !== id) {
@@ -588,6 +688,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
         ref={ref}
         className={cn(
           POPOVER_ITEM_BASE_CLASSES,
+          POPOVER_ITEM_SIZE_CLASSES[size],
           active ? POPOVER_ITEM_ACTIVE_CLASSES[variant] : POPOVER_ITEM_HOVER_CLASSES[variant],
           className
         )}
@@ -599,7 +700,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
       >
         {icon}
         <span className='flex-1'>{title}</span>
-        <ChevronRight className='h-3 w-3' />
+        <ChevronRight className={POPOVER_ICON_SIZE_CLASSES[size]} />
       </div>
     )
   }
@@ -638,7 +739,8 @@ export interface PopoverBackButtonProps extends React.HTMLAttributes<HTMLDivElem
  */
 const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProps>(
   ({ className, folderTitleRef, folderTitleActive, onFolderTitleMouseEnter, ...props }, ref) => {
-    const { isInFolder, closeFolder, folderTitle, onFolderSelect, variant } = usePopoverContext()
+    const { isInFolder, closeFolder, folderTitle, onFolderSelect, variant, size } =
+      usePopoverContext()
 
     if (!isInFolder) {
       return null
@@ -648,12 +750,18 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
       <div className='flex flex-col'>
         <div
           ref={ref}
-          className={cn(POPOVER_ITEM_BASE_CLASSES, POPOVER_ITEM_HOVER_CLASSES[variant], className)}
+          className={cn(
+            'peer',
+            POPOVER_ITEM_BASE_CLASSES,
+            POPOVER_ITEM_SIZE_CLASSES[size],
+            POPOVER_ITEM_HOVER_CLASSES[variant],
+            className
+          )}
           role='button'
           onClick={closeFolder}
           {...props}
         >
-          <ChevronLeft className='h-3 w-3' />
+          <ChevronLeft className={POPOVER_ICON_SIZE_CLASSES[size]} />
           <span>Back</span>
         </div>
         {folderTitle && onFolderSelect && (
@@ -661,9 +769,12 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
             ref={folderTitleRef}
             className={cn(
               POPOVER_ITEM_BASE_CLASSES,
+              POPOVER_ITEM_SIZE_CLASSES[size],
               folderTitleActive
                 ? POPOVER_ITEM_ACTIVE_CLASSES[variant]
-                : POPOVER_ITEM_HOVER_CLASSES[variant]
+                : POPOVER_ITEM_HOVER_CLASSES[variant],
+              // Hide active/hover background when back button is hovered
+              'peer-hover:!bg-transparent'
             )}
             role='button'
             onClick={(e) => {
@@ -676,7 +787,12 @@ const PopoverBackButton = React.forwardRef<HTMLDivElement, PopoverBackButtonProp
           </div>
         )}
         {folderTitle && !onFolderSelect && (
-          <div className='px-[6px] py-[4px] font-base text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+          <div
+            className={cn(
+              'font-base text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]',
+              POPOVER_SECTION_SIZE_CLASSES[size]
+            )}
+          >
             {folderTitle}
           </div>
         )}
@@ -699,6 +815,15 @@ export interface PopoverSearchProps extends React.HTMLAttributes<HTMLDivElement>
   onValueChange?: (value: string) => void
 }
 
+/**
+ * Size-specific styles for popover search container.
+ * Shared: padding
+ */
+const POPOVER_SEARCH_SIZE_CLASSES: Record<PopoverSize, string> = {
+  sm: 'px-[8px] py-[6px] text-[11px]',
+  md: 'px-[8px] py-[6px] text-[13px]',
+}
+
 /**
  * Search input component for filtering popover items.
  *
@@ -716,7 +841,7 @@ export interface PopoverSearchProps extends React.HTMLAttributes<HTMLDivElement>
  */
 const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
   ({ className, placeholder = 'Search...', onValueChange, ...props }, ref) => {
-    const { searchQuery, setSearchQuery } = usePopoverContext()
+    const { searchQuery, setSearchQuery, size } = usePopoverContext()
     const inputRef = React.useRef<HTMLInputElement>(null)
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -732,11 +857,20 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
     }, [setSearchQuery, onValueChange])
 
     return (
-      <div ref={ref} className={cn('flex items-center px-[8px] py-[6px]', className)} {...props}>
-        <Search className='mr-2 h-[12px] w-[12px] shrink-0 text-[var(--text-muted)]' />
+      <div
+        ref={ref}
+        className={cn('flex items-center', POPOVER_SEARCH_SIZE_CLASSES[size], className)}
+        {...props}
+      >
+        <Search
+          className={cn('mr-2 shrink-0 text-[var(--text-muted)]', POPOVER_ICON_SIZE_CLASSES[size])}
+        />
         <input
           ref={inputRef}
-          className='w-full bg-transparent font-base text-[12px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none'
+          className={cn(
+            'w-full bg-transparent font-base text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none',
+            size === 'sm' ? 'text-[11px]' : 'text-[13px]'
+          )}
           placeholder={placeholder}
           value={searchQuery}
           onChange={handleChange}
@@ -761,3 +895,5 @@ export {
   PopoverSearch,
   usePopoverContext,
 }
+
+export type { PopoverSize }
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index a1560ab846..2a44542ca8 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -74,7 +74,7 @@ const SModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] left-[50%] z-[500] flex h-[min(70vh,720px)] max-h-[800px] min-h-[520px] w-[min(60vw,900px)] min-w-[680px] max-w-[1000px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          'fixed top-[50%] left-[50%] z-[500] flex h-[min(calc(100vh-8rem),900px)] min-h-[400px] w-[min(calc(100vw-8rem),1080px)] min-w-[520px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={style}
@@ -186,7 +186,7 @@ function SModalSidebarItem({
     <Button
       variant={active ? 'active' : 'ghost'}
       className={cn(
-        'w-full justify-start gap-[8px] rounded-[6px] text-[13px]',
+        'w-full justify-start gap-[8px] rounded-[6px] border-0 text-[13px]',
         !active &&
           'text-[var(--text-tertiary)] hover:bg-[var(--border)] hover:text-[var(--text-primary)]',
         className
diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx
index 850dfba2ba..dd700a9831 100644
--- a/apps/sim/components/emcn/components/slider/slider.tsx
+++ b/apps/sim/components/emcn/components/slider/slider.tsx
@@ -26,8 +26,8 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       )}
       {...props}
     >
-      <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--surface-12)] transition-colors'>
-        <SliderPrimitive.Range className='absolute h-full bg-[var(--surface-12)]' />
+      <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--surface-6)] transition-colors'>
+        <SliderPrimitive.Range className='absolute h-full bg-[var(--surface-6)]' />
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb className='block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors focus-visible:outline-none' />
     </SliderPrimitive.Root>
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index 47c7538e28..f4a7bc692f 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -16,7 +16,7 @@ const Switch = React.forwardRef<
   <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)]',
+      'bg-[var(--surface-5)] data-[state=checked]:bg-[var(--surface-6)]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index 79ff958f3f..d0d72eb0f0 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-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)] 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/icons.tsx b/apps/sim/components/icons.tsx
index ddaf0f95ee..8c13d5ed79 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -462,6 +462,19 @@ export function SlackIcon(props: SVGProps<SVGSVGElement>) {
   )
 }
 
+export function SlackMonoIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg' fill='currentColor' {...props}>
+      <g>
+        <path d='M53.8412698,161.320635 C53.8412698,176.152381 41.8539683,188.139683 27.0222222,188.139683 C12.1904762,188.139683 0.203174603,176.152381 0.203174603,161.320635 C0.203174603,146.488889 12.1904762,134.501587 27.0222222,134.501587 L53.8412698,134.501587 L53.8412698,161.320635 Z M67.2507937,161.320635 C67.2507937,146.488889 79.2380952,134.501587 94.0698413,134.501587 C108.901587,134.501587 120.888889,146.488889 120.888889,161.320635 L120.888889,228.368254 C120.888889,243.2 108.901587,255.187302 94.0698413,255.187302 C79.2380952,255.187302 67.2507937,243.2 67.2507937,228.368254 L67.2507937,161.320635 Z' />
+        <path d='M94.0698413,53.6380952 C79.2380952,53.6380952 67.2507937,41.6507937 67.2507937,26.8190476 C67.2507937,11.9873016 79.2380952,-7.10542736e-15 94.0698413,-7.10542736e-15 C108.901587,-7.10542736e-15 120.888889,11.9873016 120.888889,26.8190476 L120.888889,53.6380952 L94.0698413,53.6380952 Z M94.0698413,67.2507937 C108.901587,67.2507937 120.888889,79.2380952 120.888889,94.0698413 C120.888889,108.901587 108.901587,120.888889 94.0698413,120.888889 L26.8190476,120.888889 C11.9873016,120.888889 0,108.901587 0,94.0698413 C0,79.2380952 11.9873016,67.2507937 26.8190476,67.2507937 L94.0698413,67.2507937 Z' />
+        <path d='M201.549206,94.0698413 C201.549206,79.2380952 213.536508,67.2507937 228.368254,67.2507937 C243.2,67.2507937 255.187302,79.2380952 255.187302,94.0698413 C255.187302,108.901587 243.2,120.888889 228.368254,120.888889 L201.549206,120.888889 L201.549206,94.0698413 Z M188.139683,94.0698413 C188.139683,108.901587 176.152381,120.888889 161.320635,120.888889 C146.488889,120.888889 134.501587,108.901587 134.501587,94.0698413 L134.501587,26.8190476 C134.501587,11.9873016 146.488889,-1.42108547e-14 161.320635,-1.42108547e-14 C176.152381,-1.42108547e-14 188.139683,11.9873016 188.139683,26.8190476 L188.139683,94.0698413 Z' />
+        <path d='M161.320635,201.549206 C176.152381,201.549206 188.139683,213.536508 188.139683,228.368254 C188.139683,243.2 176.152381,255.187302 161.320635,255.187302 C146.488889,255.187302 134.501587,243.2 134.501587,228.368254 L134.501587,201.549206 L161.320635,201.549206 Z M161.320635,188.139683 C146.488889,188.139683 134.501587,176.152381 134.501587,161.320635 C134.501587,146.488889 146.488889,134.501587 161.320635,134.501587 L228.571429,134.501587 C243.403175,134.501587 255.390476,146.488889 255.390476,161.320635 C255.390476,176.152381 243.403175,188.139683 228.571429,188.139683 L161.320635,188.139683 Z' />
+      </g>
+    </svg>
+  )
+}
+
 export function GithubIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...props} width='26' height='26' viewBox='0 0 26 26' xmlns='http://www.w3.org/2000/svg'>
diff --git a/apps/sim/components/ui/checkbox.tsx b/apps/sim/components/ui/checkbox.tsx
index e3f5cb3bfd..1b3c65b836 100644
--- a/apps/sim/components/ui/checkbox.tsx
+++ b/apps/sim/components/ui/checkbox.tsx
@@ -12,7 +12,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-sm border border-[var(--surface-11)] bg-[var(--surface-5)] ring-offset-background transition-colors hover:border-[var(--surface-14)] hover:bg-[var(--surface-6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-[var(--surface-14)] data-[state=checked]:bg-[var(--surface-11)] data-[state=checked]:text-[var(--text-primary)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)] dark:data-[state=checked]:border-[var(--surface-15)] dark:data-[state=checked]:bg-[var(--surface-13)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
+      'peer h-4 w-4 shrink-0 rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] ring-offset-background transition-colors hover:border-[var(--surface-6)] hover:bg-[var(--surface-5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-[var(--surface-6)] data-[state=checked]:bg-[var(--border-1)] data-[state=checked]:text-[var(--text-primary)] dark:border-[var(--border-1)] dark:bg-[var(--surface-5)] dark:data-[state=checked]:border-[var(--surface-6)] dark:data-[state=checked]:bg-[var(--surface-6)] dark:hover:border-[var(--surface-6)] dark:hover:bg-[var(--border-1)]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/ui/input-otp-form.tsx b/apps/sim/components/ui/input-otp-form.tsx
index 1fe8a3ef0b..7970b17596 100644
--- a/apps/sim/components/ui/input-otp-form.tsx
+++ b/apps/sim/components/ui/input-otp-form.tsx
@@ -1,7 +1,6 @@
 'use client'
 
 import { useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'
 
@@ -55,14 +54,7 @@ export function OTPInputForm({
       {error && <p className='text-center text-destructive text-sm'>{error}</p>}
 
       <Button type='submit' className='w-full' disabled={value.length !== length || isLoading}>
-        {isLoading ? (
-          <div className='flex items-center justify-center'>
-            <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-            Verifying...
-          </div>
-        ) : (
-          'Verify'
-        )}
+        {isLoading ? 'Verifying...' : 'Verify'}
       </Button>
     </form>
   )
diff --git a/apps/sim/components/ui/switch.tsx b/apps/sim/components/ui/switch.tsx
index 7f2f60b9df..dd87d2edc3 100644
--- a/apps/sim/components/ui/switch.tsx
+++ b/apps/sim/components/ui/switch.tsx
@@ -10,7 +10,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-[var(--surface-5)] transition-colors hover:bg-[var(--surface-6)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--surface-11)] data-[state=unchecked]:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:data-[state=checked]:bg-[var(--surface-13)] dark:data-[state=unchecked]:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-6)]',
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent bg-[var(--surface-4)] transition-colors hover:bg-[var(--surface-5)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[var(--border-1)] data-[state=unchecked]:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:data-[state=checked]:bg-[var(--surface-6)] dark:data-[state=unchecked]:bg-[var(--surface-5)] dark:hover:bg-[var(--surface-5)]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/ui/tag-input.tsx b/apps/sim/components/ui/tag-input.tsx
index 2878230490..c2977c70d4 100644
--- a/apps/sim/components/ui/tag-input.tsx
+++ b/apps/sim/components/ui/tag-input.tsx
@@ -55,7 +55,7 @@ export function TagInput({
   return (
     <div
       className={cn(
-        '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)]',
+        '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(--border-1)] bg-[var(--surface-5)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-5)]',
         disabled && 'cursor-not-allowed opacity-50',
         className
       )}
@@ -92,7 +92,7 @@ interface TagProps {
 
 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)]'>
+    <div className='flex w-auto items-center gap-[4px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] 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
diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts
index 529bf4ccbe..9e279b4dc9 100644
--- a/apps/sim/hooks/queries/general-settings.ts
+++ b/apps/sim/hooks/queries/general-settings.ts
@@ -43,9 +43,7 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
     autoConnect: data.autoConnect ?? true,
     showTrainingControls: data.showTrainingControls ?? false,
     superUserModeEnabled: data.superUserModeEnabled ?? true,
-    // theme: data.theme || 'system',
-    // Force dark mode - light mode is temporarily disabled (TODO: Remove this)
-    theme: 'dark' as const,
+    theme: data.theme || 'system',
     telemetryEnabled: data.telemetryEnabled ?? true,
     billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
     errorNotificationsEnabled: data.errorNotificationsEnabled ?? true,
diff --git a/apps/sim/hooks/queries/subscription.ts b/apps/sim/hooks/queries/subscription.ts
index 057e202958..750d5f5251 100644
--- a/apps/sim/hooks/queries/subscription.ts
+++ b/apps/sim/hooks/queries/subscription.ts
@@ -6,28 +6,40 @@ import { organizationKeys } from '@/hooks/queries/organization'
  */
 export const subscriptionKeys = {
   all: ['subscription'] as const,
-  user: () => [...subscriptionKeys.all, 'user'] as const,
+  user: (includeOrg?: boolean) => [...subscriptionKeys.all, 'user', { includeOrg }] as const,
   usage: () => [...subscriptionKeys.all, 'usage'] as const,
 }
 
 /**
  * Fetch user subscription data
+ * @param includeOrg - Whether to include organization role data
  */
-async function fetchSubscriptionData() {
-  const response = await fetch('/api/billing?context=user')
+async function fetchSubscriptionData(includeOrg = false) {
+  const params = new URLSearchParams({ context: 'user' })
+  if (includeOrg) params.set('includeOrg', 'true')
+
+  const response = await fetch(`/api/billing?${params}`)
   if (!response.ok) {
     throw new Error('Failed to fetch subscription data')
   }
   return response.json()
 }
 
+interface UseSubscriptionDataOptions {
+  /** Include organization membership and role data */
+  includeOrg?: boolean
+}
+
 /**
  * Hook to fetch user subscription data
+ * @param options - Optional configuration
  */
-export function useSubscriptionData() {
+export function useSubscriptionData(options: UseSubscriptionDataOptions = {}) {
+  const { includeOrg = false } = options
+
   return useQuery({
-    queryKey: subscriptionKeys.user(),
-    queryFn: fetchSubscriptionData,
+    queryKey: subscriptionKeys.user(includeOrg),
+    queryFn: () => fetchSubscriptionData(includeOrg),
     staleTime: 30 * 1000,
     placeholderData: keepPreviousData,
   })
diff --git a/apps/sim/lib/billing/client/usage-visualization.ts b/apps/sim/lib/billing/client/usage-visualization.ts
index e165a1d0f1..e6599d6ca7 100644
--- a/apps/sim/lib/billing/client/usage-visualization.ts
+++ b/apps/sim/lib/billing/client/usage-visualization.ts
@@ -16,15 +16,27 @@
 export const USAGE_PILL_COUNT = 8
 
 /**
- * Color values for usage pill states
+ * Usage percentage thresholds for visual states.
+ */
+export const USAGE_THRESHOLDS = {
+  /** Warning threshold (yellow/orange state) */
+  WARNING: 75,
+  /** Critical threshold (red state) */
+  CRITICAL: 90,
+} as const
+
+/**
+ * Color values for usage pill states using CSS variables
  */
 export const USAGE_PILL_COLORS = {
   /** Unfilled pill color (gray) */
-  UNFILLED: '#414141',
+  UNFILLED: 'var(--surface-5)',
   /** Normal filled pill color (blue) */
-  FILLED: '#34B5FF',
-  /** Warning/limit reached pill color (red) */
-  AT_LIMIT: '#ef4444',
+  FILLED: 'var(--brand-secondary)',
+  /** Warning state pill color (yellow/orange) */
+  WARNING: 'var(--warning)',
+  /** Critical/limit reached pill color (red) */
+  AT_LIMIT: 'var(--text-error)',
 } as const
 
 /**
@@ -65,7 +77,7 @@ export function isUsageAtLimit(percentUsed: number): boolean {
  *
  * @param isFilled - Whether this pill should be filled
  * @param isAtLimit - Whether usage has reached the limit
- * @returns Hex color string
+ * @returns CSS color value
  */
 export function getPillColor(isFilled: boolean, isAtLimit: boolean): string {
   if (!isFilled) return USAGE_PILL_COLORS.UNFILLED
@@ -73,10 +85,40 @@ export function getPillColor(isFilled: boolean, isAtLimit: boolean): string {
   return USAGE_PILL_COLORS.FILLED
 }
 
+/**
+ * Get the appropriate filled pill color based on usage thresholds.
+ *
+ * @param isCritical - Whether usage is at critical level (blocked or >= 90%)
+ * @param isWarning - Whether usage is at warning level (>= 75% but < critical)
+ * @returns CSS color value for filled pills
+ */
+export function getFilledPillColor(isCritical: boolean, isWarning: boolean): string {
+  if (isCritical) return USAGE_PILL_COLORS.AT_LIMIT
+  if (isWarning) return USAGE_PILL_COLORS.WARNING
+  return USAGE_PILL_COLORS.FILLED
+}
+
+/**
+ * Determine usage state based on percentage and blocked status.
+ *
+ * @param percentUsed - The usage percentage (0-100)
+ * @param isBlocked - Whether the account is blocked
+ * @returns Object containing isCritical and isWarning flags
+ */
+export function getUsageState(
+  percentUsed: number,
+  isBlocked = false
+): { isCritical: boolean; isWarning: boolean } {
+  const isCritical = isBlocked || percentUsed >= USAGE_THRESHOLDS.CRITICAL
+  const isWarning = !isCritical && percentUsed >= USAGE_THRESHOLDS.WARNING
+  return { isCritical, isWarning }
+}
+
 /**
  * Generate an array of pill states for rendering.
  *
  * @param percentUsed - The usage percentage (0-100)
+ * @param isBlocked - Whether the account is blocked
  * @returns Array of pill states with colors
  *
  * @example
@@ -85,19 +127,23 @@ export function getPillColor(isFilled: boolean, isAtLimit: boolean): string {
  *   <Pill key={index} color={pill.color} filled={pill.filled} />
  * ))
  */
-export function generatePillStates(percentUsed: number): Array<{
+export function generatePillStates(
+  percentUsed: number,
+  isBlocked = false
+): Array<{
   filled: boolean
   color: string
   index: number
 }> {
   const filledCount = calculateFilledPills(percentUsed)
-  const atLimit = isUsageAtLimit(percentUsed)
+  const { isCritical, isWarning } = getUsageState(percentUsed, isBlocked)
+  const filledColor = getFilledPillColor(isCritical, isWarning)
 
   return Array.from({ length: USAGE_PILL_COUNT }, (_, index) => {
     const filled = index < filledCount
     return {
       filled,
-      color: getPillColor(filled, atLimit),
+      color: filled ? filledColor : USAGE_PILL_COLORS.UNFILLED,
       index,
     }
   })
diff --git a/apps/sim/lib/core/utils/theme.ts b/apps/sim/lib/core/utils/theme.ts
index 2102a3f7c0..3849a9e59a 100644
--- a/apps/sim/lib/core/utils/theme.ts
+++ b/apps/sim/lib/core/utils/theme.ts
@@ -5,21 +5,17 @@
 /**
  * Updates the theme in next-themes by dispatching a storage event.
  * This works by updating localStorage and notifying next-themes of the change.
- * NOTE: Light mode is temporarily disabled - this function always forces dark mode.
- * @param _theme - The theme parameter (currently ignored, dark mode is forced)
+ * @param theme - The desired theme ('system', 'light', or 'dark')
  */
-export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') {
+export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
   if (typeof window === 'undefined') return
 
-  // Force dark mode - light mode is temporarily disabled
-  const forcedTheme = 'dark'
-
-  localStorage.setItem('sim-theme', forcedTheme)
+  localStorage.setItem('sim-theme', theme)
 
   window.dispatchEvent(
     new StorageEvent('storage', {
       key: 'sim-theme',
-      newValue: forcedTheme,
+      newValue: theme,
       oldValue: localStorage.getItem('sim-theme'),
       storageArea: localStorage,
       url: window.location.href,
@@ -28,7 +24,13 @@ export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') {
 
   const root = document.documentElement
   root.classList.remove('light', 'dark')
-  root.classList.add('dark')
+
+  if (theme === 'system') {
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    root.classList.add(systemTheme)
+  } else {
+    root.classList.add(theme)
+  }
 }
 
 /**
diff --git a/apps/sim/stores/panel/editor/store.ts b/apps/sim/stores/panel/editor/store.ts
index 75d6098c21..d03e91f5de 100644
--- a/apps/sim/stores/panel/editor/store.ts
+++ b/apps/sim/stores/panel/editor/store.ts
@@ -7,7 +7,7 @@ import { usePanelStore } from '../store'
 /**
  * Connections height constraints
  */
-const DEFAULT_CONNECTIONS_HEIGHT = 115
+const DEFAULT_CONNECTIONS_HEIGHT = 172
 const MIN_CONNECTIONS_HEIGHT = 30
 const MAX_CONNECTIONS_HEIGHT = 300
 
diff --git a/apps/sim/stores/panel/store.ts b/apps/sim/stores/panel/store.ts
index cc29a86d15..8e3571f7e3 100644
--- a/apps/sim/stores/panel/store.ts
+++ b/apps/sim/stores/panel/store.ts
@@ -6,7 +6,7 @@ import type { PanelState, PanelTab } from '@/stores/panel/types'
  * Panel width constraints
  * Note: Maximum width is enforced dynamically at 40% of viewport width in the resize hook
  */
-const MIN_PANEL_WIDTH = 244
+const MIN_PANEL_WIDTH = 260
 
 /**
  * Default panel tab