diff --git a/tauri-app/src/App.tsx b/tauri-app/src/App.tsx
index 675ee8e..22500a5 100644
--- a/tauri-app/src/App.tsx
+++ b/tauri-app/src/App.tsx
@@ -137,6 +137,7 @@ export default function App() {
             onChatCreated={(id) => { setCurrentChatId(id); loadChats(); setSidebarOpen(false); }}
             onChatUpdated={loadChats}
             onOpenSidebar={() => setSidebarOpen(true)}
+            onOpenSettings={() => setView("settings")}
           />
         )}
       </div>
diff --git a/tauri-app/src/components/ChatView.css b/tauri-app/src/components/ChatView.css
index ca5e91c..13566d5 100644
--- a/tauri-app/src/components/ChatView.css
+++ b/tauri-app/src/components/ChatView.css
@@ -627,31 +627,59 @@
   align-items: center;
   justify-content: space-between;
   gap: 14px;
-  margin-bottom: 14px;
-  padding: 14px 16px;
+  margin-bottom: 12px;
+  padding: 12px 16px;
   border-radius: var(--radius-lg);
   border: 1px solid var(--border2);
-  background: rgba(255, 255, 255, 0.025);
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+}
+.composer-notice strong {
+  display: block;
+  color: var(--text);
+  margin-bottom: 2px;
+  font-size: 0.85rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+.composer-notice p {
+  color: var(--text2);
+  font-size: 0.8rem;
+  line-height: 1.5;
+  margin: 0;
+}
+.composer-notice.warning {
+  border-color: rgba(250, 204, 21, 0.2);
+  background: rgba(250, 204, 21, 0.04);
+}
+.composer-notice.info {
+  border-color: rgba(72, 166, 255, 0.2);
+  background: rgba(72, 166, 255, 0.04);
 }
-.composer-notice strong { display: block; color: var(--text); margin-bottom: 3px; font-size: 0.88rem; }
-.composer-notice p { color: var(--text2); font-size: 0.82rem; line-height: 1.5; }
-.composer-notice.warning { border-color: rgba(255,214,10,0.18); background: rgba(72,55,4,0.16); }
-.composer-notice.info    { border-color: rgba(72,166,255,0.2); background: rgba(16,38,63,0.2); }
 
 .notice-action-btn {
   border: 1px solid var(--border2);
   background: var(--bg3);
   color: var(--text);
-  border-radius: 10px;
-  padding: 9px 13px;
+  border-radius: var(--radius);
+  padding: 8px 14px;
   font: inherit;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
+  font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
   flex-shrink: 0;
+  letter-spacing: -0.01em;
+}
+.notice-action-btn:hover {
+  background: var(--bg4);
+  border-color: rgba(72, 166, 255, 0.35);
+  color: var(--accent2);
+}
+.notice-action-btn:active {
+  transform: scale(0.98);
 }
-.notice-action-btn:hover { background: var(--bg4); border-color: rgba(72,166,255,0.4); }
 
 /* ── Message wrappers ── */
 .msg-wrapper {
diff --git a/tauri-app/src/components/ChatView.tsx b/tauri-app/src/components/ChatView.tsx
index f806c83..c622d40 100644
--- a/tauri-app/src/components/ChatView.tsx
+++ b/tauri-app/src/components/ChatView.tsx
@@ -38,6 +38,7 @@ interface Props {
   onChatCreated: (id: number) => void;
   onChatUpdated: () => void;
   onOpenSidebar?: () => void;
+  onOpenSettings?: () => void;
   onDegradationDetected?: () => void;
 }
 
@@ -45,7 +46,7 @@ export default function ChatView({
   db, chatId, server, apiKey, model, 
   models, localModels, selectedModel, onModelChange, onModelSwap, isSwapping, status,
   runtimeMode = "remote", runtimeStatus = "ready", showDebugTools = Boolean((import.meta as ImportMeta & { env?: { DEV?: boolean } }).env?.DEV),
-  onChatCreated, onChatUpdated, onOpenSidebar, onDegradationDetected 
+  onChatCreated, onChatUpdated, onOpenSidebar, onOpenSettings, onDegradationDetected 
 }: Props) {
   const [messages, setMessages] = useState<Message[]>([]);
   const [input, setInput] = useState("");
@@ -796,11 +797,19 @@ export default function ChatView({
                     <strong>{composerNotice.title}</strong>
                     <p>{composerNotice.description}</p>
                   </div>
-                  {onOpenSidebar && (
-                    <button type="button" className="notice-action-btn" onClick={onOpenSidebar}>
-                      {composerNotice.actionLabel}
-                    </button>
-                  )}
+                  <button
+                    type="button"
+                    className="notice-action-btn"
+                    onClick={() => {
+                      if (composerNotice.actionLabel === "Open settings") {
+                        onOpenSettings?.();
+                      } else {
+                        onOpenSidebar?.();
+                      }
+                    }}
+                  >
+                    {composerNotice.actionLabel}
+                  </button>
                 </div>
               )}
 
diff --git a/tauri-app/src/components/forgeagent/AgenticToggle.tsx b/tauri-app/src/components/forgeagent/AgenticToggle.tsx
index 353a233..b5981f9 100644
--- a/tauri-app/src/components/forgeagent/AgenticToggle.tsx
+++ b/tauri-app/src/components/forgeagent/AgenticToggle.tsx
@@ -5,46 +5,60 @@ interface AgenticToggleProps {
 }
 
 export default function AgenticToggle({ isActive, onToggle, disabled = false }: AgenticToggleProps) {
-  const label = isActive ? "Modo agentic ativo" : "Modo agentic desativado";
-
   return (
     <button
       type="button"
       onClick={onToggle}
       disabled={disabled}
       aria-pressed={isActive}
-      aria-label={label}
+      aria-label={isActive ? "Modo agentic ativo" : "Modo agentic desativado"}
       title="Alterna o modo agentic: o assistente pode planejar e executar tarefas com mais autonomia."
-      className={`group relative inline-flex min-h-9 items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-medium tracking-tight shadow-sm transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/60 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 ${
-        disabled
-          ? "cursor-not-allowed border-slate-800 bg-slate-900/60 text-slate-500 opacity-60"
-          : isActive
-            ? "border-cyan-400/40 bg-cyan-500/15 text-cyan-200 hover:border-cyan-300/60 hover:bg-cyan-500/20 hover:text-cyan-100"
-            : "border-slate-700 bg-slate-900/80 text-slate-300 hover:border-slate-500 hover:bg-slate-800 hover:text-slate-100"
-      }`}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "6px",
+        padding: "5px 10px",
+        borderRadius: "var(--radius)",
+        border: isActive
+          ? "1px solid rgba(72,166,255,0.35)"
+          : "1px solid var(--border2)",
+        background: isActive
+          ? "rgba(72,166,255,0.08)"
+          : "var(--bg3)",
+        color: isActive ? "var(--accent2)" : "var(--text2)",
+        fontSize: "0.78rem",
+        fontWeight: 500,
+        fontFamily: "inherit",
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+        transition: "all 0.15s ease",
+        whiteSpace: "nowrap",
+        letterSpacing: "-0.01em",
+      }}
     >
       <span
         aria-hidden="true"
-        className={`h-2.5 w-2.5 rounded-full transition-all duration-200 ${
-          isActive ? "bg-cyan-300 shadow-[0_0_12px_rgba(103,232,249,0.85)]" : "bg-slate-500"
-        }`}
+        style={{
+          width: "6px",
+          height: "6px",
+          borderRadius: "50%",
+          background: isActive ? "var(--accent)" : "var(--text3)",
+          flexShrink: 0,
+          boxShadow: isActive ? "0 0 6px rgba(72,166,255,0.6)" : "none",
+          transition: "all 0.15s ease",
+        }}
       />
-      <span className="whitespace-nowrap">🛠️ Modo Agentic</span>
+      Agentic
       <span
-        className={`rounded-full border px-1.5 py-0.5 text-[10px] uppercase tracking-[0.18em] transition-colors duration-200 ${
-          isActive
-            ? "border-cyan-400/30 bg-cyan-400/10 text-cyan-200"
-            : "border-slate-700 bg-slate-800/80 text-slate-400"
-        }`}
+        style={{
+          fontSize: "0.68rem",
+          fontWeight: 600,
+          color: isActive ? "var(--accent)" : "var(--text3)",
+          letterSpacing: "0.05em",
+          textTransform: "uppercase",
+        }}
       >
-        {isActive ? "On" : "Off"}
-      </span>
-
-      <span
-        role="tooltip"
-        className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 w-56 -translate-x-1/2 rounded-lg border border-slate-700 bg-slate-950 px-2.5 py-2 text-[11px] leading-snug text-slate-200 opacity-0 shadow-lg transition-all duration-200 group-hover:opacity-100 group-hover:translate-y-0 group-focus-visible:opacity-100"
-      >
-        Habilita um modo mais autônomo para tarefas complexas, planejamento e execução assistida.
+        {isActive ? "ON" : "OFF"}
       </span>
     </button>
   );