diff --git a/frontend/src/components/dashboard/ExecutionProgressTracker.tsx b/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
index 5cc486d9..f7449ddd 100644
--- a/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
+++ b/frontend/src/components/dashboard/ExecutionProgressTracker.tsx
@@ -214,20 +214,28 @@ export function ExecutionProgressTracker({
 
   return (
     <div
-      className="rounded-xl shadow-lg p-6 border"
+      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
       style={{
         backgroundColor: 'var(--bg-primary)',
         borderColor: 'var(--border-primary)',
       }}
     >
-      {/* Header */}
-      <div className="flex items-center gap-3 mb-6">
-        <TrendingUp className="w-6 h-6" style={{ color: 'var(--color-primary)' }} />
-        <div>
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+      {/* Header with Hero Icon */}
+      <div className="flex items-center gap-4 mb-6">
+        {/* Hero Icon */}
+        <div
+          className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
+          style={{ backgroundColor: 'var(--color-primary-100)' }}
+        >
+          <TrendingUp className="w-8 h-8 md:w-10 md:h-10" strokeWidth={2.5} style={{ color: 'var(--color-primary-600)' }} />
+        </div>
+
+        {/* Title */}
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
             {t('dashboard:execution_progress.title')}
           </h2>
-          <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>
+          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
             {t('dashboard:execution_progress.subtitle')}
           </p>
         </div>
diff --git a/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx b/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
index 90c07ebe..3116ff96 100644
--- a/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
+++ b/frontend/src/components/dashboard/UnifiedActionQueueCard.tsx
@@ -706,42 +706,70 @@ export function UnifiedActionQueueCard({
 
   return (
     <div
-      className="rounded-xl shadow-lg p-6 border"
+      className="rounded-xl shadow-xl p-6 border-2 transition-all duration-300 hover:shadow-2xl"
       style={{
         backgroundColor: 'var(--bg-primary)',
         borderColor: 'var(--border-primary)',
       }}
     >
-      {/* Header */}
-      <div className="flex items-center justify-between mb-6">
-        <div className="flex items-center gap-3">
-          <h2 className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
+      {/* Header with Hero Icon */}
+      <div className="flex items-center gap-4 mb-6">
+        {/* Hero Icon */}
+        <div
+          className="flex-shrink-0 w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center shadow-md"
+          style={{ backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)' }}
+        >
+          <AlertCircle
+            className="w-8 h-8 md:w-10 md:h-10"
+            strokeWidth={2.5}
+            style={{ color: displayQueue.totalActions > 5 ? 'var(--color-error-600)' : 'var(--color-info-600)' }}
+          />
+        </div>
+
+        {/* Title + Inline Metrics */}
+        <div className="flex-1 min-w-0">
+          <h2 className="text-2xl md:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
             {t('dashboard:action_queue_title')}
           </h2>
-          {/* SSE Connection Indicator */}
-          <div className="flex items-center gap-1.5 text-xs" style={{ color: 'var(--text-secondary)' }}>
-            {isConnected ? (
-              <>
-                <Wifi className="w-3.5 h-3.5" style={{ color: 'var(--color-success)' }} />
-                <span className="hidden sm:inline">Live</span>
-              </>
-            ) : (
-              <>
-                <WifiOff className="w-3.5 h-3.5" style={{ color: 'var(--color-error)' }} />
-                <span className="hidden sm:inline">Offline</span>
-              </>
-            )}
+
+          {/* Inline Metric Badges */}
+          <div className="flex flex-wrap items-center gap-3">
+            {/* Total Actions Badge */}
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-md"
+              style={{
+                backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)',
+                color: displayQueue.totalActions > 5 ? 'var(--color-error-800)' : 'var(--color-info-800)',
+                border: `1px solid ${displayQueue.totalActions > 5 ? 'var(--color-error-300)' : 'var(--color-info-300)'}`,
+              }}
+            >
+              <span className="font-semibold">{displayQueue.totalActions}</span>
+              <span className="text-xs">{t('dashboard:total_actions')}</span>
+            </div>
+
+            {/* SSE Connection Badge */}
+            <div
+              className="flex items-center gap-1.5 px-2 py-1 rounded-md text-xs"
+              style={{
+                backgroundColor: isConnected ? 'var(--color-success-100)' : 'var(--color-error-100)',
+                color: isConnected ? 'var(--color-success-800)' : 'var(--color-error-800)',
+                border: `1px solid ${isConnected ? 'var(--color-success-300)' : 'var(--color-error-300)'}`,
+              }}
+            >
+              {isConnected ? (
+                <>
+                  <Wifi className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Live</span>
+                </>
+              ) : (
+                <>
+                  <WifiOff className="w-3.5 h-3.5" />
+                  <span className="hidden sm:inline">Offline</span>
+                </>
+              )}
+            </div>
           </div>
         </div>
-        <span
-          className="px-3 py-1 rounded-full text-sm font-semibold"
-          style={{
-            backgroundColor: displayQueue.totalActions > 5 ? 'var(--color-error-100)' : 'var(--color-info-100)',
-            color: displayQueue.totalActions > 5 ? 'var(--color-error-800)' : 'var(--color-info-800)',
-          }}
-        >
-          {displayQueue.totalActions} {t('dashboard:total_actions')}
-        </span>
       </div>
 
       {/* Toast Notification */}