diff --git a/packages/ui/src/components/chat/multi-task-chat.tsx b/packages/ui/src/components/chat/multi-task-chat.tsx
index 7c74cb9..cdeb2b3 100644
--- a/packages/ui/src/components/chat/multi-task-chat.tsx
+++ b/packages/ui/src/components/chat/multi-task-chat.tsx
@@ -136,6 +136,22 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
 
   const solo = () => getSoloState(props.instanceId);
 
+  // APEX PRO mode = SOLO + APEX combined (autonomous + auto-approval)
+  const isApexPro = () => solo().isAutonomous && solo().autoApproval;
+
+  const toggleApexPro = () => {
+    const currentState = isApexPro();
+    if (currentState) {
+      // Turn off both
+      if (solo().isAutonomous) toggleAutonomous(props.instanceId);
+      if (solo().autoApproval) toggleAutoApproval(props.instanceId);
+    } else {
+      // Turn on both
+      if (!solo().isAutonomous) toggleAutonomous(props.instanceId);
+      if (!solo().autoApproval) toggleAutoApproval(props.instanceId);
+    }
+  };
+
   const isAgentThinking = createMemo(() => {
     // Show thinking while we're actively sending
     if (isSending()) return true;
@@ -505,27 +521,31 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
                 </div>
 
                 <div class="flex items-center space-x-2">
-                  <button 
+                  <button
                     onClick={() => toggleApex(props.instanceId)}
                     title="Toggle APEX Mode (Max Priority)"
-                    class={`flex items-center space-x-1.5 px-2 py-1 rounded-lg border transition-all ${
-                      solo().isApex 
-                        ? "bg-rose-500/20 border-rose-500/40 text-rose-400 shadow-[0_0_15px_rgba(244,63,94,0.3)]" 
-                        : "bg-white/5 border-white/5 text-zinc-500 hover:bg-white/10"
-                    }`}
+                    class={`flex items-center space-x-1.5 px-2 py-1 rounded-lg border transition-all ${solo().isApex
+                      ? "bg-rose-500/20 border-rose-500/40 text-rose-400 shadow-[0_0_15px_rgba(244,63,94,0.3)]"
+                      : "bg-white/5 border-white/5 text-zinc-500 hover:bg-white/10"
+                      }`}
                   >
                     <Zap size={10} class={solo().isApex ? "animate-bounce" : ""} />
                     <span class="text-[9px] font-black uppercase tracking-tighter">Apex</span>
                   </button>
-                  <button 
-                    onClick={() => toggleAutonomous(props.instanceId)}
-                    class={`px-2 py-0.5 rounded text-[9px] font-bold uppercase border ${solo().isAutonomous
-                      ? "bg-indigo-500/20 border-indigo-500/40 text-indigo-400"
-                      : "bg-white/5 border-white/10 text-zinc-500"
+                  <button
+                    onClick={toggleApexPro}
+                    class={`flex items-center space-x-1.5 px-3 py-1 rounded-lg text-[9px] font-black uppercase tracking-tight border transition-all ${isApexPro()
+                      ? "bg-orange-500/20 border-orange-500/40 text-orange-400 shadow-[0_0_15px_rgba(249,115,22,0.3)]"
+                      : "bg-white/5 border-white/10 text-zinc-500 hover:border-white/20 hover:text-zinc-400"
                       }`}
-                    title="APEX - Autonomous Programming EXecution mode"
+                    title="APEX PRO - Autonomous Programming EXecution + Auto-approval combined"
+                    style={isApexPro() ? { animation: "apex-pro-pulse 2s ease-in-out infinite" } : {}}
                   >
-                    APEX
+                    <Zap size={12} class={isApexPro() ? "text-orange-400" : ""} />
+                    <span>APEX PRO</span>
+                    <Show when={isApexPro()}>
+                      <div class="w-1.5 h-1.5 bg-orange-400 rounded-full" style={{ animation: "apex-pro-glow 1.5s ease-in-out infinite" }} />
+                    </Show>
                   </button>
                   <button
                     onClick={() => toggleAutoApproval(props.instanceId)}
@@ -533,7 +553,7 @@ export default function MultiTaskChat(props: MultiTaskChatProps) {
                       ? "bg-emerald-500/20 border-emerald-500/40 text-emerald-400"
                       : "bg-white/5 border-white/10 text-zinc-500"
                       }`}
-                    title="SHIELD - Auto-approval mode"
+                    title="SHIELD - Auto-approval mode only"
                   >
                     SHIELD
                   </button>
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 8f3d623..7fce666 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -118,6 +118,27 @@
   to { transform: rotate(360deg); }
 }
 
+/* APEX PRO mode animations */
+@keyframes apex-pro-pulse {
+  0%, 100% { 
+    box-shadow: 0 0 15px rgba(249, 115, 22, 0.3);
+  }
+  50% { 
+    box-shadow: 0 0 25px rgba(249, 115, 22, 0.5);
+  }
+}
+
+@keyframes apex-pro-glow {
+  0%, 100% { 
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% { 
+    opacity: 0.5;
+    transform: scale(0.8);
+  }
+}
+
 /* Shared layout helpers */
 .status-dot {
   @apply w-1 h-1 rounded-full;