diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index cbb31e4423..dae3071b5c 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -21,12 +21,13 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/careers') ||
     pathname.startsWith('/changelog') ||
     pathname.startsWith('/chat') ||
-    pathname.startsWith('/studio')
+    pathname.startsWith('/studio') ||
+    pathname.startsWith('/resume')
 
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='dark'
+      defaultTheme='system'
       enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index dccad450f1..1ece0a9660 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -11,7 +11,7 @@
   --panel-width: 260px;
   --toolbar-triggers-height: 300px;
   --editor-connections-height: 200px;
-  --terminal-height: 196px;
+  --terminal-height: 155px;
 }
 
 .sidebar-container {
diff --git a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
index de6c0ef613..15e741c278 100644
--- a/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
+++ b/apps/sim/app/resume/[workflowId]/[executionId]/resume-page-client.tsx
@@ -1,22 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import {
-  AlertCircle,
-  Calendar,
-  CheckCircle2,
-  Clock,
-  FileText,
-  Play,
-  RefreshCw,
-  XCircle,
-} from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
+import { Badge, Button, Input, Label, Textarea } from '@/components/emcn'
 import {
   Select,
   SelectContent,
@@ -25,10 +11,8 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Separator } from '@/components/ui/separator'
-import { Textarea } from '@/components/ui/textarea'
 import { useBrandConfig } from '@/lib/branding/branding'
-import { inter } from '@/app/_styles/fonts/inter/inter'
-import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { cn } from '@/lib/core/utils/cn'
 import Nav from '@/app/(landing)/components/nav/nav'
 import type { ResumeStatus } from '@/executor/types'
 
@@ -119,27 +103,14 @@ interface ResumeExecutionPageProps {
   initialContextId?: string | null
 }
 
-const RESUME_STATUS_STYLES: Record<string, { style: string; icon: React.ReactNode }> = {
-  paused: {
-    style: 'border-amber-200 bg-amber-50 text-amber-700',
-    icon: <Clock className='h-3 w-3' />,
-  },
-  queued: {
-    style: 'border-blue-200 bg-blue-50 text-blue-700',
-    icon: <Clock className='h-3 w-3' />,
-  },
-  resuming: {
-    style: 'border-indigo-200 bg-indigo-50 text-indigo-700',
-    icon: <Play className='h-3 w-3' />,
-  },
-  resumed: {
-    style: 'border-emerald-200 bg-emerald-50 text-emerald-700',
-    icon: <CheckCircle2 className='h-3 w-3' />,
-  },
-  failed: {
-    style: 'border-red-200 bg-red-50 text-red-700',
-    icon: <XCircle className='h-3 w-3' />,
-  },
+const RESUME_STATUS_STYLES: Record<string, string> = {
+  paused: 'border-[var(--c-F59E0B)]/30 bg-[var(--c-F59E0B)]/10 text-[var(--c-F59E0B)]',
+  queued:
+    'border-[var(--brand-tertiary)]/30 bg-[var(--brand-tertiary)]/10 text-[var(--brand-tertiary)]',
+  resuming:
+    'border-[var(--brand-primary)]/30 bg-[var(--brand-primary)]/10 text-[var(--brand-primary)]',
+  resumed: 'border-[var(--text-success)]/30 bg-[var(--text-success)]/10 text-[var(--text-success)]',
+  failed: 'border-[var(--text-error)]/30 bg-[var(--text-error)]/10 text-[var(--text-error)]',
 }
 
 function formatDate(value: string | null): string {
@@ -157,13 +128,11 @@ function getStatusLabel(status: string): string {
 }
 
 function ResumeStatusBadge({ status }: { status: string }) {
-  const config = RESUME_STATUS_STYLES[status] ?? {
-    style: 'border-slate-200 bg-slate-100 text-slate-700',
-    icon: <AlertCircle className='h-3 w-3' />,
-  }
+  const style =
+    RESUME_STATUS_STYLES[status] ??
+    'border-[var(--border)] bg-[var(--surface-2)] text-[var(--text-secondary)]'
   return (
-    <Badge variant='outline' className={`${config.style} flex items-center gap-1.5`}>
-      {config.icon}
+    <Badge variant='outline' className={cn(style)}>
       {getStatusLabel(status)}
     </Badge>
   )
@@ -418,7 +387,7 @@ export default function ResumeExecutionPage({
               value={selectValue}
               onValueChange={(val) => handleFormFieldChange(field.name, val)}
             >
-              <SelectTrigger className='w-full rounded-[12px] border-slate-200'>
+              <SelectTrigger className='w-full rounded-[6px] border-[var(--border)] bg-[var(--surface-1)]'>
                 <SelectValue
                   placeholder={
                     field.required ? 'Select true or false' : 'Select true, false, or leave blank'
@@ -440,7 +409,6 @@ export default function ResumeExecutionPage({
               value={value}
               onChange={(event) => handleFormFieldChange(field.name, event.target.value)}
               placeholder={field.placeholder ?? 'Enter a number...'}
-              className='rounded-[12px] border-slate-200'
             />
           )
         case 'array':
@@ -451,7 +419,7 @@ export default function ResumeExecutionPage({
               value={value}
               onChange={(event) => handleFormFieldChange(field.name, event.target.value)}
               placeholder={field.placeholder ?? (field.type === 'array' ? '[...]' : '{...}')}
-              className='min-h-[120px] rounded-[12px] border-slate-200 font-mono text-sm'
+              className='min-h-[120px] font-mono text-[13px]'
             />
           )
         default: {
@@ -462,7 +430,7 @@ export default function ResumeExecutionPage({
                 value={value}
                 onChange={(event) => handleFormFieldChange(field.name, event.target.value)}
                 placeholder={field.placeholder ?? 'Enter value...'}
-                className='min-h-[120px] rounded-[12px] border-slate-200'
+                className='min-h-[120px]'
               />
             )
           }
@@ -471,7 +439,6 @@ export default function ResumeExecutionPage({
               value={value}
               onChange={(event) => handleFormFieldChange(field.name, event.target.value)}
               placeholder={field.placeholder ?? 'Enter value...'}
-              className='rounded-[12px] border-slate-200'
             />
           )
         }
@@ -518,18 +485,6 @@ export default function ResumeExecutionPage({
       .filter((row): row is ResponseStructureRow => row !== null)
   }, [selectedDetail])
 
-  useEffect(() => {
-    const root = document.documentElement
-    const hadDark = root.classList.contains('dark')
-    const hadLight = root.classList.contains('light')
-    root.classList.add('light')
-    root.classList.remove('dark')
-    return () => {
-      if (!hadLight) root.classList.remove('light')
-      if (hadDark) root.classList.add('dark')
-    }
-  }, [])
-
   useEffect(() => {
     if (!selectedContextId) {
       setSelectedDetail(null)
@@ -907,10 +862,10 @@ export default function ResumeExecutionPage({
 
   const statusDetailNode = useMemo(() => {
     return (
-      <div className='flex flex-wrap items-center gap-2'>
+      <div className='flex flex-wrap items-center gap-[8px]'>
         <ResumeStatusBadge status={selectedStatus} />
         {queuePosition && queuePosition > 0 ? (
-          <span className={`${inter.className} text-slate-500 text-xs`}>
+          <span className='text-[12px] text-[var(--text-muted)]'>
             Queue position {queuePosition}
           </span>
         ) : null}
@@ -931,33 +886,23 @@ export default function ResumeExecutionPage({
             setError(null)
             setMessage(null)
           }}
-          className={`group w-full rounded-lg border p-3 text-left transition-all duration-150 hover:border-slate-300 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500/40 ${
-            isSelected
-              ? 'border-blue-500 bg-blue-50/50 shadow-sm'
-              : subdued
-                ? 'border-slate-200 bg-slate-50 opacity-75'
-                : 'border-slate-200 bg-white'
-          }`}
+          className={cn(
+            'w-full rounded-[6px] border border-[var(--border)] bg-[var(--surface-1)] p-[12px] text-left',
+            'hover:bg-[var(--surface-3)] focus:outline-none',
+            isSelected && 'bg-[var(--surface-3)]'
+          )}
         >
-          <div className='flex items-start justify-between gap-2'>
-            <div className='min-w-0 flex-1'>
-              <div className='flex items-center gap-2'>
-                <p className='truncate font-medium text-slate-900 text-sm'>{pause.contextId}</p>
-              </div>
-              <div className='mt-1.5 flex items-center gap-1 text-slate-500 text-xs'>
-                <Calendar className='h-3 w-3' />
-                <span>{formatDate(pause.registeredAt)}</span>
-              </div>
-              {pause.queuePosition != null && pause.queuePosition > 0 && (
-                <div className='mt-1 flex items-center gap-1 text-amber-600 text-xs'>
-                  <Clock className='h-3 w-3' />
-                  <span>Position {pause.queuePosition}</span>
-                </div>
-              )}
-            </div>
-            <div className='flex-shrink-0'>
-              <ResumeStatusBadge status={pause.resumeStatus} />
-            </div>
+          <div className='mb-[8px] flex items-center justify-between'>
+            <ResumeStatusBadge status={pause.resumeStatus} />
+            <span className='truncate font-medium text-[11px] text-[var(--text-primary)]'>
+              {pause.contextId}
+            </span>
+          </div>
+          <div className='space-y-[4px] text-[11px] text-[var(--text-secondary)]'>
+            <p>Registered: {formatDate(pause.registeredAt)}</p>
+            {pause.queuePosition != null && pause.queuePosition > 0 && (
+              <p className='text-[var(--c-F59E0B)]'>Queue Position: {pause.queuePosition}</p>
+            )}
           </div>
         </button>
       )
@@ -996,41 +941,37 @@ export default function ResumeExecutionPage({
 
   if (!executionDetail) {
     return (
-      <div className='relative min-h-screen'>
-        <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+      <div className='relative min-h-screen bg-[var(--bg)]'>
         <Nav variant='auth' />
-        <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-4'>
+        <div className='flex min-h-[calc(100vh-120px)] items-center justify-center px-[16px]'>
           <div className='w-full max-w-[410px]'>
             <div className='flex flex-col items-center justify-center'>
-              <div className='space-y-1 text-center'>
-                <h1
-                  className={`${soehne.className} font-medium text-[32px] text-black tracking-tight`}
-                >
+              <div className='space-y-[4px] text-center'>
+                <h1 className='font-medium text-[24px] text-[var(--text-primary)] tracking-tight'>
                   Execution Not Found
                 </h1>
-                <p className={`${inter.className} font-[380] text-[16px] text-muted-foreground`}>
+                <p className='text-[14px] text-[var(--text-secondary)]'>
                   The execution you are trying to resume could not be located or has already
                   completed.
                 </p>
               </div>
 
-              <div className='mt-8 w-full space-y-3'>
+              <div className='mt-[24px] w-full space-y-[12px]'>
                 <Button
                   type='button'
                   onClick={() => router.push('/')}
-                  className='auth-button-gradient flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
+                  variant='tertiary'
+                  className='w-full'
                 >
                   Return Home
                 </Button>
               </div>
 
-              <div
-                className={`${inter.className} auth-text-muted fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[13px] leading-relaxed`}
-              >
+              <div className='fixed right-0 bottom-0 left-0 z-50 pb-[32px] text-center text-[13px] text-[var(--text-muted)]'>
                 Need help?{' '}
                 <a
                   href={`mailto:${brandConfig.supportEmail}`}
-                  className='auth-link underline-offset-4 transition hover:underline'
+                  className='text-[var(--text-secondary)] underline-offset-4 transition hover:underline'
                 >
                   Contact support
                 </a>
@@ -1043,106 +984,90 @@ export default function ResumeExecutionPage({
   }
 
   return (
-    <div className='relative min-h-screen bg-gradient-to-b from-slate-50 to-white'>
-      <div className='-z-50 pointer-events-none fixed inset-0 bg-white' />
+    <div className='relative min-h-screen bg-[var(--bg)]'>
       <Nav variant='auth' />
-      <div className='mx-auto min-h-[calc(100vh-120px)] max-w-7xl px-4 py-6 sm:py-8'>
+      <div className='mx-auto min-h-[calc(100vh-120px)] max-w-7xl px-[24px] py-[24px]'>
         {/* Header Section */}
-        <div className='mb-6'>
+        <div className='mb-[24px]'>
           <div className='flex items-center justify-between'>
             <div>
-              <h1
-                className={`${soehne.className} font-semibold text-3xl text-slate-900 tracking-tight`}
-              >
+              <h1 className='font-medium text-[18px] text-[var(--text-primary)] tracking-tight'>
                 Paused Execution
               </h1>
-              <p className={`${inter.className} mt-1 text-slate-600 text-sm`}>
+              <p className='mt-[4px] text-[13px] text-[var(--text-secondary)]'>
                 Review and manage execution pause points
               </p>
             </div>
             <Button
               variant='outline'
-              size='sm'
               onClick={refreshExecutionDetail}
               disabled={refreshingExecution}
-              className='gap-2'
             >
-              <RefreshCw className={`h-4 w-4 ${refreshingExecution ? 'animate-spin' : ''}`} />
-              {refreshingExecution ? 'Refreshing' : 'Refresh'}
+              {refreshingExecution ? 'Refreshing...' : 'Refresh'}
             </Button>
           </div>
         </div>
 
         {/* Stats Cards */}
-        <div className='mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3'>
-          <Card>
-            <CardContent className='p-6'>
-              <div className='flex items-center justify-between'>
-                <div>
-                  <p className='font-medium text-slate-600 text-sm'>Total Pauses</p>
-                  <p className='mt-2 font-semibold text-3xl text-slate-900'>{totalPauses}</p>
-                </div>
-                <div className='rounded-full bg-blue-100 p-3'>
-                  <Clock className='h-6 w-6 text-blue-600' />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className='p-6'>
-              <div className='flex items-center justify-between'>
-                <div>
-                  <p className='font-medium text-slate-600 text-sm'>Resumed</p>
-                  <p className='mt-2 font-semibold text-3xl text-emerald-600'>{resumedCount}</p>
-                </div>
-                <div className='rounded-full bg-emerald-100 p-3'>
-                  <CheckCircle2 className='h-6 w-6 text-emerald-600' />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardContent className='p-6'>
-              <div className='flex items-center justify-between'>
-                <div>
-                  <p className='font-medium text-slate-600 text-sm'>Pending</p>
-                  <p className='mt-2 font-semibold text-3xl text-amber-600'>{pendingCount}</p>
-                </div>
-                <div className='rounded-full bg-amber-100 p-3'>
-                  <AlertCircle className='h-6 w-6 text-amber-600' />
-                </div>
-              </div>
-            </CardContent>
-          </Card>
+        <div className='mb-[24px] grid grid-cols-1 gap-[16px] sm:grid-cols-3'>
+          <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+            <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                Total Pauses
+              </span>
+            </div>
+            <div className='px-[16px] py-[16px]'>
+              <p className='font-semibold text-[28px] text-[var(--text-primary)]'>{totalPauses}</p>
+            </div>
+          </div>
+
+          <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+            <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Resumed</span>
+            </div>
+            <div className='px-[16px] py-[16px]'>
+              <p className='font-semibold text-[28px] text-[var(--text-success)]'>{resumedCount}</p>
+            </div>
+          </div>
+
+          <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+            <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+              <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Pending</span>
+            </div>
+            <div className='px-[16px] py-[16px]'>
+              <p className='font-semibold text-[28px] text-[var(--c-F59E0B)]'>{pendingCount}</p>
+            </div>
+          </div>
         </div>
 
         {/* Main Content */}
-        <div className='grid grid-cols-1 gap-6 lg:grid-cols-3'>
+        <div className='grid grid-cols-1 gap-[24px] lg:grid-cols-3'>
           {/* Left Column: Pause Points + History */}
-          <div className='space-y-6 lg:col-span-1'>
+          <div className='space-y-[24px] lg:col-span-1'>
             {/* Pause Points List */}
-            <Card className='h-fit'>
-              <CardHeader>
-                <CardTitle className='text-lg'>Pause Points</CardTitle>
-                <CardDescription>Select a pause point to view details</CardDescription>
-              </CardHeader>
-              <CardContent className='space-y-4'>
+            <div className='flex h-fit flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+              <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[12px]'>
+                <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Pause Points</h2>
+                <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'>
+                  Select a pause point to view details
+                </p>
+              </div>
+              <div className='space-y-[12px] p-[16px]'>
                 {groupedPausePoints.active.length === 0 &&
                 groupedPausePoints.resolved.length === 0 ? (
-                  <div className='flex flex-col items-center justify-center py-8 text-center'>
-                    <Clock className='mb-3 h-12 w-12 text-slate-300' />
-                    <p className='text-slate-500 text-sm'>No pause points found</p>
+                  <div className='flex flex-col items-center justify-center py-[32px] text-center'>
+                    <p className='text-[13px] text-[var(--text-secondary)]'>
+                      No pause points found
+                    </p>
                   </div>
                 ) : (
                   <>
                     {groupedPausePoints.active.length > 0 && (
-                      <div className='space-y-3'>
-                        <h3 className='font-semibold text-slate-500 text-xs uppercase tracking-wider'>
+                      <div className='space-y-[12px]'>
+                        <h3 className='font-medium text-[11px] text-[var(--text-muted)] uppercase tracking-wider'>
                           Active
                         </h3>
-                        <div className='space-y-2'>
+                        <div className='space-y-[8px]'>
                           {groupedPausePoints.active.map((pause) => renderPausePointCard(pause))}
                         </div>
                       </div>
@@ -1150,12 +1075,14 @@ export default function ResumeExecutionPage({
 
                     {groupedPausePoints.resolved.length > 0 && (
                       <>
-                        {groupedPausePoints.active.length > 0 && <Separator className='my-4' />}
-                        <div className='space-y-3'>
-                          <h3 className='font-semibold text-slate-500 text-xs uppercase tracking-wider'>
+                        {groupedPausePoints.active.length > 0 && (
+                          <Separator className='my-[16px]' />
+                        )}
+                        <div className='space-y-[12px]'>
+                          <h3 className='font-medium text-[11px] text-[var(--text-muted)] uppercase tracking-wider'>
                             Completed
                           </h3>
-                          <div className='space-y-2'>
+                          <div className='space-y-[8px]'>
                             {groupedPausePoints.resolved.map((pause) =>
                               renderPausePointCard(pause, true)
                             )}
@@ -1165,99 +1092,101 @@ export default function ResumeExecutionPage({
                     )}
                   </>
                 )}
-              </CardContent>
-            </Card>
+              </div>
+            </div>
 
             {/* History */}
             {selectedDetail && (
-              <Card>
-                <CardHeader>
-                  <CardTitle className='text-lg'>Resume History</CardTitle>
-                  <CardDescription>Previous resume attempts for this pause</CardDescription>
-                </CardHeader>
-                <CardContent>
+              <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[12px]'>
+                  <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>
+                    Resume History
+                  </h2>
+                  <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'>
+                    Previous resume attempts for this pause
+                  </p>
+                </div>
+                <div className='p-[16px]'>
                   {selectedDetail.queue.length > 0 ? (
-                    <div className='space-y-3'>
+                    <div className='space-y-[12px]'>
                       {selectedDetail.queue.map((entry) => {
                         const normalizedStatus = entry.status?.toLowerCase?.() ?? entry.status
                         return (
-                          <div key={entry.id} className='rounded-lg border bg-white p-3'>
-                            <div className='flex items-start justify-between gap-2'>
-                              <div className='space-y-2'>
-                                <ResumeStatusBadge status={normalizedStatus} />
-                                <div className='space-y-1 text-slate-600 text-xs'>
-                                  <p>
-                                    ID:{' '}
-                                    <span className='font-medium text-slate-900'>
-                                      {entry.newExecutionId}
-                                    </span>
-                                  </p>
-                                  {entry.claimedAt && <p>Started: {formatDate(entry.claimedAt)}</p>}
-                                  {entry.completedAt && (
-                                    <p>Completed: {formatDate(entry.completedAt)}</p>
-                                  )}
-                                </div>
-                                {entry.failureReason && (
-                                  <div className='mt-2 rounded border border-red-200 bg-red-50 p-2 text-red-700 text-xs'>
-                                    {entry.failureReason}
-                                  </div>
-                                )}
-                              </div>
-                              <span className='text-slate-400 text-xs'>
-                                {formatDate(entry.queuedAt)}
+                          <div
+                            key={entry.id}
+                            className='rounded-[6px] border border-[var(--border)] bg-[var(--surface-1)] p-[12px]'
+                          >
+                            <div className='mb-[8px] flex items-center justify-between'>
+                              <ResumeStatusBadge status={normalizedStatus} />
+                              <span className='font-medium text-[11px] text-[var(--text-primary)]'>
+                                {entry.newExecutionId}
                               </span>
                             </div>
+                            <div className='space-y-[4px] text-[11px] text-[var(--text-secondary)]'>
+                              <p>Queued: {formatDate(entry.queuedAt)}</p>
+                              {entry.claimedAt && (
+                                <p>Execution Started: {formatDate(entry.claimedAt)}</p>
+                              )}
+                              {entry.completedAt && (
+                                <p>Execution Completed: {formatDate(entry.completedAt)}</p>
+                              )}
+                            </div>
+                            {entry.failureReason && (
+                              <div className='mt-[8px] rounded-[4px] border border-[var(--text-error)]/20 bg-[var(--text-error)]/10 p-[8px] text-[11px] text-[var(--text-error)]'>
+                                {entry.failureReason}
+                              </div>
+                            )}
                           </div>
                         )
                       })}
                     </div>
                   ) : (
-                    <div className='flex flex-col items-center justify-center py-8 text-center'>
-                      <Clock className='mb-3 h-8 w-8 text-slate-300' />
-                      <p className='text-slate-500 text-sm'>No resume attempts yet</p>
+                    <div className='flex flex-col items-center justify-center py-[32px] text-center'>
+                      <p className='text-[13px] text-[var(--text-secondary)]'>
+                        No resume attempts yet
+                      </p>
                     </div>
                   )}
-                </CardContent>
-              </Card>
+                </div>
+              </div>
             )}
           </div>
 
           {/* Right Column: Content + Input */}
-          <div className='space-y-6 lg:col-span-2'>
+          <div className='space-y-[24px] lg:col-span-2'>
             {loadingDetail && !selectedDetail ? (
-              <Card>
-                <CardContent className='flex h-64 items-center justify-center p-6'>
-                  <div className='text-center'>
-                    <RefreshCw className='mx-auto mb-3 h-8 w-8 animate-spin text-slate-400' />
-                    <p className='text-slate-500 text-sm'>Loading pause details...</p>
-                  </div>
-                </CardContent>
-              </Card>
+              <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                <div className='flex h-[256px] items-center justify-center p-[24px]'>
+                  <p className='text-[13px] text-[var(--text-secondary)]'>
+                    Loading pause details...
+                  </p>
+                </div>
+              </div>
             ) : !selectedContextId ? (
-              <Card>
-                <CardContent className='flex h-64 items-center justify-center p-6'>
-                  <div className='text-center'>
-                    <FileText className='mx-auto mb-3 h-12 w-12 text-slate-300' />
-                    <p className='text-slate-500 text-sm'>Select a pause point to view details</p>
-                  </div>
-                </CardContent>
-              </Card>
+              <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                <div className='flex h-[256px] items-center justify-center p-[24px]'>
+                  <p className='text-[13px] text-[var(--text-secondary)]'>
+                    Select a pause point to view details
+                  </p>
+                </div>
+              </div>
             ) : !selectedDetail ? (
-              <Card>
-                <CardContent className='flex h-64 items-center justify-center p-6'>
-                  <div className='text-center'>
-                    <XCircle className='mx-auto mb-3 h-12 w-12 text-red-300' />
-                    <p className='text-slate-500 text-sm'>Pause details could not be loaded</p>
-                  </div>
-                </CardContent>
-              </Card>
+              <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                <div className='flex h-[256px] items-center justify-center p-[24px]'>
+                  <p className='text-[13px] text-[var(--text-secondary)]'>
+                    Pause details could not be loaded
+                  </p>
+                </div>
+              </div>
             ) : (
               <>
                 {/* Header with Status */}
                 <div className='flex items-center justify-between'>
                   <div>
-                    <h2 className='font-semibold text-2xl text-slate-900'>Pause Details</h2>
-                    <p className='mt-1 text-slate-600 text-sm'>
+                    <h2 className='font-medium text-[16px] text-[var(--text-primary)]'>
+                      Pause Details
+                    </h2>
+                    <p className='mt-[4px] text-[13px] text-[var(--text-secondary)]'>
                       Review content and provide input to resume
                     </p>
                   </div>
@@ -1266,75 +1195,81 @@ export default function ResumeExecutionPage({
 
                 {/* Active Resume Entry Alert */}
                 {selectedDetail.activeResumeEntry && (
-                  <Card className='border-blue-200 bg-blue-50/50'>
-                    <CardHeader>
-                      <div className='flex items-center justify-between'>
-                        <CardTitle className='text-blue-900 text-sm'>
-                          Current Resume Attempt
-                        </CardTitle>
-                        <ResumeStatusBadge
-                          status={
-                            selectedDetail.activeResumeEntry.status?.toLowerCase?.() ??
-                            selectedDetail.activeResumeEntry.status
-                          }
-                        />
-                      </div>
-                    </CardHeader>
-                    <CardContent className='space-y-2 text-blue-800 text-sm'>
+                  <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--brand-tertiary)]/30 bg-[var(--brand-tertiary)]/5'>
+                    <div className='flex items-center justify-between bg-[var(--brand-tertiary)]/10 px-[16px] py-[10px]'>
+                      <h3 className='font-medium text-[13px] text-[var(--brand-tertiary)]'>
+                        Current Resume Attempt
+                      </h3>
+                      <ResumeStatusBadge
+                        status={
+                          selectedDetail.activeResumeEntry.status?.toLowerCase?.() ??
+                          selectedDetail.activeResumeEntry.status
+                        }
+                      />
+                    </div>
+                    <div className='space-y-[4px] p-[16px] text-[13px] text-[var(--text-secondary)]'>
                       <p>
-                        Resume execution ID:{' '}
-                        <span className='font-medium'>
+                        Execution ID:{' '}
+                        <span className='font-medium text-[var(--text-primary)]'>
                           {selectedDetail.activeResumeEntry.newExecutionId}
                         </span>
                       </p>
                       {selectedDetail.activeResumeEntry.claimedAt && (
-                        <p>Started at {formatDate(selectedDetail.activeResumeEntry.claimedAt)}</p>
+                        <p>
+                          Execution Started:{' '}
+                          {formatDate(selectedDetail.activeResumeEntry.claimedAt)}
+                        </p>
                       )}
                       {selectedDetail.activeResumeEntry.completedAt && (
                         <p>
-                          Completed at {formatDate(selectedDetail.activeResumeEntry.completedAt)}
+                          Execution Completed:{' '}
+                          {formatDate(selectedDetail.activeResumeEntry.completedAt)}
                         </p>
                       )}
                       {selectedDetail.activeResumeEntry.failureReason && (
-                        <div className='mt-2 rounded border border-red-300 bg-red-100 p-3 text-red-800 text-sm'>
+                        <div className='mt-[8px] rounded-[4px] border border-[var(--text-error)]/30 bg-[var(--text-error)]/10 p-[12px] text-[13px] text-[var(--text-error)]'>
                           {selectedDetail.activeResumeEntry.failureReason}
                         </div>
                       )}
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 )}
 
                 {/* Content Section */}
                 {responseStructureRows.length > 0 ? (
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className='text-sm'>Content</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                      <div className='overflow-hidden rounded-lg border'>
-                        <table className='min-w-full divide-y divide-slate-200'>
-                          <thead className='bg-slate-50'>
-                            <tr>
-                              <th className='px-4 py-2 text-left font-medium text-slate-600 text-xs'>
+                  <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                    <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+                      <h3 className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Content
+                      </h3>
+                    </div>
+                    <div className='p-[16px]'>
+                      <div className='overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                        <table className='min-w-full divide-y divide-[var(--border)]'>
+                          <thead>
+                            <tr className='border-[var(--border)] border-b bg-[var(--surface-3)]'>
+                              <th className='px-[16px] py-[8px] text-left font-medium text-[11px] text-[var(--text-secondary)]'>
                                 Field
                               </th>
-                              <th className='px-4 py-2 text-left font-medium text-slate-600 text-xs'>
+                              <th className='px-[16px] py-[8px] text-left font-medium text-[11px] text-[var(--text-secondary)]'>
                                 Type
                               </th>
-                              <th className='px-4 py-2 text-left font-medium text-slate-600 text-xs'>
+                              <th className='px-[16px] py-[8px] text-left font-medium text-[11px] text-[var(--text-secondary)]'>
                                 Value
                               </th>
                             </tr>
                           </thead>
-                          <tbody className='divide-y divide-slate-200 bg-white'>
+                          <tbody className='divide-y divide-[var(--border)]'>
                             {responseStructureRows.map((row) => (
                               <tr key={row.id}>
-                                <td className='px-4 py-2 font-medium text-slate-800 text-sm'>
+                                <td className='px-[16px] py-[8px] font-medium text-[13px] text-[var(--text-primary)]'>
                                   {row.name}
                                 </td>
-                                <td className='px-4 py-2 text-slate-500 text-sm'>{row.type}</td>
-                                <td className='px-4 py-2'>
-                                  <pre className='max-h-32 overflow-auto whitespace-pre-wrap break-words font-mono text-slate-700 text-xs'>
+                                <td className='px-[16px] py-[8px] text-[13px] text-[var(--text-secondary)]'>
+                                  {row.type}
+                                </td>
+                                <td className='px-[16px] py-[8px]'>
+                                  <pre className='max-h-[128px] overflow-auto whitespace-pre-wrap break-words font-mono text-[11px] text-[var(--text-secondary)]'>
                                     {formatStructureValue(row.value)}
                                   </pre>
                                 </td>
@@ -1343,57 +1278,69 @@ export default function ResumeExecutionPage({
                           </tbody>
                         </table>
                       </div>
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 ) : (
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className='text-sm'>Pause Response Data</CardTitle>
-                    </CardHeader>
-                    <CardContent>
-                      <pre className='max-h-60 overflow-auto rounded-lg bg-slate-900 p-4 font-mono text-slate-100 text-xs'>
+                  <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                    <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+                      <h3 className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Pause Response Data
+                      </h3>
+                    </div>
+                    <div className='p-[16px]'>
+                      <pre className='max-h-[240px] overflow-auto rounded-[6px] bg-[#1e1e1e] p-[16px] font-mono text-[#d4d4d4] text-[12px]'>
                         {pauseResponsePreview}
                       </pre>
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 )}
 
                 {/* Input Section */}
                 {isHumanMode && hasInputFormat ? (
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className='text-sm'>Resume Form</CardTitle>
-                      <CardDescription>
+                  <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                    <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+                      <h3 className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Resume Form
+                      </h3>
+                      <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'>
                         Fill out the required fields to resume execution
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent className='space-y-4'>
+                      </p>
+                    </div>
+                    <div className='space-y-[16px] p-[16px]'>
                       {inputFormatFields.map((field) => (
-                        <div key={field.id} className='space-y-2'>
-                          <Label className='font-medium text-slate-700 text-sm'>
+                        <div key={field.id} className='space-y-[6px]'>
+                          <Label className='font-medium text-[13px] text-[var(--text-primary)]'>
                             {field.label}
-                            {field.required && <span className='ml-1 text-red-500'>*</span>}
+                            {field.required && (
+                              <span className='ml-[4px] text-[var(--text-error)]'>*</span>
+                            )}
                           </Label>
                           {field.description && (
-                            <p className='text-slate-500 text-xs'>{field.description}</p>
+                            <p className='text-[12px] text-[var(--text-muted)]'>
+                              {field.description}
+                            </p>
                           )}
                           {renderFieldInput(field)}
                           {formErrors[field.name] && (
-                            <p className='text-red-600 text-xs'>{formErrors[field.name]}</p>
+                            <p className='text-[12px] text-[var(--text-error)]'>
+                              {formErrors[field.name]}
+                            </p>
                           )}
                         </div>
                       ))}
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 ) : (
-                  <Card>
-                    <CardHeader>
-                      <CardTitle className='text-sm'>Resume Input (JSON)</CardTitle>
-                      <CardDescription>
+                  <div className='flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)]'>
+                    <div className='border-[var(--border)] border-b bg-[var(--surface-3)] px-[16px] py-[10px]'>
+                      <h3 className='font-medium text-[13px] text-[var(--text-primary)]'>
+                        Resume Input (JSON)
+                      </h3>
+                      <p className='mt-[2px] text-[12px] text-[var(--text-muted)]'>
                         Provide optional JSON input to pass to the resumed execution
-                      </CardDescription>
-                    </CardHeader>
-                    <CardContent>
+                      </p>
+                    </div>
+                    <div className='p-[16px]'>
                       <Textarea
                         id='resume-input-textarea'
                         value={resumeInput}
@@ -1407,29 +1354,23 @@ export default function ResumeExecutionPage({
                           }
                         }}
                         placeholder='{&#10;  "example": "value"&#10;}'
-                        className='min-h-[200px] font-mono text-sm'
+                        className='min-h-[200px] font-mono text-[13px]'
                       />
-                    </CardContent>
-                  </Card>
+                    </div>
+                  </div>
                 )}
 
                 {/* Error/Success Messages */}
                 {error && (
-                  <Card className='border-red-200 bg-red-50'>
-                    <CardContent className='flex items-start gap-3 p-4'>
-                      <XCircle className='mt-0.5 h-5 w-5 flex-shrink-0 text-red-600' />
-                      <div className='text-red-700 text-sm'>{error}</div>
-                    </CardContent>
-                  </Card>
+                  <div className='rounded-[6px] border border-[var(--text-error)]/30 bg-[var(--text-error)]/10 p-[16px]'>
+                    <p className='text-[13px] text-[var(--text-error)]'>{error}</p>
+                  </div>
                 )}
 
                 {message && (
-                  <Card className='border-emerald-200 bg-emerald-50'>
-                    <CardContent className='flex items-start gap-3 p-4'>
-                      <CheckCircle2 className='mt-0.5 h-5 w-5 flex-shrink-0 text-emerald-600' />
-                      <div className='text-emerald-700 text-sm'>{message}</div>
-                    </CardContent>
-                  </Card>
+                  <div className='rounded-[6px] border border-[var(--text-success)]/30 bg-[var(--text-success)]/10 p-[16px]'>
+                    <p className='text-[13px] text-[var(--text-success)]'>{message}</p>
+                  </div>
                 )}
 
                 {/* Action Buttons */}
@@ -1438,10 +1379,8 @@ export default function ResumeExecutionPage({
                     type='button'
                     onClick={handleResume}
                     disabled={resumeDisabled}
-                    className='gap-2'
-                    size='lg'
+                    variant='tertiary'
                   >
-                    <Play className='h-4 w-4' />
                     {loadingAction ? 'Resuming...' : 'Resume Execution'}
                   </Button>
                 </div>
@@ -1451,11 +1390,11 @@ export default function ResumeExecutionPage({
         </div>
       </div>
 
-      <div className='border-t bg-white py-4 text-center text-slate-600 text-sm'>
+      <div className='border-[var(--border)] border-t bg-[var(--surface-1)] py-[16px] text-center text-[13px] text-[var(--text-secondary)]'>
         Need help?{' '}
         <a
           href={`mailto:${brandConfig.supportEmail}`}
-          className='text-blue-600 underline-offset-4 transition hover:underline'
+          className='text-[var(--brand-primary)] underline-offset-4 transition hover:underline'
         >
           Contact support
         </a>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index 69f95ac562..2e08dbcc62 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { AlertCircle, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 import { useParams } from 'next/navigation'
 import { cn } from '@/lib/core/utils/cn'
 import { getStartDateFromTimeRange } from '@/lib/logs/filters'
@@ -424,8 +424,7 @@ export default function Logs() {
                   </div>
                 ) : logsQuery.isError ? (
                   <div className='flex h-full items-center justify-center'>
-                    <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
-                      <AlertCircle className='h-[16px] w-[16px]' />
+                    <div className='text-[var(--text-error)]'>
                       <span className='text-[13px]'>
                         Error: {logsQuery.error?.message || 'Failed to load logs'}
                       </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 4cad6ba7a2..31a4423f82 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -2,8 +2,16 @@
 
 import { useMemo, useRef } from 'react'
 import { Plus } from 'lucide-react'
-import { Button, Combobox, type ComboboxOption, Label, Trash } from '@/components/emcn'
-import { Input } from '@/components/ui/input'
+import {
+  Badge,
+  Button,
+  Combobox,
+  type ComboboxOption,
+  Input,
+  Label,
+  Trash,
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
 import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
@@ -14,14 +22,13 @@ import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
 import { useTagSelection } from '@/hooks/use-tag-selection'
 
-interface DocumentTagRow {
+interface DocumentTag {
   id: string
-  cells: {
-    tagName: string
-    tagSlot?: string
-    fieldType: string
-    value: string
-  }
+  tagName: string
+  tagSlot?: string
+  fieldType: string
+  value: string
+  collapsed?: boolean
 }
 
 interface DocumentTagEntryProps {
@@ -32,6 +39,17 @@ interface DocumentTagEntryProps {
   previewValue?: any
 }
 
+/**
+ * Creates a new document tag with default values
+ */
+const createDefaultTag = (): DocumentTag => ({
+  id: crypto.randomUUID(),
+  tagName: '',
+  fieldType: 'text',
+  value: '',
+  collapsed: false,
+})
+
 export function DocumentTagEntry({
   blockId,
   subBlock,
@@ -41,9 +59,9 @@ export function DocumentTagEntry({
 }: DocumentTagEntryProps) {
   const [storeValue, setStoreValue] = useSubBlockValue<string>(blockId, subBlock.id)
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
-  const valueInputRefs = useRef<Record<number, HTMLInputElement>>({})
+  const valueInputRefs = useRef<Record<string, HTMLInputElement>>({})
+  const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
 
-  // Use the extended hook for field-level management
   const inputController = useSubBlockInput({
     blockId,
     subBlockId: subBlock.id,
@@ -56,155 +74,127 @@ export function DocumentTagEntry({
     disabled,
   })
 
-  // Get the knowledge base ID from other sub-blocks
   const [knowledgeBaseIdValue] = useSubBlockValue(blockId, 'knowledgeBaseId')
   const knowledgeBaseId = knowledgeBaseIdValue || null
 
-  // Use KB tag definitions hook to get available tags
   const { tagDefinitions, isLoading } = useKnowledgeBaseTagDefinitions(knowledgeBaseId)
-
   const emitTagSelection = useTagSelection(blockId, subBlock.id)
 
-  // Use preview value when in preview mode, otherwise use store value
   const currentValue = isPreview ? previewValue : storeValue
 
-  // Transform stored JSON string to table format for display
-  const rows = useMemo(() => {
-    if (currentValue) {
-      try {
-        const tagData = JSON.parse(currentValue)
-        if (Array.isArray(tagData) && tagData.length > 0) {
-          return tagData.map((tag: any, index: number) => ({
-            id: tag.id || `tag-${index}`,
-            cells: {
-              tagName: tag.tagName || '',
-              tagSlot: tag.tagSlot,
-              fieldType: tag.fieldType || 'text',
-              value: tag.value || '',
-            },
-          }))
-        }
-      } catch {
-        // If parsing fails, fall through to default
-      }
+  const parseTags = (tagValue: string | null): DocumentTag[] => {
+    if (!tagValue) return []
+    try {
+      const parsed = JSON.parse(tagValue)
+      if (!Array.isArray(parsed)) return []
+      return parsed.map((t: DocumentTag) => ({
+        ...t,
+        fieldType: t.fieldType || 'text',
+        collapsed: t.collapsed ?? false,
+      }))
+    } catch {
+      return []
     }
+  }
 
-    // Default: just one empty row
-    return [
-      {
-        id: 'empty-row-0',
-        cells: { tagName: '', tagSlot: undefined, fieldType: 'text', value: '' },
-      },
-    ]
-  }, [currentValue])
+  const parsedTags = parseTags(currentValue || null)
+  const tags: DocumentTag[] = parsedTags.length > 0 ? parsedTags : [createDefaultTag()]
+  const isReadOnly = isPreview || disabled
 
-  // Get tag names already used in rows (case-insensitive)
+  // Get tag names already used (case-insensitive)
   const usedTagNames = useMemo(() => {
-    return new Set(
-      rows.map((row) => row.cells.tagName?.toLowerCase()).filter((name) => name?.trim())
-    )
-  }, [rows])
+    return new Set(tags.map((t) => t.tagName?.toLowerCase()).filter((name) => name?.trim()))
+  }, [tags])
 
   // Filter available tags (exclude already used ones)
   const availableTagDefinitions = useMemo(() => {
     return tagDefinitions.filter((def) => !usedTagNames.has(def.displayName.toLowerCase()))
   }, [tagDefinitions, usedTagNames])
 
-  // Can add more tags if there are available tag definitions
   const canAddMoreTags = availableTagDefinitions.length > 0
 
-  // Shared helper function for updating rows and generating JSON
-  const updateRowsAndGenerateJson = (
-    rowIndex: number,
-    column: string,
-    value: string,
-    tagDef?: { tagSlot: string; fieldType: string }
-  ) => {
-    const updatedRows = [...rows].map((row, idx) => {
-      if (idx === rowIndex) {
-        const newCells = { ...row.cells, [column]: value }
-
-        // When selecting a tag, also set the tagSlot and fieldType
-        if (column === 'tagName' && tagDef) {
-          newCells.tagSlot = tagDef.tagSlot
-          newCells.fieldType = tagDef.fieldType
-          // Clear value when tag changes
-          if (row.cells.tagName !== value) {
-            newCells.value = ''
-          }
-        }
-
-        return { ...row, cells: newCells }
-      }
-      return row
-    })
-
-    const dataToStore = updatedRows.map((row) => ({
-      id: row.id,
-      tagName: row.cells.tagName || '',
-      tagSlot: row.cells.tagSlot,
-      fieldType: row.cells.fieldType || 'text',
-      value: row.cells.value || '',
-    }))
-
-    return dataToStore.length > 0 ? JSON.stringify(dataToStore) : ''
+  /**
+   * Updates the store with new tags
+   */
+  const updateTags = (newTags: DocumentTag[]) => {
+    if (isReadOnly) return
+    const value = newTags.length > 0 ? JSON.stringify(newTags) : ''
+    setStoreValue(value)
   }
 
-  const handleTagSelection = (rowIndex: number, tagName: string) => {
-    if (isPreview || disabled) return
-
-    const tagDef = tagDefinitions.find((def) => def.displayName === tagName)
-    const jsonString = updateRowsAndGenerateJson(rowIndex, 'tagName', tagName, tagDef)
-    setStoreValue(jsonString)
+  /**
+   * Adds a new tag
+   */
+  const addTag = () => {
+    if (isReadOnly || !canAddMoreTags) return
+    updateTags([...tags, createDefaultTag()])
   }
 
-  const handleValueChange = (rowIndex: number, value: string) => {
-    if (isPreview || disabled) return
-
-    const jsonString = updateRowsAndGenerateJson(rowIndex, 'value', value)
-    setStoreValue(jsonString)
+  /**
+   * Removes a tag by ID (prevents removing the last tag)
+   */
+  const removeTag = (id: string) => {
+    if (isReadOnly || tags.length === 1) return
+    updateTags(tags.filter((t) => t.id !== id))
   }
 
-  const handleTagDropdownSelection = (rowIndex: number, value: string) => {
-    if (isPreview || disabled) return
-
-    const jsonString = updateRowsAndGenerateJson(rowIndex, 'value', value)
-    emitTagSelection(jsonString)
-  }
+  /**
+   * Updates a specific tag property
+   */
+  const updateTag = (id: string, field: keyof DocumentTag, value: any) => {
+    if (isReadOnly) return
+
+    const updatedTags = tags.map((t) => {
+      if (t.id === id) {
+        const updated = { ...t, [field]: value }
+
+        // When tag name changes, update tagSlot and fieldType, clear value
+        if (field === 'tagName') {
+          const tagDef = tagDefinitions.find((def) => def.displayName === value)
+          updated.tagSlot = tagDef?.tagSlot
+          updated.fieldType = tagDef?.fieldType || 'text'
+          if (t.tagName !== value) {
+            updated.value = ''
+          }
+        }
 
-  const handleAddRow = () => {
-    if (isPreview || disabled || !canAddMoreTags) return
+        return updated
+      }
+      return t
+    })
 
-    const currentData = currentValue ? JSON.parse(currentValue) : []
-    const newRowId = `tag-${currentData.length}-${Math.random().toString(36).slice(2, 11)}`
-    const newData = [...currentData, { id: newRowId, tagName: '', fieldType: 'text', value: '' }]
-    setStoreValue(JSON.stringify(newData))
+    updateTags(updatedTags)
   }
 
-  const handleDeleteRow = (rowIndex: number) => {
-    if (isPreview || disabled) return
+  /**
+   * Handles tag dropdown selection for value field
+   */
+  const handleTagDropdownSelection = (id: string, value: string) => {
+    if (isReadOnly) return
 
-    if (rows.length <= 1) {
-      // Clear the single row instead of deleting
-      setStoreValue('')
-      return
-    }
+    const updatedTags = tags.map((t) => (t.id === id ? { ...t, value } : t))
+    const jsonValue = updatedTags.length > 0 ? JSON.stringify(updatedTags) : ''
+    emitTagSelection(jsonValue)
+  }
 
-    const updatedRows = rows.filter((_, idx) => idx !== rowIndex)
-    const tableDataForStorage = updatedRows.map((row) => ({
-      id: row.id,
-      tagName: row.cells.tagName || '',
-      tagSlot: row.cells.tagSlot,
-      fieldType: row.cells.fieldType || 'text',
-      value: row.cells.value || '',
-    }))
+  /**
+   * Toggles the collapsed state of a tag
+   */
+  const toggleCollapse = (id: string) => {
+    if (isReadOnly) return
+    updateTags(tags.map((t) => (t.id === id ? { ...t, collapsed: !t.collapsed } : t)))
+  }
 
-    const jsonString = tableDataForStorage.length > 0 ? JSON.stringify(tableDataForStorage) : ''
-    setStoreValue(jsonString)
+  /**
+   * Syncs scroll position between input and overlay
+   */
+  const syncOverlayScroll = (tagId: string, scrollLeft: number) => {
+    const overlay = overlayRefs.current[tagId]
+    if (overlay) overlay.scrollLeft = scrollLeft
   }
 
   if (isPreview) {
-    const tagCount = rows.filter((r) => r.cells.tagName?.trim()).length
+    const tagCount = tags.filter((t) => t.tagName?.trim()).length
     return (
       <div className='space-y-1'>
         <Label className='font-medium text-muted-foreground text-xs'>Document Tags</Label>
@@ -215,13 +205,9 @@ export function DocumentTagEntry({
     )
   }
 
-  if (isLoading) {
-    return <div className='p-4 text-muted-foreground text-sm'>Loading tag definitions...</div>
-  }
-
-  if (tagDefinitions.length === 0) {
+  if (!isLoading && tagDefinitions.length === 0 && knowledgeBaseId) {
     return (
-      <div className='flex h-32 items-center justify-center rounded-lg border border-muted-foreground/25 bg-muted/20'>
+      <div className='flex h-32 items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[#1F1F1F]'>
         <div className='text-center'>
           <p className='font-medium text-[var(--text-secondary)] text-sm'>
             No tags defined for this knowledge base
@@ -234,156 +220,165 @@ export function DocumentTagEntry({
     )
   }
 
-  const renderHeader = () => (
-    <thead className='bg-transparent'>
-      <tr className='border-[var(--border-strong)] border-b bg-transparent'>
-        <th className='w-[50%] min-w-0 border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-          Tag
-        </th>
-        <th className='w-[50%] min-w-0 bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-          Value
-        </th>
-      </tr>
-    </thead>
+  /**
+   * Renders the tag header with name, badge, and action buttons
+   */
+  const renderTagHeader = (tag: DocumentTag, index: number) => (
+    <div
+      className='flex cursor-pointer items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'
+      onClick={() => toggleCollapse(tag.id)}
+    >
+      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+          {tag.tagName || `Tag ${index + 1}`}
+        </span>
+        {tag.tagName && <Badge size='sm'>{FIELD_TYPE_LABELS[tag.fieldType] || 'Text'}</Badge>}
+      </div>
+      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+        <Button
+          variant='ghost'
+          onClick={addTag}
+          disabled={isReadOnly || !canAddMoreTags}
+          className='h-auto p-0'
+        >
+          <Plus className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Add Tag</span>
+        </Button>
+        <Button
+          variant='ghost'
+          onClick={() => removeTag(tag.id)}
+          disabled={isReadOnly || tags.length === 1}
+          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+        >
+          <Trash className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Delete Tag</span>
+        </Button>
+      </div>
+    </div>
   )
 
-  const renderTagNameCell = (row: DocumentTagRow, rowIndex: number) => {
-    const cellValue = row.cells.tagName || ''
-
-    // Show tags that are either available OR currently selected for this row
-    const selectableTags = tagDefinitions.filter(
-      (def) => def.displayName === cellValue || !usedTagNames.has(def.displayName.toLowerCase())
-    )
-
-    const tagOptions: ComboboxOption[] = selectableTags.map((tag) => ({
-      value: tag.displayName,
-      label: `${tag.displayName} (${FIELD_TYPE_LABELS[tag.fieldType] || 'Text'})`,
-    }))
-
-    return (
-      <td className='relative min-w-0 overflow-hidden border-[var(--border-strong)] border-r bg-transparent p-0'>
-        <Combobox
-          options={tagOptions}
-          value={cellValue}
-          onChange={(value) => handleTagSelection(rowIndex, value)}
-          disabled={disabled || isLoading}
-          placeholder='Select tag'
-          className='!border-0 !bg-transparent hover:!bg-transparent px-[10px] py-[8px] font-medium text-sm leading-[21px] focus-visible:ring-0 focus-visible:ring-offset-0 [&>span]:truncate'
-        />
-      </td>
-    )
-  }
-
-  const renderValueCell = (row: DocumentTagRow, rowIndex: number) => {
-    const cellValue = row.cells.value || ''
-    const fieldType = row.cells.fieldType || 'text'
-    const cellKey = `value-${rowIndex}`
-    const placeholder = getPlaceholderForFieldType(fieldType)
-    const isTagSelected = !!row.cells.tagName?.trim()
+  /**
+   * Renders the value input with tag dropdown support
+   */
+  const renderValueInput = (tag: DocumentTag) => {
+    const fieldValue = tag.value || ''
+    const cellKey = `${tag.id}-value`
+    const placeholder = getPlaceholderForFieldType(tag.fieldType)
 
     const fieldState = inputController.fieldHelpers.getFieldState(cellKey)
     const handlers = inputController.fieldHelpers.createFieldHandlers(
       cellKey,
-      cellValue,
-      (newValue) => handleValueChange(rowIndex, newValue)
+      fieldValue,
+      (newValue) => updateTag(tag.id, 'value', newValue)
     )
     const tagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
       cellKey,
-      cellValue,
-      (newValue) => handleTagDropdownSelection(rowIndex, newValue)
+      fieldValue,
+      (newValue) => handleTagDropdownSelection(tag.id, newValue)
     )
 
     return (
-      <td className='relative min-w-0 overflow-hidden bg-transparent p-0'>
-        <div className='relative w-full'>
-          <Input
-            ref={(el) => {
-              if (el) valueInputRefs.current[rowIndex] = el
-            }}
-            value={cellValue}
-            onChange={handlers.onChange}
-            onKeyDown={handlers.onKeyDown}
-            onDrop={handlers.onDrop}
-            onDragOver={handlers.onDragOver}
-            disabled={disabled || !isTagSelected}
-            autoComplete='off'
-            placeholder={isTagSelected ? placeholder : 'Select a tag first'}
-            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 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 py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
-              {formatDisplayText(cellValue, {
-                accessiblePrefixes,
-                highlightAll: !accessiblePrefixes,
-              })}
-            </div>
+      <div className='relative'>
+        <Input
+          ref={(el) => {
+            if (el) valueInputRefs.current[cellKey] = el
+          }}
+          value={fieldValue}
+          onChange={handlers.onChange}
+          onKeyDown={handlers.onKeyDown}
+          onDrop={handlers.onDrop}
+          onDragOver={handlers.onDragOver}
+          onScroll={(e) => syncOverlayScroll(cellKey, e.currentTarget.scrollLeft)}
+          onPaste={() =>
+            setTimeout(() => {
+              const input = valueInputRefs.current[cellKey]
+              input && syncOverlayScroll(cellKey, input.scrollLeft)
+            }, 0)
+          }
+          disabled={isReadOnly}
+          autoComplete='off'
+          placeholder={placeholder}
+          className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
+        />
+        <div
+          ref={(el) => {
+            if (el) overlayRefs.current[cellKey] = el
+          }}
+          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+        >
+          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+            {formatDisplayText(
+              fieldValue,
+              accessiblePrefixes ? { accessiblePrefixes } : { highlightAll: true }
+            )}
           </div>
-          {fieldState.showTags && (
-            <TagDropdown
-              visible={fieldState.showTags}
-              onSelect={tagSelectHandler}
-              blockId={blockId}
-              activeSourceBlockId={fieldState.activeSourceBlockId}
-              inputValue={cellValue}
-              cursorPosition={fieldState.cursorPosition}
-              onClose={() => inputController.fieldHelpers.hideFieldDropdowns(cellKey)}
-              inputRef={
-                {
-                  current: valueInputRefs.current[rowIndex] || null,
-                } as React.RefObject<HTMLInputElement>
-              }
-            />
-          )}
         </div>
-      </td>
+        {fieldState.showTags && (
+          <TagDropdown
+            visible={fieldState.showTags}
+            onSelect={tagSelectHandler}
+            blockId={blockId}
+            activeSourceBlockId={fieldState.activeSourceBlockId}
+            inputValue={fieldValue}
+            cursorPosition={fieldState.cursorPosition}
+            onClose={() => inputController.fieldHelpers.hideFieldDropdowns(cellKey)}
+            inputRef={{ current: valueInputRefs.current[cellKey] || null }}
+          />
+        )}
+      </div>
     )
   }
 
-  const renderDeleteButton = (rowIndex: number) => {
-    if (isPreview || disabled) return null
+  /**
+   * Renders the tag content (tag selector and value input)
+   */
+  const renderTagContent = (tag: DocumentTag) => {
+    // Show tags that are either available OR currently selected for this tag
+    const selectableTags = tagDefinitions.filter(
+      (def) => def.displayName === tag.tagName || !usedTagNames.has(def.displayName.toLowerCase())
+    )
+
+    const tagOptions: ComboboxOption[] = selectableTags.map((t) => ({
+      value: t.displayName,
+      label: `${t.displayName} (${FIELD_TYPE_LABELS[t.fieldType] || 'Text'})`,
+    }))
 
     return (
-      <td className='w-0 p-0'>
-        <Button
-          variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[8px] transition-opacity'
-          onClick={() => handleDeleteRow(rowIndex)}
-        >
-          <Trash className='h-[14px] w-[14px]' />
-        </Button>
-      </td>
+      <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Tag</Label>
+          <Combobox
+            options={tagOptions}
+            value={tag.tagName}
+            onChange={(value) => updateTag(tag.id, 'tagName', value)}
+            disabled={isReadOnly || isLoading}
+            placeholder='Select tag'
+          />
+        </div>
+
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Value</Label>
+          {renderValueInput(tag)}
+        </div>
+      </div>
     )
   }
 
   return (
-    <div className='relative w-full'>
-      <div className='overflow-hidden rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
-        <table className='w-full table-fixed bg-transparent'>
-          {renderHeader()}
-          <tbody className='bg-transparent'>
-            {rows.map((row, rowIndex) => (
-              <tr
-                key={row.id}
-                className='group relative border-[var(--border-strong)] border-t bg-transparent'
-              >
-                {renderTagNameCell(row, rowIndex)}
-                {renderValueCell(row, rowIndex)}
-                {renderDeleteButton(rowIndex)}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-
-      {/* Add Tag Button */}
-      {!isPreview && !disabled && (
-        <div className='mt-3'>
-          <Button onClick={handleAddRow} disabled={!canAddMoreTags} className='h-7 px-2 text-xs'>
-            <Plus className='mr-1 h-2.5 w-2.5' />
-            Add Tag
-          </Button>
+    <div className='space-y-[8px]'>
+      {tags.map((tag, index) => (
+        <div
+          key={tag.id}
+          data-tag-id={tag.id}
+          className={cn(
+            'rounded-[4px] border border-[var(--border-1)]',
+            tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
+          )}
+        >
+          {renderTagHeader(tag, index)}
+          {!tag.collapsed && renderTagContent(tag)}
         </div>
-      )}
+      ))}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index 2757dea663..6403600c43 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -127,7 +127,7 @@ export function EvalInput({
   }
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-transparent px-[10px] py-[5px]'>
+    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-[10px] py-[5px]'>
       <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
         Metric {index + 1}
       </span>
@@ -171,12 +171,12 @@ export function EvalInput({
         <div
           key={metric.id}
           data-metric-id={metric.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)]'
         >
           {renderMetricHeader(metric, index)}
 
-          <div className='flex flex-col gap-[6px] border-[var(--border-1)] px-[10px] pt-[6px] pb-[10px]'>
-            <div key={`name-${metric.id}`} className='space-y-[4px]'>
+          <div className='flex flex-col gap-[8px] border-[var(--border-1)] px-[10px] pt-[6px] pb-[10px]'>
+            <div key={`name-${metric.id}`} className='flex flex-col gap-[6px]'>
               <Label className='text-[13px]'>Name</Label>
               <Input
                 name='name'
@@ -187,7 +187,7 @@ export function EvalInput({
               />
             </div>
 
-            <div key={`description-${metric.id}`} className='space-y-[4px]'>
+            <div key={`description-${metric.id}`} className='flex flex-col gap-[6px]'>
               <Label className='text-[13px]'>Description</Label>
               <div className='relative'>
                 {(() => {
@@ -254,8 +254,8 @@ export function EvalInput({
               </div>
             </div>
 
-            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-[6px]'>
-              <div className='space-y-[4px]'>
+            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-[8px]'>
+              <div className='flex flex-col gap-[6px]'>
                 <Label className='text-[13px]'>Min Value</Label>
                 <Input
                   type='text'
@@ -268,7 +268,7 @@ export function EvalInput({
                   name='eval-range-min'
                 />
               </div>
-              <div className='space-y-[4px]'>
+              <div className='flex flex-col gap-[6px]'>
                 <Label className='text-[13px]'>Max Value</Label>
                 <Input
                   type='text'
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 869f5d5f40..786ceba5f6 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
@@ -368,25 +368,25 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
+        'rounded-[4px] border border-[var(--border-1)]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
       <div
-        className='flex cursor-pointer items-center justify-between bg-transparent px-[10px] py-[5px]'
+        className='flex cursor-pointer items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'
         onClick={onToggleCollapse}
       >
         <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
           <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
             {fieldName}
           </span>
-          {fieldType && <Badge className='h-[20px] text-[13px]'>{fieldType}</Badge>}
+          {fieldType && <Badge size='sm'>{fieldType}</Badge>}
         </div>
       </div>
 
       {!collapsed && (
-        <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
-          <div className='space-y-[4px]'>
+        <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+          <div className='flex flex-col gap-[6px]'>
             <Label className='text-[13px]'>Value</Label>
             <div className='relative'>
               <Input
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 38bfef146e..6eae8ab382 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -1,16 +1,22 @@
 'use client'
 
-import { useState } from 'react'
+import { useRef } from 'react'
 import { Plus } from 'lucide-react'
-import { Button, Combobox, type ComboboxOption, Label, Trash } from '@/components/emcn'
-import { Input } from '@/components/ui/input'
+import {
+  Badge,
+  Button,
+  Combobox,
+  type ComboboxOption,
+  Input,
+  Label,
+  Trash,
+} from '@/components/emcn'
+import { cn } from '@/lib/core/utils/cn'
 import { FIELD_TYPE_LABELS, getPlaceholderForFieldType } from '@/lib/knowledge/constants'
 import { type FilterFieldType, getOperatorsForFieldType } from '@/lib/knowledge/filters/types'
 import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
-import {
-  checkTagTrigger,
-  TagDropdown,
-} from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
+import { TagDropdown } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown'
+import { useSubBlockInput } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/hooks/use-sub-block-input'
 import { useAccessibleReferencePrefixes } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-accessible-reference-prefixes'
 import type { SubBlockConfig } from '@/blocks/types'
 import { useKnowledgeBaseTagDefinitions } from '@/hooks/use-knowledge-base-tag-definitions'
@@ -24,19 +30,8 @@ interface TagFilter {
   fieldType: FilterFieldType
   operator: string
   tagValue: string
-  valueTo?: string // For 'between' operator
-}
-
-interface TagFilterRow {
-  id: string
-  cells: {
-    tagName: string
-    tagSlot?: string
-    fieldType: FilterFieldType
-    operator: string
-    value: string
-    valueTo?: string
-  }
+  valueTo?: string
+  collapsed?: boolean
 }
 
 interface KnowledgeTagFiltersProps {
@@ -47,6 +42,18 @@ interface KnowledgeTagFiltersProps {
   previewValue?: string | null
 }
 
+/**
+ * Creates a new filter with default values
+ */
+const createDefaultFilter = (): TagFilter => ({
+  id: crypto.randomUUID(),
+  tagName: '',
+  fieldType: 'text',
+  operator: 'eq',
+  tagValue: '',
+  collapsed: false,
+})
+
 export function KnowledgeTagFilters({
   blockId,
   subBlock,
@@ -56,30 +63,37 @@ export function KnowledgeTagFilters({
 }: KnowledgeTagFiltersProps) {
   const [storeValue, setStoreValue] = useSubBlockValue<string | null>(blockId, subBlock.id)
   const emitTagSelection = useTagSelection(blockId, subBlock.id)
+  const valueInputRefs = useRef<Record<string, HTMLInputElement>>({})
+  const overlayRefs = useRef<Record<string, HTMLDivElement>>({})
 
   const [knowledgeBaseIdValue] = useSubBlockValue(blockId, 'knowledgeBaseId')
   const knowledgeBaseId = knowledgeBaseIdValue || null
 
   const { tagDefinitions, isLoading } = useKnowledgeBaseTagDefinitions(knowledgeBaseId)
-
   const accessiblePrefixes = useAccessibleReferencePrefixes(blockId)
 
-  const [activeTagDropdown, setActiveTagDropdown] = useState<{
-    rowIndex: number
-    showTags: boolean
-    cursorPosition: number
-    activeSourceBlockId: string | null
-    element?: HTMLElement | null
-  } | null>(null)
+  const inputController = useSubBlockInput({
+    blockId,
+    subBlockId: subBlock.id,
+    config: {
+      id: subBlock.id,
+      type: 'knowledge-tag-filters',
+      connectionDroppable: true,
+    },
+    isPreview,
+    disabled,
+  })
 
   const parseFilters = (filterValue: string | null): TagFilter[] => {
     if (!filterValue) return []
     try {
       const parsed = JSON.parse(filterValue)
+      if (!Array.isArray(parsed)) return []
       return parsed.map((f: TagFilter) => ({
         ...f,
         fieldType: f.fieldType || 'text',
         operator: f.operator || 'eq',
+        collapsed: f.collapsed ?? false,
       }))
     } catch {
       return []
@@ -87,145 +101,103 @@ export function KnowledgeTagFilters({
   }
 
   const currentValue = isPreview ? previewValue : storeValue
-  const filters = parseFilters(currentValue || null)
-
-  const rows: TagFilterRow[] =
-    filters.length > 0
-      ? filters.map((filter) => ({
-          id: filter.id,
-          cells: {
-            tagName: filter.tagName || '',
-            tagSlot: filter.tagSlot,
-            fieldType: filter.fieldType || 'text',
-            operator: filter.operator || 'eq',
-            value: filter.tagValue || '',
-            valueTo: filter.valueTo,
-          },
-        }))
-      : [
-          {
-            id: 'empty-row-0',
-            cells: { tagName: '', fieldType: 'text', operator: '', value: '' },
-          },
-        ]
+  const parsedFilters = parseFilters(currentValue || null)
+  const filters: TagFilter[] = parsedFilters.length > 0 ? parsedFilters : [createDefaultFilter()]
+  const isReadOnly = isPreview || disabled
 
+  /**
+   * Updates the store with new filters
+   */
   const updateFilters = (newFilters: TagFilter[]) => {
-    if (isPreview) return
+    if (isReadOnly) return
     const value = newFilters.length > 0 ? JSON.stringify(newFilters) : null
     setStoreValue(value)
   }
 
-  const rowsToFilters = (rowsToConvert: TagFilterRow[]): TagFilter[] => {
-    return rowsToConvert
-      .filter((row) => row.cells.tagName?.trim())
-      .map((row) => ({
-        id: row.id,
-        tagName: row.cells.tagName || '',
-        tagSlot: row.cells.tagSlot,
-        fieldType: row.cells.fieldType || 'text',
-        operator: row.cells.operator || 'eq',
-        tagValue: row.cells.value || '',
-        valueTo: row.cells.valueTo,
-      }))
+  /**
+   * Adds a new filter
+   */
+  const addFilter = () => {
+    if (isReadOnly) return
+    updateFilters([...filters, createDefaultFilter()])
   }
 
-  const handleCellChange = (rowIndex: number, column: string, value: string | FilterFieldType) => {
-    if (isPreview || disabled) return
+  /**
+   * Removes a filter by ID (prevents removing the last filter)
+   */
+  const removeFilter = (id: string) => {
+    if (isReadOnly || filters.length === 1) return
+    updateFilters(filters.filter((f) => f.id !== id))
+  }
 
-    const updatedRows = [...rows].map((row, idx) => {
-      if (idx === rowIndex) {
-        const newCells = { ...row.cells, [column]: value }
+  /**
+   * Updates a specific filter property
+   */
+  const updateFilter = (id: string, field: keyof TagFilter, value: any) => {
+    if (isReadOnly) return
+
+    const updatedFilters = filters.map((f) => {
+      if (f.id === id) {
+        const updated = { ...f, [field]: value }
+
+        // When tag changes, reset operator and value based on new field type
+        if (field === 'tagName') {
+          const tagDef = tagDefinitions.find((t) => t.displayName === value)
+          const fieldType = (tagDef?.fieldType || 'text') as FilterFieldType
+          const operators = getOperatorsForFieldType(fieldType)
+          updated.tagSlot = tagDef?.tagSlot
+          updated.fieldType = fieldType
+          updated.operator = operators[0]?.value || 'eq'
+          updated.tagValue = ''
+          updated.valueTo = undefined
+        }
 
-        if (column === 'fieldType') {
+        // When field type changes, reset operator and value
+        if (field === 'fieldType') {
           const operators = getOperatorsForFieldType(value as FilterFieldType)
-          newCells.operator = operators[0]?.value || 'eq'
-          newCells.value = ''
-          newCells.valueTo = undefined
+          updated.operator = operators[0]?.value || 'eq'
+          updated.tagValue = ''
+          updated.valueTo = undefined
         }
 
-        if (column === 'operator' && value !== 'between') {
-          newCells.valueTo = undefined
+        // When operator changes from 'between', clear valueTo
+        if (field === 'operator' && value !== 'between') {
+          updated.valueTo = undefined
         }
 
-        return { ...row, cells: newCells }
-      }
-      return row
-    })
-
-    updateFilters(rowsToFilters(updatedRows))
-  }
-
-  const handleTagNameSelection = (rowIndex: number, tagName: string) => {
-    if (isPreview || disabled) return
-
-    const tagDef = tagDefinitions.find((t) => t.displayName === tagName)
-    const fieldType = (tagDef?.fieldType || 'text') as FilterFieldType
-    const operators = getOperatorsForFieldType(fieldType)
-
-    const updatedRows = [...rows].map((row, idx) => {
-      if (idx === rowIndex) {
-        return {
-          ...row,
-          cells: {
-            ...row.cells,
-            tagName,
-            tagSlot: tagDef?.tagSlot,
-            fieldType,
-            operator: operators[0]?.value || 'eq',
-            value: '',
-            valueTo: undefined,
-          },
-        }
+        return updated
       }
-      return row
+      return f
     })
 
-    updateFilters(rowsToFilters(updatedRows))
+    updateFilters(updatedFilters)
   }
 
-  const handleTagDropdownSelection = (rowIndex: number, column: string, value: string) => {
-    if (isPreview || disabled) return
-
-    const updatedRows = [...rows].map((row, idx) => {
-      if (idx === rowIndex) {
-        return {
-          ...row,
-          cells: { ...row.cells, [column]: value },
-        }
-      }
-      return row
-    })
+  /**
+   * Handles tag dropdown selection for value field
+   */
+  const handleTagDropdownSelection = (id: string, field: 'tagValue' | 'valueTo', value: string) => {
+    if (isReadOnly) return
 
-    const jsonValue =
-      rowsToFilters(updatedRows).length > 0 ? JSON.stringify(rowsToFilters(updatedRows)) : null
+    const updatedFilters = filters.map((f) => (f.id === id ? { ...f, [field]: value } : f))
+    const jsonValue = updatedFilters.length > 0 ? JSON.stringify(updatedFilters) : null
     emitTagSelection(jsonValue)
   }
 
-  const handleAddRow = () => {
-    if (isPreview || disabled) return
-
-    const newRowId = `filter-${filters.length}-${Math.random().toString(36).slice(2, 11)}`
-    const newFilter: TagFilter = {
-      id: newRowId,
-      tagName: '',
-      fieldType: 'text',
-      operator: 'eq',
-      tagValue: '',
-    }
-    updateFilters([...filters, newFilter])
+  /**
+   * Toggles the collapsed state of a filter
+   */
+  const toggleCollapse = (id: string) => {
+    if (isReadOnly) return
+    updateFilters(filters.map((f) => (f.id === id ? { ...f, collapsed: !f.collapsed } : f)))
   }
 
-  const handleDeleteRow = (rowIndex: number) => {
-    if (isPreview || disabled) return
-
-    if (rows.length <= 1) {
-      // Clear the single row instead of deleting
-      setStoreValue(null)
-      return
-    }
-
-    const updatedRows = rows.filter((_, idx) => idx !== rowIndex)
-    updateFilters(rowsToFilters(updatedRows))
+  /**
+   * Syncs scroll position between input and overlay
+   */
+  const syncOverlayScroll = (filterId: string, scrollLeft: number) => {
+    const overlay = overlayRefs.current[filterId]
+    if (overlay) overlay.scrollLeft = scrollLeft
   }
 
   if (isPreview) {
@@ -241,238 +213,182 @@ export function KnowledgeTagFilters({
     )
   }
 
-  const renderHeader = () => (
-    <thead className='bg-transparent'>
-      <tr className='border-[var(--border-strong)] border-b bg-transparent'>
-        <th className='w-[35%] min-w-0 border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-          Tag
-        </th>
-        <th className='w-[35%] min-w-0 border-[var(--border-strong)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-          Operator
-        </th>
-        <th className='w-[30%] min-w-0 bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
-          Value
-        </th>
-      </tr>
-    </thead>
+  /**
+   * Renders the filter header with name, badge, and action buttons
+   */
+  const renderFilterHeader = (filter: TagFilter, index: number) => (
+    <div
+      className='flex cursor-pointer items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'
+      onClick={() => toggleCollapse(filter.id)}
+    >
+      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+          {filter.tagName || `Filter ${index + 1}`}
+        </span>
+        {filter.tagName && <Badge size='sm'>{FIELD_TYPE_LABELS[filter.fieldType] || 'Text'}</Badge>}
+      </div>
+      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+        <Button variant='ghost' onClick={addFilter} disabled={isReadOnly} className='h-auto p-0'>
+          <Plus className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Add Filter</span>
+        </Button>
+        <Button
+          variant='ghost'
+          onClick={() => removeFilter(filter.id)}
+          disabled={isReadOnly || filters.length === 1}
+          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+        >
+          <Trash className='h-[14px] w-[14px]' />
+          <span className='sr-only'>Delete Filter</span>
+        </Button>
+      </div>
+    </div>
   )
 
-  const renderTagNameCell = (row: TagFilterRow, rowIndex: number) => {
-    const cellValue = row.cells.tagName || ''
-
-    const tagOptions: ComboboxOption[] = tagDefinitions.map((tag) => ({
-      value: tag.displayName,
-      label: `${tag.displayName} (${FIELD_TYPE_LABELS[tag.fieldType] || 'Text'})`,
-    }))
-
-    return (
-      <td className='relative min-w-0 overflow-hidden border-[var(--border-strong)] border-r bg-transparent p-0'>
-        <Combobox
-          options={tagOptions}
-          value={cellValue}
-          onChange={(value) => handleTagNameSelection(rowIndex, value)}
-          disabled={disabled || isLoading}
-          placeholder='Select tag'
-          className='!border-0 !bg-transparent hover:!bg-transparent px-[10px] py-[8px] font-medium text-sm leading-[21px] focus-visible:ring-0 focus-visible:ring-offset-0 [&>span]:truncate'
-        />
-      </td>
+  /**
+   * Renders the value input with tag dropdown support
+   */
+  const renderValueInput = (filter: TagFilter, field: 'tagValue' | 'valueTo') => {
+    const fieldValue = field === 'tagValue' ? filter.tagValue : filter.valueTo || ''
+    const cellKey = `${filter.id}-${field}`
+    const placeholder = getPlaceholderForFieldType(filter.fieldType)
+
+    const fieldState = inputController.fieldHelpers.getFieldState(cellKey)
+    const handlers = inputController.fieldHelpers.createFieldHandlers(
+      cellKey,
+      fieldValue,
+      (newValue) => updateFilter(filter.id, field, newValue)
     )
-  }
-
-  const renderOperatorCell = (row: TagFilterRow, rowIndex: number) => {
-    const fieldType = row.cells.fieldType || 'text'
-    const operator = row.cells.operator || ''
-    const operators = getOperatorsForFieldType(fieldType)
-    const isOperatorDisabled = disabled || !row.cells.tagName
-
-    const operatorOptions: ComboboxOption[] = operators.map((op) => ({
-      value: op.value,
-      label: op.label,
-    }))
-
-    return (
-      <td className='relative min-w-0 overflow-hidden border-[var(--border-strong)] border-r bg-transparent p-0'>
-        <Combobox
-          options={operatorOptions}
-          value={operator}
-          onChange={(value) => handleCellChange(rowIndex, 'operator', value)}
-          disabled={isOperatorDisabled}
-          placeholder='Select operator'
-          className='!border-0 !bg-transparent hover:!bg-transparent px-[10px] py-[8px] font-medium text-sm leading-[21px] focus-visible:ring-0 focus-visible:ring-offset-0 [&>span]:truncate'
-        />
-      </td>
+    const tagSelectHandler = inputController.fieldHelpers.createTagSelectHandler(
+      cellKey,
+      fieldValue,
+      (newValue) => handleTagDropdownSelection(filter.id, field, newValue)
     )
-  }
 
-  const renderValueCell = (row: TagFilterRow, rowIndex: number) => {
-    const cellValue = row.cells.value || ''
-    const fieldType = row.cells.fieldType || 'text'
-    const operator = row.cells.operator || 'eq'
-    const isBetween = operator === 'between'
-    const valueTo = row.cells.valueTo || ''
-    const isDisabled = disabled || !row.cells.tagName
-    const placeholder = getPlaceholderForFieldType(fieldType)
-
-    const renderInput = (value: string, column: 'value' | 'valueTo') => (
-      <div className='relative w-full'>
+    return (
+      <div className='relative'>
         <Input
-          value={value}
-          onChange={(e) => {
-            const newValue = e.target.value
-            const cursorPosition = e.target.selectionStart ?? 0
-
-            handleCellChange(rowIndex, column, newValue)
-
-            if (column === 'value') {
-              const tagTrigger = checkTagTrigger(newValue, cursorPosition)
-
-              setActiveTagDropdown({
-                rowIndex,
-                showTags: tagTrigger.show,
-                cursorPosition,
-                activeSourceBlockId: null,
-                element: e.target,
-              })
-            }
-          }}
-          onFocus={(e) => {
-            if (!isDisabled && column === 'value') {
-              setActiveTagDropdown({
-                rowIndex,
-                showTags: false,
-                cursorPosition: 0,
-                activeSourceBlockId: null,
-                element: e.target,
-              })
-            }
+          ref={(el) => {
+            if (el) valueInputRefs.current[cellKey] = el
           }}
-          onBlur={() => {
-            if (column === 'value') {
-              setTimeout(() => setActiveTagDropdown(null), 200)
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              setActiveTagDropdown(null)
-            }
-          }}
-          disabled={isDisabled}
+          value={fieldValue}
+          onChange={handlers.onChange}
+          onKeyDown={handlers.onKeyDown}
+          onDrop={handlers.onDrop}
+          onDragOver={handlers.onDragOver}
+          onScroll={(e) => syncOverlayScroll(cellKey, e.currentTarget.scrollLeft)}
+          onPaste={() =>
+            setTimeout(() => {
+              const input = valueInputRefs.current[cellKey]
+              input && syncOverlayScroll(cellKey, input.scrollLeft)
+            }, 0)
+          }
+          disabled={isReadOnly}
           autoComplete='off'
           placeholder={placeholder}
-          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'
+          className='allow-scroll w-full overflow-auto text-transparent caret-foreground'
         />
-        <div 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 py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
-            {formatDisplayText(value || '', {
-              accessiblePrefixes,
-              highlightAll: !accessiblePrefixes,
-            })}
+        <div
+          ref={(el) => {
+            if (el) overlayRefs.current[cellKey] = el
+          }}
+          className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
+        >
+          <div className='w-full whitespace-pre' style={{ minWidth: 'fit-content' }}>
+            {formatDisplayText(
+              fieldValue,
+              accessiblePrefixes ? { accessiblePrefixes } : { highlightAll: true }
+            )}
           </div>
         </div>
+        {fieldState.showTags && (
+          <TagDropdown
+            visible={fieldState.showTags}
+            onSelect={tagSelectHandler}
+            blockId={blockId}
+            activeSourceBlockId={fieldState.activeSourceBlockId}
+            inputValue={fieldValue}
+            cursorPosition={fieldState.cursorPosition}
+            onClose={() => inputController.fieldHelpers.hideFieldDropdowns(cellKey)}
+            inputRef={{ current: valueInputRefs.current[cellKey] || null }}
+          />
+        )}
       </div>
     )
+  }
 
-    if (isBetween) {
-      return (
-        <td className='relative min-w-0 overflow-hidden bg-transparent p-0'>
-          <div className='flex items-center gap-1 px-[10px]'>
-            {renderInput(cellValue, 'value')}
-            <span className='flex-shrink-0 text-muted-foreground text-xs'>to</span>
-            {renderInput(valueTo, 'valueTo')}
-          </div>
-        </td>
-      )
-    }
+  /**
+   * Renders the filter content (tag, operator, value inputs)
+   */
+  const renderFilterContent = (filter: TagFilter) => {
+    const tagOptions: ComboboxOption[] = tagDefinitions.map((tag) => ({
+      value: tag.displayName,
+      label: `${tag.displayName} (${FIELD_TYPE_LABELS[tag.fieldType] || 'Text'})`,
+    }))
 
-    return (
-      <td className='relative min-w-0 overflow-hidden bg-transparent p-0'>
-        {renderInput(cellValue, 'value')}
-      </td>
-    )
-  }
+    const operators = getOperatorsForFieldType(filter.fieldType)
+    const operatorOptions: ComboboxOption[] = operators.map((op) => ({
+      value: op.value,
+      label: op.label,
+    }))
 
-  const renderDeleteButton = (rowIndex: number) => {
-    if (isPreview || disabled) return null
+    const isBetween = filter.operator === 'between'
 
     return (
-      <td className='w-0 p-0'>
-        <Button
-          variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[8px] transition-opacity'
-          onClick={() => handleDeleteRow(rowIndex)}
-        >
-          <Trash className='h-[14px] w-[14px]' />
-        </Button>
-      </td>
-    )
-  }
+      <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Tag</Label>
+          <Combobox
+            options={tagOptions}
+            value={filter.tagName}
+            onChange={(value) => updateFilter(filter.id, 'tagName', value)}
+            disabled={isReadOnly || isLoading}
+            placeholder='Select tag'
+          />
+        </div>
 
-  if (isLoading) {
-    return <div className='p-4 text-muted-foreground text-sm'>Loading tag definitions...</div>
-  }
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Operator</Label>
+          <Combobox
+            options={operatorOptions}
+            value={filter.operator}
+            onChange={(value) => updateFilter(filter.id, 'operator', value)}
+            disabled={isReadOnly}
+            placeholder='Select operator'
+          />
+        </div>
 
-  return (
-    <div className='relative w-full'>
-      <div className='overflow-hidden rounded-[4px] border border-[var(--border-strong)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
-        <table className='w-full table-fixed bg-transparent'>
-          {renderHeader()}
-          <tbody className='bg-transparent'>
-            {rows.map((row, rowIndex) => (
-              <tr
-                key={row.id}
-                className='group relative border-[var(--border-strong)] border-t bg-transparent'
-              >
-                {renderTagNameCell(row, rowIndex)}
-                {renderOperatorCell(row, rowIndex)}
-                {renderValueCell(row, rowIndex)}
-                {renderDeleteButton(rowIndex)}
-              </tr>
-            ))}
-          </tbody>
-        </table>
+        <div className='flex flex-col gap-[6px]'>
+          <Label className='text-[13px]'>Value</Label>
+          {isBetween ? (
+            <div className='flex items-center gap-2'>
+              <div className='flex-1'>{renderValueInput(filter, 'tagValue')}</div>
+              <span className='flex-shrink-0 text-muted-foreground text-xs'>to</span>
+              <div className='flex-1'>{renderValueInput(filter, 'valueTo')}</div>
+            </div>
+          ) : (
+            renderValueInput(filter, 'tagValue')
+          )}
+        </div>
       </div>
+    )
+  }
 
-      {/* Tag Dropdown */}
-      {activeTagDropdown?.element && (
-        <TagDropdown
-          visible={activeTagDropdown.showTags}
-          onSelect={(newValue) => {
-            // Use immediate emission for tag dropdown selections
-            handleTagDropdownSelection(activeTagDropdown.rowIndex, 'value', newValue)
-            setActiveTagDropdown(null)
-          }}
-          blockId={blockId}
-          activeSourceBlockId={activeTagDropdown.activeSourceBlockId}
-          inputValue={rows[activeTagDropdown.rowIndex]?.cells.value || ''}
-          cursorPosition={activeTagDropdown.cursorPosition}
-          onClose={() => {
-            setActiveTagDropdown((prev) => (prev ? { ...prev, showTags: false } : null))
-          }}
-          className='absolute z-[9999] mt-0'
-        />
-      )}
-
-      {/* Add Filter Button */}
-      {!isPreview && !disabled && (
-        <div className='mt-3 flex items-center justify-between'>
-          <Button onClick={handleAddRow} className='h-7 px-2 text-xs'>
-            <Plus className='mr-1 h-2.5 w-2.5' />
-            Add Filter
-          </Button>
-
-          {/* Filter count indicator */}
-          {(() => {
-            const appliedFilters = filters.filter(
-              (f) => f.tagName.trim() && f.tagValue.trim()
-            ).length
-            return (
-              <div className='text-muted-foreground text-xs'>
-                {appliedFilters} filter{appliedFilters !== 1 ? 's' : ''} applied
-              </div>
-            )
-          })()}
+  return (
+    <div className='space-y-[8px]'>
+      {filters.map((filter, index) => (
+        <div
+          key={filter.id}
+          data-filter-id={filter.id}
+          className={cn(
+            'rounded-[4px] border border-[var(--border-1)]',
+            filter.collapsed ? 'overflow-hidden' : 'overflow-visible'
+          )}
+        >
+          {renderFilterHeader(filter, index)}
+          {!filter.collapsed && renderFilterContent(filter)}
         </div>
-      )}
+      ))}
     </div>
   )
 }
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 a8207aa313..a6874adacc 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
@@ -163,14 +163,14 @@ export function FieldFormat({
    */
   const renderFieldHeader = (field: Field, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between bg-transparent px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'
       onClick={() => toggleCollapse(field.id)}
     >
       <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
         <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
           {field.name || `${title} ${index + 1}`}
         </span>
-        {field.name && showType && <Badge className='h-[20px] text-[13px]'>{field.type}</Badge>}
+        {field.name && showType && <Badge size='sm'>{field.type}</Badge>}
       </div>
       <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
@@ -407,15 +407,15 @@ export function FieldFormat({
           key={field.id}
           data-field-id={field.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
+            'rounded-[4px] border border-[var(--border-1)]',
             field.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
           {renderFieldHeader(field, index)}
 
           {!field.collapsed && (
-            <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
-              <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+              <div className='flex flex-col gap-[6px]'>
                 <Label className='text-[13px]'>Name</Label>
                 <Input
                   name='name'
@@ -428,7 +428,7 @@ export function FieldFormat({
               </div>
 
               {showType && (
-                <div className='space-y-[4px]'>
+                <div className='flex flex-col gap-[6px]'>
                   <Label className='text-[13px]'>Type</Label>
                   <Combobox
                     options={TYPE_OPTIONS}
@@ -440,7 +440,7 @@ export function FieldFormat({
               )}
 
               {showValue && (
-                <div className='space-y-[4px]'>
+                <div className='flex flex-col gap-[6px]'>
                   <Label className='text-[13px]'>Value</Label>
                   <div className='relative'>{renderValueInput(field)}</div>
                 </div>
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 b52792a651..a4df7298aa 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,21 +294,19 @@ export function VariablesInput({
                 key={assignment.id}
                 data-assignment-id={assignment.id}
                 className={cn(
-                  'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]',
+                  'rounded-[4px] border border-[var(--border-1)]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between bg-transparent px-[10px] py-[5px]'
+                  className='flex cursor-pointer items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'
                   onClick={() => toggleCollapse(assignment.id)}
                 >
                   <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
                     <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
                       {assignment.variableName || `Variable ${index + 1}`}
                     </span>
-                    {assignment.variableName && (
-                      <Badge className='h-[20px] text-[13px]'>{assignment.type}</Badge>
-                    )}
+                    {assignment.variableName && <Badge size='sm'>{assignment.type}</Badge>}
                   </div>
                   <div
                     className='flex items-center gap-[8px] pl-[8px]'
@@ -336,8 +334,8 @@ export function VariablesInput({
                 </div>
 
                 {!collapsed && (
-                  <div className='flex flex-col gap-[6px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
-                    <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t px-[10px] pt-[6px] pb-[10px]'>
+                    <div className='flex flex-col gap-[6px]'>
                       <Label className='text-[13px]'>Variable</Label>
                       <Combobox
                         options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
@@ -348,7 +346,7 @@ export function VariablesInput({
                       />
                     </div>
 
-                    <div className='space-y-[4px]'>
+                    <div className='flex flex-col gap-[6px]'>
                       <Label className='text-[13px]'>Value</Label>
                       {assignment.type === 'object' || assignment.type === 'array' ? (
                         <div className='relative'>
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 fd2d79d7fb..771b00eb72 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
@@ -55,7 +55,7 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
  */
 const MIN_HEIGHT = 30
 const NEAR_MIN_THRESHOLD = 40
-const DEFAULT_EXPANDED_HEIGHT = 196
+const DEFAULT_EXPANDED_HEIGHT = 155
 
 /**
  * Column width constants - numeric values for calculations
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
index df49fee343..8715081e42 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx
@@ -549,16 +549,25 @@ export function General({ onOpenChange }: GeneralProps) {
         </div>
       )}
 
-      {!isAuthDisabled && (
-        <div className='mt-auto flex items-center gap-[8px]'>
-          <Button onClick={handleSignOut} variant='active'>
-            Sign out
-          </Button>
-          <Button onClick={() => setShowResetPasswordModal(true)} variant='active'>
-            Reset password
-          </Button>
-        </div>
-      )}
+      <div className='mt-auto flex items-center gap-[8px]'>
+        {!isAuthDisabled && (
+          <>
+            <Button onClick={handleSignOut} variant='active'>
+              Sign out
+            </Button>
+            <Button onClick={() => setShowResetPasswordModal(true)} variant='active'>
+              Reset password
+            </Button>
+          </>
+        )}
+        <Button
+          onClick={() => window.open('/', '_blank', 'noopener,noreferrer')}
+          variant='active'
+          className='ml-auto'
+        >
+          Landing
+        </Button>
+      </div>
 
       {/* Password Reset Confirmation Modal */}
       <Modal open={showResetPasswordModal} onOpenChange={setShowResetPasswordModal}>
diff --git a/apps/sim/stores/terminal/store.ts b/apps/sim/stores/terminal/store.ts
index c4f31c5b11..80e0b561c4 100644
--- a/apps/sim/stores/terminal/store.ts
+++ b/apps/sim/stores/terminal/store.ts
@@ -49,7 +49,7 @@ interface TerminalState {
  * inside the resize hook to keep the workflow canvas visible.
  */
 export const MIN_TERMINAL_HEIGHT = 30
-export const DEFAULT_TERMINAL_HEIGHT = 196
+export const DEFAULT_TERMINAL_HEIGHT = 155
 
 /**
  * Output panel width constraints.