diff --git a/apps/http-backend/src/routes/userRoutes/userRoutes.ts b/apps/http-backend/src/routes/userRoutes/userRoutes.ts
index aab360d..91ea6af 100644
--- a/apps/http-backend/src/routes/userRoutes/userRoutes.ts
+++ b/apps/http-backend/src/routes/userRoutes/userRoutes.ts
@@ -743,7 +743,8 @@ router.get("/workflow/logs/:workflowId", userMiddleware, async (req: AuthRequest
       where: { workflowId: workflowId },
       include: {
         nodeExecutions: { include: { node: true } },
-      }
+      },
+      orderBy: { startAt: "desc" },
     })
 
     if (!executions) {
diff --git a/apps/web/app/components/ExecutionHistoryFooter.tsx b/apps/web/app/components/ExecutionHistoryFooter.tsx
index 95ad1d7..2cc58f0 100644
--- a/apps/web/app/components/ExecutionHistoryFooter.tsx
+++ b/apps/web/app/components/ExecutionHistoryFooter.tsx
@@ -1,80 +1,194 @@
 'use client';
 
-import React, { useEffect, useState, useRef } from 'react';
-import { WorkflowExecutionLog } from '@/app/types/execution.types';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { WorkflowExecutionLog, NodeExecutionLog } from '@/app/types/execution.types';
 import {
   formatDate,
-  getStatusColor,
-  getStatusLabel,
+  formatDuration,
+  getStatusIcon,
 } from '@/app/lib/formatters';
 
 interface ExecutionHistoryFooterProps {
   workflowId: string;
   onExecutionFetch: (executions: WorkflowExecutionLog[]) => void;
   isLoading?: boolean;
-  autoRefreshInterval?: number; // in milliseconds, default 5000 (5 seconds)
+  autoRefreshInterval?: number;
 }
 
-// Inline table component for simplicity
-const ExecutionListTable: React.FC<{
-  executions: WorkflowExecutionLog[];
-  selectedExecution?: WorkflowExecutionLog | null;
-  onSelectExecution: (execution: WorkflowExecutionLog) => void;
-  onLoadMore: () => void;
-  isLoading?: boolean;
-  hasMore?: boolean;
-}> = ({ executions, selectedExecution, onSelectExecution, isLoading }) => {
-  if (executions.length === 0 && !isLoading) {
-    return (
-      <div className="text-center py-8 text-gray-500">
-        <p>No executions found</p>
-      </div>
-    );
-  }
+// ─── Status Badge ───
+const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
+  const styles: Record<string, string> = {
+    Completed: 'background:linear-gradient(135deg,#059669,#10b981);color:#ecfdf5;',
+    Failed: 'background:linear-gradient(135deg,#dc2626,#ef4444);color:#fef2f2;',
+    InProgress: 'background:linear-gradient(135deg,#2563eb,#3b82f6);color:#eff6ff;',
+    Pending: 'background:linear-gradient(135deg,#d97706,#f59e0b);color:#fffbeb;',
+    Start: 'background:linear-gradient(135deg,#6b7280,#9ca3af);color:#f9fafb;',
+    ReConnecting: 'background:linear-gradient(135deg,#ea580c,#f97316);color:#fff7ed;',
+  };
+  return (
+    <span
+      style={{
+        ...Object.fromEntries((styles[status] || styles.Start)!.split(';').filter(Boolean).map(s => {
+          const [k, v] = s.split(':');
+          return [k!.trim().replace(/-([a-z])/g, (_, l) => l.toUpperCase()), v!.trim()];
+        })),
+        padding: '3px 10px',
+        borderRadius: '6px',
+        fontSize: '11px',
+        fontWeight: 600,
+        letterSpacing: '0.3px',
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '4px',
+        whiteSpace: 'nowrap' as const,
+      }}
+    >
+      {getStatusIcon(status)} {status}
+    </span>
+  );
+};
 
+// ─── Test Badge ───
+const TestBadge: React.FC<{ isTest: boolean }> = ({ isTest }) => {
+  if (!isTest) return <span style={{ color: '#6b7280', fontSize: '11px' }}>—</span>;
   return (
-    <div className="w-full overflow-x-auto max-h-64 overflow-y-auto">
-      <table className="w-full border-collapse text-xs">
-        <thead>
-          <tr className="border-b border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 sticky top-0">
-            <th className="text-left px-3 py-2 font-semibold">Started At</th>
-            <th className="text-left px-3 py-2 font-semibold">Status</th>
-            <th className="text-left px-3 py-2 font-semibold">Error</th>
-          </tr>
-        </thead>
-        <tbody>
-          {executions.map((execution) => {
-            const isSelected = selectedExecution?.id === execution.id;
-            const statusColor = getStatusColor(execution.status);
+    <span style={{
+      background: 'linear-gradient(135deg,#7c3aed,#a855f7)',
+      color: '#f5f3ff',
+      padding: '2px 8px',
+      borderRadius: '6px',
+      fontSize: '10px',
+      fontWeight: 700,
+      letterSpacing: '0.5px',
+      textTransform: 'uppercase' as const,
+    }}>
+      TEST
+    </span>
+  );
+};
 
-            return (
-              <tr
-                key={execution.id}
-                onClick={() => onSelectExecution(execution)}
-                className={`border-b border-gray-200 dark:border-gray-700 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 ${
-                  isSelected ? 'bg-blue-50 dark:bg-blue-900/30' : ''
-                }`}
-              >
-                <td className="px-3 py-2 text-gray-800 dark:text-gray-200">
-                  {formatDate(execution.startAt)}
-                </td>
-                <td className="px-3 py-2">
-                  <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${statusColor}`}>
-                    {getStatusLabel(execution.status)}
-                  </span>
-                </td>
-                <td className="px-3 py-2 text-gray-800 dark:text-gray-200 truncate text-xs">
-                  {execution.error ? execution.error.substring(0, 40) + '...' : '—'}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+// ─── Collapsible JSON Viewer ───
+const JsonViewer: React.FC<{ data: any; label: string; accent: string }> = ({ data, label, accent }) => {
+  const [open, setOpen] = useState(false);
+  if (data === null || data === undefined) return null;
+  
+  const jsonStr = typeof data === 'string' ? data : JSON.stringify(data, null, 2);
+
+  return (
+    <div style={{ marginTop: '6px' }}>
+      <button
+        onClick={() => setOpen(!open)}
+        style={{
+          background: 'none',
+          border: `1px solid ${accent}33`,
+          color: accent,
+          padding: '4px 10px',
+          borderRadius: '6px',
+          fontSize: '11px',
+          fontWeight: 600,
+          cursor: 'pointer',
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: '4px',
+          transition: 'all 0.15s ease',
+        }}
+      >
+        {open ? '▾' : '▸'} {label}
+      </button>
+      {open && (
+        <pre style={{
+          marginTop: '6px',
+          padding: '12px',
+          background: '#0c0f1a',
+          border: '1px solid #1e293b',
+          borderRadius: '8px',
+          fontSize: '11px',
+          fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', monospace",
+          color: '#e2e8f0',
+          overflowX: 'auto',
+          maxHeight: '240px',
+          overflowY: 'auto',
+          lineHeight: 1.6,
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+        }}>
+          {jsonStr}
+        </pre>
+      )}
     </div>
   );
 };
 
+// ─── Node Execution Detail Row ───
+const NodeExecutionRow: React.FC<{ nodeExec: NodeExecutionLog }> = ({ nodeExec }) => {
+  const [expanded, setExpanded] = useState(false);
+  const nodeName = nodeExec.node?.name || 'Unknown Node';
+
+  return (
+    <>
+      <tr
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          cursor: 'pointer',
+          transition: 'background 0.15s ease',
+        }}
+        onMouseEnter={e => (e.currentTarget.style.background = '#141b2d')}
+        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+      >
+        <td style={{ padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: '#e2e8f0' }}>
+          <span style={{ marginRight: '6px', color: '#64748b', fontSize: '10px' }}>
+            {expanded ? '▾' : '▸'}
+          </span>
+          {nodeName}
+        </td>
+        <td style={{ padding: '8px 12px' }}>
+          <StatusBadge status={nodeExec.status} />
+        </td>
+        <td style={{ padding: '8px 12px' }}>
+          <TestBadge isTest={nodeExec.isTest} />
+        </td>
+        <td style={{ padding: '8px 12px', fontSize: '11px', color: '#94a3b8', fontFamily: 'monospace' }}>
+          {formatDate(nodeExec.startedAt)}
+        </td>
+        <td style={{ padding: '8px 12px', fontSize: '11px', color: '#94a3b8', fontFamily: 'monospace' }}>
+          {nodeExec.completedAt ? formatDate(nodeExec.completedAt) : '—'}
+        </td>
+        <td style={{ padding: '8px 12px', fontSize: '11px', color: '#cbd5e1', fontWeight: 500 }}>
+          {formatDuration(nodeExec.startedAt, nodeExec.completedAt || undefined)}
+        </td>
+        <td style={{ padding: '8px 12px', fontSize: '11px', color: nodeExec.error ? '#fca5a5' : '#64748b', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' as const }}>
+          {nodeExec.error ? nodeExec.error.substring(0, 60) + (nodeExec.error.length > 60 ? '...' : '') : '—'}
+        </td>
+      </tr>
+      {expanded && (
+        <tr>
+          <td colSpan={7} style={{ padding: '0 12px 12px 36px', background: '#0a0e1a' }}>
+            <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
+              <JsonViewer data={nodeExec.inputData} label="Input Data" accent="#3b82f6" />
+              <JsonViewer data={nodeExec.outputData} label="Output Data" accent="#10b981" />
+            </div>
+            {nodeExec.error && (
+              <div style={{
+                marginTop: '8px',
+                padding: '10px 14px',
+                background: '#1c0a0a',
+                border: '1px solid #7f1d1d',
+                borderRadius: '8px',
+                color: '#fca5a5',
+                fontSize: '12px',
+                lineHeight: 1.5,
+              }}>
+                <strong style={{ color: '#f87171' }}>Error: </strong>{nodeExec.error}
+              </div>
+            )}
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};
+
+// ─── Main Component ───
 export default function ExecutionHistoryFooter({
   workflowId,
   onExecutionFetch,
@@ -89,11 +203,42 @@ export default function ExecutionHistoryFooter({
   const refreshIntervalRef = useRef<NodeJS.Timeout | null>(null);
   const lastFetchRef = useRef<number>(0);
 
+  // Detect sidebar state via CSS custom property / DOM attribute
+  const [sidebarWidth, setSidebarWidth] = useState(256); // 16rem default
+
+  useEffect(() => {
+    const observeSidebar = () => {
+      const wrapper = document.querySelector('[data-slot="sidebar-wrapper"]');
+      if (!wrapper) return;
+      
+      const observer = new MutationObserver(() => {
+        const sidebarEl = document.querySelector('[data-slot="sidebar"]');
+        if (sidebarEl) {
+          const state = sidebarEl.getAttribute('data-state');
+          setSidebarWidth(state === 'collapsed' ? 48 : 256);
+        }
+      });
+      
+      observer.observe(wrapper, { attributes: true, subtree: true, attributeFilter: ['data-state'] });
+      
+      // Initial check
+      const sidebarEl = document.querySelector('[data-slot="sidebar"]');
+      if (sidebarEl) {
+        const state = sidebarEl.getAttribute('data-state');
+        setSidebarWidth(state === 'collapsed' ? 48 : 256);
+      }
+      
+      return () => observer.disconnect();
+    };
+
+    const cleanup = observeSidebar();
+    return () => cleanup?.();
+  }, []);
+
   // Load initial execution history
   useEffect(() => {
     fetchExecutionLogs();
     
-    // Initialize localStorage state
     const savedExpandedState = localStorage.getItem('executionFooterExpanded');
     if (savedExpandedState !== null) {
       setIsExpanded(JSON.parse(savedExpandedState));
@@ -110,13 +255,10 @@ export default function ExecutionHistoryFooter({
       return;
     }
 
-    // Initial fetch immediately
     fetchExecutionLogs();
 
-    // Setup polling interval
     refreshIntervalRef.current = setInterval(() => {
       const now = Date.now();
-      // Only fetch if enough time has passed since last fetch
       if (now - lastFetchRef.current >= autoRefreshInterval) {
         fetchExecutionLogs();
       }
@@ -130,15 +272,14 @@ export default function ExecutionHistoryFooter({
     };
   }, [autoRefreshEnabled, autoRefreshInterval]);
 
-  // Persist expanded state to localStorage
+  // Persist expanded state
   useEffect(() => {
     localStorage.setItem('executionFooterExpanded', JSON.stringify(isExpanded));
   }, [isExpanded]);
 
-  const fetchExecutionLogs = async () => {
+  const fetchExecutionLogs = useCallback(async () => {
     try {
       setFooterLoading(true);
-      // Import API dynamically to avoid issues
       const { api } = await import('@/app/lib/api');
       const logs = await api.executions.getWorkflowLogs(workflowId, 0, 20);
       const executionsList = Array.isArray(logs) ? logs : [];
@@ -150,140 +291,373 @@ export default function ExecutionHistoryFooter({
     } finally {
       setFooterLoading(false);
     }
+  }, [workflowId, onExecutionFetch]);
+
+  const hasAnyTest = (exec: WorkflowExecutionLog) => {
+    return exec.nodeExecutions?.some(ne => ne.isTest) || false;
   };
 
   const lastExecution = executions[0];
-  const lastStatus = lastExecution ? getStatusLabel(lastExecution.status) : 'No executions';
+  const lastStatus = lastExecution?.status || 'No executions';
 
   return (
     <>
-      {/* Sticky Footer Taskbar */}
-      <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40">
-        <div className="h-14 px-4 flex items-center justify-between">
-          {/* Left side - Title and status */}
-          <div className="flex items-center gap-3 flex-1 min-w-0">
-            <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 whitespace-nowrap">
-              📊 Execution History
-            </span>
-            <span className="text-xs text-gray-500 dark:text-gray-400 truncate">
-              Last: {lastStatus}
-            </span>
-          </div>
+      {/* ── Sticky Footer Bar ── */}
+      <div
+        style={{
+          position: 'fixed',
+          bottom: 0,
+          left: sidebarWidth,
+          right: 0,
+          height: '48px',
+          background: 'linear-gradient(135deg, #0f1420 0%, #141b2d 100%)',
+          borderTop: '1px solid #1e293b',
+          zIndex: 9,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          padding: '0 16px',
+          transition: 'left 0.2s ease',
+          backdropFilter: 'blur(12px)',
+        }}
+      >
+        {/* Left */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <span style={{ fontSize: '13px', fontWeight: 600, color: '#e2e8f0', display: 'flex', alignItems: 'center', gap: '6px' }}>
+            📊 Executions
+          </span>
+          <span style={{ fontSize: '11px', color: '#64748b' }}>
+            Last: <StatusBadge status={lastStatus} />
+          </span>
+          <span style={{ fontSize: '11px', color: '#475569' }}>
+            {executions.length} runs
+          </span>
+        </div>
 
-          {/* Right side - Action buttons */}
-          <div className="flex items-center gap-2">
-            <button
-              onClick={fetchExecutionLogs}
-              disabled={footerLoading}
-              className="px-3 py-1 text-xs bg-blue-500 hover:bg-blue-600 disabled:bg-blue-400 text-white rounded transition-colors font-medium"
-              title="Refresh execution logs"
-            >
-              {footerLoading ? '⟳' : '🔄'}
-            </button>
-            <button
-              onClick={() => setAutoRefreshEnabled(!autoRefreshEnabled)}
-              className={`px-3 py-1 text-xs rounded transition-colors font-medium ${
-                autoRefreshEnabled
-                  ? 'bg-green-500 hover:bg-green-600 text-white'
-                  : 'bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200'
-              }`}
-              title={autoRefreshEnabled ? 'Auto-refresh enabled' : 'Auto-refresh disabled'}
-            >
-              {autoRefreshEnabled ? '✓' : '✗'}
-            </button>
-            <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="px-3 py-1 text-xs bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 rounded transition-colors font-medium"
-              title={isExpanded ? 'Minimize' : 'Expand'}
-            >
-              {isExpanded ? '▼' : '▲'}
-            </button>
-          </div>
+        {/* Right */}
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <button
+            onClick={fetchExecutionLogs}
+            disabled={footerLoading}
+            style={{
+              padding: '4px 12px',
+              fontSize: '11px',
+              fontWeight: 600,
+              background: footerLoading ? '#1e293b' : 'linear-gradient(135deg, #2563eb, #3b82f6)',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              cursor: footerLoading ? 'wait' : 'pointer',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            {footerLoading ? '⟳' : '↻ Refresh'}
+          </button>
+          <button
+            onClick={() => setAutoRefreshEnabled(!autoRefreshEnabled)}
+            style={{
+              padding: '4px 10px',
+              fontSize: '11px',
+              fontWeight: 600,
+              background: autoRefreshEnabled ? 'linear-gradient(135deg, #059669, #10b981)' : '#1e293b',
+              color: autoRefreshEnabled ? '#ecfdf5' : '#94a3b8',
+              border: autoRefreshEnabled ? 'none' : '1px solid #334155',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            {autoRefreshEnabled ? '● Live' : '○ Paused'}
+          </button>
+          <button
+            onClick={() => {
+              setIsExpanded(!isExpanded);
+              if (!isExpanded) setSelectedExecution(null);
+            }}
+            style={{
+              padding: '4px 14px',
+              fontSize: '11px',
+              fontWeight: 600,
+              background: isExpanded ? '#1e293b' : 'linear-gradient(135deg, #6366f1, #818cf8)',
+              color: isExpanded ? '#94a3b8' : '#fff',
+              border: isExpanded ? '1px solid #334155' : 'none',
+              borderRadius: '6px',
+              cursor: 'pointer',
+              transition: 'all 0.15s ease',
+            }}
+          >
+            {isExpanded ? '▼ Collapse' : '▲ Expand'}
+          </button>
         </div>
       </div>
 
-      {/* Expanded Panel */}
+      {/* ── Expanded Panel ── */}
       {isExpanded && (
-        <div className="fixed bottom-14 left-0 right-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 shadow-lg z-40 overflow-hidden transition-all"
-        style={{ height: '60vh', maxHeight: '60vh' }}>
-          <div className="h-full flex flex-col">
-            {/* Header */}
-            <div className="px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 flex items-center justify-between">
-              <h2 className="font-semibold text-gray-800 dark:text-gray-200">Execution History</h2>
-              <button
-                onClick={() => setIsExpanded(false)}
-                className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
-              >
-                ✕
-              </button>
-            </div>
+        <div
+          style={{
+            position: 'fixed',
+            bottom: '48px',
+            left: sidebarWidth,
+            right: 0,
+            height: '55vh',
+            background: 'linear-gradient(180deg, #0a0e17 0%, #0f1420 100%)',
+            borderTop: '1px solid #1e293b',
+            zIndex: 8,
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'left 0.2s ease',
+            backdropFilter: 'blur(16px)',
+          }}
+        >
+          {/* Panel Header */}
+          <div style={{
+            padding: '12px 20px',
+            borderBottom: '1px solid #1e293b',
+            background: 'linear-gradient(135deg, #0f1420 0%, #141b2d 100%)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            flexShrink: 0,
+          }}>
+            <h2 style={{ fontSize: '14px', fontWeight: 700, color: '#e2e8f0', margin: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
+              {selectedExecution ? (
+                <>
+                  <button
+                    onClick={() => setSelectedExecution(null)}
+                    style={{
+                      background: 'none',
+                      border: '1px solid #334155',
+                      color: '#94a3b8',
+                      padding: '2px 8px',
+                      borderRadius: '4px',
+                      cursor: 'pointer',
+                      fontSize: '11px',
+                      fontWeight: 600,
+                    }}
+                  >
+                    ← Back
+                  </button>
+                  <span>Node Executions</span>
+                  <span style={{ fontSize: '10px', color: '#64748b', fontFamily: 'monospace' }}>
+                    {selectedExecution.id.substring(0, 8)}…
+                  </span>
+                </>
+              ) : (
+                'Workflow Executions'
+              )}
+            </h2>
+            <button
+              onClick={() => setIsExpanded(false)}
+              style={{
+                background: 'none',
+                border: '1px solid #334155',
+                color: '#64748b',
+                width: '28px',
+                height: '28px',
+                borderRadius: '6px',
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                fontSize: '14px',
+                transition: 'all 0.15s ease',
+              }}
+              onMouseEnter={e => { e.currentTarget.style.color = '#e2e8f0'; e.currentTarget.style.borderColor = '#6366f1'; }}
+              onMouseLeave={e => { e.currentTarget.style.color = '#64748b'; e.currentTarget.style.borderColor = '#334155'; }}
+            >
+              ✕
+            </button>
+          </div>
 
-            {/* Content */}
-            <div className="flex-1 overflow-auto p-4">
-              {footerLoading && executions.length === 0 ? (
-                <div className="flex items-center justify-center h-full">
-                  <div className="text-center">
-                    <div className="w-8 h-8 border-3 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">Loading executions...</p>
+          {/* Panel Body */}
+          <div style={{ flex: 1, overflowY: 'auto', overflowX: 'auto' }}>
+            {footerLoading && executions.length === 0 ? (
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
+                <div style={{ textAlign: 'center' }}>
+                  <div style={{
+                    width: '32px', height: '32px', border: '3px solid #3b82f6', borderTopColor: 'transparent',
+                    borderRadius: '50%', animation: 'spin 0.8s linear infinite', margin: '0 auto 8px',
+                  }} />
+                  <p style={{ fontSize: '13px', color: '#64748b' }}>Loading executions…</p>
+                  <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
+                </div>
+              </div>
+            ) : !selectedExecution ? (
+              /* ─── Level 1: Workflow Executions Table ─── */
+              <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+                <thead>
+                  <tr style={{
+                    background: '#0c1019',
+                    borderBottom: '1px solid #1e293b',
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: 2,
+                  }}>
+                    {['#', 'Execution ID', 'Status', 'Test', 'Started', 'Completed', 'Duration', 'Nodes', 'Error'].map(h => (
+                      <th key={h} style={{
+                        padding: '10px 12px',
+                        textAlign: 'left',
+                        fontSize: '10px',
+                        fontWeight: 700,
+                        color: '#64748b',
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.8px',
+                      }}>{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {executions.length === 0 ? (
+                    <tr>
+                      <td colSpan={9} style={{ padding: '48px', textAlign: 'center', color: '#475569', fontSize: '13px' }}>
+                        No executions found. Execute your workflow to see results here.
+                      </td>
+                    </tr>
+                  ) : (
+                    executions.map((exec, idx) => (
+                      <tr
+                        key={exec.id}
+                        onClick={() => setSelectedExecution(exec)}
+                        style={{
+                          cursor: 'pointer',
+                          borderBottom: '1px solid #111827',
+                          transition: 'background 0.15s ease',
+                        }}
+                        onMouseEnter={e => (e.currentTarget.style.background = '#141b2d')}
+                        onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
+                      >
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: '#475569', fontWeight: 500 }}>
+                          {executions.length - idx}
+                        </td>
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: '#818cf8', fontFamily: "'JetBrains Mono', monospace" }}>
+                          {exec.id.substring(0, 8)}…
+                        </td>
+                        <td style={{ padding: '10px 12px' }}>
+                          <StatusBadge status={exec.status} />
+                        </td>
+                        <td style={{ padding: '10px 12px' }}>
+                          <TestBadge isTest={hasAnyTest(exec)} />
+                        </td>
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: '#94a3b8', fontFamily: 'monospace' }}>
+                          {formatDate(exec.startAt)}
+                        </td>
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: '#94a3b8', fontFamily: 'monospace' }}>
+                          {exec.completedAt ? formatDate(exec.completedAt) : '—'}
+                        </td>
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: '#cbd5e1', fontWeight: 600 }}>
+                          {formatDuration(exec.startAt, exec.completedAt || undefined)}
+                        </td>
+                        <td style={{ padding: '10px 12px' }}>
+                          <span style={{
+                            background: '#1e293b',
+                            color: '#94a3b8',
+                            padding: '2px 8px',
+                            borderRadius: '4px',
+                            fontSize: '11px',
+                            fontWeight: 600,
+                          }}>
+                            {exec.nodeExecutions?.length || 0}
+                          </span>
+                        </td>
+                        <td style={{ padding: '10px 12px', fontSize: '11px', color: exec.error ? '#fca5a5' : '#475569', maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          {exec.error ? exec.error.substring(0, 50) + (exec.error.length > 50 ? '…' : '') : '—'}
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            ) : (
+              /* ─── Level 2: Node Executions Table ─── */
+              <div>
+                {/* Execution Summary Bar */}
+                <div style={{
+                  padding: '12px 20px',
+                  background: '#0c1019',
+                  borderBottom: '1px solid #1e293b',
+                  display: 'flex',
+                  gap: '24px',
+                  flexWrap: 'wrap',
+                  alignItems: 'center',
+                }}>
+                  <div style={{ fontSize: '11px' }}>
+                    <span style={{ color: '#64748b' }}>Status: </span>
+                    <StatusBadge status={selectedExecution.status} />
+                  </div>
+                  <div style={{ fontSize: '11px', color: '#94a3b8' }}>
+                    <span style={{ color: '#64748b' }}>Started: </span>
+                    {formatDate(selectedExecution.startAt)}
+                  </div>
+                  <div style={{ fontSize: '11px', color: '#94a3b8' }}>
+                    <span style={{ color: '#64748b' }}>Duration: </span>
+                    <span style={{ color: '#e2e8f0', fontWeight: 600 }}>
+                      {formatDuration(selectedExecution.startAt, selectedExecution.completedAt || undefined)}
+                    </span>
+                  </div>
+                  <div style={{ fontSize: '11px', color: '#94a3b8' }}>
+                    <span style={{ color: '#64748b' }}>Nodes: </span>
+                    {selectedExecution.nodeExecutions?.length || 0}
                   </div>
                 </div>
-              ) : (
-                <>
-                  {/* Executions Table */}
-                  <div className="mb-4">
-                    <ExecutionListTable
-                      executions={executions}
-                      selectedExecution={selectedExecution}
-                      onSelectExecution={setSelectedExecution}
-                      onLoadMore={() => {}}
-                      isLoading={footerLoading}
-                      hasMore={false}
-                    />
+
+                {/* Error Banner */}
+                {selectedExecution.error && (
+                  <div style={{
+                    margin: '12px 20px 0',
+                    padding: '10px 14px',
+                    background: 'linear-gradient(135deg, #1c0a0a, #1a0505)',
+                    border: '1px solid #7f1d1d',
+                    borderRadius: '8px',
+                    color: '#fca5a5',
+                    fontSize: '12px',
+                    lineHeight: 1.5,
+                  }}>
+                    <strong style={{ color: '#f87171' }}>Workflow Error: </strong>{selectedExecution.error}
                   </div>
+                )}
 
-                  {/* Selected Execution Details */}
-                  {selectedExecution && (
-                    <div className="border-t border-gray-200 dark:border-gray-700 pt-4 mt-4">
-                      <h3 className="font-semibold text-sm text-gray-800 dark:text-gray-200 mb-3">
-                        Execution Details
-                      </h3>
-                      <div className="space-y-2 text-xs">
-                        <div>
-                          <p className="text-gray-600 dark:text-gray-400">Status:</p>
-                          <p className="text-gray-800 dark:text-gray-200">
-                            {getStatusLabel(selectedExecution.status)}
-                          </p>
-                        </div>
-                        <div>
-                          <p className="text-gray-600 dark:text-gray-400">Started:</p>
-                          <p className="text-gray-800 dark:text-gray-200">
-                            {formatDate(selectedExecution.startAt)}
-                          </p>
-                        </div>
-                        {selectedExecution.error && (
-                          <div className="bg-red-50 dark:bg-red-900/20 p-2 rounded text-red-700 dark:text-red-300">
-                            <p className="font-semibold">Error:</p>
-                            <p>{selectedExecution.error}</p>
-                          </div>
-                        )}
-                        <div>
-                          <p className="text-gray-600 dark:text-gray-400">Nodes executed:</p>
-                          <p className="text-gray-800 dark:text-gray-200">
-                            {selectedExecution.nodeExecutions?.length || 0}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  )}
-                </>
-              )}
-            </div>
+                {/* Node Executions Table */}
+                <table style={{ width: '100%', borderCollapse: 'collapse', marginTop: '4px' }}>
+                  <thead>
+                    <tr style={{
+                      background: '#0c1019',
+                      borderBottom: '1px solid #1e293b',
+                      position: 'sticky',
+                      top: 0,
+                      zIndex: 2,
+                    }}>
+                      {['Node Name', 'Status', 'Test', 'Started', 'Completed', 'Duration', 'Error'].map(h => (
+                        <th key={h} style={{
+                          padding: '10px 12px',
+                          textAlign: 'left',
+                          fontSize: '10px',
+                          fontWeight: 700,
+                          color: '#64748b',
+                          textTransform: 'uppercase',
+                          letterSpacing: '0.8px',
+                        }}>{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(!selectedExecution.nodeExecutions || selectedExecution.nodeExecutions.length === 0) ? (
+                      <tr>
+                        <td colSpan={7} style={{ padding: '32px', textAlign: 'center', color: '#475569', fontSize: '13px' }}>
+                          No node executions recorded.
+                        </td>
+                      </tr>
+                    ) : (
+                      selectedExecution.nodeExecutions.map(ne => (
+                        <NodeExecutionRow key={ne.id} nodeExec={ne} />
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            )}
           </div>
         </div>
       )}
-
-      {/* Add padding to page if footer is expanded */}
-      {isExpanded && <div style={{ height: '60vh', marginTop: '3.5rem' }} />}
     </>
   );
 }
diff --git a/apps/web/app/workflows/[id]/components/ConfigModal.tsx b/apps/web/app/workflows/[id]/components/ConfigModal.tsx
index aa8b980..d0bc3ee 100644
--- a/apps/web/app/workflows/[id]/components/ConfigModal.tsx
+++ b/apps/web/app/workflows/[id]/components/ConfigModal.tsx
@@ -440,7 +440,7 @@ export default function ConfigModal({
       );
     }
 
-    if (field.type === "text") {
+    if (field.type === "textarea") {
       return (
         <div key={field.name} className="form-group">
           <label className="block text-sm font-medium text-white mb-1">
diff --git a/apps/web/app/workflows/[id]/page.tsx b/apps/web/app/workflows/[id]/page.tsx
index 95299e0..2b4dc1a 100644
--- a/apps/web/app/workflows/[id]/page.tsx
+++ b/apps/web/app/workflows/[id]/page.tsx
@@ -819,7 +819,7 @@ export default function WorkflowCanvas() {
         <Controls />
 
 
-        <div style={{ position: "fixed", bottom: "1rem", right: "10rem", display: "flex", gap: "1rem", zIndex: 50 }}>
+        <div style={{ position: "fixed", bottom: "60px", right: "10rem", display: "flex", gap: "1rem", zIndex: 50 }}>
           <button
             onClick={batchSave}
             className="border bg-white text-black font-bold p-4 shadow-lg px-12 rounded-2xl"
diff --git a/apps/worker/src/engine/executor.ts b/apps/worker/src/engine/executor.ts
index fd9d1a0..e134e0b 100644
--- a/apps/worker/src/engine/executor.ts
+++ b/apps/worker/src/engine/executor.ts
@@ -18,7 +18,9 @@ interface LoopExecutionResult {
   totalProcessed: number;
   successful: number;
   failed: number;
+  skipped: number;
   failures: Array<{ row: number; error: string; retries: number }>;
+  skippedRows: Array<{ row: number; reason: string }>;
   results: any[];
 }
 
@@ -105,13 +107,8 @@ export async function executeWorkflow(
     nodeConfig = resolveConfigVariables(nodeConfig, interpolationContext);
     console.log(`[Interpolation] After: ${JSON.stringify(nodeConfig)}`);
     
-    // Properly concatenate body with input data (legacy behavior, skip for spreadsheet loop)
-    if (nodeConfig.body && currentInputData && !isSpreadsheetInput(currentInputData)) {
-      const inputStr = typeof currentInputData === 'object' 
-        ? JSON.stringify(currentInputData) 
-        : String(currentInputData);
-      nodeConfig.body = nodeConfig.body + inputStr;
-    }
+    // NOTE: Removed legacy body concatenation that appended raw JSON to email body.
+    // Variables should be resolved via the {{interpolation}} system instead.
     if(!node.CredentialsID){
       await prismaClient.workflowExecution.update({
         where: { id: workflowExecutionId },
@@ -151,7 +148,9 @@ export async function executeWorkflow(
         totalProcessed: 0,
         successful: 0,
         failed: 0,
+        skipped: 0,
         failures: [],
+        skippedRows: [],
         results: []
       };
 
@@ -175,6 +174,27 @@ export async function executeWorkflow(
         const resolvedRowConfig = resolveConfigVariables(originalConfig, loopInterpolationCtx);
         
         console.log(`[Loop] Row ${rowIdx}: resolved config = ${JSON.stringify(resolvedRowConfig)}`);
+
+        // Skip rows with empty/null required fields (e.g. empty email recipient)
+        const skipReasons: string[] = [];
+        if (resolvedRowConfig.to !== undefined && (!resolvedRowConfig.to || String(resolvedRowConfig.to).trim() === '')) {
+          skipReasons.push('empty recipient (to)');
+        }
+        if (resolvedRowConfig.subject !== undefined && (!resolvedRowConfig.subject || String(resolvedRowConfig.subject).trim() === '')) {
+          skipReasons.push('empty subject');
+        }
+        // Check if any resolved value still has unresolved {{variables}}
+        for (const [key, val] of Object.entries(resolvedRowConfig)) {
+          if (typeof val === 'string' && val.includes('{{') && val.includes('}}')) {
+            skipReasons.push(`unresolved variable in ${key}: ${val}`);
+          }
+        }
+        if (skipReasons.length > 0) {
+          loopResult.skipped++;
+          loopResult.skippedRows.push({ row: rowIdx, reason: skipReasons.join('; ') });
+          console.log(`[Loop] Row ${rowIdx} SKIPPED: ${skipReasons.join('; ')}`);
+          continue;
+        }
         
         const rowCtx = {
           userId: data.workflow.userId,
@@ -222,7 +242,7 @@ export async function executeWorkflow(
         await delay(100);
       }
 
-      console.log(`[Loop] Completed: ${loopResult.successful}/${loopResult.totalProcessed} successful, ${loopResult.failed} failed`);
+      console.log(`[Loop] Completed: ${loopResult.successful}/${loopResult.totalProcessed} successful, ${loopResult.failed} failed, ${loopResult.skipped} skipped`);
 
       // Loop completes even if some rows fail
       const hasFailures = loopResult.failed > 0;
diff --git a/packages/nodes/src/gmail/gmail.service.ts b/packages/nodes/src/gmail/gmail.service.ts
index 347a093..c14d3a6 100644
--- a/packages/nodes/src/gmail/gmail.service.ts
+++ b/packages/nodes/src/gmail/gmail.service.ts
@@ -30,15 +30,108 @@ export class GmailService {
     this.gmail = google.gmail({ version: "v1", auth: this.auth });
   }
 
+  /**
+   * Converts plain text with markdown-like notation to styled HTML for email.
+   * Supports: code fences, inline code, bold, italic, links, bullet lists, \n, \t
+   */
+  private formatBodyToHtml(body: string): string {
+    if (!body) return '';
+
+    let html = body;
+
+    // 1. Escape HTML entities first (protect raw text)
+    html = html
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+
+    // 2. Code fences: ```...``` → <pre><code>
+    html = html.replace(/```([\s\S]*?)```/g, (_match, code) => {
+      return `<pre style="background:#1e1e2e;color:#cdd6f4;padding:12px 16px;border-radius:8px;font-family:'Courier New',Courier,monospace;font-size:13px;line-height:1.5;overflow-x:auto;margin:8px 0;border:1px solid #313244;">${code.trim()}</pre>`;
+    });
+
+    // 3. Inline code: `...` → <code>
+    html = html.replace(/`([^`]+)`/g, (_match, code) => {
+      return `<code style="background:#f0f0f5;color:#e64553;padding:2px 6px;border-radius:4px;font-family:'Courier New',Courier,monospace;font-size:0.9em;">${code}</code>`;
+    });
+
+    // 4. Bold: **text** → <strong>
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    // 5. Italic: *text* → <em> (but not inside bold)
+    html = html.replace(/(?<!\*)\*([^*]+)\*(?!\*)/g, '<em>$1</em>');
+
+    // 6. Links: [text](url) → <a>
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g,
+      '<a href="$2" style="color:#1e66f5;text-decoration:underline;" target="_blank">$1</a>'
+    );
+
+    // 7. Bullet lists: lines starting with "- " or "* "
+    // Process line by line to group consecutive list items
+    const lines = html.split('\n');
+    const processedLines: string[] = [];
+    let inList = false;
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      const isBullet = /^[-*]\s+/.test(trimmed);
+
+      if (isBullet) {
+        if (!inList) {
+          processedLines.push('<ul style="margin:8px 0;padding-left:24px;">');
+          inList = true;
+        }
+        const content = trimmed.replace(/^[-*]\s+/, '');
+        processedLines.push(`<li style="margin:4px 0;">${content}</li>`);
+      } else {
+        if (inList) {
+          processedLines.push('</ul>');
+          inList = false;
+        }
+        processedLines.push(line);
+      }
+    }
+    if (inList) {
+      processedLines.push('</ul>');
+    }
+    html = processedLines.join('\n');
+
+    // 8. Tabs → indentation
+    html = html.replace(/\t/g, '&emsp;');
+
+    // 9. Newlines → <br> (but skip inside <pre> blocks)
+    // Split by <pre>...</pre>, only apply <br> outside
+    const parts = html.split(/(<pre[\s\S]*?<\/pre>)/g);
+    html = parts.map(part => {
+      if (part.startsWith('<pre')) return part;
+      return part.replace(/\n/g, '<br>');
+    }).join('');
+
+    // Wrap in professional HTML email template
+    return `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"></head>
+<body style="margin:0;padding:0;background:#f8f9fa;">
+<div style="max-width:680px;margin:24px auto;padding:32px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:15px;line-height:1.7;color:#1a1a2e;background:#ffffff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.06);">
+${html}
+</div>
+</body>
+</html>`;
+  }
+
   async sendEmail(to: string, subject: string, body: string) {
     try {
+      // Convert body to rich HTML
+      const htmlBody = this.formatBodyToHtml(body);
+
       // Build the raw email string
       const emailLines = [
         `To: ${to}`,
         `Subject: ${subject}`,
+        "MIME-Version: 1.0",
         "Content-Type: text/html; charset=utf-8",
         "",
-        body,
+        htmlBody,
       ];
       const email = emailLines.join("\r\n");