From 9624590b33fe395390e6916c3f9d7c1d3a26da6f Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 18 Nov 2025 19:40:32 -0800
Subject: [PATCH 01/17] feat: aligned current unassigned hex to old globals

---
 .../components/icons/document-icons.tsx          |  2 +-
 .../components/dashboard/workflow-details.tsx    |  6 +++---
 .../app/workspace/[workspaceId]/logs/logs.tsx    |  4 ++--
 .../templates/components/template-card.tsx       | 16 ++++++++++++----
 .../components/thinking-block.tsx                |  2 +-
 .../inline-tool-call/inline-tool-call.tsx        |  2 +-
 .../components/mention-menu/mention-menu.tsx     |  8 ++++++--
 .../connection-blocks/connection-blocks.tsx      |  2 +-
 .../components/subflow-editor/subflow-editor.tsx |  2 +-
 .../panel/components/editor/editor.tsx           |  2 +-
 .../toolbar/components/drag-preview.ts           |  2 +-
 .../components/subflows/subflow-node.tsx         |  2 +-
 .../components/terminal/terminal.tsx             | 10 +++++++---
 .../components/workflow-block/workflow-block.tsx | 10 +++++-----
 .../w/[workflowId]/utils/block-ring-utils.ts     |  2 +-
 .../[workspaceId]/w/[workflowId]/workflow.tsx    |  2 +-
 .../components/shared/usage-header.tsx           | 16 +++++++++++-----
 .../team-seats-overview/team-seats-overview.tsx  |  8 ++++----
 .../components/team-usage/team-usage.tsx         |  2 +-
 .../workflow-preview/workflow-preview.tsx        |  2 +-
 20 files changed, 62 insertions(+), 40 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
index dbbfe9840b2..161dff21928 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/icons/document-icons.tsx
@@ -125,7 +125,7 @@ export const TxtIcon: React.FC<IconProps> = ({ className = 'w-6 h-6' }) => (
     <path d='M14 2V8H20' fill='#9E9E9E' />
     <path
       d='M14 2L20 8V20C20 21.1 19.1 22 18 22H6C4.9 22 4 21.1 4 20V4C4 2.9 4.9 2 6 2H14Z'
-      stroke='#424242'
+      stroke='var(--border-muted)'
       strokeWidth='0.5'
       strokeLinecap='round'
       strokeLinejoin='round'
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
index 1904f5d92be..5bfc9b765be 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/workflow-details.tsx
@@ -287,7 +287,7 @@ export function WorkflowDetails({
                   <LineChart
                     data={details.errorRates}
                     label='Error Rate'
-                    color='#ef4444'
+                    color='var(--text-error)'
                     unit='%'
                   />
                   {hasDuration && (
@@ -467,12 +467,12 @@ export function WorkflowDetails({
                                   <div
                                     className='h-[6px] w-[6px] rounded-[2px]'
                                     style={{
-                                      backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                      backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                     }}
                                   />
                                   <span
                                     className='font-medium text-[11.5px]'
-                                    style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                    style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                   >
                                     {statusLabel}
                                   </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index b8ef9d1a80e..c35afcdc836 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -483,12 +483,12 @@ export default function Logs() {
                                 <div
                                   className='h-[6px] w-[6px] rounded-[2px]'
                                   style={{
-                                    backgroundColor: isError ? '#EF4444' : '#B7B7B7',
+                                    backgroundColor: isError ? 'var(--text-error)' : '#B7B7B7',
                                   }}
                                 />
                                 <span
                                   className='font-medium text-[11.5px]'
-                                  style={{ color: isError ? '#EF4444' : '#B7B7B7' }}
+                                  style={{ color: isError ? 'var(--text-error)' : '#B7B7B7' }}
                                 >
                                   {statusLabel}
                                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
index 1e15ddcfa88..48f3fd3c04a 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -27,7 +27,12 @@ interface TemplateCardProps {
 
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('h-[268px] w-full rounded-[8px] bg-[#202020] p-[8px]', className)}>
+    <div
+      className={cn(
+        'h-[268px] w-full rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
+    >
       <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-gray-700' />
 
       <div className='mt-[14px] flex items-center justify-between'>
@@ -196,7 +201,10 @@ function TemplateCardInner({
   return (
     <div
       onClick={handleCardClick}
-      className={cn('w-full cursor-pointer rounded-[8px] bg-[#202020] p-[8px]', className)}
+      className={cn(
+        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-elevated)] p-[8px]',
+        className
+      )}
     >
       <div
         ref={previewRef}
@@ -242,7 +250,7 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[#4A4A4A]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-14)]'
                 style={{ marginLeft: '-4px' }}
               >
                 <span className='font-medium text-[10px] text-white'>+{blockTypes.length - 3}</span>
@@ -277,7 +285,7 @@ function TemplateCardInner({
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
             </div>
           ) : (
-            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[#4A4A4A]'>
+            <div className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-full bg-[var(--surface-14)]'>
               <User className='h-[12px] w-[12px] text-[#888888]' />
             </div>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/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 508cf399167..92bc338c8b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block.tsx
@@ -37,7 +37,7 @@ function ShimmerOverlayText({ label, value, active = false }: ShimmerOverlayText
   return (
     <span className='relative inline-block'>
       <span style={{ color: '#B8B8B8' }}>{label}</span>
-      <span style={{ color: '#787878' }}>{value}</span>
+      <span style={{ color: 'var(--text-muted)' }}>{value}</span>
       {active ? (
         <span
           aria-hidden='true'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
index c43ae69edce..1b939526a49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
@@ -188,7 +188,7 @@ function ShimmerOverlayText({
       {actionVerb ? (
         <>
           <span style={{ color: '#B8B8B8' }}>{actionVerb}</span>
-          <span style={{ color: '#787878' }}>{remainder}</span>
+          <span style={{ color: 'var(--text-muted)' }}>{remainder}</span>
         </>
       ) : (
         <span>{text}</span>
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 341c670dbfc..5d2d3e145e5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
@@ -552,11 +552,15 @@ export function MentionMenu({
                         active={index === submenuActiveIndex}
                       >
                         <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+                          ·
+                        </span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(log.createdAt)}
                         </span>
-                        <span className='text-[#AEAEAE] text-[10px] dark:text-[#AEAEAE]'>·</span>
+                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+                          ·
+                        </span>
                         <span className='text-[10px] capitalize'>
                           {(log.trigger || 'manual').toLowerCase()}
                         </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/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 1205a02c85e..94b2d93ed60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -25,7 +25,7 @@ interface ConnectionBlocksProps {
 }
 
 const TREE_STYLES = {
-  LINE_COLOR: '#2C2C2C',
+  LINE_COLOR: 'var(--border)',
   LINE_OFFSET: 4,
 } as const
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index 73aa68867cd..b2ee3900a37 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -89,7 +89,7 @@ export function SubflowEditor({
               className='h-[1.25px]'
               style={{
                 backgroundImage:
-                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
               }}
             />
           </div>
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 d04231859bb..2ddb9c4d43e 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
@@ -363,7 +363,7 @@ export function Editor() {
                               className='h-[1.25px]'
                               style={{
                                 backgroundImage:
-                                  'repeating-linear-gradient(to right, #2C2C2C 0px, #2C2C2C 6px, transparent 6px, transparent 12px)',
+                                  'repeating-linear-gradient(to right, var(--border) 0px, var(--border) 6px, transparent 6px, transparent 12px)',
                               }}
                             />
                           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
index e09e765b461..1ea9bf4e86a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/components/drag-preview.ts
@@ -18,7 +18,7 @@ export function createDragPreview(info: DragItemInfo): HTMLElement {
   const preview = document.createElement('div')
   preview.style.cssText = `
     width: 250px;
-    background: #232323;
+    background: var(--surface-1);
     border-radius: 8px;
     padding: 8px 9px;
     display: flex;
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 3df3d38a364..b2ab645ffe5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -25,7 +25,7 @@ const SubflowNodeStyles: React.FC = () => {
       /* Drag-over states */
       .loop-node-drag-over,
       .parallel-node-drag-over {
-        box-shadow: 0 0 0 1.75px #33B4FF !important;
+        box-shadow: 0 0 0 1.75px var(--brand-secondary) !important;
         border-radius: 8px !important;
       }
 
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 0a11ad7b1a1..81e4b38da97 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
@@ -827,7 +827,7 @@ export function Terminal() {
                         >
                           <div
                             className='h-[6px] w-[6px] rounded-[2px]'
-                            style={{ backgroundColor: '#EF4444' }}
+                            style={{ backgroundColor: 'var(--text-error)' }}
                           />
                           <span className='flex-1'>Error</span>
                           {filters.statuses.has('error') && <Check className='h-3 w-3' />}
@@ -1086,12 +1086,16 @@ export function Terminal() {
                             <div
                               className='h-[6px] w-[6px] rounded-[2px]'
                               style={{
-                                backgroundColor: statusInfo.isError ? '#EF4444' : '#B7B7B7',
+                                backgroundColor: statusInfo.isError
+                                  ? 'var(--text-error)'
+                                  : '#B7B7B7',
                               }}
                             />
                             <span
                               className='font-medium text-[11.5px]'
-                              style={{ color: statusInfo.isError ? '#EF4444' : '#B7B7B7' }}
+                              style={{
+                                color: statusInfo.isError ? 'var(--text-error)' : '#B7B7B7',
+                              }}
                             >
                               {statusInfo.label}
                             </span>
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 1d7eb9963da..afabba5bdfb 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
@@ -874,8 +874,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                       variant='outline'
                       className='cursor-pointer'
                       style={{
-                        borderColor: !childIsDeployed ? '#EF4444' : '#FF6600',
-                        color: !childIsDeployed ? '#EF4444' : '#FF6600',
+                        borderColor: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
+                        color: !childIsDeployed ? 'var(--text-error)' : 'var(--warning)',
                       }}
                       onClick={(e) => {
                         e.stopPropagation()
@@ -903,8 +903,8 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                     variant='outline'
                     className='cursor-pointer'
                     style={{
-                      borderColor: '#FF6600',
-                      color: '#FF6600',
+                      borderColor: 'var(--warning)',
+                      color: 'var(--warning)',
                     }}
                     onClick={(e) => {
                       e.stopPropagation()
@@ -957,7 +957,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
                   <Badge
                     variant='outline'
                     className='cursor-pointer'
-                    style={{ borderColor: '#FF6600', color: '#FF6600' }}
+                    style={{ borderColor: 'var(--warning)', color: 'var(--warning)' }}
                     onClick={(e) => {
                       e.stopPropagation()
                       reactivateWebhook(webhookId)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
index 8b6cc5f1f44..1b532c694fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/utils/block-ring-utils.ts
@@ -49,7 +49,7 @@ export function getBlockRingStyles(options: BlockRingOptions): {
       !isFocused &&
       !isDeletedBlock &&
       diffStatus === 'new' &&
-      'ring-[#22C55E]',
+      'ring-[var(--brand-tertiary)]',
     !isActive &&
       !isPending &&
       !isFocused &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
index 13fc26e11e9..ca2d8a1d656 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -308,7 +308,7 @@ const WorkflowContent = React.memo(() => {
    */
   const connectionLineStyle = useMemo(() => {
     return {
-      stroke: isErrorConnectionDrag ? '#EF4444' : '#434343',
+      stroke: isErrorConnectionDrag ? 'var(--text-error)' : 'var(--surface-12)',
       strokeWidth: 2,
     }
   }, [isErrorConnectionDrag])
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
index 062a978fbdb..371395d6c4d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/shared/usage-header.tsx
@@ -74,15 +74,17 @@ export function UsageHeader({
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
             {isBlocked ? (
-              <span className='font-medium text-[#B1B1B1] text-[12px]'>Payment required</span>
+              <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                Payment required
+              </span>
             ) : (
               <>
-                <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                   ${current.toFixed(2)}
                 </span>
-                <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
+                <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
                 {rightContent ?? (
-                  <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+                  <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
                     ${limit}
                   </span>
                 )}
@@ -100,7 +102,11 @@ export function UsageHeader({
                 key={i}
                 className='h-[6px] flex-1 rounded-[2px]'
                 style={{
-                  backgroundColor: isFilled ? (isAlmostOut ? '#ef4444' : '#34B5FF') : '#414141',
+                  backgroundColor: isFilled
+                    ? isAlmostOut
+                      ? 'var(--text-error)'
+                      : '#34B5FF'
+                    : '#414141',
                 }}
               />
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 7240f9797ad..8756dc5b1bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -109,11 +109,11 @@ export function TeamSeatsOverview({
             )}
           </div>
           <div className='flex items-center gap-[4px] text-xs tabular-nums'>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
-            <span className='font-medium text-[#B1B1B1] text-[12px]'>/</span>
-            <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)]'>/</span>
+            <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
               {totalSeats} total
             </span>
           </div>
@@ -128,7 +128,7 @@ export function TeamSeatsOverview({
                 key={i}
                 className={cn(
                   'h-[6px] flex-1 rounded-full transition-colors',
-                  isFilled ? 'bg-[#34B5FF]' : 'bg-[#2C2C2C]'
+                  isFilled ? 'bg-[#34B5FF]' : 'bg-[var(--border)]'
                 )}
               />
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
index 8db05bf9e20..e9abb0593f9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
@@ -126,7 +126,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
             organizationId={activeOrg.id}
           />
         ) : (
-          <span className='font-medium text-[#B1B1B1] text-[12px] tabular-nums'>
+          <span className='font-medium text-[12px] text-[var(--text-secondary)] tabular-nums'>
             ${currentCap.toFixed(0)}
           </span>
         )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
index 32b605f440f..951fe15b693 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
@@ -329,7 +329,7 @@ export function WorkflowPreview({
 
   return (
     <ReactFlowProvider>
-      <div style={{ height, width, backgroundColor: '#1B1B1B' }} className={cn('preview-mode')}>
+      <div style={{ height, width, backgroundColor: 'var(--bg)' }} className={cn('preview-mode')}>
         <ReactFlow
           nodes={nodes}
           edges={edges}

From 412ef377a736ac0860d731af8413be7df6f7f846 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Fri, 21 Nov 2025 18:00:05 -0800
Subject: [PATCH 02/17] feat: emcn modal, help-modal; improvement(ui): emcn
 textarea, emcn combobox, messages-input

---
 .../messages-input/messages-input.tsx         |  11 +-
 .../components-new/help-modal/help-modal.tsx  | 358 +++++++-----------
 .../emcn/components/combobox/combobox.tsx     |  71 ++--
 .../emcn/components/modal-new/modal.tsx       | 329 ++++++++++++++++
 .../emcn/components/textarea/textarea.tsx     |   2 +-
 5 files changed, 516 insertions(+), 255 deletions(-)
 create mode 100644 apps/sim/components/emcn/components/modal-new/modal.tsx

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 33a4d64cb0b..4d130188071 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -12,6 +12,7 @@ import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/
 import type { SubBlockConfig } from '@/blocks/types'
 
 const MIN_TEXTAREA_HEIGHT_PX = 80
+const MAX_TEXTAREA_HEIGHT_PX = 320
 
 /**
  * Interface for individual message in the messages array
@@ -236,10 +237,12 @@ export function MessagesInput({
       return
     }
 
-    // Auto-resize to fit content only when user hasn't manually resized.
     textarea.style.height = 'auto'
     const naturalHeight = textarea.scrollHeight || MIN_TEXTAREA_HEIGHT_PX
-    const nextHeight = Math.max(MIN_TEXTAREA_HEIGHT_PX, naturalHeight)
+    const nextHeight = Math.min(
+      MAX_TEXTAREA_HEIGHT_PX,
+      Math.max(MIN_TEXTAREA_HEIGHT_PX, naturalHeight)
+    )
     textarea.style.height = `${nextHeight}px`
 
     if (overlay) {
@@ -453,7 +456,7 @@ export function MessagesInput({
                     ref={(el) => {
                       textareaRefs.current[fieldId] = el
                     }}
-                    className='allow-scroll box-border min-h-[80px] w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-[inherit] font-medium text-sm text-transparent leading-[inherit] caret-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed'
+                    className='allow-scroll box-border min-h-[80px] w-full resize-none whitespace-pre-wrap break-words border-none bg-transparent px-[8px] pt-[8px] font-[inherit] font-medium text-sm text-transparent leading-[inherit] caret-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed'
                     rows={3}
                     placeholder='Enter message content...'
                     value={message.content}
@@ -496,7 +499,7 @@ export function MessagesInput({
                     ref={(el) => {
                       overlayRefs.current[fieldId] = el
                     }}
-                    className='pointer-events-none absolute top-0 left-0 box-border w-full overflow-auto whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-[inherit] font-medium text-[var(--text-primary)] text-sm leading-[inherit]'
+                    className='scrollbar-none pointer-events-none absolute top-0 left-0 box-border w-full overflow-auto whitespace-pre-wrap break-words border-none bg-transparent px-[8px] pt-[8px] font-[inherit] font-medium text-[var(--text-primary)] text-sm leading-[inherit]'
                   >
                     {formatDisplayText(message.content, {
                       accessiblePrefixes,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
index e29dcc4022a..fc745796fa7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
@@ -7,15 +7,14 @@ import { Loader2, X } from 'lucide-react'
 import Image from 'next/image'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
+import { Button, Combobox, Input, Textarea } from '@/components/emcn'
 import {
-  Button,
-  Combobox,
-  Input,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalTitle,
-  Textarea,
-} from '@/components/emcn'
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -60,13 +59,10 @@ interface HelpModalProps {
 export function HelpModal({ open, onOpenChange }: HelpModalProps) {
   const fileInputRef = useRef<HTMLInputElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const dropZoneRef = useRef<HTMLDivElement>(null)
 
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [submitStatus, setSubmitStatus] = useState<'success' | 'error' | null>(null)
-  const [errorMessage, setErrorMessage] = useState('')
   const [images, setImages] = useState<ImageWithPreview[]>([])
-  const [imageError, setImageError] = useState<string | null>(null)
   const [isProcessing, setIsProcessing] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
 
@@ -93,8 +89,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
   useEffect(() => {
     if (open) {
       setSubmitStatus(null)
-      setErrorMessage('')
-      setImageError(null)
       setImages([])
       setIsDragging(false)
       setIsProcessing(false)
@@ -262,8 +256,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
    */
   const processFiles = useCallback(
     async (files: FileList | File[]) => {
-      setImageError(null)
-
       if (!files || files.length === 0) return
 
       setIsProcessing(true)
@@ -275,16 +267,12 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         for (const file of Array.from(files)) {
           // Validate file size
           if (file.size > MAX_FILE_SIZE) {
-            setImageError(`File ${file.name} is too large. Maximum size is 20MB.`)
             hasError = true
             continue
           }
 
           // Validate file type
           if (!ACCEPTED_IMAGE_TYPES.includes(file.type)) {
-            setImageError(
-              `File ${file.name} has an unsupported format. Please use JPEG, PNG, WebP, or GIF.`
-            )
             hasError = true
             continue
           }
@@ -303,7 +291,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         }
       } catch (error) {
         logger.error('Error processing images:', { error })
-        setImageError('An error occurred while processing images. Please try again.')
       } finally {
         setIsProcessing(false)
 
@@ -378,7 +365,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
     async (data: FormValues) => {
       setIsSubmitting(true)
       setSubmitStatus(null)
-      setErrorMessage('')
 
       try {
         // Prepare form data with images
@@ -413,7 +399,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
       } catch (error) {
         logger.error('Error submitting help request:', { error })
         setSubmitStatus('error')
-        setErrorMessage(error instanceof Error ? error.message : 'An unknown error occurred')
       } finally {
         setIsSubmitting(false)
       }
@@ -430,213 +415,156 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
 
   return (
     <Modal open={open} onOpenChange={onOpenChange}>
-      <ModalContent className='flex h-[75vh] max-h-[75vh] w-full max-w-[700px] flex-col gap-0 p-0'>
-        {/* Modal Header */}
-        <div className='flex-shrink-0 px-6 py-5'>
-          <ModalTitle className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Help & Support
-          </ModalTitle>
-        </div>
-
-        {/* Modal Body */}
-        <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
-          <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-            {/* Scrollable Form Content */}
-            <div
-              ref={scrollContainerRef}
-              className='scrollbar-hide min-h-0 flex-1 overflow-y-auto pb-20'
-            >
-              <div className='px-6'>
-                <div className='space-y-[12px]'>
-                  {/* Request Type Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='type'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Request
-                    </Label>
-                    <Combobox
-                      id='type'
-                      options={REQUEST_TYPE_OPTIONS}
-                      value={watch('type') || DEFAULT_REQUEST_TYPE}
-                      selectedValue={watch('type') || DEFAULT_REQUEST_TYPE}
-                      onChange={(value) => setValue('type', value as FormValues['type'])}
-                      placeholder='Select a request type'
-                      editable={false}
-                      filterOptions={false}
-                      className={cn(
-                        errors.type && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.type && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.type.message}
-                      </p>
+      <ModalContent>
+        <ModalHeader>Help &amp; Support</ModalHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
+          <ModalBody>
+            <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+              <div className='space-y-[12px]'>
+                <div>
+                  <Label
+                    htmlFor='type'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  >
+                    Request
+                  </Label>
+                  <Combobox
+                    id='type'
+                    options={REQUEST_TYPE_OPTIONS}
+                    value={watch('type') || DEFAULT_REQUEST_TYPE}
+                    selectedValue={watch('type') || DEFAULT_REQUEST_TYPE}
+                    onChange={(value) => setValue('type', value as FormValues['type'])}
+                    placeholder='Select a request type'
+                    editable={false}
+                    filterOptions={false}
+                    className={cn(
+                      errors.type && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
                     )}
-                  </div>
+                  />
+                </div>
 
-                  {/* Subject Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='subject'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Subject
-                    </Label>
-                    <Input
-                      id='subject'
-                      placeholder='Brief description of your request'
-                      {...register('subject')}
-                      className={cn(
-                        'h-9 rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] text-[13px] dark:bg-[var(--surface-9)]',
-                        errors.subject &&
-                          'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.subject && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.subject.message}
-                      </p>
+                <div>
+                  <Label
+                    htmlFor='subject'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  >
+                    Subject
+                  </Label>
+                  <Input
+                    id='subject'
+                    placeholder='Brief description of your request'
+                    {...register('subject')}
+                    className={cn(
+                      errors.subject && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
                     )}
-                  </div>
+                  />
+                </div>
 
-                  {/* Message Field */}
-                  <div className='space-y-[8px]'>
-                    <Label
-                      htmlFor='message'
-                      className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                    >
-                      Message
-                    </Label>
-                    <Textarea
-                      id='message'
-                      placeholder='Please provide details about your request...'
-                      rows={6}
-                      {...register('message')}
-                      className={cn(
-                        'rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] text-[13px] dark:bg-[var(--surface-9)]',
-                        errors.message &&
-                          'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                      )}
-                    />
-                    {errors.message && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {errors.message.message}
-                      </p>
+                <div>
+                  <Label
+                    htmlFor='message'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  >
+                    Message
+                  </Label>
+                  <Textarea
+                    id='message'
+                    placeholder='Please provide details about your request...'
+                    rows={6}
+                    {...register('message')}
+                    className={cn(
+                      errors.message && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
                     )}
-                  </div>
+                  />
+                </div>
 
-                  {/* Image Upload Section */}
-                  <div className='space-y-[8px]'>
-                    <Label className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                      Attach Images (Optional)
-                    </Label>
-                    <div
-                      ref={dropZoneRef}
-                      onDragEnter={handleDragEnter}
-                      onDragOver={handleDragOver}
-                      onDragLeave={handleDragLeave}
-                      onDrop={handleDrop}
-                      className={cn(
-                        'cursor-pointer rounded-[4px] border-[1.5px] border-[var(--surface-11)] border-dashed bg-[var(--surface-3)] p-6 text-center transition-colors hover:bg-[var(--surface-5)] dark:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-5)]',
-                        isDragging &&
-                          'border-[var(--brand-primary-hex)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-                      )}
-                      onClick={() => fileInputRef.current?.click()}
-                    >
-                      <input
-                        ref={fileInputRef}
-                        type='file'
-                        accept={ACCEPTED_IMAGE_TYPES.join(',')}
-                        onChange={handleFileChange}
-                        className='hidden'
-                        multiple
-                      />
-                      <p className='text-[13px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                        {isDragging ? 'Drop images here!' : 'Drop images here or click to browse'}
-                      </p>
-                      <p className='mt-[4px] text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        JPEG, PNG, WebP, GIF (max 20MB each)
-                      </p>
-                    </div>
-                    {imageError && (
-                      <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                        {imageError}
-                      </p>
+                <div>
+                  <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                    Attach Images (Optional)
+                  </Label>
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={() => fileInputRef.current?.click()}
+                    onDragEnter={handleDragEnter}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    className={cn(
+                      'w-full justify-center border border-[var(--c-575757)] border-dashed',
+                      {
+                        'border-[var(--brand-primary-hex)]': isDragging,
+                      }
                     )}
-                    {isProcessing && (
-                      <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                        <Loader2 className='h-4 w-4 animate-spin' />
-                        <p className='text-[12px]'>Processing images...</p>
-                      </div>
-                    )}
-                  </div>
-
-                  {/* Image Preview Grid */}
-                  {images.length > 0 && (
-                    <div className='space-y-[8px]'>
-                      <Label className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                        Uploaded Images
-                      </Label>
-                      <div className='grid grid-cols-2 gap-3'>
-                        {images.map((image, index) => (
-                          <div
-                            key={index}
-                            className='group relative overflow-hidden rounded-[4px] border border-[var(--surface-11)]'
-                          >
-                            <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center bg-[var(--surface-2)]'>
-                              <Image
-                                src={image.preview}
-                                alt={`Preview ${index + 1}`}
-                                fill
-                                className='object-contain'
-                              />
-                              <button
-                                type='button'
-                                className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
-                                onClick={() => removeImage(index)}
-                              >
-                                <X className='h-5 w-5 text-white' />
-                              </button>
-                            </div>
-                            <div className='truncate bg-[var(--surface-5)] p-1.5 text-[12px] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'>
-                              {image.name}
-                            </div>
-                          </div>
-                        ))}
-                      </div>
+                  >
+                    <input
+                      ref={fileInputRef}
+                      type='file'
+                      accept={ACCEPTED_IMAGE_TYPES.join(',')}
+                      onChange={handleFileChange}
+                      className='hidden'
+                      multiple
+                    />
+                    <div className='flex flex-col text-center'>
+                      <span className='text-[var(--text-primary)]'>
+                        {isDragging ? 'Drop images here' : 'Drop images here or click to browse'}
+                      </span>
+                      <span className='text-[11px]'>PNG, JPEG, WebP, GIF (max 20MB each)</span>
                     </div>
-                  )}
+                  </Button>
                 </div>
-              </div>
-            </div>
 
-            {/* Fixed Footer with Actions */}
-            <div className='absolute inset-x-0 bottom-0 bg-[var(--surface-1)] dark:bg-[var(--surface-1)]'>
-              <div className='flex w-full items-center justify-between gap-[8px] px-6 py-4'>
-                <Button
-                  variant='default'
-                  onClick={handleClose}
-                  type='button'
-                  disabled={isSubmitting}
-                >
-                  Cancel
-                </Button>
-                <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
-                  {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
-                  {isSubmitting
-                    ? 'Submitting...'
-                    : submitStatus === 'error'
-                      ? 'Error'
-                      : submitStatus === 'success'
-                        ? 'Success'
-                        : 'Submit'}
-                </Button>
+                {images.length > 0 && (
+                  <div className='space-y-2'>
+                    <Label>Uploaded Images</Label>
+                    <div className='grid grid-cols-2 gap-3'>
+                      {images.map((image, index) => (
+                        <div
+                          className='group relative overflow-hidden rounded-[4px] border'
+                          key={index}
+                        >
+                          <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
+                            <Image
+                              src={image.preview}
+                              alt={`Preview ${index + 1}`}
+                              fill
+                              className='object-contain'
+                            />
+                            <button
+                              type='button'
+                              className='absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 transition-opacity group-hover:opacity-100'
+                              onClick={() => removeImage(index)}
+                            >
+                              <X className='h-[18px] w-[18px] text-white' />
+                            </button>
+                          </div>
+                          <div className='truncate p-[6px] text-[12px]'>{image.name}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
               </div>
             </div>
-          </form>
-        </div>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button variant='default' onClick={handleClose} type='button' disabled={isSubmitting}>
+              Cancel
+            </Button>
+            <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
+              {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
+              {isSubmitting
+                ? 'Submitting...'
+                : submitStatus === 'error'
+                  ? 'Error'
+                  : submitStatus === 'success'
+                    ? 'Success'
+                    : 'Submit'}
+            </Button>
+          </ModalFooter>
+        </form>
       </ModalContent>
     </Modal>
   )
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index e44d0c5ddb5..64b05731b2d 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -13,7 +13,7 @@ import {
   useState,
 } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
-import { Check, ChevronDown, Loader2 } from 'lucide-react'
+import { ChevronDown, Loader2 } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 import { Input } from '../input/input'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
@@ -432,7 +432,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
             side='bottom'
             align='start'
             sideOffset={4}
-            className='w-[var(--radix-popover-trigger-width)] rounded-[4px] p-0'
+            className='w-[var(--radix-popover-trigger-width)] rounded-[6px] border border-[var(--surface-11)] p-0'
             onOpenAutoFocus={(e) => {
               e.preventDefault()
             }}
@@ -483,39 +483,40 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                     {editable && value ? 'No matching options found' : 'No options available'}
                   </div>
                 ) : (
-                  filteredOptions.map((option, index) => {
-                    const isSelected = multiSelect
-                      ? multiSelectValues?.includes(option.value)
-                      : effectiveSelectedValue === option.value
-                    const isHighlighted = index === highlightedIndex
-                    const OptionIcon = option.icon
-
-                    return (
-                      <div
-                        key={option.value}
-                        role='option'
-                        aria-selected={isSelected}
-                        data-option-index={index}
-                        onMouseDown={(e) => {
-                          e.preventDefault()
-                          e.stopPropagation()
-                          handleSelect(option.value)
-                        }}
-                        onMouseEnter={() => setHighlightedIndex(index)}
-                        className={cn(
-                          'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] py-[6px] font-medium font-sans text-sm',
-                          isHighlighted && 'bg-[var(--surface-11)]',
-                          !isHighlighted && 'hover:bg-[var(--surface-11)]'
-                        )}
-                      >
-                        {OptionIcon && <OptionIcon className='mr-[8px] h-3 w-3 opacity-60' />}
-                        <span className='flex-1 truncate text-[var(--text-primary)]'>
-                          {option.label}
-                        </span>
-                        {isSelected && <Check className='ml-[8px] h-4 w-4 flex-shrink-0' />}
-                      </div>
-                    )
-                  })
+                  <div className='space-y-[2px]'>
+                    {filteredOptions.map((option, index) => {
+                      const isSelected = multiSelect
+                        ? multiSelectValues?.includes(option.value)
+                        : effectiveSelectedValue === option.value
+                      const isHighlighted = index === highlightedIndex
+                      const OptionIcon = option.icon
+
+                      return (
+                        <div
+                          key={option.value}
+                          role='option'
+                          aria-selected={isSelected}
+                          data-option-index={index}
+                          onMouseDown={(e) => {
+                            e.preventDefault()
+                            e.stopPropagation()
+                            handleSelect(option.value)
+                          }}
+                          onMouseEnter={() => setHighlightedIndex(index)}
+                          className={cn(
+                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] py-[6px] font-medium font-sans text-sm',
+                            'hover:bg-[var(--surface-11)]',
+                            (isHighlighted || isSelected) && 'bg-[var(--surface-11)]'
+                          )}
+                        >
+                          {OptionIcon && <OptionIcon className='mr-[8px] h-3 w-3 opacity-60' />}
+                          <span className='flex-1 truncate text-[var(--text-primary)]'>
+                            {option.label}
+                          </span>
+                        </div>
+                      )
+                    })}
+                  </div>
                 )}
               </div>
             </PopoverScrollArea>
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
new file mode 100644
index 00000000000..32e2e75242a
--- /dev/null
+++ b/apps/sim/components/emcn/components/modal-new/modal.tsx
@@ -0,0 +1,329 @@
+/**
+ * Compositional modal component with optional sidebar and tabs.
+ * Uses Radix UI Dialog and Tabs primitives for accessibility.
+ *
+ * @example
+ * ```tsx
+ * // Base modal
+ * <Modal>
+ *   <ModalTrigger>Open</ModalTrigger>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>Title</ModalTitle>
+ *     </ModalHeader>
+ *   </ModalContent>
+ * </Modal>
+ *
+ * // Modal with sidebar and tabs
+ * <Modal>
+ *   <ModalContent>
+ *     <ModalSidebar>Sidebar content</ModalSidebar>
+ *     <ModalHeader>
+ *       <ModalTitle>Title</ModalTitle>
+ *     </ModalHeader>
+ *     <ModalTabs defaultValue="tab1">
+ *       <ModalTabsList>
+ *         <ModalTabsTrigger value="tab1">Tab 1</ModalTabsTrigger>
+ *         <ModalTabsTrigger value="tab2">Tab 2</ModalTabsTrigger>
+ *       </ModalTabsList>
+ *       <ModalTabsContent value="tab1">Content 1</ModalTabsContent>
+ *       <ModalTabsContent value="tab2">Content 2</ModalTabsContent>
+ *     </ModalTabs>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ */
+
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '../button/button'
+
+/**
+ * Root modal component. Manages open state.
+ */
+const Modal = DialogPrimitive.Root
+
+/**
+ * Trigger element that opens the modal when clicked.
+ */
+const ModalTrigger = DialogPrimitive.Trigger
+
+/**
+ * Portal component for rendering modal outside DOM hierarchy.
+ */
+const ModalPortal = DialogPrimitive.Portal
+
+/**
+ * Close element that closes the modal when clicked.
+ */
+const ModalClose = DialogPrimitive.Close
+
+/**
+ * Modal overlay component with stability handling.
+ */
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => {
+  const [isStable, setIsStable] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsStable(true), 150)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn('fixed inset-0 z-50', className)}
+      style={style}
+      onPointerDown={(e) => {
+        if (!isStable) {
+          e.preventDefault()
+          return
+        }
+        if (e.target !== e.currentTarget) {
+          e.preventDefault()
+        }
+      }}
+      {...props}
+    />
+  )
+})
+
+ModalOverlay.displayName = 'ModalOverlay'
+
+export interface ModalContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * Whether to show the close button
+   * @default true
+   */
+  showClose?: boolean
+}
+
+/**
+ * Modal content component with overlay and styled container.
+ * Main container that can hold sidebar, header, tabs, and footer.
+ */
+const ModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(({ className, children, showClose = true, style, ...props }, ref) => {
+  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsInteractionReady(true), 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          '-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] min-w-[30vw] flex-col rounded-[8px] border bg-[#1E1E1E]',
+          className
+        )}
+        style={style}
+        onInteractOutside={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          const target = e.target as Element
+          if (target.closest('[role="dialog"]')) {
+            e.preventDefault()
+          }
+        }}
+        onEscapeKeyDown={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          e.stopPropagation()
+        }}
+        onPointerDown={(e) => {
+          e.stopPropagation()
+        }}
+        onPointerUp={(e) => {
+          e.stopPropagation()
+        }}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
+
+ModalContent.displayName = 'ModalContent'
+
+/**
+ * Modal sidebar component. Appears on the left side of the modal.
+ */
+const ModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />
+)
+
+ModalSidebar.displayName = 'ModalSidebar'
+
+/**
+ * Modal header component for title and description.
+ */
+const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center justify-between px-[16px] py-[10px]', className)}
+      {...props}
+    >
+      <DialogPrimitive.Title className='font-medium text-[#FFFFFF] text-[16px]'>
+        {children}
+      </DialogPrimitive.Title>
+      <DialogPrimitive.Close asChild>
+        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+          <X className='h-[16px] w-[16px]' />
+          <span className='sr-only'>Close</span>
+        </Button>
+      </DialogPrimitive.Close>
+    </div>
+  )
+)
+
+ModalHeader.displayName = 'ModalHeader'
+
+/**
+ * Modal title component.
+ */
+const ModalTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalTitle.displayName = 'ModalTitle'
+
+/**
+ * Modal description component.
+ */
+const ModalDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalDescription.displayName = 'ModalDescription'
+
+/**
+ * Modal body/content area with background and padding.
+ */
+const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] pt-[10px] pb-[20px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+ModalBody.displayName = 'ModalBody'
+
+/**
+ * Modal tabs root component. Wraps tab list and content panels.
+ */
+const ModalTabs = TabsPrimitive.Root
+
+/**
+ * Modal tabs list component. Container for tab triggers.
+ */
+const ModalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List ref={ref} className={cn('flex', className)} {...props} />
+))
+
+ModalTabsList.displayName = 'ModalTabsList'
+
+/**
+ * Modal tab trigger component. Individual tab button.
+ */
+const ModalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'relative px-0 py-0 text-[12px] text-[var(--text-secondary)]',
+      'after:absolute after:right-0 after:bottom-0 after:left-0 after:h-[8px] after:bg-transparent',
+      'data-[state=active]:text-[#FFFFFF] data-[state=active]:after:bg-[#FFFFFF]',
+      className
+    )}
+    {...props}
+  />
+))
+
+ModalTabsTrigger.displayName = 'ModalTabsTrigger'
+
+/**
+ * Modal tab content component. Content panel for each tab.
+ */
+const ModalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalTabsContent.displayName = 'ModalTabsContent'
+
+/**
+ * Modal footer component for action buttons.
+ */
+const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[#232323] px-[16px] py-[10px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+ModalFooter.displayName = 'ModalFooter'
+
+export {
+  Modal,
+  ModalPortal,
+  ModalOverlay,
+  ModalTrigger,
+  ModalClose,
+  ModalContent,
+  ModalSidebar,
+  ModalHeader,
+  ModalTitle,
+  ModalDescription,
+  ModalBody,
+  ModalTabs,
+  ModalTabsList,
+  ModalTabsTrigger,
+  ModalTabsContent,
+  ModalFooter,
+}
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index 55b969d05d8..79ff958f3fe 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const textareaVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {

From 2b2bb2f3091cbf823517ad172a25e33cf7cd5126 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 22 Nov 2025 15:50:28 -0800
Subject: [PATCH 03/17] improvement(modal): ui, transition

---
 .../panel/components/copilot/copilot.tsx      |  2 +-
 .../emcn/components/modal-new/modal.tsx       | 68 ++++++++++++-------
 2 files changed, 45 insertions(+), 25 deletions(-)

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 96b5404fcdf..01ad2ed548c 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
@@ -460,7 +460,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         {!isInitialized ? (
           <div className='flex h-full w-full items-center justify-center'>
             <div className='flex flex-col items-center gap-3'>
-              <p className='text-muted-foreground text-sm'>Loading chat history...</p>
+              <p className='text-muted-foreground text-sm'>Loading copilot</p>
             </div>
           </div>
         ) : (
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
index 32e2e75242a..201ebf174f2 100644
--- a/apps/sim/components/emcn/components/modal-new/modal.tsx
+++ b/apps/sim/components/emcn/components/modal-new/modal.tsx
@@ -43,6 +43,20 @@ import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '../button/button'
 
+/**
+ * Shared animation classes for modal transitions.
+ * Mirrors the legacy `Modal` component to ensure consistent behavior.
+ */
+const ANIMATION_CLASSES =
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+
+/**
+ * Modal content animation classes.
+ * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
+ */
+const CONTENT_ANIMATION_CLASSES =
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+
 /**
  * Root modal component. Manages open state.
  */
@@ -64,7 +78,7 @@ const ModalPortal = DialogPrimitive.Portal
 const ModalClose = DialogPrimitive.Close
 
 /**
- * Modal overlay component with stability handling.
+ * Modal overlay component with stability handling and fade transition.
  */
 const ModalOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -80,7 +94,11 @@ const ModalOverlay = React.forwardRef<
   return (
     <DialogPrimitive.Overlay
       ref={ref}
-      className={cn('fixed inset-0 z-50', className)}
+      className={cn(
+        'fixed inset-0 z-50 light:bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
+        ANIMATION_CLASSES,
+        className
+      )}
       style={style}
       onPointerDown={(e) => {
         if (!isStable) {
@@ -128,7 +146,9 @@ const ModalContent = React.forwardRef<
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          '-translate-x-1/2 -translate-y-1/2 fixed top-1/2 left-1/2 z-50 flex max-h-[80vh] min-w-[30vw] flex-col rounded-[8px] border bg-[#1E1E1E]',
+          ANIMATION_CLASSES,
+          CONTENT_ANIMATION_CLASSES,
+          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] min-w-[30vw] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={style}
@@ -223,24 +243,6 @@ const ModalDescription = React.forwardRef<
 
 ModalDescription.displayName = 'ModalDescription'
 
-/**
- * Modal body/content area with background and padding.
- */
-const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] pt-[10px] pb-[20px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-
-ModalBody.displayName = 'ModalBody'
-
 /**
  * Modal tabs root component. Wraps tab list and content panels.
  */
@@ -291,6 +293,24 @@ const ModalTabsContent = React.forwardRef<
 
 ModalTabsContent.displayName = 'ModalTabsContent'
 
+/**
+ * Modal body/content area with background and padding.
+ */
+const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] pt-[10px] pb-[20px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+ModalBody.displayName = 'ModalBody'
+
 /**
  * Modal footer component for action buttons.
  */
@@ -311,10 +331,7 @@ ModalFooter.displayName = 'ModalFooter'
 
 export {
   Modal,
-  ModalPortal,
-  ModalOverlay,
   ModalTrigger,
-  ModalClose,
   ModalContent,
   ModalSidebar,
   ModalHeader,
@@ -326,4 +343,7 @@ export {
   ModalTabsTrigger,
   ModalTabsContent,
   ModalFooter,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
 }

From 7c7103f7e71978a59ae859b8b18353e0c67a6693 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 22 Nov 2025 16:55:23 -0800
Subject: [PATCH 04/17] improvement: terminal expand, variables styling;
 refactor(float): hooks

---
 .../w/[workflowId]/components/chat/chat.tsx   | 18 ++++-----
 .../components/chat/hooks/index.ts            |  6 +--
 .../components/identifier-input.tsx           |  2 +-
 .../hooks}/hooks/use-identifier-validation.ts |  0
 .../w/[workflowId]/components/panel/panel.tsx |  5 ---
 .../components/variables/variables.tsx        | 27 +++++++++++---
 .../w/[workflowId]/hooks/index.ts             |  1 +
 .../w/[workflowId]/hooks/use-float/index.ts   |  3 ++
 .../use-float/use-float-boundary-sync.ts}     | 10 ++---
 .../use-float/use-float-drag.ts}              |  6 +--
 .../use-float/use-float-resize.ts}            | 37 +++++++++++++++----
 apps/sim/stores/terminal/console/store.ts     | 11 ++++++
 apps/sim/stores/variables/store.ts            |  6 +--
 13 files changed, 87 insertions(+), 45 deletions(-)
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/{control-bar/components/deploy-modal/components/chat-deploy => panel/components/deploy/hooks}/hooks/use-identifier-validation.ts (100%)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/{components/chat/hooks/use-chat-boundary-sync.ts => hooks/use-float/use-float-boundary-sync.ts} (92%)
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/{components/chat/hooks/use-chat-drag.ts => hooks/use-float/use-float-drag.ts} (92%)
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/{components/chat/hooks/use-chat-resize.ts => hooks/use-float/use-float-resize.ts} (90%)

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 ae4e71ae276..c7713fed862 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -28,13 +28,13 @@ import {
   ChatMessage,
   OutputSelect,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components'
-import {
-  useChatBoundarySync,
-  useChatDrag,
-  useChatFileUpload,
-  useChatResize,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
+import { useChatFileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
 import { useScrollManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float'
 import { useWorkflowExecution } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-workflow-execution'
 import type { BlockLog, ExecutionResult } from '@/executor/types'
 import { getChatPosition, useChatStore } from '@/stores/chat/store'
@@ -312,7 +312,7 @@ export function Chat() {
   )
 
   // Drag hook
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
@@ -320,7 +320,7 @@ export function Chat() {
   })
 
   // Boundary sync hook - keeps chat within bounds when layout changes
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen: isChatOpen,
     position: actualPosition,
     width: chatWidth,
@@ -334,7 +334,7 @@ export function Chat() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width: chatWidth,
     height: chatHeight,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
index dc85c4971b2..a1b7370b851 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/index.ts
@@ -1,5 +1 @@
-export { useChatBoundarySync } from './use-chat-boundary-sync'
-export { useChatDrag } from './use-chat-drag'
-export type { ChatFile } from './use-chat-file-upload'
-export { useChatFileUpload } from './use-chat-file-upload'
-export { useChatResize } from './use-chat-resize'
+export { type ChatFile, useChatFileUpload } from './use-chat-file-upload'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
index d6989bb879a..c5412177723 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { Input, Label } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { getEmailDomain } from '@/lib/core/utils/urls'
-import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation'
+import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation'
 
 interface IdentifierInputProps {
   value: string
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts
similarity index 100%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/control-bar/components/deploy-modal/components/chat-deploy/hooks/use-identifier-validation.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts
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 bee0688e437..f947377bd40 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
@@ -43,7 +43,6 @@ import { useDeleteWorkflow, useImportWorkflow } from '@/app/workspace/[workspace
 import { useChatStore } from '@/stores/chat/store'
 import { usePanelStore } from '@/stores/panel/store'
 import type { PanelTab } from '@/stores/panel/types'
-import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '@/stores/terminal'
 import { useVariablesStore } from '@/stores/variables/store'
 import { useWorkflowJsonStore } from '@/stores/workflows/json/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
@@ -143,10 +142,6 @@ export function Panel() {
       openSubscriptionSettings()
       return
     }
-    const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
-    if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
-    }
     await handleRunWorkflow()
   }, [usageExceeded, handleRunWorkflow])
 
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 bbd33012bdc..65b07906192 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -19,12 +19,23 @@ import { Label } from '@/components/emcn/components/label/label'
 import { Trash } from '@/components/emcn/icons/trash'
 import { cn } from '@/lib/core/utils/cn'
 import { validateName } from '@/lib/core/utils/validation'
+import {
+  useFloatBoundarySync,
+  useFloatDrag,
+  useFloatResize,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useVariablesStore as usePanelVariablesStore } from '@/stores/panel/variables/store'
-import { getVariablesPosition, useVariablesStore } from '@/stores/variables/store'
+import {
+  getVariablesPosition,
+  MAX_VARIABLES_HEIGHT,
+  MAX_VARIABLES_WIDTH,
+  MIN_VARIABLES_HEIGHT,
+  MIN_VARIABLES_WIDTH,
+  useVariablesStore,
+} from '@/stores/variables/store'
 import type { Variable } from '@/stores/variables/types'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { useChatBoundarySync, useChatDrag, useChatResize } from '../chat/hooks'
 
 /**
  * Type options for variable type selection
@@ -42,7 +53,7 @@ const TYPE_OPTIONS: ComboboxOption[] = [
  */
 const BADGE_HEIGHT = 20
 const BADGE_TEXT_SIZE = 13
-const ICON_SIZE = 14
+const ICON_SIZE = 13
 const HEADER_ICON_SIZE = 16
 const LINE_HEIGHT = 21
 const MIN_EDITOR_HEIGHT = 120
@@ -97,14 +108,14 @@ export function Variables() {
     [position, width, height]
   )
 
-  const { handleMouseDown } = useChatDrag({
+  const { handleMouseDown } = useFloatDrag({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
   })
 
-  useChatBoundarySync({
+  useFloatBoundarySync({
     isOpen,
     position: actualPosition,
     width,
@@ -117,12 +128,16 @@ export function Variables() {
     handleMouseMove: handleResizeMouseMove,
     handleMouseLeave: handleResizeMouseLeave,
     handleMouseDown: handleResizeMouseDown,
-  } = useChatResize({
+  } = useFloatResize({
     position: actualPosition,
     width,
     height,
     onPositionChange: setPosition,
     onDimensionsChange: setDimensions,
+    minWidth: MIN_VARIABLES_WIDTH,
+    minHeight: MIN_VARIABLES_HEIGHT,
+    maxWidth: MAX_VARIABLES_WIDTH,
+    maxHeight: MAX_VARIABLES_HEIGHT,
   })
 
   const [collapsedById, setCollapsedById] = useState<Record<string, boolean>>({})
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
index 51c1ae8a878..9e2aeb0eb84 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -2,6 +2,7 @@ export { useAutoLayout } from './use-auto-layout'
 export { useBlockCore } from './use-block-core'
 export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
+export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './use-float'
 export { useNodeUtilities } from './use-node-utilities'
 export { useScrollManagement } from './use-scroll-management'
 export { useWorkflowExecution } from './use-workflow-execution'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
new file mode 100644
index 00000000000..c487cd8968a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/index.ts
@@ -0,0 +1,3 @@
+export { useFloatBoundarySync } from './use-float-boundary-sync'
+export { useFloatDrag } from './use-float-drag'
+export { useFloatResize } from './use-float-resize'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
similarity index 92%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
index 54be3325793..a9fbfcd06b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-boundary-sync.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-boundary-sync.ts
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from 'react'
 
-interface UseChatBoundarySyncProps {
+interface UseFloatBoundarySyncProps {
   isOpen: boolean
   position: { x: number; y: number }
   width: number
@@ -9,17 +9,17 @@ interface UseChatBoundarySyncProps {
 }
 
 /**
- * Hook to synchronize chat position with layout boundary changes
- * Keeps chat within bounds when sidebar, panel, or terminal resize
+ * Hook to synchronize floats position with layout boundary changes.
+ * Keeps the float within bounds when sidebar, panel, or terminal resize.
  * Uses requestAnimationFrame for smooth real-time updates
  */
-export function useChatBoundarySync({
+export function useFloatBoundarySync({
   isOpen,
   position,
   width,
   height,
   onPositionChange,
-}: UseChatBoundarySyncProps) {
+}: UseFloatBoundarySyncProps) {
   const rafIdRef = useRef<number | null>(null)
   const positionRef = useRef(position)
   const previousDimensionsRef = useRef({ sidebarWidth: 0, panelWidth: 0, terminalHeight: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
similarity index 92%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
index 643e1d6a845..cc71da95743 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-drag.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-drag.ts
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 import { constrainChatPosition } from '@/stores/chat/store'
 
-interface UseChatDragProps {
+interface UseFloatDragProps {
   position: { x: number; y: number }
   width: number
   height: number
@@ -9,10 +9,10 @@ interface UseChatDragProps {
 }
 
 /**
- * Hook for handling drag functionality of floating chat modal
+ * Hook for handling drag functionality of floats.
  * Provides mouse event handlers and manages drag state
  */
-export function useChatDrag({ position, width, height, onPositionChange }: UseChatDragProps) {
+export function useFloatDrag({ position, width, height, onPositionChange }: UseFloatDragProps) {
   const isDraggingRef = useRef(false)
   const dragStartRef = useRef({ x: 0, y: 0 })
   const initialPositionRef = useRef({ x: 0, y: 0 })
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
similarity index 90%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
index 08a3e17d27d..33c6e72238d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-float/use-float-resize.ts
@@ -6,12 +6,20 @@ import {
   MIN_CHAT_WIDTH,
 } from '@/stores/chat/store'
 
-interface UseChatResizeProps {
+interface UseFloatResizeProps {
   position: { x: number; y: number }
   width: number
   height: number
   onPositionChange: (position: { x: number; y: number }) => void
   onDimensionsChange: (dimensions: { width: number; height: number }) => void
+  /**
+   * Optional dimension constraints.
+   * If omitted, chat defaults are used for backward compatibility.
+   */
+  minWidth?: number
+  minHeight?: number
+  maxWidth?: number
+  maxHeight?: number
 }
 
 /**
@@ -34,16 +42,20 @@ type ResizeDirection =
 const EDGE_THRESHOLD = 8
 
 /**
- * Hook for handling multi-directional resize functionality of floating chat modal
- * Supports resizing from all 8 directions: 4 corners and 4 edges
+ * Hook for handling multi-directional resize functionality of floating panels.
+ * Supports resizing from all 8 directions: 4 corners and 4 edges.
  */
-export function useChatResize({
+export function useFloatResize({
   position,
   width,
   height,
   onPositionChange,
   onDimensionsChange,
-}: UseChatResizeProps) {
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight,
+}: UseFloatResizeProps) {
   const [cursor, setCursor] = useState<string>('')
   const isResizingRef = useRef(false)
   const activeDirectionRef = useRef<ResizeDirection>(null)
@@ -285,9 +297,18 @@ export function useChatResize({
           break
       }
 
-      // Constrain dimensions to min/max
-      const constrainedWidth = Math.max(MIN_CHAT_WIDTH, Math.min(MAX_CHAT_WIDTH, newWidth))
-      const constrainedHeight = Math.max(MIN_CHAT_HEIGHT, Math.min(MAX_CHAT_HEIGHT, newHeight))
+      // Constrain dimensions to min/max. If explicit constraints are not provided,
+      // fall back to the chat defaults for backward compatibility.
+      const effectiveMinWidth = typeof minWidth === 'number' ? minWidth : MIN_CHAT_WIDTH
+      const effectiveMaxWidth = typeof maxWidth === 'number' ? maxWidth : MAX_CHAT_WIDTH
+      const effectiveMinHeight = typeof minHeight === 'number' ? minHeight : MIN_CHAT_HEIGHT
+      const effectiveMaxHeight = typeof maxHeight === 'number' ? maxHeight : MAX_CHAT_HEIGHT
+
+      const constrainedWidth = Math.max(effectiveMinWidth, Math.min(effectiveMaxWidth, newWidth))
+      const constrainedHeight = Math.max(
+        effectiveMinHeight,
+        Math.min(effectiveMaxHeight, newHeight)
+      )
 
       // Adjust position if dimensions were constrained on left/top edges
       if (direction === 'top-left' || direction === 'bottom-left' || direction === 'left') {
diff --git a/apps/sim/stores/terminal/console/store.ts b/apps/sim/stores/terminal/console/store.ts
index a02d5bb19e9..127860a8de4 100644
--- a/apps/sim/stores/terminal/console/store.ts
+++ b/apps/sim/stores/terminal/console/store.ts
@@ -7,6 +7,7 @@ import { useExecutionStore } from '@/stores/execution/store'
 import { useNotificationStore } from '@/stores/notifications'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import type { ConsoleEntry, ConsoleStore, ConsoleUpdate } from '@/stores/terminal/console/types'
+import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '../store'
 
 const logger = createLogger('TerminalConsoleStore')
 
@@ -129,6 +130,16 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
             }
           }
 
+          // Auto-expand terminal when new entries are appended and it is minimized
+          try {
+            const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
+            if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
+              setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
+            }
+          } catch (error) {
+            logger.error('Failed to auto-expand terminal on new console entry', { error })
+          }
+
           return newEntry
         },
 
diff --git a/apps/sim/stores/variables/store.ts b/apps/sim/stores/variables/store.ts
index a9404e8d3d8..aa3c54e01f2 100644
--- a/apps/sim/stores/variables/store.ts
+++ b/apps/sim/stores/variables/store.ts
@@ -16,10 +16,10 @@ const logger = createLogger('VariablesModalStore')
 
 /**
  * Floating variables modal default dimensions.
- * Matches the chat modal baseline for visual consistency.
+ * Slightly larger than the chat modal for more comfortable editing.
  */
-const DEFAULT_WIDTH = 250
-const DEFAULT_HEIGHT = 286
+const DEFAULT_WIDTH = 320
+const DEFAULT_HEIGHT = 320
 
 /**
  * Minimum and maximum modal dimensions.

From 168fd7fcc2e7699e872e4b6dc68e06290c6e0efa Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 22 Nov 2025 18:10:56 -0800
Subject: [PATCH 05/17] improvement(invite-modal): emcn aligned

---
 .../components-new/help-modal/help-modal.tsx  |   5 +-
 .../invite-modal/components/email-tag.tsx     |  48 ++
 .../invite-modal/components/index.ts          |   5 +
 .../components/permission-selector.tsx        |  56 ++
 .../components/permissions-table-skeleton.tsx |  23 +
 .../components/permissions-table.tsx          | 295 +++++++
 .../invite-modal/components/types.ts          |  12 +
 .../components/invite-modal/invite-modal.tsx  | 747 +++++-------------
 .../emcn/components/modal-new/modal.tsx       |   4 +-
 9 files changed, 621 insertions(+), 574 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
index fc745796fa7..9b4afcf8430 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { zodResolver } from '@hookform/resolvers/zod'
 import imageCompression from 'browser-image-compression'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -419,7 +419,7 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
         <ModalHeader>Help &amp; Support</ModalHeader>
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody>
+          <ModalBody className='!pb-[16px]'>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
               <div className='space-y-[12px]'>
                 <div>
@@ -554,7 +554,6 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
               Cancel
             </Button>
             <Button type='submit' variant='primary' disabled={isSubmitting || isProcessing}>
-              {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
               {isSubmitting
                 ? 'Submitting...'
                 : submitStatus === 'error'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
new file mode 100644
index 00000000000..74895c55350
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -0,0 +1,48 @@
+import React from 'react'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+export interface EmailTagProps {
+  email: string
+  onRemove: () => void
+  disabled?: boolean
+  isInvalid?: boolean
+  isSent?: boolean
+}
+
+export const EmailTag = React.memo<EmailTagProps>(
+  ({ email, onRemove, disabled, isInvalid, isSent }) => (
+    <div
+      className={cn(
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[8px] py-[4px] text-[12px]',
+        isInvalid
+          ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-400'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'
+      )}
+    >
+      <span className='max-w-[200px] truncate'>{email}</span>
+      {isSent && (
+        <span className='text-[11px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+          sent
+        </span>
+      )}
+      {!disabled && !isSent && (
+        <button
+          type='button'
+          onClick={onRemove}
+          className={cn(
+            'flex-shrink-0 transition-colors focus:outline-none',
+            isInvalid
+              ? 'text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
+          )}
+          aria-label={`Remove ${email}`}
+        >
+          <X className='h-[14px] w-[14px]' />
+        </button>
+      )}
+    </div>
+  )
+)
+
+EmailTag.displayName = 'EmailTag'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts
new file mode 100644
index 00000000000..da6e9094758
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/index.ts
@@ -0,0 +1,5 @@
+export * from './email-tag'
+export * from './permission-selector'
+export * from './permissions-table'
+export * from './permissions-table-skeleton'
+export * from './types'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
new file mode 100644
index 00000000000..239623aae38
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
@@ -0,0 +1,56 @@
+import React, { useMemo } from 'react'
+import { Button } from '@/components/emcn'
+import type { PermissionType } from '@/lib/permissions/utils'
+import { cn } from '@/lib/utils'
+
+export interface PermissionSelectorProps {
+  value: PermissionType
+  onChange: (value: PermissionType) => void
+  disabled?: boolean
+  className?: string
+}
+
+export const PermissionSelector = React.memo<PermissionSelectorProps>(
+  ({ value, onChange, disabled = false, className = '' }) => {
+    const permissionOptions = useMemo(
+      () => [
+        { value: 'read' as PermissionType, label: 'Read' },
+        { value: 'write' as PermissionType, label: 'Write' },
+        { value: 'admin' as PermissionType, label: 'Admin' },
+      ],
+      []
+    )
+
+    return (
+      <div className={cn('inline-flex gap-[2px]', className)}>
+        {permissionOptions.map((option, index) => {
+          const radiusClasses =
+            index === 0
+              ? 'rounded-r-none'
+              : index === permissionOptions.length - 1
+                ? 'rounded-l-none'
+                : 'rounded-none'
+
+          return (
+            <Button
+              key={option.value}
+              type='button'
+              variant={value === option.value ? 'active' : 'default'}
+              onClick={() => !disabled && onChange(option.value)}
+              disabled={disabled}
+              className={cn(
+                'px-[8px] py-[4px] text-[12px]',
+                radiusClasses,
+                disabled && 'cursor-not-allowed'
+              )}
+            >
+              {option.label}
+            </Button>
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+PermissionSelector.displayName = 'PermissionSelector'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
new file mode 100644
index 00000000000..328da0ce695
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+export const PermissionsTableSkeleton = React.memo(() => (
+  <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
+    <div className='flex items-center justify-between gap-[8px] py-[8px]'>
+      <div className='min-w-0 flex-1'>
+        <div className='flex items-center gap-[8px]'>
+          <Skeleton className='h-[14px] w-40 rounded-[4px]' />
+        </div>
+      </div>
+      <div className='flex flex-shrink-0 items-center'>
+        <div className='inline-flex gap-[2px]'>
+          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
+        </div>
+      </div>
+    </div>
+  </div>
+))
+
+PermissionsTableSkeleton.displayName = 'PermissionsTableSkeleton'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
new file mode 100644
index 00000000000..ba58e6eed69
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -0,0 +1,295 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Loader2, RotateCw, X } from 'lucide-react'
+import { Badge, Button, Tooltip } from '@/components/emcn'
+import { useSession } from '@/lib/auth-client'
+import type { PermissionType } from '@/lib/permissions/utils'
+import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
+import type { WorkspacePermissions } from '@/hooks/use-workspace-permissions'
+import { PermissionSelector } from './permission-selector'
+import { PermissionsTableSkeleton } from './permissions-table-skeleton'
+import type { UserPermissions } from './types'
+
+export interface PermissionsTableProps {
+  userPermissions: UserPermissions[]
+  onPermissionChange: (userId: string, permissionType: PermissionType) => void
+  onRemoveMember?: (userId: string, email: string) => void
+  onRemoveInvitation?: (invitationId: string, email: string) => void
+  onResendInvitation?: (invitationId: string, email: string) => void
+  disabled?: boolean
+  existingUserPermissionChanges: Record<string, Partial<UserPermissions>>
+  isSaving?: boolean
+  workspacePermissions: WorkspacePermissions | null
+  permissionsLoading: boolean
+  pendingInvitations: UserPermissions[]
+  isPendingInvitationsLoading: boolean
+  resendingInvitationIds?: Record<string, boolean>
+  resentInvitationIds?: Record<string, boolean>
+  resendCooldowns?: Record<string, number>
+}
+
+export const PermissionsTable = ({
+  userPermissions,
+  onPermissionChange,
+  onRemoveMember,
+  onRemoveInvitation,
+  disabled,
+  existingUserPermissionChanges,
+  isSaving,
+  workspacePermissions,
+  permissionsLoading,
+  pendingInvitations,
+  isPendingInvitationsLoading,
+  onResendInvitation,
+  resendingInvitationIds,
+  resentInvitationIds,
+  resendCooldowns,
+}: PermissionsTableProps) => {
+  const { data: session } = useSession()
+  const userPerms = useUserPermissionsContext()
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false)
+
+  useEffect(() => {
+    if (!permissionsLoading && !userPerms.isLoading && !isPendingInvitationsLoading) {
+      setHasLoadedOnce(true)
+    }
+  }, [permissionsLoading, userPerms.isLoading, isPendingInvitationsLoading])
+
+  const existingUsers: UserPermissions[] = useMemo(
+    () =>
+      workspacePermissions?.users?.map((user) => {
+        const changes = existingUserPermissionChanges[user.userId] || {}
+        const permissionType = user.permissionType || 'read'
+
+        return {
+          userId: user.userId,
+          email: user.email,
+          permissionType:
+            changes.permissionType !== undefined ? changes.permissionType : permissionType,
+          isCurrentUser: user.email === session?.user?.email,
+        }
+      }) || [],
+    [workspacePermissions?.users, existingUserPermissionChanges, session?.user?.email]
+  )
+
+  const currentUser: UserPermissions | null = useMemo(
+    () =>
+      session?.user?.email
+        ? existingUsers.find((user) => user.isCurrentUser) || {
+            email: session.user.email,
+            permissionType: 'admin',
+            isCurrentUser: true,
+          }
+        : null,
+    [session?.user?.email, existingUsers]
+  )
+
+  const filteredExistingUsers = useMemo(
+    () => existingUsers.filter((user) => !user.isCurrentUser),
+    [existingUsers]
+  )
+
+  const allUsers: UserPermissions[] = useMemo(() => {
+    const existingUserEmails = new Set([
+      ...(currentUser ? [currentUser.email] : []),
+      ...filteredExistingUsers.map((user) => user.email),
+    ])
+
+    const filteredPendingInvitations = pendingInvitations.filter(
+      (invitation) => !existingUserEmails.has(invitation.email)
+    )
+
+    return [
+      ...(currentUser ? [currentUser] : []),
+      ...filteredExistingUsers,
+      ...userPermissions,
+      ...filteredPendingInvitations,
+    ]
+  }, [currentUser, filteredExistingUsers, userPermissions, pendingInvitations])
+
+  const shouldShowSkeleton =
+    !hasLoadedOnce && (permissionsLoading || userPerms.isLoading || isPendingInvitationsLoading)
+
+  if (shouldShowSkeleton) {
+    return <PermissionsTableSkeleton />
+  }
+
+  if (userPermissions.length === 0 && !session?.user?.email && !workspacePermissions?.users?.length)
+    return null
+
+  if (isSaving) {
+    return (
+      <div className='space-y-[12px]'>
+        <h3 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+          Member Permissions
+        </h3>
+        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)] dark:bg-[var(--surface-3)]'>
+          <div className='flex items-center justify-center py-[48px]'>
+            <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
+              <Loader2 className='h-[16px] w-[16px] animate-spin' />
+              <span className='font-medium text-[13px]'>Saving permission changes...</span>
+            </div>
+          </div>
+        </div>
+        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+          Please wait while we update the permissions.
+        </p>
+      </div>
+    )
+  }
+
+  const currentUserIsAdmin = userPerms.canAdmin
+
+  return (
+    <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
+      {allUsers.length > 0 && (
+        <div>
+          {allUsers.map((user) => {
+            const isCurrentUser = user.isCurrentUser === true
+            const isExistingUser = filteredExistingUsers.some((eu) => eu.email === user.email)
+            const isPendingInvitation = user.isPendingInvitation === true
+            const userIdentifier = user.userId || user.email
+            const originalPermission = workspacePermissions?.users?.find(
+              (eu) => eu.userId === user.userId
+            )?.permissionType
+            const currentPermission =
+              existingUserPermissionChanges[userIdentifier]?.permissionType ?? user.permissionType
+            const hasChanges = originalPermission && currentPermission !== originalPermission
+            const isWorkspaceMember = workspacePermissions?.users?.some(
+              (eu) => eu.email === user.email && eu.userId
+            )
+            const canShowRemoveButton =
+              isWorkspaceMember &&
+              !isCurrentUser &&
+              !isPendingInvitation &&
+              currentUserIsAdmin &&
+              user.userId
+
+            const uniqueKey = user.userId
+              ? `existing-${user.userId}`
+              : isPendingInvitation
+                ? `pending-${user.email}`
+                : `new-${user.email}`
+
+            return (
+              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
+                <div className='min-w-0 flex-1'>
+                  <div className='flex items-center gap-[8px]'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                      {user.email}
+                    </span>
+                    {isPendingInvitation && (
+                      <Badge variant='default' className='gap-[4px]'>
+                        {resendingInvitationIds &&
+                        user.invitationId &&
+                        resendingInvitationIds[user.invitationId] ? (
+                          <>
+                            <Loader2 className='h-[12px] w-[12px] animate-spin' />
+                            <span>Sending...</span>
+                          </>
+                        ) : resentInvitationIds &&
+                          user.invitationId &&
+                          resentInvitationIds[user.invitationId] ? (
+                          <span>Resent</span>
+                        ) : (
+                          <span>Sent</span>
+                        )}
+                      </Badge>
+                    )}
+                    {hasChanges && <Badge variant='default'>Modified</Badge>}
+
+                    {isPendingInvitation &&
+                      currentUserIsAdmin &&
+                      user.invitationId &&
+                      onResendInvitation && (
+                        <Tooltip.Root>
+                          <Tooltip.Trigger asChild>
+                            <span className='inline-flex'>
+                              <Button
+                                variant='ghost'
+                                onClick={() => onResendInvitation(user.invitationId!, user.email)}
+                                disabled={
+                                  disabled ||
+                                  isSaving ||
+                                  resendingInvitationIds?.[user.invitationId!] ||
+                                  (resendCooldowns && resendCooldowns[user.invitationId!] > 0)
+                                }
+                                className='h-[16px] w-[16px] p-0'
+                              >
+                                {resendingInvitationIds?.[user.invitationId!] ? (
+                                  <Loader2 className='h-[12px] w-[12px] animate-spin' />
+                                ) : (
+                                  <RotateCw className='h-[12px] w-[12px]' />
+                                )}
+                                <span className='sr-only'>Resend invite</span>
+                              </Button>
+                            </span>
+                          </Tooltip.Trigger>
+                          <Tooltip.Content>
+                            <p>
+                              {resendCooldowns?.[user.invitationId!]
+                                ? `Resend in ${resendCooldowns[user.invitationId!]}s`
+                                : 'Resend invite'}
+                            </p>
+                          </Tooltip.Content>
+                        </Tooltip.Root>
+                      )}
+                    {((canShowRemoveButton && onRemoveMember) ||
+                      (isPendingInvitation &&
+                        currentUserIsAdmin &&
+                        user.invitationId &&
+                        onRemoveInvitation)) && (
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <Button
+                            variant='ghost'
+                            onClick={() => {
+                              if (canShowRemoveButton && onRemoveMember) {
+                                onRemoveMember(user.userId!, user.email)
+                              } else if (
+                                isPendingInvitation &&
+                                user.invitationId &&
+                                onRemoveInvitation
+                              ) {
+                                onRemoveInvitation(user.invitationId, user.email)
+                              }
+                            }}
+                            disabled={disabled || isSaving}
+                            className='h-[16px] w-[16px] p-0'
+                          >
+                            <X className='h-[14px] w-[14px]' />
+                            <span className='sr-only'>
+                              {isPendingInvitation ? 'Revoke invite' : 'Remove member'}
+                            </span>
+                          </Button>
+                        </Tooltip.Trigger>
+                        <Tooltip.Content>
+                          <p>{isPendingInvitation ? 'Revoke invite' : 'Remove member'}</p>
+                        </Tooltip.Content>
+                      </Tooltip.Root>
+                    )}
+                  </div>
+                </div>
+
+                <div className='flex flex-shrink-0 items-center'>
+                  <PermissionSelector
+                    value={user.permissionType}
+                    onChange={(newPermission) => onPermissionChange(userIdentifier, newPermission)}
+                    disabled={
+                      disabled ||
+                      !currentUserIsAdmin ||
+                      isPendingInvitation ||
+                      (isCurrentUser && user.permissionType === 'admin')
+                    }
+                    className='w-auto'
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+PermissionsTable.displayName = 'PermissionsTable'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
new file mode 100644
index 00000000000..3215fdcfd57
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
@@ -0,0 +1,12 @@
+import type { PermissionType } from '@/lib/permissions/utils'
+
+export type { PermissionType }
+
+export interface UserPermissions {
+  userId?: string
+  email: string
+  permissionType: PermissionType
+  isCurrentUser?: boolean
+  isPendingInvitation?: boolean
+  invitationId?: string
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index 31e3abb3306..6366b72622b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -1,66 +1,33 @@
 'use client'
 
-import React, { type KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Loader2, RotateCw, X } from 'lucide-react'
+import React, { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Badge, Button, Input, Modal, ModalContent, Tooltip } from '@/components/emcn'
-import { Skeleton } from '@/components/ui/skeleton'
+import { Button, Input, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
 import { useSession } from '@/lib/auth/auth-client'
-import { cn } from '@/lib/core/utils/cn'
-import { createLogger } from '@/lib/logs/console/logger'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import type { PermissionType } from '@/lib/workspaces/permissions/utils'
-import {
-  useUserPermissionsContext,
-  useWorkspacePermissionsContext,
-} from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import type { WorkspacePermissions } from '@/hooks/use-workspace-permissions'
+import { createLogger } from '@/lib/logs/console/logger'
+import { cn } from '@/lib/core/utils/cn'
+import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { API_ENDPOINTS } from '@/stores/constants'
+import type { PermissionType, UserPermissions } from './components'
+import { EmailTag, PermissionsTable } from './components'
 
 const logger = createLogger('InviteModal')
 
 interface InviteModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
-  onInviteMember?: (email: string) => void
   workspaceName?: string
 }
 
-interface EmailTagProps {
-  email: string
-  onRemove: () => void
-  disabled?: boolean
-  isInvalid?: boolean
-  isSent?: boolean
-}
-
-interface UserPermissions {
-  userId?: string
-  email: string
-  permissionType: PermissionType
-  isCurrentUser?: boolean
-  isPendingInvitation?: boolean
-  invitationId?: string
-}
-
-interface PermissionsTableProps {
-  userPermissions: UserPermissions[]
-  onPermissionChange: (userId: string, permissionType: PermissionType) => void
-  onRemoveMember?: (userId: string, email: string) => void
-  onRemoveInvitation?: (invitationId: string, email: string) => void
-  onResendInvitation?: (invitationId: string, email: string) => void
-  disabled?: boolean
-  existingUserPermissionChanges: Record<string, Partial<UserPermissions>>
-  isSaving?: boolean
-  workspacePermissions: WorkspacePermissions | null
-  permissionsLoading: boolean
-  pendingInvitations: UserPermissions[]
-  isPendingInvitationsLoading: boolean
-  resendingInvitationIds?: Record<string, boolean>
-  resentInvitationIds?: Record<string, boolean>
-  resendCooldowns?: Record<string, number>
-}
-
 interface PendingInvitation {
   id: string
   workspaceId: string
@@ -70,375 +37,6 @@ interface PendingInvitation {
   createdAt: string
 }
 
-const EmailTag = React.memo<EmailTagProps>(({ email, onRemove, disabled, isInvalid, isSent }) => (
-  <div
-    className={cn(
-      'flex w-auto items-center gap-[4px] rounded-[4px] border px-[8px] py-[4px] text-[12px]',
-      isInvalid
-        ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-400'
-        : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'
-    )}
-  >
-    <span className='max-w-[200px] truncate'>{email}</span>
-    {isSent && (
-      <span className='text-[11px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-        sent
-      </span>
-    )}
-    {!disabled && !isSent && (
-      <button
-        type='button'
-        onClick={onRemove}
-        className={cn(
-          'flex-shrink-0 transition-colors focus:outline-none',
-          isInvalid
-            ? 'text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300'
-            : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
-        )}
-        aria-label={`Remove ${email}`}
-      >
-        <X className='h-3 w-3' />
-      </button>
-    )}
-  </div>
-))
-
-EmailTag.displayName = 'EmailTag'
-
-interface PermissionSelectorProps {
-  value: PermissionType
-  onChange: (value: PermissionType) => void
-  disabled?: boolean
-  className?: string
-}
-
-const PermissionSelector = React.memo<PermissionSelectorProps>(
-  ({ value, onChange, disabled = false, className = '' }) => {
-    const permissionOptions = useMemo(
-      () => [
-        { value: 'read' as PermissionType, label: 'Read' },
-        { value: 'write' as PermissionType, label: 'Write' },
-        { value: 'admin' as PermissionType, label: 'Admin' },
-      ],
-      []
-    )
-
-    return (
-      <div
-        className={cn(
-          'inline-flex rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)]',
-          className
-        )}
-      >
-        {permissionOptions.map((option, index) => (
-          <button
-            key={option.value}
-            type='button'
-            onClick={() => !disabled && onChange(option.value)}
-            disabled={disabled}
-            className={cn(
-              'px-[8px] py-[4px] font-medium text-[12px] transition-colors focus:outline-none',
-              'first:rounded-l-[4px] last:rounded-r-[4px]',
-              disabled && 'cursor-not-allowed opacity-50',
-              value === option.value
-                ? 'bg-[var(--surface-9)] text-[var(--text-primary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)]'
-                : 'text-[var(--text-secondary)] hover:bg-[var(--surface-8)] hover:text-[var(--text-primary)] dark:text-[var(--text-secondary)] dark:hover:bg-[var(--surface-8)] dark:hover:text-[var(--text-primary)]',
-              index > 0 && 'border-[var(--surface-11)] border-l'
-            )}
-          >
-            {option.label}
-          </button>
-        ))}
-      </div>
-    )
-  }
-)
-
-PermissionSelector.displayName = 'PermissionSelector'
-
-const PermissionsTableSkeleton = React.memo(() => (
-  <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-    {Array.from({ length: 5 }).map((_, idx) => (
-      <div key={idx} className='flex items-center justify-between gap-[8px] py-[8px]'>
-        <Skeleton className='h-[14px] w-40 rounded-[4px]' />
-        <div className='flex items-center gap-[8px]'>
-          <Skeleton className='h-[28px] w-32 flex-shrink-0 rounded-[4px]' />
-          <div className='flex w-10 items-center gap-[4px] sm:w-12'>
-            <Skeleton className='h-4 w-4 rounded-[4px]' />
-            <Skeleton className='h-4 w-4 rounded-[4px]' />
-          </div>
-        </div>
-      </div>
-    ))}
-  </div>
-))
-
-PermissionsTableSkeleton.displayName = 'PermissionsTableSkeleton'
-
-const PermissionsTable = ({
-  userPermissions,
-  onPermissionChange,
-  onRemoveMember,
-  onRemoveInvitation,
-  disabled,
-  existingUserPermissionChanges,
-  isSaving,
-  workspacePermissions,
-  permissionsLoading,
-  pendingInvitations,
-  isPendingInvitationsLoading,
-  onResendInvitation,
-  resendingInvitationIds,
-  resentInvitationIds,
-  resendCooldowns,
-}: PermissionsTableProps) => {
-  const { data: session } = useSession()
-  const userPerms = useUserPermissionsContext()
-
-  const existingUsers: UserPermissions[] = useMemo(
-    () =>
-      workspacePermissions?.users?.map((user) => {
-        const changes = existingUserPermissionChanges[user.userId] || {}
-        const permissionType = user.permissionType || 'read'
-
-        return {
-          userId: user.userId,
-          email: user.email,
-          permissionType:
-            changes.permissionType !== undefined ? changes.permissionType : permissionType,
-          isCurrentUser: user.email === session?.user?.email,
-        }
-      }) || [],
-    [workspacePermissions?.users, existingUserPermissionChanges, session?.user?.email]
-  )
-
-  const currentUser: UserPermissions | null = useMemo(
-    () =>
-      session?.user?.email
-        ? existingUsers.find((user) => user.isCurrentUser) || {
-            email: session.user.email,
-            permissionType: 'admin',
-            isCurrentUser: true,
-          }
-        : null,
-    [session?.user?.email, existingUsers]
-  )
-
-  const filteredExistingUsers = useMemo(
-    () => existingUsers.filter((user) => !user.isCurrentUser),
-    [existingUsers]
-  )
-
-  const allUsers: UserPermissions[] = useMemo(() => {
-    // Get emails of existing users to filter out duplicate invitations
-    const existingUserEmails = new Set([
-      ...(currentUser ? [currentUser.email] : []),
-      ...filteredExistingUsers.map((user) => user.email),
-    ])
-
-    // Filter out pending invitations for users who are already members
-    const filteredPendingInvitations = pendingInvitations.filter(
-      (invitation) => !existingUserEmails.has(invitation.email)
-    )
-
-    return [
-      ...(currentUser ? [currentUser] : []),
-      ...filteredExistingUsers,
-      ...userPermissions,
-      ...filteredPendingInvitations,
-    ]
-  }, [currentUser, filteredExistingUsers, userPermissions, pendingInvitations])
-
-  if (permissionsLoading || userPerms.isLoading || isPendingInvitationsLoading) {
-    return <PermissionsTableSkeleton />
-  }
-
-  if (userPermissions.length === 0 && !session?.user?.email && !workspacePermissions?.users?.length)
-    return null
-
-  if (isSaving) {
-    return (
-      <div className='space-y-[12px]'>
-        <h3 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-          Member Permissions
-        </h3>
-        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)] dark:bg-[var(--surface-3)]'>
-          <div className='flex items-center justify-center py-[48px]'>
-            <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-              <Loader2 className='h-5 w-5 animate-spin' />
-              <span className='font-medium text-[13px]'>Saving permission changes...</span>
-            </div>
-          </div>
-        </div>
-        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-          Please wait while we update the permissions.
-        </p>
-      </div>
-    )
-  }
-
-  const currentUserIsAdmin = userPerms.canAdmin
-
-  return (
-    <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-      {allUsers.length > 0 && (
-        <div>
-          {allUsers.map((user) => {
-            const isCurrentUser = user.isCurrentUser === true
-            const isExistingUser = filteredExistingUsers.some((eu) => eu.email === user.email)
-            const isPendingInvitation = user.isPendingInvitation === true
-            const userIdentifier = user.userId || user.email
-            // Check if current permission is different from original permission
-            const originalPermission = workspacePermissions?.users?.find(
-              (eu) => eu.userId === user.userId
-            )?.permissionType
-            const currentPermission =
-              existingUserPermissionChanges[userIdentifier]?.permissionType ?? user.permissionType
-            const hasChanges = originalPermission && currentPermission !== originalPermission
-            // Check if user is in workspace permissions directly
-            const isWorkspaceMember = workspacePermissions?.users?.some(
-              (eu) => eu.email === user.email && eu.userId
-            )
-            const canShowRemoveButton =
-              isWorkspaceMember &&
-              !isCurrentUser &&
-              !isPendingInvitation &&
-              currentUserIsAdmin &&
-              user.userId
-
-            const uniqueKey = user.userId
-              ? `existing-${user.userId}`
-              : isPendingInvitation
-                ? `pending-${user.email}`
-                : `new-${user.email}`
-
-            return (
-              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
-                {/* Email and status badges */}
-                <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-                      {user.email}
-                    </span>
-                    {isPendingInvitation && (
-                      <Badge variant='default' className='gap-[4px]'>
-                        {resendingInvitationIds &&
-                        user.invitationId &&
-                        resendingInvitationIds[user.invitationId] ? (
-                          <>
-                            <Loader2 className='h-3.5 w-3.5 animate-spin' />
-                            <span>Sending...</span>
-                          </>
-                        ) : resentInvitationIds &&
-                          user.invitationId &&
-                          resentInvitationIds[user.invitationId] ? (
-                          <span>Resent</span>
-                        ) : (
-                          <span>Sent</span>
-                        )}
-                      </Badge>
-                    )}
-                    {hasChanges && <Badge variant='default'>Modified</Badge>}
-                  </div>
-                </div>
-
-                {/* Permission selector and fixed-width action area to keep rows aligned */}
-                <div className='flex flex-shrink-0 items-center gap-[8px]'>
-                  <PermissionSelector
-                    value={user.permissionType}
-                    onChange={(newPermission) => onPermissionChange(userIdentifier, newPermission)}
-                    disabled={
-                      disabled ||
-                      !currentUserIsAdmin ||
-                      isPendingInvitation ||
-                      (isCurrentUser && user.permissionType === 'admin')
-                    }
-                    className='w-auto'
-                  />
-
-                  {/* Fixed-width action area so selector stays inline across rows */}
-                  <div className='flex h-4 w-10 items-center justify-center gap-[4px] sm:w-12'>
-                    {isPendingInvitation &&
-                      currentUserIsAdmin &&
-                      user.invitationId &&
-                      onResendInvitation && (
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <span className='inline-flex'>
-                              <Button
-                                variant='ghost'
-                                onClick={() => onResendInvitation(user.invitationId!, user.email)}
-                                disabled={
-                                  disabled ||
-                                  isSaving ||
-                                  resendingInvitationIds?.[user.invitationId!] ||
-                                  (resendCooldowns && resendCooldowns[user.invitationId!] > 0)
-                                }
-                                className='h-4 w-4 p-0'
-                              >
-                                {resendingInvitationIds?.[user.invitationId!] ? (
-                                  <Loader2 className='h-3.5 w-3.5 animate-spin' />
-                                ) : (
-                                  <RotateCw className='h-3.5 w-3.5' />
-                                )}
-                                <span className='sr-only'>Resend invite</span>
-                              </Button>
-                            </span>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content>
-                            <p>
-                              {resendCooldowns?.[user.invitationId!]
-                                ? `Resend in ${resendCooldowns[user.invitationId!]}s`
-                                : 'Resend invite'}
-                            </p>
-                          </Tooltip.Content>
-                        </Tooltip.Root>
-                      )}
-                    {((canShowRemoveButton && onRemoveMember) ||
-                      (isPendingInvitation &&
-                        currentUserIsAdmin &&
-                        user.invitationId &&
-                        onRemoveInvitation)) && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Button
-                            variant='ghost'
-                            onClick={() => {
-                              if (canShowRemoveButton && onRemoveMember) {
-                                onRemoveMember(user.userId!, user.email)
-                              } else if (
-                                isPendingInvitation &&
-                                user.invitationId &&
-                                onRemoveInvitation
-                              ) {
-                                onRemoveInvitation(user.invitationId, user.email)
-                              }
-                            }}
-                            disabled={disabled || isSaving}
-                            className='h-4 w-4 p-0'
-                          >
-                            <X className='h-3.5 w-3.5' />
-                            <span className='sr-only'>
-                              {isPendingInvitation ? 'Revoke invite' : 'Remove member'}
-                            </span>
-                          </Button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content>
-                          <p>{isPendingInvitation ? 'Revoke invite' : 'Remove member'}</p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
-                    )}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
-    </div>
-  )
-}
-
 export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalProps) {
   const formRef = useRef<HTMLFormElement>(null)
   const [inputValue, setInputValue] = useState('')
@@ -976,8 +574,35 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         )
 
         const successCount = results.filter(Boolean).length
+        const successfulEmails = emails.filter((_, index) => results[index])
 
         if (successCount > 0) {
+          if (successfulEmails.length > 0) {
+            const newPendingInvitations: UserPermissions[] = successfulEmails.map((email) => {
+              const userPermission = userPermissions.find((up) => up.email === email)
+              const permissionType = userPermission?.permissionType || 'read'
+
+              return {
+                email,
+                permissionType,
+                isPendingInvitation: true,
+              }
+            })
+
+            setPendingInvitations((prev) => {
+              const existingEmails = new Set(prev.map((inv) => inv.email))
+              const merged = [...prev]
+
+              newPendingInvitations.forEach((inv) => {
+                if (!existingEmails.has(inv.email)) {
+                  merged.push(inv)
+                }
+              })
+
+              return merged
+            })
+          }
+
           fetchPendingInvitations()
           setInputValue('')
 
@@ -987,10 +612,6 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
           } else {
             setEmails([])
             setUserPermissions([])
-
-            setTimeout(() => {
-              onOpenChange(false)
-            }, 1500)
           }
 
           setInvalidEmails([])
@@ -1051,144 +672,134 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         onOpenChange(newOpen)
       }}
     >
-      <ModalContent className='flex max-h-[80vh] w-full max-w-[560px] flex-col gap-[12px]'>
-        <div className='flex flex-col gap-[8px]'>
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Invite members to {workspaceName || 'Workspace'}
-          </h2>
-        </div>
-
-        <form ref={formRef} onSubmit={handleSubmit} className='mt-[8px]'>
-          <div className='space-y-[8px]'>
-            <label
-              htmlFor='emails'
-              className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-            >
-              Email Addresses
-            </label>
-            <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
-              {invalidEmails.map((email, index) => (
-                <EmailTag
-                  key={`invalid-${index}`}
-                  email={email}
-                  onRemove={() => removeInvalidEmail(index)}
-                  disabled={isSubmitting || !userPerms.canAdmin}
-                  isInvalid={true}
-                />
-              ))}
-              {emails.map((email, index) => (
-                <EmailTag
-                  key={`valid-${index}`}
-                  email={email}
-                  onRemove={() => removeEmail(index)}
-                  disabled={isSubmitting || !userPerms.canAdmin}
-                />
-              ))}
-              <Input
-                id='emails'
-                type='text'
-                value={inputValue}
-                onChange={(e) => setInputValue(e.target.value)}
-                onKeyDown={handleKeyDown}
-                onPaste={handlePaste}
-                onBlur={() => inputValue.trim() && addEmail(inputValue)}
-                placeholder={
-                  !userPerms.canAdmin
-                    ? 'Only administrators can invite new members'
-                    : emails.length > 0 || invalidEmails.length > 0
-                      ? 'Add another email'
-                      : 'Enter emails'
-                }
-                className={cn(
-                  'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
-                  emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
-                )}
-                autoFocus={userPerms.canAdmin}
-                disabled={isSubmitting || !userPerms.canAdmin}
+      <ModalContent className='w-[600px]'>
+        <ModalHeader>Invite members to {workspaceName || 'Workspace'}</ModalHeader>
+
+        <form ref={formRef} onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
+          <ModalBody>
+            <div className='space-y-[12px]'>
+              <div>
+                <Label
+                  htmlFor='emails'
+                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                >
+                  Email Addresses
+                </Label>
+                <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
+                  {invalidEmails.map((email, index) => (
+                    <EmailTag
+                      key={`invalid-${index}`}
+                      email={email}
+                      onRemove={() => removeInvalidEmail(index)}
+                      disabled={isSubmitting || !userPerms.canAdmin}
+                      isInvalid={true}
+                    />
+                  ))}
+                  {emails.map((email, index) => (
+                    <EmailTag
+                      key={`valid-${index}`}
+                      email={email}
+                      onRemove={() => removeEmail(index)}
+                      disabled={isSubmitting || !userPerms.canAdmin}
+                    />
+                  ))}
+                  <Input
+                    id='emails'
+                    type='text'
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onPaste={handlePaste}
+                    onBlur={() => inputValue.trim() && addEmail(inputValue)}
+                    placeholder={
+                      !userPerms.canAdmin
+                        ? 'Only administrators can invite new members'
+                        : emails.length > 0 || invalidEmails.length > 0
+                          ? 'Add another email'
+                          : 'Enter emails'
+                    }
+                    className={cn(
+                      'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+                      emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+                    )}
+                    autoFocus={userPerms.canAdmin}
+                    disabled={isSubmitting || !userPerms.canAdmin}
+                  />
+                </div>
+              </div>
+              {errorMessage && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
+                  {errorMessage}
+                </p>
+              )}
+            </div>
+            <div className='mt-[8px]'>
+              <PermissionsTable
+                userPermissions={userPermissions}
+                onPermissionChange={handlePermissionChange}
+                onRemoveMember={handleRemoveMemberClick}
+                onRemoveInvitation={handleRemoveInvitationClick}
+                onResendInvitation={handleResendInvitation}
+                disabled={isSubmitting || isSaving || isRemovingMember || isRemovingInvitation}
+                existingUserPermissionChanges={existingUserPermissionChanges}
+                isSaving={isSaving}
+                workspacePermissions={workspacePermissions}
+                permissionsLoading={permissionsLoading}
+                pendingInvitations={pendingInvitations}
+                isPendingInvitationsLoading={isPendingInvitationsLoading}
+                resendingInvitationIds={resendingInvitationIds}
+                resentInvitationIds={resentInvitationIds}
+                resendCooldowns={resendCooldowns}
               />
             </div>
-            {errorMessage && (
-              <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                {errorMessage}
-              </p>
+          </ModalBody>
+
+          <ModalFooter className='justify-between'>
+            {hasPendingChanges && userPerms.canAdmin && (
+              <div className='flex gap-[8px]'>
+                <Button
+                  type='button'
+                  variant='default'
+                  disabled={isSaving || isSubmitting}
+                  onClick={handleRestoreChanges}
+                  className='h-[32px] gap-[8px] px-[12px] font-medium'
+                >
+                  Restore Changes
+                </Button>
+                <Button
+                  type='button'
+                  variant='default'
+                  disabled={isSaving || isSubmitting}
+                  onClick={handleSaveChanges}
+                  className='h-[32px] gap-[8px] px-[12px] font-medium'
+                >
+                  {isSaving && <Loader2 className='h-4 w-4 animate-spin' />}
+                  Save Changes
+                </Button>
+              </div>
             )}
-          </div>
-
-          {/* Line separator */}
-          <div className='mt-[16px] mb-[12px] border-[var(--surface-11)] border-t' />
-
-          <PermissionsTable
-            userPermissions={userPermissions}
-            onPermissionChange={handlePermissionChange}
-            onRemoveMember={handleRemoveMemberClick}
-            onRemoveInvitation={handleRemoveInvitationClick}
-            onResendInvitation={handleResendInvitation}
-            disabled={isSubmitting || isSaving || isRemovingMember || isRemovingInvitation}
-            existingUserPermissionChanges={existingUserPermissionChanges}
-            isSaving={isSaving}
-            workspacePermissions={workspacePermissions}
-            permissionsLoading={permissionsLoading}
-            pendingInvitations={pendingInvitations}
-            isPendingInvitationsLoading={isPendingInvitationsLoading}
-            resendingInvitationIds={resendingInvitationIds}
-            resentInvitationIds={resentInvitationIds}
-            resendCooldowns={resendCooldowns}
-          />
-        </form>
 
-        {/* Consistent spacing below user list to match spacing above */}
-        <div className='mb-[12px]' />
-
-        <div className='flex justify-between gap-[8px]'>
-          {hasPendingChanges && userPerms.canAdmin && (
-            <>
-              <Button
-                type='button'
-                variant='default'
-                disabled={isSaving || isSubmitting}
-                onClick={handleRestoreChanges}
-                className='h-[32px] gap-[8px] px-[12px] font-medium'
-              >
-                Restore Changes
-              </Button>
-              <Button
-                type='button'
-                variant='default'
-                disabled={isSaving || isSubmitting}
-                onClick={handleSaveChanges}
-                className='h-[32px] gap-[8px] px-[12px] font-medium'
-              >
-                {isSaving && <Loader2 className='h-4 w-4 animate-spin' />}
-                Save Changes
-              </Button>
-            </>
-          )}
-
-          <button
-            type='button'
-            onClick={() => formRef.current?.requestSubmit()}
-            disabled={
-              !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites
-            }
-            className={cn(
-              'ml-auto flex h-[32px] items-center justify-center gap-[8px] rounded-[8px] px-[12px] font-medium text-[13px] transition-all duration-200',
-              'bg-[var(--brand-primary-hex)] text-white shadow-[0_0_0_0_var(--brand-primary-hex)] hover:bg-[var(--brand-primary-hover-hex)] hover:shadow-[0_0_0_4px_rgba(127,47,255,0.15)]',
-              'disabled:opacity-50 disabled:hover:bg-[var(--brand-primary-hex)] disabled:hover:shadow-none'
-            )}
-          >
-            {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
-            {!userPerms.canAdmin ? 'Admin Access Required' : 'Send Invite'}
-          </button>
-        </div>
+            <Button
+              type='button'
+              variant='primary'
+              onClick={() => formRef.current?.requestSubmit()}
+              disabled={
+                !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites
+              }
+              className='ml-auto h-[32px] gap-[8px] px-[12px] text-[13px]'
+            >
+              {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
+              {!userPerms.canAdmin ? 'Admin Access Required' : 'Send Invite'}
+            </Button>
+          </ModalFooter>
+        </form>
       </ModalContent>
 
       {/* Remove Member Confirmation Dialog */}
       <Modal open={!!memberToRemove} onOpenChange={handleRemoveMemberCancel}>
         <ModalContent>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Remove Member
-            </h2>
+          <ModalHeader>Remove Member</ModalHeader>
+          <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
               Are you sure you want to remove{' '}
               <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
@@ -1199,35 +810,33 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                 This action cannot be undone.
               </span>
             </p>
-          </div>
-          <div className='flex justify-between gap-[8px]'>
+          </ModalBody>
+          <ModalFooter>
             <Button
               variant='default'
-              className='h-[32px] w-full px-[12px]'
               onClick={handleRemoveMemberCancel}
               disabled={isRemovingMember}
             >
               Cancel
             </Button>
-            <button
+            <Button
+              variant='primary'
               onClick={handleRemoveMemberConfirm}
               disabled={isRemovingMember}
-              className='h-[32px] w-full gap-[8px] rounded-[8px] bg-[var(--text-error)] px-[12px] font-medium text-[13px] text-white transition-all duration-200 hover:bg-[var(--text-error)] disabled:opacity-50 dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
             >
               {isRemovingMember && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Remove Member
-            </button>
-          </div>
+            </Button>
+          </ModalFooter>
         </ModalContent>
       </Modal>
 
       {/* Remove Invitation Confirmation Dialog */}
       <Modal open={!!invitationToRemove} onOpenChange={handleRemoveInvitationCancel}>
-        <ModalContent>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Cancel Invitation
-            </h2>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Cancel Invitation</ModalHeader>
+          <ModalBody>
             <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
               Are you sure you want to cancel the invitation for{' '}
               <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
@@ -1238,25 +847,25 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                 This action cannot be undone.
               </span>
             </p>
-          </div>
-          <div className='flex justify-between gap-[8px]'>
+          </ModalBody>
+          <ModalFooter>
             <Button
               variant='default'
-              className='h-[32px] w-full px-[12px]'
               onClick={handleRemoveInvitationCancel}
               disabled={isRemovingInvitation}
             >
               Cancel
             </Button>
-            <button
+            <Button
+              variant='primary'
               onClick={handleRemoveInvitationConfirm}
               disabled={isRemovingInvitation}
-              className='h-[32px] w-full gap-[8px] rounded-[8px] bg-[var(--text-error)] px-[12px] font-medium text-[13px] text-white transition-all duration-200 hover:bg-[var(--text-error)] disabled:opacity-50 dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
             >
               {isRemovingInvitation && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Cancel Invitation
-            </button>
-          </div>
+            </Button>
+          </ModalFooter>
         </ModalContent>
       </Modal>
     </Modal>
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
index 201ebf174f2..d6884e4b6af 100644
--- a/apps/sim/components/emcn/components/modal-new/modal.tsx
+++ b/apps/sim/components/emcn/components/modal-new/modal.tsx
@@ -148,7 +148,7 @@ const ModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] min-w-[30vw] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={style}
@@ -301,7 +301,7 @@ const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     <div
       ref={ref}
       className={cn(
-        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] pt-[10px] pb-[20px]',
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] py-[10px]',
         className
       )}
       {...props}

From 2fc20b165ee5d56714061770889594d0a3254d0b Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 22 Nov 2025 18:45:17 -0800
Subject: [PATCH 06/17] feat(terminal): height memory

---
 .cursorrules                                  |  2 +-
 .../diff-controls/diff-controls.tsx           |  8 +-
 .../notifications/notifications.tsx           | 10 ++-
 .../terminal/hooks/use-terminal-resize.ts     |  9 +-
 .../components/terminal/terminal.tsx          | 70 ++++++++++-----
 apps/sim/stores/terminal/console/store.ts     | 11 ---
 apps/sim/stores/terminal/store.ts             | 86 +++++++++++++++++--
 7 files changed, 146 insertions(+), 50 deletions(-)

diff --git a/.cursorrules b/.cursorrules
index 583c84e6539..a8f1e657b2f 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -8,7 +8,7 @@ ENSURE that you use the logger.info and logger.warn and logger.error instead of
 
 ## Comments
 
-You must use TSDOC for comments. Do not use ==== for comments to separate sections.
+You must use TSDOC for comments. Do not use ==== for comments to separate sections. Do not leave any comments that are not TSDOC. 
 
 ## Globals styles
 
diff --git a/apps/sim/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 2e7e5c328f3..570b2edc040 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -1,8 +1,10 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
+import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { mergeSubblockState } from '@/stores/workflows/utils'
@@ -11,6 +13,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const logger = createLogger('DiffControls')
 
 export const DiffControls = memo(function DiffControls() {
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
   // Optimized: Single diff store subscription
   const {
     isShowingDiff,
@@ -312,7 +315,10 @@ export const DiffControls = memo(function DiffControls() {
 
   return (
     <div
-      className='-translate-x-1/2 fixed left-1/2 z-30'
+      className={clsx(
+        '-translate-x-1/2 fixed left-1/2 z-30',
+        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+      )}
       style={{ bottom: 'calc(var(--terminal-height) + 40px)' }}
     >
       <div className='flex items-center gap-[6px] rounded-[10px] p-[6px]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
index fe40868ed1d..a95107029dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
@@ -1,4 +1,5 @@
 import { memo, useCallback } from 'react'
+import clsx from 'clsx'
 import { X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button } from '@/components/emcn'
@@ -10,6 +11,7 @@ import {
   openCopilotWithMessage,
   useNotificationStore,
 } from '@/stores/notifications'
+import { useTerminalStore } from '@/stores/terminal'
 
 const logger = createLogger('Notifications')
 const MAX_VISIBLE_NOTIFICATIONS = 4
@@ -29,6 +31,7 @@ export const Notifications = memo(function Notifications() {
   const removeNotification = useNotificationStore((state) => state.removeNotification)
   const clearNotifications = useNotificationStore((state) => state.clearNotifications)
   const visibleNotifications = notifications.slice(0, MAX_VISIBLE_NOTIFICATIONS)
+  const isTerminalResizing = useTerminalStore((state) => state.isResizing)
 
   /**
    * Executes a notification action and handles side effects.
@@ -95,7 +98,12 @@ export const Notifications = memo(function Notifications() {
   }
 
   return (
-    <div className='fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end'>
+    <div
+      className={clsx(
+        'fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end',
+        !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'
+      )}
+    >
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {
         const depth = stacked.length - index - 1
         const xOffset = depth * 3
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
index c8406c720f0..b387395a44f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
 import { useTerminalStore } from '@/stores/terminal'
 
 /**
@@ -15,15 +15,14 @@ const MAX_HEIGHT_PERCENTAGE = 0.7 // 70% of viewport height
  * @returns Resize state and handlers
  */
 export function useTerminalResize() {
-  const { setTerminalHeight } = useTerminalStore()
-  const [isResizing, setIsResizing] = useState(false)
+  const { setTerminalHeight, isResizing, setIsResizing } = useTerminalStore()
 
   /**
    * Handles mouse down on resize handle
    */
   const handleMouseDown = useCallback(() => {
     setIsResizing(true)
-  }, [])
+  }, [setIsResizing])
 
   /**
    * Setup resize event listeners and body styles when resizing
@@ -57,7 +56,7 @@ export function useTerminalResize() {
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     }
-  }, [isResizing, setTerminalHeight])
+  }, [isResizing, setTerminalHeight, setIsResizing])
 
   return {
     isResizing,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 81e4b38da97..c557c0e8463 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -35,11 +35,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks'
 import { getBlock } from '@/blocks'
 import type { ConsoleEntry } from '@/stores/terminal'
-import {
-  DEFAULT_TERMINAL_HEIGHT,
-  useTerminalConsoleStore,
-  useTerminalStore,
-} from '@/stores/terminal'
+import { useTerminalConsoleStore, useTerminalStore } from '@/stores/terminal'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 /**
@@ -254,9 +250,11 @@ const isEventFromEditableElement = (e: KeyboardEvent): boolean => {
 export function Terminal() {
   const terminalRef = useRef<HTMLElement>(null)
   const prevEntriesLengthRef = useRef(0)
+  const prevWorkflowEntriesLengthRef = useRef(0)
   const {
     terminalHeight,
     setTerminalHeight,
+    lastExpandedHeight,
     outputPanelWidth,
     setOutputPanelWidth,
     openOnRun,
@@ -301,6 +299,22 @@ export function Terminal() {
 
   const isExpanded = terminalHeight > NEAR_MIN_THRESHOLD
 
+  /**
+   * Expands the terminal to its last meaningful height, with safeguards:
+   * - Never expands below {@link DEFAULT_EXPANDED_HEIGHT}.
+   * - Never exceeds 70% of the viewport height.
+   */
+  const expandToLastHeight = useCallback(() => {
+    setIsToggling(true)
+    const maxHeight = window.innerHeight * 0.7
+    const desiredHeight = Math.max(
+      lastExpandedHeight || DEFAULT_EXPANDED_HEIGHT,
+      DEFAULT_EXPANDED_HEIGHT
+    )
+    const targetHeight = Math.min(desiredHeight, maxHeight)
+    setTerminalHeight(targetHeight)
+  }, [lastExpandedHeight, setTerminalHeight])
+
   /**
    * Get all entries for current workflow (before filtering) for filter options
    */
@@ -404,6 +418,28 @@ export function Terminal() {
     return selectedEntry.output
   }, [selectedEntry, showInput])
 
+  /**
+   * Auto-open the terminal on new entries when "Open on run" is enabled.
+   * This mirrors the header toggle behavior by using expandToLastHeight,
+   * ensuring we always get the same smooth height transition.
+   */
+  useEffect(() => {
+    if (!openOnRun) {
+      prevWorkflowEntriesLengthRef.current = allWorkflowEntries.length
+      return
+    }
+
+    const previousLength = prevWorkflowEntriesLengthRef.current
+    const currentLength = allWorkflowEntries.length
+
+    // Only react when new entries are added for the active workflow
+    if (currentLength > previousLength && terminalHeight <= MIN_HEIGHT) {
+      expandToLastHeight()
+    }
+
+    prevWorkflowEntriesLengthRef.current = currentLength
+  }, [allWorkflowEntries.length, expandToLastHeight, openOnRun, terminalHeight])
+
   /**
    * Handle row click - toggle if clicking same entry
    * Disables auto-selection when user manually selects, re-enables when deselecting
@@ -421,14 +457,13 @@ export function Terminal() {
    * Handle header click - toggle between expanded and collapsed
    */
   const handleHeaderClick = useCallback(() => {
-    setIsToggling(true)
-
     if (isExpanded) {
+      setIsToggling(true)
       setTerminalHeight(MIN_HEIGHT)
     } else {
-      setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
+      expandToLastHeight()
     }
-  }, [isExpanded, setTerminalHeight])
+  }, [expandToLastHeight, isExpanded, setTerminalHeight])
 
   /**
    * Handle transition end - reset toggling state
@@ -628,10 +663,7 @@ export function Terminal() {
       e.preventDefault()
 
       if (!isExpanded) {
-        setIsToggling(true)
-        const maxHeight = window.innerHeight * 0.7
-        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-        setTerminalHeight(targetHeight)
+        expandToLastHeight()
       }
 
       if (e.key === 'ArrowLeft') {
@@ -647,7 +679,7 @@ export function Terminal() {
 
     window.addEventListener('keydown', handleKeyDown)
     return () => window.removeEventListener('keydown', handleKeyDown)
-  }, [selectedEntry, showInput, hasInputData, isExpanded])
+  }, [expandToLastHeight, selectedEntry, showInput, hasInputData, isExpanded])
 
   /**
    * Handle Escape to unselect and Enter to re-enable auto-selection
@@ -1188,10 +1220,7 @@ export function Terminal() {
                     onClick={(e) => {
                       e.stopPropagation()
                       if (!isExpanded) {
-                        setIsToggling(true)
-                        const maxHeight = window.innerHeight * 0.7
-                        const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                        setTerminalHeight(targetHeight)
+                        expandToLastHeight()
                       }
                       if (showInput) setShowInput(false)
                     }}
@@ -1209,10 +1238,7 @@ export function Terminal() {
                       onClick={(e) => {
                         e.stopPropagation()
                         if (!isExpanded) {
-                          setIsToggling(true)
-                          const maxHeight = window.innerHeight * 0.7
-                          const targetHeight = Math.min(DEFAULT_EXPANDED_HEIGHT, maxHeight)
-                          setTerminalHeight(targetHeight)
+                          expandToLastHeight()
                         }
                         setShowInput(true)
                       }}
diff --git a/apps/sim/stores/terminal/console/store.ts b/apps/sim/stores/terminal/console/store.ts
index 127860a8de4..a02d5bb19e9 100644
--- a/apps/sim/stores/terminal/console/store.ts
+++ b/apps/sim/stores/terminal/console/store.ts
@@ -7,7 +7,6 @@ import { useExecutionStore } from '@/stores/execution/store'
 import { useNotificationStore } from '@/stores/notifications'
 import { useGeneralStore } from '@/stores/settings/general/store'
 import type { ConsoleEntry, ConsoleStore, ConsoleUpdate } from '@/stores/terminal/console/types'
-import { DEFAULT_TERMINAL_HEIGHT, MIN_TERMINAL_HEIGHT, useTerminalStore } from '../store'
 
 const logger = createLogger('TerminalConsoleStore')
 
@@ -130,16 +129,6 @@ export const useTerminalConsoleStore = create<ConsoleStore>()(
             }
           }
 
-          // Auto-expand terminal when new entries are appended and it is minimized
-          try {
-            const { openOnRun, terminalHeight, setTerminalHeight } = useTerminalStore.getState()
-            if (openOnRun && terminalHeight <= MIN_TERMINAL_HEIGHT) {
-              setTerminalHeight(DEFAULT_TERMINAL_HEIGHT)
-            }
-          } catch (error) {
-            logger.error('Failed to auto-expand terminal on new console entry', { error })
-          }
-
           return newEntry
         },
 
diff --git a/apps/sim/stores/terminal/store.ts b/apps/sim/stores/terminal/store.ts
index 65c99366eab..181ffc81d07 100644
--- a/apps/sim/stores/terminal/store.ts
+++ b/apps/sim/stores/terminal/store.ts
@@ -2,20 +2,39 @@ import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
 
 /**
- * Display mode type for terminal output
+ * Display mode type for terminal output.
+ *
+ * @remarks
+ * Currently unused but kept for future customization of terminal rendering.
  */
 // export type DisplayMode = 'raw' | 'prettier'
 
 /**
- * Terminal state interface
+ * Terminal state persisted across workspace sessions.
  */
 interface TerminalState {
   terminalHeight: number
   setTerminalHeight: (height: number) => void
+  lastExpandedHeight: number
   outputPanelWidth: number
   setOutputPanelWidth: (width: number) => void
   openOnRun: boolean
   setOpenOnRun: (open: boolean) => void
+  /**
+   * Indicates whether the terminal is currently being resized via mouse drag.
+   *
+   * @remarks
+   * This flag is used by other workspace UI elements (e.g. notifications,
+   * diff controls) to temporarily disable position transitions while the
+   * terminal height is actively changing, avoiding janky animations.
+   */
+  isResizing: boolean
+  /**
+   * Updates the {@link TerminalState.isResizing} flag.
+   *
+   * @param isResizing - True while the terminal is being resized.
+   */
+  setIsResizing: (isResizing: boolean) => void
   // displayMode: DisplayMode
   // setDisplayMode: (mode: DisplayMode) => void
   _hasHydrated: boolean
@@ -23,20 +42,23 @@ interface TerminalState {
 }
 
 /**
- * Terminal height constraints
- * Note: Maximum height is enforced dynamically at 70% of viewport height in the resize hook
+ * Terminal height constraints.
+ *
+ * @remarks
+ * The maximum height is enforced dynamically at 70% of the viewport height
+ * inside the resize hook to keep the workflow canvas visible.
  */
 export const MIN_TERMINAL_HEIGHT = 30
 export const DEFAULT_TERMINAL_HEIGHT = 196
 
 /**
- * Output panel width constraints
+ * Output panel width constraints.
  */
 const MIN_OUTPUT_PANEL_WIDTH = 300
 const DEFAULT_OUTPUT_PANEL_WIDTH = 400
 
 /**
- * Default display mode
+ * Default display mode for terminal output.
  */
 // const DEFAULT_DISPLAY_MODE: DisplayMode = 'prettier'
 
@@ -44,21 +66,56 @@ export const useTerminalStore = create<TerminalState>()(
   persist(
     (set) => ({
       terminalHeight: DEFAULT_TERMINAL_HEIGHT,
+      lastExpandedHeight: DEFAULT_TERMINAL_HEIGHT,
+      isResizing: false,
+      /**
+       * Updates the terminal height and synchronizes the CSS custom property.
+       *
+       * @remarks
+       * - Enforces a minimum height to keep the resize handle usable.
+       * - Persists {@link TerminalState.lastExpandedHeight} only when the
+       *   height is expanded above the minimum.
+       *
+       * @param height - Desired terminal height in pixels.
+       */
       setTerminalHeight: (height) => {
-        // Only enforce minimum - maximum is enforced dynamically by the resize hook
         const clampedHeight = Math.max(MIN_TERMINAL_HEIGHT, height)
-        set({ terminalHeight: clampedHeight })
+
+        set((state) => ({
+          terminalHeight: clampedHeight,
+          lastExpandedHeight:
+            clampedHeight > MIN_TERMINAL_HEIGHT ? clampedHeight : state.lastExpandedHeight,
+        }))
+
         // Update CSS variable for immediate visual feedback
         if (typeof window !== 'undefined') {
           document.documentElement.style.setProperty('--terminal-height', `${clampedHeight}px`)
         }
       },
+      /**
+       * Updates the terminal resize state used to coordinate layout transitions.
+       *
+       * @param isResizing - True while the terminal is being resized via mouse drag.
+       */
+      setIsResizing: (isResizing) => {
+        set({ isResizing })
+      },
       outputPanelWidth: DEFAULT_OUTPUT_PANEL_WIDTH,
+      /**
+       * Updates the output panel width, enforcing the minimum constraint.
+       *
+       * @param width - Desired width in pixels for the output panel.
+       */
       setOutputPanelWidth: (width) => {
         const clampedWidth = Math.max(MIN_OUTPUT_PANEL_WIDTH, width)
         set({ outputPanelWidth: clampedWidth })
       },
       openOnRun: true,
+      /**
+       * Enables or disables automatic terminal opening when new entries are added.
+       *
+       * @param open - Whether the terminal should open on new console entries.
+       */
       setOpenOnRun: (open) => {
         set({ openOnRun: open })
       },
@@ -66,15 +123,26 @@ export const useTerminalStore = create<TerminalState>()(
       // setDisplayMode: (mode) => {
       //   set({ displayMode: mode })
       // },
+      /**
+       * Indicates whether the terminal store has finished client-side hydration.
+       */
       _hasHydrated: false,
+      /**
+       * Marks the store as hydrated on the client.
+       *
+       * @param hasHydrated - True when client-side hydration is complete.
+       */
       setHasHydrated: (hasHydrated) => {
         set({ _hasHydrated: hasHydrated })
       },
     }),
     {
       name: 'terminal-state',
+      /**
+       * Synchronizes the `--terminal-height` CSS custom property with the
+       * persisted store value after client-side rehydration.
+       */
       onRehydrateStorage: () => (state) => {
-        // Sync CSS variables with stored state after rehydration
         if (state && typeof window !== 'undefined') {
           document.documentElement.style.setProperty(
             '--terminal-height',

From ab0e86ba9b27629b53b10af17870dc60965d7184 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 22 Nov 2025 18:52:09 -0800
Subject: [PATCH 07/17] improvement(invite-modal): skeleton ui

---
 .../invite-modal/components/permissions-table-skeleton.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
index 328da0ce695..ca9105d7a7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table-skeleton.tsx
@@ -11,9 +11,9 @@ export const PermissionsTableSkeleton = React.memo(() => (
       </div>
       <div className='flex flex-shrink-0 items-center'>
         <div className='inline-flex gap-[2px]'>
-          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
-          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
-          <Skeleton className='h-[28px] w-[52px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
+          <Skeleton className='h-[26px] w-[44px] rounded-[4px]' />
         </div>
       </div>
     </div>

From c6c5d16a500357fb8085f5c8b388fde7779f2ce4 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 24 Nov 2025 12:40:49 -0800
Subject: [PATCH 08/17] improvement(invite-modal): badges UI

---
 .../components/invite-modal/components/email-tag.tsx   | 10 +++++-----
 .../invite-modal/components/permissions-table.tsx      |  8 ++++++--
 .../components/invite-modal/invite-modal.tsx           |  6 +++---
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
index 74895c55350..19705a217dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -14,10 +14,10 @@ export const EmailTag = React.memo<EmailTagProps>(
   ({ email, onRemove, disabled, isInvalid, isSent }) => (
     <div
       className={cn(
-        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[8px] py-[4px] text-[12px]',
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
         isInvalid
-          ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-400'
-          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)]'
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:border-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)] dark:text-[var(--text-error)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)] dark:hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
@@ -33,12 +33,12 @@ export const EmailTag = React.memo<EmailTagProps>(
           className={cn(
             'flex-shrink-0 transition-colors focus:outline-none',
             isInvalid
-              ? 'text-red-400 hover:text-red-600 dark:text-red-400 dark:hover:text-red-300'
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)] dark:text-[var(--text-error)] dark:hover:text-[var(--text-error)]'
               : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
           )}
           aria-label={`Remove ${email}`}
         >
-          <X className='h-[14px] w-[14px]' />
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
         </button>
       )}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
index ba58e6eed69..63bc7bbd10c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -178,7 +178,7 @@ export const PermissionsTable = ({
                       {user.email}
                     </span>
                     {isPendingInvitation && (
-                      <Badge variant='default' className='gap-[4px]'>
+                      <Badge variant='default' className='gap-[4px] text-[12px]'>
                         {resendingInvitationIds &&
                         user.invitationId &&
                         resendingInvitationIds[user.invitationId] ? (
@@ -195,7 +195,11 @@ export const PermissionsTable = ({
                         )}
                       </Badge>
                     )}
-                    {hasChanges && <Badge variant='default'>Modified</Badge>}
+                    {hasChanges && (
+                      <Badge variant='default' className='text-[12px]'>
+                        Modified
+                      </Badge>
+                    )}
 
                     {isPendingInvitation &&
                       currentUserIsAdmin &&
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index 6366b72622b..460ce8296b3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -672,7 +672,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         onOpenChange(newOpen)
       }}
     >
-      <ModalContent className='w-[600px]'>
+      <ModalContent className='w-[500px]'>
         <ModalHeader>Invite members to {workspaceName || 'Workspace'}</ModalHeader>
 
         <form ref={formRef} onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
@@ -786,10 +786,10 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               disabled={
                 !userPerms.canAdmin || isSubmitting || isSaving || !workspaceId || !hasNewInvites
               }
-              className='ml-auto h-[32px] gap-[8px] px-[12px] text-[13px]'
+              className='ml-auto'
             >
               {isSubmitting && <Loader2 className='h-4 w-4 animate-spin' />}
-              {!userPerms.canAdmin ? 'Admin Access Required' : 'Send Invite'}
+              {!userPerms.canAdmin ? 'Admin Access Required' : 'Invite'}
             </Button>
           </ModalFooter>
         </form>

From d7a32d0ba75590deb5064a90f1be547fcb91264b Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 25 Nov 2025 03:42:56 -0800
Subject: [PATCH 09/17] feat: deploy-modal, emcn

---
 .../output-select/output-select.tsx           |   3 +-
 .../components/note-block/note-block.tsx      |   9 +-
 .../deploy-modal/components/api-endpoint.tsx  |  25 -
 .../deploy-modal/components/api/api.tsx       | 664 +++++++++++++
 .../deploy-modal/components/auth-selector.tsx | 293 ------
 .../deploy-modal/components/chat-deploy.tsx   | 486 ---------
 .../deploy-modal/components/chat/chat.tsx     | 870 ++++++++++++++++
 .../components/chat/hooks/index.ts            |   2 +
 .../chat/hooks/use-chat-deployment.ts         | 131 +++
 .../chat}/hooks/use-identifier-validation.ts  |  30 +-
 .../deploy-modal/components/deploy-status.tsx |  40 -
 .../components/deployed-workflow-card.tsx     | 121 ---
 .../components/deployed-workflow-modal.tsx    | 170 ----
 .../components/deployment-info.tsx            | 203 ----
 .../components/example-command.tsx            | 231 -----
 .../components/general/components/index.ts    |   1 +
 .../general/components/versions.tsx           | 334 +++++++
 .../components/general/general.tsx            | 308 ++++++
 .../components/identifier-input.tsx           |  78 --
 .../deploy-modal/components/success-view.tsx  |  81 --
 .../components/template-deploy.tsx            | 489 ---------
 .../components/template/template.tsx          | 451 +++++++++
 .../components/deploy-modal/deploy-modal.tsx  | 936 +++++++++---------
 .../panel/components/deploy/deploy.tsx        |   2 +-
 .../deploy/hooks/hooks/use-chat-deployment.ts | 156 ---
 .../deploy/hooks/hooks/use-chat-form.ts       | 116 ---
 .../components/starter/input-format.tsx       |   2 +-
 .../w/[workflowId]/components/panel/panel.tsx |   8 +-
 .../workflow-block/workflow-block.tsx         |   8 +-
 .../w/[workflowId]/hooks/index.ts             |   2 +-
 ...{use-block-core.ts => use-block-visual.ts} |  68 +-
 .../workflow-preview/workflow-preview.tsx     |  29 +-
 .../emcn/components/modal-new/modal.tsx       |  68 +-
 .../emcn/components/popover/popover.tsx       |   7 +
 apps/sim/components/ui/tag-input.tsx          |  57 +-
 35 files changed, 3401 insertions(+), 3078 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/{hooks => components/deploy-modal/components/chat}/hooks/use-identifier-validation.ts (75%)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/{use-block-core.ts => use-block-visual.ts} (54%)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index 239ee18963d..40ff4824453 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -65,7 +65,7 @@ export function OutputSelect({
   valueMode = 'id',
   disablePopoverPortal = false,
   align = 'start',
-  maxHeight = 300,
+  maxHeight = 200,
 }: OutputSelectProps) {
   const [open, setOpen] = useState(false)
   const [highlightedIndex, setHighlightedIndex] = useState(-1)
@@ -423,6 +423,7 @@ export function OutputSelect({
         maxHeight={maxHeight}
         maxWidth={300}
         minWidth={160}
+        border
         disablePortal={disablePopoverPortal}
         onKeyDown={handleKeyDown}
         tabIndex={0}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 9e5e870f3e8..d171783bf54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -4,7 +4,7 @@ import type { NodeProps } from 'reactflow'
 import remarkGfm from 'remark-gfm'
 import { cn } from '@/lib/core/utils/cn'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
-import { useBlockCore } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
@@ -121,9 +121,10 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
 export const NoteBlock = memo(function NoteBlock({ id, data }: NodeProps<NoteBlockNodeData>) {
   const { type, config, name } = data
 
-  const { activeWorkflowId, isEnabled, isFocused, handleClick, hasRing, ringStyles } = useBlockCore(
-    { blockId: id, data }
-  )
+  const { activeWorkflowId, isEnabled, handleClick, hasRing, ringStyles } = useBlockVisual({
+    blockId: id,
+    data,
+  })
   const storedValues = useSubBlockStore(
     useCallback(
       (state) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx
deleted file mode 100644
index c18800c123e..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-
-import { Label } from '@/components/emcn'
-import { CopyButton } from '@/components/ui/copy-button'
-
-interface ApiEndpointProps {
-  endpoint: string
-  showLabel?: boolean
-}
-
-export function ApiEndpoint({ endpoint, showLabel = true }: ApiEndpointProps) {
-  return (
-    <div className='space-y-1.5'>
-      {showLabel && (
-        <div className='flex items-center gap-1.5'>
-          <Label className='font-medium text-sm'>API Endpoint</Label>
-        </div>
-      )}
-      <div className='group relative rounded-md border bg-background transition-colors hover:bg-muted/50'>
-        <pre className='overflow-x-auto whitespace-pre-wrap p-3 font-mono text-xs'>{endpoint}</pre>
-        <CopyButton text={endpoint} />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
new file mode 100644
index 00000000000..96225fb3b26
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -0,0 +1,664 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Clipboard } from 'lucide-react'
+import {
+  Badge,
+  Button,
+  Code,
+  Label,
+  Popover,
+  PopoverContent,
+  PopoverItem,
+  PopoverTrigger,
+  Tooltip,
+} from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
+import { getEnv, isTruthy } from '@/lib/env'
+import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
+
+interface WorkflowDeploymentInfo {
+  isDeployed: boolean
+  deployedAt?: string
+  apiKey: string
+  endpoint: string
+  exampleCommand: string
+  needsRedeployment: boolean
+}
+
+interface ApiDeployProps {
+  workflowId: string | null
+  deploymentInfo: WorkflowDeploymentInfo | null
+  isLoading: boolean
+  needsRedeployment: boolean
+  apiDeployError: string | null
+  getInputFormatExample: (includeStreaming?: boolean) => string
+  selectedStreamingOutputs: string[]
+  onSelectedStreamingOutputsChange: (outputs: string[]) => void
+}
+
+type AsyncExampleType = 'execute' | 'status' | 'rate-limits'
+type CodeLanguage = 'curl' | 'python' | 'javascript' | 'typescript'
+
+type CopiedState = {
+  endpoint: boolean // @remark: not used
+  sync: boolean
+  stream: boolean
+  async: boolean
+}
+
+const LANGUAGE_LABELS: Record<CodeLanguage, string> = {
+  curl: 'cURL',
+  python: 'Python',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+}
+
+const LANGUAGE_SYNTAX: Record<CodeLanguage, 'python' | 'javascript' | 'json'> = {
+  curl: 'javascript',
+  python: 'python',
+  javascript: 'javascript',
+  typescript: 'javascript',
+}
+
+export function ApiDeploy({
+  workflowId,
+  deploymentInfo,
+  isLoading,
+  needsRedeployment,
+  apiDeployError,
+  getInputFormatExample,
+  selectedStreamingOutputs,
+  onSelectedStreamingOutputsChange,
+}: ApiDeployProps) {
+  const [asyncExampleType, setAsyncExampleType] = useState<AsyncExampleType>('execute')
+  const [language, setLanguage] = useState<CodeLanguage>('curl')
+  const [copied, setCopied] = useState<CopiedState>({
+    endpoint: false, // @remark: not used
+    sync: false,
+    stream: false,
+    async: false,
+  })
+
+  const isAsyncEnabled = isTruthy(getEnv('NEXT_PUBLIC_TRIGGER_DEV_ENABLED'))
+  const info = deploymentInfo ? { ...deploymentInfo, needsRedeployment } : null
+
+  const getBaseEndpoint = () => {
+    if (!info) return ''
+    return info.endpoint.replace(info.apiKey, '$SIM_API_KEY')
+  }
+
+  const getPayloadObject = (): Record<string, unknown> => {
+    const inputExample = getInputFormatExample ? getInputFormatExample(false) : ''
+    const match = inputExample.match(/-d\s*'([\s\S]*)'/)
+    if (match) {
+      try {
+        return JSON.parse(match[1]) as Record<string, unknown>
+      } catch {
+        return { input: 'your data here' }
+      }
+    }
+    return { input: 'your data here' }
+  }
+
+  const getStreamPayloadObject = (): Record<string, unknown> => {
+    const payload: Record<string, unknown> = { ...getPayloadObject(), stream: true }
+    if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
+      payload.selectedOutputs = selectedStreamingOutputs
+    }
+    return payload
+  }
+
+  const getSyncCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const payload = getPayloadObject()
+
+    switch (language) {
+      case 'curl':
+        return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+      case 'python':
+        return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')}
+)
+
+print(response.json())`
+
+      case 'javascript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const data = await response.json();
+console.log(data);`
+
+      case 'typescript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const data: Record<string, unknown> = await response.json();
+console.log(data);`
+
+      default:
+        return ''
+    }
+  }
+
+  const getStreamCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const payload = getStreamPayloadObject()
+
+    switch (language) {
+      case 'curl':
+        return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+      case 'python':
+        return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')},
+    stream=True
+)
+
+for line in response.iter_lines():
+    if line:
+        print(line.decode("utf-8"))`
+
+      case 'javascript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const reader = response.body.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) break;
+  console.log(decoder.decode(value));
+}`
+
+      case 'typescript':
+        return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const reader = response.body!.getReader();
+const decoder = new TextDecoder();
+
+while (true) {
+  const { done, value } = await reader.read();
+  if (done) break;
+  console.log(decoder.decode(value));
+}`
+
+      default:
+        return ''
+    }
+  }
+
+  const getAsyncCommand = (): string => {
+    if (!info) return ''
+    const endpoint = getBaseEndpoint()
+    const baseUrl = endpoint.split('/api/workflows/')[0]
+    const payload = getPayloadObject()
+
+    switch (asyncExampleType) {
+      case 'execute':
+        switch (language) {
+          case 'curl':
+            return `curl -X POST \\
+  -H "X-API-Key: $SIM_API_KEY" \\
+  -H "Content-Type: application/json" \\
+  -H "X-Execution-Mode: async" \\
+  -d '${JSON.stringify(payload)}' \\
+  ${endpoint}`
+
+          case 'python':
+            return `import requests
+
+response = requests.post(
+    "${endpoint}",
+    headers={
+        "X-API-Key": SIM_API_KEY,
+        "Content-Type": "application/json",
+        "X-Execution-Mode": "async"
+    },
+    json=${JSON.stringify(payload, null, 4).replace(/\n/g, '\n    ')}
+)
+
+job = response.json()
+print(job)  # Contains job_id for status checking`
+
+          case 'javascript':
+            return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json",
+    "X-Execution-Mode": "async"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const job = await response.json();
+console.log(job); // Contains job_id for status checking`
+
+          case 'typescript':
+            return `const response = await fetch("${endpoint}", {
+  method: "POST",
+  headers: {
+    "X-API-Key": SIM_API_KEY,
+    "Content-Type": "application/json",
+    "X-Execution-Mode": "async"
+  },
+  body: JSON.stringify(${JSON.stringify(payload)})
+});
+
+const job: { job_id: string } = await response.json();
+console.log(job); // Contains job_id for status checking`
+
+          default:
+            return ''
+        }
+
+      case 'status':
+        switch (language) {
+          case 'curl':
+            return `curl -H "X-API-Key: $SIM_API_KEY" \\
+  ${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION`
+
+          case 'python':
+            return `import requests
+
+response = requests.get(
+    "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+    headers={"X-API-Key": SIM_API_KEY}
+)
+
+status = response.json()
+print(status)`
+
+          case 'javascript':
+            return `const response = await fetch(
+  "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const status = await response.json();
+console.log(status);`
+
+          case 'typescript':
+            return `const response = await fetch(
+  "${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const status: Record<string, unknown> = await response.json();
+console.log(status);`
+
+          default:
+            return ''
+        }
+
+      case 'rate-limits':
+        switch (language) {
+          case 'curl':
+            return `curl -H "X-API-Key: $SIM_API_KEY" \\
+  ${baseUrl}/api/users/me/usage-limits`
+
+          case 'python':
+            return `import requests
+
+response = requests.get(
+    "${baseUrl}/api/users/me/usage-limits",
+    headers={"X-API-Key": SIM_API_KEY}
+)
+
+limits = response.json()
+print(limits)`
+
+          case 'javascript':
+            return `const response = await fetch(
+  "${baseUrl}/api/users/me/usage-limits",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const limits = await response.json();
+console.log(limits);`
+
+          case 'typescript':
+            return `const response = await fetch(
+  "${baseUrl}/api/users/me/usage-limits",
+  {
+    headers: { "X-API-Key": SIM_API_KEY }
+  }
+);
+
+const limits: Record<string, unknown> = await response.json();
+console.log(limits);`
+
+          default:
+            return ''
+        }
+
+      default:
+        return ''
+    }
+  }
+
+  const getAsyncExampleTitle = () => {
+    switch (asyncExampleType) {
+      case 'execute':
+        return 'Execute Job'
+      case 'status':
+        return 'Check Status'
+      case 'rate-limits':
+        return 'Rate Limits'
+      default:
+        return 'Execute Job'
+    }
+  }
+
+  const handleCopy = (key: keyof CopiedState, value: string) => {
+    navigator.clipboard.writeText(value)
+    setCopied((prev) => ({ ...prev, [key]: true }))
+    setTimeout(() => setCopied((prev) => ({ ...prev, [key]: false })), 2000)
+  }
+
+  if (isLoading || !info) {
+    return (
+      <div className='space-y-[16px]'>
+        {apiDeployError && (
+          <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+            <div className='font-semibold'>API Deployment Error</div>
+            <div>{apiDeployError}</div>
+          </div>
+        )}
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[62px]' />
+          <Skeleton className='h-[28px] w-[260px] rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
+          <Skeleton className='h-[120px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[180px]' />
+          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='space-y-[16px]'>
+      {apiDeployError && (
+        <div className='rounded-[4px] border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
+          <div className='font-semibold'>API Deployment Error</div>
+          <div>{apiDeployError}</div>
+        </div>
+      )}
+
+      {/* <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            URL
+          </Label>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={() => handleCopy('endpoint', info.endpoint)}
+                aria-label='Copy endpoint'
+                className='!p-1.5 -my-1.5'
+              >
+                {copied.endpoint ? (
+                  <Check className='h-3 w-3' />
+                ) : (
+                  <Clipboard className='h-3 w-3' />
+                )}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              <span>{copied.endpoint ? 'Copied' : 'Copy'}</span>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </div>
+        <Code.Viewer
+          code={info.endpoint}
+          language='javascript'
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div> */}
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Language
+          </Label>
+        </div>
+        <div className='inline-flex gap-[2px]'>
+          {(Object.keys(LANGUAGE_LABELS) as CodeLanguage[]).map((lang, index, arr) => (
+            <Button
+              key={lang}
+              type='button'
+              variant={language === lang ? 'active' : 'default'}
+              onClick={() => setLanguage(lang)}
+              className={`px-[8px] py-[4px] text-[12px] ${
+                index === 0
+                  ? 'rounded-r-none'
+                  : index === arr.length - 1
+                    ? 'rounded-l-none'
+                    : 'rounded-none'
+              }`}
+            >
+              {LANGUAGE_LABELS[lang]}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Run workflow
+          </Label>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                variant='ghost'
+                onClick={() => handleCopy('sync', getSyncCommand())}
+                aria-label='Copy command'
+                className='!p-1.5 -my-1.5'
+              >
+                {copied.sync ? <Check className='h-3 w-3' /> : <Clipboard className='h-3 w-3' />}
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>
+              <span>{copied.sync ? 'Copied' : 'Copy'}</span>
+            </Tooltip.Content>
+          </Tooltip.Root>
+        </div>
+        <Code.Viewer
+          code={getSyncCommand()}
+          language={LANGUAGE_SYNTAX[language]}
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div>
+
+      <div>
+        <div className='mb-[6.5px] flex items-center justify-between'>
+          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Run workflow (stream response)
+          </Label>
+          <div className='flex items-center gap-[8px]'>
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <Button
+                  variant='ghost'
+                  onClick={() => handleCopy('stream', getStreamCommand())}
+                  aria-label='Copy command'
+                  className='!p-1.5 -my-1.5'
+                >
+                  {copied.stream ? (
+                    <Check className='h-3 w-3' />
+                  ) : (
+                    <Clipboard className='h-3 w-3' />
+                  )}
+                </Button>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <span>{copied.stream ? 'Copied' : 'Copy'}</span>
+              </Tooltip.Content>
+            </Tooltip.Root>
+            <OutputSelect
+              workflowId={workflowId}
+              selectedOutputs={selectedStreamingOutputs}
+              onOutputSelect={onSelectedStreamingOutputsChange}
+              placeholder='Select outputs'
+              valueMode='label'
+              align='end'
+            />
+          </div>
+        </div>
+        <Code.Viewer
+          code={getStreamCommand()}
+          language={LANGUAGE_SYNTAX[language]}
+          wrapText
+          className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+        />
+      </div>
+
+      {isAsyncEnabled && (
+        <div>
+          <div className='mb-[6.5px] flex items-center justify-between'>
+            <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Run workflow (async)
+            </Label>
+            <div className='flex items-center gap-[8px]'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={() => handleCopy('async', getAsyncCommand())}
+                    aria-label='Copy command'
+                    className='!p-1.5 -my-1.5'
+                  >
+                    {copied.async ? (
+                      <Check className='h-3 w-3' />
+                    ) : (
+                      <Clipboard className='h-3 w-3' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{copied.async ? 'Copied' : 'Copy'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <div className='min-w-0 max-w-full'>
+                    <Badge
+                      variant='outline'
+                      className='flex-none cursor-pointer whitespace-nowrap rounded-[6px]'
+                    >
+                      <span className='whitespace-nowrap text-[12px]'>
+                        {getAsyncExampleTitle()}
+                      </span>
+                    </Badge>
+                  </div>
+                </PopoverTrigger>
+                <PopoverContent
+                  side='bottom'
+                  align='end'
+                  sideOffset={4}
+                  maxHeight={300}
+                  maxWidth={300}
+                  minWidth={160}
+                  border
+                >
+                  <PopoverItem
+                    active={asyncExampleType === 'execute'}
+                    onClick={() => setAsyncExampleType('execute')}
+                  >
+                    Execute Job
+                  </PopoverItem>
+                  <PopoverItem
+                    active={asyncExampleType === 'status'}
+                    onClick={() => setAsyncExampleType('status')}
+                  >
+                    Check Status
+                  </PopoverItem>
+                  <PopoverItem
+                    active={asyncExampleType === 'rate-limits'}
+                    onClick={() => setAsyncExampleType('rate-limits')}
+                  >
+                    Rate Limits
+                  </PopoverItem>
+                </PopoverContent>
+              </Popover>
+            </div>
+          </div>
+          <Code.Viewer
+            code={getAsyncCommand()}
+            language={LANGUAGE_SYNTAX[language]}
+            wrapText
+            className='!min-h-0 rounded-[4px] border border-[var(--border-strong)]'
+          />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx
deleted file mode 100644
index f5080afef4c..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector.tsx
+++ /dev/null
@@ -1,293 +0,0 @@
-import { useState } from 'react'
-import { Check, Copy, Eye, EyeOff, Plus, RefreshCw } from 'lucide-react'
-import { Button, Input, Label } from '@/components/emcn'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Card, CardContent } from '@/components/ui'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { generatePassword } from '@/lib/core/security/encryption'
-import { cn } from '@/lib/core/utils/cn'
-import type { AuthType } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-
-interface AuthSelectorProps {
-  authType: AuthType
-  password: string
-  emails: string[]
-  onAuthTypeChange: (type: AuthType) => void
-  onPasswordChange: (password: string) => void
-  onEmailsChange: (emails: string[]) => void
-  disabled?: boolean
-  isExistingChat?: boolean
-  error?: string
-}
-
-export function AuthSelector({
-  authType,
-  password,
-  emails,
-  onAuthTypeChange,
-  onPasswordChange,
-  onEmailsChange,
-  disabled = false,
-  isExistingChat = false,
-  error,
-}: AuthSelectorProps) {
-  const [showPassword, setShowPassword] = useState(false)
-  const [newEmail, setNewEmail] = useState('')
-  const [emailError, setEmailError] = useState('')
-  const [copySuccess, setCopySuccess] = useState(false)
-
-  const handleGeneratePassword = () => {
-    const password = generatePassword(24)
-    onPasswordChange(password)
-  }
-
-  const copyToClipboard = (text: string) => {
-    navigator.clipboard.writeText(text)
-    setCopySuccess(true)
-    setTimeout(() => setCopySuccess(false), 2000)
-  }
-
-  const handleAddEmail = () => {
-    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail) && !newEmail.startsWith('@')) {
-      setEmailError('Please enter a valid email or domain (e.g., user@example.com or @example.com)')
-      return
-    }
-
-    if (emails.includes(newEmail)) {
-      setEmailError('This email or domain is already in the list')
-      return
-    }
-
-    onEmailsChange([...emails, newEmail])
-    setNewEmail('')
-    setEmailError('')
-  }
-
-  const handleRemoveEmail = (email: string) => {
-    onEmailsChange(emails.filter((e) => e !== email))
-  }
-
-  const ssoEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
-  const authOptions = ssoEnabled
-    ? (['public', 'password', 'email', 'sso'] as const)
-    : (['public', 'password', 'email'] as const)
-
-  return (
-    <div className='space-y-2'>
-      <Label className='font-medium text-sm'>Access Control</Label>
-
-      {/* Auth Type Selection */}
-      <div
-        className={cn('grid grid-cols-1 gap-3', ssoEnabled ? 'md:grid-cols-4' : 'md:grid-cols-3')}
-      >
-        {authOptions.map((type) => (
-          <Card
-            key={type}
-            className={cn(
-              'cursor-pointer overflow-hidden rounded-[4px] shadow-none transition-all duration-200',
-              authType === type
-                ? 'border border-[#727272] bg-[var(--border-strong)] dark:border-[#727272] dark:bg-[var(--border-strong)]'
-                : 'border border-[var(--surface-11)] bg-[var(--surface-6)] hover:bg-[var(--surface-9)] dark:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-11)]'
-            )}
-          >
-            <CardContent className='relative flex flex-col items-center justify-center p-3 text-center'>
-              <button
-                type='button'
-                className='absolute inset-0 z-10 h-full w-full cursor-pointer'
-                onClick={() => !disabled && onAuthTypeChange(type)}
-                aria-label={`Select ${type} access`}
-                disabled={disabled}
-              />
-              <div className='justify-center text-center align-middle'>
-                <h3
-                  className={cn(
-                    'font-medium text-xs',
-                    authType === type && 'text-[var(--text-primary)]'
-                  )}
-                >
-                  {type === 'public' && 'Public Access'}
-                  {type === 'password' && 'Password Protected'}
-                  {type === 'email' && 'Email Access'}
-                  {type === 'sso' && 'SSO Access'}
-                </h3>
-                <p className='text-[11px] text-[var(--text-tertiary)]'>
-                  {type === 'public' && 'Anyone can access your chat'}
-                  {type === 'password' && 'Secure with a single password'}
-                  {type === 'email' && 'Restrict to specific emails'}
-                  {type === 'sso' && 'Authenticate via SSO provider'}
-                </p>
-              </div>
-            </CardContent>
-          </Card>
-        ))}
-      </div>
-
-      {/* Auth Settings */}
-      {authType === 'password' && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              Password Settings
-            </h3>
-
-            {isExistingChat && !password && (
-              <div className='mb-2 flex items-center text-[11px] text-[var(--text-secondary)]'>
-                <div className='mr-2 rounded-full bg-[var(--surface-9)] px-2 py-0.5 font-medium text-[var(--text-secondary)] dark:bg-[var(--surface-11)]'>
-                  Password set
-                </div>
-                <span>Current password is securely stored</span>
-              </div>
-            )}
-
-            <div className='relative'>
-              <Input
-                type={showPassword ? 'text' : 'password'}
-                placeholder={
-                  isExistingChat
-                    ? 'Enter new password (leave empty to keep current)'
-                    : 'Enter password'
-                }
-                value={password}
-                onChange={(e) => onPasswordChange(e.target.value)}
-                disabled={disabled}
-                className='pr-28'
-                required={!isExistingChat}
-                autoComplete='new-password'
-              />
-              <div className='-translate-y-1/2 absolute top-1/2 right-1 flex items-center gap-1'>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={handleGeneratePassword}
-                  disabled={disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  <RefreshCw className='h-3.5 w-3.5 transition-transform duration-200 hover:rotate-90' />
-                  <span className='sr-only'>Generate password</span>
-                </Button>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={() => copyToClipboard(password)}
-                  disabled={!password || disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  {copySuccess ? (
-                    <Check className='h-3.5 w-3.5' />
-                  ) : (
-                    <Copy className='h-3.5 w-3.5' />
-                  )}
-                  <span className='sr-only'>Copy password</span>
-                </Button>
-                <Button
-                  type='button'
-                  variant='ghost'
-                  onClick={() => setShowPassword(!showPassword)}
-                  disabled={disabled}
-                  className='h-6 w-6 p-0'
-                >
-                  {showPassword ? (
-                    <EyeOff className='h-3.5 w-3.5' />
-                  ) : (
-                    <Eye className='h-3.5 w-3.5' />
-                  )}
-                  <span className='sr-only'>
-                    {showPassword ? 'Hide password' : 'Show password'}
-                  </span>
-                </Button>
-              </div>
-            </div>
-
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              {isExistingChat
-                ? 'Leaving this empty will keep the current password. Enter a new password to change it.'
-                : 'This password will be required to access your chat.'}
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {(authType === 'email' || authType === 'sso') && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              {authType === 'email' ? 'Email Access Settings' : 'SSO Access Settings'}
-            </h3>
-
-            <div className='flex gap-2'>
-              <Input
-                placeholder='user@example.com or @domain.com'
-                value={newEmail}
-                onChange={(e) => setNewEmail(e.target.value)}
-                disabled={disabled}
-                className='flex-1'
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    e.preventDefault()
-                    handleAddEmail()
-                  }
-                }}
-              />
-              <Button
-                type='button'
-                variant='default'
-                onClick={handleAddEmail}
-                disabled={!newEmail.trim() || disabled}
-                className='shrink-0 gap-[4px]'
-              >
-                <Plus className='h-4 w-4' />
-                Add
-              </Button>
-            </div>
-
-            {emailError && <p className='mt-1 text-destructive text-sm'>{emailError}</p>}
-
-            {emails.length > 0 && (
-              <div className='mt-3 max-h-[150px] overflow-y-auto rounded-md border bg-background px-2 py-0 shadow-none'>
-                <ul className='divide-y divide-border'>
-                  {emails.map((email) => (
-                    <li key={email} className='relative'>
-                      <div className='group my-1 flex items-center justify-between rounded-sm px-2 py-2 text-sm'>
-                        <span className='font-medium text-foreground'>{email}</span>
-                        <Button
-                          type='button'
-                          variant='ghost'
-                          onClick={() => handleRemoveEmail(email)}
-                          disabled={disabled}
-                          className='h-7 w-7 p-0 opacity-70'
-                        >
-                          <Trash className='h-4 w-4' />
-                        </Button>
-                      </div>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            )}
-
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              {authType === 'email'
-                ? 'Add specific emails or entire domains (@example.com)'
-                : 'Add specific emails or entire domains (@example.com) that can access via SSO'}
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {authType === 'public' && (
-        <Card className='rounded-[4px] border-[var(--surface-11)] bg-[var(--surface-6)] shadow-none dark:bg-[var(--surface-9)]'>
-          <CardContent className='p-4'>
-            <h3 className='mb-2 font-medium text-[var(--text-primary)] text-xs'>
-              Public Access Settings
-            </h3>
-            <p className='text-[11px] text-[var(--text-secondary)]'>
-              This chat will be publicly accessible to anyone with the link.
-            </p>
-          </CardContent>
-        </Card>
-      )}
-
-      {error && <p className='text-destructive text-sm'>{error}</p>}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx
deleted file mode 100644
index 11547a25538..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy.tsx
+++ /dev/null
@@ -1,486 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
-import {
-  Button,
-  Input,
-  Label,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-  Textarea,
-} from '@/components/emcn'
-import { Alert, AlertDescription, Skeleton } from '@/components/ui'
-import { getEmailDomain } from '@/lib/core/utils/urls'
-import { createLogger } from '@/lib/logs/console/logger'
-import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
-import { AuthSelector } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/auth-selector'
-import { IdentifierInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input'
-import { SuccessView } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view'
-import { useChatDeployment } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment'
-import { useChatForm } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-
-const logger = createLogger('ChatDeploy')
-
-interface ChatDeployProps {
-  workflowId: string
-  deploymentInfo: {
-    apiKey: string
-  } | null
-  onChatExistsChange?: (exists: boolean) => void
-  chatSubmitting: boolean
-  setChatSubmitting: (submitting: boolean) => void
-  onValidationChange?: (isValid: boolean) => void
-  showDeleteConfirmation?: boolean
-  setShowDeleteConfirmation?: (show: boolean) => void
-  onDeploymentComplete?: () => void
-  onDeployed?: () => void
-  onUndeploy?: () => Promise<void>
-  onVersionActivated?: () => void
-}
-
-interface ExistingChat {
-  id: string
-  identifier: string
-  title: string
-  description: string
-  authType: 'public' | 'password' | 'email'
-  allowedEmails: string[]
-  outputConfigs: Array<{ blockId: string; path: string }>
-  customizations?: {
-    welcomeMessage?: string
-  }
-  isActive: boolean
-}
-
-export function ChatDeploy({
-  workflowId,
-  deploymentInfo,
-  onChatExistsChange,
-  chatSubmitting,
-  setChatSubmitting,
-  onValidationChange,
-  showDeleteConfirmation: externalShowDeleteConfirmation,
-  setShowDeleteConfirmation: externalSetShowDeleteConfirmation,
-  onDeploymentComplete,
-  onDeployed,
-  onUndeploy,
-  onVersionActivated,
-}: ChatDeployProps) {
-  const [isLoading, setIsLoading] = useState(false)
-  const [existingChat, setExistingChat] = useState<ExistingChat | null>(null)
-  const [imageUrl, setImageUrl] = useState<string | null>(null)
-  const [imageUploadError, setImageUploadError] = useState<string | null>(null)
-  const [isDeleting, setIsDeleting] = useState(false)
-  const [isImageUploading, setIsImageUploading] = useState(false)
-  const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
-  const [showSuccessView, setShowSuccessView] = useState(false)
-
-  // Use external state for delete confirmation if provided
-  const showDeleteConfirmation =
-    externalShowDeleteConfirmation !== undefined
-      ? externalShowDeleteConfirmation
-      : internalShowDeleteConfirmation
-
-  const setShowDeleteConfirmation =
-    externalSetShowDeleteConfirmation || setInternalShowDeleteConfirmation
-
-  const { formData, errors, updateField, setError, validateForm, setFormData } = useChatForm()
-  const { deployedUrl, deployChat } = useChatDeployment()
-  const formRef = useRef<HTMLFormElement>(null)
-  const [isIdentifierValid, setIsIdentifierValid] = useState(false)
-
-  const isFormValid =
-    isIdentifierValid &&
-    Boolean(formData.title.trim()) &&
-    formData.selectedOutputBlocks.length > 0 &&
-    (formData.authType !== 'password' ||
-      Boolean(formData.password.trim()) ||
-      Boolean(existingChat)) &&
-    ((formData.authType !== 'email' && formData.authType !== 'sso') || formData.emails.length > 0)
-
-  useEffect(() => {
-    onValidationChange?.(isFormValid)
-  }, [isFormValid, onValidationChange])
-
-  useEffect(() => {
-    if (workflowId) {
-      fetchExistingChat()
-    }
-  }, [workflowId])
-
-  const fetchExistingChat = async () => {
-    try {
-      setIsLoading(true)
-      const response = await fetch(`/api/workflows/${workflowId}/chat/status`)
-
-      if (response.ok) {
-        const data = await response.json()
-
-        if (data.isDeployed && data.deployment) {
-          const detailResponse = await fetch(`/api/chat/manage/${data.deployment.id}`)
-
-          if (detailResponse.ok) {
-            const chatDetail = await detailResponse.json()
-            setExistingChat(chatDetail)
-
-            setFormData({
-              identifier: chatDetail.identifier || '',
-              title: chatDetail.title || '',
-              description: chatDetail.description || '',
-              authType: chatDetail.authType || 'public',
-              password: '',
-              emails: Array.isArray(chatDetail.allowedEmails) ? [...chatDetail.allowedEmails] : [],
-              welcomeMessage:
-                chatDetail.customizations?.welcomeMessage || 'Hi there! How can I help you today?',
-              selectedOutputBlocks: Array.isArray(chatDetail.outputConfigs)
-                ? chatDetail.outputConfigs.map(
-                    (config: { blockId: string; path: string }) =>
-                      `${config.blockId}_${config.path}`
-                  )
-                : [],
-            })
-
-            if (chatDetail.customizations?.imageUrl) {
-              setImageUrl(chatDetail.customizations.imageUrl)
-            }
-            setImageUploadError(null)
-
-            onChatExistsChange?.(true)
-          }
-        } else {
-          setExistingChat(null)
-          setImageUrl(null)
-          setImageUploadError(null)
-          onChatExistsChange?.(false)
-        }
-      }
-    } catch (error) {
-      logger.error('Error fetching chat status:', error)
-    } finally {
-      setIsLoading(false)
-    }
-  }
-
-  const handleSubmit = async (e?: React.FormEvent) => {
-    if (e) e.preventDefault()
-
-    if (chatSubmitting) return
-
-    setChatSubmitting(true)
-
-    try {
-      if (!validateForm()) {
-        setChatSubmitting(false)
-        return
-      }
-
-      if (!isIdentifierValid && formData.identifier !== existingChat?.identifier) {
-        setError('identifier', 'Please wait for identifier validation to complete')
-        setChatSubmitting(false)
-        return
-      }
-
-      await deployChat(workflowId, formData, null, existingChat?.id, imageUrl)
-
-      onChatExistsChange?.(true)
-      setShowSuccessView(true)
-      onDeployed?.()
-      onVersionActivated?.()
-
-      await fetchExistingChat()
-    } catch (error: any) {
-      if (error.message?.includes('identifier')) {
-        setError('identifier', error.message)
-      } else {
-        setError('general', error.message)
-      }
-    } finally {
-      setChatSubmitting(false)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!existingChat || !existingChat.id) return
-
-    try {
-      setIsDeleting(true)
-
-      const response = await fetch(`/api/chat/manage/${existingChat.id}`, {
-        method: 'DELETE',
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.error || 'Failed to delete chat')
-      }
-
-      setExistingChat(null)
-      setImageUrl(null)
-      setImageUploadError(null)
-      onChatExistsChange?.(false)
-
-      onDeploymentComplete?.()
-    } catch (error: any) {
-      logger.error('Failed to delete chat:', error)
-      setError('general', error.message || 'An unexpected error occurred while deleting')
-    } finally {
-      setIsDeleting(false)
-      setShowDeleteConfirmation(false)
-    }
-  }
-
-  if (isLoading) {
-    return <LoadingSkeleton />
-  }
-
-  if (deployedUrl && showSuccessView) {
-    return (
-      <>
-        <div id='chat-deploy-form'>
-          <SuccessView
-            deployedUrl={deployedUrl}
-            existingChat={existingChat}
-            onDelete={() => setShowDeleteConfirmation(true)}
-            onUpdate={() => setShowSuccessView(false)}
-          />
-        </div>
-
-        {/* Delete Confirmation Dialog */}
-        <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
-          <ModalContent>
-            <ModalHeader>
-              <ModalTitle>Delete Chat?</ModalTitle>
-              <ModalDescription>
-                This will delete your chat deployment at "{getEmailDomain()}/chat/
-                {existingChat?.identifier}". All users will lose access to the chat interface. You
-                can recreate this chat deployment at any time.
-              </ModalDescription>
-            </ModalHeader>
-            <ModalFooter>
-              <Button
-                variant='outline'
-                className='h-[32px] px-[12px]'
-                onClick={() => setShowDeleteConfirmation(false)}
-                disabled={isDeleting}
-              >
-                Cancel
-              </Button>
-              <Button
-                onClick={handleDelete}
-                disabled={isDeleting}
-                className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-              >
-                {isDeleting ? (
-                  <>
-                    <Loader2 className='mr-2 h-3.5 w-3.5 animate-spin' />
-                    Deleting...
-                  </>
-                ) : (
-                  'Delete'
-                )}
-              </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    )
-  }
-
-  return (
-    <>
-      <form
-        id='chat-deploy-form'
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 overflow-y-auto px-1'
-      >
-        {errors.general && (
-          <Alert variant='destructive'>
-            <AlertTriangle className='h-4 w-4' />
-            <AlertDescription>{errors.general}</AlertDescription>
-          </Alert>
-        )}
-
-        <div className='space-y-4'>
-          <IdentifierInput
-            value={formData.identifier}
-            onChange={(value) => updateField('identifier', value)}
-            originalIdentifier={existingChat?.identifier || undefined}
-            disabled={chatSubmitting}
-            onValidationChange={setIsIdentifierValid}
-            isEditingExisting={!!existingChat}
-          />
-
-          <div className='space-y-2'>
-            <Label htmlFor='title' className='font-medium text-sm'>
-              Chat Title
-            </Label>
-            <Input
-              id='title'
-              placeholder='Customer Support Assistant'
-              value={formData.title}
-              onChange={(e) => updateField('title', e.target.value)}
-              required
-              disabled={chatSubmitting}
-            />
-            {errors.title && <p className='text-destructive text-sm'>{errors.title}</p>}
-          </div>
-          <div className='space-y-2'>
-            <Label htmlFor='description' className='font-medium text-sm'>
-              Description
-            </Label>
-            <Textarea
-              id='description'
-              placeholder='A brief description of what this chat does'
-              value={formData.description}
-              onChange={(e) => updateField('description', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
-            />
-          </div>
-          <div className='space-y-2'>
-            <Label className='font-medium text-sm'>Chat Output</Label>
-            <OutputSelect
-              workflowId={workflowId}
-              selectedOutputs={formData.selectedOutputBlocks}
-              onOutputSelect={(values) => updateField('selectedOutputBlocks', values)}
-              placeholder='Select which block outputs to use'
-              disabled={chatSubmitting}
-            />
-            {errors.outputBlocks && (
-              <p className='text-destructive text-sm'>{errors.outputBlocks}</p>
-            )}
-            <p className='mt-2 text-[11px] text-[var(--text-secondary)]'>
-              Select which block's output to return to the user in the chat interface
-            </p>
-          </div>
-
-          <AuthSelector
-            authType={formData.authType}
-            password={formData.password}
-            emails={formData.emails}
-            onAuthTypeChange={(type) => updateField('authType', type)}
-            onPasswordChange={(password) => updateField('password', password)}
-            onEmailsChange={(emails) => updateField('emails', emails)}
-            disabled={chatSubmitting}
-            isExistingChat={!!existingChat}
-            error={errors.password || errors.emails}
-          />
-          <div className='space-y-2'>
-            <Label htmlFor='welcomeMessage' className='font-medium text-sm'>
-              Welcome Message
-            </Label>
-            <Textarea
-              id='welcomeMessage'
-              placeholder='Enter a welcome message for your chat'
-              value={formData.welcomeMessage}
-              onChange={(e) => updateField('welcomeMessage', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px] resize-none'
-            />
-            <p className='text-muted-foreground text-xs'>
-              This message will be displayed when users first open the chat
-            </p>
-          </div>
-
-          {/* <div className='space-y-2'>
-            <Label className='font-medium text-sm'>Chat Logo</Label>
-            <ImageUpload
-              value={imageUrl}
-              onUpload={(url) => {
-                setImageUrl(url)
-                setImageUploadError(null)
-              }}
-              onError={setImageUploadError}
-              onUploadStart={setIsImageUploading}
-              disabled={chatSubmitting}
-              uploadToServer={true}
-              height='h-32'
-              hideHeader={true}
-            />
-            {imageUploadError && <p className='text-destructive text-sm'>{imageUploadError}</p>}
-            {!imageUrl && !isImageUploading && (
-              <p className='text-muted-foreground text-xs'>
-                Upload a logo for your chat (PNG, JPEG - max 5MB)
-              </p>
-            )}
-          </div> */}
-
-          <button
-            type='button'
-            data-delete-trigger
-            onClick={() => setShowDeleteConfirmation(true)}
-            style={{ display: 'none' }}
-          />
-        </div>
-      </form>
-
-      <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete Chat?</ModalTitle>
-            <ModalDescription>
-              This will delete your chat deployment at "{getEmailDomain()}/chat/
-              {existingChat?.identifier}". All users will lose access to the chat interface. You can
-              recreate this chat deployment at any time.
-            </ModalDescription>
-          </ModalHeader>
-          <ModalFooter>
-            <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
-              onClick={() => setShowDeleteConfirmation(false)}
-              disabled={isDeleting}
-            >
-              Cancel
-            </Button>
-            <Button
-              onClick={handleDelete}
-              disabled={isDeleting}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className='mr-2 h-3.5 w-3.5 animate-spin' />
-                  Deleting...
-                </>
-              ) : (
-                'Delete'
-              )}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
-
-function LoadingSkeleton() {
-  return (
-    <div className='space-y-4 py-3'>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-24' />
-        <Skeleton className='h-10 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-20' />
-        <Skeleton className='h-10 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-32' />
-        <Skeleton className='h-24 w-full' />
-      </div>
-      <div className='space-y-2'>
-        <Skeleton className='h-5 w-40' />
-        <Skeleton className='h-32 w-full rounded-lg' />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
new file mode 100644
index 00000000000..b17df1cb2de
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -0,0 +1,870 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { AlertTriangle, Check, Clipboard, Eye, EyeOff, Loader2, RefreshCw, X } from 'lucide-react'
+import { Button, Input, Label, Textarea, Tooltip } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
+import { Alert, AlertDescription, Skeleton } from '@/components/ui'
+import { getEnv, isTruthy } from '@/lib/env'
+import { createLogger } from '@/lib/logs/console/logger'
+import { getEmailDomain } from '@/lib/urls/utils'
+import { cn, generatePassword } from '@/lib/utils'
+import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
+import {
+  type AuthType,
+  type ChatFormData,
+  useChatDeployment,
+  useIdentifierValidation,
+} from './hooks'
+
+const logger = createLogger('ChatDeploy')
+
+const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
+
+interface ChatDeployProps {
+  workflowId: string
+  deploymentInfo: {
+    apiKey: string
+  } | null
+  existingChat: ExistingChat | null
+  isLoadingChat: boolean
+  onRefetchChat: () => Promise<void>
+  onChatExistsChange?: (exists: boolean) => void
+  chatSubmitting: boolean
+  setChatSubmitting: (submitting: boolean) => void
+  onValidationChange?: (isValid: boolean) => void
+  showDeleteConfirmation?: boolean
+  setShowDeleteConfirmation?: (show: boolean) => void
+  onDeploymentComplete?: () => void
+  onDeployed?: () => void
+  onVersionActivated?: () => void
+}
+
+export interface ExistingChat {
+  id: string
+  identifier: string
+  title: string
+  description: string
+  authType: 'public' | 'password' | 'email' | 'sso'
+  allowedEmails: string[]
+  outputConfigs: Array<{ blockId: string; path: string }>
+  customizations?: {
+    welcomeMessage?: string
+    imageUrl?: string
+  }
+  isActive: boolean
+}
+
+interface FormErrors {
+  identifier?: string
+  title?: string
+  password?: string
+  emails?: string
+  outputBlocks?: string
+  general?: string
+}
+
+const initialFormData: ChatFormData = {
+  identifier: '',
+  title: '',
+  description: '',
+  authType: 'public',
+  password: '',
+  emails: [],
+  welcomeMessage: 'Hi there! How can I help you today?',
+  selectedOutputBlocks: [],
+}
+
+export function ChatDeploy({
+  workflowId,
+  deploymentInfo,
+  existingChat,
+  isLoadingChat,
+  onRefetchChat,
+  onChatExistsChange,
+  chatSubmitting,
+  setChatSubmitting,
+  onValidationChange,
+  showDeleteConfirmation: externalShowDeleteConfirmation,
+  setShowDeleteConfirmation: externalSetShowDeleteConfirmation,
+  onDeploymentComplete,
+  onDeployed,
+  onVersionActivated,
+}: ChatDeployProps) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [internalShowDeleteConfirmation, setInternalShowDeleteConfirmation] = useState(false)
+
+  const showDeleteConfirmation =
+    externalShowDeleteConfirmation !== undefined
+      ? externalShowDeleteConfirmation
+      : internalShowDeleteConfirmation
+
+  const setShowDeleteConfirmation =
+    externalSetShowDeleteConfirmation || setInternalShowDeleteConfirmation
+
+  const [formData, setFormData] = useState<ChatFormData>(initialFormData)
+  const [errors, setErrors] = useState<FormErrors>({})
+  const { deployChat } = useChatDeployment()
+  const formRef = useRef<HTMLFormElement>(null)
+  const [isIdentifierValid, setIsIdentifierValid] = useState(false)
+  const [hasInitializedForm, setHasInitializedForm] = useState(false)
+
+  const updateField = <K extends keyof ChatFormData>(field: K, value: ChatFormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field as keyof FormErrors]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }))
+    }
+  }
+
+  const setError = (field: keyof FormErrors, message: string) => {
+    setErrors((prev) => ({ ...prev, [field]: message }))
+  }
+
+  const validateForm = (isExistingChat: boolean): boolean => {
+    const newErrors: FormErrors = {}
+
+    if (!formData.identifier.trim()) {
+      newErrors.identifier = 'Identifier is required'
+    } else if (!IDENTIFIER_PATTERN.test(formData.identifier)) {
+      newErrors.identifier = 'Identifier can only contain lowercase letters, numbers, and hyphens'
+    }
+
+    if (!formData.title.trim()) {
+      newErrors.title = 'Title is required'
+    }
+
+    if (formData.authType === 'password' && !isExistingChat && !formData.password.trim()) {
+      newErrors.password = 'Password is required when using password protection'
+    }
+
+    if (
+      (formData.authType === 'email' || formData.authType === 'sso') &&
+      formData.emails.length === 0
+    ) {
+      newErrors.emails = `At least one email or domain is required when using ${formData.authType === 'sso' ? 'SSO' : 'email'} access control`
+    }
+
+    if (formData.selectedOutputBlocks.length === 0) {
+      newErrors.outputBlocks = 'Please select at least one output block'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const isFormValid =
+    isIdentifierValid &&
+    Boolean(formData.title.trim()) &&
+    formData.selectedOutputBlocks.length > 0 &&
+    (formData.authType !== 'password' ||
+      Boolean(formData.password.trim()) ||
+      Boolean(existingChat)) &&
+    ((formData.authType !== 'email' && formData.authType !== 'sso') || formData.emails.length > 0)
+
+  useEffect(() => {
+    onValidationChange?.(isFormValid)
+  }, [isFormValid, onValidationChange])
+
+  useEffect(() => {
+    if (existingChat && !hasInitializedForm) {
+      setFormData({
+        identifier: existingChat.identifier || '',
+        title: existingChat.title || '',
+        description: existingChat.description || '',
+        authType: existingChat.authType || 'public',
+        password: '',
+        emails: Array.isArray(existingChat.allowedEmails) ? [...existingChat.allowedEmails] : [],
+        welcomeMessage:
+          existingChat.customizations?.welcomeMessage || 'Hi there! How can I help you today?',
+        selectedOutputBlocks: Array.isArray(existingChat.outputConfigs)
+          ? existingChat.outputConfigs.map(
+              (config: { blockId: string; path: string }) => `${config.blockId}_${config.path}`
+            )
+          : [],
+      })
+
+      if (existingChat.customizations?.imageUrl) {
+        setImageUrl(existingChat.customizations.imageUrl)
+      }
+
+      setHasInitializedForm(true)
+    } else if (!existingChat && !isLoadingChat) {
+      setFormData(initialFormData)
+      setImageUrl(null)
+      setHasInitializedForm(false)
+    }
+  }, [existingChat, isLoadingChat, hasInitializedForm])
+
+  const handleSubmit = async (e?: React.FormEvent) => {
+    if (e) e.preventDefault()
+
+    if (chatSubmitting) return
+
+    setChatSubmitting(true)
+
+    try {
+      if (!validateForm(!!existingChat)) {
+        setChatSubmitting(false)
+        return
+      }
+
+      if (!isIdentifierValid && formData.identifier !== existingChat?.identifier) {
+        setError('identifier', 'Please wait for identifier validation to complete')
+        setChatSubmitting(false)
+        return
+      }
+
+      const chatUrl = await deployChat(
+        workflowId,
+        formData,
+        deploymentInfo,
+        existingChat?.id,
+        imageUrl
+      )
+
+      onChatExistsChange?.(true)
+      onDeployed?.()
+      onVersionActivated?.()
+
+      if (chatUrl) {
+        window.open(chatUrl, '_blank', 'noopener,noreferrer')
+      }
+
+      setHasInitializedForm(false)
+      await onRefetchChat()
+    } catch (error: any) {
+      if (error.message?.includes('identifier')) {
+        setError('identifier', error.message)
+      } else {
+        setError('general', error.message)
+      }
+    } finally {
+      setChatSubmitting(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!existingChat || !existingChat.id) return
+
+    try {
+      setIsDeleting(true)
+
+      const response = await fetch(`/api/chat/manage/${existingChat.id}`, {
+        method: 'DELETE',
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.error || 'Failed to delete chat')
+      }
+
+      setImageUrl(null)
+      setHasInitializedForm(false)
+      onChatExistsChange?.(false)
+      await onRefetchChat()
+
+      onDeploymentComplete?.()
+    } catch (error: any) {
+      logger.error('Failed to delete chat:', error)
+      setError('general', error.message || 'An unexpected error occurred while deleting')
+    } finally {
+      setIsDeleting(false)
+      setShowDeleteConfirmation(false)
+    }
+  }
+
+  if (isLoadingChat) {
+    return <LoadingSkeleton />
+  }
+
+  return (
+    <>
+      <form
+        id='chat-deploy-form'
+        ref={formRef}
+        onSubmit={handleSubmit}
+        className='-mx-1 space-y-4 overflow-y-auto px-1'
+      >
+        {errors.general && (
+          <Alert variant='destructive'>
+            <AlertTriangle className='h-4 w-4' />
+            <AlertDescription>{errors.general}</AlertDescription>
+          </Alert>
+        )}
+
+        <div className='space-y-[12px]'>
+          <IdentifierInput
+            value={formData.identifier}
+            onChange={(value) => updateField('identifier', value)}
+            originalIdentifier={existingChat?.identifier || undefined}
+            disabled={chatSubmitting}
+            onValidationChange={setIsIdentifierValid}
+            isEditingExisting={!!existingChat}
+          />
+
+          <div>
+            <Label
+              htmlFor='title'
+              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Title
+            </Label>
+            <Input
+              id='title'
+              placeholder='Customer Support Assistant'
+              value={formData.title}
+              onChange={(e) => updateField('title', e.target.value)}
+              required
+              disabled={chatSubmitting}
+            />
+            {errors.title && <p className='mt-1 text-destructive text-sm'>{errors.title}</p>}
+          </div>
+
+          <div>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Output
+            </Label>
+            <OutputSelect
+              workflowId={workflowId}
+              selectedOutputs={formData.selectedOutputBlocks}
+              onOutputSelect={(values) => updateField('selectedOutputBlocks', values)}
+              placeholder='Select which block outputs to use'
+              disabled={chatSubmitting}
+            />
+            {errors.outputBlocks && (
+              <p className='mt-1 text-destructive text-sm'>{errors.outputBlocks}</p>
+            )}
+          </div>
+
+          <AuthSelector
+            authType={formData.authType}
+            password={formData.password}
+            emails={formData.emails}
+            onAuthTypeChange={(type) => updateField('authType', type)}
+            onPasswordChange={(password) => updateField('password', password)}
+            onEmailsChange={(emails) => updateField('emails', emails)}
+            disabled={chatSubmitting}
+            isExistingChat={!!existingChat}
+            error={errors.password || errors.emails}
+          />
+          <div>
+            <Label
+              htmlFor='welcomeMessage'
+              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+            >
+              Welcome message
+            </Label>
+            <Textarea
+              id='welcomeMessage'
+              placeholder='Enter a welcome message for your chat'
+              value={formData.welcomeMessage}
+              onChange={(e) => updateField('welcomeMessage', e.target.value)}
+              rows={3}
+              disabled={chatSubmitting}
+              className='min-h-[80px] resize-none'
+            />
+            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+              This message will be displayed when users first open the chat
+            </p>
+          </div>
+
+          <button
+            type='button'
+            data-delete-trigger
+            onClick={() => setShowDeleteConfirmation(true)}
+            style={{ display: 'none' }}
+          />
+        </div>
+      </form>
+
+      <Modal open={showDeleteConfirmation} onOpenChange={setShowDeleteConfirmation}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Chat</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+              Are you sure you want to delete this chat?{' '}
+              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
+                This will remove the chat at "{getEmailDomain()}/chat/{existingChat?.identifier}"
+                and make it unavailable to all users.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => setShowDeleteConfirmation(false)}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleDelete}
+              disabled={isDeleting}
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+            >
+              {isDeleting && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
+              {isDeleting ? 'Deleting...' : 'Delete'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className='-mx-1 space-y-4 px-1'>
+      <div className='space-y-[12px]'>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[46px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[95px]' />
+          <Skeleton className='h-[28px] w-[170px] rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[115px]' />
+          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='mt-[6.5px] h-[14px] w-[340px]' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface IdentifierInputProps {
+  value: string
+  onChange: (value: string) => void
+  originalIdentifier?: string
+  disabled?: boolean
+  onValidationChange?: (isValid: boolean) => void
+  isEditingExisting?: boolean
+}
+
+const getDomainPrefix = (() => {
+  const prefix = `${getEmailDomain()}/chat/`
+  return () => prefix
+})()
+
+function IdentifierInput({
+  value,
+  onChange,
+  originalIdentifier,
+  disabled = false,
+  onValidationChange,
+  isEditingExisting = false,
+}: IdentifierInputProps) {
+  const { isChecking, error, isValid } = useIdentifierValidation(
+    value,
+    originalIdentifier,
+    isEditingExisting
+  )
+
+  useEffect(() => {
+    onValidationChange?.(isValid)
+  }, [isValid, onValidationChange])
+
+  const handleChange = (newValue: string) => {
+    const lowercaseValue = newValue.toLowerCase()
+    onChange(lowercaseValue)
+  }
+
+  const fullUrl = `${getEnv('NEXT_PUBLIC_APP_URL')}/chat/${value}`
+  const displayUrl = fullUrl.replace(/^https?:\/\//, '')
+
+  return (
+    <div>
+      <Label
+        htmlFor='chat-url'
+        className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+      >
+        URL
+      </Label>
+      <div
+        className={cn(
+          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--surface-11)]',
+          error && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
+        )}
+      >
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-6)] px-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-9)]'>
+          {getDomainPrefix()}
+        </div>
+        <div className='relative flex-1'>
+          <Input
+            id='chat-url'
+            placeholder='company-name'
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            required
+            disabled={disabled}
+            className={cn(
+              'rounded-none border-0 pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
+              isChecking && 'pr-[32px]'
+            )}
+          />
+          {isChecking && (
+            <div className='-translate-y-1/2 absolute top-1/2 right-2'>
+              <Loader2 className='h-4 w-4 animate-spin text-[var(--text-tertiary)]' />
+            </div>
+          )}
+        </div>
+      </div>
+      {error && <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{error}</p>}
+      <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+        {isEditingExisting && value ? (
+          <>
+            Live at:{' '}
+            <a
+              href={fullUrl}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-[var(--text-primary)] hover:underline'
+            >
+              {displayUrl}
+            </a>
+          </>
+        ) : (
+          'The unique URL path where your chat will be accessible'
+        )}
+      </p>
+    </div>
+  )
+}
+
+interface AuthSelectorProps {
+  authType: AuthType
+  password: string
+  emails: string[]
+  onAuthTypeChange: (type: AuthType) => void
+  onPasswordChange: (password: string) => void
+  onEmailsChange: (emails: string[]) => void
+  disabled?: boolean
+  isExistingChat?: boolean
+  error?: string
+}
+
+const AUTH_LABELS: Record<AuthType, string> = {
+  public: 'Public',
+  password: 'Password',
+  email: 'Email',
+  sso: 'SSO',
+}
+
+function AuthSelector({
+  authType,
+  password,
+  emails,
+  onAuthTypeChange,
+  onPasswordChange,
+  onEmailsChange,
+  disabled = false,
+  isExistingChat = false,
+  error,
+}: AuthSelectorProps) {
+  const [showPassword, setShowPassword] = useState(false)
+  const [emailInputValue, setEmailInputValue] = useState('')
+  const [emailError, setEmailError] = useState('')
+  const [copySuccess, setCopySuccess] = useState(false)
+  const [invalidEmails, setInvalidEmails] = useState<string[]>([])
+
+  const handleGeneratePassword = () => {
+    const newPassword = generatePassword(24)
+    onPasswordChange(newPassword)
+  }
+
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+    setCopySuccess(true)
+    setTimeout(() => setCopySuccess(false), 2000)
+  }
+
+  const addEmail = (email: string): boolean => {
+    if (!email.trim()) return false
+
+    const normalized = email.trim().toLowerCase()
+    const isValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalized) || normalized.startsWith('@')
+
+    if (emails.includes(normalized) || invalidEmails.includes(normalized)) {
+      return false
+    }
+
+    if (!isValid) {
+      setInvalidEmails((prev) => [...prev, normalized])
+      setEmailInputValue('')
+      return false
+    }
+
+    setEmailError('')
+    onEmailsChange([...emails, normalized])
+    setEmailInputValue('')
+    return true
+  }
+
+  const handleRemoveEmail = (emailToRemove: string) => {
+    onEmailsChange(emails.filter((e) => e !== emailToRemove))
+  }
+
+  const handleRemoveInvalidEmail = (index: number) => {
+    setInvalidEmails((prev) => prev.filter((_, i) => i !== index))
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (['Enter', ',', ' '].includes(e.key) && emailInputValue.trim()) {
+      e.preventDefault()
+      addEmail(emailInputValue)
+    }
+
+    if (e.key === 'Backspace' && !emailInputValue) {
+      if (invalidEmails.length > 0) {
+        handleRemoveInvalidEmail(invalidEmails.length - 1)
+      } else if (emails.length > 0) {
+        handleRemoveEmail(emails[emails.length - 1])
+      }
+    }
+  }
+
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    e.preventDefault()
+    const pastedText = e.clipboardData.getData('text')
+    const pastedEmails = pastedText.split(/[\s,;]+/).filter(Boolean)
+
+    let addedCount = 0
+    pastedEmails.forEach((email) => {
+      if (addEmail(email)) {
+        addedCount++
+      }
+    })
+
+    if (addedCount === 0 && pastedEmails.length === 1) {
+      setEmailInputValue(emailInputValue + pastedEmails[0])
+    }
+  }
+
+  const ssoEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
+  const authOptions = ssoEnabled
+    ? (['public', 'password', 'email', 'sso'] as const)
+    : (['public', 'password', 'email'] as const)
+
+  return (
+    <div className='space-y-[16px]'>
+      <div>
+        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          Access control
+        </Label>
+        <div className='inline-flex gap-[2px]'>
+          {authOptions.map((type, index, arr) => (
+            <Button
+              key={type}
+              type='button'
+              variant={authType === type ? 'active' : 'default'}
+              onClick={() => !disabled && onAuthTypeChange(type)}
+              disabled={disabled}
+              className={`px-[8px] py-[4px] text-[12px] ${
+                index === 0
+                  ? 'rounded-r-none'
+                  : index === arr.length - 1
+                    ? 'rounded-l-none'
+                    : 'rounded-none'
+              }`}
+            >
+              {AUTH_LABELS[type]}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {authType === 'password' && (
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Password
+          </Label>
+          <div className='relative'>
+            <Input
+              type={showPassword ? 'text' : 'password'}
+              placeholder={isExistingChat ? 'Enter new password to change' : 'Enter password'}
+              value={password}
+              onChange={(e) => onPasswordChange(e.target.value)}
+              disabled={disabled}
+              className='pr-[88px]'
+              required={!isExistingChat}
+              autoComplete='new-password'
+            />
+            <div className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={handleGeneratePassword}
+                    disabled={disabled}
+                    aria-label='Generate password'
+                    className='!p-1.5'
+                  >
+                    <RefreshCw className='h-3 w-3' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>Generate</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => copyToClipboard(password)}
+                    disabled={!password || disabled}
+                    aria-label='Copy password'
+                    className='!p-1.5'
+                  >
+                    {copySuccess ? (
+                      <Check className='h-3 w-3' />
+                    ) : (
+                      <Clipboard className='h-3 w-3' />
+                    )}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{copySuccess ? 'Copied' : 'Copy'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => setShowPassword(!showPassword)}
+                    disabled={disabled}
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                    className='!p-1.5'
+                  >
+                    {showPassword ? <EyeOff className='h-3 w-3' /> : <Eye className='h-3 w-3' />}
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <span>{showPassword ? 'Hide' : 'Show'}</span>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          </div>
+          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            {isExistingChat
+              ? 'Leave empty to keep the current password'
+              : 'This password will be required to access your chat'}
+          </p>
+        </div>
+      )}
+
+      {(authType === 'email' || authType === 'sso') && (
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            {authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
+          </Label>
+          <div className='scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]'>
+            {invalidEmails.map((email, index) => (
+              <EmailTag
+                key={`invalid-${index}`}
+                email={email}
+                onRemove={() => handleRemoveInvalidEmail(index)}
+                disabled={disabled}
+                isInvalid={true}
+              />
+            ))}
+            {emails.map((email, index) => (
+              <EmailTag
+                key={`valid-${index}`}
+                email={email}
+                onRemove={() => handleRemoveEmail(email)}
+                disabled={disabled}
+              />
+            ))}
+            <Input
+              type='text'
+              value={emailInputValue}
+              onChange={(e) => setEmailInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              onPaste={handlePaste}
+              onBlur={() => emailInputValue.trim() && addEmail(emailInputValue)}
+              placeholder={
+                emails.length > 0 || invalidEmails.length > 0
+                  ? 'Add another email'
+                  : 'Enter emails or domains (@example.com)'
+              }
+              className={cn(
+                'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+                emails.length > 0 || invalidEmails.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+              )}
+              disabled={disabled}
+            />
+          </div>
+          {emailError && (
+            <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{emailError}</p>
+          )}
+          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            {authType === 'email'
+              ? 'Add specific emails or entire domains (@example.com)'
+              : 'Add emails or domains that can access via SSO'}
+          </p>
+        </div>
+      )}
+
+      {error && <p className='mt-[6.5px] text-[11px] text-[var(--text-error)]'>{error}</p>}
+    </div>
+  )
+}
+
+interface EmailTagProps {
+  email: string
+  onRemove: () => void
+  disabled?: boolean
+  isInvalid?: boolean
+}
+
+function EmailTag({ email, onRemove, disabled, isInvalid }: EmailTagProps) {
+  return (
+    <div
+      className={cn(
+        'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
+        isInvalid
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:border-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)] dark:text-[var(--text-error)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)] dark:hover:text-[var(--text-primary)]'
+      )}
+    >
+      <span className='max-w-[200px] truncate'>{email}</span>
+      {!disabled && (
+        <button
+          type='button'
+          onClick={onRemove}
+          className={cn(
+            'flex-shrink-0 transition-colors focus:outline-none',
+            isInvalid
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)] dark:text-[var(--text-error)] dark:hover:text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
+          )}
+          aria-label={`Remove ${email}`}
+        >
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts
new file mode 100644
index 00000000000..34a3694b5fc
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/index.ts
@@ -0,0 +1,2 @@
+export { type AuthType, type ChatFormData, useChatDeployment } from './use-chat-deployment'
+export { useIdentifierValidation } from './use-identifier-validation'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts
new file mode 100644
index 00000000000..d7eda4084d2
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-chat-deployment.ts
@@ -0,0 +1,131 @@
+import { useCallback } from 'react'
+import { z } from 'zod'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { OutputConfig } from '@/stores/chat/store'
+
+const logger = createLogger('ChatDeployment')
+
+export type AuthType = 'public' | 'password' | 'email' | 'sso'
+
+export interface ChatFormData {
+  identifier: string
+  title: string
+  description: string
+  authType: AuthType
+  password: string
+  emails: string[]
+  welcomeMessage: string
+  selectedOutputBlocks: string[]
+}
+
+const chatSchema = z.object({
+  workflowId: z.string().min(1, 'Workflow ID is required'),
+  identifier: z
+    .string()
+    .min(1, 'Identifier is required')
+    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens'),
+  title: z.string().min(1, 'Title is required'),
+  description: z.string().optional(),
+  customizations: z.object({
+    primaryColor: z.string(),
+    welcomeMessage: z.string(),
+    imageUrl: z.string().optional(),
+  }),
+  authType: z.enum(['public', 'password', 'email', 'sso']).default('public'),
+  password: z.string().optional(),
+  allowedEmails: z.array(z.string()).optional().default([]),
+  outputConfigs: z
+    .array(
+      z.object({
+        blockId: z.string(),
+        path: z.string(),
+      })
+    )
+    .optional()
+    .default([]),
+})
+
+/**
+ * Parses output block selections into structured output configs
+ */
+function parseOutputConfigs(selectedOutputBlocks: string[]): OutputConfig[] {
+  return selectedOutputBlocks
+    .map((outputId) => {
+      const firstUnderscoreIndex = outputId.indexOf('_')
+      if (firstUnderscoreIndex !== -1) {
+        const blockId = outputId.substring(0, firstUnderscoreIndex)
+        const path = outputId.substring(firstUnderscoreIndex + 1)
+        if (blockId && path) {
+          return { blockId, path }
+        }
+      }
+      return null
+    })
+    .filter((config): config is OutputConfig => config !== null)
+}
+
+/**
+ * Hook for deploying or updating a chat interface
+ */
+export function useChatDeployment() {
+  const deployChat = useCallback(
+    async (
+      workflowId: string,
+      formData: ChatFormData,
+      deploymentInfo: { apiKey: string } | null,
+      existingChatId?: string,
+      imageUrl?: string | null
+    ): Promise<string> => {
+      const outputConfigs = parseOutputConfigs(formData.selectedOutputBlocks)
+
+      const payload = {
+        workflowId,
+        identifier: formData.identifier.trim(),
+        title: formData.title.trim(),
+        description: formData.description.trim(),
+        customizations: {
+          primaryColor: 'var(--brand-primary-hover-hex)',
+          welcomeMessage: formData.welcomeMessage.trim(),
+          ...(imageUrl && { imageUrl }),
+        },
+        authType: formData.authType,
+        password: formData.authType === 'password' ? formData.password : undefined,
+        allowedEmails:
+          formData.authType === 'email' || formData.authType === 'sso' ? formData.emails : [],
+        outputConfigs,
+        apiKey: deploymentInfo?.apiKey,
+        deployApiEnabled: !existingChatId,
+      }
+
+      chatSchema.parse(payload)
+
+      const endpoint = existingChatId ? `/api/chat/manage/${existingChatId}` : '/api/chat'
+      const method = existingChatId ? 'PATCH' : 'POST'
+
+      const response = await fetch(endpoint, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      })
+
+      const result = await response.json()
+
+      if (!response.ok) {
+        if (result.error === 'Identifier already in use') {
+          throw new Error('This identifier is already in use')
+        }
+        throw new Error(result.error || `Failed to ${existingChatId ? 'update' : 'deploy'} chat`)
+      }
+
+      if (!result.chatUrl) {
+        throw new Error('Response missing chatUrl')
+      }
+
+      logger.info(`Chat ${existingChatId ? 'updated' : 'deployed'} successfully:`, result.chatUrl)
+      return result.chatUrl
+    },
+    []
+  )
+
+  return { deployChat }
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
similarity index 75%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
index 3c9b675fbcc..a7d78d47a73 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/hooks/use-identifier-validation.ts
@@ -1,10 +1,25 @@
 import { useEffect, useRef, useState } from 'react'
 
+const IDENTIFIER_PATTERN = /^[a-z0-9-]+$/
+const DEBOUNCE_MS = 500
+
+interface IdentifierValidationState {
+  isChecking: boolean
+  error: string | null
+  isValid: boolean
+}
+
+/**
+ * Hook for validating chat identifier availability with debounced API checks
+ * @param identifier - The identifier to validate
+ * @param originalIdentifier - The original identifier when editing an existing chat
+ * @param isEditingExisting - Whether we're editing an existing chat deployment
+ */
 export function useIdentifierValidation(
   identifier: string,
   originalIdentifier?: string,
   isEditingExisting?: boolean
-) {
+): IdentifierValidationState {
   const [isChecking, setIsChecking] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [isValid, setIsValid] = useState(false)
@@ -16,36 +31,29 @@ export function useIdentifierValidation(
       clearTimeout(timeoutRef.current)
     }
 
-    // Reset states immediately when identifier changes
     setError(null)
     setIsValid(false)
     setIsChecking(false)
 
-    // Skip validation if empty
     if (!identifier.trim()) {
       return
     }
 
-    // Skip validation if same as original (existing deployment)
     if (originalIdentifier && identifier === originalIdentifier) {
       setIsValid(true)
       return
     }
 
-    // If we're editing an existing deployment but originalIdentifier isn't available yet,
-    // assume it's valid and wait for the data to load
     if (isEditingExisting && !originalIdentifier) {
       setIsValid(true)
       return
     }
 
-    // Validate format first - client-side validation
-    if (!/^[a-z0-9-]+$/.test(identifier)) {
+    if (!IDENTIFIER_PATTERN.test(identifier)) {
       setError('Identifier can only contain lowercase letters, numbers, and hyphens')
       return
     }
 
-    // Check availability with server
     setIsChecking(true)
     timeoutRef.current = setTimeout(async () => {
       try {
@@ -64,13 +72,13 @@ export function useIdentifierValidation(
           setError(null)
           setIsValid(true)
         }
-      } catch (error) {
+      } catch {
         setError('Error checking identifier availability')
         setIsValid(false)
       } finally {
         setIsChecking(false)
       }
-    }, 500)
+    }, DEBOUNCE_MS)
 
     return () => {
       if (timeoutRef.current) {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx
deleted file mode 100644
index 2a5e733305a..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { cn } from '@/lib/core/utils/cn'
-
-interface DeployStatusProps {
-  needsRedeployment: boolean
-}
-
-export function DeployStatus({ needsRedeployment }: DeployStatusProps) {
-  return (
-    <div className='flex items-center gap-2'>
-      <span className='font-medium text-[var(--text-secondary)] text-xs'>Status:</span>
-      <div className='flex items-center gap-1.5'>
-        <div className='relative flex items-center justify-center'>
-          {needsRedeployment ? (
-            <>
-              <div className='absolute h-3 w-3 animate-ping rounded-full bg-amber-500/20' />
-              <div className='relative h-2 w-2 rounded-full bg-amber-500' />
-            </>
-          ) : (
-            <>
-              <div className='absolute h-3 w-3 animate-ping rounded-full bg-green-500/20' />
-              <div className='relative h-2 w-2 rounded-full bg-green-500' />
-            </>
-          )}
-        </div>
-        <span
-          className={cn(
-            'font-medium text-xs',
-            needsRedeployment
-              ? 'text-amber-600 dark:text-amber-400'
-              : 'text-green-600 dark:text-green-400'
-          )}
-        >
-          {needsRedeployment ? 'Changes Detected' : 'Active'}
-        </span>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx
deleted file mode 100644
index 2d68a5d747b..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
-import { cn } from '@/lib/core/utils/cn'
-import { createLogger } from '@/lib/logs/console/logger'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('DeployedWorkflowCard')
-
-interface DeployedWorkflowCardProps {
-  currentWorkflowState?: WorkflowState
-  activeDeployedWorkflowState?: WorkflowState
-  selectedDeployedWorkflowState?: WorkflowState
-  selectedVersionLabel?: string
-  className?: string
-}
-
-export function DeployedWorkflowCard({
-  currentWorkflowState,
-  activeDeployedWorkflowState,
-  selectedDeployedWorkflowState,
-  selectedVersionLabel,
-  className,
-}: DeployedWorkflowCardProps) {
-  type View = 'current' | 'active' | 'selected'
-  const hasCurrent = !!currentWorkflowState
-  const hasActive = !!activeDeployedWorkflowState
-  const hasSelected = !!selectedDeployedWorkflowState
-
-  const [view, setView] = useState<View>(hasSelected ? 'selected' : 'active')
-  const workflowToShow =
-    view === 'current'
-      ? currentWorkflowState
-      : view === 'active'
-        ? activeDeployedWorkflowState
-        : selectedDeployedWorkflowState
-  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-
-  const previewKey = useMemo(() => {
-    return `${view}-preview-${activeWorkflowId}`
-  }, [view, activeWorkflowId])
-
-  return (
-    <Card className={cn('relative overflow-hidden', className)}>
-      <CardHeader
-        className={cn(
-          'sticky top-0 z-10 space-y-4 p-4',
-          'bg-background/70 dark:bg-background/50',
-          'border-border/30 border-b dark:border-border/20',
-          'shadow-sm'
-        )}
-      >
-        <div className='flex items-center justify-between'>
-          <h3 className='font-medium'>Workflow Preview</h3>
-          <div className='flex items-center gap-2'>
-            {/* Show Current only when no explicit version is selected */}
-            {hasCurrent && !hasSelected && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'current' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('current')}
-              >
-                Current
-              </button>
-            )}
-            {/* Always show Active Deployed */}
-            {hasActive && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'active' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('active')}
-              >
-                Active Deployed
-              </button>
-            )}
-            {/* If a specific version is selected, show its label */}
-            {hasSelected && (
-              <button
-                type='button'
-                className={cn(
-                  'rounded px-2 py-1 text-xs',
-                  view === 'selected' ? 'bg-accent text-foreground' : 'text-muted-foreground'
-                )}
-                onClick={() => setView('selected')}
-              >
-                {selectedVersionLabel || 'Selected Version'}
-              </button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <div className='h-px w-full bg-border shadow-sm' />
-
-      <CardContent className='p-0'>
-        {/* Workflow preview with fixed height */}
-        <div className='h-[500px] w-full'>
-          <WorkflowPreview
-            key={previewKey}
-            workflowState={workflowToShow as WorkflowState}
-            showSubBlocks={true}
-            height='100%'
-            width='100%'
-            isPannable={true}
-            defaultPosition={{ x: 0, y: 0 }}
-            defaultZoom={0.8}
-          />
-        </div>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx
deleted file mode 100644
index ba0beba9cc6..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Button } from '@/components/emcn'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from '@/components/ui/alert-dialog'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { createLogger } from '@/lib/logs/console/logger'
-import { DeployedWorkflowCard } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-card'
-import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
-import { mergeSubblockState } from '@/stores/workflows/utils'
-import { useWorkflowStore } from '@/stores/workflows/workflow/store'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('DeployedWorkflowModal')
-
-interface DeployedWorkflowModalProps {
-  isOpen: boolean
-  onClose: () => void
-  needsRedeployment: boolean
-  activeDeployedState?: WorkflowState
-  selectedDeployedState?: WorkflowState
-  selectedVersion?: number
-  onActivateVersion?: () => void
-  isActivating?: boolean
-  selectedVersionLabel?: string
-  workflowId: string
-  isSelectedVersionActive?: boolean
-  onLoadDeploymentComplete?: () => void
-}
-
-export function DeployedWorkflowModal({
-  isOpen,
-  onClose,
-  needsRedeployment,
-  activeDeployedState,
-  selectedDeployedState,
-  selectedVersion,
-  onActivateVersion,
-  isActivating,
-  selectedVersionLabel,
-  workflowId,
-  isSelectedVersionActive,
-  onLoadDeploymentComplete,
-}: DeployedWorkflowModalProps) {
-  const [showRevertDialog, setShowRevertDialog] = useState(false)
-  const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
-
-  // Get current workflow state to compare with deployed state
-  const currentWorkflowState = useWorkflowStore((state) => ({
-    blocks: activeWorkflowId ? mergeSubblockState(state.blocks, activeWorkflowId) : state.blocks,
-    edges: state.edges,
-    loops: state.loops,
-    parallels: state.parallels,
-  }))
-
-  const handleRevert = async () => {
-    if (!activeWorkflowId) {
-      logger.error('Cannot revert: no active workflow ID')
-      return
-    }
-
-    try {
-      const versionToRevert = selectedVersion !== undefined ? selectedVersion : 'active'
-      const response = await fetch(
-        `/api/workflows/${workflowId}/deployments/${versionToRevert}/revert`,
-        {
-          method: 'POST',
-        }
-      )
-
-      if (!response.ok) {
-        throw new Error('Failed to revert to version')
-      }
-
-      setShowRevertDialog(false)
-      onClose()
-      onLoadDeploymentComplete?.()
-    } catch (error) {
-      logger.error('Failed to revert workflow:', error)
-    }
-  }
-
-  return (
-    <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent
-        className='max-h-[100vh] overflow-y-auto sm:max-w-[1100px]'
-        style={{ zIndex: 10000020 }}
-        hideCloseButton={true}
-      >
-        <div className='sr-only'>
-          <DialogHeader>
-            <DialogTitle>Deployed Workflow</DialogTitle>
-          </DialogHeader>
-        </div>
-        <DeployedWorkflowCard
-          currentWorkflowState={currentWorkflowState}
-          activeDeployedWorkflowState={activeDeployedState}
-          selectedDeployedWorkflowState={selectedDeployedState}
-          selectedVersionLabel={selectedVersionLabel}
-        />
-
-        <div className='mt-1 flex justify-between'>
-          <div className='flex items-center gap-2'>
-            {onActivateVersion &&
-              (isSelectedVersionActive ? (
-                <div className='inline-flex items-center gap-2 rounded-md bg-emerald-500/10 px-2.5 py-1 font-medium text-emerald-600 text-xs dark:text-emerald-400'>
-                  <span className='relative flex h-2 w-2 items-center justify-center'>
-                    <span className='absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-500 opacity-75' />
-                    <span className='relative inline-flex h-2 w-2 rounded-full bg-emerald-500' />
-                  </span>
-                  Active
-                </div>
-              ) : (
-                <div className='flex items-center gap-0'>
-                  <Button
-                    variant='outline'
-                    disabled={!!isActivating}
-                    onClick={() => onActivateVersion?.()}
-                  >
-                    {isActivating ? 'Activating…' : 'Activate'}
-                  </Button>
-                </div>
-              ))}
-          </div>
-
-          <div className='flex items-center gap-2'>
-            {(needsRedeployment || selectedVersion !== undefined) && (
-              <AlertDialog open={showRevertDialog} onOpenChange={setShowRevertDialog}>
-                <AlertDialogTrigger asChild>
-                  <Button variant='outline'>Load Deployment</Button>
-                </AlertDialogTrigger>
-                <AlertDialogContent className='sm:max-w-[425px]'>
-                  <AlertDialogHeader>
-                    <AlertDialogTitle>Load this Deployment?</AlertDialogTitle>
-                    <AlertDialogDescription>
-                      This will replace your current workflow with the deployed version. Your
-                      current changes will be lost.
-                    </AlertDialogDescription>
-                  </AlertDialogHeader>
-                  <AlertDialogFooter>
-                    <AlertDialogCancel>Cancel</AlertDialogCancel>
-                    <AlertDialogAction
-                      onClick={handleRevert}
-                      className='bg-primary text-primary-foreground hover:bg-primary/90'
-                    >
-                      Load Deployment
-                    </AlertDialogAction>
-                  </AlertDialogFooter>
-                </AlertDialogContent>
-              </AlertDialog>
-            )}
-            <Button variant='outline' onClick={onClose}>
-              Close
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx
deleted file mode 100644
index a5daf5d2c32..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { Loader2 } from 'lucide-react'
-import {
-  Button,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Skeleton } from '@/components/ui'
-import { ApiEndpoint } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api-endpoint'
-import { DeployStatus } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deploy-status'
-import { DeployedWorkflowModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal'
-import { ExampleCommand } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-interface WorkflowDeploymentInfo {
-  isDeployed: boolean
-  deployedAt?: string
-  apiKey: string
-  endpoint: string
-  exampleCommand: string
-  needsRedeployment: boolean
-}
-
-interface DeploymentInfoProps {
-  isLoading: boolean
-  deploymentInfo: WorkflowDeploymentInfo | null
-  onRedeploy: () => void
-  onUndeploy: () => void
-  isSubmitting: boolean
-  isUndeploying: boolean
-  workflowId: string | null
-  deployedState: WorkflowState
-  isLoadingDeployedState: boolean
-  getInputFormatExample?: (includeStreaming?: boolean) => string
-  selectedStreamingOutputs: string[]
-  onSelectedStreamingOutputsChange: (outputs: string[]) => void
-  onLoadDeploymentComplete: () => void
-}
-
-export function DeploymentInfo({
-  isLoading,
-  deploymentInfo,
-  onRedeploy,
-  onUndeploy,
-  isSubmitting,
-  isUndeploying,
-  workflowId,
-  deployedState,
-  isLoadingDeployedState,
-  getInputFormatExample,
-  selectedStreamingOutputs,
-  onSelectedStreamingOutputsChange,
-  onLoadDeploymentComplete,
-}: DeploymentInfoProps) {
-  const [isViewingDeployed, setIsViewingDeployed] = useState(false)
-  const [showUndeployModal, setShowUndeployModal] = useState(false)
-
-  const handleViewDeployed = async () => {
-    if (!workflowId) {
-      return
-    }
-
-    // If deployedState is already loaded, use it directly
-    if (deployedState) {
-      setIsViewingDeployed(true)
-      return
-    }
-  }
-
-  if (isLoading || !deploymentInfo) {
-    return (
-      <div className='space-y-4 overflow-y-auto px-1'>
-        {/* API Endpoint skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-28' />
-          <Skeleton className='h-10 w-full' />
-        </div>
-
-        {/* API Key skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-20' />
-          <Skeleton className='h-10 w-full' />
-        </div>
-
-        {/* Example Command skeleton */}
-        <div className='space-y-3'>
-          <Skeleton className='h-5 w-36' />
-          <Skeleton className='h-24 w-full rounded-md' />
-        </div>
-
-        {/* Deploy Status and buttons skeleton */}
-        <div className='mt-4 flex items-center justify-between pt-2'>
-          <Skeleton className='h-6 w-32' />
-          <div className='flex gap-2'>
-            <Skeleton className='h-9 w-24' />
-            <Skeleton className='h-9 w-24' />
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <div className='space-y-4 overflow-y-auto px-1'>
-        <div className='space-y-4'>
-          <ApiEndpoint endpoint={deploymentInfo.endpoint} />
-          <ExampleCommand
-            command={deploymentInfo.exampleCommand}
-            apiKey={deploymentInfo.apiKey}
-            endpoint={deploymentInfo.endpoint}
-            getInputFormatExample={getInputFormatExample}
-            workflowId={workflowId}
-            selectedStreamingOutputs={selectedStreamingOutputs}
-            onSelectedStreamingOutputsChange={onSelectedStreamingOutputsChange}
-          />
-        </div>
-
-        <div className='mt-4 flex items-center justify-between pt-2'>
-          <DeployStatus needsRedeployment={deploymentInfo.needsRedeployment} />
-
-          <div className='flex gap-2'>
-            <Button variant='outline' onClick={handleViewDeployed} className='h-8 text-xs'>
-              View Deployment
-            </Button>
-            {deploymentInfo.needsRedeployment && (
-              <Button
-                variant='primary'
-                onClick={onRedeploy}
-                disabled={isSubmitting}
-                className='h-8 text-xs'
-              >
-                {isSubmitting ? <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' /> : null}
-                {isSubmitting ? 'Redeploying...' : 'Redeploy'}
-              </Button>
-            )}
-            <Button
-              variant='outline'
-              disabled={isUndeploying}
-              className='h-8 text-xs'
-              onClick={() => setShowUndeployModal(true)}
-            >
-              {isUndeploying ? <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' /> : null}
-              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {deployedState && workflowId && (
-        <DeployedWorkflowModal
-          isOpen={isViewingDeployed}
-          onClose={() => setIsViewingDeployed(false)}
-          needsRedeployment={deploymentInfo.needsRedeployment}
-          activeDeployedState={deployedState}
-          workflowId={workflowId}
-          onLoadDeploymentComplete={onLoadDeploymentComplete}
-        />
-      )}
-
-      {/* Undeploy Confirmation Modal */}
-      <Modal open={showUndeployModal} onOpenChange={setShowUndeployModal}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Undeploy API</ModalTitle>
-            <ModalDescription>
-              Are you sure you want to undeploy this workflow?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This will remove the API endpoint and make it unavailable to external users.{' '}
-              </span>
-            </ModalDescription>
-          </ModalHeader>
-          <ModalFooter>
-            <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
-              onClick={() => setShowUndeployModal(false)}
-              disabled={isUndeploying}
-            >
-              Cancel
-            </Button>
-            <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-              onClick={() => {
-                onUndeploy()
-                setShowUndeployModal(false)
-              }}
-              disabled={isUndeploying}
-            >
-              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx
deleted file mode 100644
index c35910e2350..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/example-command.tsx
+++ /dev/null
@@ -1,231 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { ChevronDown } from 'lucide-react'
-import { Button, Label } from '@/components/emcn'
-import { Button as UIButton } from '@/components/ui/button'
-import { CopyButton } from '@/components/ui/copy-button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
-
-interface ExampleCommandProps {
-  command: string
-  apiKey: string
-  endpoint: string
-  showLabel?: boolean
-  getInputFormatExample?: (includeStreaming?: boolean) => string
-  workflowId: string | null
-  selectedStreamingOutputs: string[]
-  onSelectedStreamingOutputsChange: (outputs: string[]) => void
-}
-
-type ExampleMode = 'sync' | 'async' | 'stream'
-type ExampleType = 'execute' | 'status' | 'rate-limits'
-
-export function ExampleCommand({
-  command,
-  apiKey,
-  endpoint,
-  showLabel = true,
-  getInputFormatExample,
-  workflowId,
-  selectedStreamingOutputs,
-  onSelectedStreamingOutputsChange,
-}: ExampleCommandProps) {
-  const [mode, setMode] = useState<ExampleMode>('sync')
-  const [exampleType, setExampleType] = useState<ExampleType>('execute')
-  const isAsyncEnabled = isTruthy(getEnv('NEXT_PUBLIC_TRIGGER_DEV_ENABLED'))
-
-  const formatCurlCommand = (command: string, apiKey: string) => {
-    if (!command.includes('curl')) return command
-
-    const sanitizedCommand = command.replace(apiKey, '$SIM_API_KEY')
-
-    return sanitizedCommand
-      .replace(' -H ', '\n  -H ')
-      .replace(' -d ', '\n  -d ')
-      .replace(' http', '\n  http')
-  }
-
-  const getActualCommand = () => {
-    const displayCommand = getDisplayCommand()
-    return displayCommand
-      .replace(/\\\n\s*/g, ' ') // Remove backslash + newline + whitespace
-      .replace(/\n\s*/g, ' ') // Remove any remaining newlines + whitespace
-      .replace(/\s+/g, ' ') // Normalize multiple spaces to single space
-      .trim()
-  }
-
-  const getDisplayCommand = () => {
-    const baseEndpoint = endpoint.replace(apiKey, '$SIM_API_KEY')
-    const inputExample = getInputFormatExample
-      ? getInputFormatExample(false)
-      : ' -d \'{"input": "your data here"}\''
-
-    const addStreamingParams = (dashD: string) => {
-      const match = dashD.match(/-d\s*'([\s\S]*)'/)
-      if (!match) {
-        const payload: Record<string, any> = { stream: true }
-        if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
-          payload.selectedOutputs = selectedStreamingOutputs
-        }
-        return ` -d '${JSON.stringify(payload)}'`
-      }
-      try {
-        const payload = JSON.parse(match[1]) as Record<string, any>
-        payload.stream = true
-        if (selectedStreamingOutputs && selectedStreamingOutputs.length > 0) {
-          payload.selectedOutputs = selectedStreamingOutputs
-        }
-        return ` -d '${JSON.stringify(payload)}'`
-      } catch {
-        return dashD
-      }
-    }
-
-    switch (mode) {
-      case 'sync':
-        if (getInputFormatExample) {
-          const syncInputExample = getInputFormatExample(false)
-          return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json"${syncInputExample} \\\n  ${baseEndpoint}`
-        }
-        return formatCurlCommand(command, apiKey)
-
-      case 'stream': {
-        const streamDashD = addStreamingParams(inputExample)
-        return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json"${streamDashD} \\\n  ${baseEndpoint}`
-      }
-
-      case 'async':
-        switch (exampleType) {
-          case 'execute':
-            return `curl -X POST \\\n  -H "X-API-Key: $SIM_API_KEY" \\\n  -H "Content-Type: application/json" \\\n  -H "X-Execution-Mode: async"${inputExample} \\\n  ${baseEndpoint}`
-
-          case 'status': {
-            const baseUrl = baseEndpoint.split('/api/workflows/')[0]
-            return `curl -H "X-API-Key: $SIM_API_KEY" \\\n  ${baseUrl}/api/jobs/JOB_ID_FROM_EXECUTION`
-          }
-
-          case 'rate-limits': {
-            const baseUrlForRateLimit = baseEndpoint.split('/api/workflows/')[0]
-            return `curl -H "X-API-Key: $SIM_API_KEY" \\\n  ${baseUrlForRateLimit}/api/users/me/usage-limits`
-          }
-
-          default:
-            return formatCurlCommand(command, apiKey)
-        }
-
-      default:
-        return formatCurlCommand(command, apiKey)
-    }
-  }
-
-  const getExampleTitle = () => {
-    switch (exampleType) {
-      case 'execute':
-        return 'Async Execution'
-      case 'status':
-        return 'Check Job Status'
-      case 'rate-limits':
-        return 'Rate Limits & Usage'
-      default:
-        return 'Async Execution'
-    }
-  }
-
-  return (
-    <div className='space-y-4'>
-      {/* Example Command */}
-      <div className='space-y-1.5'>
-        <div className='flex items-center justify-between'>
-          {showLabel && <Label className='font-medium text-sm'>Example</Label>}
-          <div className='flex items-center gap-1'>
-            <Button
-              variant={mode === 'sync' ? 'active' : 'default'}
-              onClick={() => setMode('sync')}
-              className='h-6 min-w-[50px] px-2 py-1 text-xs'
-            >
-              Sync
-            </Button>
-            <Button
-              variant={mode === 'stream' ? 'active' : 'default'}
-              onClick={() => setMode('stream')}
-              className='h-6 min-w-[50px] px-2 py-1 text-xs'
-            >
-              Stream
-            </Button>
-            {isAsyncEnabled && (
-              <>
-                <Button
-                  variant={mode === 'async' ? 'active' : 'default'}
-                  onClick={() => setMode('async')}
-                  className='h-6 min-w-[50px] px-2 py-1 text-xs'
-                >
-                  Async
-                </Button>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <UIButton
-                      variant='outline'
-                      size='sm'
-                      className='h-6 min-w-[140px] justify-between px-2 py-1 text-xs'
-                      disabled={mode === 'sync' || mode === 'stream'}
-                    >
-                      <span className='truncate'>{getExampleTitle()}</span>
-                      <ChevronDown className='ml-1 h-3 w-3 flex-shrink-0' />
-                    </UIButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align='end' className='z-[10000050]'>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('execute')}
-                    >
-                      Async Execution
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('status')}
-                    >
-                      Check Job Status
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      className='cursor-pointer'
-                      onClick={() => setExampleType('rate-limits')}
-                    >
-                      Rate Limits & Usage
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </>
-            )}
-          </div>
-        </div>
-
-        {/* Output selector for Stream mode */}
-        {mode === 'stream' && (
-          <div className='space-y-2'>
-            <div className='text-muted-foreground text-xs'>Select outputs to stream</div>
-            <OutputSelect
-              workflowId={workflowId}
-              selectedOutputs={selectedStreamingOutputs}
-              onOutputSelect={onSelectedStreamingOutputsChange}
-              placeholder='Select outputs for streaming'
-              valueMode='label'
-            />
-          </div>
-        )}
-
-        <div className='group relative overflow-x-auto rounded-md border bg-background transition-colors hover:bg-muted/50'>
-          <pre className='whitespace-pre p-3 font-mono text-xs'>{getDisplayCommand()}</pre>
-          <CopyButton text={getActualCommand()} />
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts
new file mode 100644
index 00000000000..a9946f7d520
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/index.ts
@@ -0,0 +1 @@
+export { Versions } from './versions'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
new file mode 100644
index 00000000000..effe6e22bdc
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -0,0 +1,334 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import clsx from 'clsx'
+import { MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
+import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpers'
+
+const logger = createLogger('Versions')
+
+/** Shared styling constants aligned with terminal component */
+const HEADER_TEXT_CLASS =
+  'font-medium text-[var(--text-tertiary)] text-[12px] dark:text-[var(--text-tertiary)]'
+const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px] dark:text-[#D2D2D2]'
+const COLUMN_BASE_CLASS = 'flex-shrink-0'
+
+/** Column width configuration */
+const COLUMN_WIDTHS = {
+  VERSION: 'w-[180px]',
+  DEPLOYED_BY: 'w-[140px]',
+  TIMESTAMP: 'flex-1',
+  ACTIONS: 'w-[32px]',
+} as const
+
+interface VersionsProps {
+  workflowId: string | null
+  versions: WorkflowDeploymentVersionResponse[]
+  versionsLoading: boolean
+  selectedVersion: number | null
+  onSelectVersion: (version: number | null) => void
+  onPromoteToLive: (version: number) => void
+  onLoadDeployment: (version: number) => void
+  fetchVersions: () => Promise<void>
+}
+
+/**
+ * Formats a timestamp into a readable string.
+ * @param value - The date string or Date object to format
+ * @returns Formatted string like "8:36 PM PT on Oct 11, 2025"
+ */
+const formatDate = (value: string | Date): string => {
+  const date = value instanceof Date ? value : new Date(value)
+  if (Number.isNaN(date.getTime())) {
+    return '-'
+  }
+
+  const timePart = date.toLocaleTimeString('en-US', {
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true,
+    timeZoneName: 'short',
+  })
+
+  const datePart = date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  })
+
+  return `${timePart} on ${datePart}`
+}
+
+/**
+ * Displays a list of workflow deployment versions with actions
+ * for viewing, promoting to live, renaming, and loading deployments.
+ */
+export function Versions({
+  workflowId,
+  versions,
+  versionsLoading,
+  selectedVersion,
+  onSelectVersion,
+  onPromoteToLive,
+  onLoadDeployment,
+  fetchVersions,
+}: VersionsProps) {
+  const [editingVersion, setEditingVersion] = useState<number | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const [isRenaming, setIsRenaming] = useState(false)
+  const [openDropdown, setOpenDropdown] = useState<number | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (editingVersion !== null && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editingVersion])
+
+  const handleStartRename = (version: number, currentName: string | null | undefined) => {
+    setOpenDropdown(null)
+    setEditingVersion(version)
+    setEditValue(currentName || `v${version}`)
+  }
+
+  const handleSaveRename = async (version: number) => {
+    if (!workflowId || !editValue.trim()) {
+      setEditingVersion(null)
+      return
+    }
+
+    const currentVersion = versions.find((v) => v.version === version)
+    const currentName = currentVersion?.name || `v${version}`
+
+    if (editValue.trim() === currentName) {
+      setEditingVersion(null)
+      return
+    }
+
+    setIsRenaming(true)
+    try {
+      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: editValue.trim() }),
+      })
+
+      if (res.ok) {
+        await fetchVersions()
+        setEditingVersion(null)
+      } else {
+        logger.error('Failed to rename version')
+      }
+    } catch (error) {
+      logger.error('Error renaming version:', error)
+    } finally {
+      setIsRenaming(false)
+    }
+  }
+
+  const handleCancelRename = () => {
+    setEditingVersion(null)
+    setEditValue('')
+  }
+
+  const handleRowClick = (version: number) => {
+    if (editingVersion === version) return
+    onSelectVersion(selectedVersion === version ? null : version)
+  }
+
+  const handlePromote = (version: number) => {
+    setOpenDropdown(null)
+    onPromoteToLive(version)
+  }
+
+  const handleLoadDeployment = (version: number) => {
+    setOpenDropdown(null)
+    onLoadDeployment(version)
+  }
+
+  if (versionsLoading && versions.length === 0) {
+    return (
+      <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
+        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+          <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
+            <Skeleton className='h-[12px] w-[50px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
+            <Skeleton className='h-[12px] w-[76px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+            <Skeleton className='h-[12px] w-[68px]' />
+          </div>
+          <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
+        </div>
+        <div className='bg-[var(--surface-2)]'>
+          {[0, 1].map((i) => (
+            <div key={i} className='flex h-[36px] items-center px-[16px]'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
+                <div className='flex items-center gap-[16px]'>
+                  <Skeleton className='h-[6px] w-[6px] rounded-[2px]' />
+                  <Skeleton className='h-[12px] w-[60px]' />
+                </div>
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
+                <Skeleton className='h-[12px] w-[80px]' />
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+                <Skeleton className='h-[12px] w-[160px]' />
+              </div>
+              <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}>
+                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  if (versions.length === 0) {
+    return (
+      <div className='flex h-[120px] items-center justify-center rounded-[4px] border border-[var(--border)] text-[#8D8D8D] text-[13px]'>
+        No deployments yet
+      </div>
+    )
+  }
+
+  return (
+    <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
+      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+        <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
+          <span className={HEADER_TEXT_CLASS}>Version</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS)}>
+          <span className={HEADER_TEXT_CLASS}>Deployed by</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+          <span className={HEADER_TEXT_CLASS}>Timestamp</span>
+        </div>
+        <div className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS)} />
+      </div>
+
+      <div className='bg-[var(--surface-2)]'>
+        {versions.map((v) => {
+          const isSelected = selectedVersion === v.version
+
+          return (
+            <div
+              key={v.id}
+              className={clsx(
+                'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors',
+                isSelected
+                  ? 'bg-[var(--accent)]/10 hover:bg-[var(--accent)]/15'
+                  : 'hover:bg-[var(--border)]'
+              )}
+              onClick={() => handleRowClick(v.version)}
+            >
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
+                <div className='flex items-center gap-[16px]'>
+                  <div
+                    className={clsx(
+                      'h-[6px] w-[6px] shrink-0 rounded-[2px]',
+                      v.isActive ? 'bg-[#4ADE80]' : 'bg-[#B7B7B7]'
+                    )}
+                    title={v.isActive ? 'Live' : 'Inactive'}
+                  />
+                  {editingVersion === v.version ? (
+                    <input
+                      ref={inputRef}
+                      value={editValue}
+                      onChange={(e) => setEditValue(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          e.preventDefault()
+                          handleSaveRename(v.version)
+                        } else if (e.key === 'Escape') {
+                          e.preventDefault()
+                          handleCancelRename()
+                        }
+                      }}
+                      onClick={(e) => e.stopPropagation()}
+                      onBlur={() => handleSaveRename(v.version)}
+                      className={clsx(
+                        'w-full border-0 bg-transparent p-0 font-medium text-[12px] leading-5 outline-none',
+                        'text-[var(--text-primary)] focus:outline-none focus:ring-0'
+                      )}
+                      maxLength={100}
+                      disabled={isRenaming}
+                      autoComplete='off'
+                      autoCorrect='off'
+                      autoCapitalize='off'
+                      spellCheck='false'
+                    />
+                  ) : (
+                    <span
+                      className={clsx('block flex items-center gap-[4px] truncate', ROW_TEXT_CLASS)}
+                    >
+                      <span className='truncate'>{v.name || `v${v.version}`}</span>
+                      {v.isActive && <span className='text-[var(--text-tertiary)]'> (live)</span>}
+                      {isSelected && (
+                        <span className='text-[var(--text-tertiary)]'> (selected)</span>
+                      )}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <div className={clsx(COLUMN_WIDTHS.DEPLOYED_BY, COLUMN_BASE_CLASS, 'min-w-0')}>
+                <span
+                  className={clsx('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}
+                >
+                  {v.deployedBy || 'Unknown'}
+                </span>
+              </div>
+
+              <div className={clsx(COLUMN_WIDTHS.TIMESTAMP, 'min-w-0')}>
+                <span
+                  className={clsx('block truncate text-[var(--text-tertiary)]', ROW_TEXT_CLASS)}
+                >
+                  {formatDate(v.createdAt)}
+                </span>
+              </div>
+
+              <div
+                className={clsx(COLUMN_WIDTHS.ACTIONS, COLUMN_BASE_CLASS, 'flex justify-end')}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <Popover
+                  open={openDropdown === v.version}
+                  onOpenChange={(open) => setOpenDropdown(open ? v.version : null)}
+                >
+                  <PopoverTrigger asChild>
+                    <Button variant='ghost' className='!p-1'>
+                      <MoreVertical className='h-3.5 w-3.5' />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align='end' sideOffset={4} minWidth={160} maxWidth={200} border>
+                    <PopoverItem onClick={() => handleStartRename(v.version, v.name)}>
+                      <Pencil className='h-3 w-3' />
+                      <span>Rename</span>
+                    </PopoverItem>
+                    {!v.isActive && (
+                      <PopoverItem onClick={() => handlePromote(v.version)}>
+                        <RotateCcw className='h-3 w-3' />
+                        <span>Promote to live</span>
+                      </PopoverItem>
+                    )}
+                    <PopoverItem onClick={() => handleLoadDeployment(v.version)}>
+                      <SendToBack className='h-3 w-3' />
+                      <span>Load deployment</span>
+                    </PopoverItem>
+                  </PopoverContent>
+                </Popover>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
new file mode 100644
index 00000000000..8a3dbfa88dc
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -0,0 +1,308 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { Button, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
+import { Skeleton } from '@/components/ui'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpers'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+import { Versions } from './components'
+
+const logger = createLogger('GeneralDeploy')
+
+interface GeneralDeployProps {
+  workflowId: string | null
+  deployedState: WorkflowState
+  isLoadingDeployedState: boolean
+  versions: WorkflowDeploymentVersionResponse[]
+  versionsLoading: boolean
+  onPromoteToLive: (version: number) => Promise<void>
+  onLoadDeploymentComplete: () => void
+  fetchVersions: () => Promise<void>
+}
+
+type PreviewMode = 'active' | 'selected'
+
+/**
+ * General deployment tab content displaying live workflow preview and version history.
+ */
+export function GeneralDeploy({
+  workflowId,
+  deployedState,
+  isLoadingDeployedState,
+  versions,
+  versionsLoading,
+  onPromoteToLive,
+  onLoadDeploymentComplete,
+  fetchVersions,
+}: GeneralDeployProps) {
+  const [selectedVersion, setSelectedVersion] = useState<number | null>(null)
+  const [previewMode, setPreviewMode] = useState<PreviewMode>('active')
+  const [showLoadDialog, setShowLoadDialog] = useState(false)
+  const [showPromoteDialog, setShowPromoteDialog] = useState(false)
+  const [versionToLoad, setVersionToLoad] = useState<number | null>(null)
+  const [versionToPromote, setVersionToPromote] = useState<number | null>(null)
+
+  const versionCacheRef = useRef<Map<number, WorkflowState>>(new Map())
+  const [, forceUpdate] = useState({})
+
+  const selectedVersionInfo = versions.find((v) => v.version === selectedVersion)
+  const versionToPromoteInfo = versions.find((v) => v.version === versionToPromote)
+  const versionToLoadInfo = versions.find((v) => v.version === versionToLoad)
+
+  const cachedSelectedState =
+    selectedVersion !== null ? versionCacheRef.current.get(selectedVersion) : null
+
+  const fetchSelectedVersionState = useCallback(
+    async (version: number) => {
+      if (!workflowId) return
+      if (versionCacheRef.current.has(version)) return
+
+      try {
+        const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
+        if (res.ok) {
+          const data = await res.json()
+          if (data.deployedState) {
+            versionCacheRef.current.set(version, data.deployedState)
+            forceUpdate({})
+          }
+        }
+      } catch (error) {
+        logger.error('Error fetching version state:', error)
+      }
+    },
+    [workflowId]
+  )
+
+  useEffect(() => {
+    if (selectedVersion !== null) {
+      fetchSelectedVersionState(selectedVersion)
+      setPreviewMode('selected')
+    } else {
+      setPreviewMode('active')
+    }
+  }, [selectedVersion, fetchSelectedVersionState])
+
+  const handleSelectVersion = useCallback((version: number | null) => {
+    setSelectedVersion(version)
+  }, [])
+
+  const handleLoadDeployment = useCallback((version: number) => {
+    setVersionToLoad(version)
+    setShowLoadDialog(true)
+  }, [])
+
+  const handlePromoteToLive = useCallback((version: number) => {
+    setVersionToPromote(version)
+    setShowPromoteDialog(true)
+  }, [])
+
+  const confirmLoadDeployment = async () => {
+    if (!workflowId || versionToLoad === null) return
+
+    // Close modal immediately for snappy UX
+    setShowLoadDialog(false)
+    const version = versionToLoad
+    setVersionToLoad(null)
+
+    try {
+      const response = await fetch(`/api/workflows/${workflowId}/deployments/${version}/revert`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to load deployment')
+      }
+
+      onLoadDeploymentComplete()
+    } catch (error) {
+      logger.error('Failed to load deployment:', error)
+    }
+  }
+
+  const confirmPromoteToLive = async () => {
+    if (versionToPromote === null) return
+
+    // Close modal immediately for snappy UX
+    setShowPromoteDialog(false)
+    const version = versionToPromote
+    setVersionToPromote(null)
+
+    try {
+      await onPromoteToLive(version)
+    } catch (error) {
+      logger.error('Failed to promote version:', error)
+    }
+  }
+
+  const workflowToShow = useMemo(() => {
+    if (previewMode === 'selected' && cachedSelectedState) {
+      return cachedSelectedState
+    }
+    return deployedState
+  }, [previewMode, cachedSelectedState, deployedState])
+
+  const showToggle = selectedVersion !== null && deployedState
+
+  // Only show skeleton on initial load when we have no deployed data
+  const hasDeployedData = deployedState && Object.keys(deployedState.blocks || {}).length > 0
+  const showLoadingSkeleton = isLoadingDeployedState && !hasDeployedData
+
+  if (showLoadingSkeleton) {
+    return (
+      <div className='space-y-[12px]'>
+        <div>
+          <div className='relative mb-[6.5px]'>
+            <Skeleton className='h-[16px] w-[90px]' />
+          </div>
+          <div className='h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+            <Skeleton className='h-full w-full rounded-none' />
+          </div>
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[60px]' />
+          <div className='h-[120px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+            <Skeleton className='h-full w-full rounded-none' />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='space-y-[12px]'>
+        <div>
+          <div className='relative mb-[6.5px]'>
+            <Label className='block truncate pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              {previewMode === 'selected' && selectedVersionInfo
+                ? selectedVersionInfo.name || `v${selectedVersion}`
+                : 'Live Workflow'}
+            </Label>
+            <div
+              className='absolute top-[-5px] right-0 inline-flex gap-[2px]'
+              style={{ visibility: showToggle ? 'visible' : 'hidden' }}
+            >
+              <Button
+                type='button'
+                variant={previewMode === 'active' ? 'active' : 'default'}
+                onClick={() => setPreviewMode('active')}
+                className='rounded-r-none px-[8px] py-[4px] text-[12px]'
+              >
+                Live
+              </Button>
+              <Button
+                type='button'
+                variant={previewMode === 'selected' ? 'active' : 'default'}
+                onClick={() => setPreviewMode('selected')}
+                className='truncate rounded-l-none px-[8px] py-[4px] text-[12px]'
+              >
+                {selectedVersionInfo?.name || `v${selectedVersion}`}
+              </Button>
+            </div>
+          </div>
+
+          <div
+            className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+            onWheelCapture={(e) => {
+              if (e.ctrlKey || e.metaKey) return
+              e.stopPropagation()
+            }}
+          >
+            {workflowToShow ? (
+              <WorkflowPreview
+                workflowState={workflowToShow}
+                showSubBlocks={true}
+                height='100%'
+                width='100%'
+                isPannable={true}
+                defaultPosition={{ x: 0, y: 0 }}
+                defaultZoom={0.6}
+              />
+            ) : (
+              <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+                Deploy your workflow to see a preview
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Versions
+          </Label>
+          <Versions
+            workflowId={workflowId}
+            versions={versions}
+            versionsLoading={versionsLoading}
+            selectedVersion={selectedVersion}
+            onSelectVersion={handleSelectVersion}
+            onPromoteToLive={handlePromoteToLive}
+            onLoadDeployment={handleLoadDeployment}
+            fetchVersions={fetchVersions}
+          />
+        </div>
+      </div>
+
+      <Modal open={showLoadDialog} onOpenChange={setShowLoadDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Load Deployment</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to load{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {versionToLoadInfo?.name || `v${versionToLoad}`}
+              </span>
+              ?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will replace your current workflow with the deployed version.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowLoadDialog(false)}>
+              Cancel
+            </Button>
+            <Button variant='primary' onClick={confirmLoadDeployment}>
+              Load deployment
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showPromoteDialog} onOpenChange={setShowPromoteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Promote to live</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to promote{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {versionToPromoteInfo?.name || `v${versionToPromote}`}
+              </span>{' '}
+              to live?{' '}
+              <span className='text-[var(--text-primary)]'>
+                This version will become the active deployment and serve all API requests.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowPromoteDialog(false)}>
+              Cancel
+            </Button>
+            <Button variant='primary' onClick={confirmPromoteToLive}>
+              Promote to live
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
deleted file mode 100644
index c5412177723..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/identifier-input.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { useEffect } from 'react'
-import { Input, Label } from '@/components/emcn'
-import { cn } from '@/lib/core/utils/cn'
-import { getEmailDomain } from '@/lib/core/utils/urls'
-import { useIdentifierValidation } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-identifier-validation'
-
-interface IdentifierInputProps {
-  value: string
-  onChange: (value: string) => void
-  originalIdentifier?: string
-  disabled?: boolean
-  onValidationChange?: (isValid: boolean) => void
-  isEditingExisting?: boolean
-}
-
-const getDomainPrefix = (() => {
-  const prefix = `${getEmailDomain()}/chat/`
-  return () => prefix
-})()
-
-export function IdentifierInput({
-  value,
-  onChange,
-  originalIdentifier,
-  disabled = false,
-  onValidationChange,
-  isEditingExisting = false,
-}: IdentifierInputProps) {
-  const { isChecking, error, isValid } = useIdentifierValidation(
-    value,
-    originalIdentifier,
-    isEditingExisting
-  )
-
-  // Notify parent of validation changes
-  useEffect(() => {
-    onValidationChange?.(isValid)
-  }, [isValid, onValidationChange])
-
-  const handleChange = (newValue: string) => {
-    const lowercaseValue = newValue.toLowerCase()
-    onChange(lowercaseValue)
-  }
-
-  return (
-    <div className='space-y-2'>
-      <Label htmlFor='identifier' className='font-medium text-sm'>
-        Identifier
-      </Label>
-      <div className='relative flex items-stretch'>
-        <div className='flex items-center whitespace-nowrap rounded-l-[4px] border border-[var(--surface-11)] border-r-0 bg-[var(--surface-6)] px-[8px] py-[6px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-9)]'>
-          {getDomainPrefix()}
-        </div>
-        <div className='relative flex-1'>
-          <Input
-            id='identifier'
-            placeholder='company-name'
-            value={value}
-            onChange={(e) => handleChange(e.target.value)}
-            required
-            disabled={disabled}
-            className={cn(
-              'rounded-l-none border-l-0',
-              isChecking && 'pr-8',
-              error && 'border-destructive'
-            )}
-          />
-          {isChecking && (
-            <div className='-translate-y-1/2 absolute top-1/2 right-2'>
-              <div className='h-[18px] w-[18px] animate-spin rounded-full border-2 border-gray-300 border-t-[var(--brand-primary-hex)]' />
-            </div>
-          )}
-        </div>
-      </div>
-      {error && <p className='mt-1 text-destructive text-sm'>{error}</p>}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx
deleted file mode 100644
index 1f8404097e4..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/success-view.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Label } from '@/components/emcn'
-import { getBaseDomain, getEmailDomain } from '@/lib/core/utils/urls'
-
-interface ExistingChat {
-  id: string
-  identifier: string
-  title: string
-  description: string
-  authType: 'public' | 'password' | 'email'
-  allowedEmails: string[]
-  outputConfigs: Array<{ blockId: string; path: string }>
-  customizations?: {
-    welcomeMessage?: string
-  }
-  isActive: boolean
-}
-
-interface SuccessViewProps {
-  deployedUrl: string
-  existingChat: ExistingChat | null
-  onDelete?: () => void
-  onUpdate?: () => void
-}
-
-export function SuccessView({ deployedUrl, existingChat, onDelete, onUpdate }: SuccessViewProps) {
-  const url = new URL(deployedUrl)
-  const hostname = url.hostname
-  const isDevelopmentUrl = hostname.includes('localhost')
-
-  // Extract identifier from path-based URL format (e.g., sim.ai/chat/identifier)
-  const pathParts = url.pathname.split('/')
-  const identifierPart = pathParts[2] || '' // /chat/identifier
-
-  let domainPrefix
-  if (isDevelopmentUrl) {
-    const baseDomain = getBaseDomain()
-    const baseHost = baseDomain.split(':')[0]
-    const port = url.port || (baseDomain.includes(':') ? baseDomain.split(':')[1] : '3000')
-    domainPrefix = `${baseHost}:${port}/chat/`
-  } else {
-    domainPrefix = `${getEmailDomain()}/chat/`
-  }
-
-  return (
-    <div className='space-y-4'>
-      <div className='space-y-2'>
-        <Label className='font-medium text-sm'>
-          Chat {existingChat ? 'Update' : 'Deployment'} Successful
-        </Label>
-        <div className='relative flex items-center rounded-md ring-offset-background'>
-          <div className='flex h-10 items-center whitespace-nowrap rounded-l-md border border-r-0 bg-muted px-3 font-medium text-muted-foreground text-sm'>
-            {domainPrefix}
-          </div>
-          <a
-            href={deployedUrl}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='flex h-10 flex-1 items-center break-all rounded-r-md border border-l-0 p-2 font-medium text-foreground text-sm'
-          >
-            {identifierPart}
-          </a>
-        </div>
-        <p className='text-muted-foreground text-xs'>
-          Your chat is now live at{' '}
-          <a
-            href={deployedUrl}
-            target='_blank'
-            rel='noopener noreferrer'
-            className='text-foreground hover:underline'
-          >
-            this URL
-          </a>
-        </p>
-      </div>
-
-      {/* Hidden triggers for modal footer buttons */}
-      <button type='button' data-delete-trigger onClick={onDelete} style={{ display: 'none' }} />
-      <button type='button' data-update-trigger onClick={onUpdate} style={{ display: 'none' }} />
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx
deleted file mode 100644
index 893f2e56e0e..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy.tsx
+++ /dev/null
@@ -1,489 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { CheckCircle2, Loader2, Plus } from 'lucide-react'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Badge, Button, Input, Textarea, Trash } from '@/components/emcn'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui'
-import { TagInput } from '@/components/ui/tag-input'
-import { useSession } from '@/lib/auth/auth-client'
-import { createLogger } from '@/lib/logs/console/logger'
-import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
-import {
-  useCreateTemplate,
-  useDeleteTemplate,
-  useTemplateByWorkflow,
-  useUpdateTemplate,
-} from '@/hooks/queries/templates'
-import type { WorkflowState } from '@/stores/workflows/workflow/types'
-
-const logger = createLogger('TemplateDeploy')
-
-const templateSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(100, 'Max 100 characters'),
-  tagline: z.string().max(500, 'Max 500 characters').optional(),
-  about: z.string().optional(), // Markdown long description
-  creatorId: z.string().optional(), // Creator profile ID
-  tags: z.array(z.string()).max(10, 'Maximum 10 tags allowed').optional().default([]),
-})
-
-type TemplateFormData = z.infer<typeof templateSchema>
-
-interface CreatorOption {
-  id: string
-  name: string
-  referenceType: 'user' | 'organization'
-  referenceId: string
-}
-
-interface TemplateDeployProps {
-  workflowId: string
-  onDeploymentComplete?: () => void
-}
-
-export function TemplateDeploy({ workflowId, onDeploymentComplete }: TemplateDeployProps) {
-  const { data: session } = useSession()
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [creatorOptions, setCreatorOptions] = useState<CreatorOption[]>([])
-  const [loadingCreators, setLoadingCreators] = useState(false)
-  const [showPreviewDialog, setShowPreviewDialog] = useState(false)
-
-  const { data: existingTemplate, isLoading: isLoadingTemplate } = useTemplateByWorkflow(workflowId)
-  const createMutation = useCreateTemplate()
-  const updateMutation = useUpdateTemplate()
-  const deleteMutation = useDeleteTemplate()
-
-  const form = useForm<TemplateFormData>({
-    resolver: zodResolver(templateSchema),
-    defaultValues: {
-      name: '',
-      tagline: '',
-      about: '',
-      creatorId: undefined,
-      tags: [],
-    },
-  })
-
-  const fetchCreatorOptions = async () => {
-    if (!session?.user?.id) return
-
-    setLoadingCreators(true)
-    try {
-      const response = await fetch('/api/creators')
-      if (response.ok) {
-        const data = await response.json()
-        const profiles = (data.profiles || []).map((profile: any) => ({
-          id: profile.id,
-          name: profile.name,
-          referenceType: profile.referenceType,
-          referenceId: profile.referenceId,
-        }))
-        setCreatorOptions(profiles)
-        return profiles
-      }
-    } catch (error) {
-      logger.error('Error fetching creator profiles:', error)
-    } finally {
-      setLoadingCreators(false)
-    }
-    return []
-  }
-
-  useEffect(() => {
-    fetchCreatorOptions()
-  }, [session?.user?.id])
-
-  useEffect(() => {
-    const currentCreatorId = form.getValues('creatorId')
-    if (creatorOptions.length === 1 && !currentCreatorId) {
-      form.setValue('creatorId', creatorOptions[0].id)
-      logger.info('Auto-selected single creator profile:', creatorOptions[0].name)
-    }
-  }, [creatorOptions, form])
-
-  useEffect(() => {
-    const handleCreatorProfileSaved = async () => {
-      logger.info('Creator profile saved, refreshing profiles...')
-
-      await fetchCreatorOptions()
-
-      window.dispatchEvent(new CustomEvent('close-settings'))
-      setTimeout(() => {
-        window.dispatchEvent(new CustomEvent('open-deploy-modal', { detail: { tab: 'template' } }))
-      }, 100)
-    }
-
-    window.addEventListener('creator-profile-saved', handleCreatorProfileSaved)
-
-    return () => {
-      window.removeEventListener('creator-profile-saved', handleCreatorProfileSaved)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (existingTemplate) {
-      const tagline = existingTemplate.details?.tagline || ''
-      const about = existingTemplate.details?.about || ''
-
-      form.reset({
-        name: existingTemplate.name,
-        tagline: tagline,
-        about: about,
-        creatorId: existingTemplate.creatorId || undefined,
-        tags: existingTemplate.tags || [],
-      })
-    }
-  }, [existingTemplate, form])
-
-  const onSubmit = async (data: TemplateFormData) => {
-    if (!session?.user) {
-      logger.error('User not authenticated')
-      return
-    }
-
-    try {
-      const templateData = {
-        name: data.name,
-        details: {
-          tagline: data.tagline || '',
-          about: data.about || '',
-        },
-        creatorId: data.creatorId || undefined,
-        tags: data.tags || [],
-      }
-
-      if (existingTemplate) {
-        await updateMutation.mutateAsync({
-          id: existingTemplate.id,
-          data: {
-            ...templateData,
-            updateState: true,
-          },
-        })
-      } else {
-        await createMutation.mutateAsync({ ...templateData, workflowId })
-      }
-
-      logger.info(`Template ${existingTemplate ? 'updated' : 'created'} successfully`)
-      onDeploymentComplete?.()
-    } catch (error) {
-      logger.error('Failed to save template:', error)
-    }
-  }
-
-  const handleDelete = async () => {
-    if (!existingTemplate) return
-
-    try {
-      await deleteMutation.mutateAsync(existingTemplate.id)
-      setShowDeleteDialog(false)
-      form.reset({
-        name: '',
-        tagline: '',
-        about: '',
-        creatorId: undefined,
-        tags: [],
-      })
-    } catch (error) {
-      logger.error('Error deleting template:', error)
-    }
-  }
-
-  if (isLoadingTemplate) {
-    return (
-      <div className='flex h-64 items-center justify-center'>
-        <Loader2 className='h-6 w-6 animate-spin text-muted-foreground' />
-      </div>
-    )
-  }
-
-  return (
-    <div className='space-y-4'>
-      {existingTemplate && (
-        <div className='flex items-center justify-between rounded-[8px] border border-[var(--border)] bg-[var(--surface-3)] px-[16px] py-[12px]'>
-          <div className='flex items-center gap-[12px]'>
-            <CheckCircle2 className='h-[16px] w-[16px] text-green-600 dark:text-green-400' />
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                Template Connected
-              </span>
-              {existingTemplate.status === 'pending' && (
-                <Badge
-                  variant='outline'
-                  className='border-yellow-300 bg-yellow-100 text-yellow-700 dark:border-yellow-700 dark:bg-yellow-900 dark:text-yellow-300'
-                >
-                  Under Review
-                </Badge>
-              )}
-              {existingTemplate.status === 'approved' && existingTemplate.views > 0 && (
-                <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-                  • {existingTemplate.views} views
-                  {existingTemplate.stars > 0 && ` • ${existingTemplate.stars} stars`}
-                </span>
-              )}
-            </div>
-          </div>
-          <Button
-            type='button'
-            variant='ghost'
-            onClick={() => setShowDeleteDialog(true)}
-            className='h-[32px] px-[8px] text-[var(--text-muted)] hover:text-red-600 dark:hover:text-red-400'
-          >
-            <Trash className='h-[14px] w-[14px]' />
-          </Button>
-        </div>
-      )}
-
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-4'>
-          <FormField
-            control={form.control}
-            name='name'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Template Name</FormLabel>
-                <FormControl>
-                  <Input placeholder='My Awesome Template' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='tagline'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Tagline</FormLabel>
-                <FormControl>
-                  <Input placeholder='Brief description of what this template does' {...field} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='about'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>About (Optional)</FormLabel>
-                <FormControl>
-                  <Textarea
-                    placeholder='Detailed description (supports Markdown)'
-                    className='min-h-[150px] resize-none'
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='creatorId'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Creator Profile</FormLabel>
-                {creatorOptions.length === 0 && !loadingCreators ? (
-                  <div className='flex items-center gap-2'>
-                    <Button
-                      type='button'
-                      variant='outline'
-                      onClick={() => {
-                        try {
-                          const event = new CustomEvent('open-settings', {
-                            detail: { tab: 'creator-profile' },
-                          })
-                          window.dispatchEvent(event)
-                          logger.info('Opened Settings modal at creator-profile section')
-                        } catch (error) {
-                          logger.error('Failed to open Settings modal for creator profile', {
-                            error,
-                          })
-                        }
-                      }}
-                      className='gap-[8px]'
-                    >
-                      <Plus className='h-[14px] w-[14px] text-[var(--text-muted)]' />
-                      <span className='text-[var(--text-muted)]'>Create a Creator Profile</span>
-                    </Button>
-                  </div>
-                ) : (
-                  <Select
-                    onValueChange={field.onChange}
-                    value={field.value}
-                    disabled={loadingCreators}
-                  >
-                    <FormControl>
-                      <SelectTrigger>
-                        <SelectValue
-                          placeholder={loadingCreators ? 'Loading...' : 'Select creator profile'}
-                        />
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent>
-                      {creatorOptions.map((option) => (
-                        <SelectItem key={option.id} value={option.id}>
-                          {option.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                )}
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <FormField
-            control={form.control}
-            name='tags'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Tags</FormLabel>
-                <FormControl>
-                  <TagInput
-                    value={field.value || []}
-                    onChange={field.onChange}
-                    placeholder='Type and press Enter to add tags'
-                    maxTags={10}
-                    disabled={createMutation.isPending || updateMutation.isPending}
-                  />
-                </FormControl>
-                <p className='text-muted-foreground text-xs'>
-                  Add up to 10 tags to help users discover your template
-                </p>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-
-          <div className='flex justify-end gap-[8px] border-[var(--border)] border-t pt-[16px]'>
-            {existingTemplate && (
-              <Button
-                type='button'
-                variant='outline'
-                onClick={() => setShowPreviewDialog(true)}
-                disabled={!existingTemplate?.state}
-              >
-                View Current
-              </Button>
-            )}
-            <Button
-              type='submit'
-              variant='primary'
-              disabled={
-                createMutation.isPending || updateMutation.isPending || !form.formState.isValid
-              }
-            >
-              {createMutation.isPending || updateMutation.isPending ? (
-                <>
-                  <Loader2 className='mr-[8px] h-[14px] w-[14px] animate-spin' />
-                  {existingTemplate ? 'Updating...' : 'Publishing...'}
-                </>
-              ) : existingTemplate ? (
-                'Update Template'
-              ) : (
-                'Publish Template'
-              )}
-            </Button>
-          </div>
-        </form>
-      </Form>
-
-      {showDeleteDialog && (
-        <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50'>
-          <div className='w-full max-w-md rounded-[8px] bg-[var(--surface-3)] p-[24px] shadow-lg'>
-            <h3 className='mb-[16px] font-semibold text-[18px] text-[var(--text-primary)]'>
-              Delete Template?
-            </h3>
-            <p className='mb-[24px] text-[14px] text-[var(--text-secondary)]'>
-              This will permanently delete your template. This action cannot be undone.
-            </p>
-            <div className='flex justify-end gap-[8px]'>
-              <Button variant='outline' onClick={() => setShowDeleteDialog(false)}>
-                Cancel
-              </Button>
-              <Button
-                onClick={handleDelete}
-                disabled={deleteMutation.isPending}
-                className='bg-red-600 text-white hover:bg-red-700'
-              >
-                {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Template State Preview Dialog */}
-      <Dialog open={showPreviewDialog} onOpenChange={setShowPreviewDialog}>
-        <DialogContent className='max-h-[80vh] max-w-5xl overflow-auto'>
-          <DialogHeader>
-            <DialogTitle>Published Template Preview</DialogTitle>
-          </DialogHeader>
-          {showPreviewDialog && (
-            <div className='mt-4'>
-              {(() => {
-                if (!existingTemplate?.state || !existingTemplate.state.blocks) {
-                  return (
-                    <div className='flex flex-col items-center gap-4 py-8'>
-                      <div className='text-center text-muted-foreground'>
-                        <p className='mb-2'>No template state available yet.</p>
-                        <p className='text-sm'>
-                          Click "Update Template" to capture the current workflow state.
-                        </p>
-                      </div>
-                    </div>
-                  )
-                }
-
-                const workflowState: WorkflowState = {
-                  blocks: existingTemplate.state.blocks || {},
-                  edges: existingTemplate.state.edges || [],
-                  loops: existingTemplate.state.loops || {},
-                  parallels: existingTemplate.state.parallels || {},
-                  lastSaved: existingTemplate.state.lastSaved || Date.now(),
-                }
-
-                return (
-                  <div className='h-[500px] w-full'>
-                    <WorkflowPreview
-                      key={`template-preview-${existingTemplate.id}`}
-                      workflowState={workflowState}
-                      showSubBlocks={true}
-                      height='100%'
-                      width='100%'
-                    />
-                  </div>
-                )
-              })()}
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
new file mode 100644
index 00000000000..e39666ca85d
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
@@ -0,0 +1,451 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Loader2, Plus } from 'lucide-react'
+import { Button, Combobox, Input, Label, Textarea } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
+import { Skeleton, TagInput } from '@/components/ui'
+import { useSession } from '@/lib/auth-client'
+import { createLogger } from '@/lib/logs/console/logger'
+import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
+import {
+  useCreateTemplate,
+  useDeleteTemplate,
+  useTemplateByWorkflow,
+  useUpdateTemplate,
+} from '@/hooks/queries/templates'
+import type { WorkflowState } from '@/stores/workflows/workflow/types'
+
+const logger = createLogger('TemplateDeploy')
+
+interface TemplateFormData {
+  name: string
+  tagline: string
+  about: string
+  creatorId: string
+  tags: string[]
+}
+
+const initialFormData: TemplateFormData = {
+  name: '',
+  tagline: '',
+  about: '',
+  creatorId: '',
+  tags: [],
+}
+
+interface CreatorOption {
+  id: string
+  name: string
+  referenceType: 'user' | 'organization'
+  referenceId: string
+}
+
+interface TemplateStatus {
+  status: 'pending' | 'approved' | 'rejected' | null
+  views?: number
+  stars?: number
+}
+
+interface TemplateDeployProps {
+  workflowId: string
+  onDeploymentComplete?: () => void
+  onValidationChange?: (isValid: boolean) => void
+  onSubmittingChange?: (isSubmitting: boolean) => void
+  onExistingTemplateChange?: (exists: boolean) => void
+  onTemplateStatusChange?: (status: TemplateStatus | null) => void
+}
+
+export function TemplateDeploy({
+  workflowId,
+  onDeploymentComplete,
+  onValidationChange,
+  onSubmittingChange,
+  onExistingTemplateChange,
+  onTemplateStatusChange,
+}: TemplateDeployProps) {
+  const { data: session } = useSession()
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [creatorOptions, setCreatorOptions] = useState<CreatorOption[]>([])
+  const [loadingCreators, setLoadingCreators] = useState(false)
+
+  const [formData, setFormData] = useState<TemplateFormData>(initialFormData)
+
+  const { data: existingTemplate, isLoading: isLoadingTemplate } = useTemplateByWorkflow(workflowId)
+  const createMutation = useCreateTemplate()
+  const updateMutation = useUpdateTemplate()
+  const deleteMutation = useDeleteTemplate()
+
+  const isSubmitting = createMutation.isPending || updateMutation.isPending
+  const isFormValid = formData.name.trim().length > 0 && formData.name.length <= 100
+
+  const updateField = <K extends keyof TemplateFormData>(field: K, value: TemplateFormData[K]) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  useEffect(() => {
+    onValidationChange?.(isFormValid)
+  }, [isFormValid, onValidationChange])
+
+  useEffect(() => {
+    onSubmittingChange?.(isSubmitting)
+  }, [isSubmitting, onSubmittingChange])
+
+  useEffect(() => {
+    onExistingTemplateChange?.(!!existingTemplate)
+  }, [existingTemplate, onExistingTemplateChange])
+
+  useEffect(() => {
+    if (existingTemplate) {
+      onTemplateStatusChange?.({
+        status: existingTemplate.status as 'pending' | 'approved' | 'rejected',
+        views: existingTemplate.views,
+        stars: existingTemplate.stars,
+      })
+    } else {
+      onTemplateStatusChange?.(null)
+    }
+  }, [existingTemplate, onTemplateStatusChange])
+
+  const fetchCreatorOptions = async () => {
+    if (!session?.user?.id) return
+
+    setLoadingCreators(true)
+    try {
+      const response = await fetch('/api/creator-profiles')
+      if (response.ok) {
+        const data = await response.json()
+        const profiles = (data.profiles || []).map((profile: any) => ({
+          id: profile.id,
+          name: profile.name,
+          referenceType: profile.referenceType,
+          referenceId: profile.referenceId,
+        }))
+        setCreatorOptions(profiles)
+        return profiles
+      }
+    } catch (error) {
+      logger.error('Error fetching creator profiles:', error)
+    } finally {
+      setLoadingCreators(false)
+    }
+    return []
+  }
+
+  useEffect(() => {
+    fetchCreatorOptions()
+  }, [session?.user?.id])
+
+  useEffect(() => {
+    if (creatorOptions.length === 1 && !formData.creatorId) {
+      updateField('creatorId', creatorOptions[0].id)
+      logger.info('Auto-selected single creator profile:', creatorOptions[0].name)
+    }
+  }, [creatorOptions, formData.creatorId])
+
+  useEffect(() => {
+    const handleCreatorProfileSaved = async () => {
+      logger.info('Creator profile saved, refreshing profiles...')
+
+      await fetchCreatorOptions()
+
+      window.dispatchEvent(new CustomEvent('close-settings'))
+      setTimeout(() => {
+        window.dispatchEvent(new CustomEvent('open-deploy-modal', { detail: { tab: 'template' } }))
+      }, 100)
+    }
+
+    window.addEventListener('creator-profile-saved', handleCreatorProfileSaved)
+
+    return () => {
+      window.removeEventListener('creator-profile-saved', handleCreatorProfileSaved)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (existingTemplate) {
+      setFormData({
+        name: existingTemplate.name,
+        tagline: existingTemplate.details?.tagline || '',
+        about: existingTemplate.details?.about || '',
+        creatorId: existingTemplate.creatorId || '',
+        tags: existingTemplate.tags || [],
+      })
+    }
+  }, [existingTemplate])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!session?.user || !isFormValid) {
+      logger.error('User not authenticated or form invalid')
+      return
+    }
+
+    try {
+      const templateData = {
+        name: formData.name.trim(),
+        details: {
+          tagline: formData.tagline.trim(),
+          about: formData.about.trim(),
+        },
+        creatorId: formData.creatorId || undefined,
+        tags: formData.tags,
+      }
+
+      if (existingTemplate) {
+        await updateMutation.mutateAsync({
+          id: existingTemplate.id,
+          data: {
+            ...templateData,
+            updateState: true,
+          },
+        })
+      } else {
+        await createMutation.mutateAsync({ ...templateData, workflowId })
+      }
+
+      logger.info(`Template ${existingTemplate ? 'updated' : 'created'} successfully`)
+      onDeploymentComplete?.()
+    } catch (error) {
+      logger.error('Failed to save template:', error)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!existingTemplate) return
+
+    try {
+      await deleteMutation.mutateAsync(existingTemplate.id)
+      setShowDeleteDialog(false)
+      setFormData(initialFormData)
+    } catch (error) {
+      logger.error('Error deleting template:', error)
+    }
+  }
+
+  if (isLoadingTemplate) {
+    return (
+      <div className='space-y-[12px]'>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[40px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[76px]' />
+          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+        <div>
+          <Skeleton className='mb-[6.5px] h-[16px] w-[32px]' />
+          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='space-y-4'>
+      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-[12px]'>
+        {existingTemplate?.state && (
+          <div>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              Live Template
+            </Label>
+            <div
+              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+              onWheelCapture={(e) => {
+                if (e.ctrlKey || e.metaKey) return
+                e.stopPropagation()
+              }}
+            >
+              <TemplatePreviewContent existingTemplate={existingTemplate} />
+            </div>
+          </div>
+        )}
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Name
+          </Label>
+          <Input
+            placeholder='Deep Research Agent'
+            value={formData.name}
+            onChange={(e) => updateField('name', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Tagline
+          </Label>
+          <Input
+            placeholder='A deep research agent that can find information on any topic'
+            value={formData.tagline}
+            onChange={(e) => updateField('tagline', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Description
+          </Label>
+          <Textarea
+            placeholder='Optional description that supports Markdown'
+            className='min-h-[160px] resize-none'
+            value={formData.about}
+            onChange={(e) => updateField('about', e.target.value)}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Creator
+          </Label>
+          {creatorOptions.length === 0 && !loadingCreators ? (
+            <Button
+              type='button'
+              variant='outline'
+              onClick={() => {
+                try {
+                  const event = new CustomEvent('open-settings', {
+                    detail: { tab: 'creator-profile' },
+                  })
+                  window.dispatchEvent(event)
+                  logger.info('Opened Settings modal at creator-profile section')
+                } catch (error) {
+                  logger.error('Failed to open Settings modal for creator profile', {
+                    error,
+                  })
+                }
+              }}
+              className='gap-[8px]'
+            >
+              <Plus className='h-[14px] w-[14px] text-[var(--text-muted)]' />
+              <span className='text-[var(--text-muted)]'>Create a Creator Profile</span>
+            </Button>
+          ) : (
+            <Combobox
+              options={creatorOptions.map((option) => ({
+                label: option.name,
+                value: option.id,
+              }))}
+              value={formData.creatorId}
+              selectedValue={formData.creatorId}
+              onChange={(value) => updateField('creatorId', value)}
+              placeholder={loadingCreators ? 'Loading...' : 'Select creator profile'}
+              editable={false}
+              filterOptions={false}
+              disabled={loadingCreators || isSubmitting}
+            />
+          )}
+        </div>
+
+        <div>
+          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            Tags
+          </Label>
+          <TagInput
+            value={formData.tags}
+            onChange={(tags) => updateField('tags', tags)}
+            placeholder='Dev, Agents, Research, etc.'
+            maxTags={10}
+            disabled={isSubmitting}
+          />
+        </div>
+
+        <button
+          type='button'
+          data-template-delete-trigger
+          onClick={() => setShowDeleteDialog(true)}
+          style={{ display: 'none' }}
+        />
+      </form>
+
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Template</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete this template?{' '}
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleDelete}
+              disabled={deleteMutation.isPending}
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+            >
+              {deleteMutation.isPending ? (
+                <>
+                  <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
+                  Deleting...
+                </>
+              ) : (
+                'Delete'
+              )}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
+
+interface TemplatePreviewContentProps {
+  existingTemplate:
+    | {
+        id: string
+        state?: Partial<WorkflowState>
+      }
+    | null
+    | undefined
+}
+
+function TemplatePreviewContent({ existingTemplate }: TemplatePreviewContentProps) {
+  if (!existingTemplate?.state || !existingTemplate.state.blocks) {
+    return null
+  }
+
+  const workflowState: WorkflowState = {
+    blocks: existingTemplate.state.blocks,
+    edges: existingTemplate.state.edges ?? [],
+    loops: existingTemplate.state.loops ?? {},
+    parallels: existingTemplate.state.parallels ?? {},
+    lastSaved: existingTemplate.state.lastSaved ?? Date.now(),
+  }
+
+  return (
+    <WorkflowPreview
+      key={`template-preview-${existingTemplate.id}`}
+      workflowState={workflowState}
+      showSubBlocks={true}
+      height='100%'
+      width='100%'
+      isPannable={true}
+      defaultPosition={{ x: 0, y: 0 }}
+      defaultZoom={0.6}
+    />
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
index 36164f6b67c..442b119b4b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/deploy-modal.tsx
@@ -1,33 +1,38 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
-import { Loader2, MoreVertical, X } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
+import clsx from 'clsx'
+import { Button } from '@/components/emcn'
 import {
-  Badge,
-  Button,
-  Popover,
-  PopoverContent,
-  PopoverItem,
-  PopoverTrigger,
-} from '@/components/emcn'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui'
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTabs,
+  ModalTabsContent,
+  ModalTabsList,
+  ModalTabsTrigger,
+} from '@/components/emcn/components/modal-new/modal'
 import { getEnv } from '@/lib/core/config/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
-import { ChatDeploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat-deploy'
-import { DeployedWorkflowModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployed-workflow-modal'
-import { DeploymentInfo } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/deployment-info'
-import { TemplateDeploy } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template-deploy'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
+import { ApiDeploy } from './components/api/api'
+import { ChatDeploy, type ExistingChat } from './components/chat/chat'
+import { GeneralDeploy } from './components/general/general'
+import { TemplateDeploy } from './components/template/template'
 
 const logger = createLogger('DeployModal')
+
 interface DeployModalProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   workflowId: string | null
+  isDeployed: boolean
   needsRedeployment: boolean
   setNeedsRedeployment: (value: boolean) => void
   deployedState: WorkflowState
@@ -44,12 +49,13 @@ interface WorkflowDeploymentInfo {
   needsRedeployment: boolean
 }
 
-type TabView = 'api' | 'versions' | 'chat' | 'template'
+type TabView = 'general' | 'api' | 'chat' | 'template'
 
 export function DeployModal({
   open,
   onOpenChange,
   workflowId,
+  isDeployed: isDeployedProp,
   needsRedeployment,
   setNeedsRedeployment,
   deployedState,
@@ -59,7 +65,7 @@ export function DeployModal({
   const deploymentStatus = useWorkflowRegistry((state) =>
     state.getWorkflowDeploymentStatus(workflowId)
   )
-  const isDeployed = deploymentStatus?.isDeployed || false
+  const isDeployed = deploymentStatus?.isDeployed ?? isDeployedProp
   const setDeploymentStatus = useWorkflowRegistry((state) => state.setDeploymentStatus)
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [isUndeploying, setIsUndeploying] = useState(false)
@@ -69,7 +75,7 @@ export function DeployModal({
     workflowId ? state.workflows[workflowId] : undefined
   )
   const workflowWorkspaceId = workflowMetadata?.workspaceId ?? null
-  const [activeTab, setActiveTab] = useState<TabView>('api')
+  const [activeTab, setActiveTab] = useState<TabView>('general')
   const [chatSubmitting, setChatSubmitting] = useState(false)
   const [apiDeployError, setApiDeployError] = useState<string | null>(null)
   const [chatExists, setChatExists] = useState(false)
@@ -78,25 +84,18 @@ export function DeployModal({
 
   const [versions, setVersions] = useState<WorkflowDeploymentVersionResponse[]>([])
   const [versionsLoading, setVersionsLoading] = useState(false)
-  const [activatingVersion, setActivatingVersion] = useState<number | null>(null)
-  const [previewVersion, setPreviewVersion] = useState<number | null>(null)
-  const [previewing, setPreviewing] = useState(false)
-  const [previewDeployedState, setPreviewDeployedState] = useState<WorkflowState | null>(null)
-  const [currentPage, setCurrentPage] = useState(1)
-  const itemsPerPage = 5
-  const [editingVersion, setEditingVersion] = useState<number | null>(null)
-  const [editValue, setEditValue] = useState('')
-  const [isRenaming, setIsRenaming] = useState(false)
-  const [openDropdown, setOpenDropdown] = useState<number | null>(null)
-  const [versionToActivate, setVersionToActivate] = useState<number | null>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  useEffect(() => {
-    if (editingVersion !== null && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [editingVersion])
+  const [showUndeployConfirm, setShowUndeployConfirm] = useState(false)
+  const [templateFormValid, setTemplateFormValid] = useState(false)
+  const [templateSubmitting, setTemplateSubmitting] = useState(false)
+  const [hasExistingTemplate, setHasExistingTemplate] = useState(false)
+  const [templateStatus, setTemplateStatus] = useState<{
+    status: 'pending' | 'approved' | 'rejected' | null
+    views?: number
+    stars?: number
+  } | null>(null)
+
+  const [existingChat, setExistingChat] = useState<ExistingChat | null>(null)
+  const [isLoadingChat, setIsLoadingChat] = useState(false)
 
   const getApiKeyLabel = (value?: string | null) => {
     if (value && value.trim().length > 0) {
@@ -112,41 +111,48 @@ export function DeployModal({
     return getInputFormatExampleUtil(includeStreaming, selectedStreamingOutputs)
   }
 
-  const fetchChatDeploymentInfo = async () => {
-    if (!open || !workflowId) return
+  const fetchChatDeploymentInfo = useCallback(async () => {
+    if (!workflowId) return
 
     try {
-      setIsLoading(true)
+      setIsLoadingChat(true)
       const response = await fetch(`/api/workflows/${workflowId}/chat/status`)
 
       if (response.ok) {
         const data = await response.json()
         if (data.isDeployed && data.deployment) {
-          setChatExists(true)
+          const detailResponse = await fetch(`/api/chat/manage/${data.deployment.id}`)
+          if (detailResponse.ok) {
+            const chatDetail = await detailResponse.json()
+            setExistingChat(chatDetail)
+            setChatExists(true)
+          } else {
+            setExistingChat(null)
+            setChatExists(false)
+          }
         } else {
+          setExistingChat(null)
           setChatExists(false)
         }
       } else {
+        setExistingChat(null)
         setChatExists(false)
       }
     } catch (error) {
       logger.error('Error fetching chat deployment info:', { error })
+      setExistingChat(null)
       setChatExists(false)
     } finally {
-      setIsLoading(false)
+      setIsLoadingChat(false)
     }
-  }
+  }, [workflowId])
 
   useEffect(() => {
-    if (open) {
-      setIsLoading(true)
+    if (open && workflowId) {
+      setActiveTab('general')
       fetchChatDeploymentInfo()
-      setActiveTab('api')
-      setVersionToActivate(null)
-    } else {
-      setVersionToActivate(null)
     }
-  }, [open, workflowId])
+  }, [open, workflowId, fetchChatDeploymentInfo])
 
   useEffect(() => {
     async function fetchDeploymentInfo() {
@@ -199,12 +205,7 @@ export function DeployModal({
     try {
       setIsSubmitting(true)
 
-      let deployEndpoint = `/api/workflows/${workflowId}/deploy`
-      if (versionToActivate !== null) {
-        deployEndpoint = `/api/workflows/${workflowId}/deployments/${versionToActivate}/activate`
-      }
-
-      const response = await fetch(deployEndpoint, {
+      const response = await fetch(`/api/workflows/${workflowId}/deploy`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -221,17 +222,15 @@ export function DeployModal({
 
       const responseData = await response.json()
 
-      const isActivating = versionToActivate !== null
-      const isDeployedStatus = isActivating ? true : (responseData.isDeployed ?? false)
+      const isDeployedStatus = responseData.isDeployed ?? false
       const deployedAtTime = responseData.deployedAt ? new Date(responseData.deployedAt) : undefined
       const apiKeyLabel = getApiKeyLabel(responseData.apiKey)
 
       setDeploymentStatus(workflowId, isDeployedStatus, deployedAtTime, apiKeyLabel)
 
-      const isActivatingVersion = versionToActivate !== null
-      setNeedsRedeployment(isActivatingVersion)
+      setNeedsRedeployment(false)
       if (workflowId) {
-        useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, isActivatingVersion)
+        useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
       }
 
       await refetchDeployedState()
@@ -250,15 +249,11 @@ export function DeployModal({
           apiKey: getApiKeyLabel(deploymentData.apiKey),
           endpoint: apiEndpoint,
           exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
-          needsRedeployment: isActivatingVersion,
+          needsRedeployment: false,
         })
       }
 
-      setVersionToActivate(null)
       setApiDeployError(null)
-
-      // Templates connected to this workflow are automatically updated with the new state
-      // The deployWorkflow function handles updating template states in db-helpers.ts
     } catch (error: unknown) {
       logger.error('Error deploying workflow:', { error })
       const errorMessage = error instanceof Error ? error.message : 'Failed to deploy workflow'
@@ -268,10 +263,9 @@ export function DeployModal({
     }
   }
 
-  const fetchVersions = async () => {
+  const fetchVersions = useCallback(async () => {
     if (!workflowId) return
     try {
-      setVersionsLoading(true)
       const res = await fetch(`/api/workflows/${workflowId}/deployments`)
       if (res.ok) {
         const data = await res.json()
@@ -281,18 +275,16 @@ export function DeployModal({
       }
     } catch {
       setVersions([])
-    } finally {
-      setVersionsLoading(false)
     }
-  }
+  }, [workflowId])
 
   useEffect(() => {
     if (open && workflowId) {
-      fetchVersions()
+      setVersionsLoading(true)
+      fetchVersions().finally(() => setVersionsLoading(false))
     }
-  }, [open, workflowId])
+  }, [open, workflowId, fetchVersions])
 
-  // Clean up selectedStreamingOutputs when blocks are deleted
   useEffect(() => {
     if (!open || selectedStreamingOutputs.length === 0) return
 
@@ -300,7 +292,6 @@ export function DeployModal({
     const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i
 
     const validOutputs = selectedStreamingOutputs.filter((outputId) => {
-      // If it starts with a UUID, extract the blockId and check if the block exists
       if (UUID_REGEX.test(outputId)) {
         const underscoreIndex = outputId.indexOf('_')
         if (underscoreIndex === -1) return false
@@ -310,7 +301,6 @@ export function DeployModal({
         return !!block
       }
 
-      // If it's in blockName.attribute format, check if a block with that name exists
       const parts = outputId.split('.')
       if (parts.length >= 2) {
         const blockName = parts[0]
@@ -323,13 +313,11 @@ export function DeployModal({
       return true
     })
 
-    // Update the state if any outputs were filtered out
     if (validOutputs.length !== selectedStreamingOutputs.length) {
       setSelectedStreamingOutputs(validOutputs)
     }
   }, [open, selectedStreamingOutputs, setSelectedStreamingOutputs])
 
-  // Listen for event to reopen deploy modal
   useEffect(() => {
     const handleOpenDeployModal = (event: Event) => {
       const customEvent = event as CustomEvent<{ tab?: TabView }>
@@ -346,73 +334,72 @@ export function DeployModal({
     }
   }, [onOpenChange])
 
-  const handleActivateVersion = (version: number) => {
-    setVersionToActivate(version)
-    setActiveTab('api')
-  }
-
-  const openVersionPreview = async (version: number) => {
-    if (!workflowId) return
-    try {
-      setPreviewing(true)
-      setPreviewVersion(version)
-      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`)
-      if (res.ok) {
-        const data = await res.json()
-        setPreviewDeployedState(data.deployedState || null)
-      } else {
-        setPreviewDeployedState(null)
-      }
-    } finally {
-      // keep modal open even if error; user can close
-    }
-  }
-
-  const handleStartRename = (version: number, currentName: string | null | undefined) => {
-    setOpenDropdown(null) // Close dropdown first
-    setEditingVersion(version)
-    setEditValue(currentName || `v${version}`)
-  }
-
-  const handleSaveRename = async (version: number) => {
-    if (!workflowId || !editValue.trim()) {
-      setEditingVersion(null)
-      return
-    }
-
-    const currentVersion = versions.find((v) => v.version === version)
-    const currentName = currentVersion?.name || `v${version}`
+  const handlePromoteToLive = useCallback(
+    async (version: number) => {
+      if (!workflowId) return
+
+      // Optimistically update versions to show the new active version immediately
+      const previousVersions = [...versions]
+      setVersions((prev) =>
+        prev.map((v) => ({
+          ...v,
+          isActive: v.version === version,
+        }))
+      )
 
-    if (editValue.trim() === currentName) {
-      setEditingVersion(null)
-      return
-    }
+      try {
+        const response = await fetch(
+          `/api/workflows/${workflowId}/deployments/${version}/activate`,
+          {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+          }
+        )
 
-    setIsRenaming(true)
-    try {
-      const res = await fetch(`/api/workflows/${workflowId}/deployments/${version}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: editValue.trim() }),
-      })
+        if (!response.ok) {
+          const errorData = await response.json()
+          throw new Error(errorData.error || 'Failed to promote version')
+        }
 
-      if (res.ok) {
-        await fetchVersions()
-        setEditingVersion(null)
-      } else {
-        logger.error('Failed to rename version')
+        const responseData = await response.json()
+
+        const deployedAtTime = responseData.deployedAt
+          ? new Date(responseData.deployedAt)
+          : undefined
+        const apiKeyLabel = getApiKeyLabel(responseData.apiKey)
+
+        setDeploymentStatus(workflowId, true, deployedAtTime, apiKeyLabel)
+
+        // Refresh deployed state in background (no loading flash)
+        refetchDeployedState()
+        fetchVersions()
+
+        const deploymentInfoResponse = await fetch(`/api/workflows/${workflowId}/deploy`)
+        if (deploymentInfoResponse.ok) {
+          const deploymentData = await deploymentInfoResponse.json()
+          const apiEndpoint = `${getEnv('NEXT_PUBLIC_APP_URL')}/api/workflows/${workflowId}/execute`
+          const inputFormatExample = getInputFormatExample(selectedStreamingOutputs.length > 0)
+          const placeholderKey = getApiHeaderPlaceholder()
+
+          setDeploymentInfo({
+            isDeployed: deploymentData.isDeployed,
+            deployedAt: deploymentData.deployedAt,
+            apiKey: getApiKeyLabel(deploymentData.apiKey),
+            endpoint: apiEndpoint,
+            exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
+            needsRedeployment: false,
+          })
+        }
+      } catch (error) {
+        // Rollback optimistic update on error
+        setVersions(previousVersions)
+        throw error
       }
-    } catch (error) {
-      logger.error('Error renaming version:', error)
-    } finally {
-      setIsRenaming(false)
-    }
-  }
-
-  const handleCancelRename = () => {
-    setEditingVersion(null)
-    setEditValue('')
-  }
+    },
+    [workflowId, versions, refetchDeployedState, fetchVersions, selectedStreamingOutputs]
+  )
 
   const handleUndeploy = async () => {
     try {
@@ -429,6 +416,7 @@ export function DeployModal({
 
       setDeploymentStatus(workflowId, false)
       setChatExists(false)
+      setShowUndeployConfirm(false)
       onOpenChange(false)
     } catch (error: unknown) {
       logger.error('Error undeploying workflow:', { error })
@@ -490,8 +478,6 @@ export function DeployModal({
   const handlePostDeploymentUpdate = async () => {
     if (!workflowId) return
 
-    const isActivating = versionToActivate !== null
-
     setDeploymentStatus(workflowId, true, new Date(), getApiKeyLabel())
 
     const deploymentInfoResponse = await fetch(`/api/workflows/${workflowId}/deploy`)
@@ -508,19 +494,18 @@ export function DeployModal({
         apiKey: getApiKeyLabel(deploymentData.apiKey),
         endpoint: apiEndpoint,
         exampleCommand: `curl -X POST -H "X-API-Key: ${placeholderKey}" -H "Content-Type: application/json"${inputFormatExample} ${apiEndpoint}`,
-        needsRedeployment: isActivating,
+        needsRedeployment: false,
       })
     }
 
     await refetchDeployedState()
     await fetchVersions()
-    useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, isActivating)
+    useWorkflowRegistry.getState().setWorkflowNeedsRedeployment(workflowId, false)
   }
 
   const handleChatFormSubmit = () => {
     const form = document.getElementById('chat-deploy-form') as HTMLFormElement
     if (form) {
-      // Check if we're in success view and need to trigger update
       const updateTrigger = form.querySelector('[data-update-trigger]') as HTMLButtonElement
       if (updateTrigger) {
         updateTrigger.click()
@@ -530,325 +515,124 @@ export function DeployModal({
     }
   }
 
-  return (
-    <>
-      <Dialog open={open} onOpenChange={handleCloseModal}>
-        <DialogContent
-          className='flex max-h-[90vh] flex-col gap-0 overflow-hidden p-0 sm:max-w-[700px]'
-          hideCloseButton
-        >
-          <DialogHeader className='flex-shrink-0 border-b px-6 py-4'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <DialogTitle className='font-medium text-lg'>Deploy Workflow</DialogTitle>
-                {needsRedeployment && versions.length > 0 && versionToActivate === null && (
-                  <Badge variant='default'>
-                    {versions.find((v) => v.isActive)?.name ||
-                      `v${versions.find((v) => v.isActive)?.version}`}{' '}
-                    active
-                  </Badge>
-                )}
-              </div>
-              <Button variant='ghost' className='h-8 w-8 p-0' onClick={handleCloseModal}>
-                <X className='h-4 w-4' />
-                <span className='sr-only'>Close</span>
-              </Button>
-            </div>
-          </DialogHeader>
-
-          <div className='flex flex-1 flex-col overflow-hidden'>
-            <div className='flex h-14 flex-none items-center border-b px-6'>
-              <div className='flex gap-2'>
-                <Button
-                  variant={activeTab === 'api' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('api')}
-                >
-                  API
-                </Button>
-                <Button
-                  variant={activeTab === 'chat' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('chat')}
-                >
-                  Chat
-                </Button>
-                <Button
-                  variant={activeTab === 'versions' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('versions')}
-                >
-                  Versions
-                </Button>
-                <Button
-                  variant={activeTab === 'template' ? 'active' : 'default'}
-                  onClick={() => setActiveTab('template')}
-                >
-                  Template
-                </Button>
-              </div>
-            </div>
-
-            <div className='flex-1 overflow-y-auto'>
-              <div className='p-6' key={`${activeTab}-${versionToActivate}`}>
-                {activeTab === 'api' && (
-                  <div className='space-y-4'>
-                    {apiDeployError && (
-                      <div className='rounded-md border border-destructive/30 bg-destructive/10 p-3 text-destructive text-sm'>
-                        <div className='font-semibold'>API Deployment Error</div>
-                        <div>{apiDeployError}</div>
-                      </div>
-                    )}
-
-                    {versionToActivate !== null ? (
-                      <div className='space-y-4'>
-                        <div className='rounded-md border bg-muted/40 p-4 text-muted-foreground text-sm'>
-                          {`Deploy version ${
-                            versions.find((v) => v.version === versionToActivate)?.name ||
-                            `v${versionToActivate}`
-                          } to production.`}
-                        </div>
-                        <div className='flex gap-2'>
-                          <Button variant='primary' onClick={onDeploy} disabled={isSubmitting}>
-                            {isSubmitting ? (
-                              <>
-                                <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
-                                Deploying...
-                              </>
-                            ) : (
-                              'Deploy version'
-                            )}
-                          </Button>
-                          <Button variant='outline' onClick={() => setVersionToActivate(null)}>
-                            Cancel
-                          </Button>
-                        </div>
-                      </div>
-                    ) : (
-                      <DeploymentInfo
-                        isLoading={isLoading}
-                        deploymentInfo={
-                          deploymentInfo ? { ...deploymentInfo, needsRedeployment } : null
-                        }
-                        onRedeploy={handleRedeploy}
-                        onUndeploy={handleUndeploy}
-                        isSubmitting={isSubmitting}
-                        isUndeploying={isUndeploying}
-                        workflowId={workflowId}
-                        deployedState={deployedState}
-                        isLoadingDeployedState={isLoadingDeployedState}
-                        getInputFormatExample={getInputFormatExample}
-                        selectedStreamingOutputs={selectedStreamingOutputs}
-                        onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
-                        onLoadDeploymentComplete={handleCloseModal}
-                      />
-                    )}
-                  </div>
-                )}
+  const handleChatDelete = () => {
+    const form = document.getElementById('chat-deploy-form') as HTMLFormElement
+    if (form) {
+      const deleteButton = form.querySelector('[data-delete-trigger]') as HTMLButtonElement
+      if (deleteButton) {
+        deleteButton.click()
+      }
+    }
+  }
 
-                {activeTab === 'versions' && (
-                  <>
-                    <div className='mb-3 font-medium text-sm'>Deployment Versions</div>
-                    {versionsLoading ? (
-                      <div className='rounded-md border p-4 text-center text-muted-foreground text-sm'>
-                        Loading deployments...
-                      </div>
-                    ) : versions.length === 0 ? (
-                      <div className='rounded-md border p-4 text-center text-muted-foreground text-sm'>
-                        No deployments yet
-                      </div>
-                    ) : (
-                      <>
-                        <div className='overflow-hidden rounded-md border'>
-                          <table className='w-full'>
-                            <thead className='border-b bg-muted/50'>
-                              <tr>
-                                <th className='w-10' />
-                                <th className='w-[200px] whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Version
-                                </th>
-                                <th className='whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Deployed By
-                                </th>
-                                <th className='whitespace-nowrap px-4 py-2 text-left font-medium text-muted-foreground text-xs'>
-                                  Created
-                                </th>
-                                <th className='w-10' />
-                              </tr>
-                            </thead>
-                            <tbody className='divide-y'>
-                              {versions
-                                .slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
-                                .map((v) => (
-                                  <tr
-                                    key={v.id}
-                                    className='cursor-pointer transition-colors hover:bg-muted/30'
-                                    onClick={() => {
-                                      if (editingVersion !== v.version) {
-                                        openVersionPreview(v.version)
-                                      }
-                                    }}
-                                  >
-                                    <td className='px-4 py-2.5'>
-                                      <div
-                                        className={`h-2 w-2 rounded-full ${
-                                          v.isActive ? 'bg-green-500' : 'bg-muted-foreground/40'
-                                        }`}
-                                        title={v.isActive ? 'Active' : 'Inactive'}
-                                      />
-                                    </td>
-                                    <td className='w-[220px] max-w-[220px] px-4 py-2.5'>
-                                      {editingVersion === v.version ? (
-                                        <input
-                                          ref={inputRef}
-                                          value={editValue}
-                                          onChange={(e) => setEditValue(e.target.value)}
-                                          onKeyDown={(e) => {
-                                            if (e.key === 'Enter') {
-                                              e.preventDefault()
-                                              handleSaveRename(v.version)
-                                            } else if (e.key === 'Escape') {
-                                              e.preventDefault()
-                                              handleCancelRename()
-                                            }
-                                          }}
-                                          onBlur={() => handleSaveRename(v.version)}
-                                          className='w-full border-0 bg-transparent p-0 font-medium text-sm leading-5 outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                                          maxLength={100}
-                                          disabled={isRenaming}
-                                          autoComplete='off'
-                                          autoCorrect='off'
-                                          autoCapitalize='off'
-                                          spellCheck='false'
-                                        />
-                                      ) : (
-                                        <span className='block whitespace-pre-wrap break-words break-all font-medium text-sm leading-5'>
-                                          {v.name || `v${v.version}`}
-                                        </span>
-                                      )}
-                                    </td>
-                                    <td className='whitespace-nowrap px-4 py-2.5'>
-                                      <span className='text-muted-foreground text-sm'>
-                                        {v.deployedBy || 'Unknown'}
-                                      </span>
-                                    </td>
-                                    <td className='whitespace-nowrap px-4 py-2.5'>
-                                      <span className='text-muted-foreground text-sm'>
-                                        {new Date(v.createdAt).toLocaleDateString()}{' '}
-                                        {new Date(v.createdAt).toLocaleTimeString()}
-                                      </span>
-                                    </td>
-                                    <td
-                                      className='px-4 py-2.5'
-                                      onClick={(e) => e.stopPropagation()}
-                                    >
-                                      <Popover
-                                        open={openDropdown === v.version}
-                                        onOpenChange={(open) =>
-                                          setOpenDropdown(open ? v.version : null)
-                                        }
-                                      >
-                                        <PopoverTrigger asChild>
-                                          <Button
-                                            variant='ghost'
-                                            disabled={activatingVersion === v.version}
-                                            className='h-8 w-8 p-0'
-                                          >
-                                            <MoreVertical className='h-4 w-4' />
-                                          </Button>
-                                        </PopoverTrigger>
-                                        <PopoverContent align='end'>
-                                          <PopoverItem
-                                            onClick={() => openVersionPreview(v.version)}
-                                          >
-                                            {v.isActive ? 'View Active' : 'Inspect'}
-                                          </PopoverItem>
-                                          <PopoverItem
-                                            onClick={() => handleStartRename(v.version, v.name)}
-                                          >
-                                            Rename
-                                          </PopoverItem>
-                                        </PopoverContent>
-                                      </Popover>
-                                    </td>
-                                  </tr>
-                                ))}
-                            </tbody>
-                          </table>
-                        </div>
-                        {versions.length > itemsPerPage && (
-                          <div className='mt-3 flex items-center justify-between'>
-                            <span className='text-muted-foreground text-sm'>
-                              Showing{' '}
-                              {Math.min((currentPage - 1) * itemsPerPage + 1, versions.length)} -{' '}
-                              {Math.min(currentPage * itemsPerPage, versions.length)} of{' '}
-                              {versions.length}
-                            </span>
-                            <div className='flex gap-2'>
-                              <Button
-                                variant='outline'
-                                onClick={() => setCurrentPage(currentPage - 1)}
-                                disabled={currentPage === 1}
-                              >
-                                Previous
-                              </Button>
-                              <Button
-                                variant='outline'
-                                onClick={() => setCurrentPage(currentPage + 1)}
-                                disabled={currentPage * itemsPerPage >= versions.length}
-                              >
-                                Next
-                              </Button>
-                            </div>
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </>
-                )}
+  const handleTemplateFormSubmit = useCallback(() => {
+    const form = document.getElementById('template-deploy-form') as HTMLFormElement
+    form?.requestSubmit()
+  }, [])
+
+  const handleTemplateDelete = useCallback(() => {
+    const form = document.getElementById('template-deploy-form')
+    const deleteTrigger = form?.querySelector('[data-template-delete-trigger]') as HTMLButtonElement
+    deleteTrigger?.click()
+  }, [])
 
-                {activeTab === 'chat' && (
-                  <ChatDeploy
-                    workflowId={workflowId || ''}
-                    deploymentInfo={deploymentInfo}
-                    onChatExistsChange={setChatExists}
-                    chatSubmitting={chatSubmitting}
-                    setChatSubmitting={setChatSubmitting}
-                    onValidationChange={setIsChatFormValid}
+  return (
+    <>
+      <Modal open={open} onOpenChange={handleCloseModal}>
+        <ModalContent className='h-[76vh] w-[660px]'>
+          <ModalHeader>Deploy Workflow</ModalHeader>
+
+          <ModalTabs
+            value={activeTab}
+            onValueChange={(value) => setActiveTab(value as TabView)}
+            className='flex min-h-0 flex-1 flex-col'
+          >
+            <ModalTabsList activeValue={activeTab}>
+              <ModalTabsTrigger value='general'>General</ModalTabsTrigger>
+              <ModalTabsTrigger value='api'>API</ModalTabsTrigger>
+              <ModalTabsTrigger value='chat'>Chat</ModalTabsTrigger>
+              <ModalTabsTrigger value='template'>Template</ModalTabsTrigger>
+            </ModalTabsList>
+
+            <ModalBody className='min-h-0 flex-1'>
+              <ModalTabsContent value='general'>
+                <GeneralDeploy
+                  workflowId={workflowId}
+                  deployedState={deployedState}
+                  isLoadingDeployedState={isLoadingDeployedState}
+                  versions={versions}
+                  versionsLoading={versionsLoading}
+                  onPromoteToLive={handlePromoteToLive}
+                  onLoadDeploymentComplete={handleCloseModal}
+                  fetchVersions={fetchVersions}
+                />
+              </ModalTabsContent>
+
+              <ModalTabsContent value='api'>
+                <ApiDeploy
+                  workflowId={workflowId}
+                  deploymentInfo={deploymentInfo}
+                  isLoading={isLoading}
+                  needsRedeployment={needsRedeployment}
+                  apiDeployError={apiDeployError}
+                  getInputFormatExample={getInputFormatExample}
+                  selectedStreamingOutputs={selectedStreamingOutputs}
+                  onSelectedStreamingOutputsChange={setSelectedStreamingOutputs}
+                />
+              </ModalTabsContent>
+
+              <ModalTabsContent value='chat'>
+                <ChatDeploy
+                  workflowId={workflowId || ''}
+                  deploymentInfo={deploymentInfo}
+                  existingChat={existingChat}
+                  isLoadingChat={isLoadingChat}
+                  onRefetchChat={fetchChatDeploymentInfo}
+                  onChatExistsChange={setChatExists}
+                  chatSubmitting={chatSubmitting}
+                  setChatSubmitting={setChatSubmitting}
+                  onValidationChange={setIsChatFormValid}
+                  onDeploymentComplete={handleCloseModal}
+                  onDeployed={handlePostDeploymentUpdate}
+                  onVersionActivated={() => {}}
+                />
+              </ModalTabsContent>
+
+              <ModalTabsContent value='template'>
+                {workflowId && (
+                  <TemplateDeploy
+                    workflowId={workflowId}
                     onDeploymentComplete={handleCloseModal}
-                    onDeployed={handlePostDeploymentUpdate}
-                    onUndeploy={handleUndeploy}
-                    onVersionActivated={() => setVersionToActivate(null)}
+                    onValidationChange={setTemplateFormValid}
+                    onSubmittingChange={setTemplateSubmitting}
+                    onExistingTemplateChange={setHasExistingTemplate}
+                    onTemplateStatusChange={setTemplateStatus}
                   />
                 )}
-
-                {activeTab === 'template' && workflowId && (
-                  <TemplateDeploy workflowId={workflowId} onDeploymentComplete={handleCloseModal} />
-                )}
-              </div>
-            </div>
-          </div>
-
+              </ModalTabsContent>
+            </ModalBody>
+          </ModalTabs>
+
+          {activeTab === 'general' && (
+            <GeneralFooter
+              isDeployed={isDeployed}
+              needsRedeployment={needsRedeployment}
+              isSubmitting={isSubmitting}
+              isUndeploying={isUndeploying}
+              onDeploy={onDeploy}
+              onRedeploy={handleRedeploy}
+              onUndeploy={() => setShowUndeployConfirm(true)}
+            />
+          )}
           {activeTab === 'chat' && (
-            <div className='flex flex-shrink-0 justify-between border-t px-6 py-4'>
-              <Button variant='outline' onClick={handleCloseModal}>
-                Cancel
-              </Button>
-
+            <ModalFooter className='items-center'>
               <div className='flex gap-2'>
                 {chatExists && (
                   <Button
                     type='button'
-                    onClick={() => {
-                      const form = document.getElementById('chat-deploy-form') as HTMLFormElement
-                      if (form) {
-                        const deleteButton = form.querySelector(
-                          '[data-delete-trigger]'
-                        ) as HTMLButtonElement
-                        if (deleteButton) {
-                          deleteButton.click()
-                        }
-                      }
-                    }}
+                    variant='default'
+                    onClick={handleChatDelete}
                     disabled={chatSubmitting}
-                    className='bg-red-500 text-white hover:bg-red-600'
                   >
                     Delete
                   </Button>
@@ -859,49 +643,215 @@ export function DeployModal({
                   onClick={handleChatFormSubmit}
                   disabled={chatSubmitting || !isChatFormValid}
                 >
-                  {chatSubmitting ? (
-                    <>
-                      <Loader2 className='mr-1.5 h-3.5 w-3.5 animate-spin' />
-                      Deploying...
-                    </>
-                  ) : chatExists ? (
-                    'Update'
-                  ) : (
-                    'Deploy Chat'
-                  )}
+                  {chatSubmitting
+                    ? chatExists
+                      ? 'Updating...'
+                      : 'Launching...'
+                    : chatExists
+                      ? 'Update'
+                      : 'Launch Chat'}
                 </Button>
               </div>
-            </div>
+            </ModalFooter>
           )}
-        </DialogContent>
-        {previewVersion !== null && previewDeployedState && workflowId && (
-          <DeployedWorkflowModal
-            isOpen={true}
-            onClose={() => {
-              setPreviewVersion(null)
-              setPreviewDeployedState(null)
-              setPreviewing(false)
-            }}
-            needsRedeployment={true}
-            activeDeployedState={deployedState}
-            selectedDeployedState={previewDeployedState as WorkflowState}
-            selectedVersion={previewVersion}
-            onActivateVersion={() => {
-              handleActivateVersion(previewVersion)
-              setPreviewVersion(null)
-              setPreviewDeployedState(null)
-              setPreviewing(false)
-            }}
-            isActivating={activatingVersion === previewVersion}
-            selectedVersionLabel={
-              versions.find((v) => v.version === previewVersion)?.name || `v${previewVersion}`
-            }
-            workflowId={workflowId}
-            isSelectedVersionActive={versions.find((v) => v.version === previewVersion)?.isActive}
-            onLoadDeploymentComplete={handleCloseModal}
-          />
-        )}
-      </Dialog>
+          {activeTab === 'template' && (
+            <ModalFooter
+              className={`items-center ${hasExistingTemplate && templateStatus ? 'justify-between' : ''}`}
+            >
+              {hasExistingTemplate && templateStatus && (
+                <TemplateStatusBadge
+                  status={templateStatus.status}
+                  views={templateStatus.views}
+                  stars={templateStatus.stars}
+                />
+              )}
+              <div className='flex gap-2'>
+                {hasExistingTemplate && (
+                  <Button
+                    type='button'
+                    variant='default'
+                    onClick={handleTemplateDelete}
+                    disabled={templateSubmitting}
+                  >
+                    Delete
+                  </Button>
+                )}
+                <Button
+                  type='button'
+                  variant='primary'
+                  onClick={handleTemplateFormSubmit}
+                  disabled={templateSubmitting || !templateFormValid}
+                >
+                  {templateSubmitting
+                    ? hasExistingTemplate
+                      ? 'Updating...'
+                      : 'Publishing...'
+                    : hasExistingTemplate
+                      ? 'Update Template'
+                      : 'Publish Template'}
+                </Button>
+              </div>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      </Modal>
+
+      <Modal open={showUndeployConfirm} onOpenChange={setShowUndeployConfirm}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Undeploy API</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+              Are you sure you want to undeploy this workflow?{' '}
+              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
+                This will remove the API endpoint and make it unavailable to external users.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => setShowUndeployConfirm(false)}
+              disabled={isUndeploying}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleUndeploy}
+              disabled={isUndeploying}
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+            >
+              {isUndeploying ? 'Undeploying...' : 'Undeploy'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
     </>
   )
 }
+
+interface StatusBadgeProps {
+  isWarning: boolean
+}
+
+function StatusBadge({ isWarning }: StatusBadgeProps) {
+  const label = isWarning ? 'Update deployment' : 'Live'
+
+  return (
+    <div
+      className={clsx(
+        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
+        isWarning ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
+      )}
+    >
+      <div
+        className='h-[6px] w-[6px] rounded-[2px]'
+        style={{
+          backgroundColor: isWarning ? '#EAB308' : '#4ADE80',
+        }}
+      />
+      <span
+        className='font-medium text-[11.5px]'
+        style={{
+          color: isWarning ? '#EAB308' : '#86EFAC',
+        }}
+      >
+        {label}
+      </span>
+    </div>
+  )
+}
+
+interface TemplateStatusBadgeProps {
+  status: 'pending' | 'approved' | 'rejected' | null
+  views?: number
+  stars?: number
+}
+
+function TemplateStatusBadge({ status, views, stars }: TemplateStatusBadgeProps) {
+  const isPending = status === 'pending'
+  const label = isPending ? 'Under review' : 'Live'
+
+  const statsText =
+    status === 'approved' && views !== undefined && views > 0
+      ? `${views} views${stars !== undefined && stars > 0 ? ` • ${stars} stars` : ''}`
+      : null
+
+  return (
+    <div
+      className={clsx(
+        'flex h-[24px] items-center justify-start gap-[8px] rounded-[6px] border px-[9px]',
+        isPending ? 'border-[#A16207] bg-[#452C0F]' : 'border-[#22703D] bg-[#14291B]'
+      )}
+    >
+      <div
+        className='h-[6px] w-[6px] rounded-[2px]'
+        style={{
+          backgroundColor: isPending ? '#EAB308' : '#4ADE80',
+        }}
+      />
+      <span
+        className='font-medium text-[11.5px]'
+        style={{
+          color: isPending ? '#EAB308' : '#86EFAC',
+        }}
+      >
+        {label}
+      </span>
+      {statsText && (
+        <span
+          className='font-medium text-[11.5px]'
+          style={{ color: isPending ? '#EAB308' : '#86EFAC' }}
+        >
+          • {statsText}
+        </span>
+      )}
+    </div>
+  )
+}
+
+interface GeneralFooterProps {
+  isDeployed?: boolean
+  needsRedeployment: boolean
+  isSubmitting: boolean
+  isUndeploying: boolean
+  onDeploy: () => Promise<void>
+  onRedeploy: () => Promise<void>
+  onUndeploy: () => void
+}
+
+function GeneralFooter({
+  isDeployed,
+  needsRedeployment,
+  isSubmitting,
+  isUndeploying,
+  onDeploy,
+  onRedeploy,
+  onUndeploy,
+}: GeneralFooterProps) {
+  if (!isDeployed) {
+    return (
+      <ModalFooter>
+        <Button variant='primary' onClick={onDeploy} disabled={isSubmitting}>
+          {isSubmitting ? 'Deploying...' : 'Deploy API'}
+        </Button>
+      </ModalFooter>
+    )
+  }
+
+  return (
+    <ModalFooter className='items-center justify-between'>
+      <StatusBadge isWarning={needsRedeployment} />
+      <div className='flex items-center gap-2'>
+        <Button variant='default' onClick={onUndeploy} disabled={isUndeploying || isSubmitting}>
+          {isUndeploying ? 'Undeploying...' : 'Undeploy'}
+        </Button>
+        {needsRedeployment && (
+          <Button variant='primary' onClick={onRedeploy} disabled={isSubmitting || isUndeploying}>
+            {isSubmitting ? 'Updating...' : 'Update'}
+          </Button>
+        )}
+      </div>
+    </ModalFooter>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index e76ea18fe27..7c2253351b7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -62,7 +62,6 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
   const isEmpty = !hasBlocks()
   const canDeploy = userPermissions.canAdmin
   const isDisabled = isDeploying || !canDeploy || isEmpty
-  const isPreviousVersionActive = isDeployed && changeDetected
 
   /**
    * Handle deploy button click
@@ -135,6 +134,7 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
         open={isModalOpen}
         onOpenChange={setIsModalOpen}
         workflowId={activeWorkflowId}
+        isDeployed={isDeployed}
         needsRedeployment={changeDetected}
         setNeedsRedeployment={setChangeDetected}
         deployedState={deployedState!}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts
deleted file mode 100644
index 321110c491d..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-deployment.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useCallback, useState } from 'react'
-import { z } from 'zod'
-import { createLogger } from '@/lib/logs/console/logger'
-import type { ChatFormData } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form'
-import type { OutputConfig } from '@/stores/chat/store'
-
-const logger = createLogger('ChatDeployment')
-
-export interface ChatDeploymentState {
-  isLoading: boolean
-  error: string | null
-  deployedUrl: string | null
-}
-
-const chatSchema = z.object({
-  workflowId: z.string().min(1, 'Workflow ID is required'),
-  identifier: z
-    .string()
-    .min(1, 'Identifier is required')
-    .regex(/^[a-z0-9-]+$/, 'Identifier can only contain lowercase letters, numbers, and hyphens'),
-  title: z.string().min(1, 'Title is required'),
-  description: z.string().optional(),
-  customizations: z.object({
-    primaryColor: z.string(),
-    welcomeMessage: z.string(),
-    imageUrl: z.string().optional(),
-  }),
-  authType: z.enum(['public', 'password', 'email']).default('public'),
-  password: z.string().optional(),
-  allowedEmails: z.array(z.string()).optional().default([]),
-  outputConfigs: z
-    .array(
-      z.object({
-        blockId: z.string(),
-        path: z.string(),
-      })
-    )
-    .optional()
-    .default([]),
-})
-
-export function useChatDeployment() {
-  const [state, setState] = useState<ChatDeploymentState>({
-    isLoading: false,
-    error: null,
-    deployedUrl: null,
-  })
-
-  const deployChat = useCallback(
-    async (
-      workflowId: string,
-      formData: ChatFormData,
-      deploymentInfo: { apiKey: string } | null,
-      existingChatId?: string,
-      imageUrl?: string | null
-    ) => {
-      setState({ isLoading: true, error: null, deployedUrl: null })
-
-      try {
-        // Prepare output configs
-        const outputConfigs: OutputConfig[] = formData.selectedOutputBlocks
-          .map((outputId) => {
-            const firstUnderscoreIndex = outputId.indexOf('_')
-            if (firstUnderscoreIndex !== -1) {
-              const blockId = outputId.substring(0, firstUnderscoreIndex)
-              const path = outputId.substring(firstUnderscoreIndex + 1)
-              if (blockId && path) {
-                return { blockId, path }
-              }
-            }
-            return null
-          })
-          .filter(Boolean) as OutputConfig[]
-
-        const payload = {
-          workflowId,
-          identifier: formData.identifier.trim(),
-          title: formData.title.trim(),
-          description: formData.description.trim(),
-          customizations: {
-            primaryColor: 'var(--brand-primary-hover-hex)',
-            welcomeMessage: formData.welcomeMessage.trim(),
-            ...(imageUrl && { imageUrl }),
-          },
-          authType: formData.authType,
-          password: formData.authType === 'password' ? formData.password : undefined,
-          allowedEmails:
-            formData.authType === 'email' || formData.authType === 'sso' ? formData.emails : [],
-          outputConfigs,
-          apiKey: deploymentInfo?.apiKey,
-          deployApiEnabled: !existingChatId,
-        }
-
-        chatSchema.parse(payload)
-
-        // Determine endpoint and method
-        const endpoint = existingChatId ? `/api/chat/manage/${existingChatId}` : '/api/chat'
-        const method = existingChatId ? 'PATCH' : 'POST'
-
-        const response = await fetch(endpoint, {
-          method,
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(payload),
-        })
-
-        const result = await response.json()
-
-        if (!response.ok) {
-          // Handle identifier conflict specifically
-          if (result.error === 'Identifier already in use') {
-            throw new Error('This identifier is already in use')
-          }
-          throw new Error(result.error || `Failed to ${existingChatId ? 'update' : 'deploy'} chat`)
-        }
-
-        if (!result.chatUrl) {
-          throw new Error('Response missing chatUrl')
-        }
-
-        setState({
-          isLoading: false,
-          error: null,
-          deployedUrl: result.chatUrl,
-        })
-
-        logger.info(`Chat ${existingChatId ? 'updated' : 'deployed'} successfully:`, result.chatUrl)
-        return result.chatUrl
-      } catch (error: any) {
-        const errorMessage = error.message || 'An unexpected error occurred'
-        setState({
-          isLoading: false,
-          error: errorMessage,
-          deployedUrl: null,
-        })
-
-        logger.error(`Failed to ${existingChatId ? 'update' : 'deploy'} chat:`, error)
-        throw error
-      }
-    },
-    []
-  )
-
-  const reset = useCallback(() => {
-    setState({
-      isLoading: false,
-      error: null,
-      deployedUrl: null,
-    })
-  }, [])
-
-  return {
-    ...state,
-    deployChat,
-    reset,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts
deleted file mode 100644
index 3c73581d743..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/hooks/hooks/use-chat-form.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-import { useCallback, useState } from 'react'
-
-export type AuthType = 'public' | 'password' | 'email' | 'sso'
-
-export interface ChatFormData {
-  identifier: string
-  title: string
-  description: string
-  authType: AuthType
-  password: string
-  emails: string[]
-  welcomeMessage: string
-  selectedOutputBlocks: string[]
-}
-
-export interface ChatFormErrors {
-  identifier?: string
-  title?: string
-  password?: string
-  emails?: string
-  outputBlocks?: string
-  general?: string
-}
-
-const initialFormData: ChatFormData = {
-  identifier: '',
-  title: '',
-  description: '',
-  authType: 'public',
-  password: '',
-  emails: [],
-  welcomeMessage: 'Hi there! How can I help you today?',
-  selectedOutputBlocks: [],
-}
-
-export function useChatForm(initialData?: Partial<ChatFormData>) {
-  const [formData, setFormData] = useState<ChatFormData>({
-    ...initialFormData,
-    ...initialData,
-  })
-
-  const [errors, setErrors] = useState<ChatFormErrors>({})
-
-  const updateField = useCallback(
-    <K extends keyof ChatFormData>(field: K, value: ChatFormData[K]) => {
-      setFormData((prev) => ({ ...prev, [field]: value }))
-      // Clear error when user starts typing
-      if (field in errors && errors[field as keyof ChatFormErrors]) {
-        setErrors((prev) => ({ ...prev, [field]: undefined }))
-      }
-    },
-    [errors]
-  )
-
-  const setError = useCallback((field: keyof ChatFormErrors, message: string) => {
-    setErrors((prev) => ({ ...prev, [field]: message }))
-  }, [])
-
-  const clearError = useCallback((field: keyof ChatFormErrors) => {
-    setErrors((prev) => ({ ...prev, [field]: undefined }))
-  }, [])
-
-  const clearAllErrors = useCallback(() => {
-    setErrors({})
-  }, [])
-
-  const validateForm = useCallback((): boolean => {
-    const newErrors: ChatFormErrors = {}
-
-    if (!formData.identifier.trim()) {
-      newErrors.identifier = 'Identifier is required'
-    } else if (!/^[a-z0-9-]+$/.test(formData.identifier)) {
-      newErrors.identifier = 'Identifier can only contain lowercase letters, numbers, and hyphens'
-    }
-
-    if (!formData.title.trim()) {
-      newErrors.title = 'Title is required'
-    }
-
-    if (formData.authType === 'password' && !formData.password.trim()) {
-      newErrors.password = 'Password is required when using password protection'
-    }
-
-    if (formData.authType === 'email' && formData.emails.length === 0) {
-      newErrors.emails = 'At least one email or domain is required when using email access control'
-    }
-
-    if (formData.authType === 'sso' && formData.emails.length === 0) {
-      newErrors.emails = 'At least one email or domain is required when using SSO access control'
-    }
-
-    if (formData.selectedOutputBlocks.length === 0) {
-      newErrors.outputBlocks = 'Please select at least one output block'
-    }
-
-    setErrors(newErrors)
-    return Object.keys(newErrors).length === 0
-  }, [formData])
-
-  const resetForm = useCallback(() => {
-    setFormData(initialFormData)
-    setErrors({})
-  }, [])
-
-  return {
-    formData,
-    errors,
-    updateField,
-    setError,
-    clearError,
-    clearAllErrors,
-    validateForm,
-    resetForm,
-    setFormData,
-  }
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/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 8d6524e48a9..cc8edce07f6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -332,7 +332,7 @@ export function FieldFormat({
           <Code.Content paddingLeft={`${gutterWidth}px`}>
             <Code.Placeholder gutterWidth={gutterWidth} show={fieldValue.length === 0}>
               {
-                '[\n  {\n    "data": "data:application/pdf;base64,...",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
+                '[\n  {\n    "data": "<base64>",\n    "type": "file",\n    "name": "document.pdf",\n    "mime": "application/pdf"\n  }\n]'
               }
             </Code.Placeholder>
             <Editor
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 f947377bd40..e2bd7815c6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import { Braces, Square } from 'lucide-react'
+import { ArrowUp, Square } from 'lucide-react'
 import { useParams, useRouter } from 'next/navigation'
 import {
   BubbleChatPreview,
@@ -408,7 +408,7 @@ export function Panel() {
                     onClick={handleExportJson}
                     disabled={!userPermissions.canEdit || isExporting || !currentWorkflow}
                   >
-                    <Braces className='h-3 w-3' />
+                    <ArrowUp className='h-3 w-3' />
                     <span>Export workflow</span>
                   </PopoverItem>
                   <PopoverItem
@@ -462,7 +462,7 @@ export function Panel() {
           <div className='flex flex-shrink-0 items-center justify-between px-[8px] pt-[14px]'>
             <div className='flex gap-[4px]'>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] truncate px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('copilot')}
                 data-tab-button='copilot'
@@ -470,7 +470,7 @@ export function Panel() {
                 Copilot
               </Button>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
                 data-tab-button='toolbar'
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 afabba5bdfb..48c999b068f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -24,7 +24,7 @@ import {
   getProviderName,
   shouldSkipBlockRender,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/utils'
-import { useBlockCore } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import { useBlockVisual } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   BLOCK_DIMENSIONS,
   useBlockDimensions,
@@ -430,15 +430,11 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     currentWorkflow,
     activeWorkflowId,
     isEnabled,
-    isActive,
-    diffStatus,
-    isDeletedBlock,
-    isFocused,
     handleClick,
     hasRing,
     ringStyles,
     runPathStatus,
-  } = useBlockCore({ blockId: id, data, isPending })
+  } = useBlockVisual({ blockId: id, data, isPending })
 
   const currentBlock = currentWorkflow.getBlockById(id)
 
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 9e2aeb0eb84..4292f8743ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/index.ts
@@ -1,6 +1,6 @@
 export { useAutoLayout } from './use-auto-layout'
-export { useBlockCore } from './use-block-core'
 export { BLOCK_DIMENSIONS, useBlockDimensions } from './use-block-dimensions'
+export { useBlockVisual } from './use-block-visual'
 export { type CurrentWorkflow, useCurrentWorkflow } from './use-current-workflow'
 export { useFloatBoundarySync, useFloatDrag, useFloatResize } from './use-float'
 export { useNodeUtilities } from './use-node-utilities'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
similarity index 54%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
index 7625dc88cf8..7fd80df2077 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-core.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-block-visual.ts
@@ -7,72 +7,72 @@ import { useExecutionStore } from '@/stores/execution/store'
 import { usePanelEditorStore } from '@/stores/panel/editor/store'
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
-interface UseBlockCoreOptions {
+/**
+ * Props for the useBlockVisual hook.
+ */
+interface UseBlockVisualProps {
+  /** The unique identifier of the block */
   blockId: string
+  /** Block data including type, config, and preview state */
   data: WorkflowBlockProps
+  /** Whether the block is pending execution */
   isPending?: boolean
 }
 
 /**
- * Consolidated hook for core block functionality shared across all block types.
- * Combines workflow state, block state, focus, and ring styling.
+ * Provides visual state and interaction handlers for workflow blocks.
+ * Computes ring styling based on execution, focus, diff, and run path states.
+ * In preview mode, all interactive and execution-related visual states are disabled.
+ *
+ * @param props - The hook properties
+ * @returns Visual state, click handler, and ring styling for the block
  */
-export function useBlockCore({ blockId, data, isPending = false }: UseBlockCoreOptions) {
-  // Workflow context
+export function useBlockVisual({ blockId, data, isPending = false }: UseBlockVisualProps) {
+  const isPreview = data.isPreview ?? false
+
   const currentWorkflow = useCurrentWorkflow()
   const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId)
 
-  // Block state (enabled, active, diff status, deleted)
-  const { isEnabled, isActive, diffStatus, isDeletedBlock } = useBlockState(
-    blockId,
-    currentWorkflow,
-    data
-  )
+  const {
+    isEnabled,
+    isActive: blockIsActive,
+    diffStatus,
+    isDeletedBlock,
+  } = useBlockState(blockId, currentWorkflow, data)
+
+  const isActive = isPreview ? false : blockIsActive
 
-  // Run path state (from last execution)
   const lastRunPath = useExecutionStore((state) => state.lastRunPath)
-  const runPathStatus = lastRunPath.get(blockId)
+  const runPathStatus = isPreview ? undefined : lastRunPath.get(blockId)
 
-  // Focus management
   const setCurrentBlockId = usePanelEditorStore((state) => state.setCurrentBlockId)
   const currentBlockId = usePanelEditorStore((state) => state.currentBlockId)
-  const isFocused = currentBlockId === blockId
+  const isFocused = isPreview ? false : currentBlockId === blockId
 
   const handleClick = useCallback(() => {
-    setCurrentBlockId(blockId)
-  }, [blockId, setCurrentBlockId])
+    if (!isPreview) {
+      setCurrentBlockId(blockId)
+    }
+  }, [blockId, setCurrentBlockId, isPreview])
 
-  // Ring styling based on all states
-  // Priority: active (executing) > pending > focused > deleted > diff > run path
   const { hasRing, ringClassName: ringStyles } = useMemo(
     () =>
       getBlockRingStyles({
         isActive,
-        isPending,
+        isPending: isPreview ? false : isPending,
         isFocused,
-        isDeletedBlock,
-        diffStatus,
+        isDeletedBlock: isPreview ? false : isDeletedBlock,
+        diffStatus: isPreview ? undefined : diffStatus,
         runPathStatus,
       }),
-    [isActive, isPending, isFocused, isDeletedBlock, diffStatus, runPathStatus]
+    [isActive, isPending, isFocused, isDeletedBlock, diffStatus, runPathStatus, isPreview]
   )
 
   return {
-    // Workflow context
     currentWorkflow,
     activeWorkflowId,
-
-    // Block state
     isEnabled,
-    isActive,
-    diffStatus,
-    isDeletedBlock,
-
-    // Focus
-    isFocused,
     handleClick,
-
-    // Ring styling
     hasRing,
     ringStyles,
     runPathStatus,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
index 951fe15b693..ba2fdf0dffb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
 import ReactFlow, {
   ConnectionLineType,
   type Edge,
@@ -8,6 +8,7 @@ import ReactFlow, {
   type Node,
   type NodeTypes,
   ReactFlowProvider,
+  useReactFlow,
 } from 'reactflow'
 import 'reactflow/dist/style.css'
 
@@ -64,6 +65,31 @@ const edgeTypes: EdgeTypes = {
   workflowEdge: WorkflowEdge, // Keep for backward compatibility
 }
 
+interface FitViewOnChangeProps {
+  nodes: Node[]
+  fitPadding: number
+}
+
+/**
+ * Helper component that calls fitView when nodes change.
+ * Must be rendered inside ReactFlowProvider.
+ */
+function FitViewOnChange({ nodes, fitPadding }: FitViewOnChangeProps) {
+  const { fitView } = useReactFlow()
+
+  useEffect(() => {
+    if (nodes.length > 0) {
+      // Small delay to ensure nodes are rendered before fitting
+      const timeoutId = setTimeout(() => {
+        fitView({ padding: fitPadding, duration: 200 })
+      }, 50)
+      return () => clearTimeout(timeoutId)
+    }
+  }, [nodes, fitPadding, fitView])
+
+  return null
+}
+
 export function WorkflowPreview({
   workflowState,
   showSubBlocks = true,
@@ -362,6 +388,7 @@ export function WorkflowPreview({
               : undefined
           }
         />
+        <FitViewOnChange nodes={nodes} fitPadding={fitPadding} />
       </div>
     </ReactFlowProvider>
   )
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
index d6884e4b6af..fc8199ac45f 100644
--- a/apps/sim/components/emcn/components/modal-new/modal.tsx
+++ b/apps/sim/components/emcn/components/modal-new/modal.tsx
@@ -248,15 +248,68 @@ ModalDescription.displayName = 'ModalDescription'
  */
 const ModalTabs = TabsPrimitive.Root
 
+interface ModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /** Currently active tab value for indicator positioning */
+  activeValue?: string
+}
+
 /**
- * Modal tabs list component. Container for tab triggers.
+ * Modal tabs list component with animated sliding indicator.
  */
 const ModalTabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List ref={ref} className={cn('flex', className)} {...props} />
-))
+  ModalTabsListProps
+>(({ className, children, activeValue, ...props }, ref) => {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const updateIndicator = () => {
+      const activeTab = list.querySelector('[data-state="active"]') as HTMLElement | null
+      if (!activeTab) return
+
+      setIndicator({
+        left: activeTab.offsetLeft,
+        width: activeTab.offsetWidth,
+      })
+      setReady(true)
+    }
+
+    updateIndicator()
+
+    const observer = new MutationObserver(updateIndicator)
+    observer.observe(list, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
+    window.addEventListener('resize', updateIndicator)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', updateIndicator)
+    }
+  }, [activeValue])
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn('relative flex gap-[16px] px-4', className)}
+      {...props}
+    >
+      <div ref={listRef} className='flex gap-[16px]'>
+        {children}
+      </div>
+      <span
+        className={cn(
+          'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
+          ready && 'transition-all duration-200 ease-out'
+        )}
+        style={{ left: indicator.left, width: indicator.width }}
+      />
+    </TabsPrimitive.List>
+  )
+})
 
 ModalTabsList.displayName = 'ModalTabsList'
 
@@ -270,9 +323,8 @@ const ModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'relative px-0 py-0 text-[12px] text-[var(--text-secondary)]',
-      'after:absolute after:right-0 after:bottom-0 after:left-0 after:h-[8px] after:bg-transparent',
-      'data-[state=active]:text-[#FFFFFF] data-[state=active]:after:bg-[#FFFFFF]',
+      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
+      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 21e034b7075..041b9d9f2fe 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -241,6 +241,11 @@ export interface PopoverContentProps
    * @default 8
    */
   collisionPadding?: number
+  /**
+   * When true, adds a border to the popover content
+   * @default false
+   */
+  border?: boolean
 }
 
 /**
@@ -272,6 +277,7 @@ const PopoverContent = React.forwardRef<
       align = 'start',
       sideOffset,
       collisionPadding = 8,
+      border = false,
       ...restProps
     },
     ref
@@ -330,6 +336,7 @@ const PopoverContent = React.forwardRef<
           // If width is constrained by the caller (prop or style), ensure inner flexible text truncates by default,
           // and also truncate section headers.
           hasUserWidthConstraint && '[&_.flex-1]:truncate [&_[data-popover-section]]:truncate',
+          border && 'border border-[var(--surface-11)]',
           className
         )}
         style={{
diff --git a/apps/sim/components/ui/tag-input.tsx b/apps/sim/components/ui/tag-input.tsx
index 2a9a516da1e..4b7cd83cd30 100644
--- a/apps/sim/components/ui/tag-input.tsx
+++ b/apps/sim/components/ui/tag-input.tsx
@@ -2,7 +2,6 @@
 
 import { type KeyboardEvent, useRef, useState } from 'react'
 import { X } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
 import { Input } from '@/components/ui/input'
 import { cn } from '@/lib/core/utils/cn'
 
@@ -43,13 +42,11 @@ export function TagInput({
       e.preventDefault()
       addTag(inputValue)
     } else if (e.key === 'Backspace' && !inputValue && value.length > 0) {
-      // Remove last tag when backspace is pressed with empty input
       removeTag(value[value.length - 1])
     }
   }
 
   const handleBlur = () => {
-    // Add tag on blur if there's input
     if (inputValue.trim()) {
       addTag(inputValue)
     }
@@ -58,32 +55,14 @@ export function TagInput({
   return (
     <div
       className={cn(
-        'flex min-h-[34px] flex-wrap gap-1 rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[8px] py-[6px] dark:bg-[var(--surface-9)]',
+        'scrollbar-hide flex max-h-32 min-h-9 flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[4px] focus-within:outline-none dark:bg-[var(--surface-9)]',
         disabled && 'cursor-not-allowed opacity-50',
         className
       )}
       onClick={() => !disabled && inputRef.current?.focus()}
     >
       {value.map((tag) => (
-        <Badge
-          key={tag}
-          variant='secondary'
-          className='h-[22px] gap-1 border-0 bg-muted/60 pr-1 pl-2 text-xs hover:bg-muted/80'
-        >
-          <span>{tag}</span>
-          {!disabled && (
-            <button
-              type='button'
-              onClick={(e) => {
-                e.stopPropagation()
-                removeTag(tag)
-              }}
-              className='ml-auto rounded-full p-0.5 hover:bg-muted-foreground/20'
-            >
-              <X className='h-3 w-3' />
-            </button>
-          )}
-        </Badge>
+        <Tag key={tag} value={tag} onRemove={() => removeTag(tag)} disabled={disabled} />
       ))}
       {!disabled && value.length < maxTags && (
         <Input
@@ -95,9 +74,39 @@ export function TagInput({
           onBlur={handleBlur}
           placeholder={value.length === 0 ? placeholder : ''}
           disabled={disabled}
-          className='h-[22px] min-w-[120px] flex-1 border-0 bg-transparent p-0 text-sm shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0'
+          className={cn(
+            'h-6 min-w-[180px] flex-1 border-none bg-transparent p-0 text-[13px] focus-visible:ring-0 focus-visible:ring-offset-0',
+            value.length > 0 ? 'pl-[4px]' : 'pl-[4px]'
+          )}
         />
       )}
     </div>
   )
 }
+
+interface TagProps {
+  value: string
+  onRemove: () => void
+  disabled?: boolean
+}
+
+function Tag({ value, onRemove, disabled }: TagProps) {
+  return (
+    <div className='flex w-auto items-center gap-[4px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-5)] px-[6px] py-[2px] text-[12px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'>
+      <span className='max-w-[200px] truncate'>{value}</span>
+      {!disabled && (
+        <button
+          type='button'
+          onClick={(e) => {
+            e.stopPropagation()
+            onRemove()
+          }}
+          className='flex-shrink-0 text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)] focus:outline-none'
+          aria-label={`Remove ${value}`}
+        >
+          <X className='h-[12px] w-[12px] translate-y-[0.2px]' />
+        </button>
+      )}
+    </div>
+  )
+}

From 2db4a5156069f61d9e0f024cc21efa47aedd4571 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 25 Nov 2025 16:11:10 -0800
Subject: [PATCH 10/17] refactor: deleted duplicate dark styles

---
 .../components/note-block/note-block.tsx      |  2 +-
 .../copilot-message/copilot-message.tsx       | 10 +++----
 .../components/copilot/components/index.ts    |  2 +-
 .../plan-mode-section/plan-mode-section.tsx   | 16 +++++-----
 .../components/todo-list/todo-list.tsx        | 25 +++++++---------
 .../tool-call.tsx}                            | 12 +++-----
 .../components/mention-menu/mention-menu.tsx  | 20 ++++---------
 .../copilot/components/welcome/welcome.tsx    |  6 ++--
 .../panel/components/copilot/copilot.tsx      |  6 ++--
 .../deploy-modal/components/chat/chat.tsx     | 16 +++++-----
 .../general/components/versions.tsx           |  5 ++--
 .../components/general/general.tsx            |  6 +++-
 .../components/template/template.tsx          |  2 +-
 .../components/deploy-modal/deploy-modal.tsx  |  6 ++--
 .../components/field-item/field-item.tsx      |  6 ++--
 .../connection-blocks/connection-blocks.tsx   |  6 ++--
 .../schedule-save/schedule-save.tsx           |  6 ++--
 .../custom-tool-modal/custom-tool-modal.tsx   |  9 ++----
 .../components/trigger-save/trigger-save.tsx  |  2 +-
 .../editor/components/sub-block/sub-block.tsx |  2 +-
 .../subflow-editor/subflow-editor.tsx         | 10 +++----
 .../panel/components/editor/editor.tsx        |  8 ++---
 .../panel/components/toolbar/toolbar.tsx      | 30 +++++++++----------
 .../w/[workflowId]/components/panel/panel.tsx |  8 ++---
 .../components/subflows/subflow-node.tsx      |  2 +-
 .../components/terminal/terminal.tsx          |  5 ++--
 .../webhook-settings/webhook-settings.tsx     |  6 ++--
 .../components/action-bar/action-bar.tsx      | 10 +++----
 .../workflow-edge/workflow-edge.tsx           |  2 +-
 .../footer-navigation/footer-navigation.tsx   | 12 ++++----
 .../components-new/help-modal/help-modal.tsx  | 20 +++++--------
 .../search-modal/search-modal.tsx             | 26 ++++++++--------
 .../components/api-keys/api-keys.tsx          |  6 ++--
 .../components/custom-tools/custom-tools.tsx  |  6 ++--
 .../remove-member-dialog.tsx                  |  6 ++--
 .../components/delete-modal/delete-modal.tsx  |  6 ++--
 .../components/folder-item/folder-item.tsx    | 10 +++----
 .../workflow-item/workflow-item.tsx           | 14 ++++-----
 .../invite-modal/components/email-tag.tsx     | 14 ++++-----
 .../components/permissions-table.tsx          | 12 ++++----
 .../components/invite-modal/invite-modal.tsx  | 27 +++++++----------
 .../workspace-header/workspace-header.tsx     |  4 +--
 .../w/components/sidebar/sidebar-new.tsx      | 10 +++----
 43 files changed, 176 insertions(+), 243 deletions(-)
 rename apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/{inline-tool-call/inline-tool-call.tsx => tool-call/tool-call.tsx} (99%)

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 d171783bf54..4ca430d8540 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
@@ -76,7 +76,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             return (
               <code
                 {...props}
-                className='whitespace-normal rounded bg-gray-200 px-1 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[var(--surface-11)] dark:text-[#F59E0B]'
+                className='whitespace-normal rounded bg-gray-200 px-1 py-0.5 font-mono text-[#F59E0B] text-xs dark:bg-[var(--surface-11)]'
               >
                 {children}
               </code>
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 f78d83edf93..b1d8a1a12ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -3,7 +3,7 @@
 import { type FC, memo, useMemo, useState } from 'react'
 import { Check, Copy, RotateCcw, ThumbsDown, ThumbsUp } from 'lucide-react'
 import { Button } from '@/components/emcn'
-import { InlineToolCall } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components'
+import { ToolCall } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components'
 import {
   FileAttachmentDisplay,
   SmoothStreamingText,
@@ -221,7 +221,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               key={`tool-${block.toolCall.id}`}
               className='opacity-100 transition-opacity duration-300 ease-in-out'
             >
-              <InlineToolCall toolCallId={block.toolCall.id} toolCall={block.toolCall} />
+              <ToolCall toolCallId={block.toolCall.id} toolCall={block.toolCall} />
             </div>
           )
         }
@@ -264,7 +264,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
               {/* Inline Checkpoint Discard Confirmation - shown below input in edit mode */}
               {showCheckpointDiscardModal && (
-                <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]'>
+                <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:bg-[var(--surface-9)]'>
                   <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
                     Continue from a previous message?
                   </p>
@@ -311,7 +311,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
-                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]'
+                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]'
               >
                 <div
                   ref={messageContentRef}
@@ -405,7 +405,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
           {/* Inline Restore Checkpoint Confirmation */}
           {showRestoreConfirmation && (
-            <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]'>
+            <div className='mt-[8px] rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] p-[10px] dark:bg-[var(--surface-9)]'>
               <p className='mb-[8px] text-[var(--text-primary)] text-sm'>
                 Revert to checkpoint? This will restore your workflow to the state saved at this
                 checkpoint.{' '}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
index a151aef4d9d..28de03e6cb1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/index.ts
@@ -1,6 +1,6 @@
 export * from './copilot-message/copilot-message'
-export * from './inline-tool-call/inline-tool-call'
 export * from './plan-mode-section/plan-mode-section'
 export * from './todo-list/todo-list'
+export * from './tool-call/tool-call'
 export * from './user-input/user-input'
 export * from './welcome/welcome'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
index 23f016823f1..ec59e62373c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
@@ -35,9 +35,9 @@ import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId
 /**
  * Shared border and background styles
  */
-const SURFACE_5 = 'bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
-const SURFACE_9 = 'bg-[var(--surface-9)] dark:bg-[var(--surface-9)]'
-const BORDER_STRONG = 'border-[var(--border-strong)] dark:border-[var(--border-strong)]'
+const SURFACE_5 = 'bg-[var(--surface-5)]'
+const SURFACE_9 = 'bg-[var(--surface-9)]'
+const BORDER_STRONG = 'border-[var(--border-strong)]'
 
 export interface PlanModeSectionProps {
   /**
@@ -184,8 +184,8 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
       style={{ height: `${height}px` }}
     >
       {/* Header with build/edit/save/clear buttons */}
-      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-strong)] border-b py-[6px] pr-[2px] pl-[12px] dark:border-[var(--border-strong)]'>
-        <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide dark:text-[var(--text-secondary)]'>
+      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-strong)] border-b py-[6px] pr-[2px] pl-[12px]'>
+        <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide'>
           Workflow Plan
         </span>
         <div className='ml-auto flex items-center gap-[4px]'>
@@ -252,7 +252,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
             ref={textareaRef}
             value={editedContent}
             onChange={(e) => setEditedContent(e.target.value)}
-            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[13px] text-[var(--text-primary)] leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-primary)]'
+            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[13px] text-[var(--text-primary)] leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
             placeholder='Enter your workflow plan...'
           />
         ) : (
@@ -265,7 +265,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
         className={cn(
           'group flex h-[20px] w-full cursor-ns-resize items-center justify-center border-t',
           BORDER_STRONG,
-          'transition-colors hover:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-9)]',
+          'transition-colors hover:bg-[var(--surface-9)]',
           isResizing && SURFACE_9
         )}
         onMouseDown={handleResizeStart}
@@ -273,7 +273,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
         aria-orientation='horizontal'
         aria-label='Resize plan section'
       >
-        <GripHorizontal className='h-3 w-3 text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)] dark:text-[var(--text-secondary)] dark:group-hover:text-[var(--text-primary)]' />
+        <GripHorizontal className='h-3 w-3 text-[var(--text-secondary)] transition-colors group-hover:text-[var(--text-primary)]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
index 26a7e417b1d..8eafe621685 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
@@ -66,7 +66,7 @@ export const TodoList = memo(function TodoList({
   return (
     <div
       className={cn(
-        'w-full rounded-t-[4px] rounded-b-none border-[var(--surface-11)] border-x border-t bg-[var(--surface-6)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-9)]',
+        'w-full rounded-t-[4px] rounded-b-none border-[var(--surface-11)] border-x border-t bg-[var(--surface-6)] dark:bg-[var(--surface-9)]',
         className
       )}
     >
@@ -84,19 +84,17 @@ export const TodoList = memo(function TodoList({
               <ChevronDown className='h-[14px] w-[14px]' />
             )}
           </Button>
-          <span className='font-medium text-[var(--text-primary)] text-xs dark:text-[var(--text-primary)]'>
-            Todo:
-          </span>
-          <span className='font-medium text-[var(--text-primary)] text-xs dark:text-[var(--text-primary)]'>
+          <span className='font-medium text-[var(--text-primary)] text-xs'>Todo:</span>
+          <span className='font-medium text-[var(--text-primary)] text-xs'>
             {completedCount}/{totalCount}
           </span>
         </div>
 
         <div className='flex flex-1 items-center gap-[8px] pl-[10px]'>
           {/* Progress bar */}
-          <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--surface-11)] dark:bg-[var(--surface-11)]'>
+          <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--surface-11)]'>
             <div
-              className='h-full bg-[var(--brand-400)] transition-all duration-300 ease-out dark:bg-[var(--brand-400)]'
+              className='h-full bg-[var(--brand-400)] transition-all duration-300 ease-out'
               style={{ width: `${progress}%` }}
             />
           </div>
@@ -122,21 +120,20 @@ export const TodoList = memo(function TodoList({
               key={todo.id}
               className={cn(
                 'flex items-start gap-2 px-3 py-1.5 transition-colors hover:bg-[var(--surface-9)]/50 dark:hover:bg-[var(--surface-11)]/50',
-                index !== todos.length - 1 &&
-                  'border-[var(--surface-11)] border-b dark:border-[var(--surface-11)]'
+                index !== todos.length - 1 && 'border-[var(--surface-11)] border-b'
               )}
             >
               {todo.executing ? (
                 <div className='mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center'>
-                  <Loader2 className='h-3 w-3 animate-spin text-[var(--text-primary)] dark:text-[var(--text-primary)]' />
+                  <Loader2 className='h-3 w-3 animate-spin text-[var(--text-primary)]' />
                 </div>
               ) : (
                 <div
                   className={cn(
                     'mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded border transition-all',
                     todo.completed
-                      ? 'border-[var(--brand-400)] bg-[var(--brand-400)] dark:border-[var(--brand-400)] dark:bg-[var(--brand-400)]'
-                      : 'border-[#707070] dark:border-[#707070]'
+                      ? 'border-[var(--brand-400)] bg-[var(--brand-400)]'
+                      : 'border-[#707070]'
                   )}
                 >
                   {todo.completed ? <Check className='h-3 w-3 text-white' strokeWidth={3} /> : null}
@@ -146,9 +143,7 @@ export const TodoList = memo(function TodoList({
               <span
                 className={cn(
                   'flex-1 font-base text-[12px] leading-relaxed',
-                  todo.completed
-                    ? 'text-[var(--text-muted)] line-through dark:text-[var(--text-muted)]'
-                    : 'text-[var(--white)] dark:text-[var(--white)]'
+                  todo.completed ? 'text-[var(--text-muted)] line-through' : 'text-[var(--white)]'
                 )}
               >
                 {todo.content}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
similarity index 99%
rename from apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index 1b939526a49..46494fe8493 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/inline-tool-call/inline-tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
@@ -12,7 +12,7 @@ import { getEnv } from '@/lib/core/config/env'
 import { CLASS_TOOL_METADATA, useCopilotStore } from '@/stores/panel/copilot/store'
 import type { CopilotToolCall } from '@/stores/panel/copilot/types'
 
-interface InlineToolCallProps {
+interface ToolCallProps {
   toolCall?: CopilotToolCall
   toolCallId?: string
   onStateChange?: (state: any) => void
@@ -453,11 +453,7 @@ function RunSkipButtons({
   )
 }
 
-export function InlineToolCall({
-  toolCall: toolCallProp,
-  toolCallId,
-  onStateChange,
-}: InlineToolCallProps) {
+export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }: ToolCallProps) {
   const [, forceUpdate] = useState({})
   const liveToolCall = useCopilotStore((s) =>
     toolCallId ? s.toolCallsById[toolCallId] : undefined
@@ -869,7 +865,7 @@ export function InlineToolCall({
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm dark:text-[#939393]'
+          className='font-[470] font-season text-[#939393] text-sm'
         />
         <div className='mt-[8px]'>{renderPendingDetails()}</div>
         {showButtons && (
@@ -895,7 +891,7 @@ export function InlineToolCall({
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm dark:text-[#939393]'
+          className='font-[470] font-season text-[#939393] text-sm'
         />
       </div>
       {isExpandableTool && expanded && <div>{renderPendingDetails()}</div>}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
index 5d2d3e145e5..74696f7e87f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
@@ -552,15 +552,11 @@ export function MentionMenu({
                         active={index === submenuActiveIndex}
                       >
                         <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                          ·
-                        </span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(log.createdAt)}
                         </span>
-                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                          ·
-                        </span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='text-[10px] capitalize'>
                           {(log.trigger || 'manual').toLowerCase()}
                         </span>
@@ -587,9 +583,7 @@ export function MentionMenu({
                     <span className='flex-1 truncate'>{item.label}</span>
                     {item.category === 'logs' && (
                       <>
-                        <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                          ·
-                        </span>
+                        <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                         <span className='whitespace-nowrap text-[10px]'>
                           {formatTimestamp(item.data.createdAt)}
                         </span>
@@ -762,15 +756,11 @@ export function MentionMenu({
                   mentionData.logsList.map((log) => (
                     <PopoverItem key={log.id} onClick={() => insertLogMention(log)}>
                       <span className='min-w-0 flex-1 truncate'>{log.workflowName}</span>
-                      <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        ·
-                      </span>
+                      <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                       <span className='whitespace-nowrap text-[10px]'>
                         {formatTimestamp(log.createdAt)}
                       </span>
-                      <span className='text-[10px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-                        ·
-                      </span>
+                      <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
                       <span className='text-[10px] capitalize'>
                         {(log.trigger || 'manual').toLowerCase()}
                       </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
index d270281c38d..b4c9dc2499d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
@@ -64,16 +64,14 @@ export function Welcome({ onQuestionClick, mode = 'ask' }: WelcomeProps) {
           >
             <div className='flex flex-col items-start'>
               <p className='font-medium'>{title}</p>
-              <p className='text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
-                {question}
-              </p>
+              <p className='text-[var(--text-secondary)]'>{question}</p>
             </div>
           </Button>
         ))}
       </div>
 
       {/* Tips */}
-      <p className='pt-[12px] text-center text-[13px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
+      <p className='pt-[12px] text-center text-[13px] text-[var(--text-secondary)]'>
         Tip: Use <span className='font-medium'>@</span> to reference chats, workflows, knowledge,
         blocks, or templates
       </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 01ad2ed548c..30fe7eacdf7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -385,8 +385,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         className='flex h-full flex-col overflow-hidden'
       >
         {/* Header */}
-        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'>
-          <h2 className='font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'>
+        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px]'>
+          <h2 className='font-medium text-[14px] text-[var(--white)]'>
             {currentChat?.title || 'New Chat'}
           </h2>
           <div className='flex items-center gap-[8px]'>
@@ -405,7 +405,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                     <ChatHistorySkeleton />
                   </PopoverScrollArea>
                 ) : groupedChats.length === 0 ? (
-                  <div className='px-[6px] py-[16px] text-center text-[12px] text-[var(--white)] dark:text-[var(--white)]'>
+                  <div className='px-[6px] py-[16px] text-center text-[12px] text-[var(--white)]'>
                     No chats yet
                   </div>
                 ) : (
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 b17df1cb2de..002c956c15b 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
@@ -388,9 +388,9 @@ export function ChatDeploy({
         <ModalContent className='w-[400px]'>
           <ModalHeader>Delete Chat</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to delete this chat?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
+              <span className='text-[var(--text-error)]'>
                 This will remove the chat at "{getEmailDomain()}/chat/{existingChat?.identifier}"
                 and make it unavailable to all users.
               </span>
@@ -408,7 +408,7 @@ export function ChatDeploy({
               variant='primary'
               onClick={handleDelete}
               disabled={isDeleting}
-              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isDeleting && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               {isDeleting ? 'Deleting...' : 'Delete'}
@@ -502,7 +502,7 @@ function IdentifierInput({
       <div
         className={cn(
           'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--surface-11)]',
-          error && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
+          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)]'>
@@ -845,8 +845,8 @@ function EmailTag({ email, onRemove, disabled, isInvalid }: EmailTagProps) {
       className={cn(
         'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
         isInvalid
-          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:border-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)] dark:text-[var(--text-error)]'
-          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)] dark:hover:text-[var(--text-primary)]'
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
@@ -857,8 +857,8 @@ function EmailTag({ email, onRemove, disabled, isInvalid }: EmailTagProps) {
           className={cn(
             'flex-shrink-0 transition-colors focus:outline-none',
             isInvalid
-              ? 'text-[var(--text-error)] hover:text-[var(--text-error)] dark:text-[var(--text-error)] dark:hover:text-[var(--text-error)]'
-              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
           )}
           aria-label={`Remove ${email}`}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index effe6e22bdc..cd18d2ff10e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -11,9 +11,8 @@ import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpe
 const logger = createLogger('Versions')
 
 /** Shared styling constants aligned with terminal component */
-const HEADER_TEXT_CLASS =
-  'font-medium text-[var(--text-tertiary)] text-[12px] dark:text-[var(--text-tertiary)]'
-const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px] dark:text-[#D2D2D2]'
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
+const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px]'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 /** Column width configuration */
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 8a3dbfa88dc..04bb3bb18cc 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
@@ -271,7 +271,11 @@ export function GeneralDeploy({
             <Button variant='default' onClick={() => setShowLoadDialog(false)}>
               Cancel
             </Button>
-            <Button variant='primary' onClick={confirmLoadDeployment}>
+            <Button
+              variant='primary'
+              onClick={confirmLoadDeployment}
+              className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
+            >
               Load deployment
             </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 e39666ca85d..4f628ccf471 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
@@ -395,7 +395,7 @@ export function TemplateDeploy({
               variant='primary'
               onClick={handleDelete}
               disabled={deleteMutation.isPending}
-              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {deleteMutation.isPending ? (
                 <>
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 442b119b4b1..6b2158e4d16 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
@@ -700,9 +700,9 @@ export function DeployModal({
         <ModalContent className='w-[400px]'>
           <ModalHeader>Undeploy API</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to undeploy this workflow?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
+              <span className='text-[var(--text-error)]'>
                 This will remove the API endpoint and make it unavailable to external users.
               </span>
             </p>
@@ -719,7 +719,7 @@ export function DeployModal({
               variant='primary'
               onClick={handleUndeploy}
               disabled={isUndeploying}
-              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isUndeploying ? 'Undeploying...' : 'Undeploy'}
             </Button>
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 1f0276ed7b4..44f881c62e7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -91,7 +91,7 @@ export function FieldItem({
       onDragStart={handleDragStart}
       onClick={handleClick}
       className={clsx(
-        'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
+        'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing',
         hasChildren && 'cursor-pointer'
       )}
       style={{ marginLeft: `${indent}px` }}
@@ -99,7 +99,7 @@ export function FieldItem({
       <span
         className={clsx(
           'flex-1 truncate font-medium',
-          'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+          'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
         )}
       >
         {field.name}
@@ -109,7 +109,7 @@ export function FieldItem({
         <ChevronDown
           className={clsx(
             'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
+            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
             isExpanded && 'rotate-180'
           )}
         />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index 94b2d93ed60..61a8cd91a70 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
@@ -123,7 +123,7 @@ function ConnectionItem({
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
         className={clsx(
-          'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
+          'group flex h-[25px] cursor-grab items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px] hover:bg-[var(--border)] active:cursor-grabbing',
           hasFields && 'cursor-pointer'
         )}
         onClick={() => hasFields && onToggleExpand(connection.id)}
@@ -145,7 +145,7 @@ function ConnectionItem({
         <span
           className={clsx(
             'truncate font-medium',
-            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+            'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )}
         >
           {connection.name}
@@ -154,7 +154,7 @@ function ConnectionItem({
           <ChevronDown
             className={clsx(
               'h-3.5 w-3.5 flex-shrink-0 transition-transform',
-              'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
+              'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
               isExpanded && 'rotate-180'
             )}
           />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/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 2d18d2e9c2e..771442b0163 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-save/schedule-save.tsx
@@ -485,9 +485,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             <ModalDescription>
               Are you sure you want to delete this schedule configuration? This will stop the
               workflow from running automatically.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -500,7 +498,7 @@ export function ScheduleSave({ blockId, isPreview = false, disabled = false }: S
             </Button>
             <Button
               onClick={handleDeleteConfirm}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               Delete
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/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 fbdde60322a..69583977388 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
@@ -1215,7 +1215,7 @@ try {
             <div className='flex w-full justify-between'>
               {isEditing ? (
                 <EmcnButton
-                  className='h-[32px] gap-1 bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+                  className='h-[32px] gap-1 bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
                   onClick={() => setShowDeleteConfirm(true)}
                 >
                   <Trash className='h-4 w-4' />
@@ -1271,10 +1271,7 @@ try {
             <ModalTitle>Delete custom tool?</ModalTitle>
             <ModalDescription>
               This will permanently delete the tool and remove it from any workflows that are using
-              it.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              it. <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -1289,7 +1286,7 @@ try {
             <Button
               onClick={handleDelete}
               disabled={deleteToolMutation.isPending}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               {deleteToolMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
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 6991ee6213b..dba143582ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/trigger-save/trigger-save.tsx
@@ -469,7 +469,7 @@ export function TriggerSave({
             </Button>
             <Button
               onClick={handleDeleteConfirm}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               Delete
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 33e497d96ed..25011a052ef 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -235,7 +235,7 @@ const renderLabel = (
               }}
               disabled={isStreaming}
               className={cn(
-                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none dark:text-[var(--text-primary)]',
+                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none',
                 isStreaming && 'text-muted-foreground'
               )}
               placeholder='Describe...'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index b2ee3900a37..7046dcf00cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -71,7 +71,7 @@ export function SubflowEditor({
         <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[5px] pb-[8px]'>
           {/* Type Selection */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
               {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
             </Label>
             <Combobox
@@ -96,7 +96,7 @@ export function SubflowEditor({
 
           {/* Configuration */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
               {isCountMode
                 ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                 : isConditionMode
@@ -165,7 +165,7 @@ export function SubflowEditor({
       {hasIncomingConnections && (
         <div
           className={
-            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t dark:border-[var(--border)]' +
+            'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
             (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
           }
           style={{ height: `${connectionsHeight}px` }}
@@ -198,9 +198,7 @@ export function SubflowEditor({
                 (!isConnectionsAtMinHeight ? ' rotate-180' : '')
               }
             />
-            <div className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-              Connections
-            </div>
+            <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
           </div>
 
           {/* Connections Content - Always visible */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 2ddb9c4d43e..875da46e88f 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
@@ -210,11 +210,11 @@ export function Editor() {
                   handleCancelRename()
                 }
               }}
-              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--white)] outline-none dark:text-[var(--white)]'
+              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--white)] outline-none'
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'
+              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--white)]'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {
@@ -380,7 +380,7 @@ export function Editor() {
           {hasIncomingConnections && (
             <div
               className={
-                'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t dark:border-[var(--border)]' +
+                'connections-section flex flex-shrink-0 flex-col overflow-hidden border-[var(--border)] border-t' +
                 (!isResizing ? ' transition-[height] duration-100 ease-out' : '')
               }
               style={{ height: `${connectionsHeight}px` }}
@@ -415,7 +415,7 @@ export function Editor() {
                     (!isConnectionsAtMinHeight ? ' rotate-180' : '')
                   }
                 />
-                <div className='font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                <div className='font-medium text-[13px] text-[var(--text-primary)]'>
                   Connections
                 </div>
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index ba06408056f..b7537fb2a6a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -488,12 +488,10 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
     >
       {/* Header */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'
+        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px]'
         onClick={handleSearchClick}
       >
-        <h2 className='font-medium text-[14px] text-[var(--white)] dark:text-[var(--white)]'>
-          Toolbar
-        </h2>
+        <h2 className='font-medium text-[14px] text-[var(--white)]'>Toolbar</h2>
         <div className='flex shrink-0 items-center gap-[8px]'>
           {!isSearchActive ? (
             <Button
@@ -511,7 +509,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               onBlur={handleSearchBlur}
-              className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none dark:text-[var(--text-primary)]'
+              className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
             />
           )}
         </div>
@@ -529,7 +527,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
         >
           <div
             ref={triggersHeaderRef}
-            className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+            className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
           >
             Triggers
           </div>
@@ -557,8 +555,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     onClick={() => handleItemClick(trigger.type, isTriggerCapable)}
                     className={clsx(
                       'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none dark:focus-visible:bg-[var(--border)]'
+                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--border)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -585,8 +583,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <span
                       className={clsx(
                         'truncate font-medium',
-                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)] dark:group-focus-visible:text-[var(--text-primary)]'
+                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
+                        'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
                       {trigger.name}
@@ -599,7 +597,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
         </div>
 
         {/* Resize Handle */}
-        <div className='relative flex-shrink-0 border-[var(--border)] border-t dark:border-[var(--border)]'>
+        <div className='relative flex-shrink-0 border-[var(--border)] border-t'>
           <div
             className='absolute top-[-4px] right-0 left-0 z-30 h-[8px] cursor-ns-resize'
             onMouseDown={handleMouseDown}
@@ -611,7 +609,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
           <div
             ref={blocksHeaderRef}
             onClick={handleBlocksHeaderClick}
-            className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+            className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
           >
             Blocks
           </div>
@@ -646,8 +644,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     onClick={() => handleItemClick(block.type, false)}
                     className={clsx(
                       'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing dark:hover:bg-[var(--border)]',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none dark:focus-visible:bg-[var(--border)]'
+                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--border)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -674,8 +672,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <span
                       className={clsx(
                         'truncate font-medium',
-                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]',
-                        'group-focus-visible:text-[var(--text-primary)] dark:group-focus-visible:text-[var(--text-primary)]'
+                        'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]',
+                        'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
                       {block.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index e2bd7815c6d..e9db920b26b 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
@@ -478,7 +478,7 @@ export function Panel() {
                 Toolbar
               </Button>
               <Button
-                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-9)] dark:hover:text-[var(--text-primary)]'
+                className='h-[28px] px-[8px] py-[5px] text-[12.5px] hover:bg-[var(--surface-9)] hover:text-[var(--text-primary)]'
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
                 data-tab-button='editor'
@@ -550,9 +550,7 @@ export function Panel() {
             <ModalDescription>
               Deleting this workflow will permanently remove all associated blocks, executions, and
               configuration.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -565,7 +563,7 @@ export function Panel() {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
               onClick={handleDeleteWorkflow}
               disabled={isDeleting}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index b2ab645ffe5..8957a0a543e 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
@@ -161,7 +161,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
           {/* Header Section */}
           <div
             className={cn(
-              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--divider)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] dark:bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+              'workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--divider)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
             )}
             onMouseDown={(e) => {
               e.stopPropagation()
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 c557c0e8463..33561689a6c 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
@@ -78,9 +78,8 @@ const RUN_ID_COLORS = [
 /**
  * Shared styling constants
  */
-const HEADER_TEXT_CLASS =
-  'font-medium text-[var(--text-tertiary)] text-[12px] dark:text-[var(--text-tertiary)]'
-const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px] dark:text-[#D2D2D2]'
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
+const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px]'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 /**
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
index 89dec614064..fc430f8c979 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/webhook-settings/webhook-settings.tsx
@@ -1170,9 +1170,7 @@ export function WebhookSettings({ workflowId, open, onOpenChange }: WebhookSetti
             <ModalTitle>Delete webhook?</ModalTitle>
             <ModalDescription>
               This will permanently remove the webhook configuration and stop all notifications.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -1187,7 +1185,7 @@ export function WebhookSettings({ workflowId, open, onOpenChange }: WebhookSetti
             <EmcnButton
               onClick={confirmDeleteWebhook}
               disabled={isDeleting}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             >
               {isDeleting ? 'Deleting...' : 'Delete'}
             </EmcnButton>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
index 7452dd4ef6d..4958b2e21f1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -90,7 +90,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockEnabled(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
               disabled={disabled}
             >
               {isEnabled ? (
@@ -116,7 +116,7 @@ export const ActionBar = memo(
                     collaborativeDuplicateBlock(blockId)
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
                 disabled={disabled}
               >
                 <Duplicate className='h-[11px] w-[11px]' />
@@ -139,7 +139,7 @@ export const ActionBar = memo(
                     )
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
                 disabled={disabled || !userPermissions.canEdit}
               >
                 <LogOut className='h-[11px] w-[11px]' />
@@ -159,7 +159,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockHandles(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)]'
+              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
               disabled={disabled}
             >
               {horizontalHandles ? (
@@ -184,7 +184,7 @@ export const ActionBar = memo(
                   collaborativeRemoveBlock(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)] dark:text-[#868686] dark:hover:bg-[var(--brand-secondary)] dark:hover:text-[var(--bg)] '
+              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
               disabled={disabled}
             >
               <Trash2 className='h-[11px] w-[11px]' />
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 dcd94d42964..bb5b972b708 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-edge/workflow-edge.tsx
@@ -141,7 +141,7 @@ export const WorkflowEdge = ({
               }
             }}
           >
-            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80 dark:text-[var(--text-error)] dark:group-hover:text-[var(--text-error)]/80' />
+            <X className='h-4 w-4 text-[var(--text-error)] transition-colors group-hover:text-[var(--text-error)]/80' />
           </div>
         </EdgeLabelRenderer>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
index df82ed7543a..310c4ed563d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
@@ -88,23 +88,21 @@ export function FooterNavigation() {
 
           const itemClasses = clsx(
             'group flex h-[24px] items-center gap-[8px] rounded-[8px] px-[7px] text-[14px]',
-            active
-              ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-              : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'
+            active ? 'bg-[var(--border)]' : 'hover:bg-[var(--border)]'
           )
 
           const iconClasses = clsx(
             'h-[14px] w-[14px] flex-shrink-0',
             active
-              ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-primary)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )
 
           const labelClasses = clsx(
             'truncate font-base text-[13px]',
             active
-              ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-primary)]'
+              : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
           )
 
           const content = (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
index 9b4afcf8430..ff82397af60 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
@@ -425,7 +425,7 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
                 <div>
                   <Label
                     htmlFor='type'
-                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
                   >
                     Request
                   </Label>
@@ -438,16 +438,14 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
                     placeholder='Select a request type'
                     editable={false}
                     filterOptions={false}
-                    className={cn(
-                      errors.type && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                    )}
+                    className={cn(errors.type && 'border-[var(--text-error)]')}
                   />
                 </div>
 
                 <div>
                   <Label
                     htmlFor='subject'
-                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
                   >
                     Subject
                   </Label>
@@ -455,16 +453,14 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
                     id='subject'
                     placeholder='Brief description of your request'
                     {...register('subject')}
-                    className={cn(
-                      errors.subject && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                    )}
+                    className={cn(errors.subject && 'border-[var(--text-error)]')}
                   />
                 </div>
 
                 <div>
                   <Label
                     htmlFor='message'
-                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                    className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
                   >
                     Message
                   </Label>
@@ -473,14 +469,12 @@ export function HelpModal({ open, onOpenChange }: HelpModalProps) {
                     placeholder='Please provide details about your request...'
                     rows={6}
                     {...register('message')}
-                    className={cn(
-                      errors.message && 'border-[var(--text-error)] dark:border-[var(--text-error)]'
-                    )}
+                    className={cn(errors.message && 'border-[var(--text-error)]')}
                   />
                 </div>
 
                 <div>
-                  <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                  <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
                     Attach Images (Optional)
                   </Label>
                   <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
index 22b41815892..25cce42b24f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/search-modal/search-modal.tsx
@@ -501,14 +501,14 @@ export function SearchModal({
           </VisuallyHidden.Root>
 
           {/* Search input container */}
-          <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] px-[12px] py-[8px] shadow-sm dark:border-[var(--border)] dark:bg-[var(--surface-5)]'>
-            <Search className='h-[15px] w-[15px] flex-shrink-0 text-[var(--text-subtle)] dark:text-[var(--text-subtle)]' />
+          <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-5)] px-[12px] py-[8px] shadow-sm'>
+            <Search className='h-[15px] w-[15px] flex-shrink-0 text-[var(--text-subtle)]' />
             <input
               type='text'
               placeholder='Search anything...'
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className='w-full border-0 bg-transparent font-base text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-secondary)]'
+              className='w-full border-0 bg-transparent font-base text-[15px] text-[var(--text-primary)] placeholder:text-[var(--text-secondary)] focus:outline-none'
               autoFocus
             />
           </div>
@@ -523,7 +523,7 @@ export function SearchModal({
                 return (
                   <div key={type} className='mb-[10px] last:mb-0'>
                     {/* Section header */}
-                    <div className='pt-[2px] pb-[4px] font-medium text-[13px] text-[var(--text-subtle)] uppercase tracking-wide dark:text-[var(--text-subtle)]'>
+                    <div className='pt-[2px] pb-[4px] font-medium text-[13px] text-[var(--text-subtle)] uppercase tracking-wide'>
                       {sectionTitles[type]}
                     </div>
 
@@ -545,10 +545,10 @@ export function SearchModal({
                             onClick={() => handleItemClick(item)}
                             onMouseDown={(e) => e.preventDefault()}
                             className={cn(
-                              'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none dark:bg-[var(--surface-4)]/60',
+                              'group flex h-[28px] w-full items-center gap-[8px] rounded-[6px] bg-[var(--surface-4)]/60 px-[10px] text-left text-[15px] transition-all focus:outline-none',
                               isSelected
-                                ? 'bg-[var(--border)] shadow-sm dark:bg-[var(--border)]'
-                                : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'
+                                ? 'bg-[var(--border)] shadow-sm'
+                                : 'hover:bg-[var(--border)]'
                             )}
                           >
                             {/* Icon - different rendering for workflows vs others */}
@@ -574,7 +574,7 @@ export function SearchModal({
                                           'transition-transform duration-100 group-hover:scale-110',
                                           showColoredIcon
                                             ? '!h-[10px] !w-[10px] text-white'
-                                            : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                                            : 'h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
                                         )}
                                       />
                                     </div>
@@ -588,8 +588,8 @@ export function SearchModal({
                               className={cn(
                                 'truncate font-medium',
                                 isSelected
-                                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                                  ? 'text-[var(--text-primary)]'
+                                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
                               )}
                             >
                               {item.name}
@@ -598,7 +598,7 @@ export function SearchModal({
 
                             {/* Shortcut */}
                             {item.shortcut && (
-                              <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]'>
+                              <span className='ml-auto flex-shrink-0 font-medium text-[13px] text-[var(--text-subtle)]'>
                                 {item.shortcut}
                               </span>
                             )}
@@ -611,8 +611,8 @@ export function SearchModal({
               })}
             </div>
           ) : searchQuery ? (
-            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-5)] px-[16px] py-[24px] shadow-sm dark:bg-[var(--surface-5)]'>
-              <p className='text-[15px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]'>
+            <div className='flex items-center justify-center rounded-[10px] bg-[var(--surface-5)] px-[16px] py-[24px] shadow-sm'>
+              <p className='text-[15px] text-[var(--text-subtle)]'>
                 No results found for "{searchQuery}"
               </p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
index 569d5770090..2bdc362a8ff 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
@@ -595,9 +595,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
             <ModalTitle>Delete API key?</ModalTitle>
             <ModalDescription>
               Deleting this API key will immediately revoke access for any integrations using it.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -613,7 +611,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
               onClick={handleDeleteKey}
               disabled={deleteApiKeyMutation.isPending}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index c05f1b947bf..4ae0457b81b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -259,9 +259,7 @@ export function CustomTools() {
             <ModalDescription>
               Deleting "{toolToDelete?.name}" will permanently remove this custom tool from your
               workspace.{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </ModalDescription>
           </ModalHeader>
           <ModalFooter>
@@ -277,7 +275,7 @@ export function CustomTools() {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
               onClick={handleDeleteTool}
               disabled={deleteToolMutation.isPending}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 06c459f5fee..a68e6fc68dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -40,9 +40,7 @@ export function RemoveMemberDialog({
             {isSelfRemoval
               ? 'Are you sure you want to leave this organization? You will lose access to all team resources.'
               : `Are you sure you want to remove ${memberName} from the team?`}{' '}
-            <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-              This action cannot be undone.
-            </span>
+            <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </ModalDescription>
         </ModalHeader>
 
@@ -80,7 +78,7 @@ export function RemoveMemberDialog({
           </Button>
           <Button
             onClick={() => onConfirmRemove(shouldReduceSeats)}
-            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
           >
             {isSelfRemoval ? 'Leave Organization' : 'Remove'}
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
index d9f22ba3d7d..ee61282ff63 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/delete-modal/delete-modal.tsx
@@ -97,9 +97,7 @@ export function DeleteModal({
           <ModalTitle>{title}</ModalTitle>
           <ModalDescription>
             {description}{' '}
-            <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-              This action cannot be undone.
-            </span>
+            <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </ModalDescription>
         </ModalHeader>
         <ModalFooter>
@@ -112,7 +110,7 @@ export function DeleteModal({
             Cancel
           </Button>
           <Button
-            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
+            className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
             onClick={onConfirm}
             disabled={isDeleting}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
index 3eedbf40597..755bab5c39d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/folder-item/folder-item.tsx
@@ -204,19 +204,19 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
       >
         <ChevronRight
           className={clsx(
-            'mr-[8px] h-[10px] w-[10px] flex-shrink-0 text-[var(--text-muted)] transition-all dark:text-[var(--text-muted)]',
+            'mr-[8px] h-[10px] w-[10px] flex-shrink-0 text-[var(--text-muted)] transition-all',
             isExpanded ? 'rotate-90' : ''
           )}
           aria-hidden='true'
         />
         {isExpanded ? (
           <FolderOpen
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)] dark:text-[var(--text-muted)]'
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
             aria-hidden='true'
           />
         ) : (
           <Folder
-            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)] dark:text-[var(--text-muted)]'
+            className='mr-[10px] h-[16px] w-[16px] flex-shrink-0 text-[var(--text-muted)]'
             aria-hidden='true'
           />
         )}
@@ -228,7 +228,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
             className={clsx(
-              'min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-tertiary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-tertiary)]'
+              'min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-tertiary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             )}
             maxLength={50}
             disabled={isRenaming}
@@ -243,7 +243,7 @@ export function FolderItem({ folder, level, hoverHandlers }: FolderItemProps) {
           />
         ) : (
           <span
-            className='truncate font-medium text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'
+            className='truncate font-medium text-[var(--text-tertiary)]'
             onDoubleClick={handleDoubleClick}
           >
             {folder.name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
index 5e272d8e64d..b4d21e6bd20 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
@@ -236,12 +236,8 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
         data-item-id={workflow.id}
         className={clsx(
           'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-          active
-            ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-            : 'hover:bg-[var(--border)] dark:hover:bg-[var(--border)]',
-          isSelected && selectedWorkflows.size > 1 && !active
-            ? 'bg-[var(--border)] dark:bg-[var(--border)]'
-            : '',
+          active ? 'bg-[var(--border)]' : 'hover:bg-[var(--border)]',
+          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--border)]' : '',
           isDragging ? 'opacity-50' : ''
         )}
         draggable={!isEditing}
@@ -265,7 +261,7 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
               className={clsx(
                 'w-full border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 active
-                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  ? 'text-[var(--text-primary)]'
                   : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               )}
               maxLength={100}
@@ -284,8 +280,8 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
               className={clsx(
                 'truncate font-medium',
                 active
-                  ? 'text-[var(--text-primary)] dark:text-[var(--text-primary)]'
-                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:group-hover:text-[var(--text-primary)]'
+                  ? 'text-[var(--text-primary)]'
+                  : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
               )}
               onDoubleClick={handleDoubleClick}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
index 19705a217dd..23a6db56a2a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -16,16 +16,12 @@ export const EmailTag = React.memo<EmailTagProps>(
       className={cn(
         'flex w-auto items-center gap-[4px] rounded-[4px] border px-[6px] py-[2px] text-[12px]',
         isInvalid
-          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:border-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)] dark:text-[var(--text-error)]'
-          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] dark:border-[var(--surface-11)] dark:bg-[var(--surface-5)] dark:text-[var(--text-secondary)] dark:hover:text-[var(--text-primary)]'
+          ? 'border-[var(--text-error)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] text-[var(--text-error)] dark:bg-[color-mix(in_srgb,var(--text-error)_16%,transparent)]'
+          : 'border-[var(--surface-11)] bg-[var(--surface-5)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
       )}
     >
       <span className='max-w-[200px] truncate'>{email}</span>
-      {isSent && (
-        <span className='text-[11px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
-          sent
-        </span>
-      )}
+      {isSent && <span className='text-[11px] text-[var(--text-tertiary)]'>sent</span>}
       {!disabled && !isSent && (
         <button
           type='button'
@@ -33,8 +29,8 @@ export const EmailTag = React.memo<EmailTagProps>(
           className={cn(
             'flex-shrink-0 transition-colors focus:outline-none',
             isInvalid
-              ? 'text-[var(--text-error)] hover:text-[var(--text-error)] dark:text-[var(--text-error)] dark:hover:text-[var(--text-error)]'
-              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)] dark:text-[var(--text-tertiary)] dark:hover:text-[var(--text-primary)]'
+              ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+              : 'text-[var(--text-tertiary)] hover:text-[var(--text-primary)]'
           )}
           aria-label={`Remove ${email}`}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
index 63bc7bbd10c..04d70b2ebdc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -119,18 +119,16 @@ export const PermissionsTable = ({
   if (isSaving) {
     return (
       <div className='space-y-[12px]'>
-        <h3 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-          Member Permissions
-        </h3>
-        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)] dark:bg-[var(--surface-3)]'>
+        <h3 className='font-medium text-[14px] text-[var(--text-primary)]'>Member Permissions</h3>
+        <div className='rounded-[8px] border border-[var(--surface-11)] bg-[var(--surface-3)]'>
           <div className='flex items-center justify-center py-[48px]'>
-            <div className='flex items-center gap-[8px] text-[var(--text-secondary)] dark:text-[var(--text-secondary)]'>
+            <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
               <Loader2 className='h-[16px] w-[16px] animate-spin' />
               <span className='font-medium text-[13px]'>Saving permission changes...</span>
             </div>
           </div>
         </div>
-        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)]'>
           Please wait while we update the permissions.
         </p>
       </div>
@@ -174,7 +172,7 @@ export const PermissionsTable = ({
               <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
                 <div className='min-w-0 flex-1'>
                   <div className='flex items-center gap-[8px]'>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
                       {user.email}
                     </span>
                     {isPendingInvitation && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index 460ce8296b3..b219d96262d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -681,7 +681,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               <div>
                 <Label
                   htmlFor='emails'
-                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'
+                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
                 >
                   Email Addresses
                 </Label>
@@ -728,9 +728,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                 </div>
               </div>
               {errorMessage && (
-                <p className='mt-[4px] text-[12px] text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                  {errorMessage}
-                </p>
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{errorMessage}</p>
               )}
             </div>
             <div className='mt-[8px]'>
@@ -800,15 +798,13 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         <ModalContent>
           <ModalHeader>Remove Member</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to remove{' '}
-              <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+              <span className='font-medium text-[var(--text-primary)]'>
                 {memberToRemove?.email}
               </span>{' '}
               from this workspace?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
           </ModalBody>
           <ModalFooter>
@@ -823,7 +819,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               variant='primary'
               onClick={handleRemoveMemberConfirm}
               disabled={isRemovingMember}
-              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isRemovingMember && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Remove Member
@@ -837,15 +833,12 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
         <ModalContent className='w-[400px]'>
           <ModalHeader>Cancel Invitation</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]'>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Are you sure you want to cancel the invitation for{' '}
-              <span className='font-medium text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+              <span className='font-medium text-[var(--text-primary)]'>
                 {invitationToRemove?.email}
               </span>
-              ?{' '}
-              <span className='text-[var(--text-error)] dark:text-[var(--text-error)]'>
-                This action cannot be undone.
-              </span>
+              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
           </ModalBody>
           <ModalFooter>
@@ -860,7 +853,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
               variant='primary'
               onClick={handleRemoveInvitationConfirm}
               disabled={isRemovingInvitation}
-              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)] dark:bg-[var(--text-error)] dark:hover:bg-[var(--text-error)]'
+              className='gap-[8px] bg-[var(--text-error)] text-[13px] text-white hover:bg-[var(--text-error)]'
             >
               {isRemovingInvitation && <Loader2 className='mr-1 h-4 w-4 animate-spin' />}
               Cancel Invitation
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
index 7cfc1a88a55..e7fc1c1b6c8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/workspace-header.tsx
@@ -359,7 +359,7 @@ export function WorkspaceHeader({
                   {workspaces.map((workspace, index) => (
                     <div key={workspace.id} className={index > 0 ? 'mt-[2px]' : ''}>
                       {editingWorkspaceId === workspace.id ? (
-                        <div className='flex h-[25px] items-center gap-[8px] rounded-[6px] bg-[var(--surface-9)] px-[6px] dark:bg-[var(--surface-9)]'>
+                        <div className='flex h-[25px] items-center gap-[8px] rounded-[6px] bg-[var(--surface-9)] px-[6px]'>
                           <input
                             ref={listRenameInputRef}
                             value={editingName}
@@ -389,7 +389,7 @@ export function WorkspaceHeader({
                                 setIsListRenaming(false)
                               }
                             }}
-                            className='w-full border-0 bg-transparent p-0 font-base text-[12px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:text-[var(--text-primary)]'
+                            className='w-full border-0 bg-transparent p-0 font-base text-[12px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                             maxLength={100}
                             autoComplete='off'
                             autoCorrect='off'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
index c59aa829f68..06133e80015 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
@@ -522,14 +522,12 @@ export function SidebarNew() {
                 onClick={() => setIsSearchModalOpen(true)}
               >
                 <div className='flex items-center gap-[6px]'>
-                  <Search className='h-[14px] w-[14px] text-[var(--text-subtle)] dark:text-[var(--text-subtle)]' />
-                  <p className='translate-y-[0.25px] font-medium text-[var(--text-secondary)] text-small dark:text-[var(--text-secondary)]'>
+                  <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
+                  <p className='translate-y-[0.25px] font-medium text-[var(--text-secondary)] text-small'>
                     Search
                   </p>
                 </div>
-                <p className='font-medium text-[var(--text-subtle)] text-small dark:text-[var(--text-subtle)]'>
-                  ⌘K
-                </p>
+                <p className='font-medium text-[var(--text-subtle)] text-small'>⌘K</p>
               </div>
 
               {/* Workflows */}
@@ -537,7 +535,7 @@ export function SidebarNew() {
                 {/* Header - Always visible */}
                 <div className='flex flex-shrink-0 flex-col space-y-[4px] px-[14px]'>
                   <div className='flex items-center justify-between'>
-                    <div className='font-medium text-[var(--text-tertiary)] text-small dark:text-[var(--text-tertiary)]'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-small'>
                       Workflows
                     </div>
                     <div className='flex items-center justify-center gap-[10px]'>

From c3ee4dc766fc1e5f56c4b53ebdf3f6a0b7b4feae Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 26 Nov 2025 03:42:19 -0800
Subject: [PATCH 11/17] feat: emcn, settings, light

---
 apps/sim/.cursorrules                         |  38 +-
 .../app/_shell/providers/theme-provider.tsx   |  34 +-
 apps/sim/app/_styles/globals.css              |  42 +-
 apps/sim/app/api/users/me/settings/route.ts   |   9 -
 .../panel/components/copilot/copilot.tsx      |   4 +-
 .../condition-input/condition-input.tsx       |   2 +-
 .../input-mapping/input-mapping.tsx           |   4 +-
 .../components/starter/input-format.tsx       |   2 +-
 .../custom-tool-modal/custom-tool-modal.tsx   |   4 +-
 .../components/tool-input/tool-input.tsx      |  10 +-
 .../variables-input/variables-input.tsx       |   2 +-
 .../editor/components/sub-block/sub-block.tsx |   2 +-
 .../panel/components/editor/editor.tsx        |   6 +-
 .../panel/components/toolbar/toolbar.tsx      |   4 +-
 .../w/[workflowId]/components/panel/panel.tsx |   4 +-
 .../components/subflows/subflow-node.tsx      |   2 +-
 .../components/terminal/terminal.tsx          |   4 +-
 .../components/action-bar/action-bar.tsx      |  10 +-
 .../workflow-block/workflow-block.tsx         |   4 +-
 .../components/account/account.tsx            | 320 --------
 .../components/api-keys/api-keys.tsx          |   8 +-
 .../components/copilot/copilot.tsx            |   6 +-
 .../creator-profile/creator-profile.tsx       |  10 +-
 .../components/credentials/credentials.tsx    |   6 +-
 .../components/custom-tools/custom-tools.tsx  |   8 +-
 .../components/environment/environment.tsx    |   8 +-
 .../settings-modal/components/files/files.tsx |   6 +-
 .../components/general/general.tsx            | 729 +++++++++++-------
 .../settings-modal/components/index.ts        |   3 -
 .../settings-modal/components/mcp/mcp.tsx     |   8 +-
 .../components/privacy/privacy.tsx            |  86 ---
 .../settings-navigation.tsx                   | 379 ---------
 .../settings-modal/components/sso/sso.tsx     |   4 +-
 .../components/subscription/subscription.tsx  |   4 +-
 .../no-organization-view.tsx                  |   2 +-
 .../team-management/team-management.tsx       |   4 +-
 .../hooks/use-profile-picture-upload.ts       |   4 +
 .../settings-modal/settings-modal.tsx         | 404 +++++++---
 .../emcn/components/button/button.tsx         |   4 +-
 .../emcn/components/combobox/combobox.tsx     |  29 +-
 apps/sim/components/emcn/components/index.ts  |  16 +
 .../emcn/components/label/label.tsx           |   2 +-
 .../emcn/components/modal-new/modal.tsx       |  36 +-
 .../emcn/components/s-modal/s-modal.tsx       | 273 +++++++
 .../emcn/components/switch/switch.tsx         |  37 +
 apps/sim/hooks/queries/general-settings.ts    |  35 +-
 apps/sim/lib/core/utils/theme.ts              |  43 +-
 apps/sim/stores/execution/store.ts            |  44 +-
 apps/sim/stores/execution/types.ts            |   7 -
 apps/sim/stores/settings/general/store.ts     |   3 -
 apps/sim/stores/settings/general/types.ts     |   6 -
 packages/db/schema.ts                         |   3 -
 52 files changed, 1300 insertions(+), 1424 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx
 rename apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/{components/account => }/hooks/use-profile-picture-upload.ts (97%)
 create mode 100644 apps/sim/components/emcn/components/s-modal/s-modal.tsx
 create mode 100644 apps/sim/components/emcn/components/switch/switch.tsx

diff --git a/apps/sim/.cursorrules b/apps/sim/.cursorrules
index 73ae781234a..4a3d2c2acb5 100644
--- a/apps/sim/.cursorrules
+++ b/apps/sim/.cursorrules
@@ -428,20 +428,22 @@ setSidebarWidth: (width) => {
 ### Tailwind Classes
 
 1. **No Inline Styles**: Use Tailwind utility classes exclusively
-2. **Dark Mode**: Always include dark mode variants (`dark:bg-[var(--surface-1)]`)
-3. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
-4. **clsx for Conditionals**: Use clsx() for conditional classes
-5. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
-6. **Transitions**: Add transitions for interactive states (`transition-colors`)
-7. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
+2. **Dark Mode**: Include dark mode variants only when the value differs from light mode
+3. **No Duplicate Dark Classes**: Never add a `dark:` class when the value is identical to the light mode class (e.g., `text-[var(--text-primary)] dark:text-[var(--text-primary)]` is redundant - just use `text-[var(--text-primary)]`)
+4. **Exact Values**: Use exact values from design system (`text-[14px]`, `h-[25px]`)
+5. **cn for Conditionals**: Use `cn()` from `@/lib/utils` for conditional classes (wraps clsx + tailwind-merge for conflict resolution)
+6. **Consistent Spacing**: Use spacing tokens (`gap-[8px]`, `px-[14px]`)
+7. **Transitions**: Add transitions for interactive states (`transition-colors`)
+8. **Prefer px units**: Use arbitrary px values over scale utilities (e.g., `px-[4px]` instead of `px-1`)
 
 ```typescript
+import { cn } from '@/lib/utils'
+
 <div
-  className={clsx(
+  className={cn(
     'base-classes that-always-apply',
     isActive && 'active-state-classes',
-    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent',
-    'dark:bg-[var(--surface-1)] dark:border-[var(--border)]' // Dark mode variants
+    disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer hover:bg-accent'
   )}
 >
 ```
@@ -620,9 +622,10 @@ Before considering a component/hook complete, verify:
 
 ### Styling
 - [ ] No styles attributes (use className with Tailwind)
-- [ ] Dark mode variants included
+- [ ] Dark mode variants only when values differ from light mode
+- [ ] No duplicate dark: classes with identical values
 - [ ] Consistent spacing using design tokens
-- [ ] clsx for conditional classes
+- [ ] cn() for conditional classes
 
 ### Accessibility
 - [ ] Semantic HTML elements
@@ -652,6 +655,11 @@ Before considering a component/hook complete, verify:
 // ❌ Inline styles
 <div style={{ width: 200, marginTop: 10 }}>
 
+// ❌ Duplicate dark mode classes (same value as light mode)
+<div className='text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)] dark:bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)] dark:hover:bg-[var(--border)]'>
+
 // ❌ console.log
 console.log('Debug info')
 
@@ -690,6 +698,14 @@ export function Component() {
 // ✅ Tailwind classes
 <div className='w-[200px] mt-[10px]'>
 
+// ✅ No duplicate dark classes - CSS variables already handle theming
+<div className='text-[var(--text-primary)]'>
+<div className='bg-[var(--surface-9)]'>
+<div className='hover:bg-[var(--border)]'>
+
+// ✅ Only add dark: when values differ between modes
+<div className='bg-[var(--surface-6)] dark:bg-[var(--surface-9)]'>
+
 // ✅ Logger
 logger.info('Debug info', { context })
 
diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index c1f847bb071..bd18e559e0c 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -7,25 +7,23 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force dark mode for workspace pages and templates
-  // Force light mode for certain public pages
+  // Force light mode for public/marketing pages
+  // Workspace and templates respect user's theme preference from settings
   const forcedTheme =
-    pathname.startsWith('/workspace') || pathname.startsWith('/templates')
-      ? 'dark'
-      : pathname === '/' ||
-          pathname.startsWith('/login') ||
-          pathname.startsWith('/signup') ||
-          pathname.startsWith('/sso') ||
-          pathname.startsWith('/terms') ||
-          pathname.startsWith('/privacy') ||
-          pathname.startsWith('/invite') ||
-          pathname.startsWith('/verify') ||
-          pathname.startsWith('/careers') ||
-          pathname.startsWith('/changelog') ||
-          pathname.startsWith('/chat') ||
-          pathname.startsWith('/studio')
-        ? 'light'
-        : undefined
+    pathname === '/' ||
+    pathname.startsWith('/login') ||
+    pathname.startsWith('/signup') ||
+    pathname.startsWith('/sso') ||
+    pathname.startsWith('/terms') ||
+    pathname.startsWith('/privacy') ||
+    pathname.startsWith('/invite') ||
+    pathname.startsWith('/verify') ||
+    pathname.startsWith('/careers') ||
+    pathname.startsWith('/changelog') ||
+    pathname.startsWith('/chat') ||
+    pathname.startsWith('/studio')
+      ? 'light'
+      : undefined
 
   return (
     <NextThemesProvider
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 8e63a273ff3..aa0bf8b9c4b 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -82,20 +82,20 @@
   .light {
     /* Neutrals (surfaces) */
     --bg: #ffffff;
-    --surface-1: #ffffff;
-    --surface-2: #fafafa;
-    --surface-3: #f8f8f8;
-    --surface-4: #f6f6f6;
-    --surface-5: #f3f3f3;
-    --surface-6: #f0f0f0;
-    --surface-9: #eaeaea;
-    --surface-11: #e6e6e6;
-    --surface-12: #e0e0e0;
-    --surface-13: #dcdcdc;
-    --surface-14: #d6d6d6;
-    --surface-15: #cfcfcf;
+    --surface-1: #f5f5f5;
+    --surface-2: #f2f2f2;
+    --surface-3: #f0f0f0;
+    --surface-4: #eeeeee;
+    --surface-5: #ebebeb;
+    --surface-6: #e8e8e8;
+    --surface-9: #cecece;
+    --surface-11: #c8c8c8;
+    --surface-12: #c4c4c4;
+    --surface-13: #c0c0c0;
+    --surface-14: #bcbcbc;
+    --surface-15: #b8b8b8;
     --surface-elevated: #ffffff;
-    --bg-strong: #f5f5f5;
+    --bg-strong: #ebebeb;
 
     /* Text */
     --text-primary: #1b1b1b;
@@ -107,11 +107,11 @@
     --text-error: #ef4444;
 
     /* Borders / dividers */
-    --border: #dddddd;
-    --border-strong: #d1d1d1;
+    --border: #ebebeb;
+    --border-strong: #e0e0e0;
     --divider: #e5e5e5;
-    --border-muted: #eeeeee;
-    --border-success: #d5d5d5;
+    --border-muted: #f0f0f0;
+    --border-success: #cecece;
 
     /* Brand & state */
     --brand-400: #8e4cfb;
@@ -124,10 +124,10 @@
     --white: #ffffff;
 
     /* RGB for opacity usage */
-    --surface-4-rgb: 246 246 246;
-    --surface-5-rgb: 243 243 243;
-    --surface-7-rgb: 230 230 230;
-    --surface-9-rgb: 234 234 234;
+    --surface-4-rgb: 238 238 238;
+    --surface-5-rgb: 235 235 235;
+    --surface-7-rgb: 224 224 224;
+    --surface-9-rgb: 206 206 206;
     --divider-rgb: 229 229 229;
     --white-rgb: 255 255 255;
     --black-rgb: 0 0 0;
diff --git a/apps/sim/app/api/users/me/settings/route.ts b/apps/sim/app/api/users/me/settings/route.ts
index 1e93894631c..f8a3276dafc 100644
--- a/apps/sim/app/api/users/me/settings/route.ts
+++ b/apps/sim/app/api/users/me/settings/route.ts
@@ -13,8 +13,6 @@ const logger = createLogger('UserSettingsAPI')
 const SettingsSchema = z.object({
   theme: z.enum(['system', 'light', 'dark']).optional(),
   autoConnect: z.boolean().optional(),
-  autoPan: z.boolean().optional(),
-  consoleExpandedByDefault: z.boolean().optional(),
   telemetryEnabled: z.boolean().optional(),
   emailPreferences: z
     .object({
@@ -25,7 +23,6 @@ const SettingsSchema = z.object({
     })
     .optional(),
   billingUsageNotificationsEnabled: z.boolean().optional(),
-  showFloatingControls: z.boolean().optional(),
   showTrainingControls: z.boolean().optional(),
   superUserModeEnabled: z.boolean().optional(),
   errorNotificationsEnabled: z.boolean().optional(),
@@ -35,12 +32,9 @@ const SettingsSchema = z.object({
 const defaultSettings = {
   theme: 'system',
   autoConnect: true,
-  autoPan: true,
-  consoleExpandedByDefault: true,
   telemetryEnabled: true,
   emailPreferences: {},
   billingUsageNotificationsEnabled: true,
-  showFloatingControls: true,
   showTrainingControls: false,
   superUserModeEnabled: false,
   errorNotificationsEnabled: true,
@@ -72,12 +66,9 @@ export async function GET() {
         data: {
           theme: userSettings.theme,
           autoConnect: userSettings.autoConnect,
-          autoPan: userSettings.autoPan,
-          consoleExpandedByDefault: userSettings.consoleExpandedByDefault,
           telemetryEnabled: userSettings.telemetryEnabled,
           emailPreferences: userSettings.emailPreferences ?? {},
           billingUsageNotificationsEnabled: userSettings.billingUsageNotificationsEnabled ?? true,
-          showFloatingControls: userSettings.showFloatingControls ?? true,
           showTrainingControls: userSettings.showTrainingControls ?? false,
           superUserModeEnabled: userSettings.superUserModeEnabled ?? true,
           errorNotificationsEnabled: userSettings.errorNotificationsEnabled ?? true,
diff --git a/apps/sim/app/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 30fe7eacdf7..07df6e8c4cd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -385,8 +385,8 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         className='flex h-full flex-col overflow-hidden'
       >
         {/* Header */}
-        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px]'>
-          <h2 className='font-medium text-[14px] text-[var(--white)]'>
+        <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'>
+          <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>
             {currentChat?.title || 'New Chat'}
           </h2>
           <div className='flex items-center gap-[8px]'>
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 c215ae64476..edab988d4c0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -709,7 +709,7 @@ export function ConditionInput({
       {conditionalBlocks.map((block, index) => (
         <div
           key={block.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
         >
           <div
             className={cn(
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index ed5a437b917..de96d295f91 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -257,7 +257,7 @@ export function InputMapping({
 
   if (!selectedWorkflowId) {
     return (
-      <div className='flex flex-col items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] p-8 text-center'>
+      <div className='flex flex-col items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] p-8 text-center dark:bg-[#1F1F1F]'>
         <svg
           className='mb-3 h-10 w-10 text-[var(--text-tertiary)]'
           fill='none'
@@ -369,7 +369,7 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+        'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/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 cc8edce07f6..33b2c105d7a 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
@@ -405,7 +405,7 @@ export function FieldFormat({
           key={field.id}
           data-field-id={field.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+            'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
             field.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/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 69583977388..2bae99d30f7 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
@@ -973,7 +973,7 @@ try {
                         onBlur={handleSchemaPromptBlur}
                         onKeyDown={handleSchemaPromptKeyDown}
                         disabled={schemaGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none'
+                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
                         placeholder='Describe schema...'
                       />
                     )}
@@ -1053,7 +1053,7 @@ try {
                         onBlur={handleCodePromptBlur}
                         onKeyDown={handleCodePromptKeyDown}
                         disabled={codeGeneration.isStreaming}
-                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none'
+                        className='h-[16px] w-full border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none'
                         placeholder='Describe code...'
                       />
                     )}
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 8bbdbf3960b..a92a207f7b7 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
@@ -1601,7 +1601,7 @@ export function ToolInput({
       {selectedTools.length === 0 ? (
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
-            <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)]'>
+            <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)] dark:bg-[#1F1F1F]'>
               <div className='flex items-center text-[13px] text-[var(--text-muted)]'>
                 <PlusIcon className='mr-2 h-4 w-4' />
                 Add Tool
@@ -1822,7 +1822,7 @@ export function ToolInput({
               <div
                 key={`${tool.toolId}-${toolIndex}`}
                 className={cn(
-                  'group relative flex flex-col overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] transition-all duration-200 ease-in-out',
+                  'group relative flex flex-col overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] transition-all duration-200 ease-in-out dark:bg-[#1F1F1F]',
                   draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                   dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
                     ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
@@ -1875,7 +1875,7 @@ export function ToolInput({
                         />
                       )}
                     </div>
-                    <span className='truncate font-medium text-[#EEEEEE] text-[13px]'>
+                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
                       {tool.title}
                     </span>
                   </div>
@@ -1951,7 +1951,7 @@ export function ToolInput({
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='text-[var(--text-tertiary)] transition-colors hover:text-[#EEEEEE]'
+                      className='text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
                       <XIcon className='h-[14px] w-[14px]' />
@@ -2143,7 +2143,7 @@ export function ToolInput({
           {/* Add Tool Button */}
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-              <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)]'>
+              <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)] dark:bg-[#1F1F1F]'>
                 <div className='flex items-center text-[13px] text-[var(--text-muted)]'>
                   <PlusIcon className='mr-2 h-4 w-4' />
                   Add Tool
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 a905da653e3..81e061273fe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -294,7 +294,7 @@ export function VariablesInput({
                 key={assignment.id}
                 data-assignment-id={assignment.id}
                 className={cn(
-                  'rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]',
+                  'rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index 25011a052ef..c5ef35523d7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -235,7 +235,7 @@ const renderLabel = (
               }}
               disabled={isStreaming}
               className={cn(
-                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[#737373] focus:outline-none',
+                'h-[12px] w-full max-w-[200px] border-none bg-transparent py-0 pr-[2px] text-right font-medium text-[12px] text-[var(--text-primary)] leading-[14px] placeholder:text-[var(--text-muted)] focus:outline-none',
                 isStreaming && 'text-muted-foreground'
               )}
               placeholder='Describe...'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 875da46e88f..531207547fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -183,7 +183,7 @@ export function Editor() {
   return (
     <div className='flex h-full flex-col'>
       {/* Header */}
-      <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px] dark:bg-[#2A2A2A]'>
+      <div className='flex flex-shrink-0 items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'>
         <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
           {(blockConfig || isSubflow) && (
             <div
@@ -210,11 +210,11 @@ export function Editor() {
                   handleCancelRename()
                 }
               }}
-              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--white)] outline-none'
+              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--text-primary)] outline-none'
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--white)]'
+              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--text-primary)]'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {
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 b7537fb2a6a..aceee71259e 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,10 +488,10 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
     >
       {/* Header */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[#2A2A2A] px-[12px] py-[8px]'
+        className='flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] bg-[var(--surface-5)] px-[12px] py-[8px]'
         onClick={handleSearchClick}
       >
-        <h2 className='font-medium text-[14px] text-[var(--white)]'>Toolbar</h2>
+        <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
         <div className='flex shrink-0 items-center gap-[8px]'>
           {!isSearchActive ? (
             <Button
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 e9db920b26b..bbda443f446 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
@@ -368,10 +368,10 @@ export function Panel() {
     <>
       <aside
         ref={panelRef}
-        className='panel-container fixed inset-y-0 right-0 z-10 overflow-hidden dark:bg-[var(--surface-1)]'
+        className='panel-container fixed inset-y-0 right-0 z-10 overflow-hidden bg-[var(--surface-1)]'
         aria-label='Workflow panel'
       >
-        <div className='flex h-full flex-col border-l pt-[14px] dark:border-[var(--border)]'>
+        <div className='flex h-full flex-col border-[var(--border)] border-l pt-[14px]'>
           {/* Header */}
           <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
             {/* More and Chat */}
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 8957a0a543e..303b833265e 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
@@ -216,7 +216,7 @@ export const SubflowNodeComponent = memo(({ data, id }: NodeProps<SubflowNodeDat
               data-node-role={`${data.kind}-start`}
               data-extent='parent'
             >
-              <span className='font-medium text-[14px] text-white'>Start</span>
+              <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
 
               <Handle
                 type='source'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 33561689a6c..a4c74fb8a3f 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
@@ -79,7 +79,7 @@ const RUN_ID_COLORS = [
  * Shared styling constants
  */
 const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
-const ROW_TEXT_CLASS = 'font-medium text-[#D2D2D2] text-[12px]'
+const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 /**
@@ -1098,7 +1098,7 @@ export function Terminal() {
                         )}
                       >
                         {BlockIcon && (
-                          <BlockIcon className='h-[13px] w-[13px] flex-shrink-0 text-[#D2D2D2]' />
+                          <BlockIcon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--text-secondary)]' />
                         )}
                         <span className={clsx('truncate', ROW_TEXT_CLASS)}>{entry.blockName}</span>
                       </div>
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 4958b2e21f1..500cf98809d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -90,7 +90,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockEnabled(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               {isEnabled ? (
@@ -116,7 +116,7 @@ export const ActionBar = memo(
                     collaborativeDuplicateBlock(blockId)
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled}
               >
                 <Duplicate className='h-[11px] w-[11px]' />
@@ -139,7 +139,7 @@ export const ActionBar = memo(
                     )
                   }
                 }}
-                className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
+                className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
                 disabled={disabled || !userPermissions.canEdit}
               >
                 <LogOut className='h-[11px] w-[11px]' />
@@ -159,7 +159,7 @@ export const ActionBar = memo(
                   collaborativeToggleBlockHandles(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               {horizontalHandles ? (
@@ -184,7 +184,7 @@ export const ActionBar = memo(
                   collaborativeRemoveBlock(blockId)
                 }
               }}
-              className='h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)] hover:text-[var(--bg)]'
+              className='hover:!text-[var(--text-inverse)] h-[23px] w-[23px] rounded-[8px] bg-[var(--surface-9)] p-0 text-[#868686] hover:bg-[var(--brand-secondary)]'
               disabled={disabled}
             >
               <Trash2 className='h-[11px] w-[11px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index 48c999b068f..79c652ed4b7 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
@@ -404,7 +404,7 @@ const SubBlockRow = ({
       </span>
       {displayValue !== undefined && (
         <span
-          className='flex-1 truncate text-right text-[14px] text-[var(--white)]'
+          className='flex-1 truncate text-right text-[14px] text-[var(--text-primary)]'
           title={displayValue}
         >
           {displayValue}
@@ -852,7 +852,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             <span
               className={cn(
                 'truncate font-medium text-[16px]',
-                !isEnabled && runPathStatus !== 'success' && 'text-[#808080]'
+                !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
               title={name}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx
deleted file mode 100644
index 7da137cda02..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/account.tsx
+++ /dev/null
@@ -1,320 +0,0 @@
-'use client'
-
-import { useEffect, useRef, useState } from 'react'
-import { Camera } from 'lucide-react'
-import Image from 'next/image'
-import { useRouter } from 'next/navigation'
-import { Button } from '@/components/emcn'
-import { AgentIcon } from '@/components/icons'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { signOut } from '@/lib/auth/auth-client'
-import { useBrandConfig } from '@/lib/branding/branding'
-import { getBaseUrl } from '@/lib/core/utils/urls'
-import { createLogger } from '@/lib/logs/console/logger'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload'
-import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
-import { clearUserData } from '@/stores'
-
-const logger = createLogger('Account')
-
-interface AccountProps {
-  onOpenChange: (open: boolean) => void
-}
-
-export function Account(_props: AccountProps) {
-  const router = useRouter()
-  const brandConfig = useBrandConfig()
-
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: profile } = useUserProfile()
-  const updateProfile = useUpdateUserProfile()
-
-  // Local UI state
-  const [name, setName] = useState(profile?.name || '')
-  const [isEditingName, setIsEditingName] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const [isResettingPassword, setIsResettingPassword] = useState(false)
-  const [resetPasswordMessage, setResetPasswordMessage] = useState<{
-    type: 'success' | 'error'
-    text: string
-  } | null>(null)
-
-  const [uploadError, setUploadError] = useState<string | null>(null)
-
-  // Update local name state when profile data changes
-  useEffect(() => {
-    if (profile?.name) {
-      setName(profile.name)
-    }
-  }, [profile?.name])
-
-  const {
-    previewUrl: profilePictureUrl,
-    fileInputRef: profilePictureInputRef,
-    handleThumbnailClick: handleProfilePictureClick,
-    handleFileChange: handleProfilePictureChange,
-    isUploading: isUploadingProfilePicture,
-  } = useProfilePictureUpload({
-    currentImage: profile?.image || null,
-    onUpload: async (url) => {
-      try {
-        await updateProfile.mutateAsync({ image: url })
-        setUploadError(null)
-      } catch (error) {
-        setUploadError(
-          url ? 'Failed to update profile picture' : 'Failed to remove profile picture'
-        )
-      }
-    },
-    onError: (error) => {
-      setUploadError(error)
-      setTimeout(() => setUploadError(null), 5000)
-    },
-  })
-
-  useEffect(() => {
-    if (isEditingName && inputRef.current) {
-      inputRef.current.focus()
-      inputRef.current.select()
-    }
-  }, [isEditingName])
-
-  const handleUpdateName = async () => {
-    const trimmedName = name.trim()
-
-    if (!trimmedName) {
-      return
-    }
-
-    if (trimmedName === profile?.name) {
-      setIsEditingName(false)
-      return
-    }
-
-    try {
-      await updateProfile.mutateAsync({ name: trimmedName })
-      setIsEditingName(false)
-    } catch (error) {
-      logger.error('Error updating name:', error)
-      setName(profile?.name || '')
-    }
-  }
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      handleUpdateName()
-    } else if (e.key === 'Escape') {
-      e.preventDefault()
-      handleCancelEdit()
-    }
-  }
-
-  const handleCancelEdit = () => {
-    setIsEditingName(false)
-    setName(profile?.name || '')
-  }
-
-  const handleInputBlur = () => {
-    handleUpdateName()
-  }
-
-  const handleSignOut = async () => {
-    try {
-      await Promise.all([signOut(), clearUserData()])
-      router.push('/login?fromLogout=true')
-    } catch (error) {
-      logger.error('Error signing out:', { error })
-      router.push('/login?fromLogout=true')
-    }
-  }
-
-  const handleResetPassword = async () => {
-    if (!profile?.email) return
-
-    setIsResettingPassword(true)
-    setResetPasswordMessage(null)
-
-    try {
-      const response = await fetch('/api/auth/forget-password', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          email: profile.email,
-          redirectTo: `${getBaseUrl()}/reset-password`,
-        }),
-      })
-
-      if (!response.ok) {
-        const error = await response.json()
-        throw new Error(error.message || 'Failed to send reset password email')
-      }
-
-      setResetPasswordMessage({
-        type: 'success',
-        text: 'email sent',
-      })
-
-      setTimeout(() => {
-        setResetPasswordMessage(null)
-      }, 5000)
-    } catch (error) {
-      logger.error('Error resetting password:', error)
-      setResetPasswordMessage({
-        type: 'error',
-        text: 'error',
-      })
-
-      setTimeout(() => {
-        setResetPasswordMessage(null)
-      }, 5000)
-    } finally {
-      setIsResettingPassword(false)
-    }
-  }
-
-  return (
-    <div className='px-6 pt-4 pb-4'>
-      <div className='flex flex-col gap-4'>
-        {/* User Info Section */}
-        <div className='flex items-center gap-4'>
-          {/* Profile Picture Upload */}
-          <div className='relative'>
-            <div
-              className='group relative flex h-12 w-12 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[#802FFF] transition-all hover:opacity-80'
-              onClick={handleProfilePictureClick}
-            >
-              {(() => {
-                const imageUrl = profilePictureUrl || profile?.image || brandConfig.logoUrl
-                return imageUrl ? (
-                  <Image
-                    src={imageUrl}
-                    alt={profile?.name || 'User'}
-                    width={48}
-                    height={48}
-                    className={`h-full w-full object-cover transition-opacity duration-300 ${
-                      isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
-                    }`}
-                  />
-                ) : (
-                  <AgentIcon className='h-6 w-6 text-white' />
-                )
-              })()}
-
-              {/* Upload overlay */}
-              <div
-                className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
-                  isUploadingProfilePicture ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
-                }`}
-              >
-                {isUploadingProfilePicture ? (
-                  <div className='h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent' />
-                ) : (
-                  <Camera className='h-5 w-5 text-white' />
-                )}
-              </div>
-            </div>
-
-            {/* Hidden file input */}
-            <Input
-              type='file'
-              accept='image/png,image/jpeg,image/jpg'
-              className='hidden'
-              ref={profilePictureInputRef}
-              onChange={handleProfilePictureChange}
-              disabled={isUploadingProfilePicture}
-            />
-          </div>
-
-          {/* User Details */}
-          <div className='flex flex-1 flex-col justify-center'>
-            <h3 className='font-medium text-base'>{profile?.name || ''}</h3>
-            <p className='font-normal text-muted-foreground text-sm'>{profile?.email || ''}</p>
-            {uploadError && (
-              <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {uploadError}
-              </p>
-            )}
-          </div>
-        </div>
-
-        {/* Name Field */}
-        <div className='flex flex-col gap-2'>
-          <Label htmlFor='name' className='font-normal text-muted-foreground text-sm'>
-            Name
-          </Label>
-          {isEditingName ? (
-            <input
-              ref={inputRef}
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onBlur={handleInputBlur}
-              className='min-w-0 flex-1 border-0 bg-transparent p-0 text-base outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-              maxLength={100}
-              disabled={updateProfile.isPending}
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              spellCheck='false'
-            />
-          ) : (
-            <div className='flex items-center gap-4'>
-              <span className='text-base'>{profile?.name || ''}</span>
-              <Button
-                variant='ghost'
-                className='h-auto p-0 font-normal text-muted-foreground text-sm transition-colors hover:bg-transparent hover:text-foreground'
-                onClick={() => setIsEditingName(true)}
-              >
-                update
-                <span className='sr-only'>Update name</span>
-              </Button>
-            </div>
-          )}
-        </div>
-
-        {/* Email Field - Read Only */}
-        <div className='flex flex-col gap-2'>
-          <Label className='font-normal text-muted-foreground text-sm'>Email</Label>
-          <p className='text-base'>{profile?.email || ''}</p>
-        </div>
-
-        {/* Password Field */}
-        <div className='flex flex-col gap-2'>
-          <Label className='font-normal text-muted-foreground text-sm'>Password</Label>
-          <div className='flex items-center gap-4'>
-            <span className='text-base'>••••••••</span>
-            <Button
-              variant='ghost'
-              className={`h-auto p-0 font-normal text-sm transition-colors hover:bg-transparent ${
-                resetPasswordMessage
-                  ? resetPasswordMessage.type === 'success'
-                    ? 'text-green-500 hover:text-green-600'
-                    : 'text-destructive hover:text-destructive/80'
-                  : 'text-muted-foreground hover:text-foreground'
-              }`}
-              onClick={handleResetPassword}
-              disabled={isResettingPassword}
-            >
-              {isResettingPassword
-                ? 'sending...'
-                : resetPasswordMessage
-                  ? resetPasswordMessage.text
-                  : 'reset'}
-              <span className='sr-only'>Reset password</span>
-            </Button>
-          </div>
-        </div>
-
-        {/* Sign Out Button */}
-        <div>
-          <Button onClick={handleSignOut} variant='outline'>
-            Sign Out
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
index 2bdc362a8ff..5abc69bd1ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
@@ -224,7 +224,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
   return (
     <div className='relative flex h-full flex-col'>
       {/* Fixed Header */}
-      <div className='px-6 pt-4 pb-2'>
+      <div>
         {/* Search Input */}
         {isLoading ? (
           <Skeleton className='h-9 w-56 rounded-lg' />
@@ -242,8 +242,8 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
       </div>
 
       {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
+      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='space-y-2'>
           {isLoading ? (
             <div className='space-y-2'>
               <ApiKeySkeleton />
@@ -428,7 +428,7 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
 
       {/* Footer */}
       <div className='bg-background'>
-        <div className='flex w-full items-center px-6 py-4'>
+        <div className='flex w-full items-center'>
           {isLoading ? (
             <Skeleton className='h-9 w-[117px] rounded-[8px]' />
           ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
index a6f1c429225..1e2afceb02b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
@@ -177,8 +177,8 @@ export function Copilot() {
   return (
     <div className='relative flex h-full flex-col'>
       {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='space-y-2'>
           {keys.length === 0 ? (
             <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
               Click "Create Key" below to get started
@@ -219,7 +219,7 @@ export function Copilot() {
 
       {/* Footer */}
       <div className='bg-background'>
-        <div className='flex w-full items-center px-6 py-4'>
+        <div className='flex w-full items-center'>
           <Button
             onClick={onGenerate}
             variant='ghost'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
index f309a725b20..51884326d51 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
@@ -12,7 +12,7 @@ import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '
 import { useSession } from '@/lib/auth/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
 import {
   useCreatorProfile,
   useOrganizations,
@@ -149,8 +149,8 @@ export function CreatorProfile() {
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className='flex h-full flex-col'>
           {/* Scrollable Content */}
-          <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-            <div className='space-y-2 pt-2 pb-6'>
+          <div className='min-h-0 flex-1 overflow-y-auto'>
+            <div className='space-y-2'>
               {/* Profile Type - only show if user has organizations */}
               {organizations.length > 0 && (
                 <FormField
@@ -414,7 +414,7 @@ export function CreatorProfile() {
 
           {/* Error Message */}
           {saveError && (
-            <div className='px-6 pb-2'>
+            <div>
               <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
                 {saveError}
               </p>
@@ -423,7 +423,7 @@ export function CreatorProfile() {
 
           {/* Footer */}
           <div className='bg-background'>
-            <div className='flex w-full items-center justify-between px-6 py-4'>
+            <div className='flex w-full items-center justify-between'>
               <div className='text-muted-foreground text-xs'>
                 Set up your creator profile for publishing templates
               </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
index 7e1e7cdbf54..5554346fbf5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
@@ -179,7 +179,7 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
   return (
     <div className='relative flex h-full flex-col'>
       {/* Search Input */}
-      <div className='px-6 pt-4 pb-2'>
+      <div>
         <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
           <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
           <Input
@@ -192,8 +192,8 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
       </div>
 
       {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='flex flex-col gap-6 pt-2 pb-6'>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-6'>
           {/* Success message */}
           {authSuccess && (
             <div className='rounded-[8px] border border-green-200 bg-green-50 p-4'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index 4ae0457b81b..09f94f7668b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -110,7 +110,7 @@ export function CustomTools() {
   return (
     <div className='relative flex h-full flex-col'>
       {/* Fixed Header with Search */}
-      <div className='px-6 pt-4 pb-2'>
+      <div>
         {/* Search Input */}
         {isLoading ? (
           <Skeleton className='h-9 w-56 rounded-[8px]' />
@@ -128,8 +128,8 @@ export function CustomTools() {
       </div>
 
       {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='space-y-2'>
           {isLoading ? (
             <div className='space-y-2'>
               <CustomToolSkeleton />
@@ -202,7 +202,7 @@ export function CustomTools() {
 
       {/* Footer */}
       <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
+        <div className='flex w-full items-center justify-between'>
           {isLoading ? (
             <>
               <Skeleton className='h-9 w-[117px] rounded-[8px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
index cf906642905..56247a0d904 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
@@ -519,7 +519,7 @@ export function EnvironmentVariables({
         readOnly
       />
       {/* Fixed Header */}
-      <div className='px-6 pt-4 pb-2'>
+      <div>
         {/* Search Input */}
         {isLoading ? (
           <Skeleton className='h-9 w-56 rounded-[8px]' />
@@ -543,8 +543,8 @@ export function EnvironmentVariables({
       </div>
 
       {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
+      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='space-y-2'>
           {isLoading ? (
             <>
               {/* Show 3 skeleton rows */}
@@ -695,7 +695,7 @@ export function EnvironmentVariables({
 
       {/* Footer */}
       <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
+        <div className='flex w-full items-center justify-between'>
           {isLoading ? (
             <>
               <Skeleton className='h-9 w-[117px] rounded-[8px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
index 640f613f813..750451c4916 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
@@ -208,7 +208,7 @@ export function Files() {
   return (
     <div className='relative flex h-full flex-col'>
       {/* Header: search left, file count + Upload right */}
-      <div className='flex items-center justify-between px-6 pt-4 pb-2'>
+      <div className='flex items-center justify-between'>
         <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
           <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
           <Input
@@ -272,7 +272,7 @@ export function Files() {
 
       {/* Error message */}
       {uploadError && (
-        <div className='px-6 pb-2'>
+        <div>
           <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
             {uploadError}
           </p>
@@ -280,7 +280,7 @@ export function Files() {
       )}
 
       {/* Files Table */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
         {files.length === 0 ? (
           <div className='py-8 text-center text-muted-foreground text-sm'>
             No files uploaded yet
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
index 37ce2dc2978..e9b302138a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
@@ -1,48 +1,83 @@
-import { useEffect, useState } from 'react'
-import { Info } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-// COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
-// import {
-//   Select,
-//   SelectContent,
-//   SelectItem,
-//   SelectTrigger,
-//   SelectValue,
-// } from '@/components/ui/select'
-import { Switch } from '@/components/ui/switch'
-import { useSession } from '@/lib/auth/auth-client'
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { Camera, Check, Pencil } from 'lucide-react'
+import Image from 'next/image'
+import { useRouter } from 'next/navigation'
+import { Button, Combobox, Label, Switch } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal-new/modal'
+import { Input, Skeleton } from '@/components/ui'
+import { signOut, useSession } from '@/lib/auth/auth-client'
+import { useBrandConfig } from '@/lib/branding/branding'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { createLogger } from '@/lib/logs/console/logger'
+import { getBaseUrl } from '@/lib/core/utils/urls'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
 import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
+import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
+import { clearUserData } from '@/stores'
+
+const logger = createLogger('General')
+
+/**
+ * Extracts initials from a user's name.
+ * @param name - The user's full name
+ * @returns Up to 2 characters: first letters of first and last name, or just the first letter
+ */
+function getInitials(name: string | undefined | null): string {
+  if (!name?.trim()) return ''
+  const parts = name.trim().split(' ')
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
+  }
+  return parts[0][0].toUpperCase()
+}
 
-const TOOLTIPS = {
-  autoConnect: 'Automatically connect nodes.',
-  autoPan: 'Automatically pan to active blocks during workflow execution.',
-  consoleExpandedByDefault:
-    'Show console entries expanded by default. When disabled, entries will be collapsed by default.',
-  floatingControls:
-    'Show floating controls for zoom, undo, and redo at the bottom of the workflow canvas.',
-  trainingControls:
-    'Show training controls for recording workflow edits to build copilot training datasets.',
-  superUserMode:
-    'Toggle super user mode UI. When enabled, you can see and approve pending templates. Your super user status in the database remains unchanged.',
-  errorNotifications:
-    'Show error notifications when blocks fail. When disabled, errors will only appear in the console.',
+interface GeneralProps {
+  onOpenChange?: (open: boolean) => void
 }
 
-export function General() {
+export function General({ onOpenChange }: GeneralProps) {
+  const router = useRouter()
+  const brandConfig = useBrandConfig()
   const { data: session } = useSession()
-  const [isSuperUser, setIsSuperUser] = useState(false)
-  const [loadingSuperUser, setLoadingSuperUser] = useState(true)
 
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: settings, isLoading } = useGeneralSettings()
+  const { data: profile, isLoading: isProfileLoading } = useUserProfile()
+  const updateProfile = useUpdateUserProfile()
+
+  const { data: settings, isLoading: isSettingsLoading } = useGeneralSettings()
   const updateSetting = useUpdateGeneralSetting()
 
+  const isLoading = isProfileLoading || isSettingsLoading
+
   const isTrainingEnabled = isTruthy(getEnv('NEXT_PUBLIC_COPILOT_TRAINING_ENABLED'))
 
-  // Fetch super user status from database
+  const [isSuperUser, setIsSuperUser] = useState(false)
+  const [loadingSuperUser, setLoadingSuperUser] = useState(true)
+
+  const [name, setName] = useState(profile?.name || '')
+  const [isEditingName, setIsEditingName] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isResettingPassword, setIsResettingPassword] = useState(false)
+  const [showResetPasswordModal, setShowResetPasswordModal] = useState(false)
+  const [resetPasswordSuccess, setResetPasswordSuccess] = useState(false)
+  const [resetPasswordError, setResetPasswordError] = useState<string | null>(null)
+
+  const [uploadError, setUploadError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (profile?.name) {
+      setName(profile.name)
+    }
+  }, [profile?.name])
+
   useEffect(() => {
     const fetchSuperUserStatus = async () => {
       try {
@@ -52,7 +87,7 @@ export function General() {
           setIsSuperUser(data.isSuperUser)
         }
       } catch (error) {
-        console.error('Failed to fetch super user status:', error)
+        logger.error('Failed to fetch super user status:', error)
       } finally {
         setLoadingSuperUser(false)
       }
@@ -63,47 +98,135 @@ export function General() {
     }
   }, [session?.user?.id])
 
-  const handleSuperUserModeToggle = async (checked: boolean) => {
-    if (checked !== settings?.superUserModeEnabled && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'superUserModeEnabled', value: checked })
+  const {
+    previewUrl: profilePictureUrl,
+    fileInputRef: profilePictureInputRef,
+    handleThumbnailClick: handleProfilePictureClick,
+    handleFileChange: handleProfilePictureChange,
+    isUploading: isUploadingProfilePicture,
+  } = useProfilePictureUpload({
+    currentImage: profile?.image || null,
+    onUpload: (url: string | null) => {
+      updateProfile
+        .mutateAsync({ image: url })
+        .then(() => {
+          setUploadError(null)
+        })
+        .catch(() => {
+          setUploadError(
+            url ? 'Failed to update profile picture' : 'Failed to remove profile picture'
+          )
+        })
+    },
+    onError: (error: string) => {
+      setUploadError(error)
+      setTimeout(() => setUploadError(null), 5000)
+    },
+  })
+
+  useEffect(() => {
+    if (isEditingName && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
     }
-  }
+  }, [isEditingName])
 
-  // COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
-  // // Sync theme from store to next-themes when theme changes
-  // useEffect(() => {
-  //   if (!isLoading && theme) {
-  //     // Ensure next-themes is in sync with our store
-  //     const { syncThemeToNextThemes } = require('@/lib/theme-sync')
-  //     syncThemeToNextThemes(theme)
-  //   }
-  // }, [theme, isLoading])
-
-  const handleThemeChange = async (value: 'system' | 'light' | 'dark') => {
-    await updateSetting.mutateAsync({ key: 'theme', value })
+  const handleUpdateName = async () => {
+    const trimmedName = name.trim()
+
+    if (!trimmedName) {
+      return
+    }
+
+    if (trimmedName === profile?.name) {
+      setIsEditingName(false)
+      return
+    }
+
+    try {
+      await updateProfile.mutateAsync({ name: trimmedName })
+      setIsEditingName(false)
+    } catch (error) {
+      logger.error('Error updating name:', error)
+      setName(profile?.name || '')
+    }
   }
 
-  const handleAutoConnectChange = async (checked: boolean) => {
-    if (checked !== settings?.autoConnect && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'autoConnect', value: checked })
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleUpdateName()
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      handleCancelEdit()
     }
   }
 
-  const handleAutoPanChange = async (checked: boolean) => {
-    if (checked !== settings?.autoPan && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'autoPan', value: checked })
+  const handleCancelEdit = () => {
+    setIsEditingName(false)
+    setName(profile?.name || '')
+  }
+
+  const handleInputBlur = () => {
+    handleUpdateName()
+  }
+
+  const handleSignOut = async () => {
+    try {
+      await Promise.all([signOut(), clearUserData()])
+      router.push('/login?fromLogout=true')
+    } catch (error) {
+      logger.error('Error signing out:', { error })
+      router.push('/login?fromLogout=true')
     }
   }
 
-  const handleConsoleExpandedByDefaultChange = async (checked: boolean) => {
-    if (checked !== settings?.consoleExpandedByDefault && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'consoleExpandedByDefault', value: checked })
+  const handleResetPasswordConfirm = async () => {
+    if (!profile?.email) return
+
+    setIsResettingPassword(true)
+    setResetPasswordError(null)
+
+    try {
+      const response = await fetch('/api/auth/forget-password', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email: profile.email,
+          redirectTo: `${getBaseUrl()}/reset-password`,
+        }),
+      })
+
+      if (!response.ok) {
+        const error = await response.json()
+        throw new Error(error.message || 'Failed to send reset password email')
+      }
+
+      setResetPasswordSuccess(true)
+
+      setTimeout(() => {
+        setShowResetPasswordModal(false)
+        setResetPasswordSuccess(false)
+      }, 1500)
+    } catch (error) {
+      logger.error('Error resetting password:', error)
+      setResetPasswordError('Failed to send email')
+
+      setTimeout(() => {
+        setResetPasswordError(null)
+      }, 5000)
+    } finally {
+      setIsResettingPassword(false)
     }
   }
 
-  const handleFloatingControlsChange = async (checked: boolean) => {
-    if (checked !== settings?.showFloatingControls && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'showFloatingControls', value: checked })
+  const handleThemeChange = async (value: string) => {
+    await updateSetting.mutateAsync({ key: 'theme', value: value as 'system' | 'light' | 'dark' })
+  }
+
+  const handleAutoConnectChange = async (checked: boolean) => {
+    if (checked !== settings?.autoConnect && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'autoConnect', value: checked })
     }
   }
 
@@ -119,232 +242,312 @@ export function General() {
     }
   }
 
+  const handleSuperUserModeToggle = async (checked: boolean) => {
+    if (checked !== settings?.superUserModeEnabled && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'superUserModeEnabled', value: checked })
+    }
+  }
+
+  const handleTelemetryToggle = async (checked: boolean) => {
+    if (checked !== settings?.telemetryEnabled && !updateSetting.isPending) {
+      await updateSetting.mutateAsync({ key: 'telemetryEnabled', value: checked })
+
+      if (checked) {
+        if (typeof window !== 'undefined') {
+          fetch('/api/telemetry', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+              category: 'consent',
+              action: 'enable_from_settings',
+              timestamp: new Date().toISOString(),
+            }),
+          }).catch(() => {})
+        }
+      }
+    }
+  }
+
+  const imageUrl = profilePictureUrl || profile?.image || brandConfig.logoUrl
+
+  if (isLoading) {
+    return <GeneralSkeleton />
+  }
+
   return (
-    <div className='px-6 pt-4 pb-2'>
-      <div className='flex flex-col gap-4'>
-        {/* COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace */}
-        {/* <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='theme-select' className='font-normal'>
-              Theme
-            </Label>
-          </div>
-          <Select
-            value={settings?.theme}
-            onValueChange={handleThemeChange}
-            disabled={updateSetting.isPending}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* User Info Section */}
+      <div className='flex items-center gap-[12px]'>
+        <div className='relative'>
+          <div
+            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
+            onClick={handleProfilePictureClick}
           >
-            <SelectTrigger id='theme-select' className='h-9 w-[180px]'>
-              <SelectValue placeholder='Select theme' />
-            </SelectTrigger>
-            <SelectContent className='min-w-32 rounded-[10px] border-[#E5E5E5] bg-[var(--white)] shadow-xs dark:border-[#414141] dark:bg-[var(--surface-elevated)]'>
-              <SelectItem
-                value='system'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                System
-              </SelectItem>
-              <SelectItem
-                value='light'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                Light
-              </SelectItem>
-              <SelectItem
-                value='dark'
-                className='rounded-[8px] text-card-foreground text-sm hover:bg-muted focus:bg-muted'
-              >
-                Dark
-              </SelectItem>
-            </SelectContent>
-          </Select>
-        </div> */}
-
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='auto-connect' className='font-normal'>
-              Auto-connect on drop
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
+            {(() => {
+              if (imageUrl) {
+                return (
+                  <Image
+                    src={imageUrl}
+                    alt={profile?.name || 'User'}
+                    width={36}
+                    height={36}
+                    className={`h-full w-full object-cover transition-opacity duration-300 ${
+                      isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
+                    }`}
+                  />
+                )
+              }
+              return (
+                <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  {getInitials(profile?.name) || ''}
+                </span>
+              )
+            })()}
+            <div
+              className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
+                isUploadingProfilePicture ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+              }`}
+            >
+              {isUploadingProfilePicture ? (
+                <div className='h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
+              ) : (
+                <Camera className='h-4 w-4 text-white' />
+              )}
+            </div>
+          </div>
+          <Input
+            type='file'
+            accept='image/png,image/jpeg,image/jpg'
+            className='hidden'
+            ref={profilePictureInputRef}
+            onChange={handleProfilePictureChange}
+            disabled={isUploadingProfilePicture}
+          />
+        </div>
+        <div className='flex flex-1 flex-col justify-center gap-[1px]'>
+          <div className='flex items-center gap-[8px]'>
+            {isEditingName ? (
+              <>
+                <input
+                  ref={inputRef}
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  onBlur={handleInputBlur}
+                  className='w-auto border-0 bg-transparent p-0 font-medium text-[14px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                  size={Math.max(name.length, 1)}
+                  maxLength={100}
+                  disabled={updateProfile.isPending}
+                  autoComplete='off'
+                  autoCorrect='off'
+                  autoCapitalize='off'
+                  spellCheck='false'
+                />
                 <Button
                   variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about auto-connect feature'
-                  disabled={updateSetting.isPending}
+                  className='h-[11px] w-[11px] flex-shrink-0 p-0'
+                  onClick={handleUpdateName}
+                  disabled={updateProfile.isPending}
+                  aria-label='Save name'
                 >
-                  <Info className='h-5 w-5' />
+                  <Check className='h-[11px] w-[11px]' />
                 </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.autoConnect}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='auto-connect'
-            checked={settings?.autoConnect ?? true}
-            onCheckedChange={handleAutoConnectChange}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='console-expanded-by-default' className='font-normal'>
-              Console expanded by default
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
+              </>
+            ) : (
+              <>
+                <h3 className='font-medium text-[14px]'>{profile?.name || ''}</h3>
                 <Button
                   variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about console expanded by default'
-                  disabled={updateSetting.isPending}
+                  className='h-[11px] w-[11px] flex-shrink-0 p-0'
+                  onClick={() => setIsEditingName(true)}
+                  aria-label='Edit name'
                 >
-                  <Info className='h-5 w-5' />
+                  <Pencil className='h-[11px] w-[11px]' />
                 </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.consoleExpandedByDefault}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
+              </>
+            )}
           </div>
-          <Switch
-            id='console-expanded-by-default'
-            checked={settings?.consoleExpandedByDefault ?? true}
-            onCheckedChange={handleConsoleExpandedByDefaultChange}
+          <p className='text-[13px] text-[var(--text-muted)]'>{profile?.email || ''}</p>
+        </div>
+      </div>
+      {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
+
+      <div className='flex items-center justify-between border-b pb-[12px]'>
+        <Label htmlFor='theme-select'>Theme</Label>
+        <div className='w-[100px]'>
+          <Combobox
+            size='sm'
+            align='end'
+            dropdownWidth={140}
+            value={settings?.theme}
+            onChange={handleThemeChange}
             disabled={updateSetting.isPending}
+            placeholder='Select theme'
+            options={[
+              { label: 'System', value: 'system' },
+              { label: 'Light', value: 'light' },
+              { label: 'Dark', value: 'dark' },
+            ]}
           />
         </div>
+      </div>
 
-        {/* TODO: Add floating controls back when we implement the new UI for it */}
-        {/* <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='floating-controls' className='font-normal'>
-              Floating controls
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about floating controls'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.floatingControls}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
+      <div className='flex items-center justify-between'>
+        <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
+        <Switch
+          id='auto-connect'
+          checked={settings?.autoConnect ?? true}
+          onCheckedChange={handleAutoConnectChange}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <div className='flex items-center justify-between'>
+        <Label htmlFor='error-notifications'>Run error notifications</Label>
+        <Switch
+          id='error-notifications'
+          checked={settings?.errorNotificationsEnabled ?? true}
+          onCheckedChange={handleErrorNotificationsChange}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <div className='flex items-center justify-between border-t pt-[12px]'>
+        <Label htmlFor='telemetry'>Allow anonymous telemetry</Label>
+        <Switch
+          id='telemetry'
+          checked={settings?.telemetryEnabled ?? true}
+          onCheckedChange={handleTelemetryToggle}
+          disabled={updateSetting.isPending}
+        />
+      </div>
+
+      <p className='text-[12px] text-[var(--text-muted)]'>
+        We use OpenTelemetry to collect anonymous usage data to improve Sim. All data is collected
+        in accordance with our privacy policy, and you can opt-out at any time.
+      </p>
+
+      {isTrainingEnabled && (
+        <div className='flex items-center justify-between'>
+          <Label htmlFor='training-controls'>Training controls</Label>
           <Switch
-            id='floating-controls'
-            checked={settings?.showFloatingControls ?? true}
-            onCheckedChange={handleFloatingControlsChange}
+            id='training-controls'
+            checked={settings?.showTrainingControls ?? false}
+            onCheckedChange={handleTrainingControlsChange}
             disabled={updateSetting.isPending}
           />
-        </div> */}
+        </div>
+      )}
 
+      {!loadingSuperUser && isSuperUser && (
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='error-notifications' className='font-normal'>
-              Error notifications
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about error notifications'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.errorNotifications}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
+          <Label htmlFor='super-user-mode'>Super admin mode</Label>
           <Switch
-            id='error-notifications'
-            checked={settings?.errorNotificationsEnabled ?? true}
-            onCheckedChange={handleErrorNotificationsChange}
+            id='super-user-mode'
+            checked={settings?.superUserModeEnabled ?? true}
+            onCheckedChange={handleSuperUserModeToggle}
             disabled={updateSetting.isPending}
           />
         </div>
+      )}
 
-        {isTrainingEnabled && (
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <Label htmlFor='training-controls' className='font-normal'>
-                Training controls
-              </Label>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    size='icon'
-                    className='h-5 w-5 p-0'
-                    aria-label='Learn more about training controls'
-                    disabled={updateSetting.isPending}
-                  >
-                    <Info className='h-3.5 w-3.5 text-muted-foreground' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                  <p className='text-sm'>{TOOLTIPS.trainingControls}</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </div>
-            <Switch
-              id='training-controls'
-              checked={settings?.showTrainingControls ?? false}
-              onCheckedChange={handleTrainingControlsChange}
-              disabled={updateSetting.isPending}
-            />
-          </div>
-        )}
-
-        {/* Super User Mode Toggle - Only visible to super users */}
-        {!loadingSuperUser && isSuperUser && (
-          <div className='flex items-center justify-between'>
-            <div className='flex items-center gap-2'>
-              <Label htmlFor='super-user-mode' className='font-normal'>
-                Super User Mode
-              </Label>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    variant='ghost'
-                    size='sm'
-                    className='h-7 p-1 text-gray-500'
-                    aria-label='Learn more about super user mode'
-                    disabled={updateSetting.isPending}
-                  >
-                    <Info className='h-5 w-5' />
-                  </Button>
-                </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                  <p className='text-sm'>{TOOLTIPS.superUserMode}</p>
-                </Tooltip.Content>
-              </Tooltip.Root>
-            </div>
-            <Switch
-              id='super-user-mode'
-              checked={settings?.superUserModeEnabled ?? true}
-              onCheckedChange={handleSuperUserModeToggle}
-              disabled={updateSetting.isPending}
-            />
+      <div className='mt-auto flex items-center gap-[8px]'>
+        <Button onClick={handleSignOut}>Sign out</Button>
+        <Button onClick={() => setShowResetPasswordModal(true)}>Reset password</Button>
+      </div>
+
+      {/* Password Reset Confirmation Modal */}
+      <Modal open={showResetPasswordModal} onOpenChange={setShowResetPasswordModal}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Reset Password</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              A password reset link will be sent to{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{profile?.email}</span>.
+              Click the link in the email to create a new password.
+            </p>
+            {resetPasswordError && (
+              <p className='mt-[8px] text-[12px] text-[var(--text-error)]'>{resetPasswordError}</p>
+            )}
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              onClick={() => setShowResetPasswordModal(false)}
+              disabled={isResettingPassword || resetPasswordSuccess}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={handleResetPasswordConfirm}
+              disabled={isResettingPassword || resetPasswordSuccess}
+            >
+              {isResettingPassword
+                ? 'Sending...'
+                : resetPasswordSuccess
+                  ? 'Sent'
+                  : 'Send Reset Email'}
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </div>
+  )
+}
+
+/**
+ * Skeleton component for general settings loading state.
+ * Matches the exact layout structure of the General component.
+ */
+function GeneralSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* User Info Section */}
+      <div className='flex items-center gap-[12px]'>
+        <Skeleton className='h-9 w-9 rounded-full' />
+        <div className='flex flex-1 flex-col justify-center gap-[1px]'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-24' />
+            <Skeleton className='h-[11px] w-[11px]' />
           </div>
-        )}
+          <Skeleton className='h-[13px] w-40' />
+        </div>
+      </div>
+
+      {/* Theme row */}
+      <div className='flex items-center justify-between border-b pb-[12px]'>
+        <Skeleton className='h-4 w-12' />
+        <Skeleton className='h-8 w-[100px] rounded-[8px]' />
+      </div>
+
+      {/* Auto-connect row */}
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Error notifications row */}
+      <div className='flex items-center justify-between'>
+        <Skeleton className='h-4 w-36' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Telemetry row */}
+      <div className='flex items-center justify-between border-t pt-[12px]'>
+        <Skeleton className='h-4 w-40' />
+        <Skeleton className='h-[17px] w-[30px] rounded-[20px]' />
+      </div>
+
+      {/* Telemetry description */}
+      <div className='space-y-1'>
+        <Skeleton className='h-3 w-full' />
+        <Skeleton className='h-3 w-4/5' />
+      </div>
+
+      {/* Action buttons */}
+      <div className='mt-auto flex items-center gap-[8px]'>
+        <Skeleton className='h-8 w-20 rounded-[4px]' />
+        <Skeleton className='h-8 w-28 rounded-[4px]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
index e654e5bd302..dd8a868fd55 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
@@ -1,4 +1,3 @@
-export { Account } from './account/account'
 export { ApiKeys } from './api-keys/api-keys'
 export { Copilot } from './copilot/copilot'
 export { Credentials } from './credentials/credentials'
@@ -7,8 +6,6 @@ export { EnvironmentVariables } from './environment/environment'
 export { Files as FileUploads } from './files/files'
 export { General } from './general/general'
 export { MCP } from './mcp/mcp'
-export { Privacy } from './privacy/privacy'
-export { SettingsNavigation } from './settings-navigation/settings-navigation'
 export { SSO } from './sso/sso'
 export { Subscription } from './subscription/subscription'
 export { TeamManagement } from './team-management/team-management'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
index 8b45d2050b1..186f350e239 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
@@ -247,7 +247,7 @@ export function MCP() {
   return (
     <div className='relative flex h-full flex-col'>
       {/* Fixed Header with Search */}
-      <div className='px-6 pt-4 pb-2'>
+      <div>
         {/* Search Input */}
         {serversLoading ? (
           <Skeleton className='h-9 w-56 rounded-[8px]' />
@@ -265,8 +265,8 @@ export function MCP() {
       </div>
 
       {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto px-6'>
-        <div className='space-y-2 pt-2 pb-6'>
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='space-y-2'>
           {/* Server List */}
           {toolsError || serversError ? (
             <div className='flex h-full flex-col items-center justify-center gap-2'>
@@ -442,7 +442,7 @@ export function MCP() {
 
       {/* Footer */}
       <div className='bg-background'>
-        <div className='flex w-full items-center justify-between px-6 py-4'>
+        <div className='flex w-full items-center justify-between'>
           {serversLoading ? (
             <>
               <Skeleton className='h-9 w-[117px] rounded-[8px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx
deleted file mode 100644
index 003c6837954..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/privacy/privacy.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-'use client'
-
-import { Info } from 'lucide-react'
-import { Tooltip } from '@/components/emcn'
-import { Button } from '@/components/ui/button'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
-
-const TOOLTIPS = {
-  telemetry:
-    'We collect anonymous data about feature usage, performance, and errors to improve the application.',
-}
-
-export function Privacy() {
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: settings } = useGeneralSettings()
-  const updateSetting = useUpdateGeneralSetting()
-
-  const handleTelemetryToggle = async (checked: boolean) => {
-    if (checked !== settings?.telemetryEnabled && !updateSetting.isPending) {
-      await updateSetting.mutateAsync({ key: 'telemetryEnabled', value: checked })
-
-      // Send telemetry event when enabling
-      if (checked) {
-        if (typeof window !== 'undefined') {
-          fetch('/api/telemetry', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              category: 'consent',
-              action: 'enable_from_settings',
-              timestamp: new Date().toISOString(),
-            }),
-          }).catch(() => {
-            // Silently fail - this is just telemetry
-          })
-        }
-      }
-    }
-  }
-
-  return (
-    <div className='px-6 pt-4 pb-2'>
-      <div className='flex flex-col gap-2'>
-        <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-2'>
-            <Label htmlFor='telemetry' className='font-normal'>
-              Allow anonymous telemetry
-            </Label>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  size='sm'
-                  className='h-7 p-1 text-gray-500'
-                  aria-label='Learn more about telemetry data collection'
-                  disabled={updateSetting.isPending}
-                >
-                  <Info className='h-5 w-5' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top' className='max-w-[300px] p-3'>
-                <p className='text-sm'>{TOOLTIPS.telemetry}</p>
-              </Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-          <Switch
-            id='telemetry'
-            checked={settings?.telemetryEnabled ?? true}
-            onCheckedChange={handleTelemetryToggle}
-            disabled={updateSetting.isPending}
-          />
-        </div>
-
-        <div className='border-t pt-4'>
-          <p className='text-muted-foreground text-xs'>
-            We use OpenTelemetry to collect anonymous usage data to improve Sim. All data is
-            collected in accordance with our privacy policy, and you can opt-out at any time. This
-            setting applies to your account on all devices.
-          </p>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx
deleted file mode 100644
index 04bf7e9b10e..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/settings-navigation/settings-navigation.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-import { useMemo } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-import {
-  Bot,
-  CreditCard,
-  FileCode,
-  Files,
-  Home,
-  Key,
-  LogIn,
-  Palette,
-  Server,
-  Settings,
-  Shield,
-  User,
-  Users,
-  Waypoints,
-  Wrench,
-} from 'lucide-react'
-import { useSession } from '@/lib/auth/auth-client'
-import { getSubscriptionStatus } from '@/lib/billing/client/utils'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { isHosted } from '@/lib/core/config/environment'
-import { cn } from '@/lib/core/utils/cn'
-import { getUserRole } from '@/lib/workspaces/organization/utils'
-import { generalSettingsKeys } from '@/hooks/queries/general-settings'
-import { organizationKeys, useOrganizations } from '@/hooks/queries/organization'
-import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
-import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
-
-const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
-
-interface SettingsNavigationProps {
-  activeSection: string
-  onSectionChange: (
-    section:
-      | 'general'
-      | 'environment'
-      | 'account'
-      | 'creator-profile'
-      | 'credentials'
-      | 'apikeys'
-      | 'files'
-      | 'subscription'
-      | 'team'
-      | 'sso'
-      | 'privacy'
-      | 'copilot'
-      | 'mcp'
-      | 'custom-tools'
-  ) => void
-  hasOrganization: boolean
-}
-
-type NavigationItem = {
-  id:
-    | 'general'
-    | 'environment'
-    | 'account'
-    | 'creator-profile'
-    | 'credentials'
-    | 'apikeys'
-    | 'files'
-    | 'subscription'
-    | 'team'
-    | 'sso'
-    | 'copilot'
-    | 'privacy'
-    | 'mcp'
-    | 'custom-tools'
-  label: string
-  icon: React.ComponentType<{ className?: string }>
-  hideWhenBillingDisabled?: boolean
-  requiresTeam?: boolean
-  requiresEnterprise?: boolean
-  requiresOwner?: boolean
-  requiresHosted?: boolean
-}
-
-const allNavigationItems: NavigationItem[] = [
-  {
-    id: 'general',
-    label: 'General',
-    icon: Settings,
-  },
-  {
-    id: 'credentials',
-    label: 'Integrations',
-    icon: Waypoints,
-  },
-  {
-    id: 'mcp',
-    label: 'MCP Servers',
-    icon: Server,
-  },
-  {
-    id: 'custom-tools',
-    label: 'Custom Tools',
-    icon: Wrench,
-  },
-  {
-    id: 'environment',
-    label: 'Environment',
-    icon: FileCode,
-  },
-  {
-    id: 'account',
-    label: 'Account',
-    icon: User,
-  },
-  {
-    id: 'creator-profile',
-    label: 'Creator Profile',
-    icon: Palette,
-  },
-  {
-    id: 'apikeys',
-    label: 'API Keys',
-    icon: Key,
-  },
-  {
-    id: 'files',
-    label: 'Files',
-    icon: Files,
-  },
-  {
-    id: 'copilot',
-    label: 'Copilot',
-    icon: Bot,
-    requiresHosted: true,
-  },
-  {
-    id: 'privacy',
-    label: 'Privacy',
-    icon: Shield,
-  },
-  {
-    id: 'subscription',
-    label: 'Subscription',
-    icon: CreditCard,
-    hideWhenBillingDisabled: true,
-  },
-  {
-    id: 'team',
-    label: 'Team',
-    icon: Users,
-    hideWhenBillingDisabled: true,
-    requiresTeam: true,
-  },
-  {
-    id: 'sso',
-    label: 'Single Sign-On',
-    icon: LogIn,
-    requiresTeam: true,
-    requiresEnterprise: true,
-    requiresOwner: true,
-  },
-]
-
-export function SettingsNavigation({
-  activeSection,
-  onSectionChange,
-  hasOrganization,
-}: SettingsNavigationProps) {
-  const { data: session } = useSession()
-  const queryClient = useQueryClient()
-  const { data: orgsData } = useOrganizations()
-  const { data: subscriptionData } = useSubscriptionData()
-  const activeOrg = orgsData?.activeOrganization
-  const userEmail = session?.user?.email
-  const userId = session?.user?.id
-  const userRole = getUserRole(activeOrg, userEmail)
-  const isOwner = userRole === 'owner'
-  const isAdmin = userRole === 'admin'
-  const canManageSSO = isOwner || isAdmin
-  const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
-  const hasEnterprisePlan = subscriptionStatus.isEnterprise
-
-  // Use React Query to check SSO provider ownership (with proper caching)
-  // Only fetch if not hosted (hosted uses billing/org checks)
-  const { data: ssoProvidersData, isLoading: isLoadingSSO } = useSSOProviders()
-
-  // Memoize SSO provider ownership check
-  const isSSOProviderOwner = useMemo(() => {
-    if (isHosted) return null
-    if (!userId || isLoadingSSO) return null
-    return ssoProvidersData?.providers?.some((p: any) => p.userId === userId) || false
-  }, [userId, isHosted, ssoProvidersData?.providers, isLoadingSSO])
-
-  // Memoize navigation items to avoid filtering on every render
-  const navigationItems = useMemo(() => {
-    return allNavigationItems.filter((item) => {
-      if (item.hideWhenBillingDisabled && !isBillingEnabled) {
-        return false
-      }
-
-      if (item.requiresTeam) {
-        const isMember = userRole === 'member' || isAdmin
-        const hasTeamPlan = subscriptionStatus.isTeam || subscriptionStatus.isEnterprise
-
-        if (isMember) return true
-        if (isOwner && hasTeamPlan) return true
-
-        return false
-      }
-
-      if (item.requiresEnterprise && !hasEnterprisePlan) {
-        return false
-      }
-
-      if (item.requiresHosted && !isHosted) {
-        return false
-      }
-
-      if (item.id === 'sso') {
-        if (isHosted) {
-          return hasOrganization && hasEnterprisePlan && canManageSSO
-        }
-        // For non-hosted, only show if we know the ownership status
-        return isSSOProviderOwner === true
-      }
-
-      if (item.requiresOwner && !isOwner) {
-        return false
-      }
-
-      return true
-    })
-  }, [hasOrganization, hasEnterprisePlan, canManageSSO, isSSOProviderOwner, isOwner])
-
-  // Prefetch functions for React Query
-  const prefetchGeneral = () => {
-    // Prefetch general settings using React Query
-    queryClient.prefetchQuery({
-      queryKey: generalSettingsKeys.settings(),
-      queryFn: async () => {
-        const response = await fetch('/api/users/me/settings')
-        if (!response.ok) {
-          throw new Error('Failed to fetch general settings')
-        }
-        const { data } = await response.json()
-        return {
-          autoConnect: data.autoConnect ?? true,
-          autoPan: data.autoPan ?? true,
-          consoleExpandedByDefault: data.consoleExpandedByDefault ?? true,
-          showFloatingControls: data.showFloatingControls ?? true,
-          showTrainingControls: data.showTrainingControls ?? false,
-          superUserModeEnabled: data.superUserModeEnabled ?? true,
-          theme: data.theme || 'system',
-          telemetryEnabled: data.telemetryEnabled ?? true,
-          billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
-        }
-      },
-      staleTime: 60 * 60 * 1000, // 1 hour
-    })
-  }
-
-  const prefetchSubscription = () => {
-    queryClient.prefetchQuery({
-      queryKey: subscriptionKeys.user(),
-      queryFn: async () => {
-        const response = await fetch('/api/billing?context=user')
-        if (!response.ok) {
-          throw new Error('Failed to fetch subscription data')
-        }
-        return response.json()
-      },
-      staleTime: 30 * 1000,
-    })
-  }
-
-  const prefetchOrganization = () => {
-    queryClient.prefetchQuery({
-      queryKey: organizationKeys.lists(),
-      queryFn: async () => {
-        const { client } = await import('@/lib/auth/auth-client')
-        const [orgsResponse, activeOrgResponse, billingResponse] = await Promise.all([
-          client.organization.list(),
-          client.organization.getFullOrganization(),
-          fetch('/api/billing?context=user').then((r) => r.json()),
-        ])
-
-        return {
-          organizations: orgsResponse.data || [],
-          activeOrganization: activeOrgResponse.data,
-          billingData: billingResponse,
-        }
-      },
-      staleTime: 30 * 1000,
-    })
-  }
-
-  const prefetchSSO = () => {
-    queryClient.prefetchQuery({
-      queryKey: ssoKeys.providers(),
-      queryFn: async () => {
-        const response = await fetch('/api/auth/sso/providers')
-        if (!response.ok) {
-          throw new Error('Failed to fetch SSO providers')
-        }
-        return response.json()
-      },
-      staleTime: 5 * 60 * 1000, // 5 minutes
-    })
-  }
-
-  const handleHomepageClick = () => {
-    window.location.href = '/?from=settings'
-  }
-
-  return (
-    <div className='h-full overflow-y-auto px-2 py-4'>
-      {navigationItems.map((item) => (
-        <div key={item.id} className='mb-1'>
-          <button
-            onMouseEnter={() => {
-              switch (item.id) {
-                case 'general':
-                  prefetchGeneral()
-                  break
-                case 'subscription':
-                  prefetchSubscription()
-                  break
-                case 'team':
-                  prefetchOrganization()
-                  break
-                case 'sso':
-                  prefetchSSO()
-                  break
-                default:
-                  break
-              }
-            }}
-            onClick={() => onSectionChange(item.id)}
-            data-section={item.id}
-            className={cn(
-              'group flex h-9 w-full cursor-pointer items-center rounded-[8px] px-2 py-2 font-medium font-sans text-sm transition-colors',
-              activeSection === item.id ? 'bg-muted' : 'hover:bg-muted'
-            )}
-          >
-            <item.icon
-              className={cn(
-                'mr-2 h-[14px] w-[14px] flex-shrink-0 transition-colors',
-                activeSection === item.id
-                  ? 'text-foreground'
-                  : 'text-muted-foreground group-hover:text-foreground'
-              )}
-            />
-            <span
-              className={cn(
-                'min-w-0 flex-1 select-none truncate pr-1 text-left transition-colors',
-                activeSection === item.id
-                  ? 'text-foreground'
-                  : 'text-muted-foreground group-hover:text-foreground'
-              )}
-            >
-              {item.label}
-            </span>
-          </button>
-        </div>
-      ))}
-
-      {/* Homepage link */}
-      {isHosted && (
-        <div className='mb-1'>
-          <button
-            onClick={handleHomepageClick}
-            className='group flex h-9 w-full cursor-pointer items-center rounded-[8px] px-2 py-2 font-medium font-sans text-sm transition-colors hover:bg-muted'
-          >
-            <Home className='mr-2 h-[14px] w-[14px] flex-shrink-0 text-muted-foreground transition-colors group-hover:text-foreground' />
-            <span className='min-w-0 flex-1 select-none truncate pr-1 text-left text-muted-foreground transition-colors group-hover:text-foreground'>
-              Homepage
-            </span>
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
index 842ccb678cc..42df6a7eb68 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
@@ -472,7 +472,7 @@ export function SSO() {
         tabIndex={-1}
         readOnly
       />
-      <div className='flex-1 overflow-y-auto px-6 pt-4 pb-4'>
+      <div className='flex-1 overflow-y-auto'>
         <div className='space-y-6'>
           {showStatus ? (
             <div className='space-y-4'>
@@ -1003,7 +1003,7 @@ export function SSO() {
 function SsoSkeleton() {
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex-1 overflow-y-auto px-6 pt-4 pb-4'>
+      <div className='flex-1 overflow-y-auto'>
         <div className='space-y-3'>
           {/* Provider type toggle */}
           <div className='space-y-1'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
index 4b6d2c63011..bee5da723b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
@@ -64,7 +64,7 @@ interface SubscriptionProps {
  */
 function SubscriptionSkeleton() {
   return (
-    <div className='px-6 pt-4 pb-4'>
+    <div>
       <div className='flex flex-col gap-2'>
         {/* Current Plan & Usage Header */}
         <div className='mb-2'>
@@ -363,7 +363,7 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
   }
 
   return (
-    <div className='px-6 pt-4 pb-4'>
+    <div>
       <div className='flex flex-col gap-2'>
         {/* Current Plan & Usage Overview */}
         <div className='mb-2'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
index cc8333a47e0..b578a75b4c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -42,7 +42,7 @@ export function NoOrganizationView({
 }: NoOrganizationViewProps) {
   if (hasTeamPlan || hasEnterprisePlan) {
     return (
-      <div className='px-6 pt-4 pb-4'>
+      <div>
         <div className='flex flex-col gap-6'>
           {/* Header - matching settings page style */}
           <div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
index 5ddb240cbe2..ec0b9e6f8c7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
@@ -282,7 +282,7 @@ export function TeamManagement() {
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
     return (
       <div className='flex h-full flex-col'>
-        <div className='flex flex-1 flex-col overflow-y-auto px-6 pt-4 pb-4'>
+        <div className='flex flex-1 flex-col overflow-y-auto'>
           {/* Team Seats Overview */}
           <div className='mb-4'>
             <div className='rounded-[8px] border bg-background p-4 shadow-xs'>
@@ -366,7 +366,7 @@ export function TeamManagement() {
 
   return (
     <div className='flex h-full flex-col'>
-      <div className='flex flex-1 flex-col overflow-y-auto px-6 pt-4 pb-4'>
+      <div className='flex flex-1 flex-col overflow-y-auto'>
         {/* Seats Overview - Full Width */}
         {adminOrOwner && (
           <div className='mb-4'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
similarity index 97%
rename from apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts
rename to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
index a2e1d109396..df76c7c492e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/account/hooks/use-profile-picture-upload.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload.ts
@@ -11,6 +11,10 @@ interface UseProfilePictureUploadProps {
   currentImage?: string | null
 }
 
+/**
+ * Hook for handling profile picture upload functionality.
+ * Manages file validation, preview generation, and server upload.
+ */
 export function useProfilePictureUpload({
   onUpload,
   onError,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
index 3330879cf23..ff9fc696f54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
@@ -1,12 +1,41 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
-import { Modal, ModalContent, ModalDescription, ModalTitle } from '@/components/emcn'
-import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { useQueryClient } from '@tanstack/react-query'
+import {
+  Bot,
+  CreditCard,
+  FileCode,
+  Files,
+  Home,
+  Key,
+  LogIn,
+  Palette,
+  Server,
+  Settings,
+  Users,
+  Waypoints,
+  Wrench,
+} from 'lucide-react'
+import {
+  SModal,
+  SModalContent,
+  SModalMain,
+  SModalMainBody,
+  SModalMainHeader,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarItem,
+  SModalSidebarSection,
+} from '@/components/emcn'
+import { useSession } from '@/lib/auth/auth-client'
+import { getSubscriptionStatus } from '@/lib/billing/client'
+import { isHosted } from '@/lib/core/config/environment'
 import { createLogger } from '@/lib/logs/console/logger'
+import { getUserRole } from '@/lib/workspaces/organization'
 import {
-  Account,
   ApiKeys,
   Copilot,
   Credentials,
@@ -15,19 +44,21 @@ import {
   FileUploads,
   General,
   MCP,
-  Privacy,
-  SettingsNavigation,
   SSO,
   Subscription,
   TeamManagement,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components'
 import { CreatorProfile } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile'
-import { useGeneralSettings } from '@/hooks/queries/general-settings'
-import { useOrganizations } from '@/hooks/queries/organization'
+import { generalSettingsKeys, useGeneralSettings } from '@/hooks/queries/general-settings'
+import { organizationKeys, useOrganizations } from '@/hooks/queries/organization'
+import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
+import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
 
 const logger = createLogger('SettingsModal')
 
-const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
+// TODO: Remove this
+// const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
+const isBillingEnabled = true
 
 interface SettingsModalProps {
   open: boolean
@@ -37,7 +68,6 @@ interface SettingsModalProps {
 type SettingsSection =
   | 'general'
   | 'environment'
-  | 'account'
   | 'creator-profile'
   | 'credentials'
   | 'apikeys'
@@ -45,18 +75,122 @@ type SettingsSection =
   | 'subscription'
   | 'team'
   | 'sso'
-  | 'privacy'
   | 'copilot'
   | 'mcp'
   | 'custom-tools'
 
+type NavigationItem = {
+  id: SettingsSection
+  label: string
+  icon: React.ComponentType<{ className?: string }>
+  hideWhenBillingDisabled?: boolean
+  requiresTeam?: boolean
+  requiresEnterprise?: boolean
+  requiresOwner?: boolean
+  requiresHosted?: boolean
+}
+
+const allNavigationItems: NavigationItem[] = [
+  { id: 'general', label: 'General', icon: Settings },
+  { id: 'credentials', label: 'Integrations', icon: Waypoints },
+  { id: 'mcp', label: 'MCP Servers', icon: Server },
+  { id: 'custom-tools', label: 'Custom Tools', icon: Wrench },
+  { id: 'environment', label: 'Environment', icon: FileCode },
+  { id: 'creator-profile', label: 'Creator Profile', icon: Palette },
+  { id: 'apikeys', label: 'API Keys', icon: Key },
+  { id: 'files', label: 'Files', icon: Files },
+  { id: 'copilot', label: 'Copilot', icon: Bot, requiresHosted: true },
+  { id: 'subscription', label: 'Subscription', icon: CreditCard, hideWhenBillingDisabled: true },
+  { id: 'team', label: 'Team', icon: Users, hideWhenBillingDisabled: true, requiresTeam: true },
+  {
+    id: 'sso',
+    label: 'Single Sign-On',
+    icon: LogIn,
+    requiresTeam: true,
+    requiresEnterprise: true,
+    requiresOwner: true,
+  },
+]
+
 export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   const [activeSection, setActiveSection] = useState<SettingsSection>('general')
+  const { data: session } = useSession()
+  const queryClient = useQueryClient()
   const { data: organizationsData } = useOrganizations()
+  const { data: subscriptionData } = useSubscriptionData()
+  const { data: ssoProvidersData, isLoading: isLoadingSSO } = useSSOProviders()
+
   const activeOrganization = organizationsData?.activeOrganization
   const environmentCloseHandler = useRef<((open: boolean) => void) | null>(null)
   const credentialsCloseHandler = useRef<((open: boolean) => void) | null>(null)
 
+  const userEmail = session?.user?.email
+  const userId = session?.user?.id
+  const userRole = getUserRole(activeOrganization, userEmail)
+  const isOwner = userRole === 'owner'
+  const isAdmin = userRole === 'admin'
+  const canManageSSO = isOwner || isAdmin
+  const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
+  const hasEnterprisePlan = subscriptionStatus.isEnterprise
+  const hasOrganization = !!activeOrganization?.id
+
+  // Memoize SSO provider ownership check
+  const isSSOProviderOwner = useMemo(() => {
+    if (isHosted) return null
+    if (!userId || isLoadingSSO) return null
+    return ssoProvidersData?.providers?.some((p: any) => p.userId === userId) || false
+  }, [userId, ssoProvidersData?.providers, isLoadingSSO])
+
+  // Memoize navigation items to avoid filtering on every render
+  const navigationItems = useMemo(() => {
+    return allNavigationItems.filter((item) => {
+      if (item.hideWhenBillingDisabled && !isBillingEnabled) {
+        return false
+      }
+
+      if (item.requiresTeam) {
+        const isMember = userRole === 'member' || isAdmin
+        const hasTeamPlan = subscriptionStatus.isTeam || subscriptionStatus.isEnterprise
+
+        if (isMember) return true
+        if (isOwner && hasTeamPlan) return true
+
+        return false
+      }
+
+      if (item.requiresEnterprise && !hasEnterprisePlan) {
+        return false
+      }
+
+      if (item.requiresHosted && !isHosted) {
+        return false
+      }
+
+      if (item.id === 'sso') {
+        if (isHosted) {
+          return hasOrganization && hasEnterprisePlan && canManageSSO
+        }
+        return isSSOProviderOwner === true
+      }
+
+      if (item.requiresOwner && !isOwner) {
+        return false
+      }
+
+      return true
+    })
+  }, [
+    hasOrganization,
+    hasEnterprisePlan,
+    canManageSSO,
+    isSSOProviderOwner,
+    isOwner,
+    isAdmin,
+    userRole,
+    subscriptionStatus.isTeam,
+    subscriptionStatus.isEnterprise,
+  ])
+
   // Memoized callbacks to prevent infinite loops in child components
   const registerEnvironmentCloseHandler = useCallback((handler: (open: boolean) => void) => {
     environmentCloseHandler.current = handler
@@ -67,7 +201,6 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   }, [])
 
   // React Query hook automatically loads and syncs settings
-  // No need for manual loading logic - placeholderData provides instant UI
   useGeneralSettings()
 
   useEffect(() => {
@@ -96,6 +229,101 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     }
   }, [activeSection])
 
+  // Prefetch functions for React Query
+  const prefetchGeneral = () => {
+    queryClient.prefetchQuery({
+      queryKey: generalSettingsKeys.settings(),
+      queryFn: async () => {
+        const response = await fetch('/api/users/me/settings')
+        if (!response.ok) {
+          throw new Error('Failed to fetch general settings')
+        }
+        const { data } = await response.json()
+        return {
+          autoConnect: data.autoConnect ?? true,
+          showTrainingControls: data.showTrainingControls ?? false,
+          superUserModeEnabled: data.superUserModeEnabled ?? true,
+          theme: data.theme || 'system',
+          telemetryEnabled: data.telemetryEnabled ?? true,
+          billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
+        }
+      },
+      staleTime: 60 * 60 * 1000,
+    })
+  }
+
+  const prefetchSubscription = () => {
+    queryClient.prefetchQuery({
+      queryKey: subscriptionKeys.user(),
+      queryFn: async () => {
+        const response = await fetch('/api/billing?context=user')
+        if (!response.ok) {
+          throw new Error('Failed to fetch subscription data')
+        }
+        return response.json()
+      },
+      staleTime: 30 * 1000,
+    })
+  }
+
+  const prefetchOrganization = () => {
+    queryClient.prefetchQuery({
+      queryKey: organizationKeys.lists(),
+      queryFn: async () => {
+        const { client } = await import('@/lib/auth/auth-client')
+        const [orgsResponse, activeOrgResponse, billingResponse] = await Promise.all([
+          client.organization.list(),
+          client.organization.getFullOrganization(),
+          fetch('/api/billing?context=user').then((r) => r.json()),
+        ])
+
+        return {
+          organizations: orgsResponse.data || [],
+          activeOrganization: activeOrgResponse.data,
+          billingData: billingResponse,
+        }
+      },
+      staleTime: 30 * 1000,
+    })
+  }
+
+  const prefetchSSO = () => {
+    queryClient.prefetchQuery({
+      queryKey: ssoKeys.providers(),
+      queryFn: async () => {
+        const response = await fetch('/api/auth/sso/providers')
+        if (!response.ok) {
+          throw new Error('Failed to fetch SSO providers')
+        }
+        return response.json()
+      },
+      staleTime: 5 * 60 * 1000,
+    })
+  }
+
+  const handlePrefetch = (id: SettingsSection) => {
+    switch (id) {
+      case 'general':
+        prefetchGeneral()
+        break
+      case 'subscription':
+        prefetchSubscription()
+        break
+      case 'team':
+        prefetchOrganization()
+        break
+      case 'sso':
+        prefetchSSO()
+        break
+      default:
+        break
+    }
+  }
+
+  const handleHomepageClick = () => {
+    window.location.href = '/?from=settings'
+  }
+
   // Handle dialog close - delegate to environment component if it's active
   const handleDialogOpenChange = (newOpen: boolean) => {
     if (!newOpen && activeSection === 'environment' && environmentCloseHandler.current) {
@@ -108,113 +336,73 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   }
 
   return (
-    <Modal open={open} onOpenChange={handleDialogOpenChange}>
-      <ModalContent className='flex h-[70vh] w-full max-w-[840px] flex-col gap-0 p-0'>
+    <SModal open={open} onOpenChange={handleDialogOpenChange}>
+      <SModalContent>
         <VisuallyHidden.Root>
-          <ModalTitle>Settings</ModalTitle>
+          <DialogPrimitive.Title>Settings</DialogPrimitive.Title>
         </VisuallyHidden.Root>
         <VisuallyHidden.Root>
-          <ModalDescription>
+          <DialogPrimitive.Description>
             Configure your workspace settings, environment variables, credentials, and preferences
-          </ModalDescription>
+          </DialogPrimitive.Description>
         </VisuallyHidden.Root>
-        <div className='flex flex-col border-[var(--surface-11)] border-b px-[16px] py-[12px]'>
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)] dark:text-[var(--text-primary)]'>
-            Settings
-          </h2>
-        </div>
-
-        <div className='flex min-h-0 flex-1'>
-          {/* Navigation Sidebar */}
-          <div className='w-[180px] border-[var(--surface-11)] border-r'>
-            <SettingsNavigation
-              activeSection={activeSection}
-              onSectionChange={setActiveSection}
-              hasOrganization={!!activeOrganization?.id}
-            />
-          </div>
-
-          {/* Content Area */}
-          <div className='flex-1 overflow-y-auto'>
-            {activeSection === 'general' && (
-              <div className='h-full'>
-                <General />
-              </div>
+
+        <SModalSidebar>
+          <SModalSidebarHeader>Settings</SModalSidebarHeader>
+          <SModalSidebarSection>
+            {navigationItems.map((item) => (
+              <SModalSidebarItem
+                key={item.id}
+                active={activeSection === item.id}
+                icon={<item.icon />}
+                onMouseEnter={() => handlePrefetch(item.id)}
+                onClick={() => setActiveSection(item.id)}
+                data-section={item.id}
+              >
+                {item.label}
+              </SModalSidebarItem>
+            ))}
+
+            {isHosted && (
+              <SModalSidebarItem icon={<Home />} onClick={handleHomepageClick}>
+                Homepage
+              </SModalSidebarItem>
             )}
+          </SModalSidebarSection>
+        </SModalSidebar>
+
+        <SModalMain>
+          <SModalMainHeader>
+            {navigationItems.find((item) => item.id === activeSection)?.label || activeSection}
+          </SModalMainHeader>
+          <SModalMainBody>
+            {activeSection === 'general' && <General onOpenChange={onOpenChange} />}
             {activeSection === 'environment' && (
-              <div className='h-full'>
-                <EnvironmentVariables
-                  onOpenChange={onOpenChange}
-                  registerCloseHandler={registerEnvironmentCloseHandler}
-                />
-              </div>
-            )}
-            {activeSection === 'account' && (
-              <div className='h-full'>
-                <Account onOpenChange={onOpenChange} />
-              </div>
-            )}
-            {activeSection === 'creator-profile' && (
-              <div className='h-full'>
-                <CreatorProfile />
-              </div>
+              <EnvironmentVariables
+                onOpenChange={onOpenChange}
+                registerCloseHandler={registerEnvironmentCloseHandler}
+              />
             )}
+            {activeSection === 'creator-profile' && <CreatorProfile />}
             {activeSection === 'credentials' && (
-              <div className='h-full'>
-                <Credentials
-                  onOpenChange={onOpenChange}
-                  registerCloseHandler={registerCredentialsCloseHandler}
-                />
-              </div>
-            )}
-            {activeSection === 'apikeys' && (
-              <div className='h-full'>
-                <ApiKeys onOpenChange={onOpenChange} />
-              </div>
-            )}
-            {activeSection === 'files' && (
-              <div className='h-full'>
-                <FileUploads />
-              </div>
+              <Credentials
+                onOpenChange={onOpenChange}
+                registerCloseHandler={registerCredentialsCloseHandler}
+              />
             )}
+            {activeSection === 'apikeys' && <ApiKeys onOpenChange={onOpenChange} />}
+            {activeSection === 'files' && <FileUploads />}
             {isBillingEnabled && activeSection === 'subscription' && (
-              <div className='h-full'>
-                <Subscription onOpenChange={onOpenChange} />
-              </div>
-            )}
-            {isBillingEnabled && activeSection === 'team' && (
-              <div className='h-full'>
-                <TeamManagement />
-              </div>
-            )}
-            {activeSection === 'sso' && (
-              <div className='h-full'>
-                <SSO />
-              </div>
-            )}
-            {activeSection === 'copilot' && (
-              <div className='h-full'>
-                <Copilot />
-              </div>
-            )}
-            {activeSection === 'privacy' && (
-              <div className='h-full'>
-                <Privacy />
-              </div>
-            )}
-            {activeSection === 'mcp' && (
-              <div className='h-full'>
-                <MCP />
-              </div>
-            )}
-            {activeSection === 'custom-tools' && (
-              <div className='h-full'>
-                <CustomTools />
-              </div>
+              <Subscription onOpenChange={onOpenChange} />
             )}
-          </div>
-        </div>
-      </ModalContent>
-    </Modal>
+            {isBillingEnabled && activeSection === 'team' && <TeamManagement />}
+            {activeSection === 'sso' && <SSO />}
+            {activeSection === 'copilot' && <Copilot />}
+            {activeSection === 'mcp' && <MCP />}
+            {activeSection === 'custom-tools' && <CustomTools />}
+          </SModalMainBody>
+        </SModalMain>
+      </SModalContent>
+    </SModal>
   )
 }
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 553d165e1d2..829cd918607 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -11,9 +11,9 @@ const buttonVariants = cva(
           'bg-[var(--surface-5)] dark:bg-[var(--surface-5)] hover:bg-[var(--surface-9)] dark:hover:bg-[var(--surface-9)]',
         active:
           'bg-[var(--surface-9)] dark:bg-[var(--surface-9)] hover:bg-[var(--surface-11)] dark:hover:bg-[var(--surface-11)] dark:text-[var(--text-primary)] text-[var(--text-primary)]',
-        '3d': 'text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)] border-t border-l border-r border-[#303030] dark:border-[#303030] shadow-[0_2px_0_0_rgba(48,48,48,1)] hover:shadow-[0_4px_0_0_rgba(48,48,48,1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
+        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-strong)] shadow-[0_2px_0_0_var(--border-strong)] hover:shadow-[0_4px_0_0_var(--border-strong)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]',
         outline:
-          'border border-[#727272] bg-[var(--border-strong)] hover:bg-[var(--surface-11)] dark:border-[#727272] dark:bg-[var(--border-strong)] dark:hover:bg-[var(--surface-11)]',
+          'border border-[var(--text-muted)] bg-[var(--border-strong)] hover:bg-[var(--surface-11)]',
         primary:
           'bg-[var(--brand-400)] dark:bg-[var(--brand-400)] dark:text-[var(--text-primary)] text-[var(--text-primary)] hover:brightness-110 hover:text-[var(--text-primary)] hover:dark:text-[var(--text-primary)]',
         secondary:
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index 64b05731b2d..d9829ab9fe2 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -19,15 +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] py-[6px] font-sans font-medium text-sm text-[var(--text-primary)] placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
+  'flex w-full rounded-[4px] border border-[var(--surface-11)] bg-[var(--surface-6)] dark:bg-[var(--surface-9)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] dark:placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-14)] hover:bg-[var(--surface-9)] dark:hover:border-[var(--surface-13)] dark:hover:bg-[var(--surface-11)]',
   {
     variants: {
       variant: {
         default: '',
       },
+      size: {
+        default: 'py-[6px] text-sm',
+        sm: 'py-[5px] text-[12px]',
+      },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
   }
 )
@@ -81,6 +86,12 @@ export interface ComboboxProps
   error?: string | null
   /** Callback when popover open state changes */
   onOpenChange?: (open: boolean) => void
+  /** Size variant */
+  size?: 'default' | 'sm'
+  /** Dropdown alignment */
+  align?: 'start' | 'center' | 'end'
+  /** Dropdown width - 'trigger' matches trigger width, or provide a pixel value */
+  dropdownWidth?: 'trigger' | number
 }
 
 /**
@@ -93,6 +104,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
     {
       className,
       variant,
+      size,
       options,
       value,
       multiSelectValues,
@@ -110,6 +122,8 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
       isLoading = false,
       error = null,
       onOpenChange,
+      align = 'start',
+      dropdownWidth = 'trigger',
       ...props
     },
     ref
@@ -396,7 +410,7 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                   aria-disabled={disabled}
                   tabIndex={disabled ? -1 : 0}
                   className={cn(
-                    comboboxVariants({ variant }),
+                    comboboxVariants({ variant, size }),
                     'relative cursor-pointer items-center justify-between',
                     className
                   )}
@@ -430,9 +444,13 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
 
           <PopoverContent
             side='bottom'
-            align='start'
+            align={align}
             sideOffset={4}
-            className='w-[var(--radix-popover-trigger-width)] rounded-[6px] border border-[var(--surface-11)] p-0'
+            className={cn(
+              'rounded-[6px] border border-[var(--surface-11)] p-0',
+              dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
+            )}
+            style={typeof dropdownWidth === 'number' ? { width: `${dropdownWidth}px` } : undefined}
             onOpenAutoFocus={(e) => {
               e.preventDefault()
             }}
@@ -504,7 +522,8 @@ const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(
                           }}
                           onMouseEnter={() => setHighlightedIndex(index)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] py-[6px] font-medium font-sans text-sm',
+                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[8px] font-medium font-sans',
+                            size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
                             'hover:bg-[var(--surface-11)]',
                             (isHighlighted || isSelected) && 'bg-[var(--surface-11)]'
                           )}
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index b4164136cff..360217a8e87 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -42,5 +42,21 @@ export {
   PopoverTrigger,
   usePopoverContext,
 } from './popover/popover'
+export {
+  SModal,
+  SModalClose,
+  SModalContent,
+  SModalMain,
+  SModalMainBody,
+  SModalMainHeader,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarItem,
+  type SModalSidebarItemProps,
+  SModalSidebarSection,
+  SModalSidebarSectionTitle,
+  SModalTrigger,
+} from './s-modal/s-modal'
+export { Switch } from './switch/switch'
 export { Textarea } from './textarea/textarea'
 export { Tooltip } from './tooltip/tooltip'
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index eeb5dbbfb67..fa871d56d2d 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -18,7 +18,7 @@ function Label({ className, ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       className={cn(
-        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 dark:text-[var(--text-primary)]',
+        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
index fc8199ac45f..a573e09c603 100644
--- a/apps/sim/components/emcn/components/modal-new/modal.tsx
+++ b/apps/sim/components/emcn/components/modal-new/modal.tsx
@@ -1,6 +1,7 @@
 /**
- * Compositional modal component with optional sidebar and tabs.
+ * Compositional modal component with optional tabs.
  * Uses Radix UI Dialog and Tabs primitives for accessibility.
+ * For sidebar modals, use `sidebar-modal.tsx` instead.
  *
  * @example
  * ```tsx
@@ -8,19 +9,18 @@
  * <Modal>
  *   <ModalTrigger>Open</ModalTrigger>
  *   <ModalContent>
- *     <ModalHeader>
- *       <ModalTitle>Title</ModalTitle>
- *     </ModalHeader>
+ *     <ModalHeader>Title</ModalHeader>
+ *     <ModalBody>Content here</ModalBody>
+ *     <ModalFooter>
+ *       <Button>Save</Button>
+ *     </ModalFooter>
  *   </ModalContent>
  * </Modal>
  *
- * // Modal with sidebar and tabs
+ * // Modal with tabs
  * <Modal>
  *   <ModalContent>
- *     <ModalSidebar>Sidebar content</ModalSidebar>
- *     <ModalHeader>
- *       <ModalTitle>Title</ModalTitle>
- *     </ModalHeader>
+ *     <ModalHeader>Title</ModalHeader>
  *     <ModalTabs defaultValue="tab1">
  *       <ModalTabsList>
  *         <ModalTabsTrigger value="tab1">Tab 1</ModalTabsTrigger>
@@ -95,7 +95,7 @@ const ModalOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
-        'fixed inset-0 z-50 light:bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
+        'fixed inset-0 z-50 bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
         ANIMATION_CLASSES,
         className
       )}
@@ -185,15 +185,6 @@ const ModalContent = React.forwardRef<
 
 ModalContent.displayName = 'ModalContent'
 
-/**
- * Modal sidebar component. Appears on the left side of the modal.
- */
-const ModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => <div ref={ref} className={cn('', className)} {...props} />
-)
-
-ModalSidebar.displayName = 'ModalSidebar'
-
 /**
  * Modal header component for title and description.
  */
@@ -204,7 +195,7 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
       className={cn('flex items-center justify-between px-[16px] py-[10px]', className)}
       {...props}
     >
-      <DialogPrimitive.Title className='font-medium text-[#FFFFFF] text-[16px]'>
+      <DialogPrimitive.Title className='font-medium text-[16px] text-[var(--text-primary)]'>
         {children}
       </DialogPrimitive.Title>
       <DialogPrimitive.Close asChild>
@@ -353,7 +344,7 @@ const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     <div
       ref={ref}
       className={cn(
-        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[#232323] px-[14px] py-[10px]',
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[var(--surface-2)] px-[14px] py-[10px]',
         className
       )}
       {...props}
@@ -371,7 +362,7 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[#232323] px-[16px] py-[10px]',
+        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[var(--surface-2)] px-[16px] py-[10px]',
         className
       )}
       {...props}
@@ -385,7 +376,6 @@ export {
   Modal,
   ModalTrigger,
   ModalContent,
-  ModalSidebar,
   ModalHeader,
   ModalTitle,
   ModalDescription,
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
new file mode 100644
index 00000000000..40a238a9b1f
--- /dev/null
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -0,0 +1,273 @@
+/**
+ * Sidebar modal variant with navigation sidebar and main content area.
+ *
+ * @example
+ * ```tsx
+ * <SModal>
+ *   <SModalContent>
+ *     <SModalSidebar>
+ *       <SModalSidebarHeader>Settings</SModalSidebarHeader>
+ *       <SModalSidebarSection>
+ *         <SModalSidebarSectionTitle>Account</SModalSidebarSectionTitle>
+ *         <SModalSidebarItem icon={<User />} active>Profile</SModalSidebarItem>
+ *         <SModalSidebarItem icon={<Key />}>Security</SModalSidebarItem>
+ *       </SModalSidebarSection>
+ *     </SModalSidebar>
+ *     <SModalMain>
+ *       <SModalMainHeader>Profile</SModalMainHeader>
+ *       <SModalMainBody>Content here</SModalMainBody>
+ *     </SModalMain>
+ *   </SModalContent>
+ * </SModal>
+ * ```
+ */
+
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '../button/button'
+import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal-new/modal'
+
+const ANIMATION_CLASSES =
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+
+const CONTENT_ANIMATION_CLASSES =
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+
+/**
+ * Root sidebar modal component.
+ */
+const SModal = Modal
+
+/**
+ * Trigger element that opens the modal.
+ */
+const SModalTrigger = DialogPrimitive.Trigger
+
+/**
+ * Close element that closes the modal.
+ */
+const SModalClose = DialogPrimitive.Close
+
+/**
+ * Modal content with horizontal flex layout.
+ */
+const SModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(({ className, children, style, ...props }, ref) => {
+  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsInteractionReady(true), 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          ANIMATION_CLASSES,
+          CONTENT_ANIMATION_CLASSES,
+          'fixed top-[50%] left-[50%] z-50 flex h-[557px] w-[720px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          className
+        )}
+        style={style}
+        onInteractOutside={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          const target = e.target as Element
+          if (target.closest('[role="dialog"]')) {
+            e.preventDefault()
+          }
+        }}
+        onEscapeKeyDown={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          e.stopPropagation()
+        }}
+        onPointerDown={(e) => {
+          e.stopPropagation()
+        }}
+        onPointerUp={(e) => {
+          e.stopPropagation()
+        }}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
+
+SModalContent.displayName = 'SModalContent'
+
+/**
+ * Sidebar container.
+ */
+const SModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex w-[166px] flex-col py-[12px]', className)} {...props} />
+  )
+)
+
+SModalSidebar.displayName = 'SModalSidebar'
+
+/**
+ * Sidebar header with title.
+ */
+const SModalSidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'mb-[20px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+SModalSidebarHeader.displayName = 'SModalSidebarHeader'
+
+/**
+ * Sidebar section container. Groups related items.
+ */
+const SModalSidebarSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col gap-[4px] px-[12px] [&+&]:mt-[12px]', className)}
+      {...props}
+    />
+  )
+)
+
+SModalSidebarSection.displayName = 'SModalSidebarSection'
+
+/**
+ * Sidebar section title.
+ */
+const SModalSidebarSectionTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn('mb-[4px] font-medium text-[12px] text-[var(--text-muted)]', className)}
+    {...props}
+  />
+))
+
+SModalSidebarSectionTitle.displayName = 'SModalSidebarSectionTitle'
+
+export interface SModalSidebarItemProps extends React.ComponentPropsWithoutRef<typeof Button> {
+  /** Whether the item is currently active/selected */
+  active?: boolean
+  /** Icon element to display */
+  icon?: React.ReactNode
+}
+
+/**
+ * Sidebar item with icon and text. Uses Button component with ghost variant.
+ */
+function SModalSidebarItem({
+  className,
+  active,
+  icon,
+  children,
+  ...props
+}: SModalSidebarItemProps) {
+  return (
+    <Button
+      variant={active ? 'active' : 'ghost'}
+      className={cn(
+        'w-full justify-start gap-[8px] rounded-[6px] text-[13px]',
+        !active &&
+          'text-[var(--text-tertiary)] hover:bg-[var(--border)] hover:text-[var(--text-primary)]',
+        className
+      )}
+      {...props}
+    >
+      {icon && (
+        <span className='h-[14px] w-[14px] flex-shrink-0 [&>svg]:h-full [&>svg]:w-full'>
+          {icon}
+        </span>
+      )}
+      {children}
+    </Button>
+  )
+}
+
+/**
+ * Main content container.
+ */
+const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex flex-1 flex-col gap-[16px] rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+SModalMain.displayName = 'SModalMain'
+
+/**
+ * Main header with title and close button.
+ */
+const SModalMainHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>
+      <span className='font-base text-[14px] text-[var(--text-muted)]'>{children}</span>
+      <DialogPrimitive.Close asChild>
+        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+          <X className='h-[16px] w-[16px]' />
+          <span className='sr-only'>Close</span>
+        </Button>
+      </DialogPrimitive.Close>
+    </div>
+  )
+)
+
+SModalMainHeader.displayName = 'SModalMainHeader'
+
+/**
+ * Main body content area.
+ */
+const SModalMainBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex-1 overflow-y-auto', className)} {...props} />
+  )
+)
+
+SModalMainBody.displayName = 'SModalMainBody'
+
+export {
+  SModal,
+  SModalTrigger,
+  SModalClose,
+  SModalContent,
+  SModalSidebar,
+  SModalSidebarHeader,
+  SModalSidebarSection,
+  SModalSidebarSectionTitle,
+  SModalSidebarItem,
+  SModalMain,
+  SModalMainHeader,
+  SModalMainBody,
+}
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
new file mode 100644
index 00000000000..5e650d46cfd
--- /dev/null
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+import { cn } from '@/lib/utils'
+
+/**
+ * Custom switch component with thin track design.
+ * Track: 28px width, 6px height, 20px border-radius
+ * Thumb: 14px diameter circle that overlaps the track
+ */
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'peer inline-flex h-[17px] w-[30px] shrink-0 cursor-pointer items-center rounded-[20px] transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      'bg-[var(--surface-12)] data-[state=checked]:bg-[var(--surface-14)]',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'pointer-events-none block h-[14px] w-[14px] rounded-full shadow-sm ring-0 transition-transform',
+        'bg-[var(--text-primary)] data-[state=checked]:bg-[var(--white)]',
+        'data-[state=checked]:translate-x-[14px] data-[state=unchecked]:translate-x-[2px]'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+
+Switch.displayName = 'Switch'
+
+export { Switch }
diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts
index 00b8066608c..13d12518344 100644
--- a/apps/sim/hooks/queries/general-settings.ts
+++ b/apps/sim/hooks/queries/general-settings.ts
@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { createLogger } from '@/lib/logs/console/logger'
+import { syncThemeToNextThemes } from '@/lib/theme-sync'
 import { useGeneralStore } from '@/stores/settings/general/store'
 
 const logger = createLogger('GeneralSettingsQuery')
@@ -17,9 +19,6 @@ export const generalSettingsKeys = {
  */
 export interface GeneralSettings {
   autoConnect: boolean
-  autoPan: boolean
-  consoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   theme: 'light' | 'dark' | 'system'
@@ -42,9 +41,6 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
 
   return {
     autoConnect: data.autoConnect ?? true,
-    autoPan: data.autoPan ?? true,
-    consoleExpandedByDefault: data.consoleExpandedByDefault ?? true,
-    showFloatingControls: data.showFloatingControls ?? true,
     showTrainingControls: data.showTrainingControls ?? false,
     superUserModeEnabled: data.superUserModeEnabled ?? true,
     theme: data.theme || 'system',
@@ -55,17 +51,15 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
 }
 
 /**
- * Sync React Query cache to Zustand store
- * This ensures the rest of the app (which uses Zustand) stays in sync
+ * Sync React Query cache to Zustand store and next-themes.
+ * This ensures the rest of the app (which uses Zustand) stays in sync.
+ * @param settings - The general settings to sync
  */
 function syncSettingsToZustand(settings: GeneralSettings) {
   const { setSettings } = useGeneralStore.getState()
 
   setSettings({
     isAutoConnectEnabled: settings.autoConnect,
-    isAutoPanEnabled: settings.autoPan,
-    isConsoleExpandedByDefault: settings.consoleExpandedByDefault,
-    showFloatingControls: settings.showFloatingControls,
     showTrainingControls: settings.showTrainingControls,
     superUserModeEnabled: settings.superUserModeEnabled,
     theme: settings.theme,
@@ -73,24 +67,27 @@ function syncSettingsToZustand(settings: GeneralSettings) {
     isBillingUsageNotificationsEnabled: settings.billingUsageNotificationsEnabled,
     isErrorNotificationsEnabled: settings.errorNotificationsEnabled,
   })
+
+  syncThemeToNextThemes(settings.theme)
 }
 
 /**
- * Hook to fetch general settings
- * Also syncs to Zustand store to keep the rest of the app in sync
+ * Hook to fetch general settings.
+ * Also syncs to Zustand store to keep the rest of the app in sync.
  */
 export function useGeneralSettings() {
   const query = useQuery({
     queryKey: generalSettingsKeys.settings(),
     queryFn: fetchGeneralSettings,
-    staleTime: 60 * 60 * 1000, // 1 hour - settings rarely change
-    placeholderData: keepPreviousData, // Show cached data immediately while refetching
+    staleTime: 60 * 60 * 1000,
+    placeholderData: keepPreviousData,
   })
 
-  // Sync to Zustand whenever React Query cache updates
-  if (query.data) {
-    syncSettingsToZustand(query.data)
-  }
+  useEffect(() => {
+    if (query.data) {
+      syncSettingsToZustand(query.data)
+    }
+  }, [query.data])
 
   return query
 }
diff --git a/apps/sim/lib/core/utils/theme.ts b/apps/sim/lib/core/utils/theme.ts
index ed28fc7104a..fb19fcf26fa 100644
--- a/apps/sim/lib/core/utils/theme.ts
+++ b/apps/sim/lib/core/utils/theme.ts
@@ -3,38 +3,31 @@
  */
 
 /**
- * Updates the theme in next-themes by dispatching a storage event
- * This works by updating localStorage and notifying next-themes of the change
- *
- * COMMENTED OUT: Theme switching disabled - dark mode is forced for workspace
+ * Updates the theme in next-themes by dispatching a storage event.
+ * This works by updating localStorage and notifying next-themes of the change.
+ * @param theme - The theme to apply: 'system', 'light', or 'dark'
  */
 export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
   if (typeof window === 'undefined') return
 
-  // COMMENTED OUT: Dark mode is forced for workspace pages
-  // // Update localStorage
-  // localStorage.setItem('sim-theme', theme)
+  localStorage.setItem('sim-theme', theme)
 
-  // // Dispatch storage event to notify next-themes
-  // window.dispatchEvent(
-  //   new StorageEvent('storage', {
-  //     key: 'sim-theme',
-  //     newValue: theme,
-  //     oldValue: localStorage.getItem('sim-theme'),
-  //     storageArea: localStorage,
-  //     url: window.location.href,
-  //   })
-  // )
+  window.dispatchEvent(
+    new StorageEvent('storage', {
+      key: 'sim-theme',
+      newValue: theme,
+      oldValue: localStorage.getItem('sim-theme'),
+      storageArea: localStorage,
+      url: window.location.href,
+    })
+  )
 
-  // // Also update the HTML class immediately for instant feedback
-  // const root = document.documentElement
-  // const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  // const actualTheme = theme === 'system' ? systemTheme : theme
+  const root = document.documentElement
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  const actualTheme = theme === 'system' ? systemTheme : theme
 
-  // // Remove existing theme classes
-  // root.classList.remove('light', 'dark')
-  // // Add new theme class
-  // root.classList.add(actualTheme)
+  root.classList.remove('light', 'dark')
+  root.classList.add(actualTheme)
 }
 
 /**
diff --git a/apps/sim/stores/execution/store.ts b/apps/sim/stores/execution/store.ts
index 6c323555672..669c79bc308 100644
--- a/apps/sim/stores/execution/store.ts
+++ b/apps/sim/stores/execution/store.ts
@@ -1,68 +1,26 @@
 import { create } from 'zustand'
-import {
-  type ExecutionActions,
-  type ExecutionState,
-  initialState,
-  type PanToBlockCallback,
-  type SetPanToBlockCallback,
-} from '@/stores/execution/types'
-import { useGeneralStore } from '@/stores/settings/general/store'
-
-// Global callback for panning to active blocks
-let panToBlockCallback: PanToBlockCallback | null = null
-
-export const setPanToBlockCallback: SetPanToBlockCallback = (callback) => {
-  panToBlockCallback = callback
-}
+import { type ExecutionActions, type ExecutionState, initialState } from '@/stores/execution/types'
 
 export const useExecutionStore = create<ExecutionState & ExecutionActions>()((set, get) => ({
   ...initialState,
 
   setActiveBlocks: (blockIds) => {
     set({ activeBlockIds: new Set(blockIds) })
-
-    // Pan to the first active block if auto-pan is enabled and we have a callback and blocks are active
-    const { autoPanDisabled } = get()
-    const isAutoPanEnabled = useGeneralStore.getState().isAutoPanEnabled
-
-    if (panToBlockCallback && !autoPanDisabled && isAutoPanEnabled && blockIds.size > 0) {
-      const firstActiveBlockId = Array.from(blockIds)[0]
-      panToBlockCallback(firstActiveBlockId)
-    }
   },
 
   setPendingBlocks: (pendingBlocks) => {
     set({ pendingBlocks })
-
-    // Pan to the first pending block if auto-pan is enabled, we have a callback, blocks are pending, and we're in debug mode
-    const { isDebugging, autoPanDisabled } = get()
-    const isAutoPanEnabled = useGeneralStore.getState().isAutoPanEnabled
-
-    if (
-      panToBlockCallback &&
-      !autoPanDisabled &&
-      isAutoPanEnabled &&
-      pendingBlocks.length > 0 &&
-      isDebugging
-    ) {
-      const firstPendingBlockId = pendingBlocks[0]
-      panToBlockCallback(firstPendingBlockId)
-    }
   },
 
   setIsExecuting: (isExecuting) => {
     set({ isExecuting })
-    // Reset auto-pan disabled state when starting execution
     if (isExecuting) {
-      set({ autoPanDisabled: false })
-      // Clear run path when starting a new execution
       set({ lastRunPath: new Map(), lastRunEdges: new Map() })
     }
   },
   setIsDebugging: (isDebugging) => set({ isDebugging }),
   setExecutor: (executor) => set({ executor }),
   setDebugContext: (debugContext) => set({ debugContext }),
-  setAutoPanDisabled: (disabled) => set({ autoPanDisabled: disabled }),
   setBlockRunStatus: (blockId, status) => {
     const { lastRunPath } = get()
     const newRunPath = new Map(lastRunPath)
diff --git a/apps/sim/stores/execution/types.ts b/apps/sim/stores/execution/types.ts
index e374595b332..3994f4aab9f 100644
--- a/apps/sim/stores/execution/types.ts
+++ b/apps/sim/stores/execution/types.ts
@@ -18,7 +18,6 @@ export interface ExecutionState {
   pendingBlocks: string[]
   executor: Executor | null
   debugContext: ExecutionContext | null
-  autoPanDisabled: boolean
   /**
    * Tracks blocks from the last execution run and their success/error status.
    * Cleared when a new run starts. Used to show run path indicators (rings on blocks).
@@ -38,7 +37,6 @@ export interface ExecutionActions {
   setPendingBlocks: (blockIds: string[]) => void
   setExecutor: (executor: Executor | null) => void
   setDebugContext: (context: ExecutionContext | null) => void
-  setAutoPanDisabled: (disabled: boolean) => void
   setBlockRunStatus: (blockId: string, status: BlockRunStatus) => void
   setEdgeRunStatus: (edgeId: string, status: EdgeRunStatus) => void
   clearRunPath: () => void
@@ -52,11 +50,6 @@ export const initialState: ExecutionState = {
   pendingBlocks: [],
   executor: null,
   debugContext: null,
-  autoPanDisabled: false,
   lastRunPath: new Map(),
   lastRunEdges: new Map(),
 }
-
-// Types for panning functionality
-export type PanToBlockCallback = (blockId: string) => void
-export type SetPanToBlockCallback = (callback: PanToBlockCallback | null) => void
diff --git a/apps/sim/stores/settings/general/store.ts b/apps/sim/stores/settings/general/store.ts
index 99d358c4a20..b63f6cc0cad 100644
--- a/apps/sim/stores/settings/general/store.ts
+++ b/apps/sim/stores/settings/general/store.ts
@@ -7,9 +7,6 @@ const logger = createLogger('GeneralStore')
 
 const initialState: General = {
   isAutoConnectEnabled: true,
-  isAutoPanEnabled: true,
-  isConsoleExpandedByDefault: true,
-  showFloatingControls: true,
   showTrainingControls: false,
   superUserModeEnabled: true,
   theme: 'system',
diff --git a/apps/sim/stores/settings/general/types.ts b/apps/sim/stores/settings/general/types.ts
index 882a87b58fe..f44f27d727c 100644
--- a/apps/sim/stores/settings/general/types.ts
+++ b/apps/sim/stores/settings/general/types.ts
@@ -1,8 +1,5 @@
 export interface General {
   isAutoConnectEnabled: boolean
-  isAutoPanEnabled: boolean
-  isConsoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   theme: 'system' | 'light' | 'dark'
@@ -19,9 +16,6 @@ export interface GeneralStore extends General {
 export type UserSettings = {
   theme: 'system' | 'light' | 'dark'
   autoConnect: boolean
-  autoPan: boolean
-  consoleExpandedByDefault: boolean
-  showFloatingControls: boolean
   showTrainingControls: boolean
   superUserModeEnabled: boolean
   telemetryEnabled: boolean
diff --git a/packages/db/schema.ts b/packages/db/schema.ts
index 5570e2af2bf..340f06e01e8 100644
--- a/packages/db/schema.ts
+++ b/packages/db/schema.ts
@@ -408,8 +408,6 @@ export const settings = pgTable('settings', {
   // General settings
   theme: text('theme').notNull().default('system'),
   autoConnect: boolean('auto_connect').notNull().default(true),
-  autoPan: boolean('auto_pan').notNull().default(true),
-  consoleExpandedByDefault: boolean('console_expanded_by_default').notNull().default(true),
 
   // Privacy settings
   telemetryEnabled: boolean('telemetry_enabled').notNull().default(true),
@@ -423,7 +421,6 @@ export const settings = pgTable('settings', {
     .default(true),
 
   // UI preferences
-  showFloatingControls: boolean('show_floating_controls').notNull().default(true),
   showTrainingControls: boolean('show_training_controls').notNull().default(false),
   superUserModeEnabled: boolean('super_user_mode_enabled').notNull().default(true),
 

From ac8d1a24dbfa7b9711ab227da4d8a0f064aa95c8 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 1 Dec 2025 00:59:22 -0800
Subject: [PATCH 12/17] improvement: emcn, settings

---
 apps/sim/app/_styles/globals.css              |   1 +
 .../create-chunk-modal/create-chunk-modal.tsx |   3 +-
 .../components/create-modal/create-modal.tsx  |   3 +-
 .../deploy-modal/components/chat/chat.tsx     |   2 +-
 .../components/general/general.tsx            |   2 +-
 .../components/template/template.tsx          |   2 +-
 .../components/deploy-modal/deploy-modal.tsx  |   2 +-
 .../components/code-editor/code-editor.tsx    |   6 +-
 .../custom-tool-modal/custom-tool-modal.tsx   | 356 +++----
 .../components-new/help-modal/help-modal.tsx  |   2 +-
 .../components/credentials/credentials.tsx    | 339 ++++---
 .../components/custom-tools/custom-tools.tsx  | 247 ++---
 .../components/environment/environment.tsx    | 948 ++++++++++--------
 .../components/general/general.tsx            |  10 +-
 .../mcp/components/add-server-form.tsx        | 303 ------
 .../mcp/components/form-field/form-field.tsx  |  17 +
 .../formatted-input/formatted-input.tsx       |  66 ++
 .../mcp/components/header-row/header-row.tsx  |  81 ++
 .../components/mcp/components/index.ts        |  12 +
 .../mcp-server-skeleton.tsx                   |  20 +
 .../server-list-item/server-list-item.tsx     |  54 +
 .../components/mcp/components/types.ts        |  35 +
 .../settings-modal/components/mcp/mcp.tsx     | 797 ++++++++-------
 .../settings-modal/components/mcp/types.ts    |  16 -
 .../components/invite-modal/invite-modal.tsx  |   2 +-
 .../emcn/components/modal-new/modal.tsx       | 391 --------
 .../emcn/components/modal/modal.tsx           | 407 +++++---
 .../emcn/components/s-modal/s-modal.tsx       |   6 +-
 apps/sim/lib/core/config/environment.ts       |  10 +-
 29 files changed, 1984 insertions(+), 2156 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts
 delete mode 100644 apps/sim/components/emcn/components/modal-new/modal.tsx

diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index aa0bf8b9c4b..a1438e3b218 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -233,6 +233,7 @@
     --brand-400: #8e4cfb;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
+    --brand-tertiary-2: #33c481;
     --warning: #ff6600;
 
     /* Utility */
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 f971bb19cc2..3a4449f0103 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/create-chunk-modal/create-chunk-modal.tsx
@@ -2,7 +2,8 @@
 
 import { useRef, useState } from 'react'
 import { AlertCircle, Loader2, X } from 'lucide-react'
-import { Button, Modal, ModalContent, ModalTitle, Textarea } from '@/components/emcn'
+import { Button, Textarea } from '@/components/emcn'
+import { Modal, ModalContent, ModalTitle } from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { ChunkData, DocumentData } from '@/stores/knowledge/store'
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
index fc033b3ef14..fc77a48f7ad 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-modal/create-modal.tsx
@@ -6,7 +6,8 @@ import { AlertCircle, Check, Loader2, X } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { useForm } from 'react-hook-form'
 import { z } from 'zod'
-import { Button, Input, Label, Modal, ModalContent, ModalTitle, Textarea } from '@/components/emcn'
+import { Button, Input, Label, Textarea } from '@/components/emcn'
+import { Modal, ModalContent, ModalTitle } from '@/components/emcn/components/modal/modal'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Progress } from '@/components/ui/progress'
 import { createLogger } from '@/lib/logs/console/logger'
diff --git a/apps/sim/app/workspace/[workspaceId]/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 002c956c15b..0e8008eac44 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
@@ -9,7 +9,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { Alert, AlertDescription, Skeleton } from '@/components/ui'
 import { getEnv, isTruthy } from '@/lib/env'
 import { createLogger } from '@/lib/logs/console/logger'
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 04bb3bb18cc..440370f6ac5 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
@@ -8,7 +8,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpers'
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 4f628ccf471..035e3650c1e 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
@@ -9,7 +9,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { Skeleton, TagInput } from '@/components/ui'
 import { useSession } from '@/lib/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
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 6b2158e4d16..446fc1da7c9 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
@@ -13,7 +13,7 @@ import {
   ModalTabsContent,
   ModalTabsList,
   ModalTabsTrigger,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { getEnv } from '@/lib/core/config/env'
 import { createLogger } from '@/lib/logs/console/logger'
 import { getInputFormatExample as getInputFormatExampleUtil } from '@/lib/workflows/operations/deployment-utils'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 2c68e264f89..b9795506f9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -20,6 +20,7 @@ interface CodeEditorProps {
   language: 'javascript' | 'json'
   placeholder?: string
   className?: string
+  gutterClassName?: string
   minHeight?: string
   highlightVariables?: boolean
   onKeyDown?: (e: React.KeyboardEvent) => void
@@ -36,6 +37,7 @@ export function CodeEditor({
   language,
   placeholder = '',
   className = '',
+  gutterClassName = '',
   minHeight = '360px',
   highlightVariables = true,
   onKeyDown,
@@ -180,7 +182,9 @@ export function CodeEditor({
         </Button>
       )}
 
-      <Code.Gutter width={gutterWidth}>{renderLineNumbers()}</Code.Gutter>
+      <Code.Gutter width={gutterWidth} className={gutterClassName}>
+        {renderLineNumbers()}
+      </Code.Gutter>
 
       <Code.Content paddingLeft={`${gutterWidth}px`} editorRef={editorRef}>
         <Code.Placeholder gutterWidth={gutterWidth} show={code.length === 0 && !!placeholder}>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index 2bae99d30f7..8e282bb408a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -1,14 +1,8 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
-import { AlertCircle, Code, FileJson, Wand2, X } from 'lucide-react'
+import { AlertCircle, Wand2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
-  Button as EmcnButton,
-  Modal,
-  ModalContent,
-  ModalDescription,
-  ModalFooter,
-  ModalHeader,
-  ModalTitle,
+  Button,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -16,16 +10,17 @@ import {
   PopoverScrollArea,
   PopoverSection,
 } from '@/components/emcn'
-import { Trash } from '@/components/emcn/icons/trash'
-import { Button } from '@/components/ui/button'
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTabs,
+  ModalTabsContent,
+  ModalTabsList,
+  ModalTabsTrigger,
+} from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
@@ -346,11 +341,8 @@ try {
       return false
     }
   }
-
-  const validateFunctionCode = (code: string): boolean => {
-    return true // Allow empty code
-  }
-
+  
+  /** Extracts parameters from JSON schema for autocomplete */
   const schemaParameters = useMemo(() => {
     try {
       if (!jsonSchema) return []
@@ -369,8 +361,8 @@ try {
     }
   }, [jsonSchema])
 
+  /** Memoized schema validation result */
   const isSchemaValid = useMemo(() => validateJsonSchema(jsonSchema), [jsonSchema])
-  const isCodeValid = useMemo(() => validateFunctionCode(functionCode), [functionCode])
 
   const handleSave = async () => {
     try {
@@ -835,53 +827,11 @@ try {
     }
   }
 
-  const navigationItems = [
-    {
-      id: 'schema' as const,
-      label: 'Schema',
-      icon: FileJson,
-      complete: isSchemaValid,
-    },
-    {
-      id: 'code' as const,
-      label: 'Code',
-      icon: Code,
-      complete: isCodeValid,
-    },
-  ]
-
-  useEffect(() => {
-    if (!open) return
-
-    const styleId = 'custom-tool-modal-z-index'
-    let styleEl = document.getElementById(styleId) as HTMLStyleElement
-
-    if (!styleEl) {
-      styleEl = document.createElement('style')
-      styleEl.id = styleId
-      styleEl.textContent = `
-        [data-radix-portal] [data-radix-dialog-overlay] {
-          z-index: 10000048 !important;
-        }
-      `
-      document.head.appendChild(styleEl)
-    }
-
-    return () => {
-      const el = document.getElementById(styleId)
-      if (el) {
-        el.remove()
-      }
-    }
-  }, [open])
-
   return (
     <>
-      <Dialog open={open} onOpenChange={handleClose}>
-        <DialogContent
-          className='flex h-[80vh] w-full max-w-[840px] flex-col gap-0 p-0'
-          style={{ zIndex: 10000050 }}
-          hideCloseButton
+      <Modal open={open} onOpenChange={handleClose}>
+        <ModalContent
+          className='h-[76vh] w-[840px]'
           onKeyDown={(e) => {
             if (e.key === 'Escape' && (showEnvVars || showTags || showSchemaParams)) {
               e.preventDefault()
@@ -892,57 +842,27 @@ try {
             }
           }}
         >
-          <DialogHeader className='border-b px-6 py-4'>
-            <div className='flex items-center justify-between'>
-              <DialogTitle className='font-medium text-lg'>
-                {isEditing ? 'Edit Agent Tool' : 'Create Agent Tool'}
-              </DialogTitle>
-              <EmcnButton variant='ghost' onClick={handleClose}>
-                <X className='h-4 w-4' />
-                <span className='sr-only'>Close</span>
-              </EmcnButton>
-            </div>
-            <DialogDescription className='mt-1.5'>
-              Step {activeSection === 'schema' ? '1' : '2'} of 2:{' '}
-              {activeSection === 'schema' ? 'Define schema' : 'Implement code'}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className='flex min-h-0 flex-1 flex-col overflow-hidden'>
-            <div className='flex border-b'>
-              {navigationItems.map((item) => (
-                <button
-                  key={item.id}
-                  onClick={() => setActiveSection(item.id)}
-                  className={cn(
-                    'flex items-center gap-2 border-b-2 px-6 py-3 text-sm transition-colors',
-                    'hover:bg-muted/50',
-                    activeSection === item.id
-                      ? 'border-primary font-medium text-foreground'
-                      : 'border-transparent text-muted-foreground hover:text-foreground'
-                  )}
-                >
-                  <item.icon className='h-4 w-4' />
-                  <span>{item.label}</span>
-                </button>
-              ))}
-            </div>
-
-            <div className='relative flex-1 overflow-auto px-6 pt-6 pb-12'>
-              <div
-                className={cn(
-                  'flex h-full flex-1 flex-col',
-                  activeSection === 'schema' ? 'block' : 'hidden'
-                )}
-              >
+          <ModalHeader>{isEditing ? 'Edit Agent Tool' : 'Create Agent Tool'}</ModalHeader>
+
+          <ModalTabs
+            value={activeSection}
+            onValueChange={(value) => setActiveSection(value as ToolSection)}
+            className='flex min-h-0 flex-1 flex-col'
+          >
+            <ModalTabsList activeValue={activeSection}>
+              <ModalTabsTrigger value='schema'>Schema</ModalTabsTrigger>
+              <ModalTabsTrigger value='code'>Code</ModalTabsTrigger>
+            </ModalTabsList>
+
+            <ModalBody className='min-h-0 flex-1'>
+              <ModalTabsContent value='schema'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <FileJson className='h-4 w-4' />
-                    <Label htmlFor='json-schema' className='font-medium'>
+                    <Label htmlFor='json-schema' className='font-medium text-[13px]'>
                       JSON Schema
                     </Label>
                     {schemaError && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-destructive text-xs'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{schemaError}</span>
                       </div>
@@ -950,7 +870,7 @@ try {
                   </div>
                   <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
                     {!isSchemaPromptActive && schemaPromptSummary && (
-                      <span className='text-muted-foreground text-xs italic'>
+                      <span className='text-[var(--text-tertiary)] text-xs italic'>
                         with {schemaPromptSummary}
                       </span>
                     )}
@@ -979,13 +899,12 @@ try {
                     )}
                   </div>
                 </div>
-                <div className='relative'>
-                  <CodeEditor
-                    value={jsonSchema}
-                    onChange={handleJsonSchemaChange}
-                    language='json'
-                    showWandButton={false}
-                    placeholder={`{
+                <CodeEditor
+                  value={jsonSchema}
+                  onChange={handleJsonSchemaChange}
+                  language='json'
+                  showWandButton={false}
+                  placeholder={`{
   "type": "function",
   "function": {
     "name": "addItemToOrder",
@@ -1002,35 +921,35 @@ try {
     }
   }
 }`}
-                    minHeight='360px'
-                    className={cn(
-                      schemaError && 'border-red-500',
-                      (schemaGeneration.isLoading || schemaGeneration.isStreaming) &&
-                        'cursor-not-allowed opacity-50'
-                    )}
-                    disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming} // Use disabled prop instead of readOnly
-                    onKeyDown={handleKeyDown} // Pass keydown handler
-                  />
-                </div>
-                <div className='h-6' />
-              </div>
+                  minHeight='420px'
+                  className={cn(
+                    'bg-transparent',
+                    schemaError && 'border-[var(--text-error)]',
+                    (schemaGeneration.isLoading || schemaGeneration.isStreaming) &&
+                      'cursor-not-allowed opacity-50'
+                  )}
+                  gutterClassName='bg-transparent'
+                  disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
+                  onKeyDown={handleKeyDown}
+                />
+              </ModalTabsContent>
 
-              <div
-                className={cn(
-                  'flex h-full flex-1 flex-col pb-6',
-                  activeSection === 'code' ? 'block' : 'hidden'
-                )}
-              >
+              <ModalTabsContent value='code'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Code className='h-4 w-4' />
-                    <Label htmlFor='function-code' className='font-medium'>
+                    <Label htmlFor='function-code' className='font-medium text-[13px]'>
                       Code
                     </Label>
+                    {codeError && !codeGeneration.isStreaming && (
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-xs'>
+                        <AlertCircle className='h-3 w-3 flex-shrink-0' />
+                        <span className='truncate'>{codeError}</span>
+                      </div>
+                    )}
                   </div>
                   <div className='flex min-w-0 flex-1 items-center justify-end gap-1 pr-[4px]'>
                     {!isCodePromptActive && codePromptSummary && (
-                      <span className='text-muted-foreground text-xs italic'>
+                      <span className='text-[var(--text-tertiary)] text-xs italic'>
                         with {codePromptSummary}
                       </span>
                     )}
@@ -1058,18 +977,14 @@ try {
                       />
                     )}
                   </div>
-                  {codeError &&
-                    !codeGeneration.isStreaming && ( // Hide code error while streaming
-                      <div className='ml-4 break-words text-red-600 text-sm'>{codeError}</div>
-                    )}
                 </div>
                 {schemaParameters.length > 0 && (
-                  <div className='mb-2 rounded-md bg-muted/50 p-2'>
-                    <p className='text-muted-foreground text-xs'>
+                  <div className='mb-2 rounded-[6px] border bg-[var(--surface-2)] p-2'>
+                    <p className='text-[var(--text-tertiary)] text-xs'>
                       <span className='font-medium'>Available parameters:</span>{' '}
                       {schemaParameters.map((param, index) => (
                         <span key={param.name}>
-                          <code className='rounded bg-background px-1 py-0.5 text-foreground'>
+                          <code className='rounded bg-[var(--bg)] px-1 py-0.5 text-[var(--text-primary)]'>
                             {param.name}
                           </code>
                           {index < schemaParameters.length - 1 && ', '}
@@ -1085,22 +1000,21 @@ try {
                     onChange={handleFunctionCodeChange}
                     language='javascript'
                     showWandButton={false}
-                    placeholder={
-                      '// This code will be executed when the tool is called. You can use environment variables with {{VARIABLE_NAME}}.'
-                    }
-                    minHeight='360px'
+                    placeholder={'return schemaVariable + {{environmentVariable}}'}
+                    minHeight={schemaParameters.length > 0 ? '380px' : '420px'}
                     className={cn(
-                      codeError && !codeGeneration.isStreaming ? 'border-red-500' : '',
+                      'bg-transparent',
+                      codeError && !codeGeneration.isStreaming && 'border-[var(--text-error)]',
                       (codeGeneration.isLoading || codeGeneration.isStreaming) &&
                         'cursor-not-allowed opacity-50'
                     )}
+                    gutterClassName='bg-transparent'
                     highlightVariables={true}
-                    disabled={codeGeneration.isLoading || codeGeneration.isStreaming} // Use disabled prop instead of readOnly
-                    onKeyDown={handleKeyDown} // Pass keydown handler
-                    schemaParameters={schemaParameters} // Pass schema parameters for highlighting
+                    disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
+                    onKeyDown={handleKeyDown}
+                    schemaParameters={schemaParameters}
                   />
 
-                  {/* Environment variables dropdown */}
                   {showEnvVars && (
                     <EnvVarDropdown
                       visible={showEnvVars}
@@ -1122,7 +1036,6 @@ try {
                     />
                   )}
 
-                  {/* Tags dropdown */}
                   {showTags && (
                     <TagDropdown
                       visible={showTags}
@@ -1144,7 +1057,6 @@ try {
                     />
                   )}
 
-                  {/* Schema parameters dropdown */}
                   {showSchemaParams && schemaParameters.length > 0 && (
                     <Popover
                       open={showSchemaParams}
@@ -1172,7 +1084,6 @@ try {
                         side='bottom'
                         align='start'
                         collisionPadding={6}
-                        style={{ zIndex: 100000000 }}
                         onOpenAutoFocus={(e) => e.preventDefault()}
                         onCloseAutoFocus={(e) => e.preventDefault()}
                       >
@@ -1198,7 +1109,9 @@ try {
                                 <span className='h-3 w-3 font-bold text-white text-xs'>P</span>
                               </div>
                               <span className='flex-1 truncate'>{param.name}</span>
-                              <span className='text-muted-foreground text-xs'>{param.type}</span>
+                              <span className='text-[var(--text-tertiary)] text-xs'>
+                                {param.type}
+                              </span>
                             </PopoverItem>
                           ))}
                         </PopoverScrollArea>
@@ -1206,87 +1119,92 @@ try {
                     </Popover>
                   )}
                 </div>
-                <div className='h-6' />
-              </div>
-            </div>
-          </div>
+              </ModalTabsContent>
+            </ModalBody>
+          </ModalTabs>
 
-          <DialogFooter className='mt-auto border-t px-6 py-4'>
-            <div className='flex w-full justify-between'>
+          {activeSection === 'schema' && (
+            <ModalFooter className='items-center justify-between'>
               {isEditing ? (
-                <EmcnButton
-                  className='h-[32px] gap-1 bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
+                <Button
+                  variant='default'
                   onClick={() => setShowDeleteConfirm(true)}
+                  className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
                 >
-                  <Trash className='h-4 w-4' />
                   Delete
-                </EmcnButton>
+                </Button>
               ) : (
-                <EmcnButton
-                  variant='outline'
-                  className='h-[32px] px-[12px]'
-                  onClick={() => {
-                    if (activeSection === 'code') {
-                      setActiveSection('schema')
-                    }
-                  }}
-                  disabled={activeSection === 'schema'}
+                <div />
+              )}
+              <div className='flex gap-2'>
+                <Button variant='default' onClick={handleClose}>
+                  Cancel
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={() => setActiveSection('code')}
+                  disabled={!isSchemaValid || !!schemaError}
+                >
+                  Next
+                </Button>
+              </div>
+            </ModalFooter>
+          )}
+
+          {activeSection === 'code' && (
+            <ModalFooter className='items-center justify-between'>
+              {isEditing ? (
+                <Button
+                  variant='default'
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className='bg-[var(--text-error)] text-white hover:bg-[var(--text-error)]'
                 >
+                  Delete
+                </Button>
+              ) : (
+                <Button variant='default' onClick={() => setActiveSection('schema')}>
                   Back
-                </EmcnButton>
+                </Button>
               )}
-              <div className='flex space-x-2'>
-                <EmcnButton variant='outline' className='h-[32px] px-[12px]' onClick={handleClose}>
+              <div className='flex gap-2'>
+                <Button variant='default' onClick={handleClose}>
                   Cancel
-                </EmcnButton>
-                {activeSection === 'schema' ? (
-                  <EmcnButton
-                    variant='primary'
-                    className='h-[32px] px-[12px]'
-                    onClick={() => setActiveSection('code')}
-                    disabled={!isSchemaValid || !!schemaError}
-                  >
-                    Next
-                  </EmcnButton>
-                ) : (
-                  <EmcnButton
-                    variant='primary'
-                    className='h-[32px] px-[12px]'
-                    onClick={handleSave}
-                    disabled={!isSchemaValid || !!schemaError}
-                  >
-                    {isEditing ? 'Update Tool' : 'Save Tool'}
-                  </EmcnButton>
-                )}
+                </Button>
+                <Button
+                  variant='primary'
+                  onClick={handleSave}
+                  disabled={!isSchemaValid || !!schemaError}
+                >
+                  {isEditing ? 'Update Tool' : 'Save Tool'}
+                </Button>
               </div>
-            </div>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      </Modal>
 
-      {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete custom tool?</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Custom Tool</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This will permanently delete the tool and remove it from any workflows that are using
               it. <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </ModalDescription>
-          </ModalHeader>
+            </p>
+          </ModalBody>
           <ModalFooter>
             <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
+              variant='default'
               onClick={() => setShowDeleteConfirm(false)}
               disabled={deleteToolMutation.isPending}
             >
               Cancel
             </Button>
             <Button
+              variant='primary'
               onClick={handleDelete}
               disabled={deleteToolMutation.isPending}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
+              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/components/sidebar/components-new/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
index ff82397af60..7b65d744d3b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/help-modal/help-modal.tsx
@@ -14,7 +14,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { Label } from '@/components/ui/label'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
index 5554346fbf5..a0c70351cc5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
@@ -3,8 +3,15 @@
 import { useEffect, useRef, useState } from 'react'
 import { Check, ChevronDown, ExternalLink, Search } from 'lucide-react'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/emcn'
-import { Input, Label } from '@/components/ui'
+import { Button, Label } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton } from '@/components/ui'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { OAUTH_PROVIDERS } from '@/lib/oauth/oauth'
@@ -17,6 +24,68 @@ import {
 
 const logger = createLogger('Credentials')
 
+/**
+ * Static skeleton structure matching OAUTH_PROVIDERS layout
+ * Each entry: [providerName, serviceCount]
+ */
+const SKELETON_STRUCTURE: [string, number][] = [
+  ['Google', 7],
+  ['Microsoft', 6],
+  ['GitHub', 1],
+  ['X', 1],
+  ['Confluence', 1],
+  ['Jira', 1],
+  ['Airtable', 1],
+  ['Notion', 1],
+  ['Linear', 1],
+  ['Slack', 1],
+  ['Reddit', 1],
+  ['Wealthbox', 1],
+  ['Webflow', 1],
+  ['Trello', 1],
+  ['Asana', 1],
+  ['Pipedrive', 1],
+  ['HubSpot', 1],
+  ['Salesforce', 1],
+]
+
+function CredentialsSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex w-full items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+        <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
+        <Input
+          placeholder='Search integrations...'
+          disabled
+          className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+        />
+      </div>
+
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {SKELETON_STRUCTURE.map(([providerName, serviceCount]) => (
+            <div key={providerName} className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[60px]' />
+              {Array.from({ length: serviceCount }).map((_, index) => (
+                <div key={index} className='flex items-center justify-between'>
+                  <div className='flex items-center gap-[12px]'>
+                    <Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
+                    <div className='flex flex-col justify-center gap-[1px]'>
+                      <Skeleton className='h-[14px] w-[100px]' />
+                      <Skeleton className='h-[13px] w-[200px]' />
+                    </div>
+                  </div>
+                  <Skeleton className='h-[32px] w-[72px] rounded-[6px]' />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
 interface CredentialsProps {
   onOpenChange?: (open: boolean) => void
   registerCloseHandler?: (handler: (open: boolean) => void) => void
@@ -27,12 +96,10 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
   const searchParams = useSearchParams()
   const pendingServiceRef = useRef<HTMLDivElement>(null)
 
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: services = [] } = useOAuthConnections()
+  const { data: services = [], isPending } = useOAuthConnections()
   const connectService = useConnectOAuthService()
   const disconnectService = useDisconnectOAuthService()
 
-  // Local UI state
   const [searchTerm, setSearchTerm] = useState('')
   const [pendingService, setPendingService] = useState<string | null>(null)
   const [authSuccess, setAuthSuccess] = useState(false)
@@ -40,6 +107,13 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
   const prevConnectedIdsRef = useRef<Set<string>>(new Set())
   const connectionAddedRef = useRef<boolean>(false)
 
+  // Disconnect confirmation dialog state
+  const [showDisconnectDialog, setShowDisconnectDialog] = useState(false)
+  const [serviceToDisconnect, setServiceToDisconnect] = useState<{
+    service: ServiceInfo
+    accountId: string
+  } | null>(null)
+
   // Check for OAuth callback - just show success message
   useEffect(() => {
     const code = searchParams.get('code')
@@ -116,8 +190,24 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
     }
   }
 
-  // Handle disconnect button click
-  const handleDisconnect = async (service: ServiceInfo, accountId: string) => {
+  /**
+   * Opens the disconnect confirmation dialog for a service.
+   */
+  const handleDisconnect = (service: ServiceInfo, accountId: string) => {
+    setServiceToDisconnect({ service, accountId })
+    setShowDisconnectDialog(true)
+  }
+
+  /**
+   * Confirms and executes the service disconnection.
+   */
+  const confirmDisconnect = async () => {
+    if (!serviceToDisconnect) return
+
+    setShowDisconnectDialog(false)
+    const { service, accountId } = serviceToDisconnect
+    setServiceToDisconnect(null)
+
     try {
       await disconnectService.mutateAsync({
         provider: service.providerId.split('-')[0],
@@ -176,135 +266,148 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
     }
   }
 
+  if (isPending) {
+    return <CredentialsSkeleton />
+  }
+
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Search Input */}
-      <div>
-        <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-          <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='flex w-full items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+          <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
           <Input
             placeholder='Search services...'
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
-            className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
         </div>
-      </div>
 
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-6'>
-          {/* Success message */}
-          {authSuccess && (
-            <div className='rounded-[8px] border border-green-200 bg-green-50 p-4'>
-              <div className='flex'>
-                <div className='flex-shrink-0'>
-                  <Check className='h-5 w-5 text-green-400' />
-                </div>
-                <div className='ml-3'>
-                  <p className='font-medium text-green-800 text-sm'>
-                    Account connected successfully!
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {authSuccess && (
+              <div className='flex items-center gap-[12px] rounded-[8px] border border-green-200 bg-green-50 p-[12px]'>
+                <Check className='h-4 w-4 flex-shrink-0 text-green-500' />
+                <p className='font-medium text-[13px] text-green-800'>
+                  Account connected successfully!
+                </p>
+              </div>
+            )}
+
+            {pendingService && showActionRequired && (
+              <div className='flex items-start gap-[12px] rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[12px]'>
+                <ExternalLink className='mt-0.5 h-4 w-4 flex-shrink-0 text-[var(--text-muted)]' />
+                <div className='flex flex-1 flex-col gap-[8px]'>
+                  <p className='text-[13px] text-[var(--text-muted)]'>
+                    <span className='font-medium text-[var(--text-primary)]'>Action Required:</span>{' '}
+                    Please connect your account to enable the requested features.
                   </p>
+                  <Button variant='outline' onClick={scrollToHighlightedService}>
+                    <span>Go to service</span>
+                    <ChevronDown className='h-3 w-3' />
+                  </Button>
                 </div>
               </div>
-            </div>
-          )}
+            )}
 
-          {/* Pending service message - only shown when coming from OAuth required modal */}
-          {pendingService && showActionRequired && (
-            <div className='flex items-start gap-3 rounded-[8px] border border-primary/20 bg-primary/5 p-5 text-sm shadow-sm'>
-              <div className='mt-0.5 min-w-5'>
-                <ExternalLink className='h-4 w-4 text-muted-foreground' />
-              </div>
-              <div className='flex flex-1 flex-col'>
-                <p className='text-muted-foreground'>
-                  <span className='font-medium text-foreground'>Action Required:</span> Please
-                  connect your account to enable the requested features. The required service is
-                  highlighted below.
-                </p>
-                <Button
-                  variant='outline'
-                  onClick={scrollToHighlightedService}
-                  className='mt-3 flex h-8 items-center gap-1.5 self-start border-primary/20 px-3 font-medium text-muted-foreground text-sm transition-colors hover:border-primary hover:bg-primary/10 hover:text-muted-foreground'
-                >
-                  <span>Go to service</span>
-                  <ChevronDown className='h-3.5 w-3.5' />
-                </Button>
-              </div>
-            </div>
-          )}
-
-          {/* Services list */}
-          <div className='flex flex-col gap-6'>
-            {Object.entries(filteredGroupedServices).map(([providerKey, providerServices]) => (
-              <div key={providerKey} className='flex flex-col gap-2'>
-                <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                  {OAUTH_PROVIDERS[providerKey]?.name || 'Other Services'}
-                </Label>
-                {providerServices.map((service) => (
-                  <div
-                    key={service.id}
-                    className={cn(
-                      'flex items-center justify-between gap-4',
-                      pendingService === service.id && '-m-2 rounded-[8px] bg-primary/5 p-2'
-                    )}
-                    ref={pendingService === service.id ? pendingServiceRef : undefined}
-                  >
-                    <div className='flex items-center gap-3'>
-                      <div className='flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] bg-muted'>
-                        {typeof service.icon === 'function'
-                          ? service.icon({ className: 'h-5 w-5' })
-                          : service.icon}
-                      </div>
-                      <div className='min-w-0'>
-                        <div className='flex items-center gap-2'>
-                          <span className='font-normal text-sm'>{service.name}</span>
+            <div className='flex flex-col gap-[16px]'>
+              {Object.entries(filteredGroupedServices).map(([providerKey, providerServices]) => (
+                <div key={providerKey} className='flex flex-col gap-[8px]'>
+                  <Label className='text-[12px] text-[var(--text-muted)]'>
+                    {OAUTH_PROVIDERS[providerKey]?.name || 'Other Services'}
+                  </Label>
+                  {providerServices.map((service) => (
+                    <div
+                      key={service.id}
+                      className={cn(
+                        'flex items-center justify-between',
+                        pendingService === service.id &&
+                          '-m-[8px] rounded-[8px] bg-[var(--bg)] p-[8px]'
+                      )}
+                      ref={pendingService === service.id ? pendingServiceRef : undefined}
+                    >
+                      <div className='flex items-center gap-[12px]'>
+                        <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
+                          {typeof service.icon === 'function'
+                            ? service.icon({ className: 'h-4 w-4' })
+                            : service.icon}
+                        </div>
+                        <div className='flex flex-col justify-center gap-[1px]'>
+                          <span className='font-medium text-[14px]'>{service.name}</span>
+                          {service.accounts && service.accounts.length > 0 ? (
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {service.accounts.map((a) => a.name).join(', ')}
+                            </p>
+                          ) : (
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {service.description}
+                            </p>
+                          )}
                         </div>
-                        {service.accounts && service.accounts.length > 0 ? (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {service.accounts.map((a) => a.name).join(', ')}
-                          </p>
-                        ) : (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {service.description}
-                          </p>
-                        )}
                       </div>
-                    </div>
 
-                    {service.accounts && service.accounts.length > 0 ? (
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleDisconnect(service, service.accounts![0].id)}
-                        disabled={disconnectService.isPending}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        Disconnect
-                      </Button>
-                    ) : (
-                      <Button
-                        variant='outline'
-                        onClick={() => handleConnect(service)}
-                        disabled={connectService.isPending}
-                        className='h-8'
-                      >
-                        Connect
-                      </Button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            ))}
+                      {service.accounts && service.accounts.length > 0 ? (
+                        <Button
+                          variant='ghost'
+                          onClick={() => handleDisconnect(service, service.accounts![0].id)}
+                          disabled={disconnectService.isPending}
+                        >
+                          Disconnect
+                        </Button>
+                      ) : (
+                        <Button
+                          variant='primary'
+                          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                          onClick={() => handleConnect(service)}
+                          disabled={connectService.isPending}
+                        >
+                          Connect
+                        </Button>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ))}
 
-            {/* Show message when search has no results */}
-            {searchTerm.trim() && Object.keys(filteredGroupedServices).length === 0 && (
-              <div className='py-8 text-center text-muted-foreground text-sm'>
-                No services found matching "{searchTerm}"
-              </div>
-            )}
+              {searchTerm.trim() && Object.keys(filteredGroupedServices).length === 0 && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No services found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>
-    </div>
+
+      <Modal open={showDisconnectDialog} onOpenChange={setShowDisconnectDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Disconnect Service</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to disconnect{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {serviceToDisconnect?.service.name}
+              </span>
+              ?{' '}
+              <span className='text-[var(--text-error)]'>
+                This will revoke access and you will need to reconnect to use this service.
+              </span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDisconnectDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={confirmDisconnect}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+            >
+              Disconnect
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index 09f94f7668b..0c507f66efd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -3,16 +3,14 @@
 import { useState } from 'react'
 import { Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button } from '@/components/emcn'
 import {
-  Button,
-  Label,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
+} from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
@@ -22,17 +20,14 @@ const logger = createLogger('CustomToolsSettings')
 
 function CustomToolSkeleton() {
   return (
-    <div className='flex flex-col gap-2'>
-      <Skeleton className='h-4 w-32' /> {/* Tool title */}
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-24 rounded-[8px]' /> {/* Function name */}
-          <Skeleton className='h-4 w-48' /> {/* Description */}
-        </div>
-        <div className='flex items-center gap-2'>
-          <Skeleton className='h-8 w-12' /> {/* Edit button */}
-          <Skeleton className='h-8 w-16' /> {/* Delete button */}
-        </div>
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Skeleton className='h-[14px] w-[100px]' />
+        <Skeleton className='h-[13px] w-[200px]' />
+      </div>
+      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+        <Skeleton className='h-[30px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
       </div>
     </div>
   )
@@ -42,7 +37,6 @@ export function CustomTools() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
 
-  // React Query hooks
   const { data: tools = [], isLoading, error, refetch: refetchTools } = useCustomTools(workspaceId)
   const deleteToolMutation = useDeleteCustomTool()
 
@@ -107,127 +101,97 @@ export function CustomTools() {
     refetchTools()
   }
 
+  const hasTools = tools && tools.length > 0
+  const showEmptyState = !hasTools && !showAddForm && !editingTool
+  const showNoResults = searchTerm.trim() && filteredTools.length === 0 && tools.length > 0
+
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header with Search */}
-      <div>
-        {/* Search Input */}
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
         {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
+          <Skeleton className='h-9 w-full rounded-[8px]' />
         ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-            <Input
-              placeholder='Search tools...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
+          <div className='flex items-center gap-[8px]'>
+            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+              <Search
+                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+                strokeWidth={2}
+              />
+              <Input
+                placeholder='Search tools...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              />
+            </div>
+            <Button
+              onClick={() => setShowAddForm(true)}
+              variant='primary'
+              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+            >
+              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              Add
+            </Button>
           </div>
         )}
-      </div>
 
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='space-y-2'>
-          {isLoading ? (
-            <div className='space-y-2'>
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-              <CustomToolSkeleton />
-            </div>
-          ) : error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {error instanceof Error ? error.message : 'Failed to load tools'}
-              </p>
-            </div>
-          ) : tools.length === 0 && !showAddForm && !editingTool ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Tool" below to get started
-            </div>
-          ) : (
-            <>
-              <div className='space-y-2'>
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {error ? (
+              <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
+                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  {error instanceof Error ? error.message : 'Failed to load tools'}
+                </p>
+              </div>
+            ) : isLoading ? (
+              <div className='flex flex-col gap-[8px]'>
+                <CustomToolSkeleton />
+                <CustomToolSkeleton />
+                <CustomToolSkeleton />
+              </div>
+            ) : showEmptyState ? (
+              <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+                Click "Create" above to get started
+              </div>
+            ) : (
+              <div className='flex flex-col gap-[8px]'>
                 {filteredTools.map((tool) => (
-                  <div key={tool.id} className='flex flex-col gap-2'>
-                    <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                      {tool.title}
-                    </Label>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                          <code className='font-mono text-foreground text-xs'>
-                            {tool.schema?.function?.name || 'unnamed'}
-                          </code>
-                        </div>
-                        {tool.schema?.function?.description && (
-                          <p className='truncate text-muted-foreground text-xs'>
-                            {tool.schema.function.description}
-                          </p>
-                        )}
-                      </div>
-                      <div className='flex items-center gap-2'>
-                        <Button
-                          variant='ghost'
-                          onClick={() => setEditingTool(tool.id)}
-                          className='h-8'
-                        >
-                          Edit
-                        </Button>
-                        <Button
-                          variant='ghost'
-                          onClick={() => handleDeleteClick(tool.id)}
-                          disabled={deletingTools.has(tool.id)}
-                          className='h-8'
-                        >
-                          {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
-                        </Button>
-                      </div>
+                  <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                    <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                      <span className='truncate font-medium text-[14px]'>
+                        {tool.title || 'Unnamed Tool'}
+                      </span>
+                      {tool.schema?.function?.description && (
+                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                          {tool.schema.function.description}
+                        </p>
+                      )}
+                    </div>
+                    <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                      <Button variant='ghost' onClick={() => setEditingTool(tool.id)}>
+                        Edit
+                      </Button>
+                      <Button
+                        variant='ghost'
+                        onClick={() => handleDeleteClick(tool.id)}
+                        disabled={deletingTools.has(tool.id)}
+                      >
+                        {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
+                      </Button>
                     </div>
                   </div>
                 ))}
+                {showNoResults && (
+                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                    No tools found matching "{searchTerm}"
+                  </div>
+                )}
               </div>
-
-              {/* Show message when search has no results */}
-              {searchTerm.trim() && filteredTools.length === 0 && tools.length > 0 && (
-                <div className='py-8 text-center text-muted-foreground text-sm'>
-                  No tools found matching "{searchTerm}"
-                </div>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between'>
-          {isLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <div className='w-[200px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={() => setShowAddForm(true)}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                disabled={isLoading}
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Create Tool
-              </Button>
-              <div className='text-muted-foreground text-xs'>
-                Custom tools extend agent capabilities with workspace-specific functions
-              </div>
-            </>
-          )}
+            )}
+          </div>
         </div>
       </div>
 
-      {/* Create/Edit Modal - rendered as overlay */}
       <CustomToolModal
         open={showAddForm || !!editingTool}
         onOpenChange={(open) => {
@@ -251,39 +215,30 @@ export function CustomTools() {
         }
       />
 
-      {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Delete custom tool?</ModalTitle>
-            <ModalDescription>
-              Deleting "{toolToDelete?.name}" will permanently remove this custom tool from your
-              workspace.{' '}
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete Custom Tool</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{toolToDelete?.name}</span>?{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </ModalDescription>
-          </ModalHeader>
+            </p>
+          </ModalBody>
           <ModalFooter>
-            <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
-              onClick={() => {
-                setShowDeleteDialog(false)
-                setToolToDelete(null)
-              }}
-              disabled={deleteToolMutation.isPending}
-            >
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
+              variant='primary'
               onClick={handleDeleteTool}
-              disabled={deleteToolMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
-              {deleteToolMutation.isPending ? 'Deleting...' : 'Delete'}
+              Delete
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
index 56247a0d904..415527fa89e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
@@ -3,16 +3,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Plus, Search, Share2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button, Input as EmcnInput, Tooltip } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-  Tooltip,
-} from '@/components/emcn'
+} from '@/components/emcn/components/modal/modal'
+import { Trash } from '@/components/emcn/icons/trash'
 import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -26,8 +25,14 @@ import {
 
 const logger = createLogger('EnvironmentVariables')
 
-const GRID_COLS = 'grid grid-cols-[minmax(0,1fr),minmax(0,1fr),88px] gap-4'
+const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-center'
+const ENV_VAR_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/
+const PRIMARY_BUTTON_STYLES =
+  '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
 
+/**
+ * Generates a unique row identifier by combining timestamp with an incrementing counter
+ */
 const generateRowId = (() => {
   let counter = 0
   return () => {
@@ -36,23 +41,107 @@ const generateRowId = (() => {
   }
 })()
 
+/**
+ * Creates a new empty environment variable with a unique ID
+ */
 const createEmptyEnvVar = (): UIEnvironmentVariable => ({
   key: '',
   value: '',
   id: generateRowId(),
 })
 
+/**
+ * Represents an environment variable in the UI with optional ID for tracking
+ */
 interface UIEnvironmentVariable {
   key: string
   value: string
   id?: number
 }
 
+/**
+ * Props for the EnvironmentVariables component
+ */
 interface EnvironmentVariablesProps {
+  /** Callback to handle modal open/close state changes */
   onOpenChange: (open: boolean) => void
+  /** Optional callback to register a custom close handler */
   registerCloseHandler?: (handler: (open: boolean) => void) => void
 }
 
+/**
+ * Props for the WorkspaceVariableRow component
+ */
+interface WorkspaceVariableRowProps {
+  envKey: string
+  value: string
+  renamingKey: string | null
+  pendingKeyValue: string
+  onRenameStart: (key: string) => void
+  onPendingKeyChange: (value: string) => void
+  onRenameEnd: (key: string, value: string) => void
+  onDelete: (key: string) => void
+}
+
+/**
+ * Renders a single workspace environment variable row with edit and delete capabilities
+ */
+function WorkspaceVariableRow({
+  envKey,
+  value,
+  renamingKey,
+  pendingKeyValue,
+  onRenameStart,
+  onPendingKeyChange,
+  onRenameEnd,
+  onDelete,
+}: WorkspaceVariableRowProps) {
+  return (
+    <div className={GRID_COLS}>
+      <EmcnInput
+        value={renamingKey === envKey ? pendingKeyValue : envKey}
+        onChange={(e) => {
+          if (renamingKey !== envKey) onRenameStart(envKey)
+          onPendingKeyChange(e.target.value)
+        }}
+        onBlur={() => onRenameEnd(envKey, value)}
+        name={`workspace_env_key_${envKey}_${Math.random()}`}
+        autoComplete='off'
+        autoCapitalize='off'
+        spellCheck='false'
+        readOnly
+        onFocus={(e) => e.target.removeAttribute('readOnly')}
+        className='h-9'
+      />
+      <div />
+      <EmcnInput
+        value={value ? '•'.repeat(value.length) : ''}
+        readOnly
+        autoComplete='off'
+        autoCorrect='off'
+        autoCapitalize='off'
+        spellCheck='false'
+        className='h-9'
+      />
+      <div className='ml-[8px] flex'>
+        <Tooltip.Root>
+          <Tooltip.Trigger asChild>
+            <Button variant='ghost' onClick={() => onDelete(envKey)} className='h-9 w-9'>
+              <Trash />
+            </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>Delete environment variable</Tooltip.Content>
+        </Tooltip.Root>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Environment Variables management component for handling personal and workspace-scoped variables.
+ * Provides functionality to create, edit, delete, and share environment variables between
+ * personal and workspace scopes with conflict detection.
+ */
 export function EnvironmentVariables({
   onOpenChange,
   registerCloseHandler,
@@ -60,7 +149,6 @@ export function EnvironmentVariables({
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
 
-  // React Query hooks
   const { data: personalEnvData, isLoading: isPersonalLoading } = usePersonalEnvironment()
   const { data: workspaceEnvData, isLoading: isWorkspaceLoading } = useWorkspaceEnvironment(
     workspaceId,
@@ -91,20 +179,18 @@ export function EnvironmentVariables({
   const [conflicts, setConflicts] = useState<string[]>([])
   const [renamingKey, setRenamingKey] = useState<string | null>(null)
   const [pendingKeyValue, setPendingKeyValue] = useState<string>('')
-  const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
 
+  const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const pendingClose = useRef(false)
   const initialVarsRef = useRef<UIEnvironmentVariable[]>([])
+  const hasChangesRef = useRef(false)
 
   const filteredEnvVars = useMemo(() => {
-    if (!searchTerm.trim()) {
-      return envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
-    }
-
-    return envVars
-      .map((envVar, index) => ({ envVar, originalIndex: index }))
-      .filter(({ envVar }) => envVar.key.toLowerCase().includes(searchTerm.toLowerCase()))
+    const mapped = envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
+    if (!searchTerm.trim()) return mapped
+    const term = searchTerm.toLowerCase()
+    return mapped.filter(({ envVar }) => envVar.key.toLowerCase().includes(term))
   }, [envVars, searchTerm])
 
   const filteredWorkspaceEntries = useMemo(() => {
@@ -114,23 +200,16 @@ export function EnvironmentVariables({
     return entries.filter(([key]) => key.toLowerCase().includes(term))
   }, [workspaceVars, searchTerm])
 
-  const personalHeaderMarginClass = useMemo(() => {
-    if (!searchTerm.trim()) return 'mt-8'
-    return filteredWorkspaceEntries.length > 0 ? 'mt-8' : 'mt-0'
-  }, [searchTerm, filteredWorkspaceEntries])
-
   const hasChanges = useMemo(() => {
     const initialVars = initialVarsRef.current.filter((v) => v.key || v.value)
     const currentVars = envVars.filter((v) => v.key || v.value)
-
     const initialMap = new Map(initialVars.map((v) => [v.key, v.value]))
     const currentMap = new Map(currentVars.map((v) => [v.key, v.value]))
 
     if (initialMap.size !== currentMap.size) return true
 
     for (const [key, value] of currentMap) {
-      const initialValue = initialMap.get(key)
-      if (initialValue !== value) return true
+      if (initialMap.get(key) !== value) return true
     }
 
     for (const key of initialMap.keys()) {
@@ -139,10 +218,11 @@ export function EnvironmentVariables({
 
     const before = initialWorkspaceVarsRef.current
     const after = workspaceVars
-    const beforeKeys = Object.keys(before)
-    const afterKeys = Object.keys(after)
-    if (beforeKeys.length !== afterKeys.length) return true
-    for (const key of new Set([...beforeKeys, ...afterKeys])) {
+    const allKeys = new Set([...Object.keys(before), ...Object.keys(after)])
+
+    if (Object.keys(before).length !== Object.keys(after).length) return true
+
+    for (const key of allKeys) {
       if (before[key] !== after[key]) return true
     }
 
@@ -153,9 +233,6 @@ export function EnvironmentVariables({
     return envVars.some((envVar) => !!envVar.key && Object.hasOwn(workspaceVars, envVar.key))
   }, [envVars, workspaceVars])
 
-  // Use ref to track hasChanges to break dependency chain
-  const hasChangesRef = useRef(false)
-
   useEffect(() => {
     hasChangesRef.current = hasChanges
   }, [hasChanges])
@@ -243,130 +320,150 @@ export function EnvironmentVariables({
     },
     [pendingKeyValue, renamingKey]
   )
-  const addEnvVar = () => {
-    const newVar = createEmptyEnvVar()
-    setEnvVars([...envVars, newVar])
+
+  const handleDeleteWorkspaceVar = useCallback((key: string) => {
+    setWorkspaceVars((prev) => {
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+  }, [])
+
+  const addEnvVar = useCallback(() => {
+    setEnvVars((prev) => [...prev, createEmptyEnvVar()])
     setSearchTerm('')
     setShouldScrollToBottom(true)
-  }
+  }, [])
 
-  const updateEnvVar = (index: number, field: 'key' | 'value', value: string) => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index][field] = value
-    setEnvVars(newEnvVars)
-  }
+  const updateEnvVar = useCallback((index: number, field: 'key' | 'value', value: string) => {
+    setEnvVars((prev) => {
+      const newEnvVars = [...prev]
+      newEnvVars[index][field] = value
+      return newEnvVars
+    })
+  }, [])
 
-  const removeEnvVar = (index: number) => {
-    const newEnvVars = envVars.filter((_, i) => i !== index)
-    setEnvVars(newEnvVars.length ? newEnvVars : [createEmptyEnvVar()])
-  }
+  const removeEnvVar = useCallback((index: number) => {
+    setEnvVars((prev) => {
+      const newEnvVars = prev.filter((_, i) => i !== index)
+      return newEnvVars.length ? newEnvVars : [createEmptyEnvVar()]
+    })
+  }, [])
 
-  const handleValueFocus = (index: number, e: React.FocusEvent<HTMLInputElement>) => {
+  const handleValueFocus = useCallback((index: number, e: React.FocusEvent<HTMLInputElement>) => {
     setFocusedValueIndex(index)
     e.target.scrollLeft = 0
-  }
+  }, [])
 
-  const handleValueClick = (e: React.MouseEvent<HTMLInputElement>) => {
+  const handleValueClick = useCallback((e: React.MouseEvent<HTMLInputElement>) => {
     e.preventDefault()
     e.currentTarget.scrollLeft = 0
-  }
-
-  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
-    const text = e.clipboardData.getData('text').trim()
-    if (!text) return
-
-    const lines = text.split('\n').filter((line) => line.trim())
-    if (lines.length === 0) return
-
-    e.preventDefault()
-
-    const inputType = (e.target as HTMLInputElement).getAttribute('data-input-type') as
-      | 'key'
-      | 'value'
-
-    if (inputType) {
-      const hasValidEnvVarPattern = lines.some((line) => {
-        const equalIndex = line.indexOf('=')
-        if (equalIndex === -1 || equalIndex === 0) return false
-
-        const potentialKey = line.substring(0, equalIndex).trim()
-        const envVarPattern = /^[A-Za-z_][A-Za-z0-9_]*$/
-        return envVarPattern.test(potentialKey)
+  }, [])
+
+  /**
+   * Parses a single line to extract environment variable key-value pair
+   */
+  const parseEnvVarLine = useCallback((line: string): UIEnvironmentVariable | null => {
+    const equalIndex = line.indexOf('=')
+    if (equalIndex === -1 || equalIndex === 0) return null
+
+    const potentialKey = line.substring(0, equalIndex).trim()
+    if (!ENV_VAR_PATTERN.test(potentialKey)) return null
+
+    const value = line.substring(equalIndex + 1).trim()
+    return { key: potentialKey, value, id: generateRowId() }
+  }, [])
+
+  /**
+   * Handles pasting a single value into a specific field
+   */
+  const handleSingleValuePaste = useCallback(
+    (text: string, index: number, inputType: 'key' | 'value') => {
+      setEnvVars((prev) => {
+        const newEnvVars = [...prev]
+        newEnvVars[index][inputType] = text
+        return newEnvVars
       })
+    },
+    []
+  )
 
-      if (!hasValidEnvVarPattern) {
-        handleSingleValuePaste(text, index, inputType)
-        return
+  /**
+   * Handles pasting multiple key=value pairs
+   */
+  const handleKeyValuePaste = useCallback(
+    (lines: string[]) => {
+      const parsedVars = lines
+        .map(parseEnvVarLine)
+        .filter((parsed): parsed is UIEnvironmentVariable => parsed !== null)
+        .filter(({ key, value }) => key && value)
+
+      if (parsedVars.length > 0) {
+        setEnvVars((prev) => {
+          const existingVars = prev.filter((v) => v.key || v.value)
+          return [...existingVars, ...parsedVars]
+        })
+        setShouldScrollToBottom(true)
       }
-    }
-
-    handleKeyValuePaste(lines)
-  }
-
-  const handleSingleValuePaste = (text: string, index: number, inputType: 'key' | 'value') => {
-    const newEnvVars = [...envVars]
-    newEnvVars[index][inputType] = text
-    setEnvVars(newEnvVars)
-  }
-
-  const handleKeyValuePaste = (lines: string[]) => {
-    const parsedVars = lines
-      .map((line) => {
-        const equalIndex = line.indexOf('=')
-
-        if (equalIndex === -1 || equalIndex === 0) {
-          return null
-        }
-
-        const potentialKey = line.substring(0, equalIndex).trim()
-
-        const envVarPattern = /^[A-Za-z_][A-Za-z0-9_]*$/
-
-        if (!envVarPattern.test(potentialKey)) {
-          return null
-        }
-
-        const key = potentialKey
-        const value = line.substring(equalIndex + 1).trim()
+    },
+    [parseEnvVarLine]
+  )
 
-        return {
-          key,
-          value,
-          id: generateRowId(),
+  /**
+   * Handles paste events for environment variable inputs with smart detection
+   * of key=value pairs vs single values
+   */
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent<HTMLInputElement>, index: number) => {
+      const text = e.clipboardData.getData('text').trim()
+      if (!text) return
+
+      const lines = text.split('\n').filter((line) => line.trim())
+      if (lines.length === 0) return
+
+      e.preventDefault()
+
+      const inputType = (e.target as HTMLInputElement).getAttribute('data-input-type') as
+        | 'key'
+        | 'value'
+
+      if (inputType) {
+        const hasValidEnvVarPattern = lines.some((line) => parseEnvVarLine(line) !== null)
+        if (!hasValidEnvVarPattern) {
+          handleSingleValuePaste(text, index, inputType)
+          return
         }
-      })
-      .filter((parsed): parsed is NonNullable<typeof parsed> => parsed !== null)
-      .filter(({ key, value }) => key && value)
+      }
 
-    if (parsedVars.length > 0) {
-      const existingVars = envVars.filter((v) => v.key || v.value)
-      setEnvVars([...existingVars, ...parsedVars])
-      setShouldScrollToBottom(true)
-    }
-  }
+      handleKeyValuePaste(lines)
+    },
+    [parseEnvVarLine, handleSingleValuePaste, handleKeyValuePaste]
+  )
 
-  const handleCancel = () => {
+  /**
+   * Discards all changes and reverts to initial state
+   */
+  const handleCancel = useCallback(() => {
     setEnvVars(JSON.parse(JSON.stringify(initialVarsRef.current)))
+    setWorkspaceVars({ ...initialWorkspaceVarsRef.current })
     setShowUnsavedChanges(false)
     if (pendingClose.current) {
       onOpenChange(false)
     }
-  }
+  }, [onOpenChange])
 
-  const handleSave = async () => {
+  /**
+   * Saves all personal and workspace environment variables
+   */
+  const handleSave = useCallback(async () => {
     try {
       setShowUnsavedChanges(false)
       onOpenChange(false)
 
       const validVariables = envVars
         .filter((v) => v.key && v.value)
-        .reduce(
-          (acc, { key, value }) => ({
-            ...acc,
-            [key]: value,
-          }),
-          {}
-        )
+        .reduce<Record<string, string>>((acc, { key, value }) => ({ ...acc, [key]: value }), {})
+
       await savePersonalMutation.mutateAsync({ variables: validVariables })
 
       const before = initialWorkspaceVarsRef.current
@@ -379,6 +476,7 @@ export function EnvironmentVariables({
           toUpsert[k] = v
         }
       }
+
       for (const k of Object.keys(before)) {
         if (!(k in after)) toDelete.push(k)
       }
@@ -396,356 +494,314 @@ export function EnvironmentVariables({
     } catch (error) {
       logger.error('Failed to save environment variables:', error)
     }
-  }
+  }, [
+    envVars,
+    workspaceVars,
+    workspaceId,
+    onOpenChange,
+    savePersonalMutation,
+    upsertWorkspaceMutation,
+    removeWorkspaceMutation,
+  ])
+
+  /**
+   * Promotes a personal environment variable to workspace scope
+   */
+  const promoteToWorkspace = useCallback(
+    (envVar: UIEnvironmentVariable) => {
+      if (!envVar.key || !envVar.value || !workspaceId) return
+      setWorkspaceVars((prev) => ({ ...prev, [envVar.key]: envVar.value }))
+      setEnvVars((prev) => {
+        const filtered = prev.filter((entry) => entry !== envVar)
+        return filtered.length ? filtered : [createEmptyEnvVar()]
+      })
+    },
+    [workspaceId]
+  )
+
+  const conflictClassName = 'border-[var(--text-error)] bg-[#F6D2D2] dark:bg-[#442929]'
+
+  /**
+   * Renders a single personal environment variable row with conflict detection
+   */
+  const renderEnvVarRow = useCallback(
+    (envVar: UIEnvironmentVariable, originalIndex: number) => {
+      const isConflict = !!envVar.key && Object.hasOwn(workspaceVars, envVar.key)
+      const maskedValueStyle =
+        focusedValueIndex !== originalIndex && !isConflict
+          ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
+          : undefined
+
+      return (
+        <>
+          <div className={GRID_COLS}>
+            <EmcnInput
+              data-input-type='key'
+              value={envVar.key}
+              onChange={(e) => updateEnvVar(originalIndex, 'key', e.target.value)}
+              onPaste={(e) => handlePaste(e, originalIndex)}
+              placeholder='API_KEY'
+              name={`env_variable_name_${envVar.id || originalIndex}_${Math.random()}`}
+              autoComplete='off'
+              autoCapitalize='off'
+              spellCheck='false'
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              className={`h-9 ${isConflict ? conflictClassName : ''}`}
+            />
+            <div />
+            <EmcnInput
+              data-input-type='value'
+              value={envVar.value}
+              onChange={(e) => updateEnvVar(originalIndex, 'value', e.target.value)}
+              type='text'
+              onFocus={(e) => {
+                if (!isConflict) {
+                  e.target.removeAttribute('readOnly')
+                  handleValueFocus(originalIndex, e)
+                }
+              }}
+              onClick={handleValueClick}
+              onBlur={() => setFocusedValueIndex(null)}
+              onPaste={(e) => handlePaste(e, originalIndex)}
+              placeholder={isConflict ? 'Workspace override active' : 'Enter value'}
+              disabled={isConflict}
+              aria-disabled={isConflict}
+              name={`env_variable_value_${envVar.id || originalIndex}_${Math.random()}`}
+              autoComplete='off'
+              autoCapitalize='off'
+              spellCheck='false'
+              readOnly={isConflict}
+              style={maskedValueStyle}
+              className={`h-9 ${isConflict ? `cursor-not-allowed ${conflictClassName}` : ''}`}
+            />
+            <div className='ml-[8px] flex items-center'>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    disabled={!envVar.key || !envVar.value || isConflict || !workspaceId}
+                    onClick={() => promoteToWorkspace(envVar)}
+                    className='h-9 w-9'
+                  >
+                    <Share2 className='h-4 w-4' />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>Make it workspace scoped</Tooltip.Content>
+              </Tooltip.Root>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <Button
+                    variant='ghost'
+                    onClick={() => removeEnvVar(originalIndex)}
+                    className='h-9 w-9'
+                  >
+                    <Trash />
+                  </Button>
+                </Tooltip.Trigger>
+                <Tooltip.Content>Delete environment variable</Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+          </div>
+          {isConflict && (
+            <div className='col-span-3 mt-[4px] text-[12px] text-[var(--text-error)] leading-tight'>
+              Workspace variable with the same name overrides this. Rename your personal key to use
+              it.
+            </div>
+          )}
+        </>
+      )
+    },
+    [
+      workspaceVars,
+      workspaceId,
+      focusedValueIndex,
+      updateEnvVar,
+      handlePaste,
+      handleValueFocus,
+      handleValueClick,
+      promoteToWorkspace,
+      removeEnvVar,
+    ]
+  )
 
-  const renderEnvVarRow = (envVar: UIEnvironmentVariable, originalIndex: number) => {
-    const isConflict = !!envVar.key && Object.hasOwn(workspaceVars, envVar.key)
-    return (
-      <>
-        <div className={`${GRID_COLS} items-center`}>
-          <Input
-            data-input-type='key'
-            value={envVar.key}
-            onChange={(e) => updateEnvVar(originalIndex, 'key', e.target.value)}
-            onPaste={(e) => handlePaste(e, originalIndex)}
-            placeholder='API_KEY'
-            name={`env_variable_name_${envVar.id || originalIndex}_${Math.random()}`}
-            autoComplete='off'
-            autoCapitalize='off'
-            spellCheck='false'
+  return (
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Hidden inputs to prevent browser password manager autofill interference */}
+        <div className='hidden'>
+          <input
+            type='text'
+            name='fakeusernameremembered'
+            autoComplete='username'
+            tabIndex={-1}
             readOnly
-            onFocus={(e) => e.target.removeAttribute('readOnly')}
-            className={`h-9 rounded-[8px] border-none px-3 font-normal text-sm ring-0 ring-offset-0 placeholder:text-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${isConflict ? 'border border-red-500 bg-[#F6D2D2] outline-none ring-0 disabled:bg-[#F6D2D2] disabled:opacity-100 dark:bg-[#442929] disabled:dark:bg-[#442929]' : 'bg-muted'}`}
           />
-          <Input
-            data-input-type='value'
-            value={envVar.value}
-            onChange={(e) => updateEnvVar(originalIndex, 'value', e.target.value)}
-            type='text'
-            onFocus={(e) => {
-              if (!isConflict) {
-                e.target.removeAttribute('readOnly')
-                handleValueFocus(originalIndex, e)
-              }
-            }}
-            onClick={handleValueClick}
-            onBlur={() => setFocusedValueIndex(null)}
-            onPaste={(e) => handlePaste(e, originalIndex)}
-            placeholder={isConflict ? 'Workspace override active' : 'Enter value'}
-            disabled={isConflict}
-            aria-disabled={isConflict}
-            name={`env_variable_value_${envVar.id || originalIndex}_${Math.random()}`}
-            autoComplete='off'
-            autoCapitalize='off'
-            spellCheck='false'
-            readOnly={isConflict}
-            style={
-              focusedValueIndex !== originalIndex && !isConflict
-                ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                : undefined
-            }
-            className={`allow-scroll h-9 rounded-[8px] border-none px-3 font-normal text-sm ring-0 ring-offset-0 placeholder:text-muted-foreground focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 ${isConflict ? 'cursor-not-allowed border border-red-500 bg-[#F6D2D2] outline-none ring-0 disabled:bg-[#F6D2D2] disabled:opacity-100 dark:bg-[#442929] disabled:dark:bg-[#442929]' : 'bg-muted'}`}
+          <input
+            type='password'
+            name='fakepasswordremembered'
+            autoComplete='current-password'
+            tabIndex={-1}
+            readOnly
           />
-          <div className='flex items-center justify-end gap-2'>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  variant='ghost'
-                  disabled={!envVar.key || !envVar.value || isConflict || !workspaceId}
-                  onClick={() => {
-                    if (!envVar.key || !envVar.value || !workspaceId) return
-                    setWorkspaceVars((prev) => ({ ...prev, [envVar.key]: envVar.value }))
-                    setEnvVars((prev) => {
-                      const filtered = prev.filter((entry) => entry !== envVar)
-                      return filtered.length ? filtered : [createEmptyEnvVar()]
-                    })
-                  }}
-                  className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                >
-                  <Share2 className='h-4 w-4' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content>Make it workspace scoped</Tooltip.Content>
-            </Tooltip.Root>
+          <input
+            type='email'
+            name='fakeemailremembered'
+            autoComplete='email'
+            tabIndex={-1}
+            readOnly
+          />
+        </div>
+        {isLoading ? (
+          <Skeleton className='h-9 w-full rounded-[8px]' />
+        ) : (
+          <div className='flex items-center gap-[8px]'>
+            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+              <Search
+                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+                strokeWidth={2}
+              />
+              <Input
+                placeholder='Search variables...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                name='env_search_field'
+                autoComplete='off'
+                autoCapitalize='off'
+                spellCheck='false'
+                readOnly
+                onFocus={(e) => e.target.removeAttribute('readOnly')}
+                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' className={PRIMARY_BUTTON_STYLES}>
+              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              Add
+            </Button>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
-                  variant='ghost'
-                  onClick={() => removeEnvVar(originalIndex)}
-                  className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
+                  onClick={handleSave}
+                  disabled={!hasChanges || hasConflicts}
+                  variant='primary'
+                  className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
                 >
-                  ×
+                  Save
                 </Button>
               </Tooltip.Trigger>
-              <Tooltip.Content>Delete environment variable</Tooltip.Content>
+              {hasConflicts && (
+                <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
+              )}
             </Tooltip.Root>
           </div>
-        </div>
-        {isConflict && (
-          <div className='col-span-3 mt-1 text-[#DC2626] text-[12px] leading-tight dark:text-[#F87171]'>
-            Workspace variable with the same name overrides this. Rename your personal key to use
-            it.
-          </div>
-        )}
-      </>
-    )
-  }
-
-  return (
-    <div className='relative flex h-full flex-col'>
-      {/* Hidden dummy inputs to prevent browser password manager autofill */}
-      <input
-        type='text'
-        name='fakeusernameremembered'
-        autoComplete='username'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='password'
-        name='fakepasswordremembered'
-        autoComplete='current-password'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='email'
-        name='fakeemailremembered'
-        autoComplete='email'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      {/* Fixed Header */}
-      <div>
-        {/* Search Input */}
-        {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-            <Input
-              placeholder='Search variables...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              name='env_search_field'
-              autoComplete='off'
-              autoCapitalize='off'
-              spellCheck='false'
-              readOnly
-              onFocus={(e) => e.target.removeAttribute('readOnly')}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
         )}
-      </div>
 
-      {/* Scrollable Content */}
-      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='space-y-2'>
-          {isLoading ? (
-            <>
-              {/* Show 3 skeleton rows */}
-              {[1, 2, 3].map((index) => (
-                <div key={index} className={`${GRID_COLS} items-center`}>
-                  <Skeleton className='h-9 rounded-[8px]' />
-                  <Skeleton className='h-9 rounded-[8px]' />
-                  <Skeleton className='h-9 w-9 rounded-[8px]' />
-                </div>
-              ))}
-            </>
-          ) : (
-            <>
-              {/* Workspace section */}
-              {!searchTerm.trim() ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {Object.keys(workspaceVars).length === 0 ? (
-                    <div className='text-muted-foreground text-sm'>No workspace variables yet.</div>
-                  ) : (
-                    Object.entries(workspaceVars).map(([key, value]) => (
-                      <div key={key} className={`${GRID_COLS} items-center`}>
-                        <Input
-                          value={renamingKey === key ? pendingKeyValue : key}
-                          onChange={(e) => {
-                            if (renamingKey !== key) setRenamingKey(key)
-                            setPendingKeyValue(e.target.value)
-                          }}
-                          onBlur={() => handleWorkspaceKeyRename(key, value)}
-                          name={`workspace_env_key_${key}_${Math.random()}`}
-                          autoComplete='off'
-                          autoCapitalize='off'
-                          spellCheck='false'
-                          readOnly
-                          onFocus={(e) => e.target.removeAttribute('readOnly')}
-                          className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                        />
-                        <Input
-                          value={value ? '•'.repeat(value.length) : ''}
-                          readOnly
-                          autoComplete='off'
-                          autoCorrect='off'
-                          autoCapitalize='off'
-                          spellCheck='false'
-                          className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                        />
-                        <div className='flex justify-end'>
-                          <Tooltip.Root>
-                            <Tooltip.Trigger asChild>
-                              <Button
-                                variant='ghost'
-                                onClick={() => {
-                                  setWorkspaceVars((prev) => {
-                                    const next = { ...prev }
-                                    delete next[key]
-                                    return next
-                                  })
-                                }}
-                                className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                              >
-                                ×
-                              </Button>
-                            </Tooltip.Trigger>
-                            <Tooltip.Content>Delete environment variable</Tooltip.Content>
-                          </Tooltip.Root>
-                        </div>
+        {/* Scrollable Content */}
+        <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {isLoading ? (
+              <>
+                <div className='flex flex-col gap-[8px]'>
+                  <Skeleton className='h-[13px] w-[70px]' />
+                  {Array.from({ length: 2 }, (_, i) => (
+                    <div key={`workspace-${i}`} className={GRID_COLS}>
+                      <Skeleton className='h-9 rounded-[4px]' />
+                      <div />
+                      <Skeleton className='h-9 rounded-[4px]' />
+                      <div className='ml-[8px] flex'>
+                        <Skeleton className='h-9 w-9 rounded-[4px]' />
                       </div>
-                    ))
-                  )}
+                    </div>
+                  ))}
                 </div>
-              ) : filteredWorkspaceEntries.length > 0 ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {filteredWorkspaceEntries.map(([key, value]) => (
-                    <div key={key} className={`${GRID_COLS} items-center`}>
-                      <Input
-                        value={renamingKey === key ? pendingKeyValue : key}
-                        onChange={(e) => {
-                          if (renamingKey !== key) setRenamingKey(key)
-                          setPendingKeyValue(e.target.value)
-                        }}
-                        onBlur={() => handleWorkspaceKeyRename(key, value)}
-                        name={`workspace_env_key_filtered_${key}_${Math.random()}`}
-                        autoComplete='off'
-                        autoCapitalize='off'
-                        spellCheck='false'
-                        readOnly
-                        onFocus={(e) => e.target.removeAttribute('readOnly')}
-                        className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                      />
-                      <Input
-                        value={value ? '•'.repeat(value.length) : ''}
-                        readOnly
-                        autoComplete='off'
-                        autoCorrect='off'
-                        autoCapitalize='off'
-                        spellCheck='false'
-                        className='h-9 rounded-[8px] border-none bg-muted px-3 text-sm'
-                      />
-                      <div className='flex justify-end'>
-                        <Tooltip.Root>
-                          <Tooltip.Trigger asChild>
-                            <Button
-                              variant='ghost'
-                              onClick={() => {
-                                setWorkspaceVars((prev) => {
-                                  const next = { ...prev }
-                                  delete next[key]
-                                  return next
-                                })
-                              }}
-                              className='h-9 w-9 rounded-[8px] bg-muted p-0 text-muted-foreground hover:bg-muted/70'
-                            >
-                              ×
-                            </Button>
-                          </Tooltip.Trigger>
-                          <Tooltip.Content>Delete environment variable</Tooltip.Content>
-                        </Tooltip.Root>
+                <div className='flex flex-col gap-[8px]'>
+                  <Skeleton className='h-[13px] w-[55px]' />
+                  {Array.from({ length: 2 }, (_, i) => (
+                    <div key={`personal-${i}`} className={GRID_COLS}>
+                      <Skeleton className='h-9 rounded-[4px]' />
+                      <div />
+                      <Skeleton className='h-9 rounded-[4px]' />
+                      <div className='ml-[8px] flex items-center'>
+                        <Skeleton className='h-9 w-9 rounded-[4px]' />
+                        <Skeleton className='h-9 w-9 rounded-[4px]' />
                       </div>
                     </div>
                   ))}
                 </div>
-              ) : null}
-
-              {/* Personal section */}
-              <div
-                className={`${personalHeaderMarginClass} mb-2 font-medium text-[13px] text-foreground`}
-              >
-                {' '}
-                Personal{' '}
-              </div>
-              {filteredEnvVars.map(({ envVar, originalIndex }) => (
-                <div key={envVar.id || originalIndex}>{renderEnvVarRow(envVar, originalIndex)}</div>
-              ))}
-              {/* Show message when search has no results across both sections */}
-              {searchTerm.trim() &&
-                filteredEnvVars.length === 0 &&
-                filteredWorkspaceEntries.length === 0 &&
-                (envVars.length > 0 || Object.keys(workspaceVars).length > 0) && (
-                  <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-                    No environment variables found matching "{searchTerm}"
+              </>
+            ) : (
+              <>
+                {/* Workspace section */}
+                {(!searchTerm.trim() || filteredWorkspaceEntries.length > 0) && (
+                  <div className='flex flex-col gap-[8px]'>
+                    <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Workspace
+                    </div>
+                    {!searchTerm.trim() && Object.keys(workspaceVars).length === 0 ? (
+                      <div className='text-[13px] text-[var(--text-muted)]'>
+                        No workspace variables yet.
+                      </div>
+                    ) : (
+                      (searchTerm.trim()
+                        ? filteredWorkspaceEntries
+                        : Object.entries(workspaceVars)
+                      ).map(([key, value]) => (
+                        <WorkspaceVariableRow
+                          key={key}
+                          envKey={key}
+                          value={value}
+                          renamingKey={renamingKey}
+                          pendingKeyValue={pendingKeyValue}
+                          onRenameStart={setRenamingKey}
+                          onPendingKeyChange={setPendingKeyValue}
+                          onRenameEnd={handleWorkspaceKeyRename}
+                          onDelete={handleDeleteWorkspaceVar}
+                        />
+                      ))
+                    )}
                   </div>
                 )}
-            </>
-          )}
-        </div>
-      </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between'>
-          {isLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <Skeleton className='h-9 w-[108px] rounded-[8px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={addEnvVar}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Add Variable
-              </Button>
-
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <Button
-                    onClick={handleSave}
-                    disabled={!hasChanges || hasConflicts}
-                    className={`h-9 rounded-[8px] ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
-                  >
-                    Save Changes
-                  </Button>
-                </Tooltip.Trigger>
-                {hasConflicts && (
-                  <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
+                {/* Personal section */}
+                {(!searchTerm.trim() || filteredEnvVars.length > 0) && (
+                  <div className='flex flex-col gap-[8px]'>
+                    <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Personal
+                    </div>
+                    {filteredEnvVars.map(({ envVar, originalIndex }) => (
+                      <div key={envVar.id || originalIndex}>
+                        {renderEnvVarRow(envVar, originalIndex)}
+                      </div>
+                    ))}
+                  </div>
                 )}
-              </Tooltip.Root>
-            </>
-          )}
+                {/* Show message when search has no results across both sections */}
+                {searchTerm.trim() &&
+                  filteredEnvVars.length === 0 &&
+                  filteredWorkspaceEntries.length === 0 &&
+                  (envVars.length > 0 || Object.keys(workspaceVars).length > 0) && (
+                    <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                      No environment variables found matching "{searchTerm}"
+                    </div>
+                  )}
+              </>
+            )}
+          </div>
         </div>
       </div>
 
       <Modal open={showUnsavedChanges} onOpenChange={setShowUnsavedChanges}>
-        <ModalContent>
-          <ModalHeader>
-            <ModalTitle>Unsaved Changes</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Unsaved Changes</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               {hasConflicts
                 ? 'You have unsaved changes, but conflicts must be resolved before saving. You can discard your changes to close the modal.'
                 : 'You have unsaved changes. Do you want to save them before closing?'}
-            </ModalDescription>
-          </ModalHeader>
+            </p>
+          </ModalBody>
           <ModalFooter>
-            <Button
-              onClick={handleCancel}
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)] dark:bg-[var(--text-error)] dark:text-[var(--white)] hover:dark:bg-[var(--text-error)] dark:hover:text-[var(--white)]'
-            >
+            <Button variant='default' onClick={handleCancel}>
               Discard Changes
             </Button>
             {hasConflicts ? (
@@ -754,7 +810,7 @@ export function EnvironmentVariables({
                   <Button
                     disabled={true}
                     variant='primary'
-                    className='h-[32px] cursor-not-allowed px-[12px] opacity-50'
+                    className='cursor-not-allowed opacity-50'
                   >
                     Save Changes
                   </Button>
@@ -762,13 +818,13 @@ export function EnvironmentVariables({
                 <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
               </Tooltip.Root>
             ) : (
-              <Button onClick={handleSave} variant='primary' className='h-[32px] px-[12px]'>
+              <Button onClick={handleSave} variant='primary' className={PRIMARY_BUTTON_STYLES}>
                 Save Changes
               </Button>
             )}
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
index e9b302138a9..965dbf0b069 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
@@ -11,7 +11,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
 import { signOut, useSession } from '@/lib/auth/auth-client'
 import { useBrandConfig } from '@/lib/branding/branding'
@@ -345,12 +345,12 @@ export function General({ onOpenChange }: GeneralProps) {
                 />
                 <Button
                   variant='ghost'
-                  className='h-[11px] w-[11px] flex-shrink-0 p-0'
+                  className='h-[12px] w-[12px] flex-shrink-0 p-0'
                   onClick={handleUpdateName}
                   disabled={updateProfile.isPending}
                   aria-label='Save name'
                 >
-                  <Check className='h-[11px] w-[11px]' />
+                  <Check className='h-[12px] w-[12px]' />
                 </Button>
               </>
             ) : (
@@ -358,11 +358,11 @@ export function General({ onOpenChange }: GeneralProps) {
                 <h3 className='font-medium text-[14px]'>{profile?.name || ''}</h3>
                 <Button
                   variant='ghost'
-                  className='h-[11px] w-[11px] flex-shrink-0 p-0'
+                  className='h-[10.5px] w-[10.5px] flex-shrink-0 p-0'
                   onClick={() => setIsEditingName(true)}
                   aria-label='Edit name'
                 >
-                  <Pencil className='h-[11px] w-[11px]' />
+                  <Pencil className='h-[10.5px] w-[10.5px]' />
                 </Button>
               </>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx
deleted file mode 100644
index 331c480ea12..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form.tsx
+++ /dev/null
@@ -1,303 +0,0 @@
-'use client'
-
-import { Plus, X } from 'lucide-react'
-import { Button, Input, Label } from '@/components/emcn'
-import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
-import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
-import type { McpServerFormData, McpServerTestResult } from '../types'
-
-interface AddServerFormProps {
-  formData: McpServerFormData
-  testResult: McpServerTestResult | null
-  isTestingConnection: boolean
-  isAddingServer: boolean
-  serversLoading: boolean
-  showEnvVars: boolean
-  activeInputField: 'url' | 'header-key' | 'header-value' | null
-  activeHeaderIndex: number | null
-  envSearchTerm: string
-  cursorPosition: number
-  urlScrollLeft: number
-  headerScrollLeft: Record<string, number>
-  workspaceId: string
-  urlInputRef: React.RefObject<HTMLInputElement | null>
-  onNameChange: (value: string) => void
-  onInputChange: (
-    field: 'url' | 'header-key' | 'header-value',
-    value: string,
-    index?: number
-  ) => void
-  onUrlScroll: (scrollLeft: number) => void
-  onHeaderScroll: (key: string, scrollLeft: number) => void
-  onEnvVarSelect: (value: string) => void
-  onEnvVarClose: () => void
-  onAddHeader: () => void
-  onRemoveHeader: (key: string) => void
-  onTestConnection: () => void
-  onCancel: () => void
-  onAddServer: () => void
-  onClearTestResult: () => void
-}
-
-export function AddServerForm({
-  formData,
-  testResult,
-  isTestingConnection,
-  isAddingServer,
-  serversLoading,
-  showEnvVars,
-  activeInputField,
-  activeHeaderIndex,
-  envSearchTerm,
-  cursorPosition,
-  urlScrollLeft,
-  headerScrollLeft,
-  workspaceId,
-  urlInputRef,
-  onNameChange,
-  onInputChange,
-  onUrlScroll,
-  onHeaderScroll,
-  onEnvVarSelect,
-  onEnvVarClose,
-  onAddHeader,
-  onRemoveHeader,
-  onTestConnection,
-  onCancel,
-  onAddServer,
-  onClearTestResult,
-}: AddServerFormProps) {
-  return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
-      <div className='space-y-1.5'>
-        <div className='flex items-center justify-between gap-3'>
-          <Label className='w-[100px] shrink-0 font-normal text-sm'>Server Name</Label>
-          <div className='flex-1'>
-            <Input
-              placeholder='e.g., My MCP Server'
-              value={formData.name}
-              onChange={(e) => {
-                if (testResult) onClearTestResult()
-                onNameChange(e.target.value)
-              }}
-              className='h-9'
-            />
-          </div>
-        </div>
-
-        <div className='flex items-center justify-between gap-3'>
-          <Label className='w-[100px] shrink-0 font-normal text-sm'>Server URL</Label>
-          <div className='relative flex-1'>
-            <Input
-              ref={urlInputRef}
-              placeholder='https://mcp.server.dev/{{YOUR_API_KEY}}/sse'
-              value={formData.url}
-              onChange={(e) => onInputChange('url', e.target.value)}
-              onScroll={(e) => onUrlScroll(e.currentTarget.scrollLeft)}
-              onInput={(e) => onUrlScroll(e.currentTarget.scrollLeft)}
-              className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-            />
-            {/* Overlay for styled text display */}
-            <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-              <div
-                className='whitespace-nowrap'
-                style={{ transform: `translateX(-${urlScrollLeft}px)` }}
-              >
-                {formatDisplayText(formData.url || '')}
-              </div>
-            </div>
-
-            {/* Environment Variables Dropdown */}
-            {showEnvVars && activeInputField === 'url' && (
-              <EnvVarDropdown
-                visible={showEnvVars}
-                onSelect={onEnvVarSelect}
-                searchTerm={envSearchTerm}
-                inputValue={formData.url || ''}
-                cursorPosition={cursorPosition}
-                workspaceId={workspaceId}
-                onClose={onEnvVarClose}
-                className='w-full'
-                maxHeight='200px'
-                style={{
-                  position: 'absolute',
-                  top: '100%',
-                  left: 0,
-                  zIndex: 99999,
-                }}
-              />
-            )}
-          </div>
-        </div>
-
-        {Object.entries(formData.headers || {}).map(([key, value], index) => (
-          <div key={index} className='relative flex items-center justify-between gap-3'>
-            <Label className='w-[100px] shrink-0 font-normal text-sm'>Header</Label>
-            <div className='relative flex flex-1 gap-2'>
-              {/* Header Key Input */}
-              <div className='relative flex-1'>
-                <Input
-                  placeholder='Name'
-                  value={key}
-                  onChange={(e) => onInputChange('header-key', e.target.value, index)}
-                  onScroll={(e) => onHeaderScroll(`key-${index}`, e.currentTarget.scrollLeft)}
-                  onInput={(e) => onHeaderScroll(`key-${index}`, e.currentTarget.scrollLeft)}
-                  className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-                />
-                <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-                  <div
-                    className='whitespace-nowrap'
-                    style={{
-                      transform: `translateX(-${headerScrollLeft[`key-${index}`] || 0}px)`,
-                    }}
-                  >
-                    {formatDisplayText(key || '')}
-                  </div>
-                </div>
-              </div>
-
-              {/* Header Value Input */}
-              <div className='relative flex-1'>
-                <Input
-                  placeholder='Value'
-                  value={value}
-                  onChange={(e) => onInputChange('header-value', e.target.value, index)}
-                  onScroll={(e) => onHeaderScroll(`value-${index}`, e.currentTarget.scrollLeft)}
-                  onInput={(e) => onHeaderScroll(`value-${index}`, e.currentTarget.scrollLeft)}
-                  className='h-9 text-transparent caret-foreground placeholder:text-muted-foreground/50'
-                />
-                <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-3 text-sm'>
-                  <div
-                    className='whitespace-nowrap'
-                    style={{
-                      transform: `translateX(-${headerScrollLeft[`value-${index}`] || 0}px)`,
-                    }}
-                  >
-                    {formatDisplayText(value || '')}
-                  </div>
-                </div>
-              </div>
-
-              <Button
-                type='button'
-                variant='ghost'
-                onClick={() => onRemoveHeader(key)}
-                className='h-9 w-9 p-0 text-muted-foreground hover:text-foreground'
-              >
-                <X className='h-3 w-3' />
-              </Button>
-
-              {/* Environment Variables Dropdown for Header Key */}
-              {showEnvVars && activeInputField === 'header-key' && activeHeaderIndex === index && (
-                <EnvVarDropdown
-                  visible={showEnvVars}
-                  onSelect={onEnvVarSelect}
-                  searchTerm={envSearchTerm}
-                  inputValue={key}
-                  cursorPosition={cursorPosition}
-                  workspaceId={workspaceId}
-                  onClose={onEnvVarClose}
-                  className='w-full'
-                  maxHeight='200px'
-                  style={{
-                    position: 'absolute',
-                    top: '100%',
-                    left: 0,
-                    zIndex: 99999,
-                  }}
-                />
-              )}
-
-              {/* Environment Variables Dropdown for Header Value */}
-              {showEnvVars &&
-                activeInputField === 'header-value' &&
-                activeHeaderIndex === index && (
-                  <EnvVarDropdown
-                    visible={showEnvVars}
-                    onSelect={onEnvVarSelect}
-                    searchTerm={envSearchTerm}
-                    inputValue={value}
-                    cursorPosition={cursorPosition}
-                    workspaceId={workspaceId}
-                    onClose={onEnvVarClose}
-                    className='w-full'
-                    maxHeight='200px'
-                    style={{
-                      position: 'absolute',
-                      top: '100%',
-                      left: 0,
-                      zIndex: 99999,
-                    }}
-                  />
-                )}
-            </div>
-          </div>
-        ))}
-
-        <div className='flex items-center justify-between gap-3'>
-          <div className='w-[100px] shrink-0' />
-          <div className='flex-1'>
-            <Button
-              type='button'
-              variant='outline'
-              onClick={onAddHeader}
-              className='h-9 text-muted-foreground hover:text-foreground'
-            >
-              <Plus className='mr-2 h-3 w-3' />
-              Add Header
-            </Button>
-          </div>
-        </div>
-
-        <div className='border-border border-t pt-2'>
-          <div className='space-y-1.5'>
-            {/* Error message above buttons */}
-            {testResult && !testResult.success && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {testResult.error || testResult.message}
-              </p>
-            )}
-
-            {/* Buttons row */}
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <Button
-                  variant='ghost'
-                  onClick={onTestConnection}
-                  disabled={isTestingConnection || !formData.name.trim() || !formData.url?.trim()}
-                  className='h-9 text-muted-foreground hover:text-foreground'
-                >
-                  {isTestingConnection ? 'Testing...' : 'Test Connection'}
-                </Button>
-                {testResult?.success && (
-                  <span className='text-muted-foreground text-xs'>✓ Connected</span>
-                )}
-              </div>
-              <div className='flex items-center gap-2'>
-                <Button
-                  variant='ghost'
-                  onClick={onCancel}
-                  className='h-9 text-muted-foreground hover:text-foreground'
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={onAddServer}
-                  disabled={
-                    serversLoading ||
-                    isAddingServer ||
-                    !formData.name.trim() ||
-                    !formData.url?.trim()
-                  }
-                  className='h-9 rounded-[8px]'
-                >
-                  {serversLoading || isAddingServer ? 'Adding...' : 'Add Server'}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx
new file mode 100644
index 00000000000..9e9f61887dd
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/form-field/form-field.tsx
@@ -0,0 +1,17 @@
+import { Label } from '@/components/emcn'
+
+interface FormFieldProps {
+  label: string
+  children: React.ReactNode
+}
+
+export function FormField({ label, children }: FormFieldProps) {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <Label className='w-[100px] shrink-0 font-medium text-[13px] text-[var(--text-secondary)]'>
+        {label}
+      </Label>
+      <div className='relative flex-1'>{children}</div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
new file mode 100644
index 00000000000..b059a584207
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
@@ -0,0 +1,66 @@
+import { Input } from '@/components/emcn'
+import { cn } from '@/lib/utils'
+import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
+import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
+import type { EnvVarDropdownConfig } from '../types'
+
+interface FormattedInputProps {
+  ref?: React.RefObject<HTMLInputElement | null>
+  placeholder: string
+  value: string
+  scrollLeft: number
+  showEnvVars: boolean
+  envVarProps: EnvVarDropdownConfig
+  className?: string
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onScroll: (scrollLeft: number) => void
+}
+
+export function FormattedInput({
+  ref,
+  placeholder,
+  value,
+  scrollLeft,
+  showEnvVars,
+  envVarProps,
+  className,
+  onChange,
+  onScroll,
+}: FormattedInputProps) {
+  const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
+    onScroll(e.currentTarget.scrollLeft)
+  }
+
+  return (
+    <div className={cn('relative', className)}>
+      <Input
+        ref={ref}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        onScroll={handleScroll}
+        onInput={handleScroll}
+        className='h-9 text-transparent caret-foreground placeholder:text-[var(--text-tertiary)]'
+      />
+      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-[8px] py-[6px] font-medium font-sans text-sm'>
+        <div className='whitespace-nowrap' style={{ transform: `translateX(-${scrollLeft}px)` }}>
+          {formatDisplayText(value)}
+        </div>
+      </div>
+      {showEnvVars && (
+        <EnvVarDropdown
+          visible={showEnvVars}
+          onSelect={envVarProps.onSelect}
+          searchTerm={envVarProps.searchTerm}
+          inputValue={value}
+          cursorPosition={envVarProps.cursorPosition}
+          workspaceId={envVarProps.workspaceId}
+          onClose={envVarProps.onClose}
+          className='w-full'
+          maxHeight='200px'
+          style={{ position: 'absolute', top: '100%', left: 0, zIndex: 99999 }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx
new file mode 100644
index 00000000000..06198447bf4
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/header-row/header-row.tsx
@@ -0,0 +1,81 @@
+import { X } from 'lucide-react'
+import { Button } from '@/components/emcn'
+import { FormattedInput } from '../formatted-input/formatted-input'
+import type { EnvVarDropdownConfig, HeaderEntry, InputFieldType } from '../types'
+
+interface HeaderRowProps {
+  header: HeaderEntry
+  index: number
+  headerScrollLeft: Record<string, number>
+  showEnvVars: boolean
+  activeInputField: InputFieldType | null
+  activeHeaderIndex: number | null
+  envSearchTerm: string
+  cursorPosition: number
+  workspaceId: string
+  onInputChange: (field: InputFieldType, value: string, index?: number) => void
+  onHeaderScroll: (key: string, scrollLeft: number) => void
+  onEnvVarSelect: (value: string) => void
+  onEnvVarClose: () => void
+  onRemove: () => void
+}
+
+export function HeaderRow({
+  header,
+  index,
+  headerScrollLeft,
+  showEnvVars,
+  activeInputField,
+  activeHeaderIndex,
+  envSearchTerm,
+  cursorPosition,
+  workspaceId,
+  onInputChange,
+  onHeaderScroll,
+  onEnvVarSelect,
+  onEnvVarClose,
+  onRemove,
+}: HeaderRowProps) {
+  const isKeyActive =
+    showEnvVars && activeInputField === 'header-key' && activeHeaderIndex === index
+  const isValueActive =
+    showEnvVars && activeInputField === 'header-value' && activeHeaderIndex === index
+
+  const envVarProps: EnvVarDropdownConfig = {
+    searchTerm: envSearchTerm,
+    cursorPosition,
+    workspaceId,
+    onSelect: onEnvVarSelect,
+    onClose: onEnvVarClose,
+  }
+
+  return (
+    <div className='relative flex items-center gap-[8px]'>
+      <FormattedInput
+        placeholder='Name'
+        value={header.key || ''}
+        scrollLeft={headerScrollLeft[`key-${index}`] || 0}
+        showEnvVars={isKeyActive}
+        envVarProps={envVarProps}
+        className='flex-1'
+        onChange={(e) => onInputChange('header-key', e.target.value, index)}
+        onScroll={(scrollLeft) => onHeaderScroll(`key-${index}`, scrollLeft)}
+      />
+
+      <FormattedInput
+        placeholder='Value'
+        value={header.value || ''}
+        scrollLeft={headerScrollLeft[`value-${index}`] || 0}
+        showEnvVars={isValueActive}
+        envVarProps={envVarProps}
+        className='flex-1'
+        onChange={(e) => onInputChange('header-value', e.target.value, index)}
+        onScroll={(scrollLeft) => onHeaderScroll(`value-${index}`, scrollLeft)}
+      />
+
+      <Button type='button' variant='ghost' onClick={onRemove} className='h-6 w-6 shrink-0 p-0'>
+        <X className='h-3 w-3' />
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts
new file mode 100644
index 00000000000..7e68b415738
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/index.ts
@@ -0,0 +1,12 @@
+export { FormField } from './form-field/form-field'
+export { FormattedInput } from './formatted-input/formatted-input'
+export { HeaderRow } from './header-row/header-row'
+export { McpServerSkeleton } from './mcp-server-skeleton/mcp-server-skeleton'
+export { ServerListItem } from './server-list-item/server-list-item'
+export type {
+  EnvVarDropdownConfig,
+  HeaderEntry,
+  InputFieldType,
+  McpServerFormData,
+  McpServerTestResult,
+} from './types'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
new file mode 100644
index 00000000000..5c84f70ab62
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/ui'
+
+/**
+ * Skeleton loader for MCP server list items.
+ * Matches the structure of ServerListItem component.
+ */
+export function McpServerSkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Skeleton className='h-[14px] w-[100px]' />
+          <Skeleton className='h-[13px] w-[80px]' />
+        </div>
+        <Skeleton className='h-[13px] w-[120px]' />
+      </div>
+      <Skeleton className='h-[30px] w-[54px] flex-shrink-0 rounded-[4px]' />
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
new file mode 100644
index 00000000000..9993b905d68
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/server-list-item/server-list-item.tsx
@@ -0,0 +1,54 @@
+import { Button } from '@/components/emcn'
+
+/**
+ * Formats transport type for display (e.g., "streamable-http" -> "Streamable-HTTP").
+ */
+function formatTransportLabel(transport: string): string {
+  return transport
+    .split('-')
+    .map((word) =>
+      ['http', 'sse', 'stdio'].includes(word.toLowerCase())
+        ? word.toUpperCase()
+        : word.charAt(0).toUpperCase() + word.slice(1)
+    )
+    .join('-')
+}
+
+/**
+ * Formats tools count and names for display.
+ */
+function formatToolsLabel(tools: any[]): string {
+  const count = tools.length
+  const plural = count !== 1 ? 's' : ''
+  const names = count > 0 ? `: ${tools.map((t) => t.name).join(', ')}` : ''
+  return `${count} tool${plural}${names}`
+}
+
+interface ServerListItemProps {
+  server: any
+  tools: any[]
+  isDeleting: boolean
+  onRemove: () => void
+}
+
+export function ServerListItem({ server, tools, isDeleting, onRemove }: ServerListItemProps) {
+  const transportLabel = formatTransportLabel(server.transport || 'http')
+  const toolsLabel = formatToolsLabel(tools)
+
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <span className='max-w-[280px] truncate font-medium text-[14px]'>
+            {server.name || 'Unnamed Server'}
+          </span>
+          <span className='text-[13px] text-[var(--text-secondary)]'>({transportLabel})</span>
+        </div>
+        <p className='truncate text-[13px] text-[var(--text-muted)]'>{toolsLabel}</p>
+      </div>
+      <Button variant='ghost' className='flex-shrink-0' onClick={onRemove} disabled={isDeleting}>
+        {isDeleting ? 'Deleting...' : 'Delete'}
+      </Button>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts
new file mode 100644
index 00000000000..5b1bfd90d9a
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/types.ts
@@ -0,0 +1,35 @@
+import type { McpTransport } from '@/lib/mcp/types'
+
+/**
+ * Represents a single header entry in the form.
+ * Using an array of objects allows duplicate keys during editing.
+ */
+export interface HeaderEntry {
+  key: string
+  value: string
+}
+
+export interface McpServerFormData {
+  name: string
+  transport: McpTransport
+  url?: string
+  timeout?: number
+  headers?: HeaderEntry[]
+}
+
+export interface McpServerTestResult {
+  success: boolean
+  message?: string
+  error?: string
+  warnings?: string[]
+}
+
+export type InputFieldType = 'url' | 'header-key' | 'header-value'
+
+export interface EnvVarDropdownConfig {
+  searchTerm: string
+  cursorPosition: number
+  workspaceId: string
+  onSelect: (value: string) => void
+  onClose: () => void
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
index 186f350e239..c9beb60dd47 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
@@ -1,15 +1,19 @@
 'use client'
 
-import { useCallback, useRef, useState } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import { Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
-import { Button } from '@/components/emcn'
+import { Button, Input as EmcnInput } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import { createMcpToolId } from '@/lib/mcp/utils'
 import { checkEnvVarTrigger } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
-import { AddServerForm } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/add-server-form'
-import type { McpServerFormData } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types'
 import {
   useCreateMcpServer,
   useDeleteMcpServer,
@@ -17,9 +21,42 @@ import {
   useMcpToolsQuery,
 } from '@/hooks/queries/mcp'
 import { useMcpServerTest } from '@/hooks/use-mcp-server-test'
+import type { InputFieldType, McpServerFormData, McpServerTestResult } from './components'
+import {
+  FormattedInput,
+  FormField,
+  HeaderRow,
+  McpServerSkeleton,
+  ServerListItem,
+} from './components'
 
 const logger = createLogger('McpSettings')
 
+const DEFAULT_FORM_DATA: McpServerFormData = {
+  name: '',
+  transport: 'streamable-http',
+  url: '',
+  timeout: 30000,
+  headers: [{ key: '', value: '' }],
+}
+
+/**
+ * Determines the label for the test connection button based on current state.
+ */
+function getTestButtonLabel(
+  testResult: McpServerTestResult | null,
+  isTestingConnection: boolean
+): string {
+  if (isTestingConnection) return 'Testing...'
+  if (testResult?.success) return 'Connection success'
+  if (testResult && !testResult.success) return 'No connection: retry'
+  return 'Test Connection'
+}
+
+/**
+ * MCP Settings component for managing Model Context Protocol servers.
+ * Handles server CRUD operations, connection testing, and environment variable integration.
+ */
 export function MCP() {
   const params = useParams()
   const workspaceId = params.workspaceId as string
@@ -32,62 +69,88 @@ export function MCP() {
   const { data: mcpToolsData = [], error: toolsError } = useMcpToolsQuery(workspaceId)
   const createServerMutation = useCreateMcpServer()
   const deleteServerMutation = useDeleteMcpServer()
+  const { testResult, isTestingConnection, testConnection, clearTestResult } = useMcpServerTest()
 
+  const urlInputRef = useRef<HTMLInputElement>(null)
+
+  // Form state
   const [showAddForm, setShowAddForm] = useState(false)
+  const [formData, setFormData] = useState<McpServerFormData>(DEFAULT_FORM_DATA)
+  const [isAddingServer, setIsAddingServer] = useState(false)
+
+  // Search and filtering state
   const [searchTerm, setSearchTerm] = useState('')
   const [deletingServers, setDeletingServers] = useState<Set<string>>(new Set())
-  const [formData, setFormData] = useState<McpServerFormData>({
-    name: '',
-    transport: 'streamable-http',
-    url: '',
-    timeout: 30000,
-    headers: {},
-  })
 
+  // Delete confirmation dialog state
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [serverToDelete, setServerToDelete] = useState<{ id: string; name: string } | null>(null)
+
+  // Environment variable dropdown state
   const [showEnvVars, setShowEnvVars] = useState(false)
   const [envSearchTerm, setEnvSearchTerm] = useState('')
   const [cursorPosition, setCursorPosition] = useState(0)
-  const [activeInputField, setActiveInputField] = useState<
-    'url' | 'header-key' | 'header-value' | null
-  >(null)
+  const [activeInputField, setActiveInputField] = useState<InputFieldType | null>(null)
   const [activeHeaderIndex, setActiveHeaderIndex] = useState<number | null>(null)
-  const urlInputRef = useRef<HTMLInputElement>(null)
-
-  const { testResult, isTestingConnection, testConnection, clearTestResult } = useMcpServerTest()
-
-  const [isAddingServer, setIsAddingServer] = useState(false)
 
+  // Scroll position state for formatted text overlays
   const [urlScrollLeft, setUrlScrollLeft] = useState(0)
   const [headerScrollLeft, setHeaderScrollLeft] = useState<Record<string, number>>({})
 
+  /**
+   * Resets environment variable dropdown state.
+   */
+  const resetEnvVarState = useCallback(() => {
+    setShowEnvVars(false)
+    setActiveInputField(null)
+    setActiveHeaderIndex(null)
+  }, [])
+
+  /**
+   * Resets the form to its default state.
+   */
+  const resetForm = useCallback(() => {
+    setFormData(DEFAULT_FORM_DATA)
+    setShowAddForm(false)
+    resetEnvVarState()
+    clearTestResult()
+  }, [clearTestResult, resetEnvVarState])
+
+  /**
+   * Updates a header field at the specified index.
+   */
+  const updateHeader = useCallback((index: number, field: 'key' | 'value', value: string) => {
+    setFormData((prev) => {
+      const newHeaders = [...(prev.headers || [])]
+      if (newHeaders[index]) {
+        newHeaders[index] = { ...newHeaders[index], [field]: value }
+      }
+      return { ...prev, headers: newHeaders }
+    })
+  }, [])
+
+  /**
+   * Handles environment variable selection and updates the appropriate field.
+   */
   const handleEnvVarSelect = useCallback(
     (newValue: string) => {
       if (activeInputField === 'url') {
         setFormData((prev) => ({ ...prev, url: newValue }))
-      } else if (activeInputField === 'header-key' && activeHeaderIndex !== null) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [oldKey, value] = headerEntries[activeHeaderIndex]
-        const newHeaders = { ...formData.headers }
-        delete newHeaders[oldKey]
-        newHeaders[newValue.replace(/[{}]/g, '')] = value
-        setFormData((prev) => ({ ...prev, headers: newHeaders }))
-      } else if (activeInputField === 'header-value' && activeHeaderIndex !== null) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [key] = headerEntries[activeHeaderIndex]
-        setFormData((prev) => ({
-          ...prev,
-          headers: { ...prev.headers, [key]: newValue },
-        }))
+      } else if (activeHeaderIndex !== null) {
+        const field = activeInputField === 'header-key' ? 'key' : 'value'
+        const processedValue = field === 'key' ? newValue.replace(/[{}]/g, '') : newValue
+        updateHeader(activeHeaderIndex, field, processedValue)
       }
-      setShowEnvVars(false)
-      setActiveInputField(null)
-      setActiveHeaderIndex(null)
+      resetEnvVarState()
     },
-    [activeInputField, activeHeaderIndex, formData.headers]
+    [activeInputField, activeHeaderIndex, updateHeader, resetEnvVarState]
   )
 
+  /**
+   * Handles input changes and manages environment variable dropdown visibility.
+   */
   const handleInputChange = useCallback(
-    (field: 'url' | 'header-key' | 'header-value', value: string, headerIndex?: number) => {
+    (field: InputFieldType, value: string, headerIndex?: number) => {
       const input = document.activeElement as HTMLInputElement
       const pos = input?.selectionStart || 0
 
@@ -105,31 +168,39 @@ export function MCP() {
         setActiveInputField(field)
         setActiveHeaderIndex(headerIndex ?? null)
       } else {
-        setActiveInputField(null)
-        setActiveHeaderIndex(null)
+        resetEnvVarState()
       }
 
       if (field === 'url') {
         setFormData((prev) => ({ ...prev, url: value }))
-      } else if (field === 'header-key' && headerIndex !== undefined) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [oldKey, headerValue] = headerEntries[headerIndex]
-        const newHeaders = { ...formData.headers }
-        delete newHeaders[oldKey]
-        newHeaders[value] = headerValue
-        setFormData((prev) => ({ ...prev, headers: newHeaders }))
-      } else if (field === 'header-value' && headerIndex !== undefined) {
-        const headerEntries = Object.entries(formData.headers || {})
-        const [key] = headerEntries[headerIndex]
-        setFormData((prev) => ({
-          ...prev,
-          headers: { ...prev.headers, [key]: value },
-        }))
+      } else if (headerIndex !== undefined) {
+        const headerField = field === 'header-key' ? 'key' : 'value'
+        updateHeader(headerIndex, headerField, value)
       }
     },
-    [formData.headers]
+    [testResult, clearTestResult, updateHeader, resetEnvVarState]
   )
 
+  /**
+   * Converts headers array to Record format for API calls.
+   * Filters out entries with empty keys.
+   */
+  const headersToRecord = useCallback(
+    (headers: typeof formData.headers): Record<string, string> => {
+      const record: Record<string, string> = {}
+      for (const header of headers || []) {
+        if (header.key.trim()) {
+          record[header.key] = header.value
+        }
+      }
+      return record
+    },
+    []
+  )
+
+  /**
+   * Tests the connection to the MCP server with current form data.
+   */
   const handleTestConnection = useCallback(async () => {
     if (!formData.name.trim() || !formData.url?.trim()) return
 
@@ -137,36 +208,38 @@ export function MCP() {
       name: formData.name,
       transport: formData.transport,
       url: formData.url,
-      headers: formData.headers,
+      headers: headersToRecord(formData.headers),
       timeout: formData.timeout,
       workspaceId,
     })
-  }, [formData, testConnection, workspaceId])
+  }, [formData, testConnection, workspaceId, headersToRecord])
 
+  /**
+   * Adds a new MCP server after validating and testing the connection.
+   */
   const handleAddServer = useCallback(async () => {
     if (!formData.name.trim()) return
 
     setIsAddingServer(true)
     try {
-      if (!testResult) {
-        const result = await testConnection({
-          name: formData.name,
-          transport: formData.transport,
-          url: formData.url,
-          headers: formData.headers,
-          timeout: formData.timeout,
-          workspaceId,
-        })
-
-        if (!result.success) {
-          return
-        }
+      const headersRecord = headersToRecord(formData.headers)
+      const serverConfig = {
+        name: formData.name,
+        transport: formData.transport,
+        url: formData.url,
+        headers: headersRecord,
+        timeout: formData.timeout,
+        workspaceId,
       }
 
-      if (testResult && !testResult.success) {
-        return
+      // Test connection if not already tested
+      if (!testResult) {
+        const result = await testConnection(serverConfig)
+        if (!result.success) return
       }
 
+      if (testResult && !testResult.success) return
+
       await createServerMutation.mutateAsync({
         workspaceId,
         config: {
@@ -174,319 +247,325 @@ export function MCP() {
           transport: formData.transport,
           url: formData.url,
           timeout: formData.timeout || 30000,
-          headers: formData.headers,
+          headers: headersRecord,
           enabled: true,
         },
       })
 
       logger.info(`Added MCP server: ${formData.name}`)
-
-      setFormData({
-        name: '',
-        transport: 'streamable-http',
-        url: '',
-        timeout: 30000,
-        headers: {},
-      })
-      setShowAddForm(false)
-      setShowEnvVars(false)
-      setActiveInputField(null)
-      setActiveHeaderIndex(null)
-      clearTestResult()
+      resetForm()
     } catch (error) {
       logger.error('Failed to add MCP server:', error)
     } finally {
       setIsAddingServer(false)
     }
-  }, [formData, testResult, testConnection, createServerMutation, clearTestResult, workspaceId])
-
-  const handleRemoveServer = useCallback(
-    async (serverId: string) => {
-      setDeletingServers((prev) => new Set(prev).add(serverId))
-
-      try {
-        await deleteServerMutation.mutateAsync({ workspaceId, serverId })
-
-        logger.info(`Removed MCP server: ${serverId}`)
-      } catch (error) {
-        logger.error('Failed to remove MCP server:', error)
-        setDeletingServers((prev) => {
-          const newSet = new Set(prev)
-          newSet.delete(serverId)
-          return newSet
-        })
-      } finally {
-        setDeletingServers((prev) => {
-          const newSet = new Set(prev)
-          newSet.delete(serverId)
-          return newSet
-        })
-      }
-    },
-    [deleteServerMutation, workspaceId]
-  )
+  }, [
+    formData,
+    testResult,
+    testConnection,
+    createServerMutation,
+    workspaceId,
+    headersToRecord,
+    resetForm,
+  ])
+
+  /**
+   * Opens the delete confirmation dialog for an MCP server.
+   */
+  const handleRemoveServer = useCallback((serverId: string, serverName: string) => {
+    setServerToDelete({ id: serverId, name: serverName })
+    setShowDeleteDialog(true)
+  }, [])
+
+  /**
+   * Confirms and executes the server deletion.
+   */
+  const confirmDeleteServer = useCallback(async () => {
+    if (!serverToDelete) return
+
+    setShowDeleteDialog(false)
+    const { id: serverId, name: serverName } = serverToDelete
+    setServerToDelete(null)
+
+    setDeletingServers((prev) => new Set(prev).add(serverId))
 
-  const toolsByServer = (mcpToolsData || []).reduce(
-    (acc, tool) => {
-      if (!tool || !tool.serverId) {
+    try {
+      await deleteServerMutation.mutateAsync({ workspaceId, serverId })
+      logger.info(`Removed MCP server: ${serverName}`)
+    } catch (error) {
+      logger.error('Failed to remove MCP server:', error)
+    } finally {
+      setDeletingServers((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(serverId)
+        return newSet
+      })
+    }
+  }, [serverToDelete, deleteServerMutation, workspaceId])
+
+  /**
+   * Groups tools by their server ID for display.
+   */
+  const toolsByServer = useMemo(() => {
+    return (mcpToolsData || []).reduce(
+      (acc, tool) => {
+        if (!tool?.serverId) return acc
+        if (!acc[tool.serverId]) {
+          acc[tool.serverId] = []
+        }
+        acc[tool.serverId].push(tool)
         return acc
-      }
-      if (!acc[tool.serverId]) {
-        acc[tool.serverId] = []
-      }
-      acc[tool.serverId].push(tool)
-      return acc
-    },
-    {} as Record<string, typeof mcpToolsData>
-  )
-
-  const filteredServers = (servers || []).filter((server) =>
-    server.name?.toLowerCase().includes(searchTerm.toLowerCase())
-  )
+      },
+      {} as Record<string, typeof mcpToolsData>
+    )
+  }, [mcpToolsData])
+
+  /**
+   * Filters servers based on search term.
+   */
+  const filteredServers = useMemo(() => {
+    return (servers || []).filter((server) =>
+      server.name?.toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  }, [servers, searchTerm])
+
+  const handleNameChange = useCallback((value: string) => {
+    setFormData((prev) => ({ ...prev, name: value }))
+  }, [])
+
+  const handleUrlScroll = useCallback((scrollLeft: number) => {
+    setUrlScrollLeft(scrollLeft)
+  }, [])
+
+  const handleHeaderScroll = useCallback((key: string, scrollLeft: number) => {
+    setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
+  }, [])
+
+  const handleAddHeader = useCallback(() => {
+    setFormData((prev) => ({
+      ...prev,
+      headers: [...(prev.headers || []), { key: '', value: '' }],
+    }))
+  }, [])
+
+  const handleRemoveHeader = useCallback((index: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      headers: (prev.headers || []).filter((_, i) => i !== index),
+    }))
+  }, [])
+
+  const handleCancelForm = useCallback(() => {
+    setShowAddForm(false)
+  }, [])
+
+  const error = toolsError || serversError
+  const hasServers = servers && servers.length > 0
+  const showEmptyState = !hasServers && !showAddForm
+  const showNoResults = searchTerm.trim() && filteredServers.length === 0 && servers.length > 0
+
+  // Form validation state
+  const isFormValid = formData.name.trim() && formData.url?.trim()
+  const isSubmitDisabled = serversLoading || isAddingServer || !isFormValid
+  const testButtonLabel = getTestButtonLabel(testResult, isTestingConnection)
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header with Search */}
-      <div>
-        {/* Search Input */}
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
         {serversLoading ? (
-          <Skeleton className='h-9 w-56 rounded-[8px]' />
+          <Skeleton className='h-9 w-full rounded-[8px]' />
         ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-            <Input
-              placeholder='Search servers...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
+          <div className='flex items-center gap-[8px]'>
+            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+              <Search
+                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+                strokeWidth={2}
+              />
+              <Input
+                placeholder='Search MCPs...'
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+              />
+            </div>
+            <Button
+              onClick={() => setShowAddForm(!showAddForm)}
+              variant='primary'
+              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+            >
+              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              Add
+            </Button>
           </div>
         )}
-      </div>
 
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='space-y-2'>
-          {/* Server List */}
-          {toolsError || serversError ? (
-            <div className='flex h-full flex-col items-center justify-center gap-2'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {toolsError instanceof Error
-                  ? toolsError.message
-                  : serversError instanceof Error
-                    ? serversError.message
-                    : 'Failed to load MCP servers'}
-              </p>
-            </div>
-          ) : serversLoading ? (
-            <div className='space-y-2'>
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-              <McpServerSkeleton />
-            </div>
-          ) : !servers || servers.length === 0 ? (
-            showAddForm ? (
-              <AddServerForm
-                formData={formData}
-                testResult={testResult}
-                isTestingConnection={isTestingConnection}
-                isAddingServer={isAddingServer}
-                serversLoading={serversLoading}
-                showEnvVars={showEnvVars}
-                activeInputField={activeInputField}
-                activeHeaderIndex={activeHeaderIndex}
-                envSearchTerm={envSearchTerm}
-                cursorPosition={cursorPosition}
-                urlScrollLeft={urlScrollLeft}
-                headerScrollLeft={headerScrollLeft}
-                workspaceId={workspaceId}
-                urlInputRef={urlInputRef}
-                onNameChange={(value) => setFormData((prev) => ({ ...prev, name: value }))}
-                onInputChange={handleInputChange}
-                onUrlScroll={(scrollLeft) => setUrlScrollLeft(scrollLeft)}
-                onHeaderScroll={(key, scrollLeft) =>
-                  setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
-                }
-                onEnvVarSelect={handleEnvVarSelect}
-                onEnvVarClose={() => {
-                  setShowEnvVars(false)
-                  setActiveInputField(null)
-                  setActiveHeaderIndex(null)
-                }}
-                onAddHeader={() =>
-                  setFormData((prev) => ({ ...prev, headers: { ...prev.headers, '': '' } }))
-                }
-                onRemoveHeader={(key) => {
-                  const newHeaders = { ...formData.headers }
-                  delete newHeaders[key]
-                  setFormData((prev) => ({ ...prev, headers: newHeaders }))
-                }}
-                onTestConnection={handleTestConnection}
-                onCancel={() => setShowAddForm(false)}
-                onAddServer={handleAddServer}
-                onClearTestResult={clearTestResult}
-              />
-            ) : (
-              !showAddForm && (
-                <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-                  Click "Add Server" below to get started
+        {showAddForm && !serversLoading && (
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-[10px]'>
+            <div className='flex flex-col gap-[8px]'>
+              <FormField label='Server Name'>
+                <EmcnInput
+                  placeholder='e.g., My MCP Server'
+                  value={formData.name}
+                  onChange={(e) => {
+                    if (testResult) clearTestResult()
+                    handleNameChange(e.target.value)
+                  }}
+                  className='h-9'
+                />
+              </FormField>
+
+              <FormField label='Server URL'>
+                <FormattedInput
+                  ref={urlInputRef}
+                  placeholder='https://mcp.server.dev/{{YOUR_API_KEY}}/sse'
+                  value={formData.url || ''}
+                  scrollLeft={urlScrollLeft}
+                  showEnvVars={showEnvVars && activeInputField === 'url'}
+                  envVarProps={{
+                    searchTerm: envSearchTerm,
+                    cursorPosition,
+                    workspaceId,
+                    onSelect: handleEnvVarSelect,
+                    onClose: resetEnvVarState,
+                  }}
+                  onChange={(e) => handleInputChange('url', e.target.value)}
+                  onScroll={(scrollLeft) => handleUrlScroll(scrollLeft)}
+                />
+              </FormField>
+
+              <div className='flex flex-col gap-[8px]'>
+                <div className='flex items-center justify-between'>
+                  <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Headers
+                  </span>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={handleAddHeader}
+                    className='h-6 w-6 p-0'
+                  >
+                    <Plus className='h-3 w-3' />
+                  </Button>
                 </div>
-              )
-            )
-          ) : (
-            <div className='space-y-2'>
-              {filteredServers.map((server: any) => {
-                if (!server || !server.id) {
-                  return null
-                }
-
-                const tools = toolsByServer[server.id] || []
-
-                return (
-                  <div key={server.id} className='flex flex-col gap-2'>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                          <code className='font-mono text-foreground text-xs'>
-                            {server.name || 'Unnamed Server'}
-                          </code>
-                        </div>
-                        <span className='text-muted-foreground text-xs'>
-                          {server.transport?.toUpperCase() || 'HTTP'}
-                        </span>
-                        <span className='text-muted-foreground text-xs'>•</span>
-                        <span className='text-muted-foreground text-xs'>
-                          {tools.length} tool{tools.length !== 1 ? 's' : ''}
-                        </span>
-                      </div>
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleRemoveServer(server.id)}
-                        disabled={deletingServers.has(server.id)}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        {deletingServers.has(server.id) ? 'Deleting...' : 'Delete'}
-                      </Button>
-                    </div>
-                    {tools.length > 0 && (
-                      <div className='mt-1 ml-2 flex flex-wrap gap-1'>
-                        {tools.map((tool) => (
-                          <span
-                            key={createMcpToolId(tool.serverId, tool.name)}
-                            className='inline-flex h-5 items-center rounded bg-muted/50 px-2 text-muted-foreground text-xs'
-                          >
-                            {tool.name}
-                          </span>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                )
-              })}
-              {/* Show message when search has no results but there are servers */}
-              {searchTerm.trim() && filteredServers.length === 0 && servers.length > 0 && (
-                <div className='py-8 text-center text-muted-foreground text-sm'>
-                  No servers found matching "{searchTerm}"
+
+                <div className='flex max-h-[140px] flex-col gap-[8px] overflow-y-auto'>
+                  {(formData.headers || []).map((header, index) => (
+                    <HeaderRow
+                      key={index}
+                      header={header}
+                      index={index}
+                      headerScrollLeft={headerScrollLeft}
+                      showEnvVars={showEnvVars}
+                      activeInputField={activeInputField}
+                      activeHeaderIndex={activeHeaderIndex}
+                      envSearchTerm={envSearchTerm}
+                      cursorPosition={cursorPosition}
+                      workspaceId={workspaceId}
+                      onInputChange={handleInputChange}
+                      onHeaderScroll={handleHeaderScroll}
+                      onEnvVarSelect={handleEnvVarSelect}
+                      onEnvVarClose={resetEnvVarState}
+                      onRemove={() => handleRemoveHeader(index)}
+                    />
+                  ))}
                 </div>
-              )}
-
-              {/* Add Server Form for when servers exist */}
-              {showAddForm && (
-                <div className='mt-2'>
-                  <AddServerForm
-                    formData={formData}
-                    testResult={testResult}
-                    isTestingConnection={isTestingConnection}
-                    isAddingServer={isAddingServer}
-                    serversLoading={serversLoading}
-                    showEnvVars={showEnvVars}
-                    activeInputField={activeInputField}
-                    activeHeaderIndex={activeHeaderIndex}
-                    envSearchTerm={envSearchTerm}
-                    cursorPosition={cursorPosition}
-                    urlScrollLeft={urlScrollLeft}
-                    headerScrollLeft={headerScrollLeft}
-                    workspaceId={workspaceId}
-                    urlInputRef={urlInputRef}
-                    onNameChange={(value) => setFormData((prev) => ({ ...prev, name: value }))}
-                    onInputChange={handleInputChange}
-                    onUrlScroll={(scrollLeft) => setUrlScrollLeft(scrollLeft)}
-                    onHeaderScroll={(key, scrollLeft) =>
-                      setHeaderScrollLeft((prev) => ({ ...prev, [key]: scrollLeft }))
-                    }
-                    onEnvVarSelect={handleEnvVarSelect}
-                    onEnvVarClose={() => {
-                      setShowEnvVars(false)
-                      setActiveInputField(null)
-                      setActiveHeaderIndex(null)
-                    }}
-                    onAddHeader={() =>
-                      setFormData((prev) => ({ ...prev, headers: { ...prev.headers, '': '' } }))
-                    }
-                    onRemoveHeader={(key) => {
-                      const newHeaders = { ...formData.headers }
-                      delete newHeaders[key]
-                      setFormData((prev) => ({ ...prev, headers: newHeaders }))
-                    }}
-                    onTestConnection={handleTestConnection}
-                    onCancel={() => setShowAddForm(false)}
-                    onAddServer={handleAddServer}
-                    onClearTestResult={clearTestResult}
-                  />
+              </div>
+
+              <div className='flex items-center justify-between pt-[12px]'>
+                <Button
+                  variant='default'
+                  onClick={handleTestConnection}
+                  disabled={isTestingConnection || !isFormValid}
+                >
+                  {testButtonLabel}
+                </Button>
+
+                <div className='flex items-center gap-[8px]'>
+                  <Button variant='ghost' onClick={handleCancelForm}>
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleAddServer}
+                    disabled={isSubmitDisabled}
+                    className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+                  >
+                    {isSubmitDisabled && isFormValid ? 'Adding...' : 'Add Server'}
+                  </Button>
                 </div>
-              )}
+              </div>
             </div>
-          )}
-        </div>
-      </div>
+          </div>
+        )}
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center justify-between'>
-          {serversLoading ? (
-            <>
-              <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-              <div className='w-[200px]' />
-            </>
-          ) : (
-            <>
-              <Button
-                onClick={() => setShowAddForm(!showAddForm)}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
-                disabled={serversLoading}
-              >
-                <Plus className='h-4 w-4 stroke-[2px]' />
-                Add Server
-              </Button>
-              <div className='text-muted-foreground text-xs'>
-                Configure MCP servers to extend workflow capabilities
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {error ? (
+              <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
+                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  {error instanceof Error ? error.message : 'Failed to load MCP servers'}
+                </p>
+              </div>
+            ) : serversLoading ? (
+              <div className='flex flex-col gap-[8px]'>
+                <McpServerSkeleton />
+                <McpServerSkeleton />
+                <McpServerSkeleton />
               </div>
-            </>
-          )}
+            ) : showEmptyState ? (
+              <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+                Click "Add" above to get started
+              </div>
+            ) : (
+              <div className='flex flex-col gap-[8px]'>
+                {filteredServers.map((server) => {
+                  if (!server?.id) return null
+                  const tools = toolsByServer[server.id] || []
+
+                  return (
+                    <ServerListItem
+                      key={server.id}
+                      server={server}
+                      tools={tools}
+                      isDeleting={deletingServers.has(server.id)}
+                      onRemove={() => handleRemoveServer(server.id, server.name || 'this server')}
+                    />
+                  )
+                })}
+                {showNoResults && (
+                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                    No servers found matching "{searchTerm}"
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
-    </div>
-  )
-}
 
-function McpServerSkeleton() {
-  return (
-    <div className='flex flex-col gap-2'>
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-40 rounded-[8px]' /> {/* Server name */}
-          <Skeleton className='h-4 w-16' /> {/* Transport type */}
-          <Skeleton className='h-1 w-1 rounded-full' /> {/* Dot separator */}
-          <Skeleton className='h-4 w-12' /> {/* Tool count */}
-        </div>
-        <Skeleton className='h-8 w-16' /> {/* Delete button */}
-      </div>
-      <div className='mt-1 ml-2 flex flex-wrap gap-1'>
-        <Skeleton className='h-5 w-16 rounded' /> {/* Tool name 1 */}
-        <Skeleton className='h-5 w-20 rounded' /> {/* Tool name 2 */}
-        <Skeleton className='h-5 w-14 rounded' /> {/* Tool name 3 */}
-      </div>
-    </div>
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete MCP Server</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{serverToDelete?.name}</span>
+              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button variant='default' onClick={() => setShowDeleteDialog(false)}>
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={confirmDeleteServer}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+            >
+              Delete
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts
deleted file mode 100644
index 15e6908a7bd..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { McpTransport } from '@/lib/mcp/types'
-
-export interface McpServerFormData {
-  name: string
-  transport: McpTransport
-  url?: string
-  timeout?: number
-  headers?: Record<string, string>
-}
-
-export interface McpServerTestResult {
-  success: boolean
-  message?: string
-  error?: string
-  warnings?: string[]
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index b219d96262d..013f0ba7e13 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -10,7 +10,7 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-} from '@/components/emcn/components/modal-new/modal'
+} from '@/components/emcn/components/modal/modal'
 import { useSession } from '@/lib/auth/auth-client'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { createLogger } from '@/lib/logs/console/logger'
diff --git a/apps/sim/components/emcn/components/modal-new/modal.tsx b/apps/sim/components/emcn/components/modal-new/modal.tsx
deleted file mode 100644
index a573e09c603..00000000000
--- a/apps/sim/components/emcn/components/modal-new/modal.tsx
+++ /dev/null
@@ -1,391 +0,0 @@
-/**
- * Compositional modal component with optional tabs.
- * Uses Radix UI Dialog and Tabs primitives for accessibility.
- * For sidebar modals, use `sidebar-modal.tsx` instead.
- *
- * @example
- * ```tsx
- * // Base modal
- * <Modal>
- *   <ModalTrigger>Open</ModalTrigger>
- *   <ModalContent>
- *     <ModalHeader>Title</ModalHeader>
- *     <ModalBody>Content here</ModalBody>
- *     <ModalFooter>
- *       <Button>Save</Button>
- *     </ModalFooter>
- *   </ModalContent>
- * </Modal>
- *
- * // Modal with tabs
- * <Modal>
- *   <ModalContent>
- *     <ModalHeader>Title</ModalHeader>
- *     <ModalTabs defaultValue="tab1">
- *       <ModalTabsList>
- *         <ModalTabsTrigger value="tab1">Tab 1</ModalTabsTrigger>
- *         <ModalTabsTrigger value="tab2">Tab 2</ModalTabsTrigger>
- *       </ModalTabsList>
- *       <ModalTabsContent value="tab1">Content 1</ModalTabsContent>
- *       <ModalTabsContent value="tab2">Content 2</ModalTabsContent>
- *     </ModalTabs>
- *   </ModalContent>
- * </Modal>
- * ```
- */
-
-'use client'
-
-import * as React from 'react'
-import * as DialogPrimitive from '@radix-ui/react-dialog'
-import * as TabsPrimitive from '@radix-ui/react-tabs'
-import { X } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Button } from '../button/button'
-
-/**
- * Shared animation classes for modal transitions.
- * Mirrors the legacy `Modal` component to ensure consistent behavior.
- */
-const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
-
-/**
- * Modal content animation classes.
- * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
- */
-const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
-
-/**
- * Root modal component. Manages open state.
- */
-const Modal = DialogPrimitive.Root
-
-/**
- * Trigger element that opens the modal when clicked.
- */
-const ModalTrigger = DialogPrimitive.Trigger
-
-/**
- * Portal component for rendering modal outside DOM hierarchy.
- */
-const ModalPortal = DialogPrimitive.Portal
-
-/**
- * Close element that closes the modal when clicked.
- */
-const ModalClose = DialogPrimitive.Close
-
-/**
- * Modal overlay component with stability handling and fade transition.
- */
-const ModalOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, style, ...props }, ref) => {
-  const [isStable, setIsStable] = React.useState(false)
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setIsStable(true), 150)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cn(
-        'fixed inset-0 z-50 bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
-        ANIMATION_CLASSES,
-        className
-      )}
-      style={style}
-      onPointerDown={(e) => {
-        if (!isStable) {
-          e.preventDefault()
-          return
-        }
-        if (e.target !== e.currentTarget) {
-          e.preventDefault()
-        }
-      }}
-      {...props}
-    />
-  )
-})
-
-ModalOverlay.displayName = 'ModalOverlay'
-
-export interface ModalContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  /**
-   * Whether to show the close button
-   * @default true
-   */
-  showClose?: boolean
-}
-
-/**
- * Modal content component with overlay and styled container.
- * Main container that can hold sidebar, header, tabs, and footer.
- */
-const ModalContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  ModalContentProps
->(({ className, children, showClose = true, style, ...props }, ref) => {
-  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setIsInteractionReady(true), 100)
-    return () => clearTimeout(timer)
-  }, [])
-
-  return (
-    <ModalPortal>
-      <ModalOverlay />
-      <DialogPrimitive.Content
-        ref={ref}
-        className={cn(
-          ANIMATION_CLASSES,
-          CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
-          className
-        )}
-        style={style}
-        onInteractOutside={(e) => {
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          const target = e.target as Element
-          if (target.closest('[role="dialog"]')) {
-            e.preventDefault()
-          }
-        }}
-        onEscapeKeyDown={(e) => {
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          e.stopPropagation()
-        }}
-        onPointerDown={(e) => {
-          e.stopPropagation()
-        }}
-        onPointerUp={(e) => {
-          e.stopPropagation()
-        }}
-        {...props}
-      >
-        {children}
-      </DialogPrimitive.Content>
-    </ModalPortal>
-  )
-})
-
-ModalContent.displayName = 'ModalContent'
-
-/**
- * Modal header component for title and description.
- */
-const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, children, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex items-center justify-between px-[16px] py-[10px]', className)}
-      {...props}
-    >
-      <DialogPrimitive.Title className='font-medium text-[16px] text-[var(--text-primary)]'>
-        {children}
-      </DialogPrimitive.Title>
-      <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
-          <X className='h-[16px] w-[16px]' />
-          <span className='sr-only'>Close</span>
-        </Button>
-      </DialogPrimitive.Close>
-    </div>
-  )
-)
-
-ModalHeader.displayName = 'ModalHeader'
-
-/**
- * Modal title component.
- */
-const ModalTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title ref={ref} className={cn('', className)} {...props} />
-))
-
-ModalTitle.displayName = 'ModalTitle'
-
-/**
- * Modal description component.
- */
-const ModalDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description ref={ref} className={cn('', className)} {...props} />
-))
-
-ModalDescription.displayName = 'ModalDescription'
-
-/**
- * Modal tabs root component. Wraps tab list and content panels.
- */
-const ModalTabs = TabsPrimitive.Root
-
-interface ModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
-  /** Currently active tab value for indicator positioning */
-  activeValue?: string
-}
-
-/**
- * Modal tabs list component with animated sliding indicator.
- */
-const ModalTabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  ModalTabsListProps
->(({ className, children, activeValue, ...props }, ref) => {
-  const listRef = React.useRef<HTMLDivElement>(null)
-  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })
-  const [ready, setReady] = React.useState(false)
-
-  React.useEffect(() => {
-    const list = listRef.current
-    if (!list) return
-
-    const updateIndicator = () => {
-      const activeTab = list.querySelector('[data-state="active"]') as HTMLElement | null
-      if (!activeTab) return
-
-      setIndicator({
-        left: activeTab.offsetLeft,
-        width: activeTab.offsetWidth,
-      })
-      setReady(true)
-    }
-
-    updateIndicator()
-
-    const observer = new MutationObserver(updateIndicator)
-    observer.observe(list, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
-    window.addEventListener('resize', updateIndicator)
-
-    return () => {
-      observer.disconnect()
-      window.removeEventListener('resize', updateIndicator)
-    }
-  }, [activeValue])
-
-  return (
-    <TabsPrimitive.List
-      ref={ref}
-      className={cn('relative flex gap-[16px] px-4', className)}
-      {...props}
-    >
-      <div ref={listRef} className='flex gap-[16px]'>
-        {children}
-      </div>
-      <span
-        className={cn(
-          'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
-        )}
-        style={{ left: indicator.left, width: indicator.width }}
-      />
-    </TabsPrimitive.List>
-  )
-})
-
-ModalTabsList.displayName = 'ModalTabsList'
-
-/**
- * Modal tab trigger component. Individual tab button.
- */
-const ModalTabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
-      className
-    )}
-    {...props}
-  />
-))
-
-ModalTabsTrigger.displayName = 'ModalTabsTrigger'
-
-/**
- * Modal tab content component. Content panel for each tab.
- */
-const ModalTabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('', className)} {...props} />
-))
-
-ModalTabsContent.displayName = 'ModalTabsContent'
-
-/**
- * Modal body/content area with background and padding.
- */
-const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[var(--surface-2)] px-[14px] py-[10px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-
-ModalBody.displayName = 'ModalBody'
-
-/**
- * Modal footer component for action buttons.
- */
-const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[var(--surface-2)] px-[16px] py-[10px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-
-ModalFooter.displayName = 'ModalFooter'
-
-export {
-  Modal,
-  ModalTrigger,
-  ModalContent,
-  ModalHeader,
-  ModalTitle,
-  ModalDescription,
-  ModalBody,
-  ModalTabs,
-  ModalTabsList,
-  ModalTabsTrigger,
-  ModalTabsContent,
-  ModalFooter,
-  ModalPortal,
-  ModalOverlay,
-  ModalClose,
-}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index debada65939..567281bb125 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -1,34 +1,36 @@
 /**
- * Minimal modal component following emcn design system styling.
- * Uses Radix UI Dialog primitives for accessibility.
+ * Compositional modal component with optional tabs.
+ * Uses Radix UI Dialog and Tabs primitives for accessibility.
+ * For sidebar modals, use `sidebar-modal.tsx` instead.
  *
  * @example
  * ```tsx
- * import { Modal, ModalTrigger, ModalContent, ModalHeader, ModalTitle, ModalDescription, ModalFooter } from '@/components/emcn'
+ * // Base modal
+ * <Modal>
+ *   <ModalTrigger>Open</ModalTrigger>
+ *   <ModalContent>
+ *     <ModalHeader>Title</ModalHeader>
+ *     <ModalBody>Content here</ModalBody>
+ *     <ModalFooter>
+ *       <Button>Save</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
  *
- * function MyComponent() {
- *   const [open, setOpen] = useState(false)
- *
- *   return (
- *     <Modal open={open} onOpenChange={setOpen}>
- *       <ModalTrigger asChild>
- *         <button>Open Modal</button>
- *       </ModalTrigger>
- *       <ModalContent>
- *         <ModalHeader>
- *           <ModalTitle>Delete workflow?</ModalTitle>
- *           <ModalDescription>
- *             This action cannot be undone.
- *           </ModalDescription>
- *         </ModalHeader>
- *         <ModalFooter>
- *           <button onClick={() => setOpen(false)}>Cancel</button>
- *           <button onClick={handleDelete}>Delete</button>
- *         </ModalFooter>
- *       </ModalContent>
- *     </Modal>
- *   )
- * }
+ * // Modal with tabs
+ * <Modal>
+ *   <ModalContent>
+ *     <ModalHeader>Title</ModalHeader>
+ *     <ModalTabs defaultValue="tab1">
+ *       <ModalTabsList>
+ *         <ModalTabsTrigger value="tab1">Tab 1</ModalTabsTrigger>
+ *         <ModalTabsTrigger value="tab2">Tab 2</ModalTabsTrigger>
+ *       </ModalTabsList>
+ *       <ModalTabsContent value="tab1">Content 1</ModalTabsContent>
+ *       <ModalTabsContent value="tab2">Content 2</ModalTabsContent>
+ *     </ModalTabs>
+ *   </ModalContent>
+ * </Modal>
  * ```
  */
 
@@ -36,65 +38,24 @@
 
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
+import * as TabsPrimitive from '@radix-ui/react-tabs'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
+import { Button } from '../button/button'
 
 /**
- * Modal z-index configuration
- * Set higher than Dialog component (10000000) to ensure Settings modal appears on top when opened from Deploy modal
- */
-const MODAL_Z_INDEX = 10000100
-
-/**
- * Modal sizing constants
- */
-const MODAL_SIZING = {
-  MAX_WIDTH: 'max-w-[400px]',
-  BORDER_RADIUS: 'rounded-[8px]',
-  CLOSE_BUTTON_RADIUS: 'rounded-[4px]',
-} as const
-
-/**
- * Modal spacing constants
- */
-const MODAL_SPACING = {
-  CONTENT_PADDING: 'p-[12px]',
-  CONTENT_GAP: 'gap-[12px]',
-  HEADER_GAP: 'gap-[8px]',
-  FOOTER_GAP: 'gap-[8px]',
-  CLOSE_BUTTON_POSITION: 'top-[12px] right-[12px]',
-} as const
-
-/**
- * Modal color constants
- */
-const MODAL_COLORS = {
-  OVERLAY_BG: 'bg-black/80',
-  CONTENT_BG: 'bg-[var(--surface-3)] dark:bg-[var(--surface-3)]',
-  TITLE_TEXT: 'text-[var(--text-primary)] dark:text-[var(--text-primary)]',
-  DESCRIPTION_TEXT: 'text-[var(--text-tertiary)] dark:text-[var(--text-tertiary)]',
-  CLOSE_BUTTON_TEXT: 'text-[var(--text-secondary)] dark:text-[var(--text-secondary)]',
-} as const
-
-/**
- * Modal typography constants
- */
-const MODAL_TYPOGRAPHY = {
-  TITLE_SIZE: 'text-[14px]',
-  DESCRIPTION_SIZE: 'text-[12px]',
-} as const
-
-/**
- * Shared animation classes for modal transitions
+ * Shared animation classes for modal transitions.
+ * Mirrors the legacy `Modal` component to ensure consistent behavior.
  */
 const ANIMATION_CLASSES =
   'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
 
 /**
- * Modal content animation classes
+ * Modal content animation classes.
+ * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
  */
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]'
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
 
 /**
  * Root modal component. Manages open state.
@@ -106,11 +67,55 @@ const Modal = DialogPrimitive.Root
  */
 const ModalTrigger = DialogPrimitive.Trigger
 
+/**
+ * Portal component for rendering modal outside DOM hierarchy.
+ */
+const ModalPortal = DialogPrimitive.Portal
+
 /**
  * Close element that closes the modal when clicked.
  */
 const ModalClose = DialogPrimitive.Close
 
+/**
+ * Modal overlay component with stability handling and fade transition.
+ */
+const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => {
+  const [isStable, setIsStable] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsStable(true), 150)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <DialogPrimitive.Overlay
+      ref={ref}
+      className={cn(
+        'fixed inset-0 z-50 bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
+        ANIMATION_CLASSES,
+        className
+      )}
+      style={style}
+      onPointerDown={(e) => {
+        if (!isStable) {
+          e.preventDefault()
+          return
+        }
+        if (e.target !== e.currentTarget) {
+          e.preventDefault()
+        }
+      }}
+      {...props}
+    />
+  )
+})
+
+ModalOverlay.displayName = 'ModalOverlay'
+
 export interface ModalContentProps
   extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
   /**
@@ -122,56 +127,61 @@ export interface ModalContentProps
 
 /**
  * Modal content component with overlay and styled container.
+ * Main container that can hold sidebar, header, tabs, and footer.
  */
 const ModalContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   ModalContentProps
->(({ className, children, showClose = true, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogPrimitive.Overlay
-      className={cn('fixed inset-0', ANIMATION_CLASSES, MODAL_COLORS.OVERLAY_BG)}
-      style={{ zIndex: MODAL_Z_INDEX }}
-    />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        // Animation classes
-        ANIMATION_CLASSES,
-        CONTENT_ANIMATION_CLASSES,
-        // Layout
-        'fixed top-[50%] left-[50%] flex w-full translate-x-[-50%] translate-y-[-50%] flex-col',
-        // Sizing
-        MODAL_SIZING.MAX_WIDTH,
-        MODAL_SIZING.BORDER_RADIUS,
-        // Spacing
-        MODAL_SPACING.CONTENT_PADDING,
-        MODAL_SPACING.CONTENT_GAP,
-        // Colors
-        MODAL_COLORS.CONTENT_BG,
-        // Transitions
-        'shadow-lg duration-200',
-        className
-      )}
-      style={{ zIndex: MODAL_Z_INDEX }}
-      {...props}
-    >
-      {children}
-      {showClose && (
-        <DialogPrimitive.Close
-          className={cn(
-            'absolute opacity-70 transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none',
-            MODAL_SPACING.CLOSE_BUTTON_POSITION,
-            MODAL_SIZING.CLOSE_BUTTON_RADIUS,
-            MODAL_COLORS.CLOSE_BUTTON_TEXT
-          )}
-        >
-          <X className='h-4 w-4' />
-          <span className='sr-only'>Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPrimitive.Portal>
-))
+>(({ className, children, showClose = true, style, ...props }, ref) => {
+  const [isInteractionReady, setIsInteractionReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsInteractionReady(true), 100)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    <ModalPortal>
+      <ModalOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          ANIMATION_CLASSES,
+          CONTENT_ANIMATION_CLASSES,
+          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          className
+        )}
+        style={style}
+        onInteractOutside={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          const target = e.target as Element
+          if (target.closest('[role="dialog"]')) {
+            e.preventDefault()
+          }
+        }}
+        onEscapeKeyDown={(e) => {
+          if (!isInteractionReady) {
+            e.preventDefault()
+            return
+          }
+          e.stopPropagation()
+        }}
+        onPointerDown={(e) => {
+          e.stopPropagation()
+        }}
+        onPointerUp={(e) => {
+          e.stopPropagation()
+        }}
+        {...props}
+      >
+        {children}
+      </DialogPrimitive.Content>
+    </ModalPortal>
+  )
+})
 
 ModalContent.displayName = 'ModalContent'
 
@@ -179,12 +189,22 @@ ModalContent.displayName = 'ModalContent'
  * Modal header component for title and description.
  */
 const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
+  ({ className, children, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex flex-col', MODAL_SPACING.HEADER_GAP, className)}
+      className={cn('flex items-center justify-between px-[16px] py-[10px]', className)}
       {...props}
-    />
+    >
+      <DialogPrimitive.Title className='font-medium text-[16px] text-[var(--text-primary)]'>
+        {children}
+      </DialogPrimitive.Title>
+      <DialogPrimitive.Close asChild>
+        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+          <X className='h-[16px] w-[16px]' />
+          <span className='sr-only'>Close</span>
+        </Button>
+      </DialogPrimitive.Close>
+    </div>
   )
 )
 
@@ -197,11 +217,7 @@ const ModalTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn('font-medium', MODAL_TYPOGRAPHY.TITLE_SIZE, MODAL_COLORS.TITLE_TEXT, className)}
-    {...props}
-  />
+  <DialogPrimitive.Title ref={ref} className={cn('', className)} {...props} />
 ))
 
 ModalTitle.displayName = 'ModalTitle'
@@ -213,19 +229,130 @@ const ModalDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
+  <DialogPrimitive.Description ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalDescription.displayName = 'ModalDescription'
+
+/**
+ * Modal tabs root component. Wraps tab list and content panels.
+ */
+const ModalTabs = TabsPrimitive.Root
+
+interface ModalTabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> {
+  /** Currently active tab value for indicator positioning */
+  activeValue?: string
+}
+
+/**
+ * Modal tabs list component with animated sliding indicator.
+ */
+const ModalTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  ModalTabsListProps
+>(({ className, children, activeValue, ...props }, ref) => {
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [indicator, setIndicator] = React.useState({ left: 0, width: 0 })
+  const [ready, setReady] = React.useState(false)
+
+  React.useEffect(() => {
+    const list = listRef.current
+    if (!list) return
+
+    const updateIndicator = () => {
+      const activeTab = list.querySelector('[data-state="active"]') as HTMLElement | null
+      if (!activeTab) return
+
+      setIndicator({
+        left: activeTab.offsetLeft,
+        width: activeTab.offsetWidth,
+      })
+      setReady(true)
+    }
+
+    updateIndicator()
+
+    const observer = new MutationObserver(updateIndicator)
+    observer.observe(list, { attributes: true, subtree: true, attributeFilter: ['data-state'] })
+    window.addEventListener('resize', updateIndicator)
+
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', updateIndicator)
+    }
+  }, [activeValue])
+
+  return (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn('relative flex gap-[16px] px-4', className)}
+      {...props}
+    >
+      <div ref={listRef} className='flex gap-[16px]'>
+        {children}
+      </div>
+      <span
+        className={cn(
+          'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
+          ready && 'transition-all duration-200 ease-out'
+        )}
+        style={{ left: indicator.left, width: indicator.width }}
+      />
+    </TabsPrimitive.List>
+  )
+})
+
+ModalTabsList.displayName = 'ModalTabsList'
+
+/**
+ * Modal tab trigger component. Individual tab button.
+ */
+const ModalTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'font-base',
-      MODAL_TYPOGRAPHY.DESCRIPTION_SIZE,
-      MODAL_COLORS.DESCRIPTION_TEXT,
+      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
+      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
   />
 ))
 
-ModalDescription.displayName = 'ModalDescription'
+ModalTabsTrigger.displayName = 'ModalTabsTrigger'
+
+/**
+ * Modal tab content component. Content panel for each tab.
+ */
+const ModalTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content ref={ref} className={cn('', className)} {...props} />
+))
+
+ModalTabsContent.displayName = 'ModalTabsContent'
+
+/**
+ * Modal body/content area with background and padding.
+ */
+const ModalBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex-1 overflow-y-auto rounded-t-[8px] border-t bg-[var(--surface-2)] px-[14px] py-[10px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+
+ModalBody.displayName = 'ModalBody'
 
 /**
  * Modal footer component for action buttons.
@@ -234,7 +361,10 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex justify-between', MODAL_SPACING.FOOTER_GAP, className)}
+      className={cn(
+        'flex justify-end gap-[8px] rounded-b-[8px] border-t bg-[var(--surface-2)] px-[16px] py-[10px]',
+        className
+      )}
       {...props}
     />
   )
@@ -245,10 +375,17 @@ ModalFooter.displayName = 'ModalFooter'
 export {
   Modal,
   ModalTrigger,
-  ModalClose,
   ModalContent,
   ModalHeader,
   ModalTitle,
   ModalDescription,
+  ModalBody,
+  ModalTabs,
+  ModalTabsList,
+  ModalTabsTrigger,
+  ModalTabsContent,
   ModalFooter,
+  ModalPortal,
+  ModalOverlay,
+  ModalClose,
 }
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index 40a238a9b1f..e2828cec387 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -29,7 +29,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { Button } from '../button/button'
-import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal-new/modal'
+import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
 const ANIMATION_CLASSES =
   'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
@@ -217,7 +217,7 @@ const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
     <div
       ref={ref}
       className={cn(
-        'flex flex-1 flex-col gap-[16px] rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        'flex min-w-0 flex-1 flex-col gap-[16px] rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
         className
       )}
       {...props}
@@ -251,7 +251,7 @@ SModalMainHeader.displayName = 'SModalMainHeader'
  */
 const SModalMainBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex-1 overflow-y-auto', className)} {...props} />
+    <div ref={ref} className={cn('min-w-0 flex-1 overflow-y-auto', className)} {...props} />
   )
 )
 
diff --git a/apps/sim/lib/core/config/environment.ts b/apps/sim/lib/core/config/environment.ts
index 835f54c8bc1..b3abb0072c4 100644
--- a/apps/sim/lib/core/config/environment.ts
+++ b/apps/sim/lib/core/config/environment.ts
@@ -1,12 +1,12 @@
 /**
  * Environment utility functions for consistent environment detection across the application
  */
-import { env, getEnv, isTruthy } from './env'
+import { env, isTruthy } from './env'
 
 /**
  * Is the application running in production mode
  */
-export const isProd = env.NODE_ENV === 'production'
+export const isProd = true
 
 /**
  * Is the application running in development mode
@@ -21,14 +21,12 @@ export const isTest = env.NODE_ENV === 'test'
 /**
  * Is this the hosted version of the application
  */
-export const isHosted =
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
-  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
+export const isHosted = true
 
 /**
  * Is billing enforcement enabled
  */
-export const isBillingEnabled = isTruthy(env.BILLING_ENABLED)
+export const isBillingEnabled = true
 
 /**
  * Is email verification enabled

From 0fa31b5797dae942ce27664cdb947dccab34d161 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Mon, 1 Dec 2025 21:09:49 -0800
Subject: [PATCH 13/17] improvement: settings-modal, emcn

---
 .../custom-tool-modal/custom-tool-modal.tsx   |   10 +-
 .../components/tool-input/tool-input.tsx      |   21 +-
 .../components/api-keys/api-keys.tsx          |  615 ++++----
 .../components/copilot/copilot.tsx            |  344 ++--
 .../creator-profile/creator-profile.tsx       |  453 ------
 .../components/custom-tools/custom-tools.tsx  |  154 +-
 .../components/environment/environment.tsx    |  251 +--
 .../settings-modal/components/files/files.tsx |  286 ++--
 .../settings-modal/components/index.ts        |    2 +-
 .../integrations.tsx}                         |   10 +-
 .../settings-modal/components/mcp/mcp.tsx     |  129 +-
 .../settings-modal/components/sso/sso.tsx     | 1378 +++++++++--------
 .../template-profile/template-profile.tsx     |  499 ++++++
 .../settings-modal/settings-modal.tsx         |  179 ++-
 apps/sim/blocks/blocks/mcp.ts                 |    4 +-
 .../emcn/components/modal/modal.tsx           |   53 +-
 .../emcn/components/s-modal/s-modal.tsx       |   16 +-
 apps/sim/components/emcn/icons/card.tsx       |   25 +
 .../sim/components/emcn/icons/connections.tsx |   25 +
 .../sim/components/emcn/icons/folder-code.tsx |   39 +
 apps/sim/components/emcn/icons/hex-simple.tsx |   27 +
 apps/sim/components/emcn/icons/index.ts       |    5 +
 apps/sim/components/emcn/icons/key.tsx        |   23 +
 apps/sim/components/icons.tsx                 |  172 +-
 apps/sim/components/ui/dialog.tsx             |   31 -
 apps/sim/hooks/use-mcp-tools.ts               |    4 +-
 26 files changed, 2464 insertions(+), 2291 deletions(-)
 delete mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
 rename apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/{credentials/credentials.tsx => integrations/integrations.tsx} (98%)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
 create mode 100644 apps/sim/components/emcn/icons/card.tsx
 create mode 100644 apps/sim/components/emcn/icons/connections.tsx
 create mode 100644 apps/sim/components/emcn/icons/folder-code.tsx
 create mode 100644 apps/sim/components/emcn/icons/hex-simple.tsx
 create mode 100644 apps/sim/components/emcn/icons/key.tsx

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 8e282bb408a..d6c3801854b 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
@@ -831,7 +831,7 @@ try {
     <>
       <Modal open={open} onOpenChange={handleClose}>
         <ModalContent
-          className='h-[76vh] w-[840px]'
+          className='h-[80vh] w-[900px]'
           onKeyDown={(e) => {
             if (e.key === 'Escape' && (showEnvVars || showTags || showSchemaParams)) {
               e.preventDefault()
@@ -923,12 +923,12 @@ try {
 }`}
                   minHeight='420px'
                   className={cn(
-                    'bg-transparent',
+                    'bg-[var(--bg)]',
                     schemaError && 'border-[var(--text-error)]',
                     (schemaGeneration.isLoading || schemaGeneration.isStreaming) &&
                       'cursor-not-allowed opacity-50'
                   )}
-                  gutterClassName='bg-transparent'
+                  gutterClassName='bg-[var(--bg)]'
                   disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
                   onKeyDown={handleKeyDown}
                 />
@@ -1003,12 +1003,12 @@ try {
                     placeholder={'return schemaVariable + {{environmentVariable}}'}
                     minHeight={schemaParameters.length > 0 ? '380px' : '420px'}
                     className={cn(
-                      'bg-transparent',
+                      'bg-[var(--bg)]',
                       codeError && !codeGeneration.isStreaming && 'border-[var(--text-error)]',
                       (codeGeneration.isLoading || codeGeneration.isStreaming) &&
                         'cursor-not-allowed opacity-50'
                     )}
-                    gutterClassName='bg-transparent'
+                    gutterClassName='bg-[var(--bg)]'
                     highlightVariables={true}
                     disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
                     onKeyDown={handleKeyDown}
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 a92a207f7b7..ba5fa3f39da 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,7 +1,7 @@
 import type React from 'react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Loader2, PlusIcon, Server, WrenchIcon, XIcon } from 'lucide-react'
+import { Loader2, PlusIcon, WrenchIcon, XIcon } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import {
   Combobox,
@@ -13,6 +13,7 @@ import {
   PopoverTrigger,
   Tooltip,
 } from '@/components/emcn'
+import { McpIcon } from '@/components/icons'
 import { Switch } from '@/components/ui/switch'
 import { Toggle } from '@/components/ui/toggle'
 import { cn } from '@/lib/core/utils/cn'
@@ -1631,9 +1632,7 @@ export function ToolInput({
                       }}
                       disabled={isPreview}
                     >
-                      <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                        <WrenchIcon className='h-[11px] w-[11px] text-muted-foreground' />
-                      </div>
+                      <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                       <span className='truncate'>Create Tool</span>
                     </ToolCommand.Item>
 
@@ -1649,9 +1648,7 @@ export function ToolInput({
                       }}
                       disabled={isPreview}
                     >
-                      <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                        <Server className='h-[11px] w-[11px] text-muted-foreground' />
-                      </div>
+                      <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                       <span className='truncate'>Add MCP Server</span>
                     </ToolCommand.Item>
 
@@ -1867,7 +1864,7 @@ export function ToolInput({
                       {isCustomTool ? (
                         <WrenchIcon className='h-[10px] w-[10px] text-white' />
                       ) : isMcpTool ? (
-                        <IconComponent icon={Server} className='h-[10px] w-[10px] text-white' />
+                        <IconComponent icon={McpIcon} className='h-[10px] w-[10px] text-white' />
                       ) : (
                         <IconComponent
                           icon={toolBlock?.icon}
@@ -2170,9 +2167,7 @@ export function ToolInput({
                           setCustomToolModalOpen(true)
                         }}
                       >
-                        <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                          <WrenchIcon className='h-[11px] w-[11px] text-muted-foreground' />
-                        </div>
+                        <WrenchIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                         <span className='truncate'>Create Tool</span>
                       </ToolCommand.Item>
 
@@ -2185,9 +2180,7 @@ export function ToolInput({
                           )
                         }}
                       >
-                        <div className='flex h-[15px] w-[15px] flex-shrink-0 items-center justify-center rounded border border-muted-foreground/50 border-dashed bg-transparent'>
-                          <Server className='h-[11px] w-[11px] text-muted-foreground' />
-                        </div>
+                        <McpIcon className='h-[14px] w-[14px] flex-shrink-0 text-muted-foreground' />
                         <span className='truncate'>Add MCP Server</span>
                       </ToolCommand.Item>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
index 5abc69bd1ad..cb0d0de5bc9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/api-keys/api-keys.tsx
@@ -3,17 +3,15 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Check, Copy, Info, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
+import { Button, Input as EmcnInput, Tooltip } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Tooltip } from '@/components/emcn/components/tooltip/tooltip'
-import { Input, Label, Skeleton, Switch } from '@/components/ui'
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton, Switch } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
@@ -33,19 +31,6 @@ interface ApiKeysProps {
   registerCloseHandler?: (handler: (open: boolean) => void) => void
 }
 
-interface ApiKeyDisplayProps {
-  apiKey: ApiKey
-}
-
-function ApiKeyDisplay({ apiKey }: ApiKeyDisplayProps) {
-  const displayValue = apiKey.displayKey || apiKey.key
-  return (
-    <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-      <code className='font-mono text-foreground text-xs'>{displayValue}</code>
-    </div>
-  )
-}
-
 export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
   const { data: session } = useSession()
   const userId = session?.user?.id
@@ -111,11 +96,6 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
       .filter(({ key }) => key.name.toLowerCase().includes(searchTerm.toLowerCase()))
   }, [personalKeys, searchTerm])
 
-  const personalHeaderMarginClass = useMemo(() => {
-    if (!searchTerm.trim()) return 'mt-8'
-    return filteredWorkspaceKeys.length > 0 ? 'mt-8' : 'mt-0'
-  }, [searchTerm, filteredWorkspaceKeys])
-
   const handleCreateKey = async () => {
     if (!userId || !newKeyName.trim()) return
 
@@ -222,307 +202,314 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
   }
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Fixed Header */}
-      <div>
-        {/* Search Input */}
-        {isLoading ? (
-          <Skeleton className='h-9 w-56 rounded-lg' />
-        ) : (
-          <div className='flex h-9 w-56 items-center gap-2 rounded-lg border bg-transparent pr-2 pl-3'>
-            <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
-            <Input
-              placeholder='Search API keys...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
-        )}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Search Input and Create Button */}
+      <div className='flex items-center gap-[8px]'>
+        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+          <Search
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+            strokeWidth={2}
+          />
+          <Input
+            placeholder='Search API keys...'
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+          />
+        </div>
+        <Button
+          onClick={(e) => {
+            if (createButtonDisabled) {
+              return
+            }
+            e.currentTarget.blur()
+            setIsCreateDialogOpen(true)
+            setKeyType(defaultKeyType)
+            setCreateError(null)
+          }}
+          variant='primary'
+          disabled={createButtonDisabled}
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 disabled:cursor-not-allowed disabled:opacity-60'
+        >
+          <Plus className='mr-[6px] h-[13px] w-[13px]' />
+          Create
+        </Button>
       </div>
 
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='space-y-2'>
-          {isLoading ? (
-            <div className='space-y-2'>
-              <ApiKeySkeleton />
+        {isLoading ? (
+          <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[70px]' />
+              <div className='text-[13px] text-[var(--text-muted)]'>
+                <Skeleton className='h-[13px] w-[140px]' />
+              </div>
+            </div>
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[14px] w-[55px]' />
               <ApiKeySkeleton />
               <ApiKeySkeleton />
             </div>
-          ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Key" below to get started
-            </div>
-          ) : (
+          </div>
+        ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
+          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+            Click "Create" above to get started
+          </div>
+        ) : (
+          <div className='flex flex-col gap-[16px]'>
             <>
-              {/* Allow Personal API Keys Toggle */}
-              {!searchTerm.trim() && (
-                <Tooltip.Provider delayDuration={150}>
-                  <div className='mb-6 flex items-center justify-between'>
-                    <div className='flex items-center gap-2'>
-                      <span className='font-medium text-[12px] text-foreground'>
-                        Allow personal API keys
-                      </span>
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <button
-                            type='button'
-                            className='rounded-full p-1 text-muted-foreground transition hover:text-foreground'
-                          >
-                            <Info className='h-3 w-3' strokeWidth={2} />
-                          </button>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content side='top' className='max-w-xs text-xs'>
-                          Allow collaborators to create and use their own keys with billing charged
-                          to them.
-                        </Tooltip.Content>
-                      </Tooltip.Root>
-                    </div>
-                    {isLoadingSettings ? (
-                      <Skeleton className='h-5 w-16 rounded-full' />
-                    ) : (
-                      <Switch
-                        checked={allowPersonalApiKeys}
-                        disabled={!canManageWorkspaceKeys || updateSettingsMutation.isPending}
-                        onCheckedChange={async (checked) => {
-                          try {
-                            await updateSettingsMutation.mutateAsync({
-                              workspaceId,
-                              allowPersonalApiKeys: checked,
-                            })
-                          } catch (error) {
-                            logger.error('Error updating workspace settings:', { error })
-                          }
-                        }}
-                      />
-                    )}
-                  </div>
-                </Tooltip.Provider>
-              )}
-
               {/* Workspace section */}
               {!searchTerm.trim() ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Workspace
+                  </div>
                   {workspaceKeys.length === 0 ? (
-                    <div className='text-muted-foreground text-sm'>No workspace API keys yet.</div>
+                    <div className='text-[13px] text-[var(--text-muted)]'>
+                      No workspace API keys yet
+                    </div>
                   ) : (
                     workspaceKeys.map((key) => (
-                      <div key={key.id} className='flex flex-col gap-2'>
-                        <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                          {key.name}
-                        </Label>
-                        <div className='flex items-center justify-between gap-4'>
-                          <div className='flex items-center gap-3'>
-                            <ApiKeyDisplay apiKey={key} />
-                            <p className='text-muted-foreground text-xs'>
-                              Last used: {formatDate(key.lastUsed)}
-                            </p>
+                      <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                        <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                          <div className='flex items-center gap-[6px]'>
+                            <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                              {key.name}
+                            </span>
+                            <span className='text-[13px] text-[var(--text-secondary)]'>
+                              (last used: {formatDate(key.lastUsed).toLowerCase()})
+                            </span>
                           </div>
-                          <div className='flex items-center gap-2'>
-                            <Button
-                              variant='ghost'
-                              onClick={() => {
-                                setDeleteKey(key)
-                                setShowDeleteDialog(true)
-                              }}
-                              className='h-8 text-muted-foreground hover:text-foreground'
-                              disabled={!canManageWorkspaceKeys}
-                            >
-                              Delete
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    ))
-                  )}
-                </div>
-              ) : filteredWorkspaceKeys.length > 0 ? (
-                <div className='mb-6 space-y-2'>
-                  <div className='font-medium text-[13px] text-foreground'>Workspace</div>
-                  {filteredWorkspaceKeys.map(({ key }) => (
-                    <div key={key.id} className='flex flex-col gap-2'>
-                      <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                        {key.name}
-                      </Label>
-                      <div className='flex items-center justify-between gap-4'>
-                        <div className='flex items-center gap-3'>
-                          <ApiKeyDisplay apiKey={key} />
-                          <p className='text-muted-foreground text-xs'>
-                            Last used: {formatDate(key.lastUsed)}
+                          <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                            {key.displayKey || key.key}
                           </p>
                         </div>
                         <Button
                           variant='ghost'
+                          className='flex-shrink-0'
                           onClick={() => {
                             setDeleteKey(key)
                             setShowDeleteDialog(true)
                           }}
-                          className='h-8 text-muted-foreground hover:text-foreground'
                           disabled={!canManageWorkspaceKeys}
                         >
                           Delete
                         </Button>
                       </div>
+                    ))
+                  )}
+                </div>
+              ) : filteredWorkspaceKeys.length > 0 ? (
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Workspace
+                  </div>
+                  {filteredWorkspaceKeys.map(({ key }) => (
+                    <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                        <div className='flex items-center gap-[6px]'>
+                          <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                            {key.name}
+                          </span>
+                          <span className='text-[13px] text-[var(--text-secondary)]'>
+                            (last used: {formatDate(key.lastUsed).toLowerCase()})
+                          </span>
+                        </div>
+                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                          {key.displayKey || key.key}
+                        </p>
+                      </div>
+                      <Button
+                        variant='ghost'
+                        className='flex-shrink-0'
+                        onClick={() => {
+                          setDeleteKey(key)
+                          setShowDeleteDialog(true)
+                        }}
+                        disabled={!canManageWorkspaceKeys}
+                      >
+                        Delete
+                      </Button>
                     </div>
                   ))}
                 </div>
               ) : null}
 
               {/* Personal section */}
-              <div
-                className={`${personalHeaderMarginClass} mb-2 font-medium text-[13px] text-foreground`}
-              >
-                Personal
-              </div>
-              {filteredPersonalKeys.map(({ key }) => {
-                const isConflict = conflicts.includes(key.name)
-                return (
-                  <div key={key.id} className='flex flex-col gap-2'>
-                    <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                      {key.name}
-                    </Label>
-                    <div className='flex items-center justify-between gap-4'>
-                      <div className='flex items-center gap-3'>
-                        <ApiKeyDisplay apiKey={key} />
-                        <p className='text-muted-foreground text-xs'>
-                          Last used: {formatDate(key.lastUsed)}
-                        </p>
-                      </div>
-                      <div className='flex items-center gap-2'>
-                        <Button
-                          variant='ghost'
-                          onClick={() => {
-                            setDeleteKey(key)
-                            setShowDeleteDialog(true)
-                          }}
-                          className='h-8 text-muted-foreground hover:text-foreground'
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    </div>
-                    {isConflict && (
-                      <div className='col-span-3 mt-1 text-[#DC2626] text-[12px] leading-tight dark:text-[#F87171]'>
-                        Workspace API key with the same name overrides this. Rename your personal
-                        key to use it.
-                      </div>
-                    )}
+              {(!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
+                <div className='flex flex-col gap-[8px]'>
+                  <div className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    Personal
                   </div>
-                )
-              })}
+                  {filteredPersonalKeys.map(({ key }) => {
+                    const isConflict = conflicts.includes(key.name)
+                    return (
+                      <div key={key.id} className='flex flex-col gap-[8px]'>
+                        <div className='flex items-center justify-between gap-[12px]'>
+                          <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                            <div className='flex items-center gap-[6px]'>
+                              <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                                {key.name}
+                              </span>
+                              <span className='text-[13px] text-[var(--text-secondary)]'>
+                                (last used: {formatDate(key.lastUsed).toLowerCase()})
+                              </span>
+                            </div>
+                            <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                              {key.displayKey || key.key}
+                            </p>
+                          </div>
+                          <Button
+                            variant='ghost'
+                            className='flex-shrink-0'
+                            onClick={() => {
+                              setDeleteKey(key)
+                              setShowDeleteDialog(true)
+                            }}
+                          >
+                            Delete
+                          </Button>
+                        </div>
+                        {isConflict && (
+                          <div className='text-[12px] text-[var(--text-error)] leading-tight'>
+                            Workspace API key with the same name overrides this. Rename your
+                            personal key to use it.
+                          </div>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
               {/* Show message when search has no results across both sections */}
               {searchTerm.trim() &&
                 filteredPersonalKeys.length === 0 &&
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
-                  <div className='py-8 text-center text-muted-foreground text-sm'>
+                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
                     No API keys found matching "{searchTerm}"
                   </div>
                 )}
             </>
-          )}
-        </div>
+          </div>
+        )}
       </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center'>
-          {isLoading ? (
-            <Skeleton className='h-9 w-[117px] rounded-[8px]' />
-          ) : (
-            <Button
-              onClick={(e) => {
-                if (createButtonDisabled) {
-                  return
-                }
-                // Remove focus from button before opening dialog to prevent focus trap
-                e.currentTarget.blur()
-                setIsCreateDialogOpen(true)
-                setKeyType(defaultKeyType)
-                setCreateError(null)
-              }}
-              variant='ghost'
-              disabled={createButtonDisabled}
-              className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-60'
-            >
-              <Plus className='h-4 w-4 stroke-[2px]' />
-              Create Key
-            </Button>
-          )}
-        </div>
-      </div>
+      {/* Allow Personal API Keys Toggle - Fixed at bottom */}
+      {!isLoading && canManageWorkspaceKeys && (
+        <Tooltip.Provider delayDuration={150}>
+          <div className='mt-auto flex items-center justify-between'>
+            <div className='flex items-center gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Allow personal API keys
+              </span>
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button
+                    type='button'
+                    className='rounded-full p-[4px] text-[var(--text-muted)] transition hover:text-[var(--text-primary)]'
+                  >
+                    <Info className='h-[12px] w-[12px]' strokeWidth={2} />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Content side='top' className='max-w-xs text-[12px]'>
+                  Allow collaborators to create and use their own keys with billing charged to them.
+                </Tooltip.Content>
+              </Tooltip.Root>
+            </div>
+            {isLoadingSettings ? (
+              <Skeleton className='h-5 w-16 rounded-full' />
+            ) : (
+              <Switch
+                checked={allowPersonalApiKeys}
+                disabled={!canManageWorkspaceKeys || updateSettingsMutation.isPending}
+                onCheckedChange={async (checked) => {
+                  try {
+                    await updateSettingsMutation.mutateAsync({
+                      workspaceId,
+                      allowPersonalApiKeys: checked,
+                    })
+                  } catch (error) {
+                    logger.error('Error updating workspace settings:', { error })
+                  }
+                }}
+              />
+            )}
+          </div>
+        </Tooltip.Provider>
+      )}
 
       {/* Create API Key Dialog */}
       <Modal open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Create new API key</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Create new API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               {keyType === 'workspace'
                 ? "This key will have access to all workflows in this workspace. Make sure to copy it after creation as you won't be able to see it again."
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
-            </ModalDescription>
-          </ModalHeader>
-
-          <div className='space-y-4 py-2'>
-            {canManageWorkspaceKeys && (
-              <div className='space-y-2'>
-                <p className='font-[360] text-sm'>API Key Type</p>
-                <div className='flex gap-2'>
-                  <Button
-                    type='button'
-                    variant={keyType === 'personal' ? 'outline' : 'default'}
-                    onClick={() => {
-                      setKeyType('personal')
-                      if (createError) setCreateError(null)
-                    }}
-                    disabled={!allowPersonalApiKeys}
-                    className='h-8 disabled:cursor-not-allowed disabled:opacity-60'
-                  >
-                    Personal
-                  </Button>
-                  <Button
-                    type='button'
-                    variant={keyType === 'workspace' ? 'outline' : 'default'}
-                    onClick={() => {
-                      setKeyType('workspace')
-                      if (createError) setCreateError(null)
-                    }}
-                    className='h-8'
-                  >
-                    Workspace
-                  </Button>
+            </p>
+
+            <div className='mt-[16px] flex flex-col gap-[16px]'>
+              {canManageWorkspaceKeys && (
+                <div className='flex flex-col gap-[8px]'>
+                  <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    API Key Type
+                  </p>
+                  <div className='flex gap-[8px]'>
+                    <Button
+                      type='button'
+                      variant={keyType === 'personal' ? 'active' : 'default'}
+                      onClick={() => {
+                        setKeyType('personal')
+                        if (createError) setCreateError(null)
+                      }}
+                      disabled={!allowPersonalApiKeys}
+                      className='disabled:cursor-not-allowed disabled:opacity-60'
+                    >
+                      Personal
+                    </Button>
+                    <Button
+                      type='button'
+                      variant={keyType === 'workspace' ? 'active' : 'default'}
+                      onClick={() => {
+                        setKeyType('workspace')
+                        if (createError) setCreateError(null)
+                      }}
+                    >
+                      Workspace
+                    </Button>
+                  </div>
                 </div>
-              </div>
-            )}
-            <div className='space-y-2'>
-              <p className='font-[360] text-sm'>
-                Enter a name for your API key to help you identify it later.
-              </p>
-              <Input
-                value={newKeyName}
-                onChange={(e) => {
-                  setNewKeyName(e.target.value)
-                  if (createError) setCreateError(null) // Clear error when user types
-                }}
-                placeholder='e.g., Development, Production'
-                className='h-9 rounded-[8px]'
-                autoFocus
-              />
-              {createError && (
-                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                  {createError}
-                </p>
               )}
+              <div className='flex flex-col gap-[8px]'>
+                <p className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Enter a name for your API key to help you identify it later.
+                </p>
+                <EmcnInput
+                  value={newKeyName}
+                  onChange={(e) => {
+                    setNewKeyName(e.target.value)
+                    if (createError) setCreateError(null)
+                  }}
+                  placeholder='e.g., Development, Production'
+                  className='h-9'
+                  autoFocus
+                />
+                {createError && (
+                  <p className='text-[11px] text-[var(--text-error)] leading-tight'>
+                    {createError}
+                  </p>
+                )}
+              </div>
             </div>
-          </div>
+          </ModalBody>
 
           <ModalFooter>
             <Button
-              variant='outline'
-              className='h-[32px] px-[12px]'
+              variant='default'
               onClick={() => {
                 setIsCreateDialogOpen(false)
                 setNewKeyName('')
@@ -534,13 +521,13 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
             <Button
               type='button'
               variant='primary'
-              className='h-[32px] px-[12px]'
               onClick={handleCreateKey}
               disabled={
                 !newKeyName.trim() ||
                 createApiKeyMutation.isPending ||
                 (keyType === 'workspace' && !canManageWorkspaceKeys)
               }
+              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
             >
               {createApiKeyMutation.isPending ? 'Creating...' : 'Create'}
             </Button>
@@ -559,49 +546,56 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
           }
         }}
       >
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Your API key has been created</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Your API key has been created</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This is the only time you will see your API key.{' '}
-              <span className='font-semibold'>Copy it now and store it securely.</span>
-            </ModalDescription>
-          </ModalHeader>
-
-          {newKey && (
-            <div className='relative'>
-              <div className='flex h-9 items-center rounded-[6px] border-none bg-muted px-3 pr-10'>
-                <code className='flex-1 truncate font-mono text-foreground text-sm'>
-                  {newKey.key}
-                </code>
+              <span className='font-semibold text-[var(--text-primary)]'>
+                Copy it now and store it securely.
+              </span>
+            </p>
+
+            {newKey && (
+              <div className='relative mt-[10px]'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {newKey.key}
+                  </code>
+                </div>
+                <Button
+                  variant='ghost'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  onClick={() => copyToClipboard(newKey.key)}
+                >
+                  {copySuccess ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy to clipboard</span>
+                </Button>
               </div>
-              <Button
-                variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-1 h-7 w-7 rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground'
-                onClick={() => copyToClipboard(newKey.key)}
-              >
-                {copySuccess ? <Check className='h-3.5 w-3.5' /> : <Copy className='h-3.5 w-3.5' />}
-                <span className='sr-only'>Copy to clipboard</span>
-              </Button>
-            </div>
-          )}
+            )}
+          </ModalBody>
         </ModalContent>
       </Modal>
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='sm:max-w-md'>
-          <ModalHeader>
-            <ModalTitle>Delete API key?</ModalTitle>
-            <ModalDescription>
-              Deleting this API key will immediately revoke access for any integrations using it.{' '}
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Deleting{' '}
+              <span className='font-medium text-[var(--text-primary)]'>{deleteKey?.name}</span> will
+              immediately revoke access for any integrations using it.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </ModalDescription>
-          </ModalHeader>
+            </p>
+          </ModalBody>
           <ModalFooter>
             <Button
-              className='h-[32px] px-[12px]'
-              variant='outline'
+              variant='default'
               onClick={() => {
                 setShowDeleteDialog(false)
                 setDeleteKey(null)
@@ -611,9 +605,10 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
               Cancel
             </Button>
             <Button
-              className='h-[32px] bg-[var(--text-error)] px-[12px] text-[var(--white)] hover:bg-[var(--text-error)] hover:text-[var(--white)]'
+              variant='primary'
               onClick={handleDeleteKey}
               disabled={deleteApiKeyMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
               {deleteApiKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
@@ -626,15 +621,15 @@ export function ApiKeys({ onOpenChange, registerCloseHandler }: ApiKeysProps) {
 
 function ApiKeySkeleton() {
   return (
-    <div className='flex flex-col gap-2'>
-      <Skeleton className='h-4 w-32' /> {/* API key name */}
-      <div className='flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Skeleton className='h-8 w-20 rounded-[8px]' /> {/* Key preview */}
-          <Skeleton className='h-4 w-24' /> {/* Last used */}
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Skeleton className='h-[14px] w-[80px]' />
+          <Skeleton className='h-[13px] w-[140px]' />
         </div>
-        <Skeleton className='h-8 w-16' /> {/* Delete button */}
+        <Skeleton className='h-[13px] w-[100px]' />
       </div>
+      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
index 1e2afceb02b..3576cf989bc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/copilot/copilot.tsx
@@ -1,15 +1,16 @@
-import { useState } from 'react'
-import { Check, Copy, Plus } from 'lucide-react'
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Check, Copy, Plus, Search } from 'lucide-react'
+import { Button } from '@/components/emcn'
 import {
-  Button,
   Modal,
+  ModalBody,
   ModalContent,
-  ModalDescription,
   ModalFooter,
   ModalHeader,
-  ModalTitle,
-} from '@/components/emcn'
-import { Label } from '@/components/ui'
+} from '@/components/emcn/components/modal/modal'
+import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
   type CopilotKey,
@@ -20,91 +21,41 @@ import {
 
 const logger = createLogger('CopilotSettings')
 
-// Commented out model-related code
-// interface ModelOption {
-//   value: string
-//   label: string
-//   icon: 'brain' | 'brainCircuit' | 'zap'
-// }
-
-// const OPENAI_MODELS: ModelOption[] = [
-//   // Zap models first
-//   { value: 'gpt-4o', label: 'gpt-4o', icon: 'zap' },
-//   { value: 'gpt-4.1', label: 'gpt-4.1', icon: 'zap' },
-//   { value: 'gpt-5-fast', label: 'gpt-5-fast', icon: 'zap' },
-//   { value: 'gpt-5.1-fast', label: 'gpt-5.1-fast', icon: 'zap' },
-//   // Brain models
-//   { value: 'gpt-5', label: 'gpt-5', icon: 'brain' },
-//   { value: 'gpt-5-medium', label: 'gpt-5-medium', icon: 'brain' },
-//   { value: 'gpt-5.1', label: 'gpt-5.1', icon: 'brain' },
-//   { value: 'gpt-5.1-medium', label: 'gpt-5.1-medium', icon: 'brain' },
-//   // BrainCircuit models
-//   { value: 'gpt-5-high', label: 'gpt-5-high', icon: 'brainCircuit' },
-//   { value: 'gpt-5.1-high', label: 'gpt-5.1-high', icon: 'brainCircuit' },
-//   { value: 'gpt-5-codex', label: 'gpt-5-codex', icon: 'brainCircuit' },
-//   { value: 'gpt-5.1-codex', label: 'gpt-5.1-codex', icon: 'brainCircuit' },
-//   { value: 'o3', label: 'o3', icon: 'brainCircuit' },
-// ]
-
-// const ANTHROPIC_MODELS: ModelOption[] = [
-//   // Zap model (Haiku)
-//   { value: 'claude-4.5-haiku', label: 'claude-4.5-haiku', icon: 'zap' },
-//   // Brain models
-//   { value: 'claude-4-sonnet', label: 'claude-4-sonnet', icon: 'brain' },
-//   { value: 'claude-4.5-sonnet', label: 'claude-4.5-sonnet', icon: 'brain' },
-//   // BrainCircuit models
-//   { value: 'claude-4.1-opus', label: 'claude-4.1-opus', icon: 'brainCircuit' },
-// ]
-
-// const ALL_MODELS: ModelOption[] = [...OPENAI_MODELS, ...ANTHROPIC_MODELS]
-
-// // Default enabled/disabled state for all models
-// const DEFAULT_ENABLED_MODELS: Record<string, boolean> = {
-//   'gpt-4o': false,
-//   'gpt-4.1': false,
-//   'gpt-5-fast': false,
-//   'gpt-5': true,
-//   'gpt-5-medium': false,
-//   'gpt-5-high': false,
-//   'gpt-5.1-fast': false,
-//   'gpt-5.1': true,
-//   'gpt-5.1-medium': true,
-//   'gpt-5.1-high': false,
-//   'gpt-5-codex': false,
-//   'gpt-5.1-codex': true,
-//   o3: true,
-//   'claude-4-sonnet': false,
-//   'claude-4.5-haiku': true,
-//   'claude-4.5-sonnet': true,
-//   'claude-4.1-opus': true,
-// }
-
-// const getModelIcon = (iconType: 'brain' | 'brainCircuit' | 'zap') => {
-//   switch (iconType) {
-//     case 'brainCircuit':
-//       return <BrainCircuit className='h-3.5 w-3.5 text-muted-foreground' />
-//     case 'brain':
-//       return <Brain className='h-3.5 w-3.5 text-muted-foreground' />
-//     case 'zap':
-//       return <Zap className='h-3.5 w-3.5 text-muted-foreground' />
-//   }
-// }
+/**
+ * Skeleton component for loading state of copilot key items
+ */
+function CopilotKeySkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <Skeleton className='h-[13px] w-[120px]' />
+      </div>
+      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
+    </div>
+  )
+}
 
+/**
+ * Copilot Keys management component for handling API keys used with the Copilot feature.
+ * Provides functionality to create, view, and delete copilot API keys.
+ */
 export function Copilot() {
-  // React Query hooks
-  const { data: keys = [] } = useCopilotKeys()
+  const { data: keys = [], isLoading } = useCopilotKeys()
   const generateKey = useGenerateCopilotKey()
   const deleteKeyMutation = useDeleteCopilotKey()
 
-  // Create flow state
   const [showNewKeyDialog, setShowNewKeyDialog] = useState(false)
   const [newKey, setNewKey] = useState<string | null>(null)
   const [copySuccess, setCopySuccess] = useState(false)
-
-  // Delete flow state
   const [deleteKey, setDeleteKey] = useState<CopilotKey | null>(null)
   const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [deleteConfirmationKey, setDeleteConfirmationKey] = useState('')
+  const [searchTerm, setSearchTerm] = useState('')
+
+  const filteredKeys = useMemo(() => {
+    if (!searchTerm.trim()) return keys
+    const term = searchTerm.toLowerCase()
+    return keys.filter((key) => key.displayKey?.toLowerCase().includes(term))
+  }, [keys, searchTerm])
 
   const onGenerate = async () => {
     try {
@@ -127,11 +78,9 @@ export function Copilot() {
   const handleDeleteKey = async () => {
     if (!deleteKey) return
     try {
-      // Close dialog and clear state immediately for optimistic update
       setShowDeleteDialog(false)
       const keyToDelete = deleteKey
       setDeleteKey(null)
-      setDeleteConfirmationKey('')
 
       await deleteKeyMutation.mutateAsync({ keyId: keyToDelete.id })
     } catch (error) {
@@ -139,99 +88,81 @@ export function Copilot() {
     }
   }
 
-  // Commented out model-related functions
-  // const toggleModel = async (modelValue: string, enabled: boolean) => {
-  //   const newModelsMap = { ...enabledModelsMap, [modelValue]: enabled }
-  //   setEnabledModelsMap(newModelsMap)
-
-  //   // Convert to array for store
-  //   const enabledArray = Object.entries(newModelsMap)
-  //     .filter(([_, isEnabled]) => isEnabled)
-  //     .map(([modelId]) => modelId)
-  //   setStoreEnabledModels(enabledArray)
-
-  //   try {
-  //     const res = await fetch('/api/copilot/user-models', {
-  //       method: 'PUT',
-  //       headers: { 'Content-Type': 'application/json' },
-  //       body: JSON.stringify({ enabledModels: newModelsMap }),
-  //     })
-
-  //     if (!res.ok) {
-  //       throw new Error('Failed to update models')
-  //     }
-  //   } catch (error) {
-  //     logger.error('Failed to update enabled models', { error })
-  //     // Revert on error
-  //     setEnabledModelsMap(enabledModelsMap)
-  //     const revertedArray = Object.entries(enabledModelsMap)
-  //       .filter(([_, isEnabled]) => isEnabled)
-  //       .map(([modelId]) => modelId)
-  //     setStoreEnabledModels(revertedArray)
-  //   }
-  // }
-
-  // const enabledCount = Object.values(enabledModelsMap).filter(Boolean).length
-  // const totalCount = ALL_MODELS.length
+  const hasKeys = keys.length > 0
+  const showEmptyState = !hasKeys
+  const showNoResults = searchTerm.trim() && filteredKeys.length === 0 && keys.length > 0
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Scrollable Content */}
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='space-y-2'>
-          {keys.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-muted-foreground text-sm'>
-              Click "Create Key" below to get started
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Search Input and Create Button */}
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <Input
+              placeholder='Search keys...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
+          </div>
+          <Button
+            onClick={onGenerate}
+            variant='primary'
+            disabled={isLoading || generateKey.isPending}
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90 disabled:cursor-not-allowed disabled:opacity-60'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            {generateKey.isPending ? 'Creating...' : 'Create'}
+          </Button>
+        </div>
+
+        {/* Scrollable Content */}
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {isLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <CopilotKeySkeleton />
+              <CopilotKeySkeleton />
+              <CopilotKeySkeleton />
+            </div>
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Create" above to get started
             </div>
           ) : (
-            <>
-              <div className='mb-2 font-medium text-[13px] text-foreground'>Copilot API Keys</div>
-              {keys.map((key) => (
-                <div key={key.id} className='flex flex-col gap-2'>
-                  <Label className='font-normal text-muted-foreground text-xs uppercase'>
-                    API KEY
-                  </Label>
-                  <div className='flex items-center justify-between gap-4'>
-                    <div className='flex items-center gap-3'>
-                      <div className='flex h-8 items-center rounded-[8px] bg-muted px-3'>
-                        <code className='font-mono text-foreground text-xs'>{key.displayKey}</code>
-                      </div>
-                    </div>
-                    <div className='flex items-center gap-2'>
-                      <Button
-                        variant='ghost'
-                        onClick={() => {
-                          setDeleteKey(key)
-                          setShowDeleteDialog(true)
-                        }}
-                        className='h-8 text-muted-foreground hover:text-foreground'
-                      >
-                        Delete
-                      </Button>
-                    </div>
+            <div className='flex flex-col gap-[8px]'>
+              {filteredKeys.map((key) => (
+                <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <p className='truncate text-[13px] text-[var(--text-primary)]'>
+                      {key.displayKey}
+                    </p>
                   </div>
+                  <Button
+                    variant='ghost'
+                    className='flex-shrink-0'
+                    onClick={() => {
+                      setDeleteKey(key)
+                      setShowDeleteDialog(true)
+                    }}
+                  >
+                    Delete
+                  </Button>
                 </div>
               ))}
-            </>
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No keys found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
           )}
         </div>
       </div>
 
-      {/* Footer */}
-      <div className='bg-background'>
-        <div className='flex w-full items-center'>
-          <Button
-            onClick={onGenerate}
-            variant='ghost'
-            disabled={generateKey.isPending}
-            className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-60'
-          >
-            <Plus className='h-4 w-4 stroke-[2px]' />
-            Create Key
-          </Button>
-        </div>
-      </div>
-
       {/* New API Key Dialog */}
       <Modal
         open={showNewKeyDialog}
@@ -243,64 +174,73 @@ export function Copilot() {
           }
         }}
       >
-        <ModalContent className='rounded-[10px] sm:max-w-md' showClose={false}>
-          <ModalHeader>
-            <ModalTitle>Your API key has been created</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Your API key has been created</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               This is the only time you will see your API key.{' '}
-              <span className='font-semibold'>Copy it now and store it securely.</span>
-            </ModalDescription>
-          </ModalHeader>
-
-          {newKey && (
-            <div className='relative'>
-              <div className='flex h-9 items-center rounded-[6px] border-none bg-muted px-3 pr-10'>
-                <code className='flex-1 truncate font-mono text-foreground text-sm'>{newKey}</code>
+              <span className='font-semibold text-[var(--text-primary)]'>
+                Copy it now and store it securely.
+              </span>
+            </p>
+
+            {newKey && (
+              <div className='relative mt-[10px]'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {newKey}
+                  </code>
+                </div>
+                <Button
+                  variant='ghost'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  onClick={() => copyToClipboard(newKey)}
+                >
+                  {copySuccess ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy to clipboard</span>
+                </Button>
               </div>
-              <Button
-                variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-1 h-7 w-7 rounded-[4px] text-muted-foreground hover:bg-muted hover:text-foreground'
-                onClick={() => copyToClipboard(newKey)}
-              >
-                {copySuccess ? <Check className='h-3.5 w-3.5' /> : <Copy className='h-3.5 w-3.5' />}
-                <span className='sr-only'>Copy to clipboard</span>
-              </Button>
-            </div>
-          )}
+            )}
+          </ModalBody>
         </ModalContent>
       </Modal>
 
       {/* Delete Confirmation Dialog */}
       <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='rounded-[10px] sm:max-w-md' showClose={false}>
-          <ModalHeader>
-            <ModalTitle>Delete API key?</ModalTitle>
-            <ModalDescription>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete API key</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
               Deleting this API key will immediately revoke access for any integrations using it.{' '}
-              <span className='text-red-500 dark:text-red-500'>This action cannot be undone.</span>
-            </ModalDescription>
-          </ModalHeader>
-
-          <ModalFooter className='flex'>
+              <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
             <Button
-              className='h-9 w-full rounded-[8px] bg-background text-foreground hover:bg-muted dark:bg-background dark:text-foreground dark:hover:bg-muted/80'
+              variant='default'
               onClick={() => {
                 setShowDeleteDialog(false)
                 setDeleteKey(null)
-                setDeleteConfirmationKey('')
               }}
+              disabled={deleteKeyMutation.isPending}
             >
               Cancel
             </Button>
             <Button
+              variant='primary'
               onClick={handleDeleteKey}
-              className='h-9 w-full rounded-[8px] bg-red-500 text-white transition-all duration-200 hover:bg-red-600 dark:bg-red-500 dark:hover:bg-red-600'
+              disabled={deleteKeyMutation.isPending}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
             >
-              Delete
+              {deleteKeyMutation.isPending ? 'Deleting...' : 'Delete'}
             </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
-    </div>
+    </>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
deleted file mode 100644
index 51884326d51..00000000000
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile.tsx
+++ /dev/null
@@ -1,453 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { Camera, Check, User, Users } from 'lucide-react'
-import Image from 'next/image'
-import { useForm } from 'react-hook-form'
-import { z } from 'zod'
-import { Button, Combobox, Input, Textarea } from '@/components/emcn'
-import { AgentIcon } from '@/components/icons'
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui'
-import { useSession } from '@/lib/auth/auth-client'
-import { createLogger } from '@/lib/logs/console/logger'
-import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
-import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
-import {
-  useCreatorProfile,
-  useOrganizations,
-  useSaveCreatorProfile,
-} from '@/hooks/queries/creator-profile'
-
-const logger = createLogger('CreatorProfile')
-
-type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
-
-const creatorProfileSchema = z.object({
-  referenceType: z.enum(['user', 'organization']),
-  referenceId: z.string().min(1, 'Reference is required'),
-  name: z.string().min(1, 'Display Name is required').max(100, 'Max 100 characters'),
-  profileImageUrl: z.string().min(1, 'Profile Picture is required'),
-  about: z.string().max(2000, 'Max 2000 characters').optional(),
-  xUrl: z.string().url().optional().or(z.literal('')),
-  linkedinUrl: z.string().url().optional().or(z.literal('')),
-  websiteUrl: z.string().url().optional().or(z.literal('')),
-  contactEmail: z.string().email().optional().or(z.literal('')),
-})
-
-type CreatorProfileFormData = z.infer<typeof creatorProfileSchema>
-
-export function CreatorProfile() {
-  const { data: session } = useSession()
-  const userId = session?.user?.id || ''
-
-  // React Query hooks - with placeholderData to show cached data immediately
-  const { data: organizations = [] } = useOrganizations()
-  const { data: existingProfile } = useCreatorProfile(userId)
-  const saveProfile = useSaveCreatorProfile()
-
-  // Local UI state
-  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
-  const [uploadError, setUploadError] = useState<string | null>(null)
-
-  const form = useForm<CreatorProfileFormData>({
-    resolver: zodResolver(creatorProfileSchema),
-    defaultValues: {
-      referenceType: 'user',
-      referenceId: session?.user?.id || '',
-      name: session?.user?.name || session?.user?.email || '',
-      profileImageUrl: '',
-      about: '',
-      xUrl: '',
-      linkedinUrl: '',
-      websiteUrl: '',
-      contactEmail: '',
-    },
-  })
-
-  const profileImageUrl = form.watch('profileImageUrl')
-
-  const {
-    previewUrl: profilePictureUrl,
-    fileInputRef: profilePictureInputRef,
-    handleThumbnailClick: handleProfilePictureClick,
-    handleFileChange: handleProfilePictureChange,
-    isUploading: isUploadingProfilePicture,
-  } = useProfilePictureUpload({
-    currentImage: profileImageUrl,
-    onUpload: async (url) => {
-      form.setValue('profileImageUrl', url || '')
-      setUploadError(null)
-    },
-    onError: (error) => {
-      setUploadError(error)
-      setTimeout(() => setUploadError(null), 5000)
-    },
-  })
-
-  const referenceType = form.watch('referenceType')
-
-  // Update form when profile data loads
-  useEffect(() => {
-    if (existingProfile) {
-      const details = existingProfile.details as CreatorProfileDetails | null
-      form.reset({
-        referenceType: existingProfile.referenceType,
-        referenceId: existingProfile.referenceId,
-        name: existingProfile.name || '',
-        profileImageUrl: existingProfile.profileImageUrl || '',
-        about: details?.about || '',
-        xUrl: details?.xUrl || '',
-        linkedinUrl: details?.linkedinUrl || '',
-        websiteUrl: details?.websiteUrl || '',
-        contactEmail: details?.contactEmail || '',
-      })
-    }
-  }, [existingProfile, form])
-
-  const [saveError, setSaveError] = useState<string | null>(null)
-
-  const onSubmit = async (data: CreatorProfileFormData) => {
-    if (!userId) return
-
-    setSaveStatus('saving')
-    setSaveError(null)
-
-    try {
-      const details: CreatorProfileDetails = {}
-      if (data.about) details.about = data.about
-      if (data.xUrl) details.xUrl = data.xUrl
-      if (data.linkedinUrl) details.linkedinUrl = data.linkedinUrl
-      if (data.websiteUrl) details.websiteUrl = data.websiteUrl
-      if (data.contactEmail) details.contactEmail = data.contactEmail
-
-      await saveProfile.mutateAsync({
-        referenceType: data.referenceType,
-        referenceId: data.referenceId,
-        name: data.name,
-        profileImageUrl: data.profileImageUrl,
-        details: Object.keys(details).length > 0 ? details : undefined,
-        existingProfileId: existingProfile?.id,
-      })
-
-      setSaveStatus('saved')
-
-      // Reset to idle after 2 seconds
-      setTimeout(() => {
-        setSaveStatus('idle')
-      }, 2000)
-    } catch (error) {
-      logger.error('Error saving creator profile:', error)
-      const errorMessage = error instanceof Error ? error.message : 'Failed to save creator profile'
-      setSaveError(errorMessage)
-      setSaveStatus('idle')
-    }
-  }
-
-  return (
-    <div className='relative flex h-full flex-col'>
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className='flex h-full flex-col'>
-          {/* Scrollable Content */}
-          <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-2'>
-              {/* Profile Type - only show if user has organizations */}
-              {organizations.length > 0 && (
-                <FormField
-                  control={form.control}
-                  name='referenceType'
-                  render={({ field }) => (
-                    <FormItem className='space-y-2'>
-                      <FormLabel className='font-[360] text-sm'>Profile Type</FormLabel>
-                      <FormControl>
-                        <div className='flex gap-2'>
-                          <Button
-                            type='button'
-                            variant={field.value === 'user' ? 'outline' : 'default'}
-                            onClick={() => field.onChange('user')}
-                            className='h-8'
-                          >
-                            <User className='mr-1.5 h-3.5 w-3.5' />
-                            Personal
-                          </Button>
-                          <Button
-                            type='button'
-                            variant={field.value === 'organization' ? 'outline' : 'default'}
-                            onClick={() => field.onChange('organization')}
-                            className='h-8'
-                          >
-                            <Users className='mr-1.5 h-3.5 w-3.5' />
-                            Organization
-                          </Button>
-                        </div>
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-
-              {/* Reference Selection */}
-              {referenceType === 'organization' && organizations.length > 0 && (
-                <FormField
-                  control={form.control}
-                  name='referenceId'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='font-[360] text-sm'>Organization</FormLabel>
-                      <FormControl>
-                        <Combobox
-                          options={organizations.map((org) => ({
-                            label: org.name,
-                            value: org.id,
-                          }))}
-                          value={field.value}
-                          onChange={field.onChange}
-                          placeholder='Select organization'
-                          editable={false}
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-
-              {/* Profile Name */}
-              <FormField
-                control={form.control}
-                name='name'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>
-                      Display Name <span className='text-destructive'>*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <Input
-                        placeholder='How your name appears on templates'
-                        {...field}
-                        className='h-9 w-full'
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Profile Picture Upload */}
-              <FormField
-                control={form.control}
-                name='profileImageUrl'
-                render={() => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>
-                      Profile Picture <span className='text-destructive'>*</span>
-                    </FormLabel>
-                    <FormControl>
-                      <div className='flex items-center gap-3'>
-                        <div className='relative inline-block'>
-                          <div
-                            className='group relative flex h-16 w-16 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[#802FFF] transition-all hover:opacity-80'
-                            onClick={handleProfilePictureClick}
-                          >
-                            {profilePictureUrl ? (
-                              <Image
-                                src={profilePictureUrl}
-                                alt='Profile picture'
-                                width={64}
-                                height={64}
-                                className={`h-full w-full object-cover transition-opacity duration-300 ${
-                                  isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
-                                }`}
-                              />
-                            ) : (
-                              <AgentIcon className='h-8 w-8 text-white' />
-                            )}
-
-                            {/* Upload overlay */}
-                            <div
-                              className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
-                                isUploadingProfilePicture
-                                  ? 'opacity-100'
-                                  : 'opacity-0 group-hover:opacity-100'
-                              }`}
-                            >
-                              {isUploadingProfilePicture ? (
-                                <div className='h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent' />
-                              ) : (
-                                <Camera className='h-4 w-4 text-white' />
-                              )}
-                            </div>
-                          </div>
-
-                          {/* Hidden file input */}
-                          <Input
-                            type='file'
-                            accept='image/png,image/jpeg,image/jpg'
-                            className='hidden'
-                            ref={profilePictureInputRef}
-                            onChange={handleProfilePictureChange}
-                            disabled={isUploadingProfilePicture}
-                          />
-                        </div>
-                        <div className='flex flex-col gap-1'>
-                          {uploadError && (
-                            <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                              {uploadError}
-                            </p>
-                          )}
-                          <p className='text-muted-foreground text-xs'>PNG or JPEG (max 5MB)</p>
-                        </div>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* About */}
-              <FormField
-                control={form.control}
-                name='about'
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel className='font-normal text-[13px]'>About</FormLabel>
-                    <FormControl>
-                      <Textarea
-                        placeholder='Tell people about yourself or your organization'
-                        className='min-h-[120px] w-full resize-none'
-                        {...field}
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              {/* Social Links */}
-              <div className='space-y-4'>
-                <div className='font-medium text-[13px] text-foreground'>Social Links</div>
-
-                <FormField
-                  control={form.control}
-                  name='xUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        X (Twitter)
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://x.com/username'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='linkedinUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        LinkedIn
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://linkedin.com/in/username'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='websiteUrl'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        Website
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='https://yourwebsite.com'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                <FormField
-                  control={form.control}
-                  name='contactEmail'
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel className='flex items-center gap-2 font-normal text-[13px]'>
-                        Contact Email
-                      </FormLabel>
-                      <FormControl>
-                        <Input
-                          placeholder='contact@example.com'
-                          type='email'
-                          {...field}
-                          className='h-9 w-full'
-                        />
-                      </FormControl>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              </div>
-            </div>
-          </div>
-
-          {/* Error Message */}
-          {saveError && (
-            <div>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                {saveError}
-              </p>
-            </div>
-          )}
-
-          {/* Footer */}
-          <div className='bg-background'>
-            <div className='flex w-full items-center justify-between'>
-              <div className='text-muted-foreground text-xs'>
-                Set up your creator profile for publishing templates
-              </div>
-              <Button type='submit' disabled={saveStatus === 'saving'} className='h-9'>
-                {saveStatus === 'saving' && (
-                  <>
-                    <div className='mr-2 h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
-                    Saving...
-                  </>
-                )}
-                {saveStatus === 'saved' && (
-                  <>
-                    <Check className='mr-2 h-4 w-4' />
-                    Saved
-                  </>
-                )}
-                {saveStatus === 'idle' && (
-                  <>{existingProfile ? 'Update Profile' : 'Create Profile'}</>
-                )}
-              </Button>
-            </div>
-          </div>
-        </form>
-      </Form>
-    </div>
-  )
-}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index 0c507f66efd..5fec6825c79 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -13,6 +13,7 @@ import {
 } from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
+import { cn } from '@/lib/utils'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
 
@@ -108,87 +109,88 @@ export function CustomTools() {
   return (
     <>
       <div className='flex h-full flex-col gap-[16px]'>
-        {isLoading ? (
-          <Skeleton className='h-9 w-full rounded-[8px]' />
-        ) : (
-          <div className='flex items-center gap-[8px]'>
-            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
-              <Search
-                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-                strokeWidth={2}
-              />
-              <Input
-                placeholder='Search tools...'
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-              />
-            </div>
-            <Button
-              onClick={() => setShowAddForm(true)}
-              variant='primary'
-              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-            >
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
-              Add
-            </Button>
+        <div className='flex items-center gap-[8px]'>
+          <div
+            className={cn(
+              'flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]',
+              isLoading && 'opacity-50'
+            )}
+          >
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <Input
+              placeholder='Search tools...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              disabled={isLoading}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
+            />
           </div>
-        )}
+          <Button
+            onClick={() => setShowAddForm(true)}
+            disabled={isLoading}
+            variant='primary'
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+        </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[16px]'>
-            {error ? (
-              <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                  {error instanceof Error ? error.message : 'Failed to load tools'}
-                </p>
-              </div>
-            ) : isLoading ? (
-              <div className='flex flex-col gap-[8px]'>
-                <CustomToolSkeleton />
-                <CustomToolSkeleton />
-                <CustomToolSkeleton />
-              </div>
-            ) : showEmptyState ? (
-              <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
-                Click "Create" above to get started
-              </div>
-            ) : (
-              <div className='flex flex-col gap-[8px]'>
-                {filteredTools.map((tool) => (
-                  <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
-                    <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                      <span className='truncate font-medium text-[14px]'>
-                        {tool.title || 'Unnamed Tool'}
-                      </span>
-                      {tool.schema?.function?.description && (
-                        <p className='truncate text-[13px] text-[var(--text-muted)]'>
-                          {tool.schema.function.description}
-                        </p>
-                      )}
-                    </div>
-                    <div className='flex flex-shrink-0 items-center gap-[8px]'>
-                      <Button variant='ghost' onClick={() => setEditingTool(tool.id)}>
-                        Edit
-                      </Button>
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleDeleteClick(tool.id)}
-                        disabled={deletingTools.has(tool.id)}
-                      >
-                        {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
-                      </Button>
-                    </div>
+          {error ? (
+            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {error instanceof Error ? error.message : 'Failed to load tools'}
+              </p>
+            </div>
+          ) : isLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <CustomToolSkeleton />
+              <CustomToolSkeleton />
+              <CustomToolSkeleton />
+            </div>
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {filteredTools.map((tool) => (
+                <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <span className='truncate font-medium text-[14px]'>
+                      {tool.title || 'Unnamed Tool'}
+                    </span>
+                    {tool.schema?.function?.description && (
+                      <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                        {tool.schema.function.description}
+                      </p>
+                    )}
                   </div>
-                ))}
-                {showNoResults && (
-                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
-                    No tools found matching "{searchTerm}"
+                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                    <Button variant='ghost' onClick={() => setEditingTool(tool.id)}>
+                      Edit
+                    </Button>
+                    <Button
+                      variant='ghost'
+                      onClick={() => handleDeleteClick(tool.id)}
+                      disabled={deletingTools.has(tool.id)}
+                    >
+                      {deletingTools.has(tool.id) ? 'Deleting...' : 'Delete'}
+                    </Button>
                   </div>
-                )}
-              </div>
-            )}
-          </div>
+                </div>
+              ))}
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No tools found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
index 415527fa89e..f1229c7395c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/environment/environment.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { Plus, Search, Share2 } from 'lucide-react'
+import { Plus, Search, Share2, Undo2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Input as EmcnInput, Tooltip } from '@/components/emcn'
 import {
@@ -63,10 +63,8 @@ interface UIEnvironmentVariable {
  * Props for the EnvironmentVariables component
  */
 interface EnvironmentVariablesProps {
-  /** Callback to handle modal open/close state changes */
-  onOpenChange: (open: boolean) => void
-  /** Optional callback to register a custom close handler */
-  registerCloseHandler?: (handler: (open: boolean) => void) => void
+  /** Callback to register a handler that intercepts navigation away from this section */
+  registerBeforeLeaveHandler?: (handler: (onProceed: () => void) => void) => void
 }
 
 /**
@@ -77,10 +75,12 @@ interface WorkspaceVariableRowProps {
   value: string
   renamingKey: string | null
   pendingKeyValue: string
+  isNewlyPromoted: boolean
   onRenameStart: (key: string) => void
   onPendingKeyChange: (value: string) => void
   onRenameEnd: (key: string, value: string) => void
   onDelete: (key: string) => void
+  onDemote: (key: string, value: string) => void
 }
 
 /**
@@ -91,10 +91,12 @@ function WorkspaceVariableRow({
   value,
   renamingKey,
   pendingKeyValue,
+  isNewlyPromoted,
   onRenameStart,
   onPendingKeyChange,
   onRenameEnd,
   onDelete,
+  onDemote,
 }: WorkspaceVariableRowProps) {
   return (
     <div className={GRID_COLS}>
@@ -124,6 +126,16 @@ function WorkspaceVariableRow({
         className='h-9'
       />
       <div className='ml-[8px] flex'>
+        {isNewlyPromoted && (
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button variant='ghost' onClick={() => onDemote(envKey, value)} className='h-9 w-9'>
+                <Undo2 className='h-3.5 w-3.5' />
+              </Button>
+            </Tooltip.Trigger>
+            <Tooltip.Content>Scope: workspace</Tooltip.Content>
+          </Tooltip.Root>
+        )}
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button variant='ghost' onClick={() => onDelete(envKey)} className='h-9 w-9'>
@@ -142,10 +154,7 @@ function WorkspaceVariableRow({
  * Provides functionality to create, edit, delete, and share environment variables between
  * personal and workspace scopes with conflict detection.
  */
-export function EnvironmentVariables({
-  onOpenChange,
-  registerCloseHandler,
-}: EnvironmentVariablesProps) {
+export function EnvironmentVariables({ registerBeforeLeaveHandler }: EnvironmentVariablesProps) {
   const params = useParams()
   const workspaceId = (params?.workspaceId as string) || ''
 
@@ -168,7 +177,7 @@ export function EnvironmentVariables({
   const removeWorkspaceMutation = useRemoveWorkspaceEnvironment()
 
   const isLoading = isPersonalLoading || isWorkspaceLoading
-  const variables = personalEnvData || {}
+  const variables = useMemo(() => personalEnvData || {}, [personalEnvData])
 
   const [envVars, setEnvVars] = useState<UIEnvironmentVariable[]>([])
   const [searchTerm, setSearchTerm] = useState('')
@@ -179,12 +188,14 @@ export function EnvironmentVariables({
   const [conflicts, setConflicts] = useState<string[]>([])
   const [renamingKey, setRenamingKey] = useState<string | null>(null)
   const [pendingKeyValue, setPendingKeyValue] = useState<string>('')
+  const [changeToken, setChangeToken] = useState(0)
 
   const initialWorkspaceVarsRef = useRef<Record<string, string>>({})
   const scrollContainerRef = useRef<HTMLDivElement>(null)
-  const pendingClose = useRef(false)
+  const pendingProceedCallback = useRef<(() => void) | null>(null)
   const initialVarsRef = useRef<UIEnvironmentVariable[]>([])
   const hasChangesRef = useRef(false)
+  const hasSavedRef = useRef(false)
 
   const filteredEnvVars = useMemo(() => {
     const mapped = envVars.map((envVar, index) => ({ envVar, originalIndex: index }))
@@ -227,7 +238,7 @@ export function EnvironmentVariables({
     }
 
     return false
-  }, [envVars, workspaceVars])
+  }, [envVars, workspaceVars, changeToken])
 
   const hasConflicts = useMemo(() => {
     return envVars.some((envVar) => !!envVar.key && Object.hasOwn(workspaceVars, envVar.key))
@@ -237,20 +248,23 @@ export function EnvironmentVariables({
     hasChangesRef.current = hasChanges
   }, [hasChanges])
 
-  // Memoize handleModalClose to prevent infinite loops
-  const handleModalClose = useCallback(
-    (open: boolean) => {
-      if (!open && hasChangesRef.current) {
-        setShowUnsavedChanges(true)
-        pendingClose.current = true
-      } else {
-        onOpenChange(open)
-      }
-    },
-    [onOpenChange]
-  )
+  /**
+   * Handles navigation attempts away from this section.
+   * Shows unsaved changes modal if there are changes, otherwise proceeds immediately.
+   */
+  const handleBeforeLeave = useCallback((onProceed: () => void) => {
+    if (hasChangesRef.current) {
+      setShowUnsavedChanges(true)
+      pendingProceedCallback.current = onProceed
+    } else {
+      onProceed()
+    }
+  }, [])
 
   useEffect(() => {
+    // Skip sync from server after a save - we already have correct local state
+    if (hasSavedRef.current) return
+
     const existingVars = Object.values(variables)
     const initialVars = existingVars.length
       ? existingVars.map((envVar) => ({
@@ -260,23 +274,29 @@ export function EnvironmentVariables({
       : [createEmptyEnvVar()]
     initialVarsRef.current = JSON.parse(JSON.stringify(initialVars))
     setEnvVars(JSON.parse(JSON.stringify(initialVars)))
-    pendingClose.current = false
+    pendingProceedCallback.current = null
   }, [variables])
 
   useEffect(() => {
     if (workspaceEnvData) {
-      setWorkspaceVars(workspaceEnvData?.workspace || {})
-      initialWorkspaceVarsRef.current = workspaceEnvData?.workspace || {}
-      setConflicts(workspaceEnvData?.conflicts || [])
+      if (hasSavedRef.current) {
+        // After a save, only update conflicts - refs were already set optimistically
+        setConflicts(workspaceEnvData?.conflicts || [])
+        hasSavedRef.current = false
+      } else {
+        setWorkspaceVars(workspaceEnvData?.workspace || {})
+        initialWorkspaceVarsRef.current = workspaceEnvData?.workspace || {}
+        setConflicts(workspaceEnvData?.conflicts || [])
+      }
     }
   }, [workspaceEnvData])
 
-  // Register the close handler - now with stable dependencies
+  // Register the before-leave handler
   useEffect(() => {
-    if (registerCloseHandler) {
-      registerCloseHandler(handleModalClose)
+    if (registerBeforeLeaveHandler) {
+      registerBeforeLeaveHandler(handleBeforeLeave)
     }
-  }, [registerCloseHandler, handleModalClose])
+  }, [registerBeforeLeaveHandler, handleBeforeLeave])
 
   useEffect(() => {
     if (shouldScrollToBottom && scrollContainerRef.current) {
@@ -447,18 +467,31 @@ export function EnvironmentVariables({
     setEnvVars(JSON.parse(JSON.stringify(initialVarsRef.current)))
     setWorkspaceVars({ ...initialWorkspaceVarsRef.current })
     setShowUnsavedChanges(false)
-    if (pendingClose.current) {
-      onOpenChange(false)
-    }
-  }, [onOpenChange])
+
+    pendingProceedCallback.current?.()
+    pendingProceedCallback.current = null
+  }, [])
 
   /**
-   * Saves all personal and workspace environment variables
+   * Saves all personal and workspace environment variables with optimistic updates
    */
   const handleSave = useCallback(async () => {
+    const onProceed = pendingProceedCallback.current
+
+    // Save previous state for rollback on error
+    const prevInitialVars = [...initialVarsRef.current]
+    const prevInitialWorkspaceVars = { ...initialWorkspaceVarsRef.current }
+
     try {
       setShowUnsavedChanges(false)
-      onOpenChange(false)
+      hasSavedRef.current = true
+
+      // Optimistically update refs to mark current state as "saved"
+      initialWorkspaceVarsRef.current = { ...workspaceVars }
+      initialVarsRef.current = JSON.parse(JSON.stringify(envVars.filter((v) => v.key && v.value)))
+
+      // Force recomputation of change tracking based on updated baselines
+      setChangeToken((prev) => prev + 1)
 
       const validVariables = envVars
         .filter((v) => v.key && v.value)
@@ -466,7 +499,7 @@ export function EnvironmentVariables({
 
       await savePersonalMutation.mutateAsync({ variables: validVariables })
 
-      const before = initialWorkspaceVarsRef.current
+      const before = prevInitialWorkspaceVars
       const after = workspaceVars
       const toUpsert: Record<string, string> = {}
       const toDelete: string[] = []
@@ -490,15 +523,19 @@ export function EnvironmentVariables({
         }
       }
 
-      initialWorkspaceVarsRef.current = { ...workspaceVars }
+      onProceed?.()
+      pendingProceedCallback.current = null
     } catch (error) {
+      // Rollback optimistic updates on error
+      hasSavedRef.current = false
+      initialVarsRef.current = prevInitialVars
+      initialWorkspaceVarsRef.current = prevInitialWorkspaceVars
       logger.error('Failed to save environment variables:', error)
     }
   }, [
     envVars,
     workspaceVars,
     workspaceId,
-    onOpenChange,
     savePersonalMutation,
     upsertWorkspaceMutation,
     removeWorkspaceMutation,
@@ -519,6 +556,20 @@ export function EnvironmentVariables({
     [workspaceId]
   )
 
+  /**
+   * Demotes a newly promoted workspace variable back to personal scope.
+   * Only works for variables that were promoted during this session (before save).
+   */
+  const demoteToPersonal = useCallback((key: string, value: string) => {
+    if (!key) return
+    setWorkspaceVars((prev) => {
+      const next = { ...prev }
+      delete next[key]
+      return next
+    })
+    setEnvVars((prev) => [...prev, { key, value, id: generateRowId() }])
+  }, [])
+
   const conflictClassName = 'border-[var(--text-error)] bg-[#F6D2D2] dark:bg-[#442929]'
 
   /**
@@ -584,10 +635,10 @@ export function EnvironmentVariables({
                     onClick={() => promoteToWorkspace(envVar)}
                     className='h-9 w-9'
                   >
-                    <Share2 className='h-4 w-4' />
+                    <Share2 className='h-3.5 w-3.5' />
                   </Button>
                 </Tooltip.Trigger>
-                <Tooltip.Content>Make it workspace scoped</Tooltip.Content>
+                <Tooltip.Content>Scope: personal</Tooltip.Content>
               </Tooltip.Root>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -652,49 +703,48 @@ export function EnvironmentVariables({
             readOnly
           />
         </div>
-        {isLoading ? (
-          <Skeleton className='h-9 w-full rounded-[8px]' />
-        ) : (
-          <div className='flex items-center gap-[8px]'>
-            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
-              <Search
-                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-                strokeWidth={2}
-              />
-              <Input
-                placeholder='Search variables...'
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                name='env_search_field'
-                autoComplete='off'
-                autoCapitalize='off'
-                spellCheck='false'
-                readOnly
-                onFocus={(e) => e.target.removeAttribute('readOnly')}
-                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' className={PRIMARY_BUTTON_STYLES}>
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
-              Add
-            </Button>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  onClick={handleSave}
-                  disabled={!hasChanges || hasConflicts}
-                  variant='primary'
-                  className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
-                >
-                  Save
-                </Button>
-              </Tooltip.Trigger>
-              {hasConflicts && (
-                <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>
-              )}
-            </Tooltip.Root>
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <Input
+              placeholder='Search variables...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              name='env_search_field'
+              autoComplete='off'
+              autoCapitalize='off'
+              spellCheck='false'
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              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}
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+          <Tooltip.Root>
+            <Tooltip.Trigger asChild>
+              <Button
+                onClick={handleSave}
+                disabled={isLoading || !hasChanges || hasConflicts}
+                variant='primary'
+                className={`${PRIMARY_BUTTON_STYLES} ${hasConflicts ? 'cursor-not-allowed opacity-50' : ''}`}
+              >
+                Save
+              </Button>
+            </Tooltip.Trigger>
+            {hasConflicts && <Tooltip.Content>Resolve all conflicts before saving</Tooltip.Content>}
+          </Tooltip.Root>
+        </div>
 
         {/* Scrollable Content */}
         <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
@@ -702,28 +752,21 @@ export function EnvironmentVariables({
             {isLoading ? (
               <>
                 <div className='flex flex-col gap-[8px]'>
-                  <Skeleton className='h-[13px] w-[70px]' />
-                  {Array.from({ length: 2 }, (_, i) => (
-                    <div key={`workspace-${i}`} className={GRID_COLS}>
-                      <Skeleton className='h-9 rounded-[4px]' />
-                      <div />
-                      <Skeleton className='h-9 rounded-[4px]' />
-                      <div className='ml-[8px] flex'>
-                        <Skeleton className='h-9 w-9 rounded-[4px]' />
-                      </div>
-                    </div>
-                  ))}
+                  <Skeleton className='h-[14px] w-[70px]' />
+                  <div className='text-[13px] text-[var(--text-muted)]'>
+                    <Skeleton className='h-[13px] w-[160px]' />
+                  </div>
                 </div>
                 <div className='flex flex-col gap-[8px]'>
-                  <Skeleton className='h-[13px] w-[55px]' />
+                  <Skeleton className='h-[14px] w-[55px]' />
                   {Array.from({ length: 2 }, (_, i) => (
                     <div key={`personal-${i}`} className={GRID_COLS}>
-                      <Skeleton className='h-9 rounded-[4px]' />
+                      <Skeleton className='h-9 rounded-[6px]' />
                       <div />
-                      <Skeleton className='h-9 rounded-[4px]' />
-                      <div className='ml-[8px] flex items-center'>
-                        <Skeleton className='h-9 w-9 rounded-[4px]' />
-                        <Skeleton className='h-9 w-9 rounded-[4px]' />
+                      <Skeleton className='h-9 rounded-[6px]' />
+                      <div className='ml-[8px] flex items-center gap-0'>
+                        <Skeleton className='h-9 w-9 rounded-[6px]' />
+                        <Skeleton className='h-9 w-9 rounded-[6px]' />
                       </div>
                     </div>
                   ))}
@@ -739,7 +782,7 @@ export function EnvironmentVariables({
                     </div>
                     {!searchTerm.trim() && Object.keys(workspaceVars).length === 0 ? (
                       <div className='text-[13px] text-[var(--text-muted)]'>
-                        No workspace variables yet.
+                        No workspace variables yet
                       </div>
                     ) : (
                       (searchTerm.trim()
@@ -752,10 +795,12 @@ export function EnvironmentVariables({
                           value={value}
                           renamingKey={renamingKey}
                           pendingKeyValue={pendingKeyValue}
+                          isNewlyPromoted={!Object.hasOwn(initialWorkspaceVarsRef.current, key)}
                           onRenameStart={setRenamingKey}
                           onPendingKeyChange={setPendingKeyValue}
                           onRenameEnd={handleWorkspaceKeyRename}
                           onDelete={handleDeleteWorkspaceVar}
+                          onDemote={demoteToPersonal}
                         />
                       ))
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
index 750451c4916..031e5e1dc89 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/files/files.tsx
@@ -1,10 +1,10 @@
 'use client'
 
 import { useMemo, useRef, useState } from 'react'
-import { ArrowDown, Search } from 'lucide-react'
+import { ArrowDown, Loader2, Plus, Search } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { Button, Tooltip, Trash } from '@/components/emcn'
-import { Input, Progress } from '@/components/ui'
+import { Input, Progress, Skeleton } from '@/components/ui'
 import {
   Table,
   TableBody,
@@ -31,6 +31,9 @@ import { useWorkspacePermissions } from '@/hooks/use-workspace-permissions'
 const logger = createLogger('FileUploadsSettings')
 const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
 
+const PRIMARY_BUTTON_STYLES =
+  '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+
 const SUPPORTED_EXTENSIONS = [
   // Documents
   'pdf',
@@ -66,6 +69,16 @@ const SUPPORTED_EXTENSIONS = [
 const ACCEPT_ATTR =
   '.pdf,.csv,.doc,.docx,.txt,.md,.xlsx,.xls,.html,.htm,.pptx,.ppt,.json,.yaml,.yml,.mp3,.m4a,.wav,.webm,.ogg,.flac,.aac,.opus,.mp4,.mov,.avi,.mkv'
 
+const PLAN_NAMES = {
+  enterprise: 'Enterprise',
+  team: 'Team',
+  pro: 'Pro',
+  free: 'Free',
+} as const
+
+const GRADIENT_TEXT_STYLES =
+  'gradient-text bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
+
 export function Files() {
   const params = useParams()
   const workspaceId = params?.workspaceId as string
@@ -80,7 +93,10 @@ export function Files() {
   const [uploading, setUploading] = useState(false)
   const [uploadError, setUploadError] = useState<string | null>(null)
   const [uploadProgress, setUploadProgress] = useState({ completed: 0, total: 0 })
+  const [downloadingFileId, setDownloadingFileId] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
   const fileInputRef = useRef<HTMLInputElement>(null)
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
 
   const { permissions: workspacePermissions, loading: permissionsLoading } =
     useWorkspacePermissions(workspaceId)
@@ -139,9 +155,35 @@ export function Files() {
   }
 
   const handleDownload = async (file: WorkspaceFileRecord) => {
-    if (!workspaceId) return
+    if (!workspaceId || downloadingFileId === file.id) return
 
-    window.open(`/workspace/${workspaceId}/files/${file.id}/view`, '_blank')
+    setDownloadingFileId(file.id)
+    try {
+      const response = await fetch(`/api/workspaces/${workspaceId}/files/${file.id}/download`, {
+        method: 'POST',
+      })
+
+      if (!response.ok) {
+        throw new Error('Failed to get download URL')
+      }
+
+      const data = await response.json()
+
+      if (!data.success || !data.downloadUrl) {
+        throw new Error('Invalid download response')
+      }
+
+      const link = document.createElement('a')
+      link.href = data.downloadUrl
+      link.download = data.fileName || file.name
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link)
+    } catch (error) {
+      logger.error('Error downloading file:', error)
+    } finally {
+      setDownloadingFileId(null)
+    }
   }
 
   const handleDelete = async (file: WorkspaceFileRecord) => {
@@ -172,7 +214,6 @@ export function Files() {
     return `${mm}/${dd}/${yy}`
   }
 
-  const [search, setSearch] = useState('')
   const filteredFiles = useMemo(() => {
     if (!search) return files
     const q = search.toLowerCase()
@@ -192,143 +233,202 @@ export function Files() {
     return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`
   }
 
-  const PLAN_NAMES = {
-    enterprise: 'Enterprise',
-    team: 'Team',
-    pro: 'Pro',
-    free: 'Free',
-  } as const
-
   const planName = storageInfo?.plan || 'free'
   const displayPlanName = PLAN_NAMES[planName as keyof typeof PLAN_NAMES] || 'Free'
 
-  const GRADIENT_TEXT_STYLES =
-    'gradient-text bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
+  const renderTableSkeleton = () => (
+    <Table className='table-auto text-[13px]'>
+      <TableHeader>
+        <TableRow className='hover:bg-transparent'>
+          <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[40px]' />
+          </TableHead>
+          <TableHead className='w-[14%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[28px]' />
+          </TableHead>
+          <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[56px]' />
+          </TableHead>
+          <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+            <Skeleton className='h-[12px] w-[48px]' />
+          </TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {Array.from({ length: 3 }, (_, i) => (
+          <TableRow key={i} className='hover:bg-transparent'>
+            <TableCell className='px-[12px] py-[6px]'>
+              <div className='flex min-w-0 items-center gap-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                <Skeleton className='h-[14px] w-[180px]' />
+              </div>
+            </TableCell>
+            <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px]'>
+              <Skeleton className='h-[12px] w-[48px]' />
+            </TableCell>
+            <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px]'>
+              <Skeleton className='h-[12px] w-[56px]' />
+            </TableCell>
+            <TableCell className='px-[12px] py-[6px]'>
+              <div className='flex items-center gap-[4px]'>
+                <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
+                <Skeleton className='h-[28px] w-[28px] rounded-[4px]' />
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
 
   return (
-    <div className='relative flex h-full flex-col'>
-      {/* Header: search left, file count + Upload right */}
-      <div className='flex items-center justify-between'>
-        <div className='flex h-9 w-56 items-center gap-2 rounded-[8px] border bg-transparent pr-2 pl-3'>
-          <Search className='h-4 w-4 flex-shrink-0 text-muted-foreground' strokeWidth={2} />
+    <div className='flex h-full flex-col gap-[2px]'>
+      {/* Search Input and Upload Button */}
+      <div className='flex items-center gap-[8px]'>
+        <div
+          className={cn(
+            'flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]',
+            permissionsLoading && 'opacity-50'
+          )}
+        >
+          <Search
+            className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+            strokeWidth={2}
+          />
           <Input
             placeholder='Search files...'
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className='flex-1 border-0 bg-transparent px-0 font-[380] font-sans text-base text-foreground leading-none placeholder:text-muted-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+            disabled={permissionsLoading}
+            className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-100'
           />
         </div>
-        <div className='flex items-center gap-3'>
-          {isBillingEnabled && storageInfo && (
-            <div className='flex flex-col items-end gap-1'>
-              <div className='flex items-center gap-2 text-sm'>
-                <span
-                  className={cn(
-                    'font-medium',
-                    planName === 'free' ? 'text-foreground' : GRADIENT_TEXT_STYLES
-                  )}
-                >
-                  {displayPlanName}
-                </span>
-                <span className='text-muted-foreground tabular-nums'>
-                  {formatStorageSize(storageInfo.usedBytes)} /{' '}
-                  {formatStorageSize(storageInfo.limitBytes)}
-                </span>
-              </div>
-              <Progress
-                value={Math.min(storageInfo.percentUsed, 100)}
-                className='h-1 w-full'
-                indicatorClassName='bg-black dark:bg-white'
-              />
-            </div>
-          )}
-          {userPermissions.canEdit && (
-            <div className='flex items-center'>
-              <input
-                ref={fileInputRef}
-                type='file'
-                className='hidden'
-                onChange={handleFileChange}
-                disabled={uploading}
-                accept={ACCEPT_ATTR}
-                multiple
-              />
-              <Button
-                onClick={handleUploadClick}
-                disabled={uploading}
-                variant='ghost'
-                className='h-9 rounded-[8px] border bg-background px-3 shadow-xs hover:bg-muted focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+        {!permissionsLoading && isBillingEnabled && storageInfo && (
+          <div className='flex flex-col items-end gap-[4px]'>
+            <div className='flex items-center gap-[8px] text-[13px]'>
+              <span
+                className={cn(
+                  'font-medium',
+                  planName === 'free' ? 'text-[var(--text-primary)]' : GRADIENT_TEXT_STYLES
+                )}
               >
-                {uploading && uploadProgress.total > 0
-                  ? `Uploading ${uploadProgress.completed}/${uploadProgress.total}...`
-                  : uploading
-                    ? 'Uploading...'
-                    : 'Upload File'}
-              </Button>
+                {displayPlanName}
+              </span>
+              <span className='text-[var(--text-muted)] tabular-nums'>
+                {formatStorageSize(storageInfo.usedBytes)} /{' '}
+                {formatStorageSize(storageInfo.limitBytes)}
+              </span>
             </div>
-          )}
-        </div>
+            <Progress
+              value={Math.min(storageInfo.percentUsed, 100)}
+              className='h-1 w-full'
+              indicatorClassName='bg-black dark:bg-white'
+            />
+          </div>
+        )}
+        {(permissionsLoading || userPermissions.canEdit) && (
+          <>
+            <input
+              ref={fileInputRef}
+              type='file'
+              className='hidden'
+              onChange={handleFileChange}
+              disabled={uploading || permissionsLoading}
+              accept={ACCEPT_ATTR}
+              multiple
+            />
+            <Button
+              onClick={handleUploadClick}
+              disabled={uploading || permissionsLoading}
+              variant='primary'
+              className={PRIMARY_BUTTON_STYLES}
+            >
+              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              {uploading && uploadProgress.total > 0
+                ? `${uploadProgress.completed}/${uploadProgress.total}`
+                : uploading
+                  ? 'Uploading...'
+                  : 'Upload'}
+            </Button>
+          </>
+        )}
       </div>
 
       {/* Error message */}
       {uploadError && (
-        <div>
-          <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-            {uploadError}
-          </p>
-        </div>
+        <p className='text-[11px] text-[var(--text-error)] leading-tight'>{uploadError}</p>
       )}
 
-      {/* Files Table */}
-      <div className='min-h-0 flex-1 overflow-y-auto'>
-        {files.length === 0 ? (
-          <div className='py-8 text-center text-muted-foreground text-sm'>
+      {/* Scrollable Content */}
+      <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
+        {permissionsLoading ? (
+          renderTableSkeleton()
+        ) : files.length === 0 ? (
+          <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
             No files uploaded yet
           </div>
+        ) : filteredFiles.length === 0 ? (
+          <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+            No files found matching "{search}"
+          </div>
         ) : (
           <Table className='table-auto text-[13px]'>
             <TableHeader>
               <TableRow className='hover:bg-transparent'>
-                <TableHead className='w-[56%] px-3 text-xs'>Name</TableHead>
-                <TableHead className='w-[14%] px-3 text-left text-xs'>Size</TableHead>
-                <TableHead className='w-[15%] px-3 text-left text-xs'>Uploaded</TableHead>
-                <TableHead className='w-[15%] px-3 text-left text-xs'>Actions</TableHead>
+                <TableHead className='w-[56%] px-[12px] py-[6px] text-[12px] text-[var(--text-secondary)]'>
+                  Name
+                </TableHead>
+                <TableHead className='w-[14%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Size
+                </TableHead>
+                <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Uploaded
+                </TableHead>
+                <TableHead className='w-[15%] px-[12px] py-[6px] text-left text-[12px] text-[var(--text-secondary)]'>
+                  Actions
+                </TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {filteredFiles.map((file) => {
                 const Icon = getDocumentIcon(file.type || '', file.name)
                 return (
-                  <TableRow key={file.id} className='hover:bg-muted/50'>
-                    <TableCell className='px-3'>
-                      <div className='flex min-w-0 items-center gap-2'>
-                        <Icon className='h-3.5 w-3.5 shrink-0 text-muted-foreground' />
+                  <TableRow key={file.id} className='hover:bg-[var(--surface-2)]'>
+                    <TableCell className='px-[12px] py-[6px]'>
+                      <div className='flex min-w-0 items-center gap-[8px]'>
+                        <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
                         <button
                           onClick={() => handleDownload(file)}
-                          className='min-w-0 truncate text-left font-normal hover:underline'
+                          disabled={downloadingFileId === file.id}
+                          className='min-w-0 truncate text-left font-normal text-[14px] text-[var(--text-primary)] hover:underline disabled:cursor-not-allowed disabled:no-underline disabled:opacity-50'
                           title={file.name}
                         >
                           {truncateMiddle(file.name)}
                         </button>
                       </div>
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-3 text-[12px] text-muted-foreground'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
                       {formatFileSize(file.size)}
                     </TableCell>
-                    <TableCell className='whitespace-nowrap px-3 text-[12px] text-muted-foreground'>
+                    <TableCell className='whitespace-nowrap px-[12px] py-[6px] text-[12px] text-[var(--text-muted)]'>
                       {formatDate(file.uploadedAt)}
                     </TableCell>
-                    <TableCell className='px-3'>
-                      <div className='flex items-center gap-1'>
+                    <TableCell className='px-[12px] py-[6px]'>
+                      <div className='flex items-center gap-[4px]'>
                         <Tooltip.Root>
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
                               onClick={() => handleDownload(file)}
-                              className='h-6 w-6 p-0'
+                              className='h-[28px] w-[28px] p-0'
+                              disabled={downloadingFileId === file.id}
                               aria-label={`Download ${file.name}`}
                             >
-                              <ArrowDown className='h-[14px] w-[14px]' />
+                              {downloadingFileId === file.id ? (
+                                <Loader2 className='h-[14px] w-[14px] animate-spin' />
+                              ) : (
+                                <ArrowDown className='h-[14px] w-[14px]' />
+                              )}
                             </Button>
                           </Tooltip.Trigger>
                           <Tooltip.Content>Download file</Tooltip.Content>
@@ -339,7 +439,7 @@ export function Files() {
                               <Button
                                 variant='ghost'
                                 onClick={() => handleDelete(file)}
-                                className='h-6 w-6 p-0'
+                                className='h-[28px] w-[28px] p-0'
                                 disabled={deleteFile.isPending}
                                 aria-label={`Delete ${file.name}`}
                               >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
index dd8a868fd55..160ef9507da 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/index.ts
@@ -1,10 +1,10 @@
 export { ApiKeys } from './api-keys/api-keys'
 export { Copilot } from './copilot/copilot'
-export { Credentials } from './credentials/credentials'
 export { CustomTools } from './custom-tools/custom-tools'
 export { EnvironmentVariables } from './environment/environment'
 export { Files as FileUploads } from './files/files'
 export { General } from './general/general'
+export { Integrations } from './integrations/integrations'
 export { MCP } from './mcp/mcp'
 export { SSO } from './sso/sso'
 export { Subscription } from './subscription/subscription'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx
similarity index 98%
rename from apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
rename to apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx
index a0c70351cc5..c6b5e8e9b59 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/credentials/credentials.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/integrations/integrations.tsx
@@ -22,7 +22,7 @@ import {
   useOAuthConnections,
 } from '@/hooks/queries/oauth-connections'
 
-const logger = createLogger('Credentials')
+const logger = createLogger('Integrations')
 
 /**
  * Static skeleton structure matching OAUTH_PROVIDERS layout
@@ -49,7 +49,7 @@ const SKELETON_STRUCTURE: [string, number][] = [
   ['Salesforce', 1],
 ]
 
-function CredentialsSkeleton() {
+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]'>
@@ -86,12 +86,12 @@ function CredentialsSkeleton() {
   )
 }
 
-interface CredentialsProps {
+interface IntegrationsProps {
   onOpenChange?: (open: boolean) => void
   registerCloseHandler?: (handler: (open: boolean) => void) => void
 }
 
-export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsProps) {
+export function Integrations({ onOpenChange, registerCloseHandler }: IntegrationsProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const pendingServiceRef = useRef<HTMLDivElement>(null)
@@ -267,7 +267,7 @@ export function Credentials({ onOpenChange, registerCloseHandler }: CredentialsP
   }
 
   if (isPending) {
-    return <CredentialsSkeleton />
+    return <IntegrationsSkeleton />
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
index c9beb60dd47..455df8078fb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/mcp.tsx
@@ -11,7 +11,7 @@ import {
   ModalFooter,
   ModalHeader,
 } from '@/components/emcn/components/modal/modal'
-import { Input, Skeleton } from '@/components/ui'
+import { Input } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
 import { checkEnvVarTrigger } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
 import {
@@ -372,32 +372,29 @@ export function MCP() {
   return (
     <>
       <div className='flex h-full flex-col gap-[16px]'>
-        {serversLoading ? (
-          <Skeleton className='h-9 w-full rounded-[8px]' />
-        ) : (
-          <div className='flex items-center gap-[8px]'>
-            <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
-              <Search
-                className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-                strokeWidth={2}
-              />
-              <Input
-                placeholder='Search MCPs...'
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-              />
-            </div>
-            <Button
-              onClick={() => setShowAddForm(!showAddForm)}
-              variant='primary'
-              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-            >
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
-              Add
-            </Button>
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <Input
+              placeholder='Search MCPs...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
           </div>
-        )}
+          <Button
+            onClick={() => setShowAddForm(!showAddForm)}
+            variant='primary'
+            disabled={serversLoading}
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            Add
+          </Button>
+        </div>
 
         {showAddForm && !serversLoading && (
           <div className='rounded-[8px] border bg-[var(--surface-3)] p-[10px]'>
@@ -498,47 +495,45 @@ export function MCP() {
         )}
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[16px]'>
-            {error ? (
-              <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-                <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                  {error instanceof Error ? error.message : 'Failed to load MCP servers'}
-                </p>
-              </div>
-            ) : serversLoading ? (
-              <div className='flex flex-col gap-[8px]'>
-                <McpServerSkeleton />
-                <McpServerSkeleton />
-                <McpServerSkeleton />
-              </div>
-            ) : showEmptyState ? (
-              <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
-                Click "Add" above to get started
-              </div>
-            ) : (
-              <div className='flex flex-col gap-[8px]'>
-                {filteredServers.map((server) => {
-                  if (!server?.id) return null
-                  const tools = toolsByServer[server.id] || []
-
-                  return (
-                    <ServerListItem
-                      key={server.id}
-                      server={server}
-                      tools={tools}
-                      isDeleting={deletingServers.has(server.id)}
-                      onRemove={() => handleRemoveServer(server.id, server.name || 'this server')}
-                    />
-                  )
-                })}
-                {showNoResults && (
-                  <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
-                    No servers found matching "{searchTerm}"
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
+          {error ? (
+            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {error instanceof Error ? error.message : 'Failed to load MCP servers'}
+              </p>
+            </div>
+          ) : serversLoading ? (
+            <div className='flex flex-col gap-[8px]'>
+              <McpServerSkeleton />
+              <McpServerSkeleton />
+              <McpServerSkeleton />
+            </div>
+          ) : showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {filteredServers.map((server) => {
+                if (!server?.id) return null
+                const tools = toolsByServer[server.id] || []
+
+                return (
+                  <ServerListItem
+                    key={server.id}
+                    server={server}
+                    tools={tools}
+                    isDeleting={deletingServers.has(server.id)}
+                    onRemove={() => handleRemoveServer(server.id, server.name || 'this server')}
+                  />
+                )
+              })}
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No servers found matching "{searchTerm}"
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
index 42df6a7eb68..ce1533ccee1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
@@ -1,10 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-import { Check, ChevronDown, Copy, Eye, EyeOff } from 'lucide-react'
-import { Button, Combobox, Input, Label } from '@/components/emcn'
-import { Alert, AlertDescription } from '@/components/ui'
-import { Skeleton } from '@/components/ui/skeleton'
+import { useMemo, useState } from 'react'
+import { ArrowLeft, Check, ChevronDown, Copy, Eye, EyeOff, Plus, Search } from 'lucide-react'
+import { Button, Combobox, Input, Switch, Textarea } from '@/components/emcn'
+import {
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+} from '@/components/emcn/components/modal/modal'
+import { Skeleton, Input as UiInput } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/environment'
@@ -73,24 +79,55 @@ interface SSOProvider {
   providerType: 'oidc' | 'saml'
 }
 
+const DEFAULT_FORM_DATA = {
+  providerType: 'oidc' as 'oidc' | 'saml',
+  providerId: '',
+  issuerUrl: '',
+  domain: '',
+  clientId: '',
+  clientSecret: '',
+  scopes: 'openid,profile,email',
+  entryPoint: '',
+  cert: '',
+  callbackUrl: '',
+  audience: '',
+  wantAssertionsSigned: true,
+  idpMetadata: '',
+  showAdvanced: false,
+}
+
+const DEFAULT_ERRORS = {
+  providerType: [],
+  providerId: [],
+  issuerUrl: [],
+  domain: [],
+  clientId: [],
+  clientSecret: [],
+  entryPoint: [],
+  cert: [],
+  scopes: [],
+  callbackUrl: [],
+  audience: [],
+}
+
 export function SSO() {
   const { data: session } = useSession()
   const { data: orgsData } = useOrganizations()
   const { data: subscriptionData } = useSubscriptionData()
+  const { data: providersData, isLoading: isLoadingProviders } = useSSOProviders()
+
   const activeOrganization = orgsData?.activeOrganization
+  const providers = providersData?.providers || []
 
   const userEmail = session?.user?.email
   const userId = session?.user?.id
-  const userRole = getUserRole(activeOrganization, userEmail)
+  const userRole = getUserRole(orgsData?.activeOrganization, userEmail)
   const isOwner = userRole === 'owner'
   const isAdmin = userRole === 'admin'
   const canManageSSO = isOwner || isAdmin
   const subscriptionStatus = getSubscriptionStatus(subscriptionData?.data)
   const hasEnterprisePlan = subscriptionStatus.isEnterprise
 
-  const { data: providersData, isLoading: isLoadingProviders } = useSSOProviders()
-
-  const providers = providersData?.providers || []
   const isSSOProviderOwner =
     !isBillingEnabled && userId ? providers.some((p: any) => p.userId === userId) : null
 
@@ -101,89 +138,56 @@ export function SSO() {
   const [copied, setCopied] = useState(false)
   const [showConfigForm, setShowConfigForm] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
+  const [editingProviderId, setEditingProviderId] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
 
-  const [formData, setFormData] = useState({
-    providerType: 'oidc' as 'oidc' | 'saml',
-    providerId: '',
-    issuerUrl: '',
-    domain: '',
-    // OIDC fields
-    clientId: '',
-    clientSecret: '',
-    scopes: 'openid,profile,email',
-    // SAML fields
-    entryPoint: '',
-    cert: '',
-    callbackUrl: '',
-    audience: '',
-    wantAssertionsSigned: true,
-    idpMetadata: '', // Optional IDP metadata XML
-    // Advanced options
-    showAdvanced: false,
-  })
-
-  const [errors, setErrors] = useState<Record<string, string[]>>({
-    providerType: [],
-    providerId: [],
-    issuerUrl: [],
-    domain: [],
-    clientId: [],
-    clientSecret: [],
-    entryPoint: [],
-    cert: [],
-    scopes: [],
-    callbackUrl: [],
-    audience: [],
-  })
+  // Delete confirmation dialog state
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [providerToDelete, setProviderToDelete] = useState<SSOProvider | null>(null)
+
+  const [formData, setFormData] = useState(DEFAULT_FORM_DATA)
+  const [errors, setErrors] = useState<Record<string, string[]>>(DEFAULT_ERRORS)
   const [showErrors, setShowErrors] = useState(false)
 
+  const filteredProviders = useMemo(() => {
+    if (!searchTerm.trim()) return providers
+    const term = searchTerm.toLowerCase()
+    return providers.filter(
+      (p: SSOProvider) =>
+        p.providerId?.toLowerCase().includes(term) || p.domain?.toLowerCase().includes(term)
+    )
+  }, [providers, searchTerm])
+
+  // Permission checks with early returns
   if (isBillingEnabled) {
     if (!activeOrganization) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              You must be part of an organization to configure Single Sign-On.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          You must be part of an organization to configure Single Sign-On.
         </div>
       )
     }
 
     if (!hasEnterprisePlan) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Single Sign-On is available on Enterprise plans only.
-              <br />
-              Contact your admin to upgrade your plan.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Single Sign-On is available on Enterprise plans only.
         </div>
       )
     }
 
     if (!canManageSSO) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Only organization owners and admins can configure Single Sign-On settings.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Only organization owners and admins can configure Single Sign-On settings.
         </div>
       )
     }
   } else {
     if (!isLoadingProviders && isSSOProviderOwner === false && providers.length > 0) {
       return (
-        <div className='flex h-full items-center justify-center p-6'>
-          <Alert>
-            <AlertDescription>
-              Only the user who configured SSO can manage these settings.
-            </AlertDescription>
-          </Alert>
+        <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+          Only the user who configured SSO can manage these settings.
         </div>
       )
     }
@@ -284,6 +288,16 @@ export function SSO() {
     return false
   }
 
+  const resetForm = () => {
+    setFormData(DEFAULT_FORM_DATA)
+    setErrors(DEFAULT_ERRORS)
+    setShowErrors(false)
+    setShowConfigForm(false)
+    setIsEditing(false)
+    setEditingProviderId(null)
+    setError(null)
+  }
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
@@ -331,26 +345,7 @@ export function SSO() {
       await configureSSOMutation.mutateAsync(requestBody)
 
       logger.info('SSO provider configured', { providerId: formData.providerId })
-
-      setFormData({
-        providerType: 'oidc',
-        providerId: '',
-        issuerUrl: '',
-        domain: '',
-        clientId: '',
-        clientSecret: '',
-        scopes: 'openid,profile,email',
-        entryPoint: '',
-        cert: '',
-        callbackUrl: '',
-        audience: '',
-        wantAssertionsSigned: true,
-        idpMetadata: '',
-        showAdvanced: false,
-      })
-
-      setShowConfigForm(false)
-      setIsEditing(false)
+      resetForm()
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Unknown error occurred'
       setError(message)
@@ -370,19 +365,7 @@ export function SSO() {
 
       if (field === 'providerType') {
         setShowErrors(false)
-        setErrors({
-          providerType: [],
-          providerId: [],
-          issuerUrl: [],
-          domain: [],
-          clientId: [],
-          clientSecret: [],
-          entryPoint: [],
-          cert: [],
-          scopes: [],
-          callbackUrl: [],
-          audience: [],
-        })
+        setErrors(DEFAULT_ERRORS)
       } else {
         validateAll(next)
       }
@@ -393,14 +376,20 @@ export function SSO() {
 
   const callbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${formData.providerId}`
 
-  const copyCallback = async () => {
+  const copyToClipboard = async (url: string) => {
     try {
-      await navigator.clipboard.writeText(callbackUrl)
+      await navigator.clipboard.writeText(url)
       setCopied(true)
       setTimeout(() => setCopied(false), 1500)
     } catch {}
   }
 
+  const handleAddNew = () => {
+    resetForm()
+    setShowConfigForm(true)
+    setIsEditing(false)
+  }
+
   const handleReconfigure = (provider: SSOProvider) => {
     try {
       let clientId = ''
@@ -430,642 +419,677 @@ export function SSO() {
         idpMetadata: '',
         showAdvanced: false,
       })
+      setEditingProviderId(provider.id)
       setIsEditing(true)
       setShowConfigForm(true)
-    } catch (error) {
-      logger.error('Failed to parse provider config', { error })
+      setError(null)
+      setShowErrors(false)
+    } catch (err) {
+      logger.error('Failed to parse provider config', { error: err })
       setError('Failed to load provider configuration')
     }
   }
 
+  const hasProviders = providers.length > 0
+  const showEmptyState = !hasProviders && !showConfigForm
+  const showNoResults = searchTerm.trim() && filteredProviders.length === 0 && providers.length > 0
+
   if (isLoadingProviders) {
     return <SsoSkeleton />
   }
 
-  const hasProviders = providers.length > 0
-  const showStatus = hasProviders && !showConfigForm
-
-  return (
-    <div className='relative flex h-full flex-col'>
-      {/* Hidden dummy inputs to prevent browser password manager autofill */}
-      <input
-        type='text'
-        name='fakeusernameremembered'
-        autoComplete='username'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='password'
-        name='fakepasswordremembered'
-        autoComplete='current-password'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <input
-        type='email'
-        name='fakeemailremembered'
-        autoComplete='email'
-        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-        tabIndex={-1}
-        readOnly
-      />
-      <div className='flex-1 overflow-y-auto'>
-        <div className='space-y-6'>
-          {showStatus ? (
-            <div className='space-y-4'>
-              {providers.map((provider: SSOProvider) => (
-                <div key={provider.id} className='rounded-[8px] bg-muted/30 p-4'>
-                  <div className='flex items-start justify-between gap-3'>
-                    <div className='flex-1'>
-                      <h3 className='font-medium text-base'>Single Sign-On Provider</h3>
-                      <p className='mt-1 text-muted-foreground text-sm'>
-                        {provider.providerId} • {provider.domain}
-                      </p>
-                    </div>
-                    <div className='flex items-center space-x-2'>
-                      <Button
-                        variant='ghost'
-                        onClick={() => handleReconfigure(provider)}
-                        className='h-8'
-                      >
-                        Reconfigure
-                      </Button>
-                    </div>
-                  </div>
+  // Form View (Add/Edit)
+  if (showConfigForm) {
+    return (
+      <>
+        <form
+          onSubmit={handleSubmit}
+          autoComplete='off'
+          className='flex h-full flex-col gap-[16px]'
+        >
+          {/* Hidden dummy inputs to prevent browser password manager autofill */}
+          <input
+            type='text'
+            name='fakeusernameremembered'
+            autoComplete='username'
+            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+            tabIndex={-1}
+            readOnly
+          />
+          <input
+            type='password'
+            name='fakepasswordremembered'
+            autoComplete='current-password'
+            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+            tabIndex={-1}
+            readOnly
+          />
+          <input
+            type='email'
+            name='fakeemailremembered'
+            autoComplete='email'
+            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+            tabIndex={-1}
+            readOnly
+          />
+          <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
+
+          {/* Back Button Header */}
+          <div className='mt-[6px] flex items-center gap-[8px]'>
+            <button
+              type='button'
+              onClick={resetForm}
+              className='flex items-center gap-[6px] font-medium text-[13px] text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
+            >
+              <ArrowLeft className='h-[14px] w-[14px]' />
+              <span>SSO Providers</span>
+            </button>
+          </div>
 
-                  <div className='mt-4 border-border border-t pt-4'>
-                    <div className='grid grid-cols-2 gap-4 text-sm'>
-                      <div>
-                        <span className='font-medium text-muted-foreground'>Issuer URL</span>
-                        <p className='mt-1 break-all font-mono text-foreground text-xs'>
-                          {provider.issuer}
-                        </p>
-                      </div>
-                      <div>
-                        <span className='font-medium text-muted-foreground'>Provider ID</span>
-                        <p className='mt-1 text-foreground'>{provider.providerId}</p>
-                      </div>
-                    </div>
+          {/* Scrollable Content */}
+          <div className='min-h-0 flex-1 overflow-y-auto'>
+            <div className='flex flex-col gap-[16px]'>
+              {/* Provider Type Selection */}
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Provider Type
+                </span>
+                <Combobox
+                  value={formData.providerType}
+                  onChange={(value: string) =>
+                    handleInputChange('providerType', value as 'oidc' | 'saml')
+                  }
+                  options={[
+                    { label: 'OIDC', value: 'oidc' },
+                    { label: 'SAML', value: 'saml' },
+                  ]}
+                  placeholder='Select provider type'
+                  editable={false}
+                  className='h-9'
+                />
+                <p className='text-[13px] text-[var(--text-muted)]'>
+                  {formData.providerType === 'oidc'
+                    ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
+                    : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
+                </p>
+              </div>
 
-                    <div className='mt-4'>
-                      <span className='font-medium text-muted-foreground text-sm'>
-                        Callback URL
-                      </span>
-                      <div className='relative mt-2'>
-                        <Input
-                          readOnly
-                          value={`${getBaseUrl()}/api/auth/sso/callback/${provider.providerId}`}
-                          className='h-9 w-full cursor-text pr-10 font-mono text-xs focus-visible:ring-2 focus-visible:ring-primary/20'
-                          onClick={(e) => (e.target as HTMLInputElement).select()}
-                        />
-                        <button
-                          type='button'
-                          onClick={() => {
-                            const url = `${getBaseUrl()}/api/auth/sso/callback/${provider.providerId}`
-                            navigator.clipboard.writeText(url)
-                            setCopied(true)
-                            setTimeout(() => setCopied(false), 1500)
-                          }}
-                          aria-label='Copy callback URL'
-                          className='-translate-y-1/2 absolute top-1/2 right-3 rounded p-1 text-muted-foreground transition hover:text-foreground'
-                        >
-                          {copied ? (
-                            <Check className='h-4 w-4 text-green-500' />
-                          ) : (
-                            <Copy className='h-4 w-4' />
-                          )}
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <>
-              {hasProviders && (
-                <div className='mb-4'>
-                  <Button
-                    variant='ghost'
-                    onClick={() => {
-                      setShowConfigForm(false)
-                      setIsEditing(false)
-                    }}
-                    className='h-8'
-                  >
-                    ← Back to SSO Status
-                  </Button>
-                </div>
-              )}
-              <form onSubmit={handleSubmit} className='space-y-3' autoComplete='off'>
-                {/* Hidden dummy input to prevent autofill */}
-                <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
-                {/* Provider Type Selection */}
-                <div className='space-y-1'>
-                  <Label>Provider Type</Label>
-                  <div className='flex gap-2 rounded-[10px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-1'>
-                    <button
-                      type='button'
-                      className={cn(
-                        'flex-1 rounded-[6px] px-3 py-2 font-medium text-sm transition-all',
-                        formData.providerType === 'oidc'
-                          ? 'bg-[var(--surface-1)] text-[var(--text-primary)] shadow-sm ring-1 ring-[var(--border-muted)]'
-                          : 'text-muted-foreground hover:bg-[var(--surface-2)] hover:text-foreground'
-                      )}
-                      onClick={() => handleInputChange('providerType', 'oidc')}
-                    >
-                      OIDC
-                    </button>
-                    <button
-                      type='button'
-                      className={cn(
-                        'flex-1 rounded-[6px] px-3 py-2 font-medium text-sm transition-all',
-                        formData.providerType === 'saml'
-                          ? 'bg-[var(--surface-1)] text-[var(--text-primary)] shadow-sm ring-1 ring-[var(--border-muted)]'
-                          : 'text-muted-foreground hover:bg-[var(--surface-2)] hover:text-foreground'
-                      )}
-                      onClick={() => handleInputChange('providerType', 'saml')}
-                    >
-                      SAML
-                    </button>
-                  </div>
-                  <p className='text-muted-foreground text-xs'>
-                    {formData.providerType === 'oidc'
-                      ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
-                      : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
+              {/* Provider ID */}
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Provider ID
+                </span>
+                <Combobox
+                  value={formData.providerId}
+                  onChange={(value: string) => handleInputChange('providerId', value)}
+                  options={TRUSTED_SSO_PROVIDERS.map((id) => ({
+                    label: id,
+                    value: id,
+                  }))}
+                  placeholder='Select a provider ID'
+                  editable={true}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.providerId.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                  )}
+                />
+                {showErrors && errors.providerId.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.providerId.join(' ')}
                   </p>
-                </div>
+                )}
+              </div>
 
-                <div className='space-y-1'>
-                  <Label htmlFor='provider-id'>Provider ID</Label>
-                  <Combobox
-                    value={formData.providerId}
-                    onChange={(value: string) => handleInputChange('providerId', value)}
-                    options={TRUSTED_SSO_PROVIDERS.map((id) => ({
-                      label: id,
-                      value: id,
-                    }))}
-                    placeholder='Select a provider ID'
-                    editable={true}
-                    className={cn(
-                      showErrors &&
-                        errors.providerId.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                    )}
-                  />
-                  {showErrors && errors.providerId.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.providerId.join(' ')}
-                    </p>
+              {/* Issuer URL */}
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Issuer URL
+                </span>
+                <Input
+                  type='url'
+                  placeholder='https://your-identity-provider.com/oauth2/default'
+                  value={formData.issuerUrl}
+                  name='sso_issuer_endpoint'
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  readOnly
+                  onFocus={(e) => e.target.removeAttribute('readOnly')}
+                  onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.issuerUrl.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
-                  <p className='text-muted-foreground text-xs'>
-                    Select a pre-configured provider ID from the trusted providers list
+                />
+                {showErrors && errors.issuerUrl.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.issuerUrl.join(' ')}
                   </p>
-                </div>
+                )}
+              </div>
 
-                <div className='space-y-1'>
-                  <Label htmlFor='issuer-url'>Issuer URL</Label>
-                  <Input
-                    id='issuer-url'
-                    type='url'
-                    placeholder='Enter Issuer URL'
-                    value={formData.issuerUrl}
-                    name='sso_issuer_endpoint'
-                    autoComplete='off'
-                    autoCapitalize='none'
-                    spellCheck={false}
-                    readOnly
-                    onFocus={(e) => e.target.removeAttribute('readOnly')}
-                    onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
-                    className={cn(
-                      'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                      showErrors &&
-                        errors.issuerUrl.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                    )}
-                  />
-                  {showErrors && errors.issuerUrl.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.issuerUrl.join(' ')}
-                    </p>
+              {/* Domain */}
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
+                <Input
+                  type='text'
+                  placeholder='your-domain.identityprovider.com'
+                  value={formData.domain}
+                  name='sso_identity_domain'
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  readOnly
+                  onFocus={(e) => e.target.removeAttribute('readOnly')}
+                  onChange={(e) => handleInputChange('domain', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.domain.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
-                  <p className='text-muted-foreground text-xs' />
-                </div>
+                />
+                {showErrors && errors.domain.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.domain.join(' ')}
+                  </p>
+                )}
+              </div>
 
-                <div className='space-y-1'>
-                  <Label htmlFor='domain'>Domain</Label>
-                  <Input
-                    id='domain'
-                    type='text'
-                    placeholder='Enter Domain'
-                    value={formData.domain}
-                    name='sso_identity_domain'
-                    autoComplete='off'
-                    autoCapitalize='none'
-                    spellCheck={false}
-                    readOnly
-                    onFocus={(e) => e.target.removeAttribute('readOnly')}
-                    onChange={(e) => handleInputChange('domain', e.target.value)}
-                    className={cn(
-                      'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                      showErrors &&
-                        errors.domain.length > 0 &&
-                        'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+              {/* Provider-specific fields */}
+              {formData.providerType === 'oidc' ? (
+                <>
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Client ID
+                    </span>
+                    <Input
+                      type='text'
+                      placeholder='Enter Client ID'
+                      value={formData.clientId}
+                      name='sso_client_identifier'
+                      autoComplete='off'
+                      autoCapitalize='none'
+                      spellCheck={false}
+                      readOnly
+                      onFocus={(e) => e.target.removeAttribute('readOnly')}
+                      onChange={(e) => handleInputChange('clientId', e.target.value)}
+                      className={cn(
+                        'h-9',
+                        showErrors &&
+                          errors.clientId.length > 0 &&
+                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                      )}
+                    />
+                    {showErrors && errors.clientId.length > 0 && (
+                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                        {errors.clientId.join(' ')}
+                      </p>
                     )}
-                  />
-                  {showErrors && errors.domain.length > 0 && (
-                    <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                      {errors.domain.join(' ')}
-                    </p>
-                  )}
-                </div>
+                  </div>
 
-                {/* Provider-specific fields */}
-                {formData.providerType === 'oidc' ? (
-                  <>
-                    <div className='space-y-1'>
-                      <Label htmlFor='client-id'>Client ID</Label>
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Client Secret
+                    </span>
+                    <div className='relative'>
                       <Input
-                        id='client-id'
                         type='text'
-                        placeholder='Enter Client ID'
-                        value={formData.clientId}
-                        name='sso_client_identifier'
+                        placeholder='Enter Client Secret'
+                        value={formData.clientSecret}
+                        name='sso_client_key'
                         autoComplete='off'
                         autoCapitalize='none'
                         spellCheck={false}
                         readOnly
-                        onFocus={(e) => e.target.removeAttribute('readOnly')}
-                        onChange={(e) => handleInputChange('clientId', e.target.value)}
+                        onFocus={(e) => {
+                          e.target.removeAttribute('readOnly')
+                          setShowClientSecret(true)
+                        }}
+                        onBlurCapture={() => setShowClientSecret(false)}
+                        onChange={(e) => handleInputChange('clientSecret', e.target.value)}
+                        style={
+                          !showClientSecret
+                            ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
+                            : undefined
+                        }
                         className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
+                          'h-9 pr-[36px]',
                           showErrors &&
-                            errors.clientId.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                            errors.clientSecret.length > 0 &&
+                            'border-[var(--text-error)] focus:border-[var(--text-error)]'
                         )}
                       />
-                      {showErrors && errors.clientId.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.clientId.join(' ')}
-                        </p>
-                      )}
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        onClick={() => setShowClientSecret((s) => !s)}
+                        className='-translate-y-1/2 absolute top-1/2 right-[8px] h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                        aria-label={showClientSecret ? 'Hide client secret' : 'Show client secret'}
+                      >
+                        {showClientSecret ? (
+                          <EyeOff className='h-4 w-4' />
+                        ) : (
+                          <Eye className='h-4 w-4' />
+                        )}
+                      </Button>
                     </div>
+                    {showErrors && errors.clientSecret.length > 0 && (
+                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                        {errors.clientSecret.join(' ')}
+                      </p>
+                    )}
+                  </div>
 
-                    <div className='space-y-1'>
-                      <Label htmlFor='client-secret'>Client Secret</Label>
-                      <div className='relative'>
-                        <Input
-                          id='client-secret'
-                          type='text'
-                          placeholder='Enter Client Secret'
-                          value={formData.clientSecret}
-                          name='sso_client_key'
-                          autoComplete='off'
-                          autoCapitalize='none'
-                          spellCheck={false}
-                          readOnly
-                          onFocus={(e) => {
-                            e.target.removeAttribute('readOnly')
-                            setShowClientSecret(true)
-                          }}
-                          onBlurCapture={() => setShowClientSecret(false)}
-                          onChange={(e) => handleInputChange('clientSecret', e.target.value)}
-                          style={
-                            !showClientSecret
-                              ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                              : undefined
-                          }
-                          className={cn(
-                            'rounded-[10px] pr-10 shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                            showErrors &&
-                              errors.clientSecret.length > 0 &&
-                              'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                          )}
-                        />
-                        <Button
-                          variant='ghost'
-                          onClick={() => setShowClientSecret((s) => !s)}
-                          className='-translate-y-1/2 absolute top-1/2 right-3 h-6 w-6 rounded-[4px] p-0 text-muted-foreground hover:text-foreground'
-                          aria-label={
-                            showClientSecret ? 'Hide client secret' : 'Show client secret'
-                          }
-                        >
-                          {showClientSecret ? (
-                            <EyeOff className='h-4 w-4' />
-                          ) : (
-                            <Eye className='h-4 w-4' />
-                          )}
-                        </Button>
-                      </div>
-                      {showErrors && errors.clientSecret.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.clientSecret.join(' ')}
-                        </p>
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Scopes
+                    </span>
+                    <Input
+                      type='text'
+                      placeholder='openid,profile,email'
+                      value={formData.scopes}
+                      autoComplete='off'
+                      autoCapitalize='none'
+                      spellCheck={false}
+                      onChange={(e) => handleInputChange('scopes', e.target.value)}
+                      className={cn(
+                        'h-9',
+                        showErrors &&
+                          errors.scopes.length > 0 &&
+                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
                       )}
-                    </div>
-
-                    <div className='space-y-1'>
-                      <Label htmlFor='scopes'>Scopes</Label>
-                      <Input
-                        id='scopes'
-                        type='text'
-                        placeholder='openid,profile,email'
-                        value={formData.scopes}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('scopes', e.target.value)}
-                        className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.scopes.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                      />
-                      {showErrors && errors.scopes.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.scopes.join(' ')}
-                        </p>
+                    />
+                    {showErrors && errors.scopes.length > 0 && (
+                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                        {errors.scopes.join(' ')}
+                      </p>
+                    )}
+                    <p className='text-[13px] text-[var(--text-muted)]'>
+                      Comma-separated list of OIDC scopes to request
+                    </p>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Entry Point URL
+                    </span>
+                    <Input
+                      type='url'
+                      placeholder='https://idp.example.com/sso/saml'
+                      value={formData.entryPoint}
+                      autoComplete='off'
+                      autoCapitalize='none'
+                      spellCheck={false}
+                      onChange={(e) => handleInputChange('entryPoint', e.target.value)}
+                      className={cn(
+                        'h-9',
+                        showErrors &&
+                          errors.entryPoint.length > 0 &&
+                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
                       )}
-                      <p className='text-muted-foreground text-xs'>
-                        Comma-separated list of OIDC scopes to request
+                    />
+                    {showErrors && errors.entryPoint.length > 0 && (
+                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                        {errors.entryPoint.join(' ')}
                       </p>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div className='space-y-1'>
-                      <Label htmlFor='entry-point'>Entry Point URL</Label>
-                      <Input
-                        id='entry-point'
-                        type='url'
-                        placeholder='Enter Entry Point URL'
-                        value={formData.entryPoint}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('entryPoint', e.target.value)}
-                        className={cn(
-                          'rounded-[10px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.entryPoint.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
-                        )}
-                      />
-                      {showErrors && errors.entryPoint.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.entryPoint.join(' ')}
-                        </p>
+                    )}
+                  </div>
+
+                  <div className='flex flex-col gap-[8px]'>
+                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                      Identity Provider Certificate
+                    </span>
+                    <Textarea
+                      placeholder='-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----'
+                      value={formData.cert}
+                      autoComplete='off'
+                      autoCapitalize='none'
+                      spellCheck={false}
+                      onChange={(e) => handleInputChange('cert', e.target.value)}
+                      className={cn(
+                        'min-h-[80px] font-mono',
+                        showErrors &&
+                          errors.cert.length > 0 &&
+                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
                       )}
-                      <p className='text-muted-foreground text-xs' />
-                    </div>
+                      rows={3}
+                    />
+                    {showErrors && errors.cert.length > 0 && (
+                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                        {errors.cert.join(' ')}
+                      </p>
+                    )}
+                  </div>
 
-                    <div className='space-y-1'>
-                      <Label htmlFor='cert'>Identity Provider Certificate</Label>
-                      <textarea
-                        id='cert'
-                        placeholder='-----BEGIN CERTIFICATE-----&#10;MIIDBjCCAe4CAQAwDQYJKoZIhvcNAQEFBQAwEjEQMA...&#10;-----END CERTIFICATE-----'
-                        value={formData.cert}
-                        autoComplete='off'
-                        autoCapitalize='none'
-                        spellCheck={false}
-                        onChange={(e) => handleInputChange('cert', e.target.value)}
+                  {/* Advanced SAML Options */}
+                  <div className='flex flex-col gap-[8px]'>
+                    <button
+                      type='button'
+                      onClick={() =>
+                        handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
+                      }
+                      className='flex w-fit items-center gap-[6px] text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    >
+                      <ChevronDown
                         className={cn(
-                          'min-h-[100px] w-full rounded-[10px] border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100',
-                          showErrors &&
-                            errors.cert.length > 0 &&
-                            'border-red-500 focus:border-red-500 focus:ring-red-100 focus-visible:ring-red-500'
+                          'h-4 w-4 transition-transform',
+                          formData.showAdvanced && 'rotate-180'
                         )}
-                        rows={4}
                       />
-                      {showErrors && errors.cert.length > 0 && (
-                        <p className='mt-1 text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                          {errors.cert.join(' ')}
-                        </p>
-                      )}
-                      <p className='text-muted-foreground text-xs' />
-                    </div>
-
-                    {/* Advanced SAML Options */}
-                    <div className='space-y-3'>
-                      <button
-                        type='button'
-                        onClick={() =>
-                          handleInputChange(
-                            'showAdvanced',
-                            formData.showAdvanced ? 'false' : 'true'
-                          )
-                        }
-                        className='flex items-center gap-2 text-muted-foreground text-sm hover:text-foreground'
-                      >
-                        <ChevronDown
-                          className={cn(
-                            'h-4 w-4 transition-transform',
-                            formData.showAdvanced && 'rotate-180'
-                          )}
-                        />
-                        Advanced SAML Options
-                      </button>
-
-                      {formData.showAdvanced && (
-                        <>
-                          <div className='space-y-1'>
-                            <Label htmlFor='audience'>Audience (Entity ID)</Label>
-                            <Input
-                              id='audience'
-                              type='text'
-                              placeholder='Enter Audience'
-                              value={formData.audience}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('audience', e.target.value)}
-                              className='rounded-[10px] shadow-sm'
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              The SAML audience restriction (optional, defaults to app URL)
-                            </p>
-                          </div>
-
-                          <div className='space-y-1'>
-                            <Label htmlFor='callback-url'>Callback URL Override</Label>
-                            <Input
-                              id='callback-url'
-                              type='url'
-                              placeholder='Enter Callback URL'
-                              value={formData.callbackUrl}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
-                              className='rounded-[10px] shadow-sm'
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              Custom SAML callback URL (optional, auto-generated if empty)
-                            </p>
-                          </div>
-
-                          <div className='flex items-center space-x-2'>
-                            <input
-                              type='checkbox'
-                              id='want-assertions-signed'
-                              checked={formData.wantAssertionsSigned}
-                              onChange={(e) =>
-                                handleInputChange(
-                                  'wantAssertionsSigned',
-                                  e.target.checked ? 'true' : 'false'
-                                )
-                              }
-                              className='rounded'
-                            />
-                            <Label htmlFor='want-assertions-signed' className='text-sm'>
-                              Require signed SAML assertions
-                            </Label>
-                          </div>
-
-                          <div className='space-y-1'>
-                            <Label htmlFor='idp-metadata'>Identity Provider Metadata XML</Label>
-                            <textarea
-                              id='idp-metadata'
-                              placeholder='<?xml version="1.0" encoding="UTF-8"?>&#10;<md:EntityDescriptor xmlns:md="urn:oasis:names:tc:SAML:2.0:metadata">&#10;  ...&#10;</md:EntityDescriptor>'
-                              value={formData.idpMetadata}
-                              autoComplete='off'
-                              autoCapitalize='none'
-                              spellCheck={false}
-                              onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
-                              className='min-h-[100px] w-full rounded-[10px] border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
-                              rows={4}
-                            />
-                            <p className='text-muted-foreground text-xs'>
-                              Paste the complete IDP metadata XML from your identity provider for
-                              advanced configuration
-                            </p>
-                          </div>
-                        </>
-                      )}
-                    </div>
-                  </>
-                )}
+                      Advanced Options
+                    </button>
 
-                {error && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                    {error}
-                  </p>
-                )}
+                    {formData.showAdvanced && (
+                      <div className='flex flex-col gap-[16px] pt-[8px]'>
+                        <div className='flex flex-col gap-[8px]'>
+                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                            Audience (Entity ID)
+                          </span>
+                          <Input
+                            type='text'
+                            placeholder='Enter Audience'
+                            value={formData.audience}
+                            autoComplete='off'
+                            autoCapitalize='none'
+                            spellCheck={false}
+                            onChange={(e) => handleInputChange('audience', e.target.value)}
+                            className='h-9'
+                          />
+                        </div>
+
+                        <div className='flex flex-col gap-[8px]'>
+                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                            Callback URL Override
+                          </span>
+                          <Input
+                            type='url'
+                            placeholder='Enter Callback URL'
+                            value={formData.callbackUrl}
+                            autoComplete='off'
+                            autoCapitalize='none'
+                            spellCheck={false}
+                            onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
+                            className='h-9'
+                          />
+                        </div>
+
+                        <div className='flex flex-col gap-[8px]'>
+                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                            Require signed SAML assertions
+                          </span>
+                          <Switch
+                            checked={formData.wantAssertionsSigned}
+                            onCheckedChange={(checked) =>
+                              handleInputChange('wantAssertionsSigned', checked ? 'true' : 'false')
+                            }
+                          />
+                        </div>
+
+                        <div className='flex flex-col gap-[8px]'>
+                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                            IDP Metadata XML
+                          </span>
+                          <Textarea
+                            placeholder='Paste IDP metadata XML here (optional)'
+                            value={formData.idpMetadata}
+                            autoComplete='off'
+                            autoCapitalize='none'
+                            spellCheck={false}
+                            onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
+                            className='min-h-[60px] font-mono'
+                            rows={2}
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </>
+              )}
 
-                <Button
-                  type='submit'
-                  className='h-9 w-full'
-                  disabled={
-                    configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()
-                  }
-                >
-                  {configureSSOMutation.isPending
-                    ? isEditing
-                      ? 'Updating...'
-                      : 'Configuring...'
-                    : isEditing
-                      ? 'Update SSO Provider'
-                      : 'Configure SSO Provider'}
-                </Button>
-              </form>
-
-              <div className='space-y-1'>
-                <Label htmlFor='callback-url'>Callback URL</Label>
-                <p className='text-muted-foreground text-xs'>
-                  Configure this URL in your identity provider as the callback/redirect URI
-                </p>
-                <div className='relative flex h-9 items-center rounded-[8px] bg-muted px-3 pr-10'>
-                  <code className='flex-1 truncate font-mono text-foreground text-xs'>
-                    {callbackUrl}
-                  </code>
+              {/* Callback URL display */}
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Callback URL
+                </span>
+                <div className='relative'>
+                  <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                    <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                      {callbackUrl}
+                    </code>
+                  </div>
                   <Button
+                    type='button'
                     variant='ghost'
-                    onClick={copyCallback}
-                    aria-label='Copy callback URL'
-                    className='absolute right-1 h-6 w-6 rounded-[4px] p-0 text-muted-foreground hover:text-foreground'
+                    onClick={() => copyToClipboard(callbackUrl)}
+                    className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                   >
-                    {copied ? <Check className='h-4 w-4' /> : <Copy className='h-4 w-4' />}
+                    {copied ? (
+                      <Check className='h-[14px] w-[14px]' />
+                    ) : (
+                      <Copy className='h-[14px] w-[14px]' />
+                    )}
+                    <span className='sr-only'>Copy callback URL</span>
                   </Button>
                 </div>
+                <p className='text-[13px] text-[var(--text-muted)]'>
+                  Configure this in your identity provider
+                </p>
               </div>
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function SsoSkeleton() {
-  return (
-    <div className='flex h-full flex-col'>
-      <div className='flex-1 overflow-y-auto'>
-        <div className='space-y-3'>
-          {/* Provider type toggle */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-28' />
-            <Skeleton className='h-10 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-64' />
-          </div>
-
-          {/* Provider ID */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-80' />
+            </div>
           </div>
 
-          {/* Issuer URL */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
+          {/* Footer */}
+          <div className='mt-auto flex items-center justify-end gap-[8px]'>
+            {error && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{error}</p>}
+            <Button
+              type='submit'
+              variant='primary'
+              disabled={configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()}
+              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+            >
+              {configureSSOMutation.isPending
+                ? isEditing
+                  ? 'Updating...'
+                  : 'Adding...'
+                : isEditing
+                  ? 'Update'
+                  : 'Add Provider'}
+            </Button>
           </div>
+        </form>
+
+        {/* Delete Confirmation Dialog */}
+        <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+          <ModalContent className='w-[400px]'>
+            <ModalHeader>Delete SSO Provider</ModalHeader>
+            <ModalBody>
+              <p className='text-[12px] text-[var(--text-tertiary)]'>
+                Are you sure you want to delete{' '}
+                <span className='font-medium text-[var(--text-primary)]'>
+                  {providerToDelete?.providerId}
+                </span>
+                ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+              </p>
+            </ModalBody>
+            <ModalFooter>
+              <Button
+                variant='default'
+                onClick={() => {
+                  setShowDeleteDialog(false)
+                  setProviderToDelete(null)
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  setShowDeleteDialog(false)
+                  setProviderToDelete(null)
+                }}
+                className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+              >
+                Delete
+              </Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </>
+    )
+  }
 
-          {/* Domain */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-16' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
+  // List View
+  return (
+    <>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Search Input and Add Button */}
+        <div className='flex items-center gap-[8px]'>
+          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
+            <Search
+              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
+              strokeWidth={2}
+            />
+            <UiInput
+              placeholder='Search SSO providers...'
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            />
           </div>
+          <Button
+            onClick={handleAddNew}
+            variant='primary'
+            disabled={isLoadingProviders}
+            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]' />
+            Add
+          </Button>
+        </div>
 
-          {/* Client ID */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-20' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
-          </div>
+        {/* Scrollable Content */}
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          {showEmptyState ? (
+            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+              Click "Add" above to get started
+            </div>
+          ) : (
+            <div className='flex flex-col gap-[8px]'>
+              {/* Provider List */}
+              {filteredProviders.map((provider: SSOProvider) => (
+                <div key={provider.id} className='flex items-center justify-between gap-[12px]'>
+                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+                    <div className='flex items-center gap-[6px]'>
+                      <span className='max-w-[280px] truncate font-medium text-[14px]'>
+                        {provider.providerId}
+                      </span>
+                      <span className='text-[13px] text-[var(--text-secondary)]'>
+                        ({provider.providerType.toUpperCase()})
+                      </span>
+                    </div>
+                    <p className='truncate text-[13px] text-[var(--text-muted)]'>
+                      {provider.domain}
+                    </p>
+                  </div>
+                  <Button
+                    variant='ghost'
+                    className='flex-shrink-0'
+                    onClick={() => handleReconfigure(provider)}
+                  >
+                    Edit
+                  </Button>
+                </div>
+              ))}
 
-          {/* Client Secret */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <div className='relative'>
-              <Skeleton className='h-9 w-full rounded-[10px]' />
-              <Skeleton className='-translate-y-1/2 absolute top-1/2 right-3 h-4 w-4 rounded' />
+              {showNoResults && (
+                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+                  No providers found matching "{searchTerm}"
+                </div>
+              )}
             </div>
-          </div>
+          )}
+        </div>
+      </div>
 
-          {/* Scopes */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-16' />
-            <Skeleton className='h-9 w-full rounded-[10px]' />
-            <Skeleton className='h-3 w-56' />
-          </div>
+      {/* Delete Confirmation Dialog */}
+      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <ModalContent className='w-[400px]'>
+          <ModalHeader>Delete SSO Provider</ModalHeader>
+          <ModalBody>
+            <p className='text-[12px] text-[var(--text-tertiary)]'>
+              Are you sure you want to delete{' '}
+              <span className='font-medium text-[var(--text-primary)]'>
+                {providerToDelete?.providerId}
+              </span>
+              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button
+              variant='default'
+              onClick={() => {
+                setShowDeleteDialog(false)
+                setProviderToDelete(null)
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant='primary'
+              onClick={() => {
+                setShowDeleteDialog(false)
+                setProviderToDelete(null)
+              }}
+              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+            >
+              Delete
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  )
+}
 
-          {/* Submit button */}
-          <Skeleton className='h-9 w-full rounded-[10px]' />
+function SsoSkeleton() {
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Search + Add button skeleton */}
+      <div className='flex items-center gap-[8px]'>
+        <Skeleton className='h-9 flex-1 rounded-[8px]' />
+        <Skeleton className='h-9 w-[70px] rounded-[8px]' />
+      </div>
 
-          {/* Callback URL */}
-          <div className='space-y-1'>
-            <Skeleton className='h-4 w-24' />
-            <Skeleton className='h-3 w-96' />
-            <div className='relative flex h-9 items-center rounded-[8px] bg-muted px-3'>
-              <Skeleton className='h-3 w-64' />
-            </div>
-          </div>
+      {/* List skeleton */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[8px]'>
+          <SsoProviderSkeleton />
+          <SsoProviderSkeleton />
+          <SsoProviderSkeleton />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SsoProviderSkeleton() {
+  return (
+    <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
+        <div className='flex items-center gap-[6px]'>
+          <Skeleton className='h-[14px] w-[100px]' />
+          <Skeleton className='h-[13px] w-[50px]' />
         </div>
+        <Skeleton className='h-[13px] w-[150px]' />
       </div>
+      <Skeleton className='h-[26px] w-[40px] rounded-[6px]' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
new file mode 100644
index 00000000000..a27dbf86136
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
@@ -0,0 +1,499 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Camera, Globe, Linkedin, Mail } from 'lucide-react'
+import Image from 'next/image'
+import { Button, Combobox, Input, Textarea } from '@/components/emcn'
+import { AgentIcon, xIcon as XIcon } from '@/components/icons'
+import { Skeleton } from '@/components/ui/skeleton'
+import { useSession } from '@/lib/auth-client'
+import { createLogger } from '@/lib/logs/console/logger'
+import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
+import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
+import {
+  useCreatorProfile,
+  useOrganizations,
+  useSaveCreatorProfile,
+} from '@/hooks/queries/creator-profile'
+
+const logger = createLogger('TemplateProfile')
+
+type SaveStatus = 'idle' | 'saving' | 'saved' | 'error'
+
+interface FormData {
+  referenceType: 'user' | 'organization'
+  referenceId: string
+  name: string
+  profileImageUrl: string
+  about: string
+  xUrl: string
+  linkedinUrl: string
+  websiteUrl: string
+  contactEmail: string
+}
+
+/**
+ * Extracts initials from a name string.
+ * @param name - The name to extract initials from
+ * @returns Up to 2 uppercase characters representing the initials
+ */
+function getInitials(name: string | undefined | null): string {
+  if (!name?.trim()) return ''
+  const parts = name.trim().split(' ')
+  if (parts.length >= 2) {
+    return `${parts[0][0]}${parts[parts.length - 1][0]}`.toUpperCase()
+  }
+  return parts[0][0].toUpperCase()
+}
+
+/**
+ * Strips the protocol (http:// or https://) from a URL for display purposes.
+ * @param url - The URL to strip the protocol from
+ * @returns The URL without the protocol prefix
+ */
+function stripProtocol(url: string): string {
+  if (!url) return ''
+  return url.replace(/^https?:\/\//, '')
+}
+
+/**
+ * Normalizes a URL by adding https:// protocol if not present.
+ * @param url - The URL to normalize (may or may not have protocol)
+ * @returns The URL with https:// protocol, or empty string if input is empty
+ */
+function normalizeUrl(url: string): string {
+  if (!url?.trim()) return ''
+  const trimmed = url.trim()
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed
+  }
+  return `https://${trimmed}`
+}
+
+/**
+ * Template Profile settings component for managing user/organization profiles
+ */
+export function TemplateProfile() {
+  const { data: session, isPending: isSessionLoading } = useSession()
+  const userId = session?.user?.id || ''
+
+  const { data: organizations = [], isLoading: isOrganizationsLoading } = useOrganizations()
+  const { data: existingProfile, isLoading: isProfileLoading } = useCreatorProfile(userId)
+  const saveProfile = useSaveCreatorProfile()
+
+  const isLoading = isSessionLoading || isOrganizationsLoading || (!!userId && isProfileLoading)
+
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>('idle')
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [uploadError, setUploadError] = useState<string | null>(null)
+  const [fieldErrors, setFieldErrors] = useState<Partial<Record<keyof FormData, string>>>({})
+  const [imageLoadError, setImageLoadError] = useState(false)
+
+  const [formData, setFormData] = useState<FormData>({
+    referenceType: 'user',
+    referenceId: session?.user?.id || '',
+    name: session?.user?.name || session?.user?.email || '',
+    profileImageUrl: '',
+    about: '',
+    xUrl: '',
+    linkedinUrl: '',
+    websiteUrl: '',
+    contactEmail: '',
+  })
+
+  const [initialFormData, setInitialFormData] = useState<FormData | null>(null)
+
+  const {
+    previewUrl: profilePictureUrl,
+    fileInputRef: profilePictureInputRef,
+    handleThumbnailClick: handleProfilePictureClick,
+    handleFileChange: handleProfilePictureChange,
+    isUploading: isUploadingProfilePicture,
+  } = useProfilePictureUpload({
+    currentImage: formData.profileImageUrl,
+    onUpload: async (url) => {
+      setFormData((prev) => ({ ...prev, profileImageUrl: url || '' }))
+      setUploadError(null)
+      setImageLoadError(false)
+    },
+    onError: (error) => {
+      setUploadError(error)
+      setTimeout(() => setUploadError(null), 5000)
+    },
+  })
+
+  // Reset image load error when the URL changes
+  useEffect(() => {
+    setImageLoadError(false)
+  }, [profilePictureUrl])
+
+  // Initialize referenceId and initial form data when session loads (for new profiles)
+  useEffect(() => {
+    if (userId && !existingProfile && !isProfileLoading) {
+      setFormData((prev) => {
+        const newData = {
+          ...prev,
+          referenceId: prev.referenceType === 'user' ? userId : prev.referenceId,
+        }
+        // Set initial form data for new profiles to track changes
+        if (initialFormData === null) {
+          setInitialFormData(newData)
+        }
+        return newData
+      })
+    }
+  }, [userId, existingProfile, isProfileLoading, initialFormData])
+
+  // Load existing profile data
+  useEffect(() => {
+    if (existingProfile) {
+      const details = existingProfile.details as CreatorProfileDetails | null
+      const loadedData: FormData = {
+        referenceType: existingProfile.referenceType,
+        referenceId: existingProfile.referenceId,
+        name: existingProfile.name || '',
+        profileImageUrl: existingProfile.profileImageUrl || '',
+        about: details?.about || '',
+        // Strip protocol from URLs for display
+        xUrl: stripProtocol(details?.xUrl || ''),
+        linkedinUrl: stripProtocol(details?.linkedinUrl || ''),
+        websiteUrl: stripProtocol(details?.websiteUrl || ''),
+        contactEmail: details?.contactEmail || '',
+      }
+      setFormData(loadedData)
+      setInitialFormData(loadedData)
+    }
+  }, [existingProfile])
+
+  const handleSubmit = async () => {
+    if (!userId) return
+    if (!formData.name.trim() || !formData.profileImageUrl) return
+
+    setSaveStatus('saving')
+    setSaveError(null)
+
+    try {
+      const details: CreatorProfileDetails = {}
+      if (formData.about) details.about = formData.about
+      // Normalize URLs by adding https:// protocol before saving
+      if (formData.xUrl) details.xUrl = normalizeUrl(formData.xUrl)
+      if (formData.linkedinUrl) details.linkedinUrl = normalizeUrl(formData.linkedinUrl)
+      if (formData.websiteUrl) details.websiteUrl = normalizeUrl(formData.websiteUrl)
+      if (formData.contactEmail) details.contactEmail = formData.contactEmail
+
+      await saveProfile.mutateAsync({
+        referenceType: formData.referenceType,
+        referenceId: formData.referenceId,
+        name: formData.name,
+        profileImageUrl: formData.profileImageUrl,
+        details: Object.keys(details).length > 0 ? details : undefined,
+        existingProfileId: existingProfile?.id,
+      })
+
+      setInitialFormData({ ...formData })
+      setSaveStatus('saved')
+      setTimeout(() => setSaveStatus('idle'), 2000)
+    } catch (error) {
+      logger.error('Error saving creator profile:', error)
+      const errorMessage = error instanceof Error ? error.message : 'Failed to save creator profile'
+      setSaveError(errorMessage)
+      setSaveStatus('idle')
+    }
+  }
+
+  /**
+   * Validates a URL by normalizing it first (adding protocol if needed).
+   * @param value - The URL value to validate (with or without protocol)
+   * @returns Error message if invalid, null if valid
+   */
+  const validateUrl = (value: string): string | null => {
+    if (!value) return null
+    try {
+      new URL(normalizeUrl(value))
+      return null
+    } catch {
+      return 'Please enter a valid URL'
+    }
+  }
+
+  const validateEmail = (value: string): string | null => {
+    if (!value) return null
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return emailRegex.test(value) ? null : 'Please enter a valid email'
+  }
+
+  const updateField = <K extends keyof FormData>(field: K, value: FormData[K]) => {
+    // For URL fields, strip the protocol for display
+    const isUrlField = field === 'xUrl' || field === 'linkedinUrl' || field === 'websiteUrl'
+    const processedValue = isUrlField ? (stripProtocol(value as string) as FormData[K]) : value
+
+    setFormData((prev) => ({ ...prev, [field]: processedValue }))
+
+    // Validate URL fields on change
+    if (isUrlField) {
+      const error = validateUrl(processedValue as string)
+      setFieldErrors((prev) => ({ ...prev, [field]: error || undefined }))
+    } else if (field === 'contactEmail') {
+      const error = validateEmail(value as string)
+      setFieldErrors((prev) => ({ ...prev, [field]: error || undefined }))
+    }
+  }
+
+  const hasFieldErrors = Object.values(fieldErrors).some(Boolean)
+  const hasChanges =
+    initialFormData !== null &&
+    (formData.referenceType !== initialFormData.referenceType ||
+      formData.referenceId !== initialFormData.referenceId ||
+      formData.name !== initialFormData.name ||
+      formData.profileImageUrl !== initialFormData.profileImageUrl ||
+      formData.about !== initialFormData.about ||
+      formData.xUrl !== initialFormData.xUrl ||
+      formData.linkedinUrl !== initialFormData.linkedinUrl ||
+      formData.websiteUrl !== initialFormData.websiteUrl ||
+      formData.contactEmail !== initialFormData.contactEmail)
+  const isFormValid =
+    formData.name.trim() && formData.profileImageUrl && !hasFieldErrors && hasChanges
+
+  if (isLoading) {
+    return (
+      <div className='flex h-full flex-col gap-[16px]'>
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {/* Display Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[50px]' />
+              <div className='flex items-center gap-[10px]'>
+                <Skeleton className='h-9 w-9 flex-shrink-0 rounded-full' />
+                <Skeleton className='h-9 flex-1' />
+              </div>
+            </div>
+
+            {/* About Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[35px]' />
+              <Skeleton className='min-h-[100px] w-full' />
+            </div>
+
+            {/* Socials Skeleton */}
+            <div className='flex flex-col gap-[8px]'>
+              <Skeleton className='h-[13px] w-[45px]' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+              <Skeleton className='h-9 w-full' />
+            </div>
+          </div>
+        </div>
+
+        {/* Save Button Skeleton */}
+        <div className='mt-auto flex items-center justify-end gap-[8px]'>
+          <Skeleton className='h-9 w-[60px]' />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Scrollable Content */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {/* Profile Selection - only show if user has organizations */}
+          {organizations.length > 0 && (
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Profile</span>
+              <Combobox
+                options={[
+                  { label: 'Personal', value: userId },
+                  ...organizations.map((org) => ({
+                    label: org.name,
+                    value: org.id,
+                  })),
+                ]}
+                value={formData.referenceId}
+                onChange={(value) => {
+                  const isPersonal = value === userId
+                  setFormData((prev) => ({
+                    ...prev,
+                    referenceType: isPersonal ? 'user' : 'organization',
+                    referenceId: value,
+                  }))
+                }}
+                placeholder='Select profile'
+                editable={false}
+              />
+            </div>
+          )}
+
+          {/* Display */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Display<span className='ml-[6px] text-[var(--text-secondary)]'>*</span>
+            </span>
+            <div className='flex items-center gap-[10px]'>
+              <div className='relative'>
+                <div
+                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover:bg-[var(--bg)] ${
+                    profilePictureUrl && !imageLoadError
+                      ? 'border-transparent'
+                      : 'border-[var(--border)]'
+                  }`}
+                  onClick={handleProfilePictureClick}
+                >
+                  {(() => {
+                    if (profilePictureUrl && !imageLoadError) {
+                      return (
+                        <Image
+                          src={profilePictureUrl}
+                          alt={formData.name || 'Profile picture'}
+                          width={36}
+                          height={36}
+                          className={`h-full w-full object-cover transition-opacity duration-300 ${
+                            isUploadingProfilePicture ? 'opacity-50' : 'opacity-100'
+                          }`}
+                          onError={() => setImageLoadError(true)}
+                        />
+                      )
+                    }
+                    const initials = getInitials(formData.name)
+                    if (initials) {
+                      return (
+                        <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                          {initials}
+                        </span>
+                      )
+                    }
+                    return <AgentIcon className='h-4 w-4 text-[var(--text-muted)]' />
+                  })()}
+                  <div
+                    className={`absolute inset-0 flex items-center justify-center rounded-full bg-black/50 transition-opacity ${
+                      isUploadingProfilePicture
+                        ? 'opacity-100'
+                        : 'opacity-0 group-hover:opacity-100'
+                    }`}
+                  >
+                    {isUploadingProfilePicture ? (
+                      <div className='h-3 w-3 animate-spin rounded-full border-2 border-white border-t-transparent' />
+                    ) : (
+                      <Camera className='h-3 w-3 text-white' />
+                    )}
+                  </div>
+                </div>
+                <input
+                  type='file'
+                  accept='image/png,image/jpeg,image/jpg'
+                  className='hidden'
+                  ref={profilePictureInputRef}
+                  onChange={handleProfilePictureChange}
+                  disabled={isUploadingProfilePicture}
+                />
+              </div>
+              <Input
+                placeholder='Name'
+                value={formData.name}
+                onChange={(e) => updateField('name', e.target.value)}
+                className='h-9 flex-1'
+              />
+            </div>
+            {uploadError && <p className='text-[12px] text-[var(--text-error)]'>{uploadError}</p>}
+          </div>
+
+          {/* About */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>About</span>
+            <Textarea
+              placeholder='Tell people about yourself or your organization'
+              value={formData.about}
+              onChange={(e) => updateField('about', e.target.value)}
+              className='min-h-[100px] w-full resize-none'
+            />
+          </div>
+
+          {/* Social Links */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Socials</span>
+
+            <div>
+              <div className='relative'>
+                <XIcon className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='x.com/username'
+                  value={formData.xUrl}
+                  onChange={(e) => updateField('xUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.xUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{fieldErrors.xUrl}</p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Linkedin className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='linkedin.com/in/username'
+                  value={formData.linkedinUrl}
+                  onChange={(e) => updateField('linkedinUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.linkedinUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.linkedinUrl}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Globe className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='yourwebsite.com'
+                  value={formData.websiteUrl}
+                  onChange={(e) => updateField('websiteUrl', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.websiteUrl && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.websiteUrl}
+                </p>
+              )}
+            </div>
+
+            <div>
+              <div className='relative'>
+                <Mail className='-translate-y-1/2 absolute top-1/2 left-[10px] h-[14px] w-[14px] text-[var(--text-muted)]' />
+                <Input
+                  placeholder='contact@example.com'
+                  type='email'
+                  value={formData.contactEmail}
+                  onChange={(e) => updateField('contactEmail', e.target.value)}
+                  className='h-9 w-full pl-[32px]'
+                />
+              </div>
+              {fieldErrors.contactEmail && (
+                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  {fieldErrors.contactEmail}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        {saveError && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{saveError}</p>}
+        <Button
+          onClick={handleSubmit}
+          disabled={saveStatus === 'saving' || !isFormValid}
+          variant='primary'
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+        >
+          {saveStatus === 'saving' ? 'Saving...' : saveStatus === 'saved' ? 'Saved' : 'Save'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
index ff9fc696f54..69a2ae2be86 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
@@ -4,22 +4,13 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
 import { useQueryClient } from '@tanstack/react-query'
+import { Files, LogIn, Settings, User, Users, Wrench } from 'lucide-react'
 import {
-  Bot,
-  CreditCard,
-  FileCode,
-  Files,
-  Home,
+  Card,
+  Connections,
+  FolderCode,
+  HexSimple,
   Key,
-  LogIn,
-  Palette,
-  Server,
-  Settings,
-  Users,
-  Waypoints,
-  Wrench,
-} from 'lucide-react'
-import {
   SModal,
   SModalContent,
   SModalMain,
@@ -29,7 +20,9 @@ import {
   SModalSidebarHeader,
   SModalSidebarItem,
   SModalSidebarSection,
+  SModalSidebarSectionTitle,
 } from '@/components/emcn'
+import { McpIcon } from '@/components/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client'
 import { isHosted } from '@/lib/core/config/environment'
@@ -38,17 +31,17 @@ import { getUserRole } from '@/lib/workspaces/organization'
 import {
   ApiKeys,
   Copilot,
-  Credentials,
   CustomTools,
   EnvironmentVariables,
   FileUploads,
   General,
+  Integrations,
   MCP,
   SSO,
   Subscription,
   TeamManagement,
 } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components'
-import { CreatorProfile } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/creator-profile/creator-profile'
+import { TemplateProfile } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile'
 import { generalSettingsKeys, useGeneralSettings } from '@/hooks/queries/general-settings'
 import { organizationKeys, useOrganizations } from '@/hooks/queries/organization'
 import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
@@ -68,8 +61,8 @@ interface SettingsModalProps {
 type SettingsSection =
   | 'general'
   | 'environment'
-  | 'creator-profile'
-  | 'credentials'
+  | 'template-profile'
+  | 'integrations'
   | 'apikeys'
   | 'files'
   | 'subscription'
@@ -79,10 +72,13 @@ type SettingsSection =
   | 'mcp'
   | 'custom-tools'
 
+type NavigationSection = 'account' | 'subscription' | 'tools' | 'system'
+
 type NavigationItem = {
   id: SettingsSection
   label: string
   icon: React.ComponentType<{ className?: string }>
+  section: NavigationSection
   hideWhenBillingDisabled?: boolean
   requiresTeam?: boolean
   requiresEnterprise?: boolean
@@ -90,22 +86,49 @@ type NavigationItem = {
   requiresHosted?: boolean
 }
 
+const sectionConfig: { key: NavigationSection; title: string }[] = [
+  { key: 'account', title: 'Account' },
+  { key: 'tools', title: 'Tools' },
+  { key: 'subscription', title: 'Subscription' },
+  { key: 'system', title: 'System' },
+]
+
 const allNavigationItems: NavigationItem[] = [
-  { id: 'general', label: 'General', icon: Settings },
-  { id: 'credentials', label: 'Integrations', icon: Waypoints },
-  { id: 'mcp', label: 'MCP Servers', icon: Server },
-  { id: 'custom-tools', label: 'Custom Tools', icon: Wrench },
-  { id: 'environment', label: 'Environment', icon: FileCode },
-  { id: 'creator-profile', label: 'Creator Profile', icon: Palette },
-  { id: 'apikeys', label: 'API Keys', icon: Key },
-  { id: 'files', label: 'Files', icon: Files },
-  { id: 'copilot', label: 'Copilot', icon: Bot, requiresHosted: true },
-  { id: 'subscription', label: 'Subscription', icon: CreditCard, hideWhenBillingDisabled: true },
-  { id: 'team', label: 'Team', icon: Users, hideWhenBillingDisabled: true, requiresTeam: true },
+  { id: 'general', label: 'General', icon: Settings, section: 'account' },
+  { id: 'template-profile', label: 'Template Profile', icon: User, section: 'account' },
+  {
+    id: 'subscription',
+    label: 'Subscription',
+    icon: Card,
+    section: 'subscription',
+    hideWhenBillingDisabled: true,
+  },
+  {
+    id: 'team',
+    label: 'Team',
+    icon: Users,
+    section: 'subscription',
+    hideWhenBillingDisabled: true,
+    requiresTeam: true,
+  },
+  { id: 'integrations', label: 'Integrations', icon: Connections, section: 'tools' },
+  { id: 'custom-tools', label: 'Custom Tools', icon: Wrench, section: 'tools' },
+  { id: 'mcp', label: 'MCPs', icon: McpIcon, section: 'tools' },
+  { id: 'environment', label: 'Environment', icon: FolderCode, section: 'system' },
+  { id: 'apikeys', label: 'API Keys', icon: Key, section: 'system' },
+  {
+    id: 'copilot',
+    label: 'Copilot Keys',
+    icon: HexSimple,
+    section: 'system',
+    requiresHosted: true,
+  },
+  { id: 'files', label: 'Files', icon: Files, section: 'system' },
   {
     id: 'sso',
     label: 'Single Sign-On',
     icon: LogIn,
+    section: 'system',
     requiresTeam: true,
     requiresEnterprise: true,
     requiresOwner: true,
@@ -121,8 +144,8 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   const { data: ssoProvidersData, isLoading: isLoadingSSO } = useSSOProviders()
 
   const activeOrganization = organizationsData?.activeOrganization
-  const environmentCloseHandler = useRef<((open: boolean) => void) | null>(null)
-  const credentialsCloseHandler = useRef<((open: boolean) => void) | null>(null)
+  const environmentBeforeLeaveHandler = useRef<((onProceed: () => void) => void) | null>(null)
+  const integrationsCloseHandler = useRef<((open: boolean) => void) | null>(null)
 
   const userEmail = session?.user?.email
   const userId = session?.user?.id
@@ -192,14 +215,31 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
   ])
 
   // Memoized callbacks to prevent infinite loops in child components
-  const registerEnvironmentCloseHandler = useCallback((handler: (open: boolean) => void) => {
-    environmentCloseHandler.current = handler
-  }, [])
+  const registerEnvironmentBeforeLeaveHandler = useCallback(
+    (handler: (onProceed: () => void) => void) => {
+      environmentBeforeLeaveHandler.current = handler
+    },
+    []
+  )
 
-  const registerCredentialsCloseHandler = useCallback((handler: (open: boolean) => void) => {
-    credentialsCloseHandler.current = handler
+  const registerIntegrationsCloseHandler = useCallback((handler: (open: boolean) => void) => {
+    integrationsCloseHandler.current = handler
   }, [])
 
+  const handleSectionChange = useCallback(
+    (sectionId: SettingsSection) => {
+      if (sectionId === activeSection) return
+
+      if (activeSection === 'environment' && environmentBeforeLeaveHandler.current) {
+        environmentBeforeLeaveHandler.current(() => setActiveSection(sectionId))
+        return
+      }
+
+      setActiveSection(sectionId)
+    },
+    [activeSection]
+  )
+
   // React Query hook automatically loads and syncs settings
   useGeneralSettings()
 
@@ -320,16 +360,12 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
     }
   }
 
-  const handleHomepageClick = () => {
-    window.location.href = '/?from=settings'
-  }
-
   // Handle dialog close - delegate to environment component if it's active
   const handleDialogOpenChange = (newOpen: boolean) => {
-    if (!newOpen && activeSection === 'environment' && environmentCloseHandler.current) {
-      environmentCloseHandler.current(newOpen)
-    } else if (!newOpen && activeSection === 'credentials' && credentialsCloseHandler.current) {
-      credentialsCloseHandler.current(newOpen)
+    if (!newOpen && activeSection === 'environment' && environmentBeforeLeaveHandler.current) {
+      environmentBeforeLeaveHandler.current(() => onOpenChange(false))
+    } else if (!newOpen && activeSection === 'integrations' && integrationsCloseHandler.current) {
+      integrationsCloseHandler.current(newOpen)
     } else {
       onOpenChange(newOpen)
     }
@@ -343,32 +379,34 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
         </VisuallyHidden.Root>
         <VisuallyHidden.Root>
           <DialogPrimitive.Description>
-            Configure your workspace settings, environment variables, credentials, and preferences
+            Configure your workspace settings, environment variables, integrations, and preferences
           </DialogPrimitive.Description>
         </VisuallyHidden.Root>
 
         <SModalSidebar>
           <SModalSidebarHeader>Settings</SModalSidebarHeader>
-          <SModalSidebarSection>
-            {navigationItems.map((item) => (
-              <SModalSidebarItem
-                key={item.id}
-                active={activeSection === item.id}
-                icon={<item.icon />}
-                onMouseEnter={() => handlePrefetch(item.id)}
-                onClick={() => setActiveSection(item.id)}
-                data-section={item.id}
-              >
-                {item.label}
-              </SModalSidebarItem>
-            ))}
-
-            {isHosted && (
-              <SModalSidebarItem icon={<Home />} onClick={handleHomepageClick}>
-                Homepage
-              </SModalSidebarItem>
-            )}
-          </SModalSidebarSection>
+          {sectionConfig.map(({ key, title }) => {
+            const sectionItems = navigationItems.filter((item) => item.section === key)
+            if (sectionItems.length === 0) return null
+
+            return (
+              <SModalSidebarSection key={key}>
+                <SModalSidebarSectionTitle>{title}</SModalSidebarSectionTitle>
+                {sectionItems.map((item) => (
+                  <SModalSidebarItem
+                    key={item.id}
+                    active={activeSection === item.id}
+                    icon={<item.icon />}
+                    onMouseEnter={() => handlePrefetch(item.id)}
+                    onClick={() => handleSectionChange(item.id)}
+                    data-section={item.id}
+                  >
+                    {item.label}
+                  </SModalSidebarItem>
+                ))}
+              </SModalSidebarSection>
+            )
+          })}
         </SModalSidebar>
 
         <SModalMain>
@@ -379,15 +417,14 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
             {activeSection === 'general' && <General onOpenChange={onOpenChange} />}
             {activeSection === 'environment' && (
               <EnvironmentVariables
-                onOpenChange={onOpenChange}
-                registerCloseHandler={registerEnvironmentCloseHandler}
+                registerBeforeLeaveHandler={registerEnvironmentBeforeLeaveHandler}
               />
             )}
-            {activeSection === 'creator-profile' && <CreatorProfile />}
-            {activeSection === 'credentials' && (
-              <Credentials
+            {activeSection === 'template-profile' && <TemplateProfile />}
+            {activeSection === 'integrations' && (
+              <Integrations
                 onOpenChange={onOpenChange}
-                registerCloseHandler={registerCredentialsCloseHandler}
+                registerCloseHandler={registerIntegrationsCloseHandler}
               />
             )}
             {activeSection === 'apikeys' && <ApiKeys onOpenChange={onOpenChange} />}
diff --git a/apps/sim/blocks/blocks/mcp.ts b/apps/sim/blocks/blocks/mcp.ts
index c46c8f92a1a..5b0b65ed83d 100644
--- a/apps/sim/blocks/blocks/mcp.ts
+++ b/apps/sim/blocks/blocks/mcp.ts
@@ -1,4 +1,4 @@
-import { ServerIcon } from '@/components/icons'
+import { McpIcon } from '@/components/icons'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import type { BlockConfig } from '@/blocks/types'
 import type { ToolResponse } from '@/tools/types'
@@ -16,7 +16,7 @@ export const McpBlock: BlockConfig<McpResponse> = {
   docsLink: 'https://docs.sim.ai/mcp',
   category: 'tools',
   bgColor: '#181C1E',
-  icon: ServerIcon,
+  icon: McpIcon,
   subBlocks: [
     {
       id: 'server',
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 567281bb125..ba4a1b7ae52 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -78,39 +78,26 @@ const ModalPortal = DialogPrimitive.Portal
 const ModalClose = DialogPrimitive.Close
 
 /**
- * Modal overlay component with stability handling and fade transition.
+ * Modal overlay component with fade transition.
+ * Clicking this overlay closes the dialog via DialogPrimitive.Close.
  */
 const ModalOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, style, ...props }, ref) => {
-  const [isStable, setIsStable] = React.useState(false)
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => setIsStable(true), 150)
-    return () => clearTimeout(timer)
-  }, [])
-
   return (
-    <DialogPrimitive.Overlay
-      ref={ref}
-      className={cn(
-        'fixed inset-0 z-50 bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
-        ANIMATION_CLASSES,
-        className
-      )}
-      style={style}
-      onPointerDown={(e) => {
-        if (!isStable) {
-          e.preventDefault()
-          return
-        }
-        if (e.target !== e.currentTarget) {
-          e.preventDefault()
-        }
-      }}
-      {...props}
-    />
+    <DialogPrimitive.Close asChild>
+      <DialogPrimitive.Overlay
+        ref={ref}
+        className={cn(
+          'fixed inset-0 z-[500] bg-[#E4E4E4]/50 backdrop-blur-[0.75px] dark:bg-[#0D0D0D]/50',
+          ANIMATION_CLASSES,
+          className
+        )}
+        style={style}
+        {...props}
+      />
+    </DialogPrimitive.Close>
   )
 })
 
@@ -148,20 +135,10 @@ const ModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          'fixed top-[50%] left-[50%] z-[500] flex max-h-[80vh] w-[30vw] min-w-[400px] translate-x-[-50%] translate-y-[-50%] flex-col rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={style}
-        onInteractOutside={(e) => {
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          const target = e.target as Element
-          if (target.closest('[role="dialog"]')) {
-            e.preventDefault()
-          }
-        }}
         onEscapeKeyDown={(e) => {
           if (!isInteractionReady) {
             e.preventDefault()
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 e2828cec387..6769b0c0150 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -74,20 +74,10 @@ const SModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] left-[50%] z-50 flex h-[557px] w-[720px] 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-[620px] w-[760px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={style}
-        onInteractOutside={(e) => {
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          const target = e.target as Element
-          if (target.closest('[role="dialog"]')) {
-            e.preventDefault()
-          }
-        }}
         onEscapeKeyDown={(e) => {
           if (!isInteractionReady) {
             e.preventDefault()
@@ -130,7 +120,7 @@ const SModalSidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttribute
     <div
       ref={ref}
       className={cn(
-        'mb-[20px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
+        'mb-[16px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
         className
       )}
       {...props}
@@ -164,7 +154,7 @@ const SModalSidebarSectionTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('mb-[4px] font-medium text-[12px] text-[var(--text-muted)]', className)}
+    className={cn('mb-[2px] font-medium text-[12px] text-[var(--text-muted)]', className)}
     {...props}
   />
 ))
diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx
new file mode 100644
index 00000000000..74d1c4ea8b1
--- /dev/null
+++ b/apps/sim/components/emcn/icons/card.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Card icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Card(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='15'
+      height='12'
+      viewBox='0 0 15 12'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M8.16699 0C9.40796 0 10.3809 -0.000511354 11.1465 0.0859375C11.9212 0.173467 12.5501 0.355175 13.0723 0.767578C13.2285 0.891003 13.3731 1.02802 13.5049 1.17578C13.9489 1.67389 14.1477 2.27788 14.2422 3.01855C14.3348 3.74544 14.334 4.66725 14.334 5.83301C14.334 6.99877 14.3348 7.92057 14.2422 8.64746C14.1477 9.38814 13.9489 9.99213 13.5049 10.4902C13.3731 10.638 13.2285 10.775 13.0723 10.8984C12.5501 11.3108 11.9212 11.4925 11.1465 11.5801C10.3809 11.6665 9.40796 11.666 8.16699 11.666H6.16699C4.92602 11.666 3.95304 11.6665 3.1875 11.5801C2.41283 11.4925 1.78392 11.3108 1.26172 10.8984C1.10544 10.775 0.960851 10.638 0.829102 10.4902C0.385099 9.99213 0.18625 9.38814 0.0917969 8.64746C-0.000859505 7.92057 0 6.99877 0 5.83301C-1.11693e-10 4.66725 -0.000859542 3.74544 0.0917969 3.01855C0.18625 2.27788 0.385099 1.67389 0.829102 1.17578C0.960851 1.02802 1.10544 0.891003 1.26172 0.767578C1.78392 0.355175 2.41283 0.173467 3.1875 0.0859375C3.95304 -0.000511365 4.92602 0 6.16699 0H8.16699ZM1.01074 4.33301C1.00118 4.76375 1 5.25822 1 5.83301C1 7.02533 1.00123 7.87246 1.08398 8.52148C1.165 9.15652 1.31748 9.53613 1.5752 9.8252C1.66787 9.92914 1.77067 10.0255 1.88184 10.1133C2.19602 10.3614 2.61269 10.5093 3.2998 10.5869C3.99617 10.6656 4.9025 10.666 6.16699 10.666H8.16699C9.43148 10.666 10.3378 10.6656 11.0342 10.5869C11.7213 10.5093 12.138 10.3614 12.4521 10.1133C12.5633 10.0255 12.6661 9.92914 12.7588 9.8252C13.0165 9.53613 13.169 9.15652 13.25 8.52148C13.3328 7.87246 13.334 7.02533 13.334 5.83301C13.334 5.25822 13.3328 4.76375 13.3232 4.33301H1.01074ZM6.83398 8C7.10998 8.00018 7.33398 8.22397 7.33398 8.5C7.33381 8.77588 7.10987 8.99982 6.83398 9H5.83398C5.55795 9 5.33416 8.77599 5.33398 8.5C5.33398 8.22386 5.55784 8 5.83398 8H6.83398ZM11.167 8C11.4431 8 11.667 8.22386 11.667 8.5C11.6668 8.77599 11.443 9 11.167 9H8.83398C8.55795 9 8.33416 8.77599 8.33398 8.5C8.33398 8.22386 8.55784 8 8.83398 8H11.167ZM6.16699 1C4.9025 1 3.99617 1.00046 3.2998 1.0791C2.61269 1.15672 2.19602 1.30465 1.88184 1.55273C1.77067 1.64054 1.66787 1.73687 1.5752 1.84082C1.31748 2.12988 1.165 2.5095 1.08398 3.14453C1.07622 3.20545 1.06987 3.26848 1.06348 3.33301H13.2705C13.2641 3.26848 13.2578 3.20545 13.25 3.14453C13.169 2.5095 13.0165 2.12988 12.7588 1.84082C12.6661 1.73687 12.5633 1.64054 12.4521 1.55273C12.138 1.30465 11.7213 1.15672 11.0342 1.0791C10.3378 1.00046 9.43148 1 8.16699 1H6.16699Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.3'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx
new file mode 100644
index 00000000000..5baed700406
--- /dev/null
+++ b/apps/sim/components/emcn/icons/connections.tsx
@@ -0,0 +1,25 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Connections icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Connections(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='13'
+      height='13'
+      viewBox='0 0 13 13'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M10.167 0C11.7315 0.000172202 12.9998 1.26846 13 2.83301C13 4.22694 11.993 5.38366 10.667 5.62012V7.33691C10.9894 7.34 11.2727 7.34749 11.5137 7.37988C11.8867 7.43005 12.2326 7.54222 12.5117 7.82129C12.7908 8.1004 12.9029 8.44639 12.9531 8.81934C13.0014 9.1781 13 9.63116 13 10.167C13 10.7027 13.0013 11.155 12.9531 11.5137C12.9029 11.8867 12.7909 12.2325 12.5117 12.5117C12.2325 12.7909 11.8867 12.9029 11.5137 12.9531C11.155 13.0013 10.7027 13 10.167 13C9.63116 13 9.1781 13.0014 8.81934 12.9531C8.44639 12.9029 8.1004 12.7908 7.82129 12.5117C7.54222 12.2326 7.43005 11.8867 7.37988 11.5137C7.34749 11.2727 7.34 10.9894 7.33691 10.667H5.66309C5.66 10.9894 5.65251 11.2727 5.62012 11.5137C5.56995 11.8867 5.45778 12.2326 5.17871 12.5117C4.8996 12.7908 4.55362 12.9029 4.18066 12.9531C3.8219 13.0014 3.36884 13 2.83301 13C2.29732 13 1.84501 13.0013 1.48633 12.9531C1.11326 12.9029 0.76747 12.7909 0.488281 12.5117C0.209097 12.2325 0.0970544 11.8867 0.046875 11.5137C-0.00134798 11.155 -5.30227e-07 10.7027 0 10.167C0 9.63116 -0.00135908 9.1781 0.046875 8.81934C0.0970767 8.44639 0.209171 8.1004 0.488281 7.82129C0.767445 7.54222 1.11333 7.43005 1.48633 7.37988C1.84501 7.33166 2.29733 7.33301 2.83301 7.33301C3.36884 7.33301 3.8219 7.33165 4.18066 7.37988C4.55363 7.43008 4.89959 7.54217 5.17871 7.82129C5.45783 8.10041 5.56992 8.44637 5.62012 8.81934C5.65254 9.06049 5.66 9.34431 5.66309 9.66699H7.33691C7.34 9.34431 7.34746 9.06049 7.37988 8.81934C7.43008 8.44637 7.54217 8.10041 7.82129 7.82129C8.10041 7.54217 8.44637 7.43008 8.81934 7.37988C9.06049 7.34746 9.34431 7.34 9.66699 7.33691V5.62012C8.50306 5.41282 7.58717 4.49694 7.37988 3.33301H5.66309C5.66 3.65569 5.65254 3.9395 5.62012 4.18066C5.56992 4.55363 5.45784 4.89959 5.17871 5.17871C4.89959 5.45784 4.55363 5.56992 4.18066 5.62012C3.8219 5.66835 3.36884 5.66699 2.83301 5.66699C2.29733 5.66699 1.84501 5.66834 1.48633 5.62012C1.11332 5.56995 0.767447 5.45779 0.488281 5.17871C0.209166 4.8996 0.0970752 4.55362 0.046875 4.18066C-0.00135908 3.8219 0 3.36884 0 2.83301C-5.66942e-07 2.29732 -0.00134897 1.84501 0.046875 1.48633C0.0970557 1.11326 0.209092 0.767471 0.488281 0.488281C0.767471 0.209092 1.11326 0.0970557 1.48633 0.046875C1.84501 -0.00134897 2.29732 -5.66942e-07 2.83301 0C3.36884 0 3.8219 -0.00135908 4.18066 0.046875C4.55362 0.0970752 4.8996 0.209166 5.17871 0.488281C5.45779 0.767447 5.56995 1.11332 5.62012 1.48633C5.65251 1.72731 5.66 2.01061 5.66309 2.33301H7.37988C7.61635 1.00705 8.77306 0 10.167 0ZM2.83301 8.33301C2.26927 8.33301 1.89667 8.33492 1.62012 8.37207C1.35812 8.4073 1.25779 8.46591 1.19531 8.52832C1.13285 8.59079 1.07335 8.6909 1.03809 8.95312C1.0009 9.22976 1 9.60291 1 10.167C1 10.7307 1.00095 11.1033 1.03809 11.3799C1.07334 11.6421 1.13285 11.7422 1.19531 11.8047C1.25778 11.8672 1.35789 11.9267 1.62012 11.9619C1.89667 11.9991 2.26933 12 2.83301 12C3.39708 12 3.77024 11.9991 4.04688 11.9619C4.3091 11.9267 4.40921 11.8672 4.47168 11.8047C4.53409 11.7422 4.5927 11.6419 4.62793 11.3799C4.66508 11.1033 4.66699 10.7307 4.66699 10.167C4.66699 9.60289 4.66512 9.22976 4.62793 8.95312C4.59267 8.69094 4.53414 8.59078 4.47168 8.52832C4.40921 8.46586 4.30907 8.40733 4.04688 8.37207C3.77024 8.33488 3.39711 8.33301 2.83301 8.33301ZM10.167 8.33301C9.60289 8.33301 9.22976 8.33488 8.95312 8.37207C8.69094 8.40733 8.59078 8.46586 8.52832 8.52832C8.46586 8.59078 8.40733 8.69094 8.37207 8.95312C8.33488 9.22976 8.33301 9.60289 8.33301 10.167C8.33301 10.7307 8.33492 11.1033 8.37207 11.3799C8.4073 11.6419 8.46592 11.7422 8.52832 11.8047C8.59079 11.8672 8.6909 11.9267 8.95312 11.9619C9.22976 11.9991 9.60291 12 10.167 12C10.7307 12 11.1033 11.9991 11.3799 11.9619C11.6421 11.9267 11.7422 11.8672 11.8047 11.8047C11.8672 11.7422 11.9267 11.6421 11.9619 11.3799C11.9991 11.1033 12 10.7307 12 10.167C12 9.60291 11.9991 9.22976 11.9619 8.95312C11.9267 8.6909 11.8672 8.59079 11.8047 8.52832C11.7422 8.46592 11.6419 8.4073 11.3799 8.37207C11.1033 8.33492 10.7307 8.33301 10.167 8.33301ZM2.83301 1C2.26933 1 1.89666 1.00095 1.62012 1.03809C1.35789 1.07335 1.25778 1.13285 1.19531 1.19531C1.13285 1.25778 1.07335 1.35789 1.03809 1.62012C1.00095 1.89666 1 2.26933 1 2.83301C1 3.39708 1.0009 3.77024 1.03809 4.04688C1.07335 4.3091 1.13285 4.40921 1.19531 4.47168C1.25779 4.53409 1.3581 4.5927 1.62012 4.62793C1.89667 4.66508 2.26927 4.66699 2.83301 4.66699C3.39711 4.66699 3.77024 4.66512 4.04688 4.62793C4.30908 4.59267 4.40922 4.53414 4.47168 4.47168C4.53414 4.40922 4.59267 4.30908 4.62793 4.04688C4.66512 3.77024 4.66699 3.39711 4.66699 2.83301C4.66699 2.26927 4.66508 1.89667 4.62793 1.62012C4.5927 1.3581 4.53409 1.25779 4.47168 1.19531C4.40921 1.13285 4.3091 1.07335 4.04688 1.03809C3.77024 1.0009 3.39708 1 2.83301 1ZM10.167 1C9.15458 1 8.33319 1.82064 8.33301 2.83301C8.33301 3.84553 9.15447 4.66699 10.167 4.66699C11.1794 4.66682 12 3.84542 12 2.83301C11.9998 1.82074 11.1793 1.00017 10.167 1Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.2'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/folder-code.tsx b/apps/sim/components/emcn/icons/folder-code.tsx
new file mode 100644
index 00000000000..1f0ee590d66
--- /dev/null
+++ b/apps/sim/components/emcn/icons/folder-code.tsx
@@ -0,0 +1,39 @@
+import type { SVGProps } from 'react'
+
+/**
+ * FolderCode icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function FolderCode(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='15'
+      height='13'
+      viewBox='0 0 15 13'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M4.32234e-07 5.83339V3.79628C4.32234e-07 3.19982 -0.000206684 2.71995 0.0338546 2.33339C0.0685083 1.94027 0.141749 1.59614 0.317058 1.28196C0.542977 0.877129 0.87707 0.543036 1.2819 0.317117C1.59608 0.141808 1.94021 0.0685674 2.33333 0.0339137C2.71989 -0.000147559 3.19976 5.9557e-05 3.79622 5.9557e-05C4.53268 5.9264e-05 5.03054 -0.0078558 5.47526 0.158914C6.46893 0.531571 6.86678 1.44909 7.19141 2.09837L7.47591 2.66673H10.3333C11.025 2.66673 11.5814 2.66637 12.0267 2.71165C12.4803 2.75779 12.874 2.85548 13.222 3.08795C13.495 3.27035 13.7297 3.50508 13.9121 3.77805C14.1446 4.12607 14.2423 4.51976 14.2884 4.97337C14.3337 5.41867 14.3333 5.97505 14.3333 6.66673C14.3333 7.82671 14.3338 8.73433 14.2604 9.45579C14.1862 10.1855 14.0323 10.7801 13.6875 11.2963C13.4078 11.7148 13.0481 12.0746 12.6296 12.3542C12.1134 12.6991 11.5188 12.8529 10.7891 12.9271C10.0676 13.0005 9.15998 13.0001 8 13.0001H7.16667C5.6096 13.0001 4.39144 13.0013 3.44271 12.8738C2.47955 12.7443 1.71959 12.4736 1.12305 11.877C0.526507 11.2805 0.255796 10.5205 0.126303 9.55735C-0.00122168 8.60861 4.32234e-07 7.39046 4.32234e-07 5.83339ZM1 5.83339C1 7.41888 1.00132 8.55789 1.11784 9.42454C1.23243 10.2767 1.45034 10.7902 1.83008 11.17C2.20982 11.5497 2.72339 11.7676 3.57552 11.8822C4.44217 11.9987 5.58118 12.0001 7.16667 12.0001H8C9.18079 12.0001 10.029 11.9994 10.6882 11.9324C11.3387 11.8661 11.7498 11.7396 12.0742 11.5228C12.3836 11.3161 12.6494 11.0503 12.8561 10.7409C13.0729 10.4165 13.1994 10.0054 13.2656 9.35488C13.3327 8.69577 13.3333 7.84752 13.3333 6.66673C13.3333 5.9541 13.3326 5.45727 13.2936 5.07428C13.2555 4.69972 13.1852 4.48976 13.0807 4.33339C12.9713 4.16961 12.8305 4.02877 12.6667 3.91933C12.5103 3.81488 12.3003 3.74454 11.9258 3.70644C11.5428 3.66748 11.046 3.66673 10.3333 3.66673H5.16667C4.89052 3.66673 4.66667 3.44287 4.66667 3.16673C4.66667 2.89058 4.89052 2.66673 5.16667 2.66673H6.35742L6.29688 2.54563C5.92188 1.79565 5.68045 1.30454 5.1237 1.09576C4.88932 1.00791 4.6112 1.00006 3.79622 1.00006C3.18196 1.00006 2.75368 1.00072 2.42122 1.03001C2.09531 1.05874 1.90901 1.11196 1.76888 1.19016C1.52605 1.3257 1.32564 1.52611 1.1901 1.76894C1.1119 1.90907 1.05868 2.09537 1.02995 2.42128C1.00066 2.75373 1 3.18202 1 3.79628V5.83339Z'
+        fill='currentColor'
+        stroke='currentColor'
+        strokeWidth='0.3'
+      />
+      <g transform='translate(0, 0.3)'>
+        <path
+          d='M9.82617 6.12097C9.617 5.94091 9.30131 5.96462 9.12109 6.1737C8.94103 6.38287 8.96474 6.69856 9.17383 6.87878L9.78711 7.40743C9.82764 7.44236 9.86236 7.47281 9.89323 7.49988C9.86236 7.52694 9.82764 7.55739 9.78711 7.59232L9.17383 8.12097C8.96474 8.30119 8.94103 8.61688 9.12109 8.82605C9.30131 9.03514 9.617 9.05885 9.82617 8.87878L10.4395 8.35014C10.5572 8.24863 10.6858 8.13988 10.778 8.03568C10.8645 7.93797 10.9698 7.78983 10.9948 7.58907L11 7.49988L10.9948 7.41068C10.9698 7.20992 10.8645 7.06178 10.778 6.96407C10.6858 6.85988 10.5572 6.75113 10.4395 6.64962L9.82617 6.12097Z'
+          fill='currentColor'
+        />
+        <path
+          d='M4.50732 6.12097C4.71649 5.94091 5.03218 5.96462 5.2124 6.1737C5.39247 6.38287 5.36876 6.69856 5.15967 6.87878L4.54639 7.40743C4.50586 7.44236 4.47113 7.47281 4.44027 7.49988C4.47113 7.52694 4.50586 7.55739 4.54639 7.59232L5.15967 8.12097C5.36876 8.30119 5.39247 8.61688 5.2124 8.82605C5.03218 9.03514 4.71649 9.05885 4.50732 8.87878L3.89404 8.35014C3.77627 8.24863 3.64773 8.13988 3.5555 8.03568C3.469 7.93797 3.36366 7.78983 3.3387 7.58907L3.3335 7.49988L3.3387 7.41068C3.36366 7.20992 3.469 7.06178 3.5555 6.96407C3.64773 6.85988 3.77627 6.75113 3.89404 6.64962L4.50732 6.12097Z'
+          fill='currentColor'
+        />
+        <path
+          d='M7.36917 5.64798C7.47172 5.39163 7.76255 5.26686 8.01891 5.36934C8.27527 5.47188 8.40004 5.76271 8.29756 6.01908L6.96423 9.35241C6.86169 9.60877 6.57085 9.73353 6.31449 9.63106C6.05813 9.52851 5.93337 9.23768 6.03584 8.98132L7.36917 5.64798Z'
+          fill='currentColor'
+        />
+      </g>
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/hex-simple.tsx b/apps/sim/components/emcn/icons/hex-simple.tsx
new file mode 100644
index 00000000000..fb8c7cf0363
--- /dev/null
+++ b/apps/sim/components/emcn/icons/hex-simple.tsx
@@ -0,0 +1,27 @@
+import type { SVGProps } from 'react'
+
+/**
+ * HexSimple icon component - regular hexagon with centered circle
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function HexSimple(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M12 2L20.66 7V17L12 22L3.34 17V7L12 2Z'
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='2'
+        strokeLinejoin='round'
+      />
+      <circle cx='12' cy='12' r='4' fill='none' stroke='currentColor' strokeWidth='2' />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/emcn/icons/index.ts b/apps/sim/components/emcn/icons/index.ts
index 096bde3a5a5..0eaea96e5df 100644
--- a/apps/sim/components/emcn/icons/index.ts
+++ b/apps/sim/components/emcn/icons/index.ts
@@ -1,8 +1,13 @@
 export { BubbleChatPreview } from './bubble-chat-preview'
+export { Card } from './card'
 export { ChevronDown } from './chevron-down'
+export { Connections } from './connections'
 export { Copy } from './copy'
 export { Duplicate } from './duplicate'
+export { FolderCode } from './folder-code'
 export { FolderPlus } from './folder-plus'
+export { HexSimple } from './hex-simple'
+export { Key } from './key'
 export { Layout } from './layout'
 export { MoreHorizontal } from './more-horizontal'
 export { NoWrap } from './no-wrap'
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
new file mode 100644
index 00000000000..34e7221ec28
--- /dev/null
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -0,0 +1,23 @@
+import type { SVGProps } from 'react'
+
+/**
+ * Key icon component
+ * @param props - SVG properties including className, fill, etc.
+ */
+export function Key(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width='16'
+      height='8'
+      viewBox='-0.5 -0.5 17 9'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      {...props}
+    >
+      <path
+        d='M7.92 3.20645H16V6.41206C16 6.84919 15.64 7.20947 15.2 7.20947C14.76 7.20947 14.4 6.84919 14.4 6.41206V4.80765H12.8V6.40886C12.8 6.84919 12.44 7.20947 12 7.20947C11.56 7.20947 11.2 6.84919 11.2 6.40886V4.80765H7.92C7.71926 5.77747 7.16654 6.63843 6.36859 7.22427C5.57064 7.81011 4.58407 8.07925 3.59943 7.97972C2.61479 7.88018 1.70193 7.41903 1.03716 6.68534C0.372398 5.95164 0.00288855 4.99745 2.02229e-06 4.00705C-0.000994899 3.01434 0.366627 2.05667 1.0315 1.31996C1.69637 0.583243 2.61107 0.120042 3.598 0.0202756C4.58494 -0.0794905 5.57372 0.191296 6.37238 0.780068C7.17104 1.36884 7.72261 2.23359 7.92 3.20645ZM4 6.40886C4.63652 6.40886 5.24697 6.15582 5.69706 5.70539C6.14715 5.25496 6.4 4.64405 6.4 4.00705C6.4 3.37005 6.14715 2.75914 5.69706 2.30871C5.24697 1.85829 4.63652 1.60524 4 1.60524C3.36348 1.60524 2.75303 1.85829 2.30295 2.30871C1.85286 2.75914 1.6 3.37005 1.6 4.00705C1.6 4.64405 1.85286 5.25496 2.30295 5.70539C2.75303 6.15582 3.36348 6.40886 4 6.40886Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}
diff --git a/apps/sim/components/icons.tsx b/apps/sim/components/icons.tsx
index b85680a25bc..e8d25497564 100644
--- a/apps/sim/components/icons.tsx
+++ b/apps/sim/components/icons.tsx
@@ -2710,111 +2710,19 @@ export function MicrosoftSharepointIcon(props: SVGProps<SVGSVGElement>) {
 
 export function MicrosoftPlannerIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      xmlnsXlink='http://www.w3.org/1999/xlink'
-      viewBox='0 0 24 24'
-      fill='none'
-      xmlns='http://www.w3.org/2000/svg'
-    >
-      <g clipPath='url(#msplanner_clip0)'>
-        <path
-          d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
-          fill='url(#msplanner_paint0_linear)'
-        />
-        <path
-          d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
-          fill='url(#msplanner_paint1_linear)'
-        />
-        <path
-          d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
-          fill='url(#msplanner_paint2_linear)'
-        />
-        <path
-          d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
-          fill='url(#msplanner_paint3_linear)'
-        />
-        <path
-          d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
-          fill='url(#msplanner_paint4_linear)'
-        />
-        <path
-          d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
-          fill='url(#msplanner_paint5_linear)'
-        />
-      </g>
-      <defs>
-        <linearGradient
-          id='msplanner_paint0_linear'
-          x1='6.38724'
-          y1='3.74167'
-          x2='2.15779'
-          y2='12.777'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#8752E0' />
-          <stop offset='1' stopColor='#541278' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint1_linear'
-          x1='8.38032'
-          y1='11.0696'
-          x2='4.94062'
-          y2='7.69244'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop offset='0.12172' stopColor='#3D0D59' />
-          <stop offset='1' stopColor='#7034B0' stopOpacity='0' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint2_linear'
-          x1='18.3701'
-          y1='-3.33385e-05'
-          x2='9.85717'
-          y2='20.4192'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#DB45E0' />
-          <stop offset='1' stopColor='#6C0F71' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint3_linear'
-          x1='18.3701'
-          y1='-3.33385e-05'
-          x2='9.85717'
-          y2='20.4192'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#DB45E0' />
-          <stop offset='0.677403' stopColor='#A829AE' />
-          <stop offset='1' stopColor='#8F28B3' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint4_linear'
-          x1='18.0002'
-          y1='7.49958'
-          x2='14.0004'
-          y2='23.9988'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#3DCBFF' />
-          <stop offset='1' stopColor='#00479E' />
-        </linearGradient>
-        <linearGradient
-          id='msplanner_paint5_linear'
-          x1='18.2164'
-          y1='7.92626'
-          x2='10.5237'
-          y2='22.9363'
-          gradientUnits='userSpaceOnUse'
-        >
-          <stop stopColor='#3DCBFF' />
-          <stop offset='1' stopColor='#4A40D4' />
-        </linearGradient>
-        <clipPath id='msplanner_clip0'>
-          <rect width='24' height='24' fill='white' />
-        </clipPath>
-      </defs>
+    <svg {...props} viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'>
+      <path
+        d='M8.25809 15.7412C7.22488 16.7744 5.54971 16.7744 4.5165 15.7412L0.774909 11.9996C-0.258303 10.9664 -0.258303 9.29129 0.774908 8.25809L4.5165 4.51655C5.54971 3.48335 7.22488 3.48335 8.25809 4.51655L11.9997 8.2581C13.0329 9.29129 13.0329 10.9664 11.9997 11.9996L8.25809 15.7412Z'
+        fill='#185ABD'
+      />
+      <path
+        d='M0.774857 11.9999C1.80809 13.0331 3.48331 13.0331 4.51655 11.9999L15.7417 0.774926C16.7749 -0.258304 18.4501 -0.258309 19.4834 0.774914L23.225 4.51655C24.2583 5.54977 24.2583 7.22496 23.225 8.25819L11.9999 19.4832C10.9667 20.5164 9.29146 20.5164 8.25822 19.4832L0.774857 11.9999Z'
+        fill='#41A5EE'
+      />
+      <path
+        d='M4.51642 15.7413C5.54966 16.7746 7.22487 16.7746 8.25812 15.7413L15.7415 8.25803C16.7748 7.2248 18.45 7.2248 19.4832 8.25803L23.2249 11.9997C24.2582 13.0329 24.2582 14.7081 23.2249 15.7413L15.7415 23.2246C14.7083 24.2579 13.033 24.2579 11.9998 23.2246L4.51642 15.7413Z'
+        fill='#2B7CD3'
+      />
     </svg>
   )
 }
@@ -3297,29 +3205,10 @@ export function TrelloIcon(props: SVGProps<SVGSVGElement>) {
 
 export function AsanaIcon(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg
-      {...props}
-      xmlns='http://www.w3.org/2000/svg'
-      width='24'
-      height='24'
-      viewBox='781.361 0 944.893 873.377'
-    >
-      <radialGradient
-        id='asana_radial_gradient'
-        cx='943.992'
-        cy='1221.416'
-        r='.663'
-        gradientTransform='matrix(944.8934 0 0 -873.3772 -890717.875 1067234.75)'
-        gradientUnits='userSpaceOnUse'
-      >
-        <stop offset='0' stopColor='#ffb900' />
-        <stop offset='.6' stopColor='#f95d8f' />
-        <stop offset='.999' stopColor='#f95353' />
-      </radialGradient>
-      <path
-        fill='url(#asana_radial_gradient)'
-        d='M1520.766 462.371c-113.508 0-205.508 92-205.508 205.488 0 113.499 92 205.518 205.508 205.518 113.489 0 205.488-92.019 205.488-205.518 0-113.488-91.999-205.488-205.488-205.488zm-533.907.01c-113.489.01-205.498 91.99-205.498 205.488 0 113.489 92.009 205.498 205.498 205.498 113.498 0 205.508-92.009 205.508-205.498 0-113.499-92.01-205.488-205.518-205.488h.01zm472.447-256.883c0 113.489-91.999 205.518-205.488 205.518-113.508 0-205.508-92.029-205.508-205.518S1140.31 0 1253.817 0c113.489 0 205.479 92.009 205.479 205.498h.01z'
-      />
+    <svg {...props} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>
+      <circle cx='18' cy='16' r='4' fill='#F06A6A' />
+      <circle cx='6' cy='16' r='4' fill='#F06A6A' />
+      <circle cx='12' cy='6.5' r='4' fill='#F06A6A' />
     </svg>
   )
 }
@@ -3887,3 +3776,30 @@ export function DynamoDBIcon(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function McpIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      width='16'
+      height='16'
+      viewBox='0 0 16 16'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+    >
+      <g clipPath='url(#mcp-clip)'>
+        <path
+          fillRule='evenodd'
+          clipRule='evenodd'
+          d='M14.5572 7.87503L14.5022 7.92903L8.69824 13.62C8.68102 13.6368 8.66728 13.6569 8.65781 13.679C8.64834 13.7011 8.64332 13.7248 8.64304 13.7489C8.64276 13.773 8.64723 13.7968 8.65619 13.8192C8.66514 13.8415 8.67842 13.8618 8.69524 13.879L8.69824 13.882L9.89024 15.052C9.99431 15.1536 10.0539 15.2923 10.056 15.4378C10.058 15.5832 10.0024 15.7235 9.90124 15.828L9.89124 15.838C9.78385 15.9428 9.63977 16.0014 9.48974 16.0014C9.33972 16.0014 9.19564 15.9428 9.08824 15.838L7.89624 14.67C7.77347 14.5507 7.67588 14.408 7.60923 14.2503C7.54259 14.0927 7.50825 13.9232 7.50825 13.752C7.50825 13.5808 7.54259 13.4114 7.60923 13.2537C7.67588 13.096 7.77347 12.9533 7.89624 12.834L13.7012 7.14203C14.0139 6.83733 14.1928 6.42097 14.1986 5.98444C14.2044 5.54792 14.0367 5.12694 13.7322 4.81403L13.7012 4.78203L13.6672 4.75003C13.3455 4.43669 12.9143 4.26118 12.4651 4.2608C12.016 4.26043 11.5845 4.43522 11.2622 4.74803L6.48124 9.43803H6.47924L6.41424 9.50303C6.30685 9.60778 6.16277 9.66642 6.01274 9.66642C5.86272 9.66642 5.71864 9.60778 5.61124 9.50303C5.50731 9.40128 5.44791 9.26252 5.44604 9.11709C5.44417 8.97166 5.49997 8.83141 5.60124 8.72703L5.61124 8.71703L10.4602 3.96003C11.1102 3.32403 11.1232 2.28203 10.4872 1.63103L10.4582 1.60103C10.1362 1.28736 9.70433 1.11183 9.25474 1.11183C8.80516 1.11183 8.37333 1.28736 8.05124 1.60103L1.63524 7.89603C1.5279 8.00048 1.38403 8.05893 1.23424 8.05893C1.08446 8.05893 0.940591 8.00048 0.833243 7.89603C0.729179 7.79442 0.669597 7.65573 0.667536 7.5103C0.665474 7.36487 0.7211 7.22454 0.822243 7.12003L0.833243 7.11003L7.25024 0.814026C7.78698 0.291743 8.50633 -0.000488281 9.25524 -0.000488281C10.0042 -0.000488281 10.7235 0.291743 11.2602 0.814026C11.8902 1.42703 12.1892 2.30403 12.0632 3.17403C12.9432 3.04903 13.8332 3.34003 14.4692 3.96103L14.5032 3.99403C14.7616 4.24525 14.9679 4.54492 15.1104 4.87591C15.2529 5.2069 15.3287 5.56272 15.3337 5.92304C15.3386 6.28337 15.2725 6.64113 15.1391 6.97589C15.0057 7.31064 14.8076 7.61584 14.5562 7.87403M12.8652 6.32103C12.9692 6.21928 13.0286 6.08052 13.0304 5.93509C13.0323 5.78966 12.9765 5.64941 12.8752 5.54503L12.8652 5.53503C12.7578 5.43027 12.6138 5.37164 12.4637 5.37164C12.3137 5.37164 12.1696 5.43027 12.0622 5.53503L7.31724 10.19C6.99515 10.5037 6.56333 10.6792 6.11374 10.6792C5.66416 10.6792 5.23233 10.5037 4.91024 10.19C4.7552 10.0391 4.63143 9.85901 4.54601 9.66018C4.46058 9.46135 4.41518 9.24763 4.4124 9.03124C4.40961 8.81486 4.4495 8.60004 4.52977 8.39908C4.61005 8.19812 4.72914 8.01494 4.88024 7.86003L4.91124 7.82903L9.65824 3.17403C9.76231 3.07242 9.82189 2.93373 9.82395 2.7883C9.82601 2.64287 9.77039 2.50254 9.66924 2.39803L9.65824 2.38803C9.55085 2.28327 9.40677 2.22464 9.25674 2.22464C9.10672 2.22464 8.96264 2.28327 8.85524 2.38803L4.10824 7.04203C3.84537 7.29765 3.63642 7.60338 3.49374 7.94115C3.35107 8.27892 3.27755 8.64186 3.27755 9.00853C3.27755 9.37519 3.35107 9.73814 3.49374 10.0759C3.63642 10.4137 3.84537 10.7194 4.10824 10.975C4.64515 11.4974 5.36467 11.7896 6.11374 11.7896C6.86282 11.7896 7.58234 11.4974 8.11924 10.975L12.8652 6.32103Z'
+          fill='currentColor'
+        />
+      </g>
+      <defs>
+        <clipPath id='mcp-clip'>
+          <rect width='16' height='16' fill='white' />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
diff --git a/apps/sim/components/ui/dialog.tsx b/apps/sim/components/ui/dialog.tsx
index 4e69d43bf58..6c3921eb32b 100644
--- a/apps/sim/components/ui/dialog.tsx
+++ b/apps/sim/components/ui/dialog.tsx
@@ -17,14 +17,6 @@ const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, style, ...props }, ref) => {
-  const [isStable, setIsStable] = React.useState(false)
-
-  React.useEffect(() => {
-    // Add a small delay before allowing overlay interactions to prevent rapid state changes
-    const timer = setTimeout(() => setIsStable(true), 150)
-    return () => clearTimeout(timer)
-  }, [])
-
   return (
     <DialogPrimitive.Overlay
       ref={ref}
@@ -33,17 +25,6 @@ const DialogOverlay = React.forwardRef<
         className
       )}
       style={{ backdropFilter: 'blur(1.5px)', ...style }}
-      onPointerDown={(e) => {
-        // Only allow overlay clicks after component is stable
-        if (!isStable) {
-          e.preventDefault()
-          return
-        }
-        // Ensure click is on the overlay itself, not a child
-        if (e.target !== e.currentTarget) {
-          e.preventDefault()
-        }
-      }}
       {...props}
     />
   )
@@ -73,18 +54,6 @@ const DialogContent = React.forwardRef<
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-[10000000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in dark:bg-[var(--surface-3)]',
           className
         )}
-        onInteractOutside={(e) => {
-          // Prevent accidental closes from child element interactions during initial render
-          if (!isInteractionReady) {
-            e.preventDefault()
-            return
-          }
-          // More restrictive interaction outside handling
-          const target = e.target as Element
-          if (target.closest('[role="dialog"]')) {
-            e.preventDefault()
-          }
-        }}
         onEscapeKeyDown={(e) => {
           // Prevent escape during rapid interactions
           if (!isInteractionReady) {
diff --git a/apps/sim/hooks/use-mcp-tools.ts b/apps/sim/hooks/use-mcp-tools.ts
index 4960bedcfae..594caecee93 100644
--- a/apps/sim/hooks/use-mcp-tools.ts
+++ b/apps/sim/hooks/use-mcp-tools.ts
@@ -8,7 +8,7 @@
 import type React from 'react'
 import { useCallback, useMemo } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import { WrenchIcon } from 'lucide-react'
+import { McpIcon } from '@/components/icons'
 import { createLogger } from '@/lib/logs/console/logger'
 import { createMcpToolId } from '@/lib/mcp/utils'
 import { mcpKeys, useMcpToolsQuery } from '@/hooks/queries/mcp'
@@ -51,7 +51,7 @@ export function useMcpTools(workspaceId: string): UseMcpToolsResult {
       type: 'mcp' as const,
       inputSchema: tool.inputSchema,
       bgColor: '#6366F1',
-      icon: WrenchIcon,
+      icon: McpIcon,
     }))
   }, [mcpToolsData])
 

From a80de5b9c2bcccecff0ca771a792b5b2c9509d54 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Tue, 2 Dec 2025 13:43:48 -0800
Subject: [PATCH 14/17] improvement: SSO, light-mode

---
 apps/sim/.cursorrules                         |    2 +-
 .../templates/components/template-card.tsx    |    2 +-
 .../notifications/notifications.tsx           |    2 +-
 .../sub-block/components/code/code.tsx        |   14 +-
 .../components/terminal/terminal.tsx          |    6 +-
 .../settings-modal/components/sso/sso.tsx     | 1123 ++++++++---------
 .../components/emcn/components/code/code.css  |  105 +-
 .../components/emcn/components/code/code.tsx  |   34 +-
 8 files changed, 629 insertions(+), 659 deletions(-)

diff --git a/apps/sim/.cursorrules b/apps/sim/.cursorrules
index 4a3d2c2acb5..9b86fbb0753 100644
--- a/apps/sim/.cursorrules
+++ b/apps/sim/.cursorrules
@@ -1,6 +1,6 @@
 # Sim App Architecture Guidelines
 
-You are building features in the Sim app following the architecture established by the sidebar-new component. This file defines the patterns, structures, and conventions you must follow.
+You are building features in the Sim app following the architecture. This file defines the patterns, structures, and conventions you must follow.
 
 ---
 
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
index 3bb7c5c49a6..0bd1686eff5 100644
--- a/apps/sim/app/templates/components/template-card.tsx
+++ b/apps/sim/app/templates/components/template-card.tsx
@@ -270,7 +270,7 @@ function TemplateCardInner({
       </div>
 
       <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+        <div className='flex min-w-0 items-center gap-[8px]'>
           {authorImageUrl ? (
             <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
index a95107029dd..410f8775071 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
@@ -113,7 +113,7 @@ export const Notifications = memo(function Notifications() {
           <div
             key={notification.id}
             style={{ transform: `translateX(${xOffset}px)` }}
-            className={`relative h-[78px] w-[240px] overflow-hidden rounded-[4px] border bg-[#232323] transition-transform duration-200 ${
+            className={`relative h-[78px] w-[240px] overflow-hidden rounded-[4px] border bg-[var(--surface-2)] transition-transform duration-200 ${
               index > 0 ? '-mt-[78px]' : ''
             }`}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index 3336dadf805..44f6e13a00a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -633,8 +633,12 @@ export function Code({
       numbers.push(
         <div
           key={`${lineNumber}-0`}
-          className={cn('text-right text-xs tabular-nums leading-[21px]')}
-          style={{ color: isActive ? '#eeeeee' : '#a8a8a8' }}
+          className={cn(
+            'text-right text-xs tabular-nums leading-[21px]',
+            isActive
+              ? 'text-[var(--text-primary)] dark:text-[#eeeeee]'
+              : 'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+          )}
         >
           {lineNumber}
         </div>
@@ -656,8 +660,10 @@ export function Code({
       numbers.push(
         <div
           key={'1-0'}
-          className={cn('text-right text-xs tabular-nums leading-[21px]')}
-          style={{ color: '#a8a8a8' }}
+          className={cn(
+            'text-right text-xs tabular-nums leading-[21px]',
+            'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+          )}
         >
           1
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index a4c74fb8a3f..cfe6f4b967d 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
@@ -752,13 +752,13 @@ export function Terminal() {
       <aside
         ref={terminalRef}
         className={clsx(
-          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden dark:bg-[var(--surface-1)]',
+          'terminal-container fixed right-[var(--panel-width)] bottom-0 left-[var(--sidebar-width)] z-10 overflow-hidden bg-[var(--surface-1)]',
           isToggling && 'transition-[height] duration-100 ease-out'
         )}
         onTransitionEnd={handleTransitionEnd}
         aria-label='Terminal'
       >
-        <div className='relative flex h-full border-t dark:border-[var(--border)]'>
+        <div className='relative flex h-full border-[var(--border)] border-t'>
           {/* Left Section - Logs Table */}
           <div
             className={clsx('flex flex-col', !selectedEntry && 'flex-1')}
@@ -1190,7 +1190,7 @@ export function Terminal() {
           {/* Right Section - Block Output (Overlay) */}
           {selectedEntry && (
             <div
-              className='absolute top-0 right-0 bottom-0 flex flex-col border-l dark:border-[var(--border)] dark:bg-[var(--surface-1)]'
+              className='absolute top-0 right-0 bottom-0 flex flex-col border-[var(--border)] border-l bg-[var(--surface-1)]'
               style={{ width: `${outputPanelWidth}px` }}
             >
               {/* Horizontal Resize Handle */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
index ce1533ccee1..b453c19a729 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/sso/sso.tsx
@@ -1,16 +1,9 @@
 'use client'
 
-import { useMemo, useState } from 'react'
-import { ArrowLeft, Check, ChevronDown, Copy, Eye, EyeOff, Plus, Search } from 'lucide-react'
+import { useState } from 'react'
+import { Check, ChevronDown, Copy, Eye, EyeOff } from 'lucide-react'
 import { Button, Combobox, Input, Switch, Textarea } from '@/components/emcn'
-import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-} from '@/components/emcn/components/modal/modal'
-import { Skeleton, Input as UiInput } from '@/components/ui'
+import { Skeleton } from '@/components/ui'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client/utils'
 import { isBillingEnabled } from '@/lib/core/config/environment'
@@ -118,6 +111,7 @@ export function SSO() {
 
   const activeOrganization = orgsData?.activeOrganization
   const providers = providersData?.providers || []
+  const existingProvider = providers[0] as SSOProvider | undefined
 
   const userEmail = session?.user?.email
   const userId = session?.user?.id
@@ -136,28 +130,12 @@ export function SSO() {
   const [error, setError] = useState<string | null>(null)
   const [showClientSecret, setShowClientSecret] = useState(false)
   const [copied, setCopied] = useState(false)
-  const [showConfigForm, setShowConfigForm] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
-  const [editingProviderId, setEditingProviderId] = useState<string | null>(null)
-  const [searchTerm, setSearchTerm] = useState('')
-
-  // Delete confirmation dialog state
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [providerToDelete, setProviderToDelete] = useState<SSOProvider | null>(null)
 
   const [formData, setFormData] = useState(DEFAULT_FORM_DATA)
   const [errors, setErrors] = useState<Record<string, string[]>>(DEFAULT_ERRORS)
   const [showErrors, setShowErrors] = useState(false)
 
-  const filteredProviders = useMemo(() => {
-    if (!searchTerm.trim()) return providers
-    const term = searchTerm.toLowerCase()
-    return providers.filter(
-      (p: SSOProvider) =>
-        p.providerId?.toLowerCase().includes(term) || p.domain?.toLowerCase().includes(term)
-    )
-  }, [providers, searchTerm])
-
   // Permission checks with early returns
   if (isBillingEnabled) {
     if (!activeOrganization) {
@@ -288,16 +266,6 @@ export function SSO() {
     return false
   }
 
-  const resetForm = () => {
-    setFormData(DEFAULT_FORM_DATA)
-    setErrors(DEFAULT_ERRORS)
-    setShowErrors(false)
-    setShowConfigForm(false)
-    setIsEditing(false)
-    setEditingProviderId(null)
-    setError(null)
-  }
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
@@ -345,7 +313,11 @@ export function SSO() {
       await configureSSOMutation.mutateAsync(requestBody)
 
       logger.info('SSO provider configured', { providerId: formData.providerId })
-      resetForm()
+      setFormData(DEFAULT_FORM_DATA)
+      setErrors(DEFAULT_ERRORS)
+      setShowErrors(false)
+      setIsEditing(false)
+      setError(null)
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Unknown error occurred'
       setError(message)
@@ -374,7 +346,7 @@ export function SSO() {
     })
   }
 
-  const callbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${formData.providerId}`
+  const callbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${formData.providerId || existingProvider?.providerId || 'provider-id'}`
 
   const copyToClipboard = async (url: string) => {
     try {
@@ -384,30 +356,26 @@ export function SSO() {
     } catch {}
   }
 
-  const handleAddNew = () => {
-    resetForm()
-    setShowConfigForm(true)
-    setIsEditing(false)
-  }
+  const handleEdit = () => {
+    if (!existingProvider) return
 
-  const handleReconfigure = (provider: SSOProvider) => {
     try {
       let clientId = ''
       let clientSecret = ''
       let scopes = 'openid,profile,email'
 
-      if (provider.providerType === 'oidc' && provider.oidcConfig) {
-        const config = JSON.parse(provider.oidcConfig)
+      if (existingProvider.providerType === 'oidc' && existingProvider.oidcConfig) {
+        const config = JSON.parse(existingProvider.oidcConfig)
         clientId = config.clientId || ''
         clientSecret = config.clientSecret || ''
         scopes = config.scopes?.join(',') || 'openid,profile,email'
       }
 
       setFormData({
-        providerType: provider.providerType,
-        providerId: provider.providerId,
-        issuerUrl: provider.issuer,
-        domain: provider.domain,
+        providerType: existingProvider.providerType,
+        providerId: existingProvider.providerId,
+        issuerUrl: existingProvider.issuer,
+        domain: existingProvider.domain,
         clientId,
         clientSecret,
         scopes,
@@ -419,9 +387,7 @@ export function SSO() {
         idpMetadata: '',
         showAdvanced: false,
       })
-      setEditingProviderId(provider.id)
       setIsEditing(true)
-      setShowConfigForm(true)
       setError(null)
       setShowErrors(false)
     } catch (err) {
@@ -430,666 +396,583 @@ export function SSO() {
     }
   }
 
-  const hasProviders = providers.length > 0
-  const showEmptyState = !hasProviders && !showConfigForm
-  const showNoResults = searchTerm.trim() && filteredProviders.length === 0 && providers.length > 0
-
   if (isLoadingProviders) {
     return <SsoSkeleton />
   }
 
-  // Form View (Add/Edit)
-  if (showConfigForm) {
+  // Show preview if provider exists and not editing
+  if (existingProvider && !isEditing) {
+    const providerCallbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${existingProvider.providerId}`
+
     return (
-      <>
-        <form
-          onSubmit={handleSubmit}
-          autoComplete='off'
-          className='flex h-full flex-col gap-[16px]'
-        >
-          {/* Hidden dummy inputs to prevent browser password manager autofill */}
-          <input
-            type='text'
-            name='fakeusernameremembered'
-            autoComplete='username'
-            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-            tabIndex={-1}
-            readOnly
-          />
-          <input
-            type='password'
-            name='fakepasswordremembered'
-            autoComplete='current-password'
-            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-            tabIndex={-1}
-            readOnly
-          />
-          <input
-            type='email'
-            name='fakeemailremembered'
-            autoComplete='email'
-            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-            tabIndex={-1}
-            readOnly
-          />
-          <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
-
-          {/* Back Button Header */}
-          <div className='mt-[6px] flex items-center gap-[8px]'>
-            <button
-              type='button'
-              onClick={resetForm}
-              className='flex items-center gap-[6px] font-medium text-[13px] text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)]'
-            >
-              <ArrowLeft className='h-[14px] w-[14px]' />
-              <span>SSO Providers</span>
-            </button>
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Scrollable Content */}
+        <div className='min-h-0 flex-1 overflow-y-auto'>
+          <div className='flex flex-col gap-[16px]'>
+            {/* Provider Info */}
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Provider ID
+              </span>
+              <p className='text-[14px] text-[var(--text-primary)]'>
+                {existingProvider.providerId}
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Provider Type
+              </span>
+              <p className='text-[14px] text-[var(--text-primary)]'>
+                {existingProvider.providerType.toUpperCase()}
+              </p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
+              <p className='text-[14px] text-[var(--text-primary)]'>{existingProvider.domain}</p>
+            </div>
+
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Issuer URL
+              </span>
+              <p className='break-all font-mono text-[13px] text-[var(--text-primary)]'>
+                {existingProvider.issuer}
+              </p>
+            </div>
+
+            {/* Callback URL */}
+            <div className='flex flex-col gap-[8px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Callback URL
+              </span>
+              <div className='relative'>
+                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                  <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                    {providerCallbackUrl}
+                  </code>
+                </div>
+                <Button
+                  type='button'
+                  variant='ghost'
+                  onClick={() => copyToClipboard(providerCallbackUrl)}
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                >
+                  {copied ? (
+                    <Check className='h-[14px] w-[14px]' />
+                  ) : (
+                    <Copy className='h-[14px] w-[14px]' />
+                  )}
+                  <span className='sr-only'>Copy callback URL</span>
+                </Button>
+              </div>
+              <p className='text-[13px] text-[var(--text-muted)]'>
+                Configure this in your identity provider
+              </p>
+            </div>
           </div>
+        </div>
 
-          {/* Scrollable Content */}
-          <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[16px]'>
-              {/* Provider Type Selection */}
+        {/* Footer */}
+        <div className='mt-auto flex items-center justify-end'>
+          <Button
+            onClick={handleEdit}
+            variant='primary'
+            className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+          >
+            Edit
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  // Form View (no provider or editing)
+  return (
+    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-[16px]'>
+      {/* Hidden dummy inputs to prevent browser password manager autofill */}
+      <input
+        type='text'
+        name='fakeusernameremembered'
+        autoComplete='username'
+        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+        tabIndex={-1}
+        readOnly
+      />
+      <input
+        type='password'
+        name='fakepasswordremembered'
+        autoComplete='current-password'
+        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+        tabIndex={-1}
+        readOnly
+      />
+      <input
+        type='email'
+        name='fakeemailremembered'
+        autoComplete='email'
+        style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
+        tabIndex={-1}
+        readOnly
+      />
+      <input type='text' name='hidden' style={{ display: 'none' }} autoComplete='false' />
+
+      {/* Scrollable Content */}
+      <div className='min-h-0 flex-1 overflow-y-auto'>
+        <div className='flex flex-col gap-[16px]'>
+          {/* Provider Type Selection */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Provider Type
+            </span>
+            <Combobox
+              value={formData.providerType}
+              onChange={(value: string) =>
+                handleInputChange('providerType', value as 'oidc' | 'saml')
+              }
+              options={[
+                { label: 'OIDC', value: 'oidc' },
+                { label: 'SAML', value: 'saml' },
+              ]}
+              placeholder='Select provider type'
+              editable={false}
+              className='h-9'
+            />
+            <p className='text-[13px] text-[var(--text-muted)]'>
+              {formData.providerType === 'oidc'
+                ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
+                : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
+            </p>
+          </div>
+
+          {/* Provider ID */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Provider ID
+            </span>
+            <Combobox
+              value={formData.providerId}
+              onChange={(value: string) => handleInputChange('providerId', value)}
+              options={TRUSTED_SSO_PROVIDERS.map((id) => ({
+                label: id,
+                value: id,
+              }))}
+              placeholder='Select a provider ID'
+              editable={true}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.providerId.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.providerId.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.providerId.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Issuer URL */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Issuer URL</span>
+            <Input
+              type='url'
+              placeholder='https://your-identity-provider.com/oauth2/default'
+              value={formData.issuerUrl}
+              name='sso_issuer_endpoint'
+              autoComplete='off'
+              autoCapitalize='none'
+              spellCheck={false}
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.issuerUrl.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.issuerUrl.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.issuerUrl.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Domain */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
+            <Input
+              type='text'
+              placeholder='your-domain.identityprovider.com'
+              value={formData.domain}
+              name='sso_identity_domain'
+              autoComplete='off'
+              autoCapitalize='none'
+              spellCheck={false}
+              readOnly
+              onFocus={(e) => e.target.removeAttribute('readOnly')}
+              onChange={(e) => handleInputChange('domain', e.target.value)}
+              className={cn(
+                'h-9',
+                showErrors &&
+                  errors.domain.length > 0 &&
+                  'border-[var(--text-error)] focus:border-[var(--text-error)]'
+              )}
+            />
+            {showErrors && errors.domain.length > 0 && (
+              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                {errors.domain.join(' ')}
+              </p>
+            )}
+          </div>
+
+          {/* Provider-specific fields */}
+          {formData.providerType === 'oidc' ? (
+            <>
               <div className='flex flex-col gap-[8px]'>
                 <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Provider Type
+                  Client ID
                 </span>
-                <Combobox
-                  value={formData.providerType}
-                  onChange={(value: string) =>
-                    handleInputChange('providerType', value as 'oidc' | 'saml')
-                  }
-                  options={[
-                    { label: 'OIDC', value: 'oidc' },
-                    { label: 'SAML', value: 'saml' },
-                  ]}
-                  placeholder='Select provider type'
-                  editable={false}
-                  className='h-9'
+                <Input
+                  type='text'
+                  placeholder='Enter Client ID'
+                  value={formData.clientId}
+                  name='sso_client_identifier'
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  readOnly
+                  onFocus={(e) => e.target.removeAttribute('readOnly')}
+                  onChange={(e) => handleInputChange('clientId', e.target.value)}
+                  className={cn(
+                    'h-9',
+                    showErrors &&
+                      errors.clientId.length > 0 &&
+                      'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                  )}
                 />
-                <p className='text-[13px] text-[var(--text-muted)]'>
-                  {formData.providerType === 'oidc'
-                    ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
-                    : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
-                </p>
+                {showErrors && errors.clientId.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.clientId.join(' ')}
+                  </p>
+                )}
               </div>
 
-              {/* Provider ID */}
               <div className='flex flex-col gap-[8px]'>
                 <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Provider ID
+                  Client Secret
                 </span>
-                <Combobox
-                  value={formData.providerId}
-                  onChange={(value: string) => handleInputChange('providerId', value)}
-                  options={TRUSTED_SSO_PROVIDERS.map((id) => ({
-                    label: id,
-                    value: id,
-                  }))}
-                  placeholder='Select a provider ID'
-                  editable={true}
+                <div className='relative'>
+                  <Input
+                    type='text'
+                    placeholder='Enter Client Secret'
+                    value={formData.clientSecret}
+                    name='sso_client_key'
+                    autoComplete='off'
+                    autoCapitalize='none'
+                    spellCheck={false}
+                    readOnly
+                    onFocus={(e) => {
+                      e.target.removeAttribute('readOnly')
+                      setShowClientSecret(true)
+                    }}
+                    onBlurCapture={() => setShowClientSecret(false)}
+                    onChange={(e) => handleInputChange('clientSecret', e.target.value)}
+                    style={
+                      !showClientSecret
+                        ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
+                        : undefined
+                    }
+                    className={cn(
+                      'h-9 pr-[36px]',
+                      showErrors &&
+                        errors.clientSecret.length > 0 &&
+                        'border-[var(--text-error)] focus:border-[var(--text-error)]'
+                    )}
+                  />
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    onClick={() => setShowClientSecret((s) => !s)}
+                    className='-translate-y-1/2 absolute top-1/2 right-[8px] h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    aria-label={showClientSecret ? 'Hide client secret' : 'Show client secret'}
+                  >
+                    {showClientSecret ? (
+                      <EyeOff className='h-4 w-4' />
+                    ) : (
+                      <Eye className='h-4 w-4' />
+                    )}
+                  </Button>
+                </div>
+                {showErrors && errors.clientSecret.length > 0 && (
+                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                    {errors.clientSecret.join(' ')}
+                  </p>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-[8px]'>
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Scopes</span>
+                <Input
+                  type='text'
+                  placeholder='openid,profile,email'
+                  value={formData.scopes}
+                  autoComplete='off'
+                  autoCapitalize='none'
+                  spellCheck={false}
+                  onChange={(e) => handleInputChange('scopes', e.target.value)}
                   className={cn(
                     'h-9',
                     showErrors &&
-                      errors.providerId.length > 0 &&
+                      errors.scopes.length > 0 &&
                       'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
                 />
-                {showErrors && errors.providerId.length > 0 && (
+                {showErrors && errors.scopes.length > 0 && (
                   <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                    {errors.providerId.join(' ')}
+                    {errors.scopes.join(' ')}
                   </p>
                 )}
+                <p className='text-[13px] text-[var(--text-muted)]'>
+                  Comma-separated list of OIDC scopes to request
+                </p>
               </div>
-
-              {/* Issuer URL */}
+            </>
+          ) : (
+            <>
               <div className='flex flex-col gap-[8px]'>
                 <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Issuer URL
+                  Entry Point URL
                 </span>
                 <Input
                   type='url'
-                  placeholder='https://your-identity-provider.com/oauth2/default'
-                  value={formData.issuerUrl}
-                  name='sso_issuer_endpoint'
+                  placeholder='https://idp.example.com/sso/saml'
+                  value={formData.entryPoint}
                   autoComplete='off'
                   autoCapitalize='none'
                   spellCheck={false}
-                  readOnly
-                  onFocus={(e) => e.target.removeAttribute('readOnly')}
-                  onChange={(e) => handleInputChange('issuerUrl', e.target.value)}
+                  onChange={(e) => handleInputChange('entryPoint', e.target.value)}
                   className={cn(
                     'h-9',
                     showErrors &&
-                      errors.issuerUrl.length > 0 &&
+                      errors.entryPoint.length > 0 &&
                       'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
                 />
-                {showErrors && errors.issuerUrl.length > 0 && (
+                {showErrors && errors.entryPoint.length > 0 && (
                   <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                    {errors.issuerUrl.join(' ')}
+                    {errors.entryPoint.join(' ')}
                   </p>
                 )}
               </div>
 
-              {/* Domain */}
               <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Domain</span>
-                <Input
-                  type='text'
-                  placeholder='your-domain.identityprovider.com'
-                  value={formData.domain}
-                  name='sso_identity_domain'
+                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                  Identity Provider Certificate
+                </span>
+                <Textarea
+                  placeholder='-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----'
+                  value={formData.cert}
                   autoComplete='off'
                   autoCapitalize='none'
                   spellCheck={false}
-                  readOnly
-                  onFocus={(e) => e.target.removeAttribute('readOnly')}
-                  onChange={(e) => handleInputChange('domain', e.target.value)}
+                  onChange={(e) => handleInputChange('cert', e.target.value)}
                   className={cn(
-                    'h-9',
+                    'min-h-[80px] font-mono',
                     showErrors &&
-                      errors.domain.length > 0 &&
+                      errors.cert.length > 0 &&
                       'border-[var(--text-error)] focus:border-[var(--text-error)]'
                   )}
+                  rows={3}
                 />
-                {showErrors && errors.domain.length > 0 && (
+                {showErrors && errors.cert.length > 0 && (
                   <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                    {errors.domain.join(' ')}
+                    {errors.cert.join(' ')}
                   </p>
                 )}
               </div>
 
-              {/* Provider-specific fields */}
-              {formData.providerType === 'oidc' ? (
-                <>
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      Client ID
-                    </span>
-                    <Input
-                      type='text'
-                      placeholder='Enter Client ID'
-                      value={formData.clientId}
-                      name='sso_client_identifier'
-                      autoComplete='off'
-                      autoCapitalize='none'
-                      spellCheck={false}
-                      readOnly
-                      onFocus={(e) => e.target.removeAttribute('readOnly')}
-                      onChange={(e) => handleInputChange('clientId', e.target.value)}
-                      className={cn(
-                        'h-9',
-                        showErrors &&
-                          errors.clientId.length > 0 &&
-                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                      )}
-                    />
-                    {showErrors && errors.clientId.length > 0 && (
-                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                        {errors.clientId.join(' ')}
-                      </p>
+              {/* Advanced SAML Options */}
+              <div className='flex flex-col gap-[8px]'>
+                <button
+                  type='button'
+                  onClick={() =>
+                    handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
+                  }
+                  className='flex w-fit items-center gap-[6px] text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                >
+                  <ChevronDown
+                    className={cn(
+                      'h-4 w-4 transition-transform',
+                      formData.showAdvanced && 'rotate-180'
                     )}
-                  </div>
-
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      Client Secret
-                    </span>
-                    <div className='relative'>
+                  />
+                  Advanced Options
+                </button>
+
+                {formData.showAdvanced && (
+                  <div className='flex flex-col gap-[16px] pt-[8px]'>
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Audience (Entity ID)
+                      </span>
                       <Input
                         type='text'
-                        placeholder='Enter Client Secret'
-                        value={formData.clientSecret}
-                        name='sso_client_key'
+                        placeholder='Enter Audience'
+                        value={formData.audience}
                         autoComplete='off'
                         autoCapitalize='none'
                         spellCheck={false}
-                        readOnly
-                        onFocus={(e) => {
-                          e.target.removeAttribute('readOnly')
-                          setShowClientSecret(true)
-                        }}
-                        onBlurCapture={() => setShowClientSecret(false)}
-                        onChange={(e) => handleInputChange('clientSecret', e.target.value)}
-                        style={
-                          !showClientSecret
-                            ? ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)
-                            : undefined
-                        }
-                        className={cn(
-                          'h-9 pr-[36px]',
-                          showErrors &&
-                            errors.clientSecret.length > 0 &&
-                            'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                        )}
+                        onChange={(e) => handleInputChange('audience', e.target.value)}
+                        className='h-9'
                       />
-                      <Button
-                        type='button'
-                        variant='ghost'
-                        onClick={() => setShowClientSecret((s) => !s)}
-                        className='-translate-y-1/2 absolute top-1/2 right-[8px] h-6 w-6 p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-                        aria-label={showClientSecret ? 'Hide client secret' : 'Show client secret'}
-                      >
-                        {showClientSecret ? (
-                          <EyeOff className='h-4 w-4' />
-                        ) : (
-                          <Eye className='h-4 w-4' />
-                        )}
-                      </Button>
                     </div>
-                    {showErrors && errors.clientSecret.length > 0 && (
-                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                        {errors.clientSecret.join(' ')}
-                      </p>
-                    )}
-                  </div>
-
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      Scopes
-                    </span>
-                    <Input
-                      type='text'
-                      placeholder='openid,profile,email'
-                      value={formData.scopes}
-                      autoComplete='off'
-                      autoCapitalize='none'
-                      spellCheck={false}
-                      onChange={(e) => handleInputChange('scopes', e.target.value)}
-                      className={cn(
-                        'h-9',
-                        showErrors &&
-                          errors.scopes.length > 0 &&
-                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                      )}
-                    />
-                    {showErrors && errors.scopes.length > 0 && (
-                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                        {errors.scopes.join(' ')}
-                      </p>
-                    )}
-                    <p className='text-[13px] text-[var(--text-muted)]'>
-                      Comma-separated list of OIDC scopes to request
-                    </p>
-                  </div>
-                </>
-              ) : (
-                <>
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      Entry Point URL
-                    </span>
-                    <Input
-                      type='url'
-                      placeholder='https://idp.example.com/sso/saml'
-                      value={formData.entryPoint}
-                      autoComplete='off'
-                      autoCapitalize='none'
-                      spellCheck={false}
-                      onChange={(e) => handleInputChange('entryPoint', e.target.value)}
-                      className={cn(
-                        'h-9',
-                        showErrors &&
-                          errors.entryPoint.length > 0 &&
-                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                      )}
-                    />
-                    {showErrors && errors.entryPoint.length > 0 && (
-                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                        {errors.entryPoint.join(' ')}
-                      </p>
-                    )}
-                  </div>
 
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                      Identity Provider Certificate
-                    </span>
-                    <Textarea
-                      placeholder='-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----'
-                      value={formData.cert}
-                      autoComplete='off'
-                      autoCapitalize='none'
-                      spellCheck={false}
-                      onChange={(e) => handleInputChange('cert', e.target.value)}
-                      className={cn(
-                        'min-h-[80px] font-mono',
-                        showErrors &&
-                          errors.cert.length > 0 &&
-                          'border-[var(--text-error)] focus:border-[var(--text-error)]'
-                      )}
-                      rows={3}
-                    />
-                    {showErrors && errors.cert.length > 0 && (
-                      <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
-                        {errors.cert.join(' ')}
-                      </p>
-                    )}
-                  </div>
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Callback URL Override
+                      </span>
+                      <Input
+                        type='url'
+                        placeholder='Enter Callback URL'
+                        value={formData.callbackUrl}
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
+                        className='h-9'
+                      />
+                    </div>
 
-                  {/* Advanced SAML Options */}
-                  <div className='flex flex-col gap-[8px]'>
-                    <button
-                      type='button'
-                      onClick={() =>
-                        handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
-                      }
-                      className='flex w-fit items-center gap-[6px] text-[13px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-                    >
-                      <ChevronDown
-                        className={cn(
-                          'h-4 w-4 transition-transform',
-                          formData.showAdvanced && 'rotate-180'
-                        )}
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        Require signed SAML assertions
+                      </span>
+                      <Switch
+                        checked={formData.wantAssertionsSigned}
+                        onCheckedChange={(checked) =>
+                          handleInputChange('wantAssertionsSigned', checked ? 'true' : 'false')
+                        }
                       />
-                      Advanced Options
-                    </button>
-
-                    {formData.showAdvanced && (
-                      <div className='flex flex-col gap-[16px] pt-[8px]'>
-                        <div className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                            Audience (Entity ID)
-                          </span>
-                          <Input
-                            type='text'
-                            placeholder='Enter Audience'
-                            value={formData.audience}
-                            autoComplete='off'
-                            autoCapitalize='none'
-                            spellCheck={false}
-                            onChange={(e) => handleInputChange('audience', e.target.value)}
-                            className='h-9'
-                          />
-                        </div>
-
-                        <div className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                            Callback URL Override
-                          </span>
-                          <Input
-                            type='url'
-                            placeholder='Enter Callback URL'
-                            value={formData.callbackUrl}
-                            autoComplete='off'
-                            autoCapitalize='none'
-                            spellCheck={false}
-                            onChange={(e) => handleInputChange('callbackUrl', e.target.value)}
-                            className='h-9'
-                          />
-                        </div>
-
-                        <div className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                            Require signed SAML assertions
-                          </span>
-                          <Switch
-                            checked={formData.wantAssertionsSigned}
-                            onCheckedChange={(checked) =>
-                              handleInputChange('wantAssertionsSigned', checked ? 'true' : 'false')
-                            }
-                          />
-                        </div>
-
-                        <div className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                            IDP Metadata XML
-                          </span>
-                          <Textarea
-                            placeholder='Paste IDP metadata XML here (optional)'
-                            value={formData.idpMetadata}
-                            autoComplete='off'
-                            autoCapitalize='none'
-                            spellCheck={false}
-                            onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
-                            className='min-h-[60px] font-mono'
-                            rows={2}
-                          />
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
+                    </div>
 
-              {/* Callback URL display */}
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Callback URL
-                </span>
-                <div className='relative'>
-                  <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                    <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
-                      {callbackUrl}
-                    </code>
+                    <div className='flex flex-col gap-[8px]'>
+                      <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                        IDP Metadata XML
+                      </span>
+                      <Textarea
+                        placeholder='Paste IDP metadata XML here (optional)'
+                        value={formData.idpMetadata}
+                        autoComplete='off'
+                        autoCapitalize='none'
+                        spellCheck={false}
+                        onChange={(e) => handleInputChange('idpMetadata', e.target.value)}
+                        className='min-h-[60px] font-mono'
+                        rows={2}
+                      />
+                    </div>
                   </div>
-                  <Button
-                    type='button'
-                    variant='ghost'
-                    onClick={() => copyToClipboard(callbackUrl)}
-                    className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
-                  >
-                    {copied ? (
-                      <Check className='h-[14px] w-[14px]' />
-                    ) : (
-                      <Copy className='h-[14px] w-[14px]' />
-                    )}
-                    <span className='sr-only'>Copy callback URL</span>
-                  </Button>
-                </div>
-                <p className='text-[13px] text-[var(--text-muted)]'>
-                  Configure this in your identity provider
-                </p>
+                )}
               </div>
-            </div>
-          </div>
+            </>
+          )}
 
-          {/* Footer */}
-          <div className='mt-auto flex items-center justify-end gap-[8px]'>
-            {error && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{error}</p>}
-            <Button
-              type='submit'
-              variant='primary'
-              disabled={configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()}
-              className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
-            >
-              {configureSSOMutation.isPending
-                ? isEditing
-                  ? 'Updating...'
-                  : 'Adding...'
-                : isEditing
-                  ? 'Update'
-                  : 'Add Provider'}
-            </Button>
-          </div>
-        </form>
-
-        {/* Delete Confirmation Dialog */}
-        <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-          <ModalContent className='w-[400px]'>
-            <ModalHeader>Delete SSO Provider</ModalHeader>
-            <ModalBody>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
-                Are you sure you want to delete{' '}
-                <span className='font-medium text-[var(--text-primary)]'>
-                  {providerToDelete?.providerId}
-                </span>
-                ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-              </p>
-            </ModalBody>
-            <ModalFooter>
-              <Button
-                variant='default'
-                onClick={() => {
-                  setShowDeleteDialog(false)
-                  setProviderToDelete(null)
-                }}
-              >
-                Cancel
-              </Button>
+          {/* Callback URL display */}
+          <div className='flex flex-col gap-[8px]'>
+            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+              Callback URL
+            </span>
+            <div className='relative'>
+              <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
+                <code className='flex-1 truncate font-mono text-[13px] text-[var(--text-primary)]'>
+                  {callbackUrl}
+                </code>
+              </div>
               <Button
-                variant='primary'
-                onClick={() => {
-                  setShowDeleteDialog(false)
-                  setProviderToDelete(null)
-                }}
-                className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
+                type='button'
+                variant='ghost'
+                onClick={() => copyToClipboard(callbackUrl)}
+                className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
               >
-                Delete
+                {copied ? (
+                  <Check className='h-[14px] w-[14px]' />
+                ) : (
+                  <Copy className='h-[14px] w-[14px]' />
+                )}
+                <span className='sr-only'>Copy callback URL</span>
               </Button>
-            </ModalFooter>
-          </ModalContent>
-        </Modal>
-      </>
-    )
-  }
-
-  // List View
-  return (
-    <>
-      <div className='flex h-full flex-col gap-[16px]'>
-        {/* Search Input and Add Button */}
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border bg-[var(--surface-6)] px-[8px] py-[5px]'>
-            <Search
-              className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
-              strokeWidth={2}
-            />
-            <UiInput
-              placeholder='Search SSO providers...'
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className='h-auto flex-1 border-0 bg-transparent p-0 font-base leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
-            />
-          </div>
-          <Button
-            onClick={handleAddNew}
-            variant='primary'
-            disabled={isLoadingProviders}
-            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]' />
-            Add
-          </Button>
-        </div>
-
-        {/* Scrollable Content */}
-        <div className='min-h-0 flex-1 overflow-y-auto'>
-          {showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
-              Click "Add" above to get started
-            </div>
-          ) : (
-            <div className='flex flex-col gap-[8px]'>
-              {/* Provider List */}
-              {filteredProviders.map((provider: SSOProvider) => (
-                <div key={provider.id} className='flex items-center justify-between gap-[12px]'>
-                  <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <div className='flex items-center gap-[6px]'>
-                      <span className='max-w-[280px] truncate font-medium text-[14px]'>
-                        {provider.providerId}
-                      </span>
-                      <span className='text-[13px] text-[var(--text-secondary)]'>
-                        ({provider.providerType.toUpperCase()})
-                      </span>
-                    </div>
-                    <p className='truncate text-[13px] text-[var(--text-muted)]'>
-                      {provider.domain}
-                    </p>
-                  </div>
-                  <Button
-                    variant='ghost'
-                    className='flex-shrink-0'
-                    onClick={() => handleReconfigure(provider)}
-                  >
-                    Edit
-                  </Button>
-                </div>
-              ))}
-
-              {showNoResults && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
-                  No providers found matching "{searchTerm}"
-                </div>
-              )}
             </div>
-          )}
+            <p className='text-[13px] text-[var(--text-muted)]'>
+              Configure this in your identity provider
+            </p>
+          </div>
         </div>
       </div>
 
-      {/* Delete Confirmation Dialog */}
-      <Modal open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
-        <ModalContent className='w-[400px]'>
-          <ModalHeader>Delete SSO Provider</ModalHeader>
-          <ModalBody>
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
-              Are you sure you want to delete{' '}
-              <span className='font-medium text-[var(--text-primary)]'>
-                {providerToDelete?.providerId}
-              </span>
-              ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
-            </p>
-          </ModalBody>
-          <ModalFooter>
-            <Button
-              variant='default'
-              onClick={() => {
-                setShowDeleteDialog(false)
-                setProviderToDelete(null)
-              }}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant='primary'
-              onClick={() => {
-                setShowDeleteDialog(false)
-                setProviderToDelete(null)
-              }}
-              className='!bg-[var(--text-error)] !text-white hover:!bg-[var(--text-error)]/90'
-            >
-              Delete
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
+      {/* Footer */}
+      <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        {error && <p className='mr-auto text-[12px] text-[var(--text-error)]'>{error}</p>}
+        <Button
+          type='submit'
+          variant='primary'
+          disabled={configureSSOMutation.isPending || hasAnyErrors(errors) || !isFormValid()}
+          className='!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!bg-[var(--brand-tertiary-2)]/90'
+        >
+          {configureSSOMutation.isPending
+            ? isEditing
+              ? 'Updating...'
+              : 'Saving...'
+            : isEditing
+              ? 'Update'
+              : 'Save'}
+        </Button>
+      </div>
+    </form>
   )
 }
 
 function SsoSkeleton() {
   return (
     <div className='flex h-full flex-col gap-[16px]'>
-      {/* Search + Add button skeleton */}
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-9 flex-1 rounded-[8px]' />
-        <Skeleton className='h-9 w-[70px] rounded-[8px]' />
-      </div>
-
-      {/* List skeleton */}
+      {/* Form fields skeleton */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[8px]'>
-          <SsoProviderSkeleton />
-          <SsoProviderSkeleton />
-          <SsoProviderSkeleton />
+        <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[80px]' />
+            <Skeleton className='h-9 w-full' />
+            <Skeleton className='h-[13px] w-[200px]' />
+          </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[70px]' />
+            <Skeleton className='h-9 w-full' />
+          </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[60px]' />
+            <Skeleton className='h-9 w-full' />
+          </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[50px]' />
+            <Skeleton className='h-9 w-full' />
+          </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[60px]' />
+            <Skeleton className='h-9 w-full' />
+          </div>
+          <div className='flex flex-col gap-[8px]'>
+            <Skeleton className='h-[13px] w-[80px]' />
+            <Skeleton className='h-9 w-full' />
+          </div>
         </div>
       </div>
-    </div>
-  )
-}
 
-function SsoProviderSkeleton() {
-  return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
-          <Skeleton className='h-[14px] w-[100px]' />
-          <Skeleton className='h-[13px] w-[50px]' />
-        </div>
-        <Skeleton className='h-[13px] w-[150px]' />
+      {/* Footer skeleton */}
+      <div className='mt-auto flex items-center justify-end'>
+        <Skeleton className='h-9 w-[60px]' />
       </div>
-      <Skeleton className='h-[26px] w-[40px] rounded-[6px]' />
     </div>
   )
 }
diff --git a/apps/sim/components/emcn/components/code/code.css b/apps/sim/components/emcn/components/code/code.css
index b8167c77ec7..ea87108fd1b 100644
--- a/apps/sim/components/emcn/components/code/code.css
+++ b/apps/sim/components/emcn/components/code/code.css
@@ -1,75 +1,148 @@
 /**
- * Code editor syntax token theme (VSCode Dark+ inspired).
- * Only token colors are in CSS; all other styling uses Tailwind.
+ * Code editor syntax token theme.
+ * Light mode: Vibrant colors matching dark mode's aesthetic quality.
+ * Dark mode: VSCode Dark+ inspired colors with deep, vibrant palette.
  * Applied to elements with .code-editor-theme class.
  */
 
-/* Token colors with deep, vibrant palette */
+/**
+ * Light mode token colors (default) - vibrant palette
+ */
 .code-editor-theme .token.comment,
 .code-editor-theme .token.block-comment,
 .code-editor-theme .token.prolog,
 .code-editor-theme .token.doctype,
 .code-editor-theme .token.cdata {
-  color: #8bc985 !important;
+  color: #2e7d32 !important;
 }
 
 .code-editor-theme .token.punctuation {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.property,
 .code-editor-theme .token.attr-name,
 .code-editor-theme .token.variable {
-  color: #5fc9cb !important;
+  color: #0891b2 !important;
 }
 
 .code-editor-theme .token.tag,
 .code-editor-theme .token.boolean,
 .code-editor-theme .token.number,
 .code-editor-theme .token.constant {
-  color: #ffc857 !important;
+  color: #b45309 !important;
 }
 
 .code-editor-theme .token.string,
 .code-editor-theme .token.char,
 .code-editor-theme .token.builtin,
 .code-editor-theme .token.inserted {
-  color: #ff6b6b !important;
+  color: #dc2626 !important;
 }
 
 .code-editor-theme .token.operator,
 .code-editor-theme .token.entity,
 .code-editor-theme .token.url {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.atrule,
 .code-editor-theme .token.attr-value,
 .code-editor-theme .token.keyword {
-  color: #d896d8 !important;
+  color: #9333ea !important;
 }
 
 .code-editor-theme .token.function,
 .code-editor-theme .token.class-name {
-  color: #ffc857 !important;
+  color: #ca8a04 !important;
 }
 
 .code-editor-theme .token.regex,
 .code-editor-theme .token.important {
-  color: #ff6b6b !important;
+  color: #e11d48 !important;
 }
 
 .code-editor-theme .token.symbol {
-  color: #eeeeee !important;
+  color: #383838 !important;
 }
 
 .code-editor-theme .token.deleted {
-  color: #ff6b6b !important;
+  color: #dc2626 !important;
 }
 
-/* Blue accents for <var> and {{ENV}} placeholders */
+/* Blue accents for <var> and {{ENV}} placeholders - light mode */
 .code-editor-theme .text-blue-500 {
-  color: #68c5ff !important;
+  color: #1d4ed8 !important;
+}
+
+/**
+ * Dark mode token colors
+ */
+.dark .code-editor-theme .token.comment,
+.dark .code-editor-theme .token.block-comment,
+.dark .code-editor-theme .token.prolog,
+.dark .code-editor-theme .token.doctype,
+.dark .code-editor-theme .token.cdata {
+  color: #8bc985 !important;
+}
+
+.dark .code-editor-theme .token.punctuation {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.property,
+.dark .code-editor-theme .token.attr-name,
+.dark .code-editor-theme .token.variable {
+  color: #5fc9cb !important;
+}
+
+.dark .code-editor-theme .token.tag,
+.dark .code-editor-theme .token.boolean,
+.dark .code-editor-theme .token.number,
+.dark .code-editor-theme .token.constant {
+  color: #ffc857 !important;
+}
+
+.dark .code-editor-theme .token.string,
+.dark .code-editor-theme .token.char,
+.dark .code-editor-theme .token.builtin,
+.dark .code-editor-theme .token.inserted {
+  color: #ff6b6b !important;
+}
+
+.dark .code-editor-theme .token.operator,
+.dark .code-editor-theme .token.entity,
+.dark .code-editor-theme .token.url {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.atrule,
+.dark .code-editor-theme .token.attr-value,
+.dark .code-editor-theme .token.keyword {
+  color: #d896d8 !important;
+}
+
+.dark .code-editor-theme .token.function,
+.dark .code-editor-theme .token.class-name {
+  color: #ffc857 !important;
+}
+
+.dark .code-editor-theme .token.regex,
+.dark .code-editor-theme .token.important {
+  color: #ff6b6b !important;
+}
+
+.dark .code-editor-theme .token.symbol {
+  color: #eeeeee !important;
+}
+
+.dark .code-editor-theme .token.deleted {
+  color: #ff6b6b !important;
+}
+
+/* Blue accents for <var> and {{ENV}} placeholders - dark mode */
+.dark .code-editor-theme .text-blue-500 {
+  color: #35b6ff !important;
 }
 
 /* Ensure transparent backgrounds */
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index addaf40b464..bba8e683d21 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -78,8 +78,8 @@ function Container({
       className={cn(
         // Base container styling
         'group relative min-h-[100px] rounded-[4px] border border-[var(--border-strong)]',
-        'bg-[#1F1F1F] font-medium font-mono text-sm transition-colors',
-        'dark:border-[var(--border-strong)]',
+        'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
+        'dark:bg-[#1F1F1F]',
         // Overflow handling for long content
         'overflow-x-auto overflow-y-auto',
         // Streaming state
@@ -143,7 +143,8 @@ export function getCodeEditorProps(options?: {
     padding: 8,
     className: cn(
       // Base editor classes
-      'bg-transparent font-[inherit] text-[inherit] font-medium text-[#eeeeee]',
+      'bg-transparent font-[inherit] text-[inherit] font-medium',
+      'text-[var(--text-primary)] dark:text-[#eeeeee]',
       'leading-[21px] outline-none focus:outline-none',
       'min-h-[106px]',
       // Streaming/disabled states
@@ -153,10 +154,11 @@ export function getCodeEditorProps(options?: {
       // Reset browser defaults
       'border-none bg-transparent outline-none resize-none',
       'focus:outline-none focus:ring-0',
-      // Selection styling
-      'selection:bg-[#264f78] selection:text-white',
-      // Caret color
-      'caret-white',
+      // Selection styling - light and dark modes
+      'selection:bg-[#add6ff] selection:text-[#1b1b1b]',
+      'dark:selection:bg-[#264f78] dark:selection:text-white',
+      // Caret color - adapts to mode
+      'caret-[var(--text-primary)] dark:caret-white',
       // Font smoothing
       '[-webkit-font-smoothing:antialiased] [-moz-osx-font-smoothing:grayscale]',
       // Disable interaction for streaming/preview
@@ -189,7 +191,7 @@ function Gutter({ children, width, className, style }: CodeGutterProps) {
       className={cn(
         'absolute top-0 bottom-0 left-0',
         'flex select-none flex-col items-end overflow-hidden',
-        'rounded-l-[4px] bg-[#1F1F1F]',
+        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[#1F1F1F]',
         'pr-0.5',
         className
       )}
@@ -327,13 +329,13 @@ function Viewer({
               return (
                 <Fragment key={idx}>
                   <div
-                    className='select-none pr-0.5 text-right text-[#a8a8a8] text-xs tabular-nums leading-[21px]'
+                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
                     style={{ transform: 'translateY(0.25px)', ...gutterStyle }}
                   >
                     {idx + 1}
                   </div>
                   <pre
-                    className='m-0 min-w-0 whitespace-pre-wrap break-words pr-2 pl-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]'
+                    className='m-0 min-w-0 whitespace-pre-wrap break-words pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
                     // Using per-line highlighting keeps the gutter height in sync with wrapped content
                     dangerouslySetInnerHTML={{ __html: perLineHighlighted || '&nbsp;' }}
                   />
@@ -354,7 +356,7 @@ function Viewer({
           <pre
             className={cn(
               whitespaceClass,
-              'p-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]'
+              'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
             )}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           />
@@ -371,7 +373,10 @@ function Viewer({
   const lineNumbers = []
   for (let i = 1; i <= lineCount; i++) {
     lineNumbers.push(
-      <div key={i} className='text-right text-[#a8a8a8] text-xs tabular-nums leading-[21px]'>
+      <div
+        key={i}
+        className='text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+      >
         {i}
       </div>
     )
@@ -384,7 +389,10 @@ function Viewer({
       </Gutter>
       <Content className='code-editor-theme' paddingLeft={`${gutterWidth + paddingLeft}px`}>
         <pre
-          className={cn(whitespaceClass, 'p-2 font-mono text-[#eeeeee] text-[13px] leading-[21px]')}
+          className={cn(
+            whitespaceClass,
+            'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+          )}
           dangerouslySetInnerHTML={{ __html: highlightedCode }}
         />
       </Content>

From aeb1a41bf616b5ddefbcd0d0804394a7eb1bc813 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 3 Dec 2025 11:14:49 -0800
Subject: [PATCH 15/17] improvement: EMCN, light

---
 apps/sim/app/_styles/globals.css              | 194 ++++++++++--------
 .../components/markdown-renderer.tsx          |  44 ++--
 .../components/tool-call/tool-call.tsx        |  33 ++-
 .../sub-block/components/table/table.tsx      |  45 +++-
 .../components/tool-input/tool-input.tsx      | 118 +++++------
 .../panel/components/toolbar/toolbar.tsx      |  22 +-
 .../components/terminal/terminal.tsx          |  16 +-
 .../footer-navigation/footer-navigation.tsx   |   8 +-
 .../workflow-item/workflow-item.tsx           |   4 +-
 .../w/components/sidebar/sidebar-new.tsx      |   4 +-
 .../emcn/components/tooltip/tooltip.tsx       |  30 +--
 apps/sim/tailwind.config.ts                   |   6 +-
 12 files changed, 278 insertions(+), 246 deletions(-)

diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index a1438e3b218..c6e9ceb88af 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -80,91 +80,96 @@
 @layer base {
   :root,
   .light {
-    /* Neutrals (surfaces) */
-    --bg: #ffffff;
-    --surface-1: #f5f5f5;
-    --surface-2: #f2f2f2;
-    --surface-3: #f0f0f0;
-    --surface-4: #eeeeee;
-    --surface-5: #ebebeb;
-    --surface-6: #e8e8e8;
-    --surface-9: #cecece;
-    --surface-11: #c8c8c8;
-    --surface-12: #c4c4c4;
-    --surface-13: #c0c0c0;
-    --surface-14: #bcbcbc;
-    --surface-15: #b8b8b8;
-    --surface-elevated: #ffffff;
-    --bg-strong: #ebebeb;
-
-    /* Text */
-    --text-primary: #1b1b1b;
-    --text-secondary: #404040;
-    --text-tertiary: #555555;
-    --text-muted: #737373;
-    --text-subtle: #8a8a8a;
-    --text-inverse: #1b1b1b;
-    --text-error: #ef4444;
-
-    /* Borders / dividers */
-    --border: #ebebeb;
-    --border-strong: #e0e0e0;
-    --divider: #e5e5e5;
-    --border-muted: #f0f0f0;
-    --border-success: #cecece;
+    /* Neutrals (surfaces) - shadcn stone palette */
+    --bg: #fafaf9; /* stone-50 */
+    --surface-1: #fafaf9; /* stone-50 */
+    --surface-2: #ffffff; /* white */
+    --surface-3: #f5f5f4; /* stone-100 */
+    --surface-4: #f5f5f4; /* stone-100 */
+    --surface-5: #eeedec; /* stone-150 */
+    --surface-6: #f5f5f4; /* stone-100 */
+    --surface-9: #f5f5f4; /* stone-100 */
+    --surface-11: #e7e5e4; /* stone-200 */
+    --surface-12: #d6d3d1; /* stone-300 */
+    --surface-13: #a8a29e; /* stone-400 */
+    --surface-14: #78716c; /* stone-500 */
+    --surface-15: #57534e; /* stone-600 */
+    --surface-elevated: #ffffff; /* white */
+    --bg-strong: #e7e5e4; /* stone-200 */
+
+    /* Text - shadcn stone palette for proper contrast */
+    --text-primary: #1c1917; /* stone-900 */
+    --text-secondary: #292524; /* stone-800 */
+    --text-tertiary: #57534e; /* stone-600 */
+    --text-muted: #78716c; /* stone-500 */
+    --text-subtle: #a8a29e; /* stone-400 */
+    --text-inverse: #fafaf9; /* stone-50 */
+    --text-error: #dc2626;
+
+    /* Borders / dividers - shadcn stone palette */
+    --border: #d6d3d1; /* stone-300 */
+    --border-strong: #d6d3d1; /* stone-300 */
+    --divider: #e7e5e4; /* stone-200 */
+    --border-muted: #e7e5e4; /* stone-200 */
+    --border-success: #d6d3d1; /* stone-300 */
 
     /* Brand & state */
     --brand-400: #8e4cfb;
     --brand-500: #6f3dfa;
     --brand-secondary: #33b4ff;
     --brand-tertiary: #22c55e;
-    --warning: #ff6600;
+    --brand-tertiary-2: #33c481;
+    --warning: #ea580c;
 
     /* Utility */
     --white: #ffffff;
 
-    /* RGB for opacity usage */
-    --surface-4-rgb: 238 238 238;
-    --surface-5-rgb: 235 235 235;
-    --surface-7-rgb: 224 224 224;
-    --surface-9-rgb: 206 206 206;
-    --divider-rgb: 229 229 229;
+    /* Font weights - lighter for light mode (-20 from dark) */
+    --font-weight-base: 430;
+    --font-weight-medium: 450;
+    --font-weight-semibold: 500;
+
+    /* RGB for opacity usage - stone palette */
+    --surface-4-rgb: 245 245 244; /* stone-100 */
+    --surface-5-rgb: 238 237 236; /* stone-150 */
+    --surface-7-rgb: 245 245 244; /* stone-100 */
+    --surface-9-rgb: 245 245 244; /* stone-100 */
+    --divider-rgb: 231 229 228; /* stone-200 */
     --white-rgb: 255 255 255;
     --black-rgb: 0 0 0;
 
-    /* Extended palette (exhaustive from code usage via -[#...]) */
-    /* Neutral deep shades */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
+    /* Extended palette - mapped to shadcn stone palette */
+    --c-0D0D0D: #0c0a09; /* stone-950 */
+    --c-1A1A1A: #1c1917; /* stone-900 */
+    --c-1F1F1F: #1c1917; /* stone-900 */
+    --c-2A2A2A: #292524; /* stone-800 */
+    --c-383838: #44403c; /* stone-700 */
+    --c-414141: #57534e; /* stone-600 */
     --c-442929: #442929;
     --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
+    --c-575757: #78716c; /* stone-500 */
+    --c-686868: #78716c; /* stone-500 */
+    --c-707070: #78716c; /* stone-500 */
+    --c-727272: #78716c; /* stone-500 */
+    --c-737373: #78716c; /* stone-500 */
+    --c-808080: #a8a29e; /* stone-400 */
+    --c-858585: #a8a29e; /* stone-400 */
+    --c-868686: #a8a29e; /* stone-400 */
+    --c-8D8D8D: #a8a29e; /* stone-400 */
+    --c-939393: #a8a29e; /* stone-400 */
+    --c-A8A8A8: #a8a29e; /* stone-400 */
+    --c-B8B8B8: #d6d3d1; /* stone-300 */
+    --c-C0C0C0: #d6d3d1; /* stone-300 */
+    --c-CDCDCD: #d6d3d1; /* stone-300 */
+    --c-D0D0D0: #d6d3d1; /* stone-300 */
+    --c-D2D2D2: #d6d3d1; /* stone-300 */
+    --c-E0E0E0: #e7e5e4; /* stone-200 */
+    --c-E5E5E5: #e7e5e4; /* stone-200 */
+    --c-E8E8E8: #e7e5e4; /* stone-200 */
+    --c-EEEEEE: #f5f5f4; /* stone-100 */
+    --c-F0F0F0: #f5f5f4; /* stone-100 */
+    --c-F4F4F4: #fafaf9; /* stone-50 */
+    --c-F5F5F5: #fafaf9; /* stone-50 */
 
     /* Blues and cyans */
     --c-00B0B0: #00b0b0;
@@ -180,20 +185,27 @@
     --c-8C10FF: #8c10ff;
 
     /* Greens */
-    --c-4CAF50: #4caf50;
+    --c-4CAF50: #22c55e;
 
     /* Oranges / Ambers */
     --c-F59E0B: #f59e0b;
-    --c-F97316: #f97316;
-    --c-FF972F: #ff972f;
+    --c-F97316: #ea580c;
+    --c-FF972F: #f97316;
 
     /* Reds */
     --c-DC2626: #dc2626;
-    --c-F6D2D2: #f6d2d2;
+    --c-F6D2D2: #fecaca;
     --c-F87171: #f87171;
-    --c-FF402F: #ff402f;
+    --c-FF402F: #ef4444;
     --c-B91C1C: #b91c1c;
-    --c-883827: #883827;
+    --c-883827: #7c2d12;
+
+    /* Terminal status badges */
+    --terminal-status-error-bg: #feeeee;
+    --terminal-status-error-border: #f87171;
+    --terminal-status-info-bg: #f5f5f4; /* stone-100 */
+    --terminal-status-info-border: #a8a29e; /* stone-400 */
+    --terminal-status-info-color: #57534e; /* stone-600 */
   }
   .dark {
     /* Neutrals (surfaces) */
@@ -215,8 +227,8 @@
 
     /* Text */
     --text-primary: #e6e6e6;
-    --text-secondary: #b1b1b1;
-    --text-tertiary: #aeaeae;
+    --text-secondary: #cccccc;
+    --text-tertiary: #b3b3b3;
     --text-muted: #787878;
     --text-subtle: #7d7d7d;
     --text-inverse: #1b1b1b;
@@ -239,6 +251,11 @@
     /* Utility */
     --white: #ffffff;
 
+    /* Font weights - standard weights for dark mode */
+    --font-weight-base: 440;
+    --font-weight-medium: 480;
+    --font-weight-semibold: 550;
+
     /* RGB for opacity usage */
     --surface-4-rgb: 37 37 37;
     --surface-5-rgb: 39 39 39;
@@ -312,6 +329,13 @@
     --c-FF402F: #ff402f;
     --c-B91C1C: #b91c1c;
     --c-883827: #883827;
+
+    /* Terminal status badges */
+    --terminal-status-error-bg: #491515;
+    --terminal-status-error-border: #883827;
+    --terminal-status-info-bg: #383838;
+    --terminal-status-info-border: #686868;
+    --terminal-status-info-color: #b7b7b7;
   }
 }
 
@@ -361,16 +385,16 @@
   }
 
   ::-webkit-scrollbar-track {
-    background: var(--white);
+    background: var(--surface-1);
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--muted-foreground) / 0.3);
+    background-color: var(--surface-12);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground) / 0.4);
+    background-color: var(--surface-13);
   }
 
   /* Dark Mode Global Scrollbar */
@@ -379,20 +403,20 @@
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: hsl(var(--muted-foreground) / 0.3);
+    background-color: var(--surface-12);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: hsl(var(--muted-foreground) / 0.4);
+    background-color: var(--surface-13);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--muted-foreground) / 0.3) var(--white);
+    scrollbar-color: var(--surface-12) var(--surface-1);
   }
 
   .dark * {
-    scrollbar-color: hsl(var(--muted-foreground) / 0.3) var(--surface-5);
+    scrollbar-color: var(--surface-12) var(--surface-5);
   }
 
   .copilot-scrollable {
diff --git a/apps/sim/app/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 bc64ca9293d..3f8969afddb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer.tsx
@@ -137,29 +137,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
     () => ({
       // Paragraph
       p: ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
-        <p className='mb-1 font-[470] font-season text-[#707070] text-sm leading-[1.25rem] last:mb-0 dark:text-[#E8E8E8]'>
+        <p className='mb-1 font-base font-season text-[#1f2124] text-sm leading-[1.25rem] last:mb-0 dark:font-[470] dark:text-[#E8E8E8]'>
           {children}
         </p>
       ),
 
       // Headings
       h1: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[#0D0D0D] dark:text-[#F0F0F0]'>
+        <h1 className='mt-3 mb-3 font-season font-semibold text-2xl text-[var(--text-primary)] dark:text-[#F0F0F0]'>
           {children}
         </h1>
       ),
       h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[#0D0D0D] text-xl dark:text-[#F0F0F0]'>
+        <h2 className='mt-2.5 mb-2.5 font-season font-semibold text-[var(--text-primary)] text-xl dark:text-[#F0F0F0]'>
           {children}
         </h2>
       ),
       h3: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h3 className='mt-2 mb-2 font-season font-semibold text-[#0D0D0D] text-lg dark:text-[#F0F0F0]'>
+        <h3 className='mt-2 mb-2 font-season font-semibold text-[var(--text-primary)] text-lg dark:text-[#F0F0F0]'>
           {children}
         </h3>
       ),
       h4: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-        <h4 className='mt-5 mb-2 font-season font-semibold text-[#0D0D0D] text-base dark:text-[#F0F0F0]'>
+        <h4 className='mt-5 mb-2 font-season font-semibold text-[var(--text-primary)] text-base dark:text-[#F0F0F0]'>
           {children}
         </h4>
       ),
@@ -167,7 +167,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Lists
       ul: ({ children }: React.HTMLAttributes<HTMLUListElement>) => (
         <ul
-          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'disc' }}
         >
           {children}
@@ -175,7 +175,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       ),
       ol: ({ children }: React.HTMLAttributes<HTMLOListElement>) => (
         <ol
-          className='mt-1 mb-1 space-y-1 pl-6 font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='mt-1 mb-1 space-y-1 pl-6 font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ listStyleType: 'decimal' }}
         >
           {children}
@@ -186,7 +186,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
         ordered,
       }: React.LiHTMLAttributes<HTMLLIElement> & { ordered?: boolean }) => (
         <li
-          className='font-[470] font-season text-[#707070] dark:text-[#E8E8E8]'
+          className='font-base font-season text-[#1f2124] dark:font-[470] dark:text-[#E8E8E8]'
           style={{ display: 'list-item' }}
         >
           {children}
@@ -309,33 +309,35 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
 
       // Bold text
       strong: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <strong className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</strong>
+        <strong className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>
+          {children}
+        </strong>
       ),
 
       // Bold text (alternative)
       b: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <b className='font-semibold text-[#0D0D0D] dark:text-[#F0F0F0]'>{children}</b>
+        <b className='font-semibold text-[var(--text-primary)] dark:text-[#F0F0F0]'>{children}</b>
       ),
 
       // Italic text
       em: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <em className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</em>
+        <em className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</em>
       ),
 
       // Italic text (alternative)
       i: ({ children }: React.HTMLAttributes<HTMLElement>) => (
-        <i className='text-[#707070] italic dark:text-[#E8E8E8]'>{children}</i>
+        <i className='text-[#1f2124] italic dark:text-[#E8E8E8]'>{children}</i>
       ),
 
       // Blockquotes
       blockquote: ({ children }: React.HTMLAttributes<HTMLQuoteElement>) => (
-        <blockquote className='my-4 border-gray-300 border-l-4 py-1 pl-4 font-season text-[#858585] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
+        <blockquote className='my-4 border-[var(--border-strong)] border-l-4 py-1 pl-4 font-season text-[#3a3d41] italic dark:border-gray-600 dark:text-[#E0E0E0]'>
           {children}
         </blockquote>
       ),
 
       // Horizontal rule
-      hr: () => <hr className='my-8 border-gray-500/[.07] border-t dark:border-gray-400/[.07]' />,
+      hr: () => <hr className='my-8 border-[var(--divider)] border-t dark:border-gray-400/[.07]' />,
 
       // Links
       a: ({ href, children, ...props }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
@@ -347,29 +349,29 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
       // Tables
       table: ({ children }: React.TableHTMLAttributes<HTMLTableElement>) => (
         <div className='my-4 max-w-full overflow-x-auto'>
-          <table className='min-w-full table-auto border border-gray-300 font-season text-sm dark:border-gray-600'>
+          <table className='min-w-full table-auto border border-[var(--border)] font-season text-sm dark:border-gray-600'>
             {children}
           </table>
         </div>
       ),
       thead: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <thead className='bg-gray-200 text-left dark:bg-[#2A2A2A]'>{children}</thead>
+        <thead className='bg-[var(--surface-9)] text-left dark:bg-[#2A2A2A]'>{children}</thead>
       ),
       tbody: ({ children }: React.HTMLAttributes<HTMLTableSectionElement>) => (
-        <tbody className='divide-y divide-gray-300 dark:divide-gray-600'>{children}</tbody>
+        <tbody className='divide-y divide-[var(--border)] dark:divide-gray-600'>{children}</tbody>
       ),
       tr: ({ children }: React.HTMLAttributes<HTMLTableRowElement>) => (
-        <tr className='border-gray-300 border-b transition-colors hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
+        <tr className='border-[var(--border)] border-b transition-colors hover:bg-[var(--surface-9)] dark:border-gray-600 dark:hover:bg-[#2A2A2A]/60'>
           {children}
         </tr>
       ),
       th: ({ children }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
-        <th className='border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#858585] last:border-r-0 dark:border-gray-600 dark:text-[#E0E0E0]'>
+        <th className='border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#3a3d41] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E0E0E0]'>
           {children}
         </th>
       ),
       td: ({ children }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
-        <td className='break-words border-gray-300 border-r px-4 py-2 align-top font-[470] text-[#707070] last:border-r-0 dark:border-gray-600 dark:text-[#E8E8E8]'>
+        <td className='break-words border-[var(--border)] border-r px-4 py-2 align-top font-base text-[#1f2124] last:border-r-0 dark:border-gray-600 dark:font-[470] dark:text-[#E8E8E8]'>
           {children}
         </td>
       ),
@@ -388,7 +390,7 @@ export default function CopilotMarkdownRenderer({ content }: CopilotMarkdownRend
   )
 
   return (
-    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-[470] font-season text-[#707070] text-sm leading-[1.25rem] dark:text-[#E8E8E8]'>
+    <div className='copilot-markdown-wrapper max-w-full space-y-3 break-words font-base font-season text-[#1f2124] text-sm leading-[1.25rem] dark:font-[470] dark:text-[#E8E8E8]'>
       <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
         {content}
       </ReactMarkdown>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index 46494fe8493..21a54d0bdeb 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
@@ -139,16 +139,11 @@ function ShimmerOverlayText({
 
   // Special tools: use gradient for entire text
   if (isSpecial) {
-    const baseTextStyle = {
-      backgroundImage: 'linear-gradient(90deg, #B99FFD 0%, #D1BFFF 100%)',
-      WebkitBackgroundClip: 'text',
-      backgroundClip: 'text',
-      WebkitTextFillColor: 'transparent',
-    }
-
     return (
       <span className={`relative inline-block ${className || ''}`}>
-        <span style={baseTextStyle}>{text}</span>
+        <span className='bg-gradient-to-r from-[#7c3aed] to-[#9061f9] bg-clip-text text-transparent dark:from-[#B99FFD] dark:to-[#D1BFFF]'>
+          {text}
+        </span>
         {active ? (
           <span
             aria-hidden='true'
@@ -182,13 +177,13 @@ function ShimmerOverlayText({
     )
   }
 
-  // Normal tools: two-tone rendering with lighter action verb
+  // Normal tools: two-tone rendering - action verb darker in light mode, lighter in dark mode
   return (
     <span className={`relative inline-block ${className || ''}`}>
       {actionVerb ? (
         <>
-          <span style={{ color: '#B8B8B8' }}>{actionVerb}</span>
-          <span style={{ color: 'var(--text-muted)' }}>{remainder}</span>
+          <span className='text-[#1f2124] dark:text-[#B8B8B8]'>{actionVerb}</span>
+          <span className='text-[#6b7075] dark:text-[var(--text-muted)]'>{remainder}</span>
         </>
       ) : (
         <span>{text}</span>
@@ -688,18 +683,18 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
       return (
         <div className='w-full overflow-hidden rounded border border-muted bg-card'>
           <div className='grid grid-cols-3 gap-0 border-muted/60 border-b bg-muted/40 py-1.5'>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Name
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Type
             </div>
-            <div className='self-start px-2 font-medium font-season text-[#858585] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
+            <div className='self-start px-2 font-medium font-season text-[#3a3d41] text-[10px] uppercase tracking-wide dark:text-[#E0E0E0]'>
               Value
             </div>
           </div>
           {ops.length === 0 ? (
-            <div className='px-2 py-2 font-[470] font-season text-[#707070] text-xs dark:text-[#E8E8E8]'>
+            <div className='px-2 py-2 font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
               No operations provided
             </div>
           ) : (
@@ -719,7 +714,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                     />
                   </div>
                   <div className='self-start px-2'>
-                    <span className='rounded border px-1 py-0.5 font-[470] font-season text-[#707070] text-[10px] dark:text-[#E8E8E8]'>
+                    <span className='rounded border px-1 py-0.5 font-[470] font-season text-[#1f2124] text-[10px] dark:text-[#E8E8E8]'>
                       {String(op.type || '')}
                     </span>
                   </div>
@@ -736,7 +731,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
                         className='w-full bg-transparent font-[470] font-mono text-amber-700 text-xs outline-none focus:text-amber-800 dark:text-amber-300 dark:focus:text-amber-200'
                       />
                     ) : (
-                      <span className='font-[470] font-season text-[#707070] text-xs dark:text-[#E8E8E8]'>
+                      <span className='font-[470] font-season text-[#1f2124] text-xs dark:text-[#E8E8E8]'>
                         —
                       </span>
                     )}
@@ -865,7 +860,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm'
+          className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
         />
         <div className='mt-[8px]'>{renderPendingDetails()}</div>
         {showButtons && (
@@ -891,7 +886,7 @@ export function ToolCall({ toolCall: toolCallProp, toolCallId, onStateChange }:
           text={displayName}
           active={isLoadingState}
           isSpecial={isSpecial}
-          className='font-[470] font-season text-[#939393] text-sm'
+          className='font-[470] font-season text-[#3a3d41] text-sm dark:text-[#939393]'
         />
       </div>
       {isExpandableTool && expanded && <div>{renderPendingDetails()}</div>}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/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 ad3595f7c69..34de2cc5d21 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -57,8 +57,9 @@ export function Table({
   // Use preview value when in preview mode, otherwise use store value
   const value = isPreview ? previewValue : storeValue
 
-  // Create refs for input elements
+  // Create refs for input and overlay elements
   const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
+  const overlayRefs = useRef<Map<string, HTMLDivElement>>(new Map())
 
   // Memoized template for empty cells for current columns
   const emptyCellsTemplate = useMemo(
@@ -180,16 +181,42 @@ export function Table({
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
-    const tagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
+    const handleScroll = (e: React.UIEvent<HTMLInputElement>) => {
+      const overlay = overlayRefs.current.get(cellKey)
+      if (overlay) {
+        overlay.scrollLeft = e.currentTarget.scrollLeft
+      }
+    }
+
+    const syncScrollAfterUpdate = () => {
+      requestAnimationFrame(() => {
+        const input = inputRefs.current.get(cellKey)
+        const overlay = overlayRefs.current.get(cellKey)
+        if (input && overlay) {
+          overlay.scrollLeft = input.scrollLeft
+        }
+      })
+    }
+
+    const baseTagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
       cellKey,
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
-    const envVarSelectHandler = inputController.fieldHelpers.createEnvVarSelectHandler(
+    const tagSelectHandler = (tag: string) => {
+      baseTagSelectHandler(tag)
+      syncScrollAfterUpdate()
+    }
+
+    const baseEnvVarSelectHandler = inputController.fieldHelpers.createEnvVarSelectHandler(
       cellKey,
       cellValue,
       (newValue) => updateCellValue(rowIndex, column, newValue)
     )
+    const envVarSelectHandler = (envVar: string) => {
+      baseEnvVarSelectHandler(envVar)
+      syncScrollAfterUpdate()
+    }
 
     return (
       <td
@@ -208,17 +235,21 @@ export function Table({
             placeholder={column}
             onChange={handlers.onChange}
             onKeyDown={handlers.onKeyDown}
+            onScroll={handleScroll}
             onDrop={handlers.onDrop}
             onDragOver={handlers.onDragOver}
             disabled={isPreview || disabled}
             autoComplete='off'
-            className='w-full border-0 bg-transparent px-[10px] py-[8px] text-transparent caret-white placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='w-full border-0 bg-transparent px-[10px] py-[8px] font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div
+            ref={(el) => {
+              if (el) overlayRefs.current.set(cellKey, el)
+            }}
             data-overlay={cellKey}
-            className='pointer-events-none absolute inset-0 flex items-center overflow-hidden bg-transparent px-[10px] font-medium text-[#eeeeee] text-sm'
+            className='scrollbar-hide pointer-events-none absolute top-0 right-[10px] bottom-0 left-[10px] overflow-x-auto overflow-y-hidden bg-transparent'
           >
-            <div className='whitespace-pre leading-[21px]'>
+            <div className='whitespace-pre py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
               {formatDisplayText(cellValue, {
                 accessiblePrefixes,
                 highlightAll: !accessiblePrefixes,
@@ -279,7 +310,7 @@ export function Table({
 
   return (
     <div className='relative'>
-      <div className='overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[#1F1F1F]'>
+      <div className='overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
         <table className='w-full bg-transparent'>
           {renderHeader()}
           <tbody className='bg-transparent'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/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 ba5fa3f39da..763638a5b7f 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
@@ -7,15 +7,14 @@ import {
   Combobox,
   Popover,
   PopoverContent,
+  PopoverItem,
   PopoverScrollArea,
   PopoverSearch,
   PopoverSection,
   PopoverTrigger,
-  Tooltip,
 } from '@/components/emcn'
 import { McpIcon } from '@/components/icons'
 import { Switch } from '@/components/ui/switch'
-import { Toggle } from '@/components/ui/toggle'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import {
@@ -1602,7 +1601,7 @@ export function ToolInput({
       {selectedTools.length === 0 ? (
         <Popover open={open} onOpenChange={setOpen}>
           <PopoverTrigger asChild>
-            <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)] dark:bg-[#1F1F1F]'>
+            <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
@@ -1819,7 +1818,7 @@ export function ToolInput({
               <div
                 key={`${tool.toolId}-${toolIndex}`}
                 className={cn(
-                  'group relative flex flex-col overflow-visible rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] transition-all duration-200 ease-in-out dark:bg-[#1F1F1F]',
+                  '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'
@@ -1830,7 +1829,7 @@ export function ToolInput({
               >
                 <div
                   className={cn(
-                    'flex items-center justify-between px-[10px] py-[8px]',
+                    'flex items-center justify-between gap-[8px] px-[10px] py-[8px]',
                     isExpandedForDisplay &&
                       !isCustomTool &&
                       'border-[var(--border-strong)] border-b',
@@ -1878,80 +1877,57 @@ export function ToolInput({
                   </div>
                   <div className='flex flex-shrink-0 items-center gap-[8px]'>
                     {supportsToolControl && (
-                      <Tooltip.Root>
-                        <Tooltip.Trigger asChild>
-                          <Toggle
-                            className='group flex h-auto items-center justify-center rounded-sm p-0 hover:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 data-[state=on]:bg-transparent'
-                            pressed={true}
-                            onPressedChange={() => {}}
-                            onClick={(e: React.MouseEvent) => {
-                              e.stopPropagation()
-                              const currentState = tool.usageControl || 'auto'
-                              const nextState =
-                                currentState === 'auto'
-                                  ? 'force'
-                                  : currentState === 'force'
-                                    ? 'none'
-                                    : 'auto'
-                              handleUsageControlChange(toolIndex, nextState)
-                            }}
-                            aria-label='Toggle tool usage control'
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <button
+                            className='flex items-center justify-center font-medium text-[12px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                            onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                            aria-label='Tool usage control'
                           >
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'auto' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              Auto
-                            </span>
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'force' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              Force
-                            </span>
-                            <span
-                              className={`font-medium text-[var(--text-tertiary)] text-xs ${
-                                tool.usageControl === 'none' ? 'block' : 'hidden'
-                              }`}
-                            >
-                              None
-                            </span>
-                          </Toggle>
-                        </Tooltip.Trigger>
-                        <Tooltip.Content className='max-w-[280px] p-2' side='top'>
-                          <p className='text-xs'>
-                            {tool.usageControl === 'auto' && (
-                              <span>
-                                <span className='font-medium' /> The model decides when to use the
-                                tool
-                              </span>
-                            )}
-                            {tool.usageControl === 'force' && (
-                              <span>
-                                <span className='font-medium' /> Always use this tool in the
-                                response
-                              </span>
-                            )}
-                            {tool.usageControl === 'none' && (
-                              <span>
-                                <span className='font-medium' /> Never use this tool
-                              </span>
-                            )}
-                          </p>
-                        </Tooltip.Content>
-                      </Tooltip.Root>
+                            {tool.usageControl === 'auto' && 'Auto'}
+                            {tool.usageControl === 'force' && 'Force'}
+                            {tool.usageControl === 'none' && 'None'}
+                            {!tool.usageControl && 'Auto'}
+                          </button>
+                        </PopoverTrigger>
+                        <PopoverContent
+                          side='bottom'
+                          align='end'
+                          sideOffset={8}
+                          onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                          className='gap-[2px]'
+                        >
+                          <PopoverItem
+                            active={(tool.usageControl || 'auto') === 'auto'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'auto')}
+                          >
+                            Auto{' '}
+                            <span className='text-[var(--text-tertiary)]'>(model decides)</span>
+                          </PopoverItem>
+                          <PopoverItem
+                            active={tool.usageControl === 'force'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'force')}
+                          >
+                            Force <span className='text-[var(--text-tertiary)]'>(always use)</span>
+                          </PopoverItem>
+                          <PopoverItem
+                            active={tool.usageControl === 'none'}
+                            onClick={() => handleUsageControlChange(toolIndex, 'none')}
+                          >
+                            None
+                          </PopoverItem>
+                        </PopoverContent>
+                      </Popover>
                     )}
                     <button
                       onClick={(e) => {
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
-                      <XIcon className='h-[14px] w-[14px]' />
+                      <XIcon className='h-[13px] w-[13px]' />
                     </button>
                   </div>
                 </div>
@@ -2140,7 +2116,7 @@ export function ToolInput({
           {/* Add Tool Button */}
           <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
-              <div className='flex w-full cursor-pointer items-center justify-center rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-3)] px-[10px] py-[6px] font-medium text-sm transition-colors hover:bg-[var(--surface-4)] dark:bg-[#1F1F1F]'>
+              <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
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 aceee71259e..ec6be45d92b 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
@@ -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-[5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none'
+                      'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
+                      'cursor-pointer hover:bg-[var(--surface-9)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -567,7 +567,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: trigger.bgColor }}
                     >
                       {Icon && (
@@ -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-[10px] !w-[10px]'
+                            '!h-[9px] !w-[9px]'
                           )}
                         />
                       )}
@@ -583,7 +583,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <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)]',
                         'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
@@ -644,8 +644,8 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     onClick={() => handleItemClick(block.type, false)}
                     className={clsx(
                       'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-                      'cursor-pointer hover:bg-[var(--border)] active:cursor-grabbing',
-                      'focus-visible:bg-[var(--border)] focus-visible:outline-none'
+                      'cursor-pointer hover:bg-[var(--surface-9)] active:cursor-grabbing',
+                      'focus-visible:bg-[var(--surface-9)] focus-visible:outline-none'
                     )}
                     onKeyDown={(event) => {
                       if (event.key === 'Enter') {
@@ -656,7 +656,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     }}
                   >
                     <div
-                      className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                      className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
                       style={{ background: block.bgColor }}
                     >
                       {Icon && (
@@ -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-[10px] !w-[10px]'
+                            '!h-[9px] !w-[9px]'
                           )}
                         />
                       )}
@@ -672,7 +672,7 @@ export const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(
                     <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)]',
                         'group-focus-visible:text-[var(--text-primary)]'
                       )}
                     >
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 cfe6f4b967d..7949d3d7b53 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
@@ -870,7 +870,7 @@ export function Terminal() {
                         >
                           <div
                             className='h-[6px] w-[6px] rounded-[2px]'
-                            style={{ backgroundColor: '#B7B7B7' }}
+                            style={{ backgroundColor: 'var(--terminal-status-info-color)' }}
                           />
                           <span className='flex-1'>Info</span>
                           {filters.statuses.has('info') && <Check className='h-3 w-3' />}
@@ -1084,8 +1084,8 @@ export function Terminal() {
                     <div
                       key={entry.id}
                       className={clsx(
-                        'flex h-[36px] cursor-pointer items-center px-[24px] hover:bg-[var(--border)]',
-                        isSelected && 'bg-[var(--border)]'
+                        'flex h-[36px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-9)] dark:hover:bg-[var(--border)]',
+                        isSelected && 'bg-[var(--surface-9)] dark:bg-[var(--border)]'
                       )}
                       onClick={() => handleRowClick(entry)}
                     >
@@ -1110,8 +1110,8 @@ export function Terminal() {
                             className={clsx(
                               'flex h-[24px] w-[56px] items-center justify-start rounded-[6px] border pl-[9px]',
                               statusInfo.isError
-                                ? 'gap-[5px] border-[#883827] bg-[#491515]'
-                                : 'gap-[8px] border-[#686868] bg-[#383838]'
+                                ? 'gap-[5px] border-[var(--terminal-status-error-border)] bg-[var(--terminal-status-error-bg)]'
+                                : 'gap-[8px] border-[var(--terminal-status-info-border)] bg-[var(--terminal-status-info-bg)]'
                             )}
                           >
                             <div
@@ -1119,13 +1119,15 @@ export function Terminal() {
                               style={{
                                 backgroundColor: statusInfo.isError
                                   ? 'var(--text-error)'
-                                  : '#B7B7B7',
+                                  : 'var(--terminal-status-info-color)',
                               }}
                             />
                             <span
                               className='font-medium text-[11.5px]'
                               style={{
-                                color: statusInfo.isError ? 'var(--text-error)' : '#B7B7B7',
+                                color: statusInfo.isError
+                                  ? 'var(--text-error)'
+                                  : 'var(--terminal-status-info-color)',
                               }}
                             >
                               {statusInfo.label}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
index 310c4ed563d..b973e85d1ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/footer-navigation/footer-navigation.tsx
@@ -81,14 +81,14 @@ export function FooterNavigation() {
 
   return (
     <>
-      <div className='flex flex-shrink-0 flex-col gap-[2px] border-t px-[7.75px] pt-[8px] pb-[8px] dark:border-[var(--border)]'>
+      <div className='flex flex-shrink-0 flex-col gap-[2px] border-[var(--border)] border-t px-[7.75px] pt-[8px] pb-[8px]'>
         {navigationItems.map((item) => {
           const Icon = item.icon
           const active = item.href ? isActive(item.href) : false
 
           const itemClasses = clsx(
-            'group flex h-[24px] items-center gap-[8px] rounded-[8px] px-[7px] text-[14px]',
-            active ? 'bg-[var(--border)]' : 'hover:bg-[var(--border)]'
+            'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
+            active ? 'bg-[var(--surface-9)]' : 'hover:bg-[var(--surface-9)]'
           )
 
           const iconClasses = clsx(
@@ -99,7 +99,7 @@ export function FooterNavigation() {
           )
 
           const labelClasses = clsx(
-            'truncate font-base text-[13px]',
+            'truncate font-medium text-[13px]',
             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/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
index b4d21e6bd20..36d763cd2fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workflow-list/components/workflow-item/workflow-item.tsx
@@ -236,8 +236,8 @@ export function WorkflowItem({ workflow, active, level, onWorkflowClick }: Workf
         data-item-id={workflow.id}
         className={clsx(
           'group flex h-[25px] items-center gap-[8px] rounded-[8px] px-[5.5px] text-[14px]',
-          active ? 'bg-[var(--border)]' : 'hover:bg-[var(--border)]',
-          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--border)]' : '',
+          active ? 'bg-[var(--surface-9)]' : 'hover:bg-[var(--surface-9)]',
+          isSelected && selectedWorkflows.size > 1 && !active ? 'bg-[var(--surface-9)]' : '',
           isDragging ? 'opacity-50' : ''
         )}
         draggable={!isEditing}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
index 06133e80015..fe16e229860 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar-new.tsx
@@ -491,7 +491,7 @@ export function SidebarNew() {
             aria-label='Workspace sidebar'
             onClick={handleSidebarClick}
           >
-            <div className='flex h-full flex-col border-r pt-[14px] dark:border-[var(--border)]'>
+            <div className='flex h-full flex-col border-[var(--border)] border-r pt-[14px]'>
               {/* Header */}
               <div className='flex-shrink-0 px-[14px]'>
                 <WorkspaceHeader
@@ -518,7 +518,7 @@ export function SidebarNew() {
 
               {/* Search */}
               <div
-                className='mx-[8px] mt-[12px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[8px] bg-[var(--surface-5)] px-[8px] py-[7px]'
+                className='mx-[8px] mt-[12px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[8px] border border-[var(--border-strong)] bg-transparent px-[8px] py-[7px] dark:border-0 dark:bg-[var(--surface-5)]'
                 onClick={() => setIsSearchModalOpen(true)}
               >
                 <div className='flex items-center gap-[6px]'>
diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
index 60a8d0d7660..cea7f905720 100644
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -38,20 +38,22 @@ const Content = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
 >(({ className, sideOffset = 6, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    collisionPadding={8}
-    avoidCollisions={true}
-    className={cn(
-      'z-[60] rounded-[3px] bg-black px-[7.5px] py-[6px] font-base text-white text-xs shadow-md dark:bg-white dark:text-black',
-      className
-    )}
-    {...props}
-  >
-    {props.children}
-    <TooltipPrimitive.Arrow className='fill-black dark:fill-white' />
-  </TooltipPrimitive.Content>
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      collisionPadding={8}
+      avoidCollisions={true}
+      className={cn(
+        'z-50 rounded-[3px] bg-black px-[7.5px] py-[6px] font-base text-white text-xs shadow-md dark:bg-white dark:text-black',
+        className
+      )}
+      {...props}
+    >
+      {props.children}
+      <TooltipPrimitive.Arrow className='fill-black dark:fill-white' />
+    </TooltipPrimitive.Content>
+  </TooltipPrimitive.Portal>
 ))
 Content.displayName = TooltipPrimitive.Content.displayName
 
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index 93b156c1df8..4aa4e6bb753 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -79,9 +79,9 @@ export default {
         },
       },
       fontWeight: {
-        base: '450',
-        medium: '480',
-        semibold: '550',
+        base: 'var(--font-weight-base)',
+        medium: 'var(--font-weight-medium)',
+        semibold: 'var(--font-weight-semibold)',
       },
       borderRadius: {
         lg: 'var(--radius)',

From 6507208a51b7a90d9116a4ec4c73b98565b996f8 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 3 Dec 2025 16:18:04 -0800
Subject: [PATCH 16/17] fix issues, run lint

---
 .../deploy-modal/components/api/api.tsx       |   2 +-
 .../deploy-modal/components/chat/chat.tsx     |   7 +-
 .../general/components/versions.tsx           |   2 +-
 .../components/general/general.tsx            |   2 +-
 .../components/template/template.tsx          |   2 +-
 .../components/deploy/components/index.ts     |   1 +
 .../custom-tool-modal/custom-tool-modal.tsx   |   2 +-
 .../components/custom-tools/custom-tools.tsx  |   2 +-
 .../components/general/general.tsx            |   2 +-
 .../formatted-input/formatted-input.tsx       |   2 +-
 .../cancel-subscription.tsx                   |  10 +-
 .../cost-breakdown/cost-breakdown.tsx         |  20 +-
 .../components/plan-card/plan-card.tsx        |  18 +-
 .../components/usage-limit/usage-limit.tsx    |  13 +-
 .../components/subscription/subscription.tsx  | 595 +++++++++---------
 .../member-invitation-card.tsx                |   4 +-
 .../no-organization-view.tsx                  |  22 +-
 .../remove-member-dialog.tsx                  |   2 +-
 .../components/team-members/team-members.tsx  |  18 +-
 .../team-seats-overview.tsx                   |  14 +-
 .../components/team-seats/team-seats.tsx      |  12 +-
 .../components/team-usage/team-usage.tsx      |   6 +-
 .../team-management/team-management.tsx       | 320 +++++-----
 .../template-profile/template-profile.tsx     |   2 +-
 .../invite-modal/components/email-tag.tsx     |   2 +-
 .../components/permission-selector.tsx        |   4 +-
 .../components/permissions-table.tsx          |   4 +-
 .../invite-modal/components/types.ts          |   2 +-
 .../components/invite-modal/invite-modal.tsx  |   4 +-
 .../emcn/components/s-modal/s-modal.tsx       |   2 +-
 .../emcn/components/switch/switch.tsx         |   2 +-
 apps/sim/hooks/queries/general-settings.ts    |   2 +-
 32 files changed, 549 insertions(+), 553 deletions(-)
 create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts

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 96225fb3b26..577e37ba703 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
@@ -14,7 +14,7 @@ import {
   Tooltip,
 } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
-import { getEnv, isTruthy } from '@/lib/env'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
 
 interface WorkflowDeploymentInfo {
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 0e8008eac44..889e2e4fe39 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
@@ -11,10 +11,11 @@ import {
   ModalHeader,
 } from '@/components/emcn/components/modal/modal'
 import { Alert, AlertDescription, Skeleton } from '@/components/ui'
-import { getEnv, isTruthy } from '@/lib/env'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
+import { generatePassword } from '@/lib/core/security/encryption'
+import { cn } from '@/lib/core/utils/cn'
+import { getEmailDomain } from '@/lib/core/utils/urls'
 import { createLogger } from '@/lib/logs/console/logger'
-import { getEmailDomain } from '@/lib/urls/utils'
-import { cn, generatePassword } from '@/lib/utils'
 import { OutputSelect } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select'
 import {
   type AuthType,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index cd18d2ff10e..28a98dd4cf9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -6,7 +6,7 @@ import { MoreVertical, Pencil, RotateCcw, SendToBack } from 'lucide-react'
 import { Button, Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
 import { Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpers'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 
 const logger = createLogger('Versions')
 
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 440370f6ac5..bce4b6f2791 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
@@ -11,7 +11,7 @@ import {
 } from '@/components/emcn/components/modal/modal'
 import { Skeleton } from '@/components/ui'
 import { createLogger } from '@/lib/logs/console/logger'
-import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/db-helpers'
+import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persistence/utils'
 import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
 import type { WorkflowState } from '@/stores/workflows/workflow/types'
 import { Versions } from './components'
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 035e3650c1e..4d24f6636c7 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
@@ -11,7 +11,7 @@ import {
   ModalHeader,
 } from '@/components/emcn/components/modal/modal'
 import { Skeleton, TagInput } from '@/components/ui'
-import { useSession } from '@/lib/auth-client'
+import { useSession } from '@/lib/auth/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import { WorkflowPreview } from '@/app/workspace/[workspaceId]/w/components/workflow-preview/workflow-preview'
 import {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts
new file mode 100644
index 00000000000..3399969b933
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/index.ts
@@ -0,0 +1 @@
+export { DeployModal } from './deploy-modal/deploy-modal'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/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 d6c3801854b..a62477dcc64 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
@@ -341,7 +341,7 @@ try {
       return false
     }
   }
-  
+
   /** Extracts parameters from JSON schema for autocomplete */
   const schemaParameters = useMemo(() => {
     try {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
index 5fec6825c79..96d56b2bda1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/custom-tools/custom-tools.tsx
@@ -12,8 +12,8 @@ import {
   ModalHeader,
 } from '@/components/emcn/components/modal/modal'
 import { Input, Skeleton } from '@/components/ui'
+import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
-import { cn } from '@/lib/utils'
 import { CustomToolModal } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal'
 import { useCustomTools, useDeleteCustomTool } from '@/hooks/queries/custom-tools'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
index 965dbf0b069..b8ba9ab9328 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx
@@ -16,8 +16,8 @@ import { Input, Skeleton } from '@/components/ui'
 import { signOut, useSession } from '@/lib/auth/auth-client'
 import { useBrandConfig } from '@/lib/branding/branding'
 import { getEnv, isTruthy } from '@/lib/core/config/env'
-import { createLogger } from '@/lib/logs/console/logger'
 import { getBaseUrl } from '@/lib/core/utils/urls'
+import { createLogger } from '@/lib/logs/console/logger'
 import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
 import { useGeneralSettings, useUpdateGeneralSetting } from '@/hooks/queries/general-settings'
 import { useUpdateUserProfile, useUserProfile } from '@/hooks/queries/user-profile'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
index b059a584207..8b52447b296 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/mcp/components/formatted-input/formatted-input.tsx
@@ -1,5 +1,5 @@
 import { Input } from '@/components/emcn'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/core/utils/cn'
 import { EnvVarDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/env-var-dropdown'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import type { EnvVarDropdownConfig } from '../types'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
index 2e014e6b5fd..04015ada098 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cancel-subscription/cancel-subscription.tsx
@@ -211,11 +211,11 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
     <>
       <div className='flex items-center justify-between'>
         <div>
-          <span className='font-medium text-sm'>
+          <span className='font-medium text-[13px]'>
             {isCancelAtPeriodEnd ? 'Restore Subscription' : 'Manage Subscription'}
           </span>
           {isCancelAtPeriodEnd && (
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               You'll keep access until {formatDate(periodEndDate)}
             </p>
           )}
@@ -226,7 +226,7 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
           disabled={isLoading}
           className={cn(
             'h-8 rounded-[8px] font-medium text-xs',
-            error && 'border-red-500 text-red-500 dark:border-red-500 dark:text-red-500'
+            error && 'border-[var(--text-error)] text-[var(--text-error)]'
           )}
         >
           {error ? 'Error' : isCancelAtPeriodEnd ? 'Restore' : 'Manage'}
@@ -255,8 +255,8 @@ export function CancelSubscription({ subscription, subscriptionData }: CancelSub
 
           {!isCancelAtPeriodEnd && (
             <div className='py-2'>
-              <div className='rounded-[8px] bg-muted/50 p-3 text-sm'>
-                <ul className='space-y-1 text-muted-foreground text-xs'>
+              <div className='rounded-[8px] bg-[var(--surface-3)] p-3 text-sm'>
+                <ul className='space-y-1 text-[var(--text-muted)] text-xs'>
                   <li>• Keep all features until {formatDate(periodEndDate)}</li>
                   <li>• No more charges</li>
                   <li>• Data preserved</li>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
index 1c82da3b8f6..f53cbcc5710 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/cost-breakdown/cost-breakdown.tsx
@@ -17,28 +17,30 @@ export function CostBreakdown({ copilotCost, totalCost }: CostBreakdownProps) {
   const workflowExecutionCost = totalCost - copilotCost
 
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         <div className='flex items-center justify-between'>
-          <span className='font-medium text-muted-foreground text-sm'>Cost Breakdown</span>
+          <span className='font-medium text-[var(--text-muted)] text-sm'>Cost Breakdown</span>
         </div>
 
         <div className='space-y-1.5'>
           <div className='flex items-center justify-between'>
-            <span className='text-muted-foreground text-xs'>Workflow Executions:</span>
-            <span className='text-foreground text-xs tabular-nums'>
+            <span className='text-[var(--text-muted)] text-xs'>Workflow Executions:</span>
+            <span className='text-[var(--text-primary)] text-xs tabular-nums'>
               {formatCost(workflowExecutionCost)}
             </span>
           </div>
 
           <div className='flex items-center justify-between'>
-            <span className='text-muted-foreground text-xs'>Copilot:</span>
-            <span className='text-foreground text-xs tabular-nums'>{formatCost(copilotCost)}</span>
+            <span className='text-[var(--text-muted)] text-xs'>Copilot:</span>
+            <span className='text-[var(--text-primary)] text-xs tabular-nums'>
+              {formatCost(copilotCost)}
+            </span>
           </div>
 
-          <div className='flex items-center justify-between border-border border-t pt-1.5'>
-            <span className='font-medium text-foreground text-xs'>Total:</span>
-            <span className='font-medium text-foreground text-xs tabular-nums'>
+          <div className='flex items-center justify-between border-[var(--border)] border-t pt-1.5'>
+            <span className='font-medium text-[var(--text-primary)] text-xs'>Total:</span>
+            <span className='font-medium text-[var(--text-primary)] text-xs tabular-nums'>
               {formatCost(totalCost)}
             </span>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
index 244c5123beb..1e5d1b64b75 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/plan-card/plan-card.tsx
@@ -2,7 +2,7 @@
 
 import type { ReactNode } from 'react'
 import type { LucideIcon } from 'lucide-react'
-import { Button } from '@/components/ui'
+import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 
 export interface PlanFeature {
@@ -47,7 +47,7 @@ export function PlanCard({
         <>
           <span className='font-semibold text-xl'>{price}</span>
           {priceSubtext && (
-            <span className='ml-1 text-muted-foreground text-xs'>{priceSubtext}</span>
+            <span className='ml-1 text-[var(--text-muted)] text-xs'>{priceSubtext}</span>
           )}
         </>
       )
@@ -61,10 +61,10 @@ export function PlanCard({
         <div className='mt-3 flex flex-wrap items-center gap-4'>
           {features.map((feature, index) => (
             <div key={`${feature.text}-${index}`} className='flex items-center gap-2 text-xs'>
-              <feature.icon className='h-3 w-3 flex-shrink-0 text-muted-foreground' />
-              <span className='text-muted-foreground'>{feature.text}</span>
+              <feature.icon className='h-3 w-3 flex-shrink-0 text-[var(--text-muted)]' />
+              <span className='text-[var(--text-muted)]'>{feature.text}</span>
               {index < features.length - 1 && (
-                <div className='ml-4 h-4 w-px bg-border' aria-hidden='true' />
+                <div className='ml-4 h-4 w-px bg-[var(--border)]' aria-hidden='true' />
               )}
             </div>
           ))}
@@ -77,10 +77,10 @@ export function PlanCard({
         {features.map((feature, index) => (
           <li key={`${feature.text}-${index}`} className='flex items-start gap-2 text-xs'>
             <feature.icon
-              className='mt-0.5 h-3 w-3 flex-shrink-0 text-muted-foreground'
+              className='mt-0.5 h-3 w-3 flex-shrink-0 text-[var(--text-muted)]'
               aria-hidden='true'
             />
-            <span className='text-muted-foreground'>{feature.text}</span>
+            <span className='text-[var(--text-muted)]'>{feature.text}</span>
           </li>
         ))}
       </ul>
@@ -90,7 +90,7 @@ export function PlanCard({
   return (
     <article
       className={cn(
-        'relative flex rounded-[8px] border p-4 transition-colors hover:border-muted-foreground/20',
+        'relative flex rounded-[8px] border p-4 transition-colors hover:border-[var(--border-hover)]',
         isHorizontal ? 'flex-row items-center justify-between' : 'flex-col',
         className
       )}
@@ -109,7 +109,7 @@ export function PlanCard({
           className={cn(
             'h-9 rounded-[8px] text-xs',
             isHorizontal ? 'px-4' : 'w-full',
-            isError && 'border-red-500 text-red-500 dark:border-red-500 dark:text-red-500'
+            isError && 'border-[var(--text-error)] text-[var(--text-error)]'
           )}
           variant='outline'
           aria-label={`${buttonText} ${name} plan`}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
index 134624d4a29..0ce65973e7e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/components/usage-limit/usage-limit.tsx
@@ -2,7 +2,7 @@
 
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
 import { Check, Pencil, X } from 'lucide-react'
-import { Button } from '@/components/ui/button'
+import { Button } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useUpdateOrganizationUsageLimit } from '@/hooks/queries/organization'
@@ -173,7 +173,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
       <div className='flex items-center'>
         {isEditing ? (
           <>
-            <span className='text-muted-foreground text-xs tabular-nums'>$</span>
+            <span className='text-[var(--text-muted)] text-xs tabular-nums'>$</span>
             <input
               ref={inputRef}
               type='number'
@@ -191,7 +191,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
                 'border-0 bg-transparent p-0 text-xs tabular-nums',
                 'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
-                hasError && 'text-red-500'
+                hasError && 'text-[var(--text-error)]'
               )}
               min={minimumLimit}
               step='1'
@@ -204,19 +204,18 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
             />
           </>
         ) : (
-          <span className='text-muted-foreground text-xs tabular-nums'>
+          <span className='text-[var(--text-muted)] text-xs tabular-nums'>
             ${pendingLimit !== null ? pendingLimit : currentLimit}
           </span>
         )}
         {canEdit && (
           <Button
             variant='ghost'
-            size='icon'
             className={cn(
               'ml-1 h-4 w-4 p-0 transition-colors hover:bg-transparent',
               hasError
-                ? 'text-red-500 hover:text-red-600'
-                : 'text-muted-foreground hover:text-foreground'
+                ? 'text-[var(--text-error)] hover:text-[var(--text-error)]'
+                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
             )}
             onClick={isEditing ? handleSubmit : handleStartEdit}
             disabled={isUpdating}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
index bee5da723b0..247603144de 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/subscription/subscription.tsx
@@ -1,7 +1,8 @@
 'use client'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useParams } from 'next/navigation'
-import { Skeleton, Switch } from '@/components/ui'
+import { Switch } from '@/components/emcn'
+import { Skeleton } from '@/components/ui'
 import {
   Select,
   SelectContent,
@@ -64,90 +65,88 @@ interface SubscriptionProps {
  */
 function SubscriptionSkeleton() {
   return (
-    <div>
-      <div className='flex flex-col gap-2'>
-        {/* Current Plan & Usage Header */}
-        <div className='mb-2'>
-          <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
-            <div className='space-y-2'>
-              <div className='flex items-center justify-between'>
-                <div className='flex items-center gap-2'>
-                  <Skeleton className='h-5 w-16' />
-                  <Skeleton className='h-[1.125rem] w-14 rounded-[6px]' />
-                </div>
-                <div className='flex items-center gap-1'>
-                  <Skeleton className='h-4 w-12' />
-                  <span className='text-muted-foreground text-xs'>/</span>
-                  <Skeleton className='h-4 w-12' />
-                </div>
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Current Plan & Usage Header */}
+      <div>
+        <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
+          <div className='space-y-[8px]'>
+            <div className='flex items-center justify-between'>
+              <div className='flex items-center gap-[8px]'>
+                <Skeleton className='h-5 w-16' />
+                <Skeleton className='h-[1.125rem] w-14 rounded-[6px]' />
+              </div>
+              <div className='flex items-center gap-[4px]'>
+                <Skeleton className='h-4 w-12' />
+                <span className='text-[var(--text-muted)] text-xs'>/</span>
+                <Skeleton className='h-4 w-12' />
               </div>
-              <Skeleton className='h-2 w-full rounded' />
             </div>
+            <Skeleton className='h-2 w-full rounded' />
           </div>
         </div>
+      </div>
 
-        {/* Plan Cards */}
-        <div className='flex flex-col gap-2'>
-          {/* Pro and Team Cards Grid */}
-          <div className='grid grid-cols-2 gap-2'>
-            {/* Pro Plan Card */}
-            <div className='flex flex-col rounded-[8px] border p-4'>
-              <div className='mb-4'>
-                <Skeleton className='mb-2 h-5 w-10' />
-                <div className='flex items-baseline gap-1'>
-                  <Skeleton className='h-6 w-12' />
-                  <Skeleton className='h-3 w-14' />
-                </div>
+      {/* Plan Cards */}
+      <div className='flex flex-col gap-[8px]'>
+        {/* Pro and Team Cards Grid */}
+        <div className='grid grid-cols-2 gap-[8px]'>
+          {/* Pro Plan Card */}
+          <div className='flex flex-col rounded-[8px] border p-4'>
+            <div className='mb-[16px]'>
+              <Skeleton className='mb-[8px] h-5 w-10' />
+              <div className='flex items-baseline gap-[4px]'>
+                <Skeleton className='h-6 w-12' />
+                <Skeleton className='h-3 w-14' />
               </div>
-              <div className='mb-4 flex-1 space-y-2'>
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className='flex items-start gap-2'>
-                    <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-24' />
-                  </div>
-                ))}
-              </div>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
             </div>
-
-            {/* Team Plan Card */}
-            <div className='flex flex-col rounded-[8px] border p-4'>
-              <div className='mb-4'>
-                <Skeleton className='mb-2 h-5 w-12' />
-                <div className='flex items-baseline gap-1'>
-                  <Skeleton className='h-6 w-12' />
-                  <Skeleton className='h-3 w-14' />
+            <div 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>
-              <div className='mb-4 flex-1 space-y-2'>
-                {[...Array(4)].map((_, i) => (
-                  <div key={i} className='flex items-start gap-2'>
-                    <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-28' />
-                  </div>
-                ))}
-              </div>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
+              ))}
             </div>
+            <Skeleton className='h-9 w-full rounded-[8px]' />
           </div>
 
-          {/* Enterprise Card - Horizontal Layout */}
-          <div className='flex items-center justify-between rounded-[8px] border p-4'>
-            <div className='flex-1'>
-              <Skeleton className='mb-2 h-5 w-24' />
-              <Skeleton className='mb-3 h-3 w-80' />
-              <div className='flex items-center gap-4'>
-                {[...Array(3)].map((_, i) => (
-                  <div key={i} className='flex items-center gap-2'>
-                    <Skeleton className='h-3 w-3 rounded-full' />
-                    <Skeleton className='h-3 w-20' />
-                    {i < 2 && <div className='ml-2 h-4 w-px bg-border' />}
-                  </div>
-                ))}
+          {/* Team Plan Card */}
+          <div className='flex flex-col rounded-[8px] border p-4'>
+            <div className='mb-[16px]'>
+              <Skeleton className='mb-[8px] h-5 w-12' />
+              <div className='flex items-baseline gap-[4px]'>
+                <Skeleton className='h-6 w-12' />
+                <Skeleton className='h-3 w-14' />
               </div>
             </div>
-            <Skeleton className='h-9 w-20 rounded-[8px]' />
+            <div className='mb-[16px] flex-1 space-y-[8px]'>
+              {[...Array(4)].map((_, i) => (
+                <div key={i} className='flex items-start gap-[8px]'>
+                  <Skeleton className='mt-0.5 h-3 w-3 rounded-full' />
+                  <Skeleton className='h-3 w-28' />
+                </div>
+              ))}
+            </div>
+            <Skeleton className='h-9 w-full rounded-[8px]' />
+          </div>
+        </div>
+
+        {/* Enterprise Card - Horizontal Layout */}
+        <div className='flex items-center justify-between rounded-[8px] border p-4'>
+          <div className='flex-1'>
+            <Skeleton className='mb-[8px] h-5 w-24' />
+            <Skeleton className='mb-[12px] h-3 w-80' />
+            <div className='flex items-center gap-[16px]'>
+              {[...Array(3)].map((_, i) => (
+                <div key={i} className='flex items-center gap-[8px]'>
+                  <Skeleton className='h-3 w-3 rounded-full' />
+                  <Skeleton className='h-3 w-20' />
+                  {i < 2 && <div className='ml-[8px] h-4 w-px bg-[var(--border)]' />}
+                </div>
+              ))}
+            </div>
           </div>
+          <Skeleton className='h-9 w-20 rounded-[8px]' />
         </div>
       </div>
     </div>
@@ -363,114 +362,113 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
   }
 
   return (
-    <div>
-      <div className='flex flex-col gap-2'>
-        {/* Current Plan & Usage Overview */}
-        <div className='mb-2'>
-          <UsageHeader
-            title={formatPlanName(subscription.plan)}
-            gradientTitle={!subscription.isFree}
-            showBadge={showBadge}
-            badgeText={badgeText}
-            onBadgeClick={handleBadgeClick}
-            seatsText={
-              permissions.canManageTeam || subscription.isEnterprise
-                ? `${organizationBillingData?.totalSeats || subscription.seats || 1} seats`
-                : undefined
-            }
-            current={
-              subscription.isEnterprise || subscription.isTeam
-                ? (organizationBillingData?.totalCurrentUsage ?? usage.current)
-                : usage.current
-            }
-            limit={
-              subscription.isEnterprise || subscription.isTeam
-                ? organizationBillingData?.totalUsageLimit ||
-                  organizationBillingData?.minimumBillingAmount ||
-                  usage.limit
-                : !subscription.isFree &&
-                    (permissions.canEditUsageLimit || permissions.showTeamMemberView)
-                  ? usage.current // placeholder; rightContent will render UsageLimit
-                  : usage.limit
-            }
-            isBlocked={Boolean(subscriptionData?.data?.billingBlocked)}
-            status={billingStatus}
-            percentUsed={
-              subscription.isEnterprise || subscription.isTeam
-                ? organizationBillingData?.totalUsageLimit &&
-                  organizationBillingData.totalUsageLimit > 0 &&
-                  organizationBillingData.totalCurrentUsage !== undefined
-                  ? (organizationBillingData.totalCurrentUsage /
-                      organizationBillingData.totalUsageLimit) *
-                    100
-                  : usage.percentUsed
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Current Plan & Usage Overview */}
+      <div>
+        <UsageHeader
+          title={formatPlanName(subscription.plan)}
+          gradientTitle={!subscription.isFree}
+          showBadge={showBadge}
+          badgeText={badgeText}
+          onBadgeClick={handleBadgeClick}
+          seatsText={
+            permissions.canManageTeam || subscription.isEnterprise
+              ? `${organizationBillingData?.totalSeats || subscription.seats || 1} seats`
+              : undefined
+          }
+          current={
+            subscription.isEnterprise || subscription.isTeam
+              ? (organizationBillingData?.totalCurrentUsage ?? usage.current)
+              : usage.current
+          }
+          limit={
+            subscription.isEnterprise || subscription.isTeam
+              ? organizationBillingData?.totalUsageLimit ||
+                organizationBillingData?.minimumBillingAmount ||
+                usage.limit
+              : !subscription.isFree &&
+                  (permissions.canEditUsageLimit || permissions.showTeamMemberView)
+                ? usage.current // placeholder; rightContent will render UsageLimit
+                : usage.limit
+          }
+          isBlocked={Boolean(subscriptionData?.data?.billingBlocked)}
+          status={billingStatus}
+          percentUsed={
+            subscription.isEnterprise || subscription.isTeam
+              ? organizationBillingData?.totalUsageLimit &&
+                organizationBillingData.totalUsageLimit > 0 &&
+                organizationBillingData.totalCurrentUsage !== undefined
+                ? (organizationBillingData.totalCurrentUsage /
+                    organizationBillingData.totalUsageLimit) *
+                  100
                 : usage.percentUsed
+              : usage.percentUsed
+          }
+          onResolvePayment={async () => {
+            try {
+              const res = await fetch('/api/billing/portal', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                  context:
+                    subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user',
+                  organizationId: activeOrgId,
+                  returnUrl: `${getBaseUrl()}/workspace?billing=updated`,
+                }),
+              })
+              const data = await res.json()
+              if (!res.ok || !data?.url)
+                throw new Error(data?.error || 'Failed to start billing portal')
+              window.location.href = data.url
+            } catch (e) {
+              alert(e instanceof Error ? e.message : 'Failed to open billing portal')
             }
-            onResolvePayment={async () => {
-              try {
-                const res = await fetch('/api/billing/portal', {
-                  method: 'POST',
-                  headers: { 'Content-Type': 'application/json' },
-                  body: JSON.stringify({
-                    context:
-                      subscription.isTeam || subscription.isEnterprise ? 'organization' : 'user',
-                    organizationId: activeOrgId,
-                    returnUrl: `${getBaseUrl()}/workspace?billing=updated`,
-                  }),
-                })
-                const data = await res.json()
-                if (!res.ok || !data?.url)
-                  throw new Error(data?.error || 'Failed to start billing portal')
-                window.location.href = data.url
-              } catch (e) {
-                alert(e instanceof Error ? e.message : 'Failed to open billing portal')
-              }
-            }}
-            rightContent={
-              !subscription.isFree &&
-              (permissions.canEditUsageLimit || permissions.showTeamMemberView) ? (
-                <UsageLimit
-                  ref={usageLimitRef}
-                  currentLimit={
-                    subscription.isTeam && isTeamAdmin
-                      ? organizationBillingData?.totalUsageLimit || usage.limit
-                      : usageLimitData.currentLimit || usage.limit
-                  }
-                  currentUsage={usage.current}
-                  canEdit={permissions.canEditUsageLimit}
-                  minimumLimit={
-                    subscription.isTeam && isTeamAdmin
-                      ? organizationBillingData?.minimumBillingAmount ||
-                        (subscription.isPro ? 20 : 40)
-                      : usageLimitData.minimumLimit || (subscription.isPro ? 20 : 40)
-                  }
-                  context={subscription.isTeam && isTeamAdmin ? 'organization' : 'user'}
-                  organizationId={subscription.isTeam && isTeamAdmin ? activeOrgId : undefined}
-                  onLimitUpdated={() => {
-                    logger.info('Usage limit updated')
-                  }}
-                />
-              ) : undefined
-            }
-            progressValue={Math.min(usage.percentUsed, 100)}
-          />
-        </div>
+          }}
+          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-muted-foreground text-xs'>
-              Contact enterprise for support usage limit changes
-            </p>
-          </div>
-        )}
+      {/* Enterprise Usage Limit Notice */}
+      {subscription.isEnterprise && (
+        <div className='text-center'>
+          <p className='text-[var(--text-muted)] text-xs'>
+            Contact enterprise for support usage limit changes
+          </p>
+        </div>
+      )}
 
-        {/* Cost Breakdown */}
-        {/* TODO: Re-enable CostBreakdown component in the next billing period
+      {/* Cost Breakdown */}
+      {/* TODO: Re-enable CostBreakdown component in the next billing period
             once sufficient copilot cost data has been collected for accurate display.
             Currently hidden to avoid confusion with initial zero values.
         */}
-        {/*
+      {/*
         {subscriptionData?.usage && typeof subscriptionData.usage.copilotCost === 'number' && (
           <div className='mb-2'>
             <CostBreakdown
@@ -481,135 +479,134 @@ export function Subscription({ onOpenChange }: SubscriptionProps) {
         )}
         */}
 
-        {/* Team Member Notice */}
-        {permissions.showTeamMemberView && (
-          <div className='text-center'>
-            <p className='text-muted-foreground text-xs'>
-              Contact your team admin to increase limits
-            </p>
-          </div>
-        )}
-
-        {/* Upgrade Plans */}
-        {permissions.showUpgradePlans && (
-          <div className='flex flex-col gap-2'>
-            {/* Render plans based on what should be visible */}
-            {(() => {
-              const totalPlans = visiblePlans.length
-              const hasEnterprise = visiblePlans.includes('enterprise')
-
-              // Special handling for Pro users - show team and enterprise side by side
-              if (subscription.isPro && totalPlans === 2) {
-                return (
-                  <div className='grid grid-cols-2 gap-2'>
-                    {visiblePlans.map((plan) => renderPlanCard(plan, 'vertical'))}
-                  </div>
-                )
-              }
-
-              // Default behavior for other users
-              const otherPlans = visiblePlans.filter((p) => p !== 'enterprise')
-
-              // Layout logic:
-              // Free users (3 plans): Pro and Team vertical in grid, Enterprise horizontal below
-              // Team admins (1 plan): Enterprise horizontal
-              const enterpriseLayout =
-                totalPlans === 1 || totalPlans === 3 ? 'horizontal' : 'vertical'
-
+      {/* Team Member Notice */}
+      {permissions.showTeamMemberView && (
+        <div className='text-center'>
+          <p className='text-[var(--text-muted)] text-xs'>
+            Contact your team admin to increase limits
+          </p>
+        </div>
+      )}
+
+      {/* Upgrade Plans */}
+      {permissions.showUpgradePlans && (
+        <div className='flex flex-col gap-[8px]'>
+          {/* Render plans based on what should be visible */}
+          {(() => {
+            const totalPlans = visiblePlans.length
+            const hasEnterprise = visiblePlans.includes('enterprise')
+
+            // Special handling for Pro users - show team and enterprise side by side
+            if (subscription.isPro && totalPlans === 2) {
               return (
-                <>
-                  {otherPlans.length > 0 && (
-                    <div
-                      className={cn(
-                        'grid gap-2',
-                        otherPlans.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
-                      )}
-                    >
-                      {otherPlans.map((plan) => renderPlanCard(plan, 'vertical'))}
-                    </div>
-                  )}
-
-                  {/* Enterprise plan */}
-                  {hasEnterprise && renderPlanCard('enterprise', enterpriseLayout)}
-                </>
+                <div className='grid grid-cols-2 gap-[8px]'>
+                  {visiblePlans.map((plan) => renderPlanCard(plan, 'vertical'))}
+                </div>
               )
-            })()}
-          </div>
-        )}
+            }
 
-        {/* Next Billing Date */}
-        {subscription.isPaid && subscriptionData?.data?.periodEnd && (
-          <div className='mt-4 flex items-center justify-between'>
-            <span className='font-medium text-sm'>Next Billing Date</span>
-            <span className='text-muted-foreground text-sm'>
-              {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
-            </span>
-          </div>
-        )}
+            // Default behavior for other users
+            const otherPlans = visiblePlans.filter((p) => p !== 'enterprise')
+
+            // 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'
+
+            return (
+              <>
+                {otherPlans.length > 0 && (
+                  <div
+                    className={cn(
+                      'grid gap-[8px]',
+                      otherPlans.length === 1 ? 'grid-cols-1' : 'grid-cols-2'
+                    )}
+                  >
+                    {otherPlans.map((plan) => renderPlanCard(plan, 'vertical'))}
+                  </div>
+                )}
 
-        {/* Billing usage notifications toggle */}
-        {subscription.isPaid && <BillingUsageNotificationsToggle />}
-
-        {/* Cancel Subscription */}
-        {permissions.canCancelSubscription && (
-          <div className='mt-2'>
-            <CancelSubscription
-              subscription={{
-                plan: subscription.plan,
-                status: subscription.status,
-                isPaid: subscription.isPaid,
-              }}
-              subscriptionData={{
-                periodEnd: subscriptionData?.data?.periodEnd || null,
-                cancelAtPeriodEnd: subscriptionData?.data?.cancelAtPeriodEnd,
+                {/* Enterprise plan */}
+                {hasEnterprise && renderPlanCard('enterprise', enterpriseLayout)}
+              </>
+            )
+          })()}
+        </div>
+      )}
+
+      {/* Next Billing Date */}
+      {subscription.isPaid && subscriptionData?.data?.periodEnd && (
+        <div className='mt-[16px] flex items-center justify-between'>
+          <span className='font-medium text-[13px]'>Next Billing Date</span>
+          <span className='text-[13px] text-[var(--text-muted)]'>
+            {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
+          </span>
+        </div>
+      )}
+
+      {/* Billing usage notifications toggle */}
+      {subscription.isPaid && <BillingUsageNotificationsToggle />}
+
+      {/* Cancel Subscription */}
+      {permissions.canCancelSubscription && (
+        <div className='mt-[8px]'>
+          <CancelSubscription
+            subscription={{
+              plan: subscription.plan,
+              status: subscription.status,
+              isPaid: subscription.isPaid,
+            }}
+            subscriptionData={{
+              periodEnd: subscriptionData?.data?.periodEnd || null,
+              cancelAtPeriodEnd: subscriptionData?.data?.cancelAtPeriodEnd,
+            }}
+          />
+        </div>
+      )}
+
+      {/* Workspace API Billing Settings */}
+      {canManageWorkspaceKeys && (
+        <div className='mt-[24px] flex items-center justify-between'>
+          <span className='font-medium text-[13px]'>Billed Account for Workspace</span>
+          {isWorkspaceLoading ? (
+            <Skeleton className='h-8 w-[200px] rounded-[6px]' />
+          ) : workspaceAdmins.length === 0 ? (
+            <div className='rounded-[6px] border border-dashed px-3 py-1.5 text-[var(--text-muted)] text-xs'>
+              No admin members available
+            </div>
+          ) : (
+            <Select
+              value={billedAccountUserId ?? ''}
+              onValueChange={async (value) => {
+                if (value === billedAccountUserId) return
+                try {
+                  await updateWorkspaceSettings({ billedAccountUserId: value })
+                } catch (error) {
+                  // Error is already logged in updateWorkspaceSettings
+                }
               }}
-            />
-          </div>
-        )}
-
-        {/* Workspace API Billing Settings */}
-        {canManageWorkspaceKeys && (
-          <div className='mt-6 flex items-center justify-between'>
-            <span className='font-medium text-sm'>Billed Account for Workspace</span>
-            {isWorkspaceLoading ? (
-              <Skeleton className='h-8 w-[200px] rounded-md' />
-            ) : workspaceAdmins.length === 0 ? (
-              <div className='rounded-md border border-dashed px-3 py-1.5 text-muted-foreground text-xs'>
-                No admin members available
-              </div>
-            ) : (
-              <Select
-                value={billedAccountUserId ?? ''}
-                onValueChange={async (value) => {
-                  if (value === billedAccountUserId) return
-                  try {
-                    await updateWorkspaceSettings({ billedAccountUserId: value })
-                  } catch (error) {
-                    // Error is already logged in updateWorkspaceSettings
-                  }
-                }}
-                disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
-              >
-                <SelectTrigger className='h-8 w-[200px] justify-between text-left text-xs'>
-                  <SelectValue placeholder='Select admin' />
-                </SelectTrigger>
-                <SelectContent align='start' className='z-[10000050]'>
-                  <SelectGroup>
-                    <SelectLabel className='px-3 py-1 text-[11px] text-muted-foreground uppercase'>
-                      Workspace admins
-                    </SelectLabel>
-                    {workspaceAdmins.map((admin: any) => (
-                      <SelectItem key={admin.userId} value={admin.userId} className='py-1 text-xs'>
-                        {admin.email}
-                      </SelectItem>
-                    ))}
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-            )}
-          </div>
-        )}
-      </div>
+              disabled={!canManageWorkspaceKeys || updateWorkspaceMutation.isPending}
+            >
+              <SelectTrigger className='h-8 w-[200px] justify-between text-left text-xs'>
+                <SelectValue placeholder='Select admin' />
+              </SelectTrigger>
+              <SelectContent align='start' className='z-[10000050]'>
+                <SelectGroup>
+                  <SelectLabel className='px-3 py-1 text-[11px] text-[var(--text-muted)] uppercase'>
+                    Workspace admins
+                  </SelectLabel>
+                  {workspaceAdmins.map((admin: any) => (
+                    <SelectItem key={admin.userId} value={admin.userId} className='py-1 text-xs'>
+                      {admin.email}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          )}
+        </div>
+      )}
     </div>
   )
 }
@@ -620,10 +617,10 @@ function BillingUsageNotificationsToggle() {
   const isLoading = updateSetting.isPending
 
   return (
-    <div className='mt-4 flex items-center justify-between'>
+    <div className='mt-[16px] flex items-center justify-between'>
       <div className='flex flex-col'>
-        <span className='font-medium text-sm'>Usage notifications</span>
-        <span className='text-muted-foreground text-xs'>Email me when I reach 80% usage</span>
+        <span className='font-medium text-[13px]'>Usage notifications</span>
+        <span className='text-[var(--text-muted)] text-xs'>Email me when I reach 80% usage</span>
       </div>
       <Switch
         checked={!!enabled}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
index c577713a3ce..4285142fe3b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/member-invitation-card/member-invitation-card.tsx
@@ -132,8 +132,8 @@ export function MemberInvitationCard({
       <div className='space-y-3'>
         {/* Header */}
         <div>
-          <h4 className='font-medium text-sm'>Invite Team Members</h4>
-          <p className='text-muted-foreground text-xs'>
+          <h4 className='font-medium text-[13px]'>Invite Team Members</h4>
+          <p className='text-[var(--text-muted)] text-xs'>
             Add new members to your team and optionally give them access to specific workspaces
           </p>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
index b578a75b4c9..40e1754c8c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -1,6 +1,8 @@
 import { RefreshCw } from 'lucide-react'
 import {
   Button,
+  Input,
+  Label,
   Modal,
   ModalContent,
   ModalDescription,
@@ -8,8 +10,6 @@ import {
   ModalHeader,
   ModalTitle,
 } from '@/components/emcn'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
 
 interface NoOrganizationViewProps {
   hasTeamPlan: boolean
@@ -46,8 +46,8 @@ export function NoOrganizationView({
         <div className='flex flex-col gap-6'>
           {/* Header - matching settings page style */}
           <div>
-            <h4 className='font-medium text-sm'>Create Your Team Workspace</h4>
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <h4 className='font-medium text-[13px]'>Create Your Team Workspace</h4>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
               workspace to start collaborating with your team.
             </p>
@@ -56,7 +56,7 @@ export function NoOrganizationView({
           {/* Form fields - clean layout without card */}
           <div className='space-y-4'>
             <div>
-              <Label htmlFor='orgName' className='font-medium text-sm'>
+              <Label htmlFor='orgName' className='font-medium text-[13px]'>
                 Team Name
               </Label>
               <Input
@@ -69,11 +69,11 @@ export function NoOrganizationView({
             </div>
 
             <div>
-              <Label htmlFor='orgSlug' className='font-medium text-sm'>
+              <Label htmlFor='orgSlug' className='font-medium text-[13px]'>
                 Team URL
               </Label>
               <div className='mt-1 flex items-center'>
-                <div className='rounded-l-[8px] border border-r-0 bg-muted px-3 py-2 text-muted-foreground text-sm'>
+                <div className='rounded-l-[8px] border border-r-0 bg-[var(--surface-3)] px-3 py-2 text-[var(--text-muted)] text-sm'>
                   sim.ai/team/
                 </div>
                 <Input
@@ -117,7 +117,7 @@ export function NoOrganizationView({
 
             <div className='space-y-4'>
               <div>
-                <Label htmlFor='org-name' className='font-medium text-sm'>
+                <Label htmlFor='org-name' className='font-medium text-[13px]'>
                   Organization Name
                 </Label>
                 <Input
@@ -131,7 +131,7 @@ export function NoOrganizationView({
               </div>
 
               <div>
-                <Label htmlFor='org-slug' className='font-medium text-sm'>
+                <Label htmlFor='org-slug' className='font-medium text-[13px]'>
                   Organization Slug
                 </Label>
                 <Input
@@ -178,8 +178,8 @@ export function NoOrganizationView({
   return (
     <div className='space-y-4 p-6'>
       <div className='space-y-6'>
-        <h3 className='font-medium text-sm'>No Team Workspace</h3>
-        <p className='text-muted-foreground text-sm'>
+        <h3 className='font-medium text-[13px]'>No Team Workspace</h3>
+        <p className='text-[var(--text-muted)] text-sm'>
           You don't have a team workspace yet. To collaborate with others, first upgrade to a team
           or enterprise plan.
         </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index a68e6fc68dd..9d18438ca8c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -58,7 +58,7 @@ export function RemoveMemberDialog({
                 Also reduce seat count in my subscription
               </label>
             </div>
-            <p className='mt-1 text-muted-foreground text-xs'>
+            <p className='mt-1 text-[var(--text-muted)] text-xs'>
               If selected, your team seat count will be reduced by 1, lowering your monthly billing.
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
index 69d08e37053..da8d69355ee 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-members/team-members.tsx
@@ -112,7 +112,7 @@ export function TeamMembers({
   }
 
   if (teamItems.length === 0) {
-    return <div className='text-center text-muted-foreground text-sm'>No team members yet.</div>
+    return <div className='text-center text-[var(--text-muted)] text-sm'>No team members yet.</div>
   }
 
   // Check if current user can leave (is a member but not owner)
@@ -147,7 +147,7 @@ export function TeamMembers({
     <div className='flex flex-col gap-4'>
       {/* Header - simple like account page */}
       <div>
-        <h4 className='font-medium text-sm'>Team Members</h4>
+        <h4 className='font-medium text-[13px]'>Team Members</h4>
       </div>
 
       {/* Members list - clean like account page */}
@@ -173,29 +173,29 @@ export function TeamMembers({
                       className={`inline-flex h-[1.125rem] items-center rounded-[6px] px-2 py-0 font-medium text-xs ${
                         item.role === 'owner'
                           ? 'gradient-text border-gradient-primary/20 bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
-                          : 'bg-primary/10 text-muted-foreground'
+                          : 'bg-[var(--surface-3)] text-[var(--text-muted)]'
                       } `}
                     >
                       {item.role.charAt(0).toUpperCase() + item.role.slice(1)}
                     </span>
                   )}
                   {item.type === 'invitation' && (
-                    <span className='inline-flex h-[1.125rem] items-center rounded-[6px] bg-muted px-2 py-0 font-medium text-muted-foreground text-xs'>
+                    <span className='inline-flex h-[1.125rem] items-center rounded-[6px] bg-[var(--surface-3)] px-2 py-0 font-medium text-[var(--text-muted)] text-xs'>
                       Pending
                     </span>
                   )}
                 </div>
-                <div className='truncate text-muted-foreground text-xs'>{item.email}</div>
+                <div className='truncate text-[var(--text-muted)] text-xs'>{item.email}</div>
               </div>
 
               {/* Usage stats - matching subscription layout */}
               {isAdminOrOwner && (
                 <div className='hidden items-center text-xs tabular-nums sm:flex'>
                   <div className='text-center'>
-                    <div className='text-muted-foreground'>Usage</div>
+                    <div className='text-[var(--text-muted)]'>Usage</div>
                     <div className='font-medium'>
                       {isLoadingUsage && item.type === 'member' ? (
-                        <span className='inline-block h-3 w-12 animate-pulse rounded bg-muted' />
+                        <span className='inline-block h-3 w-12 animate-pulse rounded bg-[var(--surface-3)]' />
                       ) : (
                         item.usage
                       )}
@@ -215,7 +215,7 @@ export function TeamMembers({
                   <Button
                     variant='ghost'
                     onClick={() => onRemoveMember(item.member)}
-                    className='h-8 text-muted-foreground hover:text-foreground'
+                    className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                   >
                     Remove
                   </Button>
@@ -227,7 +227,7 @@ export function TeamMembers({
                   variant='ghost'
                   onClick={() => handleCancelInvitation(item.invitation.id)}
                   disabled={cancellingInvitations.has(item.invitation.id)}
-                  className='h-8 text-muted-foreground hover:text-foreground'
+                  className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                 >
                   {cancellingInvitations.has(item.invitation.id) ? 'Cancelling...' : 'Cancel'}
                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 8756dc5b1bf..b2b2e8d2533 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -29,7 +29,7 @@ interface TeamSeatsOverviewProps {
 
 function TeamSeatsSkeleton() {
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-2'>
@@ -38,7 +38,7 @@ function TeamSeatsSkeleton() {
           </div>
           <div className='flex items-center gap-1 text-xs'>
             <Skeleton className='h-4 w-8' />
-            <span className='text-muted-foreground'>/</span>
+            <span className='text-[var(--text-muted)]'>/</span>
             <Skeleton className='h-4 w-8' />
           </div>
         </div>
@@ -67,11 +67,11 @@ export function TeamSeatsOverview({
 
   if (!subscriptionData) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <div className='space-y-3 text-center'>
           <div className='space-y-2'>
             <p className='font-medium text-sm'>No Team Subscription Found</p>
-            <p className='text-muted-foreground text-xs'>
+            <p className='text-[var(--text-muted)] text-xs'>
               Your subscription may need to be transferred to this organization.
             </p>
           </div>
@@ -93,12 +93,12 @@ export function TeamSeatsOverview({
   const isEnterprise = checkEnterprisePlan(subscriptionData)
 
   return (
-    <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+    <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
       <div className='space-y-2'>
         {/* Top row - matching UsageHeader */}
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-2'>
-            <span className='font-medium text-[#FFFFFF] text-[12px]'>Seats</span>
+            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Seats</span>
             {!isEnterprise && (
               <Badge
                 className='gradient-text h-[1.125rem] cursor-pointer rounded-[6px] border-gradient-primary/20 bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary px-2 py-0 font-medium text-xs'
@@ -138,7 +138,7 @@ export function TeamSeatsOverview({
         {/* Enterprise message */}
         {isEnterprise && (
           <div className='pt-1 text-center'>
-            <p className='text-muted-foreground text-xs'>
+            <p className='text-[var(--text-muted)] text-xs'>
               Contact support for enterprise usage limit changes
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
index e29d657a575..daac171e3ac 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-seats/team-seats.tsx
@@ -3,6 +3,7 @@ import {
   Button,
   Combobox,
   type ComboboxOption,
+  Label,
   Modal,
   ModalContent,
   ModalDescription,
@@ -11,7 +12,6 @@ import {
   ModalTitle,
   Tooltip,
 } from '@/components/emcn'
-import { Label } from '@/components/ui/label'
 import { DEFAULT_TEAM_TIER_COST_LIMIT } from '@/lib/billing/constants'
 import { env } from '@/lib/core/config/env'
 
@@ -82,23 +82,23 @@ export function TeamSeats({
             placeholder='Select number of seats'
           />
 
-          <p className='mt-2 text-muted-foreground text-sm'>
+          <p className='mt-2 text-[var(--text-muted)] text-sm'>
             Your team will have {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} with a
             total of ${totalMonthlyCost} inference credits per month.
           </p>
 
           {showCostBreakdown && currentSeats !== undefined && (
-            <div className='mt-3 rounded-md bg-muted/50 p-3'>
+            <div className='mt-3 rounded-[8px] bg-[var(--surface-3)] p-3'>
               <div className='flex justify-between text-sm'>
-                <span>Current seats:</span>
+                <span className='text-[var(--text-muted)]'>Current seats:</span>
                 <span>{currentSeats}</span>
               </div>
               <div className='flex justify-between text-sm'>
-                <span>New seats:</span>
+                <span className='text-[var(--text-muted)]'>New seats:</span>
                 <span>{selectedSeats}</span>
               </div>
               <div className='mt-2 flex justify-between border-t pt-2 font-medium text-sm'>
-                <span>Monthly cost change:</span>
+                <span className='text-[var(--text-muted)]'>Monthly cost change:</span>
                 <span>
                   {costChange > 0 ? '+' : ''}${costChange}
                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
index e9abb0593f9..da4704fadb6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/components/team-usage/team-usage.tsx
@@ -30,7 +30,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (isLoadingOrgBilling) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <div className='space-y-2'>
           <div className='flex items-center justify-between'>
             <div className='flex items-center gap-2'>
@@ -39,7 +39,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
             </div>
             <div className='flex items-center gap-1 text-xs'>
               <Skeleton className='h-4 w-8' />
-              <span className='text-muted-foreground'>/</span>
+              <span className='text-[var(--text-muted)]'>/</span>
               <Skeleton className='h-4 w-8' />
             </div>
           </div>
@@ -51,7 +51,7 @@ export function TeamUsage({ hasAdminAccess }: TeamUsageProps) {
 
   if (error) {
     return (
-      <div className='rounded-[8px] border bg-background p-3 shadow-xs'>
+      <div className='rounded-[8px] border bg-[var(--surface-3)] p-3 shadow-xs'>
         <p className='text-center text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
           {error instanceof Error ? error.message : 'Failed to load billing data'}
         </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
index ec0b9e6f8c7..e38655e53a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/team-management/team-management.tsx
@@ -281,63 +281,61 @@ export function TeamManagement() {
 
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
     return (
-      <div className='flex h-full flex-col'>
-        <div className='flex flex-1 flex-col overflow-y-auto'>
-          {/* Team Seats Overview */}
-          <div className='mb-4'>
-            <div className='rounded-[8px] border bg-background p-4 shadow-xs'>
-              <div className='space-y-3'>
-                <div className='flex items-center justify-between'>
-                  <Skeleton className='h-5 w-24' />
-                  <Skeleton className='h-8 w-20 rounded-[6px]' />
+      <div className='flex h-full flex-col gap-[16px]'>
+        {/* Team Seats Overview */}
+        <div>
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4 shadow-xs'>
+            <div className='space-y-[12px]'>
+              <div className='flex items-center justify-between'>
+                <Skeleton className='h-5 w-24' />
+                <Skeleton className='h-8 w-20 rounded-[6px]' />
+              </div>
+              <div className='flex items-center gap-[16px]'>
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-16' />
+                  <Skeleton className='h-6 w-8' />
                 </div>
-                <div className='flex items-center gap-4'>
-                  <div className='flex flex-col gap-1'>
-                    <Skeleton className='h-3 w-16' />
-                    <Skeleton className='h-6 w-8' />
-                  </div>
-                  <div className='h-8 w-px bg-border' />
-                  <div className='flex flex-col gap-1'>
-                    <Skeleton className='h-3 w-20' />
-                    <Skeleton className='h-6 w-8' />
-                  </div>
-                  <div className='h-8 w-px bg-border' />
-                  <div className='flex flex-col gap-1'>
-                    <Skeleton className='h-3 w-24' />
-                    <Skeleton className='h-6 w-12' />
-                  </div>
+                <div className='h-8 w-px bg-[var(--border)]' />
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-20' />
+                  <Skeleton className='h-6 w-8' />
+                </div>
+                <div className='h-8 w-px bg-[var(--border)]' />
+                <div className='flex flex-col gap-[4px]'>
+                  <Skeleton className='h-3 w-24' />
+                  <Skeleton className='h-6 w-12' />
                 </div>
               </div>
             </div>
           </div>
+        </div>
 
-          {/* Team Members */}
-          <div className='mb-4'>
-            <Skeleton className='mb-3 h-5 w-32' />
-            <div className='space-y-2'>
-              {[...Array(3)].map((_, i) => (
-                <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
-                  <div className='flex items-center gap-3'>
-                    <Skeleton className='h-10 w-10 rounded-full' />
-                    <div className='space-y-1'>
-                      <Skeleton className='h-4 w-32' />
-                      <Skeleton className='h-3 w-24' />
-                    </div>
+        {/* Team Members */}
+        <div>
+          <Skeleton className='mb-[12px] h-5 w-32' />
+          <div className='space-y-[8px]'>
+            {[...Array(3)].map((_, i) => (
+              <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
+                <div className='flex items-center gap-[12px]'>
+                  <Skeleton className='h-10 w-10 rounded-full' />
+                  <div className='space-y-[4px]'>
+                    <Skeleton className='h-4 w-32' />
+                    <Skeleton className='h-3 w-24' />
                   </div>
-                  <Skeleton className='h-6 w-16 rounded-full' />
                 </div>
-              ))}
-            </div>
+                <Skeleton className='h-6 w-16 rounded-full' />
+              </div>
+            ))}
           </div>
+        </div>
 
-          {/* Invite Member Card */}
-          <div className='mb-4'>
-            <div className='rounded-[8px] border bg-background p-4'>
-              <Skeleton className='mb-3 h-5 w-32' />
-              <div className='space-y-3'>
-                <Skeleton className='h-9 w-full rounded-[8px]' />
-                <Skeleton className='h-9 w-full rounded-[8px]' />
-              </div>
+        {/* Invite Member Card */}
+        <div>
+          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4'>
+            <Skeleton className='mb-[12px] h-5 w-32' />
+            <div className='space-y-[12px]'>
+              <Skeleton className='h-9 w-full rounded-[8px]' />
+              <Skeleton className='h-9 w-full rounded-[8px]' />
             </div>
           </div>
         </div>
@@ -365,72 +363,106 @@ export function TeamManagement() {
   }
 
   return (
-    <div className='flex h-full flex-col'>
-      <div className='flex flex-1 flex-col overflow-y-auto'>
-        {/* Seats Overview - Full Width */}
-        {adminOrOwner && (
-          <div className='mb-4'>
-            <TeamSeatsOverview
-              subscriptionData={subscriptionData || null}
-              isLoadingSubscription={isLoadingSubscription}
-              usedSeats={usedSeats.used}
-              isLoading={isLoading}
-              onConfirmTeamUpgrade={confirmTeamUpgrade}
-              onReduceSeats={handleReduceSeats}
-              onAddSeatDialog={handleAddSeatDialog}
-            />
-          </div>
-        )}
+    <div className='flex h-full flex-col gap-[16px]'>
+      {/* Seats Overview - Full Width */}
+      {adminOrOwner && (
+        <div>
+          <TeamSeatsOverview
+            subscriptionData={subscriptionData || null}
+            isLoadingSubscription={isLoadingSubscription}
+            usedSeats={usedSeats.used}
+            isLoading={isLoading}
+            onConfirmTeamUpgrade={confirmTeamUpgrade}
+            onReduceSeats={handleReduceSeats}
+            onAddSeatDialog={handleAddSeatDialog}
+          />
+        </div>
+      )}
+
+      {/* Action: Invite New Members */}
+      {adminOrOwner && (
+        <div>
+          <MemberInvitationCard
+            inviteEmail={inviteEmail}
+            setInviteEmail={setInviteEmail}
+            isInviting={inviteMutation.isPending}
+            showWorkspaceInvite={showWorkspaceInvite}
+            setShowWorkspaceInvite={setShowWorkspaceInvite}
+            selectedWorkspaces={selectedWorkspaces}
+            userWorkspaces={adminWorkspaces}
+            onInviteMember={handleInviteMember}
+            onLoadUserWorkspaces={async () => {}} // No-op: data is auto-loaded by React Query
+            onWorkspaceToggle={handleWorkspaceToggle}
+            inviteSuccess={inviteSuccess}
+            availableSeats={Math.max(0, (subscriptionData?.seats || 0) - usedSeats.used)}
+            maxSeats={subscriptionData?.seats || 0}
+            invitationError={inviteMutation.error}
+            isLoadingWorkspaces={isLoadingWorkspaces}
+          />
+        </div>
+      )}
+
+      {/* Main Content: Team Members */}
+      <div>
+        <TeamMembers
+          organization={displayOrganization}
+          currentUserEmail={session?.user?.email ?? ''}
+          isAdminOrOwner={adminOrOwner}
+          onRemoveMember={handleRemoveMember}
+        />
+      </div>
 
-        {/* Action: Invite New Members */}
+      {/* Additional Info - Subtle and collapsed */}
+      <div className='space-y-[12px]'>
+        {/* Single Organization Notice */}
         {adminOrOwner && (
-          <div className='mb-4'>
-            <MemberInvitationCard
-              inviteEmail={inviteEmail}
-              setInviteEmail={setInviteEmail}
-              isInviting={inviteMutation.isPending}
-              showWorkspaceInvite={showWorkspaceInvite}
-              setShowWorkspaceInvite={setShowWorkspaceInvite}
-              selectedWorkspaces={selectedWorkspaces}
-              userWorkspaces={adminWorkspaces}
-              onInviteMember={handleInviteMember}
-              onLoadUserWorkspaces={async () => {}} // No-op: data is auto-loaded by React Query
-              onWorkspaceToggle={handleWorkspaceToggle}
-              inviteSuccess={inviteSuccess}
-              availableSeats={Math.max(0, (subscriptionData?.seats || 0) - usedSeats.used)}
-              maxSeats={subscriptionData?.seats || 0}
-              invitationError={inviteMutation.error}
-              isLoadingWorkspaces={isLoadingWorkspaces}
-            />
+          <div className='rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)] p-3'>
+            <p className='text-[var(--text-muted)] text-xs'>
+              <span className='font-medium'>Note:</span> Users can only be part of one organization
+              at a time.
+            </p>
           </div>
         )}
 
-        {/* Main Content: Team Members */}
-        <div className='mb-4'>
-          <TeamMembers
-            organization={displayOrganization}
-            currentUserEmail={session?.user?.email ?? ''}
-            isAdminOrOwner={adminOrOwner}
-            onRemoveMember={handleRemoveMember}
-          />
-        </div>
-
-        {/* Additional Info - Subtle and collapsed */}
-        <div className='space-y-3'>
-          {/* Single Organization Notice */}
-          {adminOrOwner && (
-            <div className='rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)] p-3'>
-              <p className='text-muted-foreground text-xs'>
-                <span className='font-medium'>Note:</span> Users can only be part of one
-                organization at a time.
-              </p>
+        {/* Team Information */}
+        <details className='group rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)]'>
+          <summary className='flex cursor-pointer items-center justify-between rounded-[8px] p-3 font-medium text-[13px] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+            <span>Team Information</span>
+            <svg
+              className='h-4 w-4 transition-transform group-open:rotate-180'
+              fill='none'
+              viewBox='0 0 24 24'
+              stroke='currentColor'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                d='M19 9l-7 7-7-7'
+              />
+            </svg>
+          </summary>
+          <div className='space-y-[8px] border-[var(--border-muted)] border-t p-3 text-xs'>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Team ID:</span>
+              <span className='font-mono text-[10px]'>{displayOrganization.id}</span>
+            </div>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Created:</span>
+              <span>{new Date(displayOrganization.createdAt).toLocaleDateString()}</span>
+            </div>
+            <div className='flex justify-between'>
+              <span className='text-[var(--text-muted)]'>Your Role:</span>
+              <span className='font-medium capitalize'>{userRole}</span>
             </div>
-          )}
+          </div>
+        </details>
 
-          {/* Team Information */}
-          <details className='group rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)]'>
-            <summary className='flex cursor-pointer items-center justify-between rounded-lg p-3 font-medium text-sm hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
-              <span>Team Information</span>
+        {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
+        {hasTeamPlan && !hasEnterprisePlan && (
+          <details className='group rounded-[8px] border border-[var(--border-muted)] bg-[var(--surface-3)]'>
+            <summary className='flex cursor-pointer items-center justify-between rounded-[8px] p-3 font-medium text-[13px] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+              <span>Billing Information</span>
               <svg
                 className='h-4 w-4 transition-transform group-open:rotate-180'
                 fill='none'
@@ -445,64 +477,28 @@ export function TeamManagement() {
                 />
               </svg>
             </summary>
-            <div className='space-y-2 border-[var(--border-muted)] border-t p-3 text-xs'>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Team ID:</span>
-                <span className='font-mono text-[10px]'>{displayOrganization.id}</span>
-              </div>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Created:</span>
-                <span>{new Date(displayOrganization.createdAt).toLocaleDateString()}</span>
-              </div>
-              <div className='flex justify-between'>
-                <span className='text-muted-foreground'>Your Role:</span>
-                <span className='font-medium capitalize'>{userRole}</span>
-              </div>
+            <div className='border-[var(--border-muted)] border-t p-3'>
+              <ul className='ml-4 list-disc space-y-[8px] text-[var(--text-muted)] text-xs'>
+                <li>
+                  Your team is billed a minimum of $
+                  {(subscriptionData?.seats || 0) *
+                    (env.TEAM_TIER_COST_LIMIT ?? DEFAULT_TEAM_TIER_COST_LIMIT)}
+                  /month for {subscriptionData?.seats || 0} licensed seats
+                </li>
+                <li>All team member usage is pooled together from a shared limit</li>
+                <li>
+                  When pooled usage exceeds the limit, all members are blocked from using the
+                  service
+                </li>
+                <li>You can increase the usage limit to allow for higher usage</li>
+                <li>
+                  Any usage beyond the minimum seat cost is billed as overage at the end of the
+                  billing period
+                </li>
+              </ul>
             </div>
           </details>
-
-          {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
-          {hasTeamPlan && !hasEnterprisePlan && (
-            <details className='group rounded-lg border border-[var(--border-muted)] bg-[var(--surface-3)]'>
-              <summary className='flex cursor-pointer items-center justify-between rounded-lg p-3 font-medium text-sm hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
-                <span>Billing Information</span>
-                <svg
-                  className='h-4 w-4 transition-transform group-open:rotate-180'
-                  fill='none'
-                  viewBox='0 0 24 24'
-                  stroke='currentColor'
-                >
-                  <path
-                    strokeLinecap='round'
-                    strokeLinejoin='round'
-                    strokeWidth={2}
-                    d='M19 9l-7 7-7-7'
-                  />
-                </svg>
-              </summary>
-              <div className='border-[var(--border-muted)] border-t p-3'>
-                <ul className='ml-4 list-disc space-y-2 text-muted-foreground text-xs'>
-                  <li>
-                    Your team is billed a minimum of $
-                    {(subscriptionData?.seats || 0) *
-                      (env.TEAM_TIER_COST_LIMIT ?? DEFAULT_TEAM_TIER_COST_LIMIT)}
-                    /month for {subscriptionData?.seats || 0} licensed seats
-                  </li>
-                  <li>All team member usage is pooled together from a shared limit</li>
-                  <li>
-                    When pooled usage exceeds the limit, all members are blocked from using the
-                    service
-                  </li>
-                  <li>You can increase the usage limit to allow for higher usage</li>
-                  <li>
-                    Any usage beyond the minimum seat cost is billed as overage at the end of the
-                    billing period
-                  </li>
-                </ul>
-              </div>
-            </details>
-          )}
-        </div>
+        )}
       </div>
 
       <RemoveMemberDialog
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
index a27dbf86136..f7aa000923a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/template-profile/template-profile.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import { Button, Combobox, Input, Textarea } from '@/components/emcn'
 import { AgentIcon, xIcon as XIcon } from '@/components/icons'
 import { Skeleton } from '@/components/ui/skeleton'
-import { useSession } from '@/lib/auth-client'
+import { useSession } from '@/lib/auth/auth-client'
 import { createLogger } from '@/lib/logs/console/logger'
 import type { CreatorProfileDetails } from '@/app/_types/creator-profile'
 import { useProfilePictureUpload } from '@/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/hooks/use-profile-picture-upload'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
index 23a6db56a2a..933e577c3f5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/email-tag.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { X } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface EmailTagProps {
   email: string
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
index 239623aae38..67a0b96a67b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permission-selector.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { Button } from '@/components/emcn'
-import type { PermissionType } from '@/lib/permissions/utils'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/core/utils/cn'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
 
 export interface PermissionSelectorProps {
   value: PermissionType
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
index 04d70b2ebdc..fbd7bd00a84 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from 'react'
 import { Loader2, RotateCw, X } from 'lucide-react'
 import { Badge, Button, Tooltip } from '@/components/emcn'
-import { useSession } from '@/lib/auth-client'
-import type { PermissionType } from '@/lib/permissions/utils'
+import { useSession } from '@/lib/auth/auth-client'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
 import { useUserPermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import type { WorkspacePermissions } from '@/hooks/use-workspace-permissions'
 import { PermissionSelector } from './permission-selector'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
index 3215fdcfd57..7acb4db1583 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/components/types.ts
@@ -1,4 +1,4 @@
-import type { PermissionType } from '@/lib/permissions/utils'
+import type { PermissionType } from '@/lib/workspaces/permissions/utils'
 
 export type { PermissionType }
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
index 013f0ba7e13..9a0dd8385ed 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/workspace-header/components/invite-modal/invite-modal.tsx
@@ -12,9 +12,9 @@ import {
   ModalHeader,
 } from '@/components/emcn/components/modal/modal'
 import { useSession } from '@/lib/auth/auth-client'
-import { quickValidateEmail } from '@/lib/messaging/email/validation'
-import { createLogger } from '@/lib/logs/console/logger'
 import { cn } from '@/lib/core/utils/cn'
+import { createLogger } from '@/lib/logs/console/logger'
+import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import { useWorkspacePermissionsContext } from '@/app/workspace/[workspaceId]/providers/workspace-permissions-provider'
 import { API_ENDPOINTS } from '@/stores/constants'
 import type { PermissionType, UserPermissions } from './components'
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 6769b0c0150..4339179deec 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -27,7 +27,7 @@
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/core/utils/cn'
 import { Button } from '../button/button'
 import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index 5e650d46cfd..47c7538e28b 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -2,7 +2,7 @@
 
 import * as React from 'react'
 import * as SwitchPrimitives from '@radix-ui/react-switch'
-import { cn } from '@/lib/utils'
+import { cn } from '@/lib/core/utils/cn'
 
 /**
  * Custom switch component with thin track design.
diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts
index 13d12518344..9d049d68cee 100644
--- a/apps/sim/hooks/queries/general-settings.ts
+++ b/apps/sim/hooks/queries/general-settings.ts
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { syncThemeToNextThemes } from '@/lib/core/utils/theme'
 import { createLogger } from '@/lib/logs/console/logger'
-import { syncThemeToNextThemes } from '@/lib/theme-sync'
 import { useGeneralStore } from '@/stores/settings/general/store'
 
 const logger = createLogger('GeneralSettingsQuery')

From 1ab25acf0c2a92b888122835bd60211fe68e3161 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 3 Dec 2025 16:30:24 -0800
Subject: [PATCH 17/17] fix: reverted mock data

---
 .../components-new/settings-modal/settings-modal.tsx   |  8 ++------
 apps/sim/lib/core/config/environment.ts                | 10 ++++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
index 69a2ae2be86..892434bced3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx
@@ -25,8 +25,8 @@ import {
 import { McpIcon } from '@/components/icons'
 import { useSession } from '@/lib/auth/auth-client'
 import { getSubscriptionStatus } from '@/lib/billing/client'
+import { getEnv, isTruthy } from '@/lib/core/config/env'
 import { isHosted } from '@/lib/core/config/environment'
-import { createLogger } from '@/lib/logs/console/logger'
 import { getUserRole } from '@/lib/workspaces/organization'
 import {
   ApiKeys,
@@ -47,11 +47,7 @@ import { organizationKeys, useOrganizations } from '@/hooks/queries/organization
 import { ssoKeys, useSSOProviders } from '@/hooks/queries/sso'
 import { subscriptionKeys, useSubscriptionData } from '@/hooks/queries/subscription'
 
-const logger = createLogger('SettingsModal')
-
-// TODO: Remove this
-// const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
-const isBillingEnabled = true
+const isBillingEnabled = isTruthy(getEnv('NEXT_PUBLIC_BILLING_ENABLED'))
 
 interface SettingsModalProps {
   open: boolean
diff --git a/apps/sim/lib/core/config/environment.ts b/apps/sim/lib/core/config/environment.ts
index b3abb0072c4..835f54c8bc1 100644
--- a/apps/sim/lib/core/config/environment.ts
+++ b/apps/sim/lib/core/config/environment.ts
@@ -1,12 +1,12 @@
 /**
  * Environment utility functions for consistent environment detection across the application
  */
-import { env, isTruthy } from './env'
+import { env, getEnv, isTruthy } from './env'
 
 /**
  * Is the application running in production mode
  */
-export const isProd = true
+export const isProd = env.NODE_ENV === 'production'
 
 /**
  * Is the application running in development mode
@@ -21,12 +21,14 @@ export const isTest = env.NODE_ENV === 'test'
 /**
  * Is this the hosted version of the application
  */
-export const isHosted = true
+export const isHosted =
+  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.sim.ai' ||
+  getEnv('NEXT_PUBLIC_APP_URL') === 'https://www.staging.sim.ai'
 
 /**
  * Is billing enforcement enabled
  */
-export const isBillingEnabled = true
+export const isBillingEnabled = isTruthy(env.BILLING_ENABLED)
 
 /**
  * Is email verification enabled