diff --git a/package.json b/package.json
index 406ee74..dfafd76 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "java-runner-client",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "Run and manage Java processes with profiles, console I/O, and system tray support",
   "main": "dist/main/main.js",
   "scripts": {
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 2c6e703..49e47ec 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,10 +1,11 @@
+import React from 'react';
 import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
-import { TitleBar } from './components/common/TitleBar';
-import { DevModeGate } from './components/developer/DevModeGate';
-import { MainLayout } from './components/MainLayout';
 import { AppProvider } from './store/AppStore';
+import { TitleBar } from './components/layout/TitleBar';
+import { MainLayout } from './components/MainLayout';
+import { DevModeGate } from './components/developer/DevModeGate';
 
-function JavaRunnerFallback() {
+function Fallback() {
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-gray-900 text-gray-100 p-8 text-center select-none">
       <div className="mb-6 text-6xl">!</div>
@@ -24,22 +25,21 @@ function JavaRunnerFallback() {
 }
 
 export default function App() {
-  if (!window.api) return <JavaRunnerFallback />;
+  if (!window.api) return <Fallback />;
 
   return (
     <AppProvider>
-      <HashRouter
-        future={{
-          v7_startTransition: false,
-          v7_relativeSplatPath: false,
-        }}
-      >
-        <div className="flex flex-col h-screen bg-base-900 text-text-primary min-h-0 select-none">
+      <HashRouter future={{ v7_startTransition: false, v7_relativeSplatPath: false }}>
+        {/* Root: full viewport, flex column, no overflow */}
+        <div className="flex flex-col h-screen bg-base-900 text-text-primary select-none overflow-hidden">
           <TitleBar />
-          <Routes>
-            <Route path="/" element={<Navigate to="/console" replace />} />
-            <Route path="/*" element={<MainLayout />} />
-          </Routes>
+          {/* Content area: takes remaining height, no overflow — children manage their own */}
+          <div className="flex flex-1 min-h-0 overflow-hidden">
+            <Routes>
+              <Route path="/" element={<Navigate to="/console" replace />} />
+              <Route path="/*" element={<MainLayout />} />
+            </Routes>
+          </div>
         </div>
         <DevModeGate />
       </HashRouter>
diff --git a/src/renderer/components/MainLayout.tsx b/src/renderer/components/MainLayout.tsx
index 97b1829..b458e53 100644
--- a/src/renderer/components/MainLayout.tsx
+++ b/src/renderer/components/MainLayout.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { Routes, Route, Navigate, useNavigate, useLocation } from 'react-router-dom';
 import { ProfileSidebar } from './profiles/ProfileSidebar';
 import { ConsoleTab } from './console/ConsoleTab';
@@ -8,25 +8,16 @@ import { SettingsTab } from './settings/SettingsTab';
 import { UtilitiesTab } from './utils/UtilitiesTab';
 import { FaqPanel } from './faq/FaqPanel';
 import { DeveloperTab } from './developer/DeveloperTab';
+import { PanelHeader } from './layout/PanelHeader';
 import { useApp } from '../store/AppStore';
 import { useDevMode } from '../hooks/useDevMode';
 import { VscTerminal, VscAccount } from 'react-icons/vsc';
 import { LuList } from 'react-icons/lu';
-import { JRCEnvironment } from 'src/main/shared/types/App.types';
-
-const MAIN_TABS = [
-  { path: 'console', label: 'Console', Icon: VscTerminal },
-  { path: 'config', label: 'Configure', Icon: LuList },
-  { path: 'profile', label: 'Profile', Icon: VscAccount },
-] as const;
 
+// Panels rendered in the side-panel view (replace main tabs area)
 const SIDE_PANELS = ['settings', 'faq', 'utilities', 'developer'] as const;
 type SidePanel = (typeof SIDE_PANELS)[number];
 
-function isSidePanel(seg: string): seg is SidePanel {
-  return (SIDE_PANELS as readonly string[]).includes(seg);
-}
-
 const PANEL_LABELS: Record<SidePanel, string> = {
   settings: 'Application Settings',
   faq: 'FAQ',
@@ -34,8 +25,19 @@ const PANEL_LABELS: Record<SidePanel, string> = {
   developer: 'Developer',
 };
 
+function isSidePanel(seg: string): seg is SidePanel {
+  return (SIDE_PANELS as readonly string[]).includes(seg);
+}
+
+// Profile-specific tabs shown in the tab bar
+const PROFILE_TABS = [
+  { path: 'console', label: 'Console', Icon: VscTerminal },
+  { path: 'config', label: 'Configure', Icon: LuList },
+  { path: 'profile', label: 'Profile', Icon: VscAccount },
+] as const;
+
 export function MainLayout() {
-  const { state, activeProfile, isRunning, setActiveProfile } = useApp();
+  const { state, activeProfile, isRunning } = useApp();
   const devMode = useDevMode();
   const navigate = useNavigate();
   const location = useLocation();
@@ -48,89 +50,51 @@ export function MainLayout() {
   const color = activeProfile?.color ?? '#4ade80';
   const running = activeProfile ? isRunning(activeProfile.id) : false;
 
-  // Redirect away from developer panel if dev mode is turned off
+  // Redirect away from developer panel when dev mode is disabled
   useEffect(() => {
     if (!devMode && activePanel === 'developer') {
-      navigate('console', { replace: true });
+      navigate('/console', { replace: true });
     }
   }, [devMode, activePanel, navigate]);
 
-  // When profile changes, go to console
+  // Navigate to console when active profile changes
   const prevIdRef = React.useRef(state.activeProfileId);
   useEffect(() => {
     if (state.activeProfileId !== prevIdRef.current) {
       prevIdRef.current = state.activeProfileId;
-      if (!activePanel) navigate('console', { replace: true });
+      if (!activePanel) navigate('/console', { replace: true });
     }
   }, [state.activeProfileId, activePanel, navigate]);
 
-  const openPanel = (panel: SidePanel) => {
-    navigate(activePanel === panel ? 'console' : panel);
-  };
-
-  const handleProfileClick = () => {
-    if (activePanel) navigate('console');
-  };
-
   return (
-    <div className="flex flex-1 min-h-0">
-      <ProfileSidebar
-        onOpenSettings={() => openPanel('settings')}
-        onOpenFaq={() => openPanel('faq')}
-        onOpenUtilities={() => openPanel('utilities')}
-        onOpenDeveloper={() => openPanel('developer')}
-        onProfileClick={handleProfileClick}
-        activeSidePanel={activePanel}
-      />
+    <div className="flex flex-1 min-h-0 overflow-hidden">
+      <ProfileSidebar activeSidePanel={activePanel} />
 
-      <div className="flex flex-col flex-1 min-h-0">
+      <div className="flex flex-col flex-1 min-h-0 overflow-hidden">
         {activePanel ? (
+          // Side panel view
           <>
-            <div className="shrink-0">
-              <div className="flex items-center gap-3 px-4 h-10 bg-base-900">
-                <button
-                  onClick={() => navigate('console')}
-                  className="flex items-center gap-1.5 text-xs text-text-muted hover:text-text-primary transition-colors"
-                >
-                  <svg
-                    width="12"
-                    height="12"
-                    viewBox="0 0 12 12"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                  >
-                    <path d="M8 2L4 6l4 4" />
-                  </svg>
-                  Back
-                </button>
-                <div className="w-px h-4 bg-surface-border" />
-                <span className="text-xs font-medium text-text-secondary capitalize">
-                  {PANEL_LABELS[activePanel]}
-                </span>
-              </div>
-              <div className="border-b border-surface-border" />
-            </div>
-
-            <div className="flex-1 min-h-0 bg-base-800 animate-fade-in">
+            <PanelHeader title={PANEL_LABELS[activePanel]} />
+            <div className="flex-1 min-h-0 overflow-hidden animate-fade-in">
               <Routes>
                 <Route path="settings" element={<SettingsTab />} />
                 <Route path="faq" element={<FaqPanel />} />
                 <Route path="utilities" element={<UtilitiesTab />} />
                 <Route path="developer" element={<DeveloperTab />} />
+                <Route path="*" element={<Navigate to="/console" replace />} />
               </Routes>
             </div>
           </>
         ) : (
+          // Profile tab view
           <>
-            <div className="flex items-center px-4 pt-2 border-b border-surface-border bg-base-900 shrink-0">
-              {MAIN_TABS.map((tab) => {
+            <div className="flex items-center px-4 border-b border-surface-border bg-base-900 shrink-0">
+              {PROFILE_TABS.map((tab) => {
                 const isActive = activeTab === tab.path;
                 return (
                   <button
                     key={tab.path}
-                    onClick={() => navigate(tab.path)}
+                    onClick={() => navigate(`/${tab.path}`)}
                     className={[
                       'flex items-center gap-1.5 px-3 py-2 text-xs border-b-2 -mb-px transition-all duration-150',
                       isActive
@@ -158,12 +122,12 @@ export function MainLayout() {
               )}
             </div>
 
-            <div className="flex-1 min-h-0 bg-base-800 animate-fade-in">
+            <div className="flex-1 min-h-0 overflow-hidden animate-fade-in">
               <Routes>
                 <Route path="console" element={<ConsoleTab />} />
                 <Route path="config" element={<ConfigTab />} />
                 <Route path="profile" element={<ProfileTab />} />
-                <Route path="*" element={<Navigate to="console" replace />} />
+                <Route path="*" element={<Navigate to="/console" replace />} />
               </Routes>
             </div>
           </>
diff --git a/src/renderer/components/common/ContextMenu.tsx b/src/renderer/components/common/ContextMenu.tsx
index 60f53a4..f42d3d2 100644
--- a/src/renderer/components/common/ContextMenu.tsx
+++ b/src/renderer/components/common/ContextMenu.tsx
@@ -21,21 +21,13 @@ export function ContextMenu({ x, y, items, onClose }: Props) {
 
   useEffect(() => {
     const handleClick = (e: MouseEvent) => {
-      if (!ref.current) return;
-
-      // only close if clicking OUTSIDE
-      if (!ref.current.contains(e.target as Node)) {
-        onClose();
-      }
+      if (!ref.current?.contains(e.target as Node)) onClose();
     };
-
     const handleKey = (e: KeyboardEvent) => {
       if (e.key === 'Escape') onClose();
     };
-
     document.addEventListener('click', handleClick);
     document.addEventListener('keydown', handleKey);
-
     return () => {
       document.removeEventListener('click', handleClick);
       document.removeEventListener('keydown', handleKey);
@@ -43,10 +35,8 @@ export function ContextMenu({ x, y, items, onClose }: Props) {
   }, [onClose]);
 
   const style: React.CSSProperties = { position: 'fixed', zIndex: 1000 };
-
   if (x + 180 > window.innerWidth) style.right = window.innerWidth - x;
   else style.left = x;
-
   if (y + items.length * 32 > window.innerHeight) style.bottom = window.innerHeight - y;
   else style.top = y;
 
@@ -57,12 +47,11 @@ export function ContextMenu({ x, y, items, onClose }: Props) {
           if (item.type === 'separator') {
             return <div key={i} className="my-1 border-t border-surface-border/60" />;
           }
-
           return (
             <button
               key={i}
               disabled={item.disabled}
-              onMouseDown={(e) => e.preventDefault()} // prevent focus jump
+              onMouseDown={(e) => e.preventDefault()}
               onClick={(e) => {
                 if (item.disabled || !item.onClick) return;
                 item.onClick(e);
diff --git a/src/renderer/components/common/EmptyState.tsx b/src/renderer/components/common/EmptyState.tsx
new file mode 100644
index 0000000..9f87bfe
--- /dev/null
+++ b/src/renderer/components/common/EmptyState.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface Props {
+  icon: React.ReactNode;
+  text: string;
+}
+
+export function EmptyState({ icon, text }: Props) {
+  return (
+    <div className="flex flex-col items-center gap-3 py-12 text-text-muted">
+      {icon}
+      <p className="text-xs font-mono text-center max-w-xs leading-relaxed">{text}</p>
+    </div>
+  );
+}
diff --git a/src/renderer/components/common/Modal.tsx b/src/renderer/components/common/Modal.tsx
index 7477a1f..63ad16a 100644
--- a/src/renderer/components/common/Modal.tsx
+++ b/src/renderer/components/common/Modal.tsx
@@ -44,7 +44,6 @@ export function Modal({ open, title, onClose, width = 'md', children }: Props) {
           WIDTHS[width],
         ].join(' ')}
       >
-        {/* Header */}
         <div className="flex items-center justify-between px-5 py-3.5 border-b border-surface-border shrink-0">
           <h2 className="text-sm font-semibold text-text-primary">{title}</h2>
           <button
@@ -54,9 +53,7 @@ export function Modal({ open, title, onClose, width = 'md', children }: Props) {
             <VscClose size={15} />
           </button>
         </div>
-
-        {/* Scrollable body */}
-        <div className="flex-1 overflow-y-auto">{children}</div>
+        <div className="flex-1 overflow-y-auto min-h-0">{children}</div>
       </div>
     </div>
   );
diff --git a/src/renderer/components/common/PropList.tsx b/src/renderer/components/common/PropList.tsx
index 474b0ff..d261638 100644
--- a/src/renderer/components/common/PropList.tsx
+++ b/src/renderer/components/common/PropList.tsx
@@ -19,6 +19,7 @@ export function PropList({ items, onChange, onPendingChange }: Props) {
 
   const notify = (k: string, v: string) =>
     onPendingChange?.(k.trim().length > 0 || v.trim().length > 0);
+
   const setKey = (v: string) => {
     setDraftKey(v);
     notify(v, draftValue);
@@ -44,6 +45,12 @@ export function PropList({ items, onChange, onPendingChange }: Props) {
   const editValue = (i: number, value: string) =>
     onChange(items.map((it, idx) => (idx === i ? { ...it, value } : it)));
 
+  const inputCls = (disabled?: boolean) =>
+    [
+      'flex-1 bg-base-900 border border-surface-border rounded-md px-2.5 py-1.5 text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 transition-colors',
+      disabled ? 'opacity-40' : '',
+    ].join(' ');
+
   return (
     <div className="space-y-1.5">
       {items.length > 0 && (
@@ -61,7 +68,6 @@ export function PropList({ items, onChange, onPendingChange }: Props) {
         <div key={i} className="flex items-center gap-2 group">
           <button
             onClick={() => toggle(i)}
-            title={item.enabled ? 'Disable' : 'Enable'}
             className={[
               'w-4 h-4 rounded border transition-colors shrink-0',
               item.enabled
@@ -87,10 +93,7 @@ export function PropList({ items, onChange, onPendingChange }: Props) {
             value={item.key}
             onChange={(e) => editKey(i, e.target.value)}
             placeholder="property.key"
-            className={[
-              'flex-1 bg-base-900 border border-surface-border rounded-md px-2.5 py-1.5 text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 transition-colors',
-              !item.enabled ? 'opacity-40' : '',
-            ].join(' ')}
+            className={inputCls(!item.enabled)}
           />
           <span className="text-text-muted font-mono text-xs">=</span>
           <input
@@ -98,10 +101,7 @@ export function PropList({ items, onChange, onPendingChange }: Props) {
             value={item.value}
             onChange={(e) => editValue(i, e.target.value)}
             placeholder="value (optional)"
-            className={[
-              'flex-1 bg-base-900 border border-surface-border rounded-md px-2.5 py-1.5 text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 transition-colors',
-              !item.enabled ? 'opacity-40' : '',
-            ].join(' ')}
+            className={inputCls(!item.enabled)}
           />
           <button
             onClick={() => remove(i)}
diff --git a/src/renderer/components/common/Tooltip.tsx b/src/renderer/components/common/Tooltip.tsx
index 1eacc2c..a0d81f1 100644
--- a/src/renderer/components/common/Tooltip.tsx
+++ b/src/renderer/components/common/Tooltip.tsx
@@ -14,35 +14,38 @@ export function Tooltip({ content, children, delay = 400, side = 'top' }: Props)
   const targetRef = useRef<HTMLElement | null>(null);
   const tipRef = useRef<HTMLDivElement>(null);
 
+  const calcPos = (rect: DOMRect, tw: number, th: number) => {
+    let x = 0;
+    let y = 0;
+    if (side === 'top') {
+      x = rect.left + rect.width / 2 - tw / 2;
+      y = rect.top - th - 6;
+    }
+    if (side === 'bottom') {
+      x = rect.left + rect.width / 2 - tw / 2;
+      y = rect.bottom + 6;
+    }
+    if (side === 'left') {
+      x = rect.left - tw - 6;
+      y = rect.top + rect.height / 2 - th / 2;
+    }
+    if (side === 'right') {
+      x = rect.right + 6;
+      y = rect.top + rect.height / 2 - th / 2;
+    }
+    return {
+      x: Math.max(6, Math.min(window.innerWidth - tw - 6, x)),
+      y: Math.max(6, Math.min(window.innerHeight - th - 6, y)),
+    };
+  };
+
   const show = (e: React.MouseEvent<HTMLElement>) => {
-    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
     targetRef.current = e.currentTarget as HTMLElement;
     timerRef.current = setTimeout(() => {
       const tip = tipRef.current;
-      const tw = tip?.offsetWidth ?? 0;
-      const th = tip?.offsetHeight ?? 0;
-      let x = 0;
-      let y = 0;
-      if (side === 'top') {
-        x = rect.left + rect.width / 2 - tw / 2;
-        y = rect.top - th - 6;
-      }
-      if (side === 'bottom') {
-        x = rect.left + rect.width / 2 - tw / 2;
-        y = rect.bottom + 6;
-      }
-      if (side === 'left') {
-        x = rect.left - tw - 6;
-        y = rect.top + rect.height / 2 - th / 2;
-      }
-      if (side === 'right') {
-        x = rect.right + 6;
-        y = rect.top + rect.height / 2 - th / 2;
-      }
-      // Clamp to viewport
-      x = Math.max(6, Math.min(window.innerWidth - tw - 6, x));
-      y = Math.max(6, Math.min(window.innerHeight - th - 6, y));
-      setPos({ x, y });
+      if (!tip || !targetRef.current) return;
+      const rect = targetRef.current.getBoundingClientRect();
+      setPos(calcPos(rect, tip.offsetWidth, tip.offsetHeight));
       setVisible(true);
     }, delay);
   };
@@ -59,41 +62,13 @@ export function Tooltip({ content, children, delay = 400, side = 'top' }: Props)
     []
   );
 
-  // Recalculate position when tip dimensions are known
   useEffect(() => {
-    if (!visible || !targetRef.current) return;
+    if (!visible || !targetRef.current || !tipRef.current) return;
     const rect = targetRef.current.getBoundingClientRect();
-    const tip = tipRef.current;
-    if (!tip) return;
-    const tw = tip.offsetWidth;
-    const th = tip.offsetHeight;
-    let x = 0;
-    let y = 0;
-    if (side === 'top') {
-      x = rect.left + rect.width / 2 - tw / 2;
-      y = rect.top - th - 6;
-    }
-    if (side === 'bottom') {
-      x = rect.left + rect.width / 2 - tw / 2;
-      y = rect.bottom + 6;
-    }
-    if (side === 'left') {
-      x = rect.left - tw - 6;
-      y = rect.top + rect.height / 2 - th / 2;
-    }
-    if (side === 'right') {
-      x = rect.right + 6;
-      y = rect.top + rect.height / 2 - th / 2;
-    }
-    x = Math.max(6, Math.min(window.innerWidth - tw - 6, x));
-    y = Math.max(6, Math.min(window.innerHeight - th - 6, y));
-    setPos({ x, y });
+    setPos(calcPos(rect, tipRef.current.offsetWidth, tipRef.current.offsetHeight));
   }, [visible, side]);
 
-  const child = React.cloneElement(children, {
-    onMouseEnter: show,
-    onMouseLeave: hide,
-  });
+  const child = React.cloneElement(children, { onMouseEnter: show, onMouseLeave: hide });
 
   return (
     <>
@@ -102,8 +77,7 @@ export function Tooltip({ content, children, delay = 400, side = 'top' }: Props)
         ref={tipRef}
         style={{ position: 'fixed', left: pos.x, top: pos.y, zIndex: 9999, pointerEvents: 'none' }}
         className={[
-          'bg-base-900 border border-surface-border rounded-lg px-2.5 py-1.5 text-xs text-text-secondary shadow-xl',
-          'transition-opacity duration-150',
+          'bg-base-900 border border-surface-border rounded-lg px-2.5 py-1.5 text-xs text-text-secondary shadow-xl transition-opacity duration-150',
           visible ? 'opacity-100' : 'opacity-0',
         ].join(' ')}
       >
diff --git a/src/renderer/components/console/ConsoleInput.tsx b/src/renderer/components/console/ConsoleInput.tsx
new file mode 100644
index 0000000..40f3cfd
--- /dev/null
+++ b/src/renderer/components/console/ConsoleInput.tsx
@@ -0,0 +1,74 @@
+import React, { useRef, useCallback, KeyboardEvent } from 'react';
+
+interface Props {
+  running: boolean;
+  fontSize: number;
+  history: string[];
+  onSend: (cmd: string) => void;
+  onClear: () => void;
+  onOpenSearch: () => void;
+}
+
+export function ConsoleInput({ running, fontSize, history, onSend, onClear, onOpenSearch }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = React.useState('');
+  const [historyIdx, setHistoryIdx] = React.useState(-1);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        const cmd = value.trim();
+        if (!cmd || !running) return;
+        onSend(cmd);
+        setValue('');
+        setHistoryIdx(-1);
+        return;
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        const n = Math.min(historyIdx + 1, history.length - 1);
+        setHistoryIdx(n);
+        setValue(history[n] ?? '');
+        return;
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const n = Math.max(historyIdx - 1, -1);
+        setHistoryIdx(n);
+        setValue(n === -1 ? '' : (history[n] ?? ''));
+        return;
+      }
+      if (e.ctrlKey && e.key === 'l') {
+        e.preventDefault();
+        onClear();
+      }
+      if (e.ctrlKey && e.key === 'f') {
+        e.preventDefault();
+        onOpenSearch();
+      }
+    },
+    [value, running, history, historyIdx, onSend, onClear, onOpenSearch]
+  );
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-t border-surface-border bg-base-900 shrink-0">
+      <span className="text-text-muted font-mono text-xs">›</span>
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={!running}
+        placeholder={
+          running
+            ? 'Send command... (↑/↓ history, Ctrl+L clear, Ctrl+F search)'
+            : 'Start the process to send commands'
+        }
+        className="flex-1 bg-transparent text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none disabled:opacity-40"
+        style={{ fontSize }}
+      />
+    </div>
+  );
+}
diff --git a/src/renderer/components/console/ConsoleOutput.tsx b/src/renderer/components/console/ConsoleOutput.tsx
new file mode 100644
index 0000000..265e5b4
--- /dev/null
+++ b/src/renderer/components/console/ConsoleOutput.tsx
@@ -0,0 +1,194 @@
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
+import type { ConsoleLine } from '../../../main/shared/types/Process.types';
+
+interface Props {
+  lines: ConsoleLine[];
+  fontSize: number;
+  wordWrap: boolean;
+  lineNumbers: boolean;
+  searchOpen: boolean;
+  searchQuery: string;
+  searchIdx: number;
+  onSearchIdxChange: (idx: number) => void;
+  onAutoScrollChange: (v: boolean) => void;
+  autoScroll: boolean;
+}
+
+export function ConsoleOutput({
+  lines,
+  fontSize,
+  wordWrap,
+  lineNumbers,
+  searchOpen,
+  searchQuery,
+  searchIdx,
+  onSearchIdxChange,
+  onAutoScrollChange,
+  autoScroll,
+}: Props) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const matchRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const searchTerm = searchQuery.trim().toLowerCase();
+
+  const matchIndices = useMemo<number[]>(() => {
+    if (!searchTerm) return [];
+    return lines.reduce<number[]>((acc, line, i) => {
+      if (line.text.toLowerCase().includes(searchTerm)) acc.push(i);
+      return acc;
+    }, []);
+  }, [lines, searchTerm]);
+
+  const clampedIdx =
+    matchIndices.length > 0
+      ? ((searchIdx % matchIndices.length) + matchIndices.length) % matchIndices.length
+      : 0;
+
+  // Auto-scroll to bottom when new lines arrive
+  useEffect(() => {
+    if (autoScroll && !searchOpen) {
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' });
+    }
+  }, [lines.length, autoScroll, searchOpen]);
+
+  // Scroll to current match
+  useEffect(() => {
+    if (matchIndices.length > 0) {
+      matchRefs.current[clampedIdx]?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+  }, [clampedIdx, matchIndices.length]);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    onAutoScrollChange(el.scrollHeight - el.scrollTop - el.clientHeight < 40);
+  }, [onAutoScrollChange]);
+
+  matchRefs.current = new Array(matchIndices.length).fill(null);
+
+  return (
+    <div
+      ref={scrollRef}
+      onScroll={handleScroll}
+      className="flex-1 min-h-0 overflow-y-auto overflow-x-auto bg-base-950 select-text"
+      style={{ fontSize, lineHeight: 1.6, fontFamily: 'monospace' }}
+    >
+      <div className={wordWrap ? 'py-2' : 'py-2 min-w-max'}>
+        {lines.length === 0 && (
+          <div className="px-4 py-8 text-center text-text-muted text-xs font-mono">
+            Process not running. Press Run to start.
+          </div>
+        )}
+        {lines.map((line, i) => {
+          const matchPos = matchIndices.indexOf(i);
+          const isCurrentMatch = matchPos === clampedIdx && matchPos !== -1;
+          const isAnyMatch = matchPos !== -1;
+          return (
+            <ConsoleLineRow
+              key={line.id}
+              line={line}
+              lineNum={i + 1}
+              showLineNum={lineNumbers}
+              wordWrap={wordWrap}
+              searchTerm={searchTerm}
+              isCurrentMatch={isCurrentMatch}
+              isAnyMatch={isAnyMatch}
+              ref={
+                matchPos !== -1
+                  ? (el: HTMLDivElement | null) => {
+                      matchRefs.current[matchPos] = el;
+                    }
+                  : undefined
+              }
+            />
+          );
+        })}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}
+
+// ─── Line row ─────────────────────────────────────────────────────────────────
+
+const LINE_COLORS: Record<ConsoleLine['type'], string> = {
+  stdout: 'text-text-primary',
+  stderr: 'text-console-error',
+  input: 'text-console-input',
+  system: 'text-text-muted',
+};
+
+const ConsoleLineRow = React.forwardRef<
+  HTMLDivElement,
+  {
+    line: ConsoleLine;
+    lineNum: number;
+    showLineNum: boolean;
+    wordWrap: boolean;
+    searchTerm: string;
+    isCurrentMatch: boolean;
+    isAnyMatch: boolean;
+  }
+>(({ line, lineNum, showLineNum, wordWrap, searchTerm, isCurrentMatch, isAnyMatch }, ref) => {
+  const text = line.text || ' ';
+  const content =
+    searchTerm && isAnyMatch ? renderHighlighted(text, searchTerm, isCurrentMatch) : text;
+
+  return (
+    <div
+      ref={ref}
+      className={[
+        'flex gap-0 px-2',
+        LINE_COLORS[line.type],
+        isCurrentMatch
+          ? 'bg-yellow-400/10'
+          : isAnyMatch
+            ? 'bg-yellow-400/5'
+            : 'hover:bg-white/[0.02]',
+      ].join(' ')}
+    >
+      {showLineNum && (
+        <span className="w-10 shrink-0 text-right pr-3 text-text-muted/40 select-none font-mono text-[0.7em] leading-[1.6] pt-px">
+          {lineNum}
+        </span>
+      )}
+      <span
+        className={[
+          'font-mono flex-1',
+          wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre',
+        ].join(' ')}
+      >
+        {content}
+      </span>
+    </div>
+  );
+});
+ConsoleLineRow.displayName = 'ConsoleLineRow';
+
+function renderHighlighted(text: string, term: string, isCurrent: boolean): React.ReactNode {
+  const parts: React.ReactNode[] = [];
+  const lower = text.toLowerCase();
+  let last = 0;
+  let idx = lower.indexOf(term);
+  let key = 0;
+  while (idx !== -1) {
+    if (idx > last) parts.push(text.slice(last, idx));
+    parts.push(
+      <mark
+        key={key++}
+        className={
+          isCurrent
+            ? 'bg-yellow-300 text-black rounded-sm'
+            : 'bg-yellow-400/30 text-inherit rounded-sm'
+        }
+      >
+        {text.slice(idx, idx + term.length)}
+      </mark>
+    );
+    last = idx + term.length;
+    idx = lower.indexOf(term, last);
+  }
+  if (last < text.length) parts.push(text.slice(last));
+  return parts;
+}
diff --git a/src/renderer/components/console/ConsoleSearch.tsx b/src/renderer/components/console/ConsoleSearch.tsx
new file mode 100644
index 0000000..f961bde
--- /dev/null
+++ b/src/renderer/components/console/ConsoleSearch.tsx
@@ -0,0 +1,76 @@
+import React, { useRef, useEffect } from 'react';
+import { VscChevronUp, VscChevronDown, VscClose } from 'react-icons/vsc';
+
+interface Props {
+  query: string;
+  matchCount: number;
+  currentIdx: number;
+  onQueryChange: (q: string) => void;
+  onNext: () => void;
+  onPrev: () => void;
+  onClose: () => void;
+}
+
+export function ConsoleSearch({
+  query,
+  matchCount,
+  currentIdx,
+  onQueryChange,
+  onNext,
+  onPrev,
+  onClose,
+}: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 50);
+  }, []);
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-1.5 border-b border-surface-border bg-base-900 shrink-0 animate-fade-in">
+      <input
+        ref={inputRef}
+        type="text"
+        value={query}
+        onChange={(e) => onQueryChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            e.shiftKey ? onPrev() : onNext();
+          }
+          if (e.key === 'Escape') onClose();
+        }}
+        placeholder="Search console... (Enter next, Shift+Enter prev)"
+        className="flex-1 bg-base-950 border border-surface-border rounded px-2.5 py-1 text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40"
+      />
+      {query.trim() && (
+        <span className="text-xs font-mono text-text-muted shrink-0">
+          {matchCount === 0 ? 'No matches' : `${currentIdx + 1} / ${matchCount}`}
+        </span>
+      )}
+      <button
+        onClick={onPrev}
+        disabled={matchCount === 0}
+        className="text-text-muted hover:text-text-primary disabled:opacity-30 p-0.5"
+        title="Previous (Shift+Enter)"
+      >
+        <VscChevronUp size={13} />
+      </button>
+      <button
+        onClick={onNext}
+        disabled={matchCount === 0}
+        className="text-text-muted hover:text-text-primary disabled:opacity-30 p-0.5"
+        title="Next (Enter)"
+      >
+        <VscChevronDown size={13} />
+      </button>
+      <button
+        onClick={onClose}
+        className="text-text-muted hover:text-text-primary p-0.5"
+        title="Close (Esc)"
+      >
+        <VscClose size={13} />
+      </button>
+    </div>
+  );
+}
diff --git a/src/renderer/components/console/ConsoleTab.tsx b/src/renderer/components/console/ConsoleTab.tsx
index a7faded..ac5e9f7 100644
--- a/src/renderer/components/console/ConsoleTab.tsx
+++ b/src/renderer/components/console/ConsoleTab.tsx
@@ -1,8 +1,10 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo, KeyboardEvent } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useApp } from '../../store/AppStore';
-import { Button } from '../common/Button';
-import { VscSearch, VscChevronUp, VscChevronDown, VscClose } from 'react-icons/vsc';
-import { ConsoleLine } from '../../../main/shared/types/Process.types';
+import { ConsoleToolbar } from './ConsoleToolbar';
+import { ConsoleSearch } from './ConsoleSearch';
+import { ConsoleOutput } from './ConsoleOutput';
+import { ConsoleInput } from './ConsoleInput';
+import { VscClose } from 'react-icons/vsc';
 
 export function ConsoleTab() {
   const { state, activeProfile, startProcess, stopProcess, sendInput, clearConsole, isRunning } =
@@ -14,71 +16,44 @@ export function ConsoleTab() {
   const settings = state.settings;
   const color = activeProfile?.color ?? '#4ade80';
   const processState = state.processStates.find((s) => s.profileId === profileId);
-  const pid = processState?.pid;
 
-  const [inputValue, setInputValue] = useState('');
-  const [historyIdx, setHistoryIdx] = useState(-1);
-  const [cmdHistory, setCmdHistory] = useState<string[]>([]);
-  const [autoScroll, setAutoScroll] = useState(true);
   const [starting, setStarting] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const [cmdHistory, setCmdHistory] = useState<string[]>([]);
+
+  // Search state
   const [searchOpen, setSearchOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [searchIdx, setSearchIdx] = useState(0);
 
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const searchRef = useRef<HTMLInputElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const matchRefs = useRef<(HTMLDivElement | null)[]>([]);
+  // Auto-scroll state (owned here, passed down)
+  const [autoScroll, setAutoScroll] = useState(true);
 
+  // Reset on profile change
   useEffect(() => {
-    setInputValue('');
-    setHistoryIdx(-1);
     setErrorMsg(null);
     setSearchOpen(false);
     setSearchQuery('');
     setSearchIdx(0);
+    setAutoScroll(true);
   }, [profileId]);
 
+  // Global keyboard shortcuts
   useEffect(() => {
-    if (autoScroll && !searchOpen) bottomRef.current?.scrollIntoView({ behavior: 'instant' });
-  }, [lines.length, autoScroll, searchOpen]);
-
-  const handleScroll = useCallback(() => {
-    const el = scrollRef.current;
-    if (!el) return;
-    setAutoScroll(el.scrollHeight - el.scrollTop - el.clientHeight < 40);
-  }, []);
-
-  const searchTerm = searchQuery.trim().toLowerCase();
-
-  const matchIndices = useMemo<number[]>(() => {
-    if (!searchTerm) return [];
-    return lines.reduce<number[]>((acc, line, i) => {
-      if (line.text.toLowerCase().includes(searchTerm)) acc.push(i);
-      return acc;
-    }, []);
-  }, [lines, searchTerm]);
-
-  const clampedIdx =
-    matchIndices.length > 0
-      ? ((searchIdx % matchIndices.length) + matchIndices.length) % matchIndices.length
-      : 0;
-
-  const scrollToMatch = useCallback((idx: number) => {
-    const el = matchRefs.current[idx];
-    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }, []);
-
-  useEffect(() => {
-    if (matchIndices.length > 0) scrollToMatch(clampedIdx);
-  }, [clampedIdx, matchIndices, scrollToMatch]);
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && e.key === 'f') {
+        e.preventDefault();
+        openSearch();
+      }
+      if (e.key === 'Escape' && searchOpen) closeSearch();
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [searchOpen]);
 
   const openSearch = useCallback(() => {
     setSearchOpen(true);
     setAutoScroll(false);
-    setTimeout(() => searchRef.current?.focus(), 50);
   }, []);
 
   const closeSearch = useCallback(() => {
@@ -88,9 +63,6 @@ export function ConsoleTab() {
     setAutoScroll(true);
   }, []);
 
-  const goNext = useCallback(() => setSearchIdx((i) => i + 1), []);
-  const goPrev = useCallback(() => setSearchIdx((i) => i - 1), []);
-
   const handleToggle = useCallback(async () => {
     if (!activeProfile) return;
     setErrorMsg(null);
@@ -108,65 +80,17 @@ export function ConsoleTab() {
     }
   }, [activeProfile, running, profileId, stopProcess, startProcess]);
 
-  const handleSend = useCallback(async () => {
-    const cmd = inputValue.trim();
-    if (!cmd || !running) return;
-    await sendInput(profileId, cmd);
-    setCmdHistory((prev) =>
-      [cmd, ...prev.filter((c) => c !== cmd)].slice(0, settings?.consoleHistorySize ?? 200)
-    );
-    setInputValue('');
-    setHistoryIdx(-1);
-  }, [inputValue, running, profileId, sendInput, settings]);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        handleSend();
-        return;
-      }
-      if (e.key === 'ArrowUp') {
-        e.preventDefault();
-        const n = Math.min(historyIdx + 1, cmdHistory.length - 1);
-        setHistoryIdx(n);
-        setInputValue(cmdHistory[n] ?? '');
-        return;
-      }
-      if (e.key === 'ArrowDown') {
-        e.preventDefault();
-        const n = Math.max(historyIdx - 1, -1);
-        setHistoryIdx(n);
-        setInputValue(n === -1 ? '' : (cmdHistory[n] ?? ''));
-        return;
-      }
-      if (e.key === 'l' && e.ctrlKey) {
-        e.preventDefault();
-        clearConsole(profileId);
-      }
-      if (e.key === 'f' && e.ctrlKey) {
-        e.preventDefault();
-        openSearch();
-      }
+  const handleSend = useCallback(
+    async (cmd: string) => {
+      await sendInput(profileId, cmd);
+      setCmdHistory((prev) =>
+        [cmd, ...prev.filter((c) => c !== cmd)].slice(0, settings?.consoleHistorySize ?? 200)
+      );
     },
-    [handleSend, historyIdx, cmdHistory, clearConsole, profileId, openSearch]
+    [profileId, sendInput, settings]
   );
 
-  useEffect(() => {
-    const handler = (e: globalThis.KeyboardEvent) => {
-      if (e.ctrlKey && e.key === 'f') {
-        e.preventDefault();
-        openSearch();
-      }
-      if (e.key === 'Escape' && searchOpen) closeSearch();
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [openSearch, closeSearch, searchOpen]);
-
-  const fontSize = settings?.consoleFontSize ?? 13;
-  const wordWrap = settings?.consoleWordWrap ?? false;
-  const lineNums = settings?.consoleLineNumbers ?? false;
+  const handleClear = useCallback(() => clearConsole(profileId), [clearConsole, profileId]);
 
   if (!activeProfile) {
     return (
@@ -176,119 +100,45 @@ export function ConsoleTab() {
     );
   }
 
-  matchRefs.current = new Array(matchIndices.length).fill(null);
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center gap-2 px-3 py-2 border-b border-surface-border bg-base-900 shrink-0">
-        <Button
-          variant={running ? 'danger' : 'primary'}
-          size="sm"
-          onClick={handleToggle}
-          loading={starting}
-          style={!running ? { backgroundColor: color, color: '#08090d', borderColor: color } : {}}
-        >
-          {running ? 'Stop' : 'Run'}
-        </Button>
-
-        {running && pid && (
-          <span className="flex items-center gap-1.5 text-xs font-mono text-text-muted animate-fade-in">
-            <span
-              className="w-1.5 h-1.5 rounded-full animate-pulse-dot"
-              style={{ backgroundColor: color }}
-            />
-            PID <span className="text-text-secondary">{pid}</span>
-          </span>
-        )}
-
-        <div className="flex-1" />
-
-        {!autoScroll && !searchOpen && (
-          <button
-            onClick={() => {
-              setAutoScroll(true);
-              bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
-            }}
-            className="text-xs font-mono transition-colors"
-            style={{ color }}
-          >
-            scroll to bottom
-          </button>
-        )}
-
-        <button
-          onClick={openSearch}
-          className="text-text-muted hover:text-text-primary transition-colors p-1"
-          title="Search (Ctrl+F)"
-        >
-          <VscSearch size={13} />
-        </button>
+  const fontSize = settings?.consoleFontSize ?? 13;
+  const wordWrap = settings?.consoleWordWrap ?? false;
+  const lineNumbers = settings?.consoleLineNumbers ?? false;
 
-        <button
-          onClick={() => clearConsole(profileId)}
-          className="text-xs text-text-muted hover:text-text-primary font-mono transition-colors"
-          title="Clear (Ctrl+L)"
-        >
-          Clear
-        </button>
+  // Calculate match count for search display
+  const searchTerm = searchQuery.trim().toLowerCase();
+  const matchCount = searchTerm
+    ? lines.filter((l) => l.text.toLowerCase().includes(searchTerm)).length
+    : 0;
+  const clampedIdx = matchCount > 0 ? ((searchIdx % matchCount) + matchCount) % matchCount : 0;
 
-        <span className="text-xs text-text-muted font-mono tabular-nums">
-          {lines.length.toLocaleString()} lines
-        </span>
-      </div>
+  return (
+    <div className="flex flex-col h-full min-h-0">
+      <ConsoleToolbar
+        running={running}
+        starting={starting}
+        pid={processState?.pid}
+        color={color}
+        lineCount={lines.length}
+        autoScroll={autoScroll}
+        onToggle={handleToggle}
+        onClear={handleClear}
+        onOpenSearch={openSearch}
+        onScrollToBottom={() => setAutoScroll(true)}
+      />
 
       {searchOpen && (
-        <div className="flex items-center gap-2 px-3 py-1.5 border-b border-surface-border bg-base-900 shrink-0 animate-fade-in">
-          <input
-            ref={searchRef}
-            type="text"
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setSearchIdx(0);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.preventDefault();
-                e.shiftKey ? goPrev() : goNext();
-              }
-              if (e.key === 'Escape') closeSearch();
-            }}
-            placeholder="Search console... (Enter next, Shift+Enter prev)"
-            className="flex-1 bg-base-950 border border-surface-border rounded px-2.5 py-1
-              text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40"
-          />
-          {searchTerm && (
-            <span className="text-xs font-mono text-text-muted shrink-0">
-              {matchIndices.length === 0
-                ? 'No matches'
-                : `${clampedIdx + 1} / ${matchIndices.length}`}
-            </span>
-          )}
-          <button
-            onClick={goPrev}
-            disabled={matchIndices.length === 0}
-            className="text-text-muted hover:text-text-primary disabled:opacity-30 p-0.5"
-            title="Previous (Shift+Enter)"
-          >
-            <VscChevronUp size={13} />
-          </button>
-          <button
-            onClick={goNext}
-            disabled={matchIndices.length === 0}
-            className="text-text-muted hover:text-text-primary disabled:opacity-30 p-0.5"
-            title="Next (Enter)"
-          >
-            <VscChevronDown size={13} />
-          </button>
-          <button
-            onClick={closeSearch}
-            className="text-text-muted hover:text-text-primary p-0.5"
-            title="Close (Esc)"
-          >
-            <VscClose size={13} />
-          </button>
-        </div>
+        <ConsoleSearch
+          query={searchQuery}
+          matchCount={matchCount}
+          currentIdx={clampedIdx}
+          onQueryChange={(q) => {
+            setSearchQuery(q);
+            setSearchIdx(0);
+          }}
+          onNext={() => setSearchIdx((i) => i + 1)}
+          onPrev={() => setSearchIdx((i) => i - 1)}
+          onClose={closeSearch}
+        />
       )}
 
       {errorMsg && (
@@ -300,149 +150,27 @@ export function ConsoleTab() {
         </div>
       )}
 
-      <div
-        ref={scrollRef}
-        onScroll={handleScroll}
-        onClick={() => !searchOpen && inputRef.current?.focus()}
-        className="flex-1 overflow-y-auto overflow-x-auto bg-base-950 select-text"
-        style={{ fontSize, lineHeight: 1.6, fontFamily: 'monospace' }}
-      >
-        <div className={wordWrap ? 'py-2' : 'py-2 min-w-max'}>
-          {lines.length === 0 && (
-            <div className="px-4 py-8 text-center text-text-muted text-xs font-mono">
-              {running ? 'Waiting for output...' : 'Process not running. Press Run to start.'}
-            </div>
-          )}
-          {lines.map((line, i) => {
-            const matchPos = matchIndices.indexOf(i);
-            const isCurrentMatch = matchPos === clampedIdx && matchPos !== -1;
-            const isAnyMatch = matchPos !== -1;
-
-            return (
-              <ConsoleLineRow
-                key={line.id}
-                line={line}
-                lineNum={i + 1}
-                showLineNum={lineNums}
-                wordWrap={wordWrap}
-                searchTerm={searchTerm}
-                isCurrentMatch={isCurrentMatch}
-                isAnyMatch={isAnyMatch}
-                ref={
-                  matchPos !== -1
-                    ? (el: HTMLDivElement | null) => {
-                        matchRefs.current[matchPos] = el;
-                      }
-                    : undefined
-                }
-              />
-            );
-          })}
-          <div ref={bottomRef} />
-        </div>
-      </div>
-
-      <div className="flex items-center gap-2 px-3 py-2 border-t border-surface-border bg-base-900 shrink-0">
-        <span className="text-text-muted font-mono text-xs">›</span>
-        <input
-          ref={inputRef}
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          disabled={!running}
-          placeholder={
-            running
-              ? 'Send command... (up/down history, Ctrl+L clear, Ctrl+F search)'
-              : 'Start the process to send commands'
-          }
-          className="flex-1 bg-transparent text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none disabled:opacity-40"
-          style={{ fontSize }}
-        />
-      </div>
-    </div>
-  );
-}
-
-const LINE_COLORS: Record<ConsoleLine['type'], string> = {
-  stdout: 'text-text-primary',
-  stderr: 'text-console-error',
-  input: 'text-console-input',
-  system: 'text-text-muted',
-};
-
-const ConsoleLineRow = React.forwardRef<
-  HTMLDivElement,
-  {
-    line: ConsoleLine;
-    lineNum: number;
-    showLineNum: boolean;
-    wordWrap: boolean;
-    searchTerm: string;
-    isCurrentMatch: boolean;
-    isAnyMatch: boolean;
-  }
->(({ line, lineNum, showLineNum, wordWrap, searchTerm, isCurrentMatch, isAnyMatch }, ref) => {
-  const text = line.text || ' ';
-
-  const content =
-    searchTerm && isAnyMatch ? renderHighlighted(text, searchTerm, isCurrentMatch) : text;
-
-  return (
-    <div
-      ref={ref}
-      className={[
-        'flex gap-0 px-2',
-        LINE_COLORS[line.type],
-        isCurrentMatch
-          ? 'bg-yellow-400/10'
-          : isAnyMatch
-            ? 'bg-yellow-400/5'
-            : 'hover:bg-white/[0.02]',
-      ].join(' ')}
-    >
-      {showLineNum && (
-        <span className="w-10 shrink-0 text-right pr-3 text-text-muted/40 select-none font-mono text-[0.7em] leading-[1.6] pt-px">
-          {lineNum}
-        </span>
-      )}
-      <span
-        className={[
-          'font-mono flex-1',
-          wordWrap ? 'whitespace-pre-wrap break-all' : 'whitespace-pre',
-        ].join(' ')}
-      >
-        {content}
-      </span>
+      <ConsoleOutput
+        lines={lines}
+        fontSize={fontSize}
+        wordWrap={wordWrap}
+        lineNumbers={lineNumbers}
+        searchOpen={searchOpen}
+        searchQuery={searchQuery}
+        searchIdx={searchIdx}
+        onSearchIdxChange={setSearchIdx}
+        onAutoScrollChange={setAutoScroll}
+        autoScroll={autoScroll}
+      />
+
+      <ConsoleInput
+        running={running}
+        fontSize={fontSize}
+        history={cmdHistory}
+        onSend={handleSend}
+        onClear={handleClear}
+        onOpenSearch={openSearch}
+      />
     </div>
   );
-});
-ConsoleLineRow.displayName = 'ConsoleLineRow';
-
-function renderHighlighted(text: string, term: string, isCurrent: boolean): React.ReactNode {
-  const parts: React.ReactNode[] = [];
-  const lower = text.toLowerCase();
-  let last = 0;
-  let idx = lower.indexOf(term);
-  let key = 0;
-
-  while (idx !== -1) {
-    if (idx > last) parts.push(text.slice(last, idx));
-    parts.push(
-      <mark
-        key={key++}
-        className={
-          isCurrent
-            ? 'bg-yellow-300 text-black rounded-sm'
-            : 'bg-yellow-400/30 text-inherit rounded-sm'
-        }
-      >
-        {text.slice(idx, idx + term.length)}
-      </mark>
-    );
-    last = idx + term.length;
-    idx = lower.indexOf(term, last);
-  }
-  if (last < text.length) parts.push(text.slice(last));
-  return parts;
 }
diff --git a/src/renderer/components/console/ConsoleToolbar.tsx b/src/renderer/components/console/ConsoleToolbar.tsx
new file mode 100644
index 0000000..7dbffa8
--- /dev/null
+++ b/src/renderer/components/console/ConsoleToolbar.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { VscSearch } from 'react-icons/vsc';
+import { Button } from '../common/Button';
+
+interface Props {
+  running: boolean;
+  starting: boolean;
+  pid?: number;
+  color: string;
+  lineCount: number;
+  autoScroll: boolean;
+  onToggle: () => void;
+  onClear: () => void;
+  onOpenSearch: () => void;
+  onScrollToBottom: () => void;
+}
+
+export function ConsoleToolbar({
+  running,
+  starting,
+  pid,
+  color,
+  lineCount,
+  autoScroll,
+  onToggle,
+  onClear,
+  onOpenSearch,
+  onScrollToBottom,
+}: Props) {
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 border-b border-surface-border bg-base-900 shrink-0">
+      <Button
+        variant={running ? 'danger' : 'primary'}
+        size="sm"
+        onClick={onToggle}
+        loading={starting}
+        style={!running ? { backgroundColor: color, color: '#08090d', borderColor: color } : {}}
+      >
+        {running ? 'Stop' : 'Run'}
+      </Button>
+
+      {running && pid && (
+        <span className="flex items-center gap-1.5 text-xs font-mono text-text-muted animate-fade-in">
+          <span
+            className="w-1.5 h-1.5 rounded-full animate-pulse-dot"
+            style={{ backgroundColor: color }}
+          />
+          PID <span className="text-text-secondary">{pid}</span>
+        </span>
+      )}
+
+      <div className="flex-1" />
+
+      {!autoScroll && (
+        <button
+          onClick={onScrollToBottom}
+          className="text-xs font-mono transition-colors"
+          style={{ color }}
+        >
+          scroll to bottom
+        </button>
+      )}
+
+      <button
+        onClick={onOpenSearch}
+        className="text-text-muted hover:text-text-primary transition-colors p-1"
+        title="Search (Ctrl+F)"
+      >
+        <VscSearch size={13} />
+      </button>
+
+      <button
+        onClick={onClear}
+        className="text-xs text-text-muted hover:text-text-primary font-mono transition-colors"
+        title="Clear (Ctrl+L)"
+      >
+        Clear
+      </button>
+
+      <span className="text-xs text-text-muted font-mono tabular-nums">
+        {lineCount.toLocaleString()} lines
+      </span>
+    </div>
+  );
+}
diff --git a/src/renderer/components/developer/DevApiExplorer.tsx b/src/renderer/components/developer/DevApiExplorer.tsx
index e00cdd6..fd57fef 100644
--- a/src/renderer/components/developer/DevApiExplorer.tsx
+++ b/src/renderer/components/developer/DevApiExplorer.tsx
@@ -1,9 +1,12 @@
-import { useState, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import { VscCheck, VscCopy, VscPlay, VscEdit, VscCode } from 'react-icons/vsc';
-import { routeConfig, RouteDefinition } from '../../../main/shared/config/API.config';
+import {
+  routeConfig,
+  RouteDefinition,
+  REST_API_CONFIG,
+} from '../../../main/shared/config/API.config';
 import { useApp } from '../../store/AppStore';
 import { Button } from '../common/Button';
-import { REST_API_CONFIG } from '../../../main/shared/config/API.config';
 import { ContextMenu, ContextMenuItem } from '../common/ContextMenu';
 
 const METHOD_COLORS: Record<string, string> = {
@@ -13,33 +16,24 @@ const METHOD_COLORS: Record<string, string> = {
   DELETE: 'text-red-400 border-red-400/30 bg-red-400/10',
 };
 
-// ─── JSON Syntax Highlighter ────────────────────────────────────────────────
+// ─── JSON syntax highlighter ─────────────────────────────────────────────────
 
-type Token =
-  | { type: 'key'; value: string }
-  | { type: 'string'; value: string }
-  | { type: 'number'; value: string }
-  | { type: 'boolean'; value: string }
-  | { type: 'null'; value: string }
-  | { type: 'punct'; value: string }
-  | { type: 'plain'; value: string };
+type Token = {
+  type: 'key' | 'string' | 'number' | 'boolean' | 'null' | 'punct' | 'plain';
+  value: string;
+};
 
 function tokenizeJson(text: string): Token[] {
   const tokens: Token[] = [];
   let i = 0;
-
   while (i < text.length) {
     const ws = text.slice(i).match(/^[\s,:\[\]{}]+/);
     if (ws) {
-      const chunk = ws[0];
-      for (const ch of chunk) {
-        if ('{}[],:'.includes(ch)) tokens.push({ type: 'punct', value: ch });
-        else tokens.push({ type: 'plain', value: ch });
-      }
-      i += chunk.length;
+      for (const ch of ws[0])
+        tokens.push({ type: '{}[],:'.includes(ch) ? 'punct' : 'plain', value: ch });
+      i += ws[0].length;
       continue;
     }
-
     if (text[i] === '"') {
       let j = i + 1;
       while (j < text.length) {
@@ -53,31 +47,28 @@ function tokenizeJson(text: string): Token[] {
         }
         j++;
       }
-      const raw = text.slice(i, j);
-      const afterStr = text.slice(j).match(/^\s*:/);
-      tokens.push({ type: afterStr ? 'key' : 'string', value: raw });
+      tokens.push({
+        type: text.slice(j).match(/^\s*:/) ? 'key' : 'string',
+        value: text.slice(i, j),
+      });
       i = j;
       continue;
     }
-
     const num = text.slice(i).match(/^-?\d+(\.\d+)?([eE][+-]?\d+)?/);
     if (num) {
       tokens.push({ type: 'number', value: num[0] });
       i += num[0].length;
       continue;
     }
-
-    const keyword = text.slice(i).match(/^(true|false|null)/);
-    if (keyword) {
-      tokens.push({ type: keyword[0] === 'null' ? 'null' : 'boolean', value: keyword[0] });
-      i += keyword[0].length;
+    const kw = text.slice(i).match(/^(true|false|null)/);
+    if (kw) {
+      tokens.push({ type: kw[0] === 'null' ? 'null' : 'boolean', value: kw[0] });
+      i += kw[0].length;
       continue;
     }
-
     tokens.push({ type: 'plain', value: text[i] });
     i++;
   }
-
   return tokens;
 }
 
@@ -97,16 +88,13 @@ function JsonHighlight({ text }: { text: string }) {
     JSON.parse(text);
     isJson = true;
   } catch {
-    /* not JSON */
+    /* not json */
   }
-
   if (!isJson) return <span className="text-text-secondary">{text}</span>;
-
-  const tokens = tokenizeJson(text);
   return (
     <>
-      {tokens.map((tok, idx) => (
-        <span key={idx} className={TOKEN_CLASS[tok.type]}>
+      {tokenizeJson(text).map((tok, i) => (
+        <span key={i} className={TOKEN_CLASS[tok.type]}>
           {tok.value}
         </span>
       ))}
@@ -118,66 +106,35 @@ function JsonHighlight({ text }: { text: string }) {
 
 export function DevApiExplorer() {
   const { state } = useApp();
-
   const [selected, setSelected] = useState<RouteDefinition | null>(null);
   const [pathParams, setPathParams] = useState<Record<string, string>>({});
   const [body, setBody] = useState('');
   const [response, setResponse] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
-
   const [urlCopied, setUrlCopied] = useState(false);
   const [responseCopied, setResponseCopied] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
-
-  const [ctxMenu, setCtxMenu] = useState<{
-    x: number;
-    y: number;
-    items: ContextMenuItem[];
-  } | null>(null);
+  const [ctxMenu, setCtxMenu] = useState<{ x: number; y: number; items: ContextMenuItem[] } | null>(
+    null
+  );
 
   const port = state.settings?.restApiPort ?? 4444;
   const restEnabled = state.settings?.restApiEnabled ?? false;
 
-  // ── Helpers ──────────────────────────────────────────────────────────────
-
-  const handleContextMenu = useCallback(
-    (e: React.MouseEvent, extraItems: ContextMenuItem[] = []) => {
-      const selection = window.getSelection()?.toString() ?? '';
-
-      const items: ContextMenuItem[] = [
-        {
-          label: 'Copy',
-          icon: <VscCopy size={12} />,
-          disabled: !selection,
-          onClick: () => navigator.clipboard.writeText(selection),
-        },
-        ...extraItems,
-      ];
-
-      e.preventDefault();
-      setCtxMenu({ x: e.clientX, y: e.clientY, items });
-    },
-    []
-  );
-
   const handleSelect = (route: RouteDefinition) => {
     setSelected(route);
     setResponse(null);
     setIsEditing(false);
     setBody(route.bodyTemplate ?? '');
-
     const params: Record<string, string> = {};
-    const matches = route.path.matchAll(/:([a-zA-Z]+)/g);
-    for (const m of matches) params[m[1]] = '';
+    for (const m of route.path.matchAll(/:([a-zA-Z]+)/g)) params[m[1]] = '';
     setPathParams(params);
   };
 
   const buildUrl = () => {
     if (!selected) return '';
     let path = selected.path;
-    for (const [k, v] of Object.entries(pathParams)) {
-      path = path.replace(`:${k}`, v || `:${k}`);
-    }
+    for (const [k, v] of Object.entries(pathParams)) path = path.replace(`:${k}`, v || `:${k}`);
     return `http://${REST_API_CONFIG.host}:${port}${path}`;
   };
 
@@ -186,19 +143,14 @@ export function DevApiExplorer() {
     setLoading(true);
     setResponse(null);
     setIsEditing(false);
-
     try {
-      const url = buildUrl();
       const opts: RequestInit = { method: selected.method };
-
       if (body.trim() && ['POST', 'PUT', 'PATCH'].includes(selected.method)) {
         opts.headers = { 'Content-Type': 'application/json' };
         opts.body = body;
       }
-
-      const res = await fetch(url, opts);
+      const res = await fetch(buildUrl(), opts);
       const text = await res.text();
-
       try {
         setResponse(JSON.stringify(JSON.parse(text), null, 2));
       } catch {
@@ -207,7 +159,6 @@ export function DevApiExplorer() {
     } catch (err) {
       setResponse(`Error: ${err instanceof Error ? err.message : String(err)}`);
     }
-
     setLoading(false);
   };
 
@@ -216,7 +167,6 @@ export function DevApiExplorer() {
     setUrlCopied(true);
     setTimeout(() => setUrlCopied(false), 1500);
   };
-
   const copyResponse = useCallback(() => {
     if (!response) return;
     navigator.clipboard.writeText(response);
@@ -224,9 +174,23 @@ export function DevApiExplorer() {
     setTimeout(() => setResponseCopied(false), 1500);
   }, [response]);
 
-  const toggleEdit = () => setIsEditing((v) => !v);
-
-  // ── Response context menu items (extend here in the future) ──────────────
+  const handleContextMenu = useCallback((e: React.MouseEvent, extra: ContextMenuItem[] = []) => {
+    const sel = window.getSelection()?.toString() ?? '';
+    e.preventDefault();
+    setCtxMenu({
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        {
+          label: 'Copy',
+          icon: <VscCopy size={12} />,
+          disabled: !sel,
+          onClick: () => navigator.clipboard.writeText(sel),
+        },
+        ...extra,
+      ],
+    });
+  }, []);
 
   const responseCtxItems = useCallback(
     (): ContextMenuItem[] =>
@@ -243,18 +207,15 @@ export function DevApiExplorer() {
     [response]
   );
 
-  // ─────────────────────────────────────────────────────────────────────────
-
   return (
-    <div className="flex h-full overflow-hidden">
-      {/* ── Route list ──────────────────────────────────────────────────── */}
+    <div className="flex h-full min-h-0 overflow-hidden">
+      {/* Route list */}
       <div className="w-56 shrink-0 border-r border-surface-border overflow-y-auto py-2 bg-base-900/50">
         {!restEnabled && (
           <div className="mx-2 mb-2 px-2 py-1.5 rounded-md bg-yellow-400/10 border border-yellow-400/20 text-xs font-mono text-yellow-400">
             REST API disabled in Settings
           </div>
         )}
-
         {Object.entries(routeConfig).map(([key, route]) => (
           <button
             key={key}
@@ -282,15 +243,14 @@ export function DevApiExplorer() {
         ))}
       </div>
 
-      {/* ── Request + response ──────────────────────────────────────────── */}
-      <div className="flex-1 flex flex-col overflow-hidden">
+      {/* Request + response */}
+      <div className="flex-1 flex flex-col overflow-hidden min-h-0">
         {!selected ? (
           <div className="flex items-center justify-center h-full text-xs font-mono text-text-muted">
             Select a route to inspect and call it
           </div>
         ) : (
           <>
-            {/* URL bar */}
             <div className="px-4 py-3 border-b border-surface-border bg-base-900 shrink-0 space-y-2">
               <div className="flex items-center gap-2">
                 <span
@@ -301,14 +261,12 @@ export function DevApiExplorer() {
                 >
                   {selected.method}
                 </span>
-
                 <code
                   onContextMenu={(e) => handleContextMenu(e)}
                   className="flex-1 text-xs font-mono text-text-primary bg-base-950 border border-surface-border rounded px-2.5 py-1.5 truncate select-text"
                 >
                   {buildUrl()}
                 </code>
-
                 <button
                   onClick={copyUrl}
                   className="text-text-muted hover:text-accent transition-colors p-1"
@@ -320,14 +278,11 @@ export function DevApiExplorer() {
                     <VscCopy size={13} />
                   )}
                 </button>
-
                 <Button variant="primary" size="sm" onClick={handleCall} loading={loading}>
                   <VscPlay size={11} />
                   Send
                 </Button>
               </div>
-
-              {/* Path params */}
               {Object.keys(pathParams).length > 0 && (
                 <div className="flex items-center gap-2 flex-wrap">
                   {Object.entries(pathParams).map(([k, v]) => (
@@ -345,10 +300,9 @@ export function DevApiExplorer() {
               )}
             </div>
 
-            <div className="flex flex-1 overflow-hidden">
-              {/* Body */}
+            <div className="flex flex-1 overflow-hidden min-h-0">
               {['POST', 'PUT', 'PATCH'].includes(selected.method) && (
-                <div className="w-1/2 border-r border-surface-border flex flex-col">
+                <div className="w-1/2 border-r border-surface-border flex flex-col min-h-0">
                   <div className="px-3 py-1.5 border-b border-surface-border bg-base-900/50 shrink-0">
                     <span className="text-xs font-mono text-text-muted">Request Body (JSON)</span>
                   </div>
@@ -356,22 +310,17 @@ export function DevApiExplorer() {
                     value={body}
                     onChange={(e) => setBody(e.target.value)}
                     spellCheck={false}
-                    className="flex-1 bg-base-950 text-xs font-mono text-text-primary px-3 py-2 resize-none focus:outline-none select-text"
+                    className="flex-1 bg-base-950 text-xs font-mono text-text-primary px-3 py-2 resize-none focus:outline-none select-text min-h-0"
                   />
                 </div>
               )}
-
-              {/* ── Response panel ────────────────────────────────────── */}
-              <div className="flex-1 flex flex-col overflow-hidden">
-                {/* Titlebar */}
+              <div className="flex-1 flex flex-col overflow-hidden min-h-0">
                 <div className="px-3 py-1.5 border-b border-surface-border bg-base-900/50 shrink-0 flex items-center justify-between">
                   <span className="text-xs font-mono text-text-muted">Response</span>
-
                   {response && (
                     <div className="flex items-center gap-0.5">
                       <button
-                        onClick={toggleEdit}
-                        title={isEditing ? 'Show highlighted' : 'Edit raw'}
+                        onClick={() => setIsEditing((v) => !v)}
                         className={[
                           'p-1 rounded transition-colors',
                           isEditing ? 'text-accent' : 'text-text-muted hover:text-accent',
@@ -379,10 +328,8 @@ export function DevApiExplorer() {
                       >
                         {isEditing ? <VscCode size={13} /> : <VscEdit size={13} />}
                       </button>
-
                       <button
                         onClick={copyResponse}
-                        title="Copy response"
                         className="p-1 rounded text-text-muted hover:text-accent transition-colors"
                       >
                         {responseCopied ? (
@@ -394,26 +341,24 @@ export function DevApiExplorer() {
                     </div>
                   )}
                 </div>
-
-                {/* Highlighted view or editable textarea */}
                 {isEditing ? (
                   <textarea
                     value={response ?? ''}
                     onChange={(e) => setResponse(e.target.value)}
                     onContextMenu={(e) => handleContextMenu(e, responseCtxItems())}
                     spellCheck={false}
-                    className="flex-1 overflow-auto px-3 py-2 text-xs font-mono text-text-secondary bg-base-950 resize-none focus:outline-none select-text"
+                    className="flex-1 overflow-auto px-3 py-2 text-xs font-mono text-text-secondary bg-base-950 resize-none focus:outline-none select-text min-h-0"
                   />
                 ) : (
                   <pre
                     onContextMenu={(e) => handleContextMenu(e, responseCtxItems())}
-                    className="flex-1 overflow-auto px-3 py-2 text-xs font-mono bg-base-950 whitespace-pre-wrap select-text"
+                    className="flex-1 overflow-auto px-3 py-2 text-xs font-mono bg-base-950 whitespace-pre-wrap select-text min-h-0"
                   >
                     {response != null ? (
                       <JsonHighlight text={response} />
                     ) : (
                       <span className="text-text-muted">
-                        {loading ? 'Waiting…' : 'Press Send to call the API'}
+                        {loading ? 'Waiting...' : 'Press Send to call the API'}
                       </span>
                     )}
                   </pre>
@@ -424,7 +369,6 @@ export function DevApiExplorer() {
         )}
       </div>
 
-      {/* ── Context menu ────────────────────────────────────────────────── */}
       {ctxMenu && (
         <ContextMenu
           x={ctxMenu.x}
diff --git a/src/renderer/components/developer/DevDashboard.tsx b/src/renderer/components/developer/DevDashboard.tsx
index 18ee59f..b2fb2bb 100644
--- a/src/renderer/components/developer/DevDashboard.tsx
+++ b/src/renderer/components/developer/DevDashboard.tsx
@@ -16,58 +16,6 @@ interface SysInfo {
   memoryUsageMB: number;
 }
 
-function StatCard({
-  label,
-  value,
-  accent,
-  sub,
-}: {
-  label: string;
-  value: string | number;
-  accent?: boolean;
-  sub?: string;
-}) {
-  return (
-    <div className="rounded-lg border border-surface-border bg-base-900 px-4 py-3 space-y-1">
-      <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{label}</p>
-      <p
-        className={[
-          'text-lg font-mono font-semibold',
-          accent ? 'text-accent' : 'text-text-primary',
-        ].join(' ')}
-      >
-        {value}
-      </p>
-      {sub && <p className="text-xs font-mono text-text-muted">{sub}</p>}
-    </div>
-  );
-}
-
-function Badge({ ok, label }: { ok: boolean; label: string }) {
-  return (
-    <span
-      className={[
-        'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-mono border',
-        ok
-          ? 'bg-accent/10 border-accent/20 text-accent'
-          : 'bg-surface-raised border-surface-border text-text-muted',
-      ].join(' ')}
-    >
-      {ok ? <VscCircleFilled size={8} /> : <VscCircle size={8} />}
-      {label}
-    </span>
-  );
-}
-
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <div className="space-y-2">
-      <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</p>
-      {children}
-    </div>
-  );
-}
-
 export function DevDashboard() {
   const { state } = useApp();
   const [sysInfo, setSysInfo] = useState<SysInfo | null>(null);
@@ -81,11 +29,7 @@ export function DevDashboard() {
   }, []);
 
   useEffect(() => {
-    const loadEnv = async () => {
-      const environment = await window.env.get();
-      setEnv(environment);
-    };
-    loadEnv();
+    window.env.get().then(setEnv);
   }, []);
 
   const runningProfiles = state.processStates.filter((s) => s.running);
@@ -93,15 +37,14 @@ export function DevDashboard() {
   const restEnabled = state.settings?.restApiEnabled ?? false;
 
   return (
-    <div className="h-full overflow-y-auto">
-      <div className="px-4 py-4 pb-4 space-y-5">
-        {/* Application State */}
-        <Section title="Environment">
+    <div className="h-full overflow-y-auto min-h-0">
+      <div className="px-4 py-4 space-y-5">
+        <DevSection title="Environment">
           <div className="grid grid-cols-2 gap-2">
             <StatCard label="Start-Source" value={env?.startUpSource ?? 'undefined'} />
             <StatCard label="Type (env)" value={env?.type ?? 'undefined'} />
           </div>
-        </Section>
+        </DevSection>
 
         {sysInfo && (
           <div className="rounded-lg bg-base-900 border border-surface-border p-3">
@@ -113,8 +56,8 @@ export function DevDashboard() {
             </p>
           </div>
         )}
-        {/* Feature Flags */}
-        <Section title="Feature Flags">
+
+        <DevSection title="Feature Flags">
           <div className="flex flex-wrap gap-2">
             <Badge ok={restEnabled} label="REST API" />
             <Badge ok={state.settings?.launchOnStartup ?? false} label="Launch on Startup" />
@@ -122,10 +65,9 @@ export function DevDashboard() {
             <Badge ok={state.settings?.consoleWordWrap ?? false} label="Word Wrap" />
             <Badge ok={state.settings?.consoleLineNumbers ?? false} label="Line Numbers" />
           </div>
-        </Section>
+        </DevSection>
 
-        {/* Running Processes */}
-        <Section title={`Running Processes (${runningProfiles.length})`}>
+        <DevSection title={`Running Processes (${runningProfiles.length})`}>
           {runningProfiles.length === 0 ? (
             <p className="text-xs font-mono text-text-muted py-2">No processes running</p>
           ) : (
@@ -133,7 +75,6 @@ export function DevDashboard() {
               {runningProfiles.map((s) => {
                 const profile = state.profiles.find((p) => p.id === s.profileId);
                 const uptimeSec = s.startedAt ? Math.floor((Date.now() - s.startedAt) / 1000) : 0;
-
                 return (
                   <div
                     key={s.profileId}
@@ -150,10 +91,9 @@ export function DevDashboard() {
               })}
             </div>
           )}
-        </Section>
+        </DevSection>
 
-        {/* System */}
-        <Section title="System">
+        <DevSection title="System">
           {sysInfo ? (
             <div className="grid grid-cols-4 gap-2">
               <StatCard label="Platform" value={sysInfo.platform} sub={sysInfo.arch} />
@@ -164,8 +104,43 @@ export function DevDashboard() {
           ) : (
             <p className="text-xs font-mono text-text-muted animate-pulse">Loading...</p>
           )}
-        </Section>
+        </DevSection>
       </div>
     </div>
   );
 }
+
+function DevSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-2">
+      <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</p>
+      {children}
+    </div>
+  );
+}
+
+function StatCard({ label, value, sub }: { label: string; value: string | number; sub?: string }) {
+  return (
+    <div className="rounded-lg border border-surface-border bg-base-900 px-4 py-3 space-y-1">
+      <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{label}</p>
+      <p className="text-lg font-mono font-semibold text-text-primary">{value}</p>
+      {sub && <p className="text-xs font-mono text-text-muted">{sub}</p>}
+    </div>
+  );
+}
+
+function Badge({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <span
+      className={[
+        'inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-mono border',
+        ok
+          ? 'bg-accent/10 border-accent/20 text-accent'
+          : 'bg-surface-raised border-surface-border text-text-muted',
+      ].join(' ')}
+    >
+      {ok ? <VscCircleFilled size={8} /> : <VscCircle size={8} />}
+      {label}
+    </span>
+  );
+}
diff --git a/src/renderer/components/developer/DevDiagnostics.tsx b/src/renderer/components/developer/DevDiagnostics.tsx
index 819a213..6184014 100644
--- a/src/renderer/components/developer/DevDiagnostics.tsx
+++ b/src/renderer/components/developer/DevDiagnostics.tsx
@@ -3,6 +3,8 @@ import { VscCheck, VscCopy } from 'react-icons/vsc';
 import { useApp } from '../../store/AppStore';
 import { Button } from '../common/Button';
 
+declare const __APP_VERSION__: string;
+
 interface PerfSample {
   timestamp: number;
   memMB: number;
@@ -12,13 +14,11 @@ export function DevDiagnostics() {
   const { state } = useApp();
   const [perfSamples, setPerfSamples] = useState<PerfSample[]>([]);
   const [copied, setCopied] = useState(false);
-  const [ipcLog, setIpcLog] = useState<{ ts: number; msg: string }[]>([]);
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const samplePerf = () => {
     if (window.performance && (performance as any).memory) {
-      const mem = (performance as any).memory;
-      const mb = Math.round(mem.usedJSHeapSize / 1024 / 1024);
+      const mb = Math.round((performance as any).memory.usedJSHeapSize / 1024 / 1024);
       setPerfSamples((prev) => [...prev.slice(-29), { timestamp: Date.now(), memMB: mb }]);
     }
   };
@@ -43,8 +43,7 @@ export function DevDiagnostics() {
       ),
       memorySnapshot: perfSamples[perfSamples.length - 1] ?? null,
     };
-    const text = JSON.stringify(report, null, 2);
-    navigator.clipboard.writeText(text);
+    navigator.clipboard.writeText(JSON.stringify(report, null, 2));
     setCopied(true);
     setTimeout(() => setCopied(false), 2000);
   };
@@ -53,22 +52,18 @@ export function DevDiagnostics() {
   const maxMem = Math.max(...perfSamples.map((s) => s.memMB), 1);
 
   return (
-    <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
-      {/* Memory chart */}
-      <Section title="JS Heap Memory (renderer)">
+    <div className="flex-1 overflow-y-auto min-h-0 px-4 py-4 space-y-5">
+      <DiagSection title="JS Heap Memory (renderer)">
         <div className="rounded-lg border border-surface-border bg-base-950 px-3 py-2">
           <div className="flex items-end gap-px h-16 mb-1">
-            {perfSamples.map((s, i) => {
-              const pct = (s.memMB / maxMem) * 100;
-              return (
-                <div
-                  key={i}
-                  className="flex-1 bg-accent/40 rounded-t-sm transition-all duration-300"
-                  style={{ height: `${Math.max(4, pct)}%` }}
-                  title={`${s.memMB} MB`}
-                />
-              );
-            })}
+            {perfSamples.map((s, i) => (
+              <div
+                key={i}
+                className="flex-1 bg-accent/40 rounded-t-sm transition-all duration-300"
+                style={{ height: `${Math.max(4, (s.memMB / maxMem) * 100)}%` }}
+                title={`${s.memMB} MB`}
+              />
+            ))}
             {perfSamples.length === 0 && (
               <p className="text-xs font-mono text-text-muted self-center w-full text-center">
                 Collecting samples...
@@ -80,10 +75,9 @@ export function DevDiagnostics() {
             <span>max {maxMem} MB</span>
           </div>
         </div>
-      </Section>
+      </DiagSection>
 
-      {/* Renderer state summary */}
-      <Section title="Renderer State">
+      <DiagSection title="Renderer State">
         <div className="rounded-lg border border-surface-border bg-base-900 divide-y divide-surface-border/50">
           <DiagRow label="Active profile ID" value={state.activeProfileId || '—'} mono />
           <DiagRow label="Profiles loaded" value={String(state.profiles.length)} />
@@ -98,10 +92,9 @@ export function DevDiagnostics() {
           />
           <DiagRow label="Settings loaded" value={state.settings ? 'Yes' : 'No'} />
         </div>
-      </Section>
+      </DiagSection>
 
-      {/* Profile detail */}
-      <Section title="Profile Console Buffers">
+      <DiagSection title="Profile Console Buffers">
         {state.profiles.length === 0 ? (
           <p className="text-xs font-mono text-text-muted">No profiles</p>
         ) : (
@@ -126,10 +119,9 @@ export function DevDiagnostics() {
             })}
           </div>
         )}
-      </Section>
+      </DiagSection>
 
-      {/* Export */}
-      <Section title="Diagnostic Report">
+      <DiagSection title="Diagnostic Report">
         <p className="text-xs text-text-muted font-mono">
           Copy a JSON snapshot of the current app state to clipboard for bug reports.
         </p>
@@ -137,12 +129,12 @@ export function DevDiagnostics() {
           {copied ? <VscCheck size={11} className="text-accent" /> : <VscCopy size={11} />}
           {copied ? 'Copied!' : 'Copy Report to Clipboard'}
         </Button>
-      </Section>
+      </DiagSection>
     </div>
   );
 }
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function DiagSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="space-y-2">
       <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</p>
@@ -166,5 +158,3 @@ function DiagRow({ label, value, mono }: { label: string; value: string; mono?:
     </div>
   );
 }
-
-declare const __APP_VERSION__: string;
diff --git a/src/renderer/components/developer/DevModeGate.tsx b/src/renderer/components/developer/DevModeGate.tsx
index e95d148..4653176 100644
--- a/src/renderer/components/developer/DevModeGate.tsx
+++ b/src/renderer/components/developer/DevModeGate.tsx
@@ -9,24 +9,16 @@ export function DevModeGate() {
 
   useEffect(() => {
     const keysPressed = new Set<string>();
-
     const keydownHandler = (e: KeyboardEvent) => {
       keysPressed.add(e.code);
-
-      // right shift + 7
       if (keysPressed.has('ShiftRight') && keysPressed.has('Digit7')) {
         e.preventDefault();
         setDialogOpen(true);
       }
     };
-
-    const keyupHandler = (e: KeyboardEvent) => {
-      keysPressed.delete(e.code);
-    };
-
+    const keyupHandler = (e: KeyboardEvent) => keysPressed.delete(e.code);
     window.addEventListener('keydown', keydownHandler);
     window.addEventListener('keyup', keyupHandler);
-
     return () => {
       window.removeEventListener('keydown', keydownHandler);
       window.removeEventListener('keyup', keyupHandler);
@@ -35,8 +27,6 @@ export function DevModeGate() {
 
   if (!dialogOpen) return null;
 
-  const isOn = devEnabled;
-
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 animate-fade-in">
       <div className="bg-base-900 border border-surface-border rounded-xl shadow-2xl w-full max-w-sm mx-4 p-5 space-y-4">
@@ -47,17 +37,15 @@ export function DevModeGate() {
           <div>
             <h2 className="text-sm font-semibold text-text-primary">Developer Mode</h2>
             <p className="text-xs text-text-muted mt-0.5">
-              {isOn ? 'Currently enabled' : 'Currently disabled'}
+              {devEnabled ? 'Currently enabled' : 'Currently disabled'}
             </p>
           </div>
         </div>
-
         <p className="text-xs text-text-secondary leading-relaxed">
-          {isOn
+          {devEnabled
             ? 'Disable developer mode? This will hide the Developer panel and close DevTools.'
             : 'Enable developer mode? This will show the Developer panel and enable DevTools for this session.'}
         </p>
-
         <div className="flex justify-end gap-2 pt-1">
           <Button variant="ghost" size="sm" onClick={() => setDialogOpen(false)}>
             Cancel
@@ -66,11 +54,11 @@ export function DevModeGate() {
             variant="primary"
             size="sm"
             onClick={() => {
-              window.env.toggleDevMode(!isOn);
+              window.env.toggleDevMode(!devEnabled);
               setDialogOpen(false);
             }}
           >
-            {isOn ? 'Disable' : 'Enable'}
+            {devEnabled ? 'Disable' : 'Enable'}
           </Button>
         </div>
       </div>
diff --git a/src/renderer/components/developer/DevStorage.tsx b/src/renderer/components/developer/DevStorage.tsx
index 37fcd89..d12af24 100644
--- a/src/renderer/components/developer/DevStorage.tsx
+++ b/src/renderer/components/developer/DevStorage.tsx
@@ -18,7 +18,7 @@ function getSessionEntries(): SessionEntry[] {
     entries.push({
       key,
       sizeBytes: new Blob([raw]).size,
-      preview: raw.slice(0, 80) + (raw.length > 80 ? '…' : ''),
+      preview: raw.slice(0, 80) + (raw.length > 80 ? '...' : ''),
     });
   }
   return entries.sort((a, b) => b.sizeBytes - a.sizeBytes);
@@ -35,7 +35,6 @@ export function DevStorage() {
   const [confirmReset, setConfirmReset] = useState<'electron-store' | 'session' | null>(null);
 
   const refresh = () => setSessionEntries(getSessionEntries());
-
   useEffect(() => {
     refresh();
   }, []);
@@ -43,9 +42,8 @@ export function DevStorage() {
   const totalSessionBytes = sessionEntries.reduce((a, b) => a + b.sizeBytes, 0);
 
   return (
-    <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
-      {/* Electron store */}
-      <Section title="Electron Store (Persistent)">
+    <div className="flex-1 overflow-y-auto min-h-0 px-4 py-4 space-y-5">
+      <StorageSection title="Electron Store (Persistent)">
         <div className="rounded-lg border border-surface-border bg-base-900 divide-y divide-surface-border/50">
           <StoreRow label="Profiles" value={String(state.profiles.length)} />
           <StoreRow label="Active profile ID" value={state.activeProfileId || '—'} mono />
@@ -66,10 +64,9 @@ export function DevStorage() {
           <VscTrash size={11} />
           Reset Electron Store
         </Button>
-      </Section>
+      </StorageSection>
 
-      {/* Session storage */}
-      <Section title={`Session Storage (${formatBytes(totalSessionBytes)})`}>
+      <StorageSection title={`Session Storage (${formatBytes(totalSessionBytes)})`}>
         <div className="flex items-center justify-between mb-2">
           <p className="text-xs text-text-muted font-mono">{sessionEntries.length} keys</p>
           <button
@@ -116,7 +113,7 @@ export function DevStorage() {
           <VscTrash size={11} />
           Clear Session Storage
         </Button>
-      </Section>
+      </StorageSection>
 
       <Dialog
         open={confirmReset === 'electron-store'}
@@ -130,7 +127,6 @@ export function DevStorage() {
         }}
         onCancel={() => setConfirmReset(null)}
       />
-
       <Dialog
         open={confirmReset === 'session'}
         title="Clear Session Storage?"
@@ -148,7 +144,7 @@ export function DevStorage() {
   );
 }
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function StorageSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="space-y-2">
       <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</p>
diff --git a/src/renderer/components/developer/DeveloperTab.tsx b/src/renderer/components/developer/DeveloperTab.tsx
index 08eb879..1b4e101 100644
--- a/src/renderer/components/developer/DeveloperTab.tsx
+++ b/src/renderer/components/developer/DeveloperTab.tsx
@@ -18,8 +18,7 @@ export function DeveloperTab() {
   const [panel, setPanel] = useState<Panel>('dashboard');
 
   return (
-    <div className="flex flex-col h-full bg-base-800">
-      {/* Header banner */}
+    <div className="flex flex-col h-full min-h-0 bg-base-800">
       <div className="shrink-0 px-4 py-2 bg-accent/5 border-b border-accent/20 flex items-center gap-2">
         <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse-dot" />
         <span className="text-xs font-mono text-accent tracking-widest uppercase">
@@ -27,7 +26,6 @@ export function DeveloperTab() {
         </span>
       </div>
 
-      {/* Sub-tab bar */}
       <div className="flex items-center gap-0 px-4 border-b border-surface-border bg-base-900 shrink-0">
         {PANELS.map((p) => (
           <button
@@ -46,7 +44,7 @@ export function DeveloperTab() {
         ))}
       </div>
 
-      <div className="flex-1 min-h-0">
+      <div className="flex-1 min-h-0 overflow-hidden flex flex-col">
         {panel === 'dashboard' && <DevDashboard />}
         {panel === 'api' && <DevApiExplorer />}
         {panel === 'storage' && <DevStorage />}
diff --git a/src/renderer/components/faq/FaqPanel.tsx b/src/renderer/components/faq/FaqPanel.tsx
index 0195c06..329342e 100644
--- a/src/renderer/components/faq/FaqPanel.tsx
+++ b/src/renderer/components/faq/FaqPanel.tsx
@@ -1,6 +1,6 @@
-import { useMemo, useState } from 'react';
-import type { FaqItem, FaqTopic } from '../../../main/shared/config/FAQ.config';
+import React, { useMemo, useState } from 'react';
 import { FAQ_TOPICS } from '../../../main/shared/config/FAQ.config';
+import type { FaqItem, FaqTopic } from '../../../main/shared/config/FAQ.config';
 
 export function FaqPanel() {
   const [search, setSearch] = useState('');
@@ -20,14 +20,8 @@ export function FaqPanel() {
   const activeTopic_ = FAQ_TOPICS.find((t) => t.id === activeTopic) ?? FAQ_TOPICS[0];
   const displayItems = searchTrimmed ? searchResults : (activeTopic_?.items ?? []);
 
-  const handleTopicClick = (id: string) => {
-    setActiveTopic(id);
-    setExpandedIdx(null);
-    setSearch('');
-  };
-
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full min-h-0">
       <div className="px-4 py-3 border-b border-surface-border bg-base-900 shrink-0">
         <input
           type="text"
@@ -40,7 +34,8 @@ export function FaqPanel() {
           className="w-full bg-base-950 border border-surface-border rounded-md px-3 py-1.5 text-xs text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 transition-colors font-mono"
         />
       </div>
-      <div className="flex flex-1 overflow-hidden">
+
+      <div className="flex flex-1 overflow-hidden min-h-0">
         {!searchTrimmed && (
           <div className="w-36 shrink-0 border-r border-surface-border bg-base-900/60 overflow-y-auto py-2">
             {FAQ_TOPICS.map((topic) => (
@@ -48,12 +43,16 @@ export function FaqPanel() {
                 key={topic.id}
                 topic={topic}
                 active={activeTopic === topic.id}
-                onClick={() => handleTopicClick(topic.id)}
+                onClick={() => {
+                  setActiveTopic(topic.id);
+                  setExpandedIdx(null);
+                  setSearch('');
+                }}
               />
             ))}
           </div>
         )}
-        <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
+        <div className="flex-1 overflow-y-auto min-h-0 px-4 py-3 space-y-2">
           {displayItems.length === 0 && (
             <p className="text-xs text-text-muted font-mono py-8 text-center">
               {searchTrimmed ? 'No results found.' : 'No items in this topic.'}
diff --git a/src/renderer/components/layout/PanelHeader.tsx b/src/renderer/components/layout/PanelHeader.tsx
new file mode 100644
index 0000000..5613782
--- /dev/null
+++ b/src/renderer/components/layout/PanelHeader.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface Props {
+  title: string;
+  backTo?: string;
+}
+
+export function PanelHeader({ title, backTo = '/console' }: Props) {
+  const navigate = useNavigate();
+  return (
+    <div className="shrink-0 border-b border-surface-border bg-base-900">
+      <div className="flex items-center gap-3 px-4 h-10">
+        <button
+          onClick={() => navigate(backTo)}
+          className="flex items-center gap-1.5 text-xs text-text-muted hover:text-text-primary transition-colors"
+        >
+          <svg
+            width="12"
+            height="12"
+            viewBox="0 0 12 12"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+          >
+            <path d="M8 2L4 6l4 4" />
+          </svg>
+          Back
+        </button>
+        <div className="w-px h-4 bg-surface-border" />
+        <span className="text-xs font-medium text-text-secondary">{title}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/components/layout/TabBar.tsx b/src/renderer/components/layout/TabBar.tsx
new file mode 100644
index 0000000..5418a75
--- /dev/null
+++ b/src/renderer/components/layout/TabBar.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+
+export interface TabDef {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  badge?: React.ReactNode;
+}
+
+interface Props {
+  tabs: TabDef[];
+  activeId: string;
+  onSelect: (id: string) => void;
+  accentColor?: string;
+  className?: string;
+}
+
+export function TabBar({
+  tabs,
+  activeId,
+  onSelect,
+  accentColor = '#4ade80',
+  className = '',
+}: Props) {
+  return (
+    <div
+      className={[
+        'flex items-center px-4 border-b border-surface-border bg-base-900 shrink-0',
+        className,
+      ].join(' ')}
+    >
+      {tabs.map((tab) => {
+        const isActive = tab.id === activeId;
+        return (
+          <button
+            key={tab.id}
+            onClick={() => onSelect(tab.id)}
+            className={[
+              'flex items-center gap-1.5 px-3 py-2 text-xs border-b-2 -mb-px transition-all duration-150',
+              isActive
+                ? 'font-medium'
+                : 'text-text-muted border-transparent hover:text-text-primary',
+            ].join(' ')}
+            style={isActive ? { borderBottomColor: accentColor, color: accentColor } : {}}
+          >
+            {tab.icon}
+            {tab.label}
+            {tab.badge}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/src/renderer/components/layout/TitleBar.tsx b/src/renderer/components/layout/TitleBar.tsx
new file mode 100644
index 0000000..5ce1d08
--- /dev/null
+++ b/src/renderer/components/layout/TitleBar.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { useApp } from '../../store/AppStore';
+import { VscChromeMinimize, VscChromeClose } from 'react-icons/vsc';
+
+export function TitleBar() {
+  const { state } = useApp();
+  const runningCount = state.processStates.filter((s) => s.running).length;
+
+  return (
+    <div
+      className="flex items-center justify-between h-10 px-3 bg-base-950 border-b border-surface-border shrink-0"
+      style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
+    >
+      <div className="flex items-center gap-2">
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 24 24"
+          fill="none"
+          className="text-accent shrink-0"
+        >
+          <path
+            d="M9 3C9 3 8 8 12 10C16 12 16 16 16 16"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+          <path
+            d="M7 17C7 17 8 15 12 15C16 15 17 17 17 17"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+          <circle cx="12" cy="20" r="1.5" fill="currentColor" />
+          <path
+            d="M6 12C6 12 4 10 4 8C4 6 5.5 5 7 5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            opacity="0.5"
+          />
+        </svg>
+        <span className="text-xs font-mono text-text-secondary tracking-widest uppercase">
+          Java Runner Client
+        </span>
+        {runningCount > 0 && (
+          <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-accent/15 border border-accent/30 animate-fade-in">
+            <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse-dot" />
+            <span className="text-accent text-xs font-mono font-medium leading-none">
+              {runningCount}
+            </span>
+          </span>
+        )}
+      </div>
+
+      <div
+        className="flex items-center gap-0.5"
+        style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+      >
+        <button
+          onClick={() => window.api.minimizeWindow()}
+          className="w-7 h-7 flex items-center justify-center rounded text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
+        >
+          <VscChromeMinimize size={12} />
+        </button>
+        <button
+          onClick={() => window.api.closeWindow()}
+          className="w-7 h-7 flex items-center justify-center rounded text-text-muted hover:text-red-400 hover:bg-red-400/10 transition-colors"
+        >
+          <VscChromeClose size={12} />
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/renderer/components/profiles/ConfigTab.tsx b/src/renderer/components/profiles/ConfigTab.tsx
index be01543..d5b948a 100644
--- a/src/renderer/components/profiles/ConfigTab.tsx
+++ b/src/renderer/components/profiles/ConfigTab.tsx
@@ -1,12 +1,13 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useApp } from '../../store/AppStore';
 import { Button } from '../common/Button';
-import { Input } from '../common/Input';
-import { Toggle } from '../common/Toggle';
 import { ArgList } from '../common/ArgList';
 import { PropList } from '../common/PropList';
 import { Dialog } from '../common/Dialog';
-import { Profile } from 'src/main/shared/types/Profile.types';
+import { GeneralSection } from './GeneralSection';
+import { FilesSection } from './FilesSection';
+import { Profile } from '../../../main/shared/types/Profile.types';
 
 type Section = 'general' | 'files' | 'jvm' | 'props' | 'args';
 
@@ -18,8 +19,20 @@ const SECTIONS: { id: Section; label: string }[] = [
   { id: 'args', label: 'Program Args' },
 ];
 
+function buildCmdPreview(p: Profile): string {
+  const parts: string[] = [p.javaPath || 'java'];
+  p.jvmArgs.filter((a) => a.enabled && a.value).forEach((a) => parts.push(a.value));
+  p.systemProperties
+    .filter((a) => a.enabled && a.key)
+    .forEach((a) => parts.push(a.value ? `-D${a.key}=${a.value}` : `-D${a.key}`));
+  parts.push('-jar', p.jarPath || '<no jar>');
+  p.programArgs.filter((a) => a.enabled && a.value).forEach((a) => parts.push(a.value));
+  return parts.join(' ');
+}
+
 export function ConfigTab() {
   const { activeProfile, saveProfile, isRunning, startProcess, stopProcess } = useApp();
+  const navigate = useNavigate();
 
   const [draft, setDraft] = useState<Profile | null>(null);
   const [saved, setSaved] = useState(false);
@@ -43,9 +56,7 @@ export function ConfigTab() {
   const handleSave = useCallback(async () => {
     if (!draft) return;
     await saveProfile(draft);
-
     activeProfile && Object.assign(activeProfile, draft);
-
     setSaved(true);
     setTimeout(() => setSaved(false), 1800);
   }, [draft, saveProfile, activeProfile]);
@@ -85,7 +96,8 @@ export function ConfigTab() {
 
   return (
     <>
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full min-h-0">
+        {/* Header */}
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900 shrink-0">
           <h2 className="text-sm font-medium text-text-primary flex-1 truncate">{draft.name}</h2>
           {isDirty && !saved && (
@@ -104,6 +116,7 @@ export function ConfigTab() {
           </Button>
         </div>
 
+        {/* Section tabs */}
         <div className="flex gap-0 px-4 border-b border-surface-border shrink-0">
           {SECTIONS.map((s) => (
             <button
@@ -125,13 +138,13 @@ export function ConfigTab() {
           ))}
         </div>
 
-        <div className="flex-1 overflow-y-auto px-4 py-4 space-y-5">
+        {/* Section content */}
+        <div className="flex-1 overflow-y-auto min-h-0 px-4 py-4 space-y-5">
           {section === 'general' && (
             <GeneralSection
               draft={draft}
               update={update}
               running={running}
-              color={color}
               onRestart={handleRestart}
             />
           )}
@@ -139,7 +152,7 @@ export function ConfigTab() {
           {section === 'jvm' && (
             <ArgSection
               title="JVM Arguments"
-              hint="Flags passed to the JVM before -jar, e.g. -Xmx2g  -XX:+UseG1GC"
+              hint="Flags passed to the JVM before -jar, e.g. -Xmx2g -XX:+UseG1GC"
             >
               <ArgList
                 items={draft.jvmArgs}
@@ -164,7 +177,7 @@ export function ConfigTab() {
           {section === 'args' && (
             <ArgSection
               title="Program Arguments"
-              hint="Appended after the JAR path, e.g. --nogui  --world myWorld"
+              hint="Appended after the JAR path, e.g. --nogui --world myWorld"
             >
               <ArgList
                 items={draft.programArgs}
@@ -175,6 +188,7 @@ export function ConfigTab() {
             </ArgSection>
           )}
 
+          {/* Command preview */}
           <div className="rounded-lg bg-base-950 border border-surface-border p-3">
             <p className="text-xs text-text-muted font-mono uppercase tracking-widest mb-2">
               Command preview
@@ -207,141 +221,6 @@ export function ConfigTab() {
   );
 }
 
-function GeneralSection({
-  draft,
-  update,
-  running,
-  color,
-  onRestart,
-}: {
-  draft: Profile;
-  update: (p: Partial<Profile>) => void;
-  running: boolean;
-  color: string;
-  onRestart: () => void;
-}) {
-  return (
-    <div className="space-y-6">
-      <div className="space-y-3">
-        <h3 className="text-xs font-mono text-text-muted uppercase tracking-widest">Auto-start</h3>
-        <div className="flex items-center justify-between gap-4 rounded-lg bg-base-900 border border-surface-border px-3 py-2.5">
-          <div>
-            <p className="text-xs text-text-primary font-medium">Auto-start on app launch</p>
-            <p className="text-xs text-text-muted mt-0.5">
-              Automatically run this profile when JRC starts
-            </p>
-          </div>
-          <Toggle checked={draft.autoStart} onChange={(v) => update({ autoStart: v })} />
-        </div>
-      </div>
-
-      <div className="space-y-3">
-        <h3 className="text-xs font-mono text-text-muted uppercase tracking-widest">
-          Auto-restart
-        </h3>
-        <div className="flex items-center justify-between gap-4 rounded-lg bg-base-900 border border-surface-border px-3 py-2.5">
-          <div>
-            <p className="text-xs text-text-primary font-medium">
-              Automatically restart JAR on crash
-            </p>
-            <p className="text-xs text-text-muted mt-0.5">
-              Restarts the process if it exits with a non-zero code
-            </p>
-          </div>
-          <Toggle
-            checked={draft.autoRestart ?? false}
-            onChange={(v) => update({ autoRestart: v })}
-          />
-        </div>
-
-        {draft.autoRestart && (
-          <div className="flex items-center justify-between gap-4 rounded-lg bg-base-900 border border-surface-border px-3 py-2.5">
-            <div>
-              <p className="text-xs text-text-primary font-medium">Restart delay</p>
-              <p className="text-xs text-text-muted mt-0.5">Seconds to wait before restarting</p>
-            </div>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                min={1}
-                max={3600}
-                value={draft.autoRestartInterval ?? 10}
-                onChange={(e) =>
-                  update({ autoRestartInterval: Math.max(1, parseInt(e.target.value) || 10) })
-                }
-                className="w-20 bg-base-950 border border-surface-border rounded px-2 py-1 text-xs font-mono text-text-primary text-right focus:outline-none focus:border-accent/40"
-              />
-              <span className="text-xs text-text-muted font-mono">sec</span>
-            </div>
-          </div>
-        )}
-      </div>
-
-      {running && (
-        <div className="space-y-3">
-          <h3 className="text-xs font-mono text-text-muted uppercase tracking-widest">Process</h3>
-          <button
-            onClick={onRestart}
-            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-surface-border bg-base-900 text-xs text-text-secondary hover:text-text-primary hover:border-accent/30 transition-colors"
-          >
-            Restart process
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function FilesSection({
-  draft,
-  update,
-}: {
-  draft: Profile;
-  update: (p: Partial<Profile>) => void;
-}) {
-  const handlePickJar = async () => {
-    const p = await window.api.pickJar();
-    if (p) update({ jarPath: p });
-  };
-  const handlePickDir = async () => {
-    const p = await window.api.pickDir();
-    if (p) update({ workingDir: p });
-  };
-  const handlePickJava = async () => {
-    const p = await window.api.pickJava();
-    if (p) update({ javaPath: p });
-  };
-
-  return (
-    <div className="space-y-4">
-      <Input
-        label="JAR File"
-        value={draft.jarPath}
-        onChange={(e) => update({ jarPath: e.target.value })}
-        placeholder="Path to your .jar file"
-        hint="The JAR file to execute"
-        rightElement={<FolderBtn onClick={handlePickJar} />}
-      />
-      <Input
-        label="Working Directory"
-        value={draft.workingDir}
-        onChange={(e) => update({ workingDir: e.target.value })}
-        placeholder="Defaults to JAR directory"
-        hint="Leave empty to use the directory containing the JAR"
-        rightElement={<FolderBtn onClick={handlePickDir} />}
-      />
-      <Input
-        label="Java Executable"
-        value={draft.javaPath}
-        onChange={(e) => update({ javaPath: e.target.value })}
-        placeholder="java  (uses system PATH)"
-        hint="Leave empty to use the java found on PATH"
-        rightElement={<FolderBtn onClick={handlePickJava} />}
-      />
-    </div>
-  );
-}
-
 function ArgSection({
   title,
   hint,
@@ -361,32 +240,3 @@ function ArgSection({
     </div>
   );
 }
-
-function FolderBtn({ onClick }: { onClick: () => void }) {
-  return (
-    <button onClick={onClick} className="text-text-muted hover:text-accent transition-colors">
-      <svg
-        width="13"
-        height="13"
-        viewBox="0 0 14 14"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      >
-        <path d="M1 3.5h4l1.5 2H13v7H1V3.5z" />
-      </svg>
-    </button>
-  );
-}
-
-function buildCmdPreview(p: Profile): string {
-  const parts: string[] = [p.javaPath || 'java'];
-  p.jvmArgs.filter((a) => a.enabled && a.value).forEach((a) => parts.push(a.value));
-  p.systemProperties
-    .filter((a) => a.enabled && a.key)
-    .forEach((a) => parts.push(a.value ? `-D${a.key}=${a.value}` : `-D${a.key}`));
-  parts.push('-jar', p.jarPath || '<no jar>');
-  p.programArgs.filter((a) => a.enabled && a.value).forEach((a) => parts.push(a.value));
-  return parts.join(' ');
-}
diff --git a/src/renderer/components/profiles/FilesSection.tsx b/src/renderer/components/profiles/FilesSection.tsx
new file mode 100644
index 0000000..fba9525
--- /dev/null
+++ b/src/renderer/components/profiles/FilesSection.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Input } from '../common/Input';
+import { Profile } from '../../../main/shared/types/Profile.types';
+
+interface Props {
+  draft: Profile;
+  update: (p: Partial<Profile>) => void;
+}
+
+export function FilesSection({ draft, update }: Props) {
+  const handlePickJar = async () => {
+    const p = await window.api.pickJar();
+    if (p) update({ jarPath: p });
+  };
+  const handlePickDir = async () => {
+    const p = await window.api.pickDir();
+    if (p) update({ workingDir: p });
+  };
+  const handlePickJava = async () => {
+    const p = await window.api.pickJava();
+    if (p) update({ javaPath: p });
+  };
+
+  return (
+    <div className="space-y-4">
+      <Input
+        label="JAR File"
+        value={draft.jarPath}
+        onChange={(e) => update({ jarPath: e.target.value })}
+        placeholder="Path to your .jar file"
+        hint="The JAR file to execute"
+        rightElement={<FolderBtn onClick={handlePickJar} />}
+      />
+      <Input
+        label="Working Directory"
+        value={draft.workingDir}
+        onChange={(e) => update({ workingDir: e.target.value })}
+        placeholder="Defaults to JAR directory"
+        hint="Leave empty to use the directory containing the JAR"
+        rightElement={<FolderBtn onClick={handlePickDir} />}
+      />
+      <Input
+        label="Java Executable"
+        value={draft.javaPath}
+        onChange={(e) => update({ javaPath: e.target.value })}
+        placeholder="java  (uses system PATH)"
+        hint="Leave empty to use the java found on PATH"
+        rightElement={<FolderBtn onClick={handlePickJava} />}
+      />
+    </div>
+  );
+}
+
+function FolderBtn({ onClick }: { onClick: () => void }) {
+  return (
+    <button onClick={onClick} className="text-text-muted hover:text-accent transition-colors">
+      <svg
+        width="13"
+        height="13"
+        viewBox="0 0 14 14"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      >
+        <path d="M1 3.5h4l1.5 2H13v7H1V3.5z" />
+      </svg>
+    </button>
+  );
+}
diff --git a/src/renderer/components/profiles/GeneralSection.tsx b/src/renderer/components/profiles/GeneralSection.tsx
new file mode 100644
index 0000000..177432a
--- /dev/null
+++ b/src/renderer/components/profiles/GeneralSection.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Toggle } from '../common/Toggle';
+import { Profile } from '../../../main/shared/types/Profile.types';
+
+interface Props {
+  draft: Profile;
+  update: (p: Partial<Profile>) => void;
+  running: boolean;
+  onRestart: () => void;
+}
+
+export function GeneralSection({ draft, update, running, onRestart }: Props) {
+  return (
+    <div className="space-y-6">
+      <ConfigSection title="Auto-start">
+        <ToggleRow
+          label="Auto-start on app launch"
+          hint="Automatically run this profile when JRC starts"
+          checked={draft.autoStart}
+          onChange={(v) => update({ autoStart: v })}
+        />
+      </ConfigSection>
+
+      <ConfigSection title="Auto-restart">
+        <ToggleRow
+          label="Automatically restart JAR on crash"
+          hint="Restarts the process if it exits with a non-zero code"
+          checked={draft.autoRestart ?? false}
+          onChange={(v) => update({ autoRestart: v })}
+        />
+        {draft.autoRestart && (
+          <div className="flex items-center justify-between gap-4 rounded-lg bg-base-900 border border-surface-border px-3 py-2.5">
+            <div>
+              <p className="text-xs text-text-primary font-medium">Restart delay</p>
+              <p className="text-xs text-text-muted mt-0.5">Seconds to wait before restarting</p>
+            </div>
+            <div className="flex items-center gap-2">
+              <input
+                type="number"
+                min={1}
+                max={3600}
+                value={draft.autoRestartInterval ?? 10}
+                onChange={(e) =>
+                  update({ autoRestartInterval: Math.max(1, parseInt(e.target.value) || 10) })
+                }
+                className="w-20 bg-base-950 border border-surface-border rounded px-2 py-1 text-xs font-mono text-text-primary text-right focus:outline-none focus:border-accent/40"
+              />
+              <span className="text-xs text-text-muted font-mono">sec</span>
+            </div>
+          </div>
+        )}
+      </ConfigSection>
+
+      {running && (
+        <ConfigSection title="Process">
+          <button
+            onClick={onRestart}
+            className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg border border-surface-border bg-base-900 text-xs text-text-secondary hover:text-text-primary hover:border-accent/30 transition-colors"
+          >
+            Restart process
+          </button>
+        </ConfigSection>
+      )}
+    </div>
+  );
+}
+
+function ConfigSection({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-3">
+      <h3 className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</h3>
+      {children}
+    </div>
+  );
+}
+
+function ToggleRow({
+  label,
+  hint,
+  checked,
+  onChange,
+}: {
+  label: string;
+  hint: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-4 rounded-lg bg-base-900 border border-surface-border px-3 py-2.5">
+      <div>
+        <p className="text-xs text-text-primary font-medium">{label}</p>
+        <p className="text-xs text-text-muted mt-0.5">{hint}</p>
+      </div>
+      <Toggle checked={checked} onChange={onChange} />
+    </div>
+  );
+}
diff --git a/src/renderer/components/profiles/ProfileSidebar.tsx b/src/renderer/components/profiles/ProfileSidebar.tsx
index adaeb1d..8498af0 100644
--- a/src/renderer/components/profiles/ProfileSidebar.tsx
+++ b/src/renderer/components/profiles/ProfileSidebar.tsx
@@ -1,11 +1,6 @@
 import React, { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { Reorder } from 'framer-motion';
-import { useApp, PROFILE_COLORS } from '../../store/AppStore';
-import { Dialog } from '../common/Dialog';
-import { ContextMenu } from '../common/ContextMenu';
-import { TemplateModal } from './TemplateModal';
-import { useDevMode } from '../../hooks/useDevMode';
-import type { ContextMenuItem } from '../common/ContextMenu';
 import {
   VscPlay,
   VscDebugStop,
@@ -19,15 +14,15 @@ import {
   VscLayout,
   VscCode,
 } from 'react-icons/vsc';
+import { useApp, PROFILE_COLORS } from '../../store/AppStore';
+import { useDevMode } from '../../hooks/useDevMode';
+import { Dialog } from '../common/Dialog';
+import { ContextMenu, ContextMenuItem } from '../common/ContextMenu';
+import { TemplateModal } from './TemplateModal';
 import { Profile } from '../../../main/shared/types/Profile.types';
 
 interface Props {
-  onOpenSettings: () => void;
-  onOpenFaq: () => void;
-  onOpenUtilities: () => void;
-  onOpenDeveloper: () => void;
-  onProfileClick?: () => void;
-  activeSidePanel: 'settings' | 'faq' | 'utilities' | 'developer' | null;
+  activeSidePanel: string | null;
 }
 
 interface CtxState {
@@ -36,14 +31,8 @@ interface CtxState {
   y: number;
 }
 
-export function ProfileSidebar({
-  onOpenSettings,
-  onOpenFaq,
-  onOpenUtilities,
-  onOpenDeveloper,
-  onProfileClick,
-  activeSidePanel,
-}: Props) {
+export function ProfileSidebar({ activeSidePanel }: Props) {
+  const navigate = useNavigate();
   const {
     state,
     activeProfile,
@@ -56,8 +45,8 @@ export function ProfileSidebar({
     isRunning,
     reorderProfiles,
   } = useApp();
-
   const devMode = useDevMode();
+
   const [ctxMenu, setCtxMenu] = useState<CtxState | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<Profile | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
@@ -115,7 +104,7 @@ export function ProfileSidebar({
           icon: <VscCheck size={12} />,
           onClick: () => {
             setActiveProfile(ctxProfile.id);
-            onProfileClick?.();
+            navigate('/console');
           },
         },
         {
@@ -138,25 +127,25 @@ export function ProfileSidebar({
       ]
     : [];
 
+  const openPanel = (path: string) => {
+    navigate(activeSidePanel === path.slice(1) ? '/console' : path);
+  };
+
   return (
     <>
       <aside className="w-52 shrink-0 flex flex-col bg-base-950 border-r border-surface-border">
         <div className="px-2 pt-2 pb-1 shrink-0">
           <button
-            onClick={async () => createProfile()}
-            className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-mono
-              text-text-muted hover:text-accent hover:bg-surface-raised transition-colors border border-dashed border-surface-border hover:border-accent/40"
+            onClick={() => createProfile()}
+            className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-mono text-text-muted hover:text-accent hover:bg-surface-raised transition-colors border border-dashed border-surface-border hover:border-accent/40"
           >
-            <VscAdd size={11} />
-            New Profile
+            <VscAdd size={11} /> New Profile
           </button>
           <button
             onClick={() => setTemplateOpen(true)}
-            className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-mono
-              text-text-muted hover:text-text-primary hover:bg-surface-raised/50 transition-colors"
+            className="w-full flex items-center gap-2 px-2.5 py-1.5 rounded-md text-xs font-mono text-text-muted hover:text-text-primary hover:bg-surface-raised/50 transition-colors"
           >
-            <VscLayout size={11} />
-            From Template
+            <VscLayout size={11} /> From Template
           </button>
         </div>
 
@@ -164,14 +153,13 @@ export function ProfileSidebar({
           axis="y"
           values={state.profiles}
           onReorder={reorderProfiles}
-          className="flex-1 overflow-y-auto py-1 space-y-0.5 px-2"
+          className="flex-1 overflow-y-auto py-1 space-y-0.5 px-2 min-h-0"
         >
           {state.profiles.length === 0 && (
             <p className="px-2 py-4 text-xs text-text-muted font-mono text-center">
               No profiles yet.
             </p>
           )}
-
           {state.profiles.map((profile) => (
             <Reorder.Item
               key={profile.id}
@@ -187,7 +175,7 @@ export function ProfileSidebar({
                 isDragging={draggingId === profile.id}
                 onClick={() => {
                   setActiveProfile(profile.id);
-                  onProfileClick?.();
+                  navigate('/console');
                 }}
                 onContextMenu={(e) => handleContextMenu(e, profile)}
               />
@@ -195,30 +183,30 @@ export function ProfileSidebar({
           ))}
         </Reorder.Group>
 
-        <div className="px-2 pt-1 pb-2 border-t border-surface-border space-y-0.5">
+        <div className="px-2 pt-1 pb-2 border-t border-surface-border space-y-0.5 shrink-0">
           <FooterButton
             label="Utilities"
             active={activeSidePanel === 'utilities'}
-            onClick={onOpenUtilities}
+            onClick={() => openPanel('/utilities')}
             icon={<VscTools size={13} />}
           />
           <FooterButton
             label="FAQ"
             active={activeSidePanel === 'faq'}
-            onClick={onOpenFaq}
+            onClick={() => openPanel('/faq')}
             icon={<VscQuestion size={13} />}
           />
           <FooterButton
             label="Settings"
             active={activeSidePanel === 'settings'}
-            onClick={onOpenSettings}
+            onClick={() => openPanel('/settings')}
             icon={<VscSettings size={13} />}
           />
           {devMode && (
             <FooterButton
               label="Developer"
               active={activeSidePanel === 'developer'}
-              onClick={onOpenDeveloper}
+              onClick={() => openPanel('/developer')}
               icon={<VscCode size={13} />}
               accent
             />
@@ -262,6 +250,8 @@ export function ProfileSidebar({
   );
 }
 
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
 function ProfileItem({
   profile,
   active,
@@ -279,7 +269,6 @@ function ProfileItem({
 }) {
   const color = profile.color || PROFILE_COLORS[0];
   const jarName = profile.jarPath?.split(/[/\\]/).pop() ?? '';
-
   return (
     <button
       onClick={onClick}
@@ -302,7 +291,6 @@ function ProfileItem({
           />
         )}
       </span>
-
       <span className="flex-1 min-w-0 flex flex-col">
         <span
           className={[
@@ -316,7 +304,6 @@ function ProfileItem({
           <span className="text-[10px] text-text-muted font-mono truncate">{jarName}</span>
         )}
       </span>
-
       {running && <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: color }} />}
     </button>
   );
@@ -349,8 +336,7 @@ function FooterButton({
             : 'text-text-muted hover:text-text-primary hover:bg-surface-raised/50',
       ].join(' ')}
     >
-      {icon}
-      {label}
+      {icon} {label}
     </button>
   );
 }
diff --git a/src/renderer/components/profiles/ProfileTab.tsx b/src/renderer/components/profiles/ProfileTab.tsx
index e30bda1..85f5fed 100644
--- a/src/renderer/components/profiles/ProfileTab.tsx
+++ b/src/renderer/components/profiles/ProfileTab.tsx
@@ -15,12 +15,13 @@ export function ProfileTab() {
     if (activeProfile) setDraft({ ...activeProfile });
   }, [activeProfile?.id]);
 
-  if (!draft || !activeProfile)
+  if (!draft || !activeProfile) {
     return (
       <div className="flex items-center justify-center h-full text-sm text-text-muted">
         No profile selected
       </div>
     );
+  }
 
   const update = (patch: Partial<Profile>) =>
     setDraft((prev) => (prev ? { ...prev, ...patch } : prev));
@@ -31,14 +32,10 @@ export function ProfileTab() {
     setSaved(true);
     setTimeout(() => setSaved(false), 1800);
   };
-  const handleDelete = async () => {
-    await deleteProfile(draft.id);
-    setShowDelete(false);
-  };
 
   return (
     <>
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full min-h-0">
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900 shrink-0">
           <h2 className="text-sm font-medium text-text-primary flex-1">Profile Identity</h2>
           <Button
@@ -50,7 +47,8 @@ export function ProfileTab() {
             {saved ? 'Saved' : 'Save'}
           </Button>
         </div>
-        <div className="flex-1 overflow-y-auto px-4 py-5 space-y-6">
+
+        <div className="flex-1 overflow-y-auto min-h-0 px-4 py-5 space-y-6">
           <Section title="Name">
             <Input
               value={draft.name}
@@ -58,6 +56,7 @@ export function ProfileTab() {
               placeholder="My Server"
             />
           </Section>
+
           <Section
             title="Accent Colour"
             hint="Used in the sidebar and as the tab highlight colour."
@@ -67,7 +66,6 @@ export function ProfileTab() {
                 <button
                   key={c}
                   onClick={() => update({ color: c })}
-                  title={c}
                   className="w-7 h-7 rounded-full transition-all duration-150 hover:scale-110 focus:outline-none"
                   style={{
                     backgroundColor: c,
@@ -78,6 +76,7 @@ export function ProfileTab() {
               ))}
             </div>
           </Section>
+
           <Section title="Danger Zone">
             <div className="rounded-lg border border-red-500/20 bg-red-500/5 px-4 py-3 flex items-center justify-between gap-4">
               <div>
@@ -98,13 +97,17 @@ export function ProfileTab() {
           </Section>
         </div>
       </div>
+
       <Dialog
         open={showDelete}
         title="Delete profile?"
         message={`"${draft.name}" will be permanently removed. This cannot be undone.`}
         confirmLabel="Delete"
         danger
-        onConfirm={handleDelete}
+        onConfirm={async () => {
+          await deleteProfile(draft.id);
+          setShowDelete(false);
+        }}
         onCancel={() => setShowDelete(false)}
       />
     </>
diff --git a/src/renderer/components/profiles/TemplateModal.tsx b/src/renderer/components/profiles/TemplateModal.tsx
index b84c888..2a053ed 100644
--- a/src/renderer/components/profiles/TemplateModal.tsx
+++ b/src/renderer/components/profiles/TemplateModal.tsx
@@ -72,7 +72,6 @@ export function TemplateModal({ open, onClose }: Props) {
         e.template.tags.some((t) => t.toLowerCase().includes(filter.toLowerCase()))
     ) ?? [];
 
-  // Group by category
   const grouped = filtered.reduce<Record<string, TemplateEntry[]>>((acc, e) => {
     const cat = e.template.category || 'Other';
     if (!acc[cat]) acc[cat] = [];
@@ -83,7 +82,6 @@ export function TemplateModal({ open, onClose }: Props) {
   return (
     <Modal open={open} onClose={onClose} title="Profile Templates" width="lg">
       <div className="flex flex-col" style={{ height: 480 }}>
-        {/* Search + reload */}
         <div className="flex items-center gap-2 px-4 py-3 border-b border-surface-border shrink-0">
           <input
             type="text"
@@ -101,9 +99,7 @@ export function TemplateModal({ open, onClose }: Props) {
           </button>
         </div>
 
-        {/* Body */}
-        <div className="flex flex-1 overflow-hidden">
-          {/* List */}
+        <div className="flex flex-1 overflow-hidden min-h-0">
           <div className="w-52 shrink-0 border-r border-surface-border overflow-y-auto py-2">
             {loading && !templates && (
               <p className="text-xs text-text-muted font-mono px-4 py-6 text-center">Loading...</p>
@@ -152,8 +148,7 @@ export function TemplateModal({ open, onClose }: Props) {
             ))}
           </div>
 
-          {/* Detail */}
-          <div className="flex-1 overflow-y-auto px-5 py-4">
+          <div className="flex-1 overflow-y-auto px-5 py-4 min-h-0">
             {!selected ? (
               <div className="flex flex-col items-center justify-center h-full gap-3 text-text-muted">
                 <VscPackage size={28} />
@@ -182,43 +177,38 @@ export function TemplateModal({ open, onClose }: Props) {
                     ))}
                   </div>
                 </div>
-
-                <Divider />
-
-                <Section title="JVM Args">
+                <div className="border-t border-surface-border" />
+                <TplSection title="JVM Args">
                   {selected.template.defaults.jvmArgs.length === 0 ? (
-                    <Empty />
+                    <TplEmpty />
                   ) : (
                     selected.template.defaults.jvmArgs.map((a, i) => (
-                      <Pill key={i} value={a.value} enabled={a.enabled} />
+                      <TplPill key={i} value={a.value} enabled={a.enabled} />
                     ))
                   )}
-                </Section>
-
-                <Section title="System Properties">
+                </TplSection>
+                <TplSection title="System Properties">
                   {selected.template.defaults.systemProperties.length === 0 ? (
-                    <Empty />
+                    <TplEmpty />
                   ) : (
                     selected.template.defaults.systemProperties.map((p, i) => (
-                      <Pill
+                      <TplPill
                         key={i}
                         value={`-D${p.key}${p.value ? `=${p.value}` : ''}`}
                         enabled={p.enabled}
                       />
                     ))
                   )}
-                </Section>
-
-                <Section title="Program Args">
+                </TplSection>
+                <TplSection title="Program Args">
                   {selected.template.defaults.programArgs.length === 0 ? (
-                    <Empty />
+                    <TplEmpty />
                   ) : (
                     selected.template.defaults.programArgs.map((a, i) => (
-                      <Pill key={i} value={a.value} enabled={a.enabled} />
+                      <TplPill key={i} value={a.value} enabled={a.enabled} />
                     ))
                   )}
-                </Section>
-
+                </TplSection>
                 <div className="flex items-center gap-1.5 text-xs text-text-muted font-mono">
                   <LuShield size={11} />
                   Template version {selected.template.templateVersion} · Requires app{' '}
@@ -229,14 +219,12 @@ export function TemplateModal({ open, onClose }: Props) {
           </div>
         </div>
 
-        {/* Footer */}
         <div className="flex items-center justify-end gap-2 px-4 py-3 border-t border-surface-border shrink-0">
           <Button variant="ghost" size="sm" onClick={onClose}>
             Cancel
           </Button>
           <Button variant="primary" size="sm" disabled={!selected} onClick={handleCreate}>
-            <VscAdd size={11} />
-            Create Profile
+            <VscAdd size={11} /> Create Profile
           </Button>
         </div>
       </div>
@@ -244,7 +232,7 @@ export function TemplateModal({ open, onClose }: Props) {
   );
 }
 
-function Section({ title, children }: { title: string; children: React.ReactNode }) {
+function TplSection({ title, children }: { title: string; children: React.ReactNode }) {
   return (
     <div className="space-y-1.5">
       <p className="text-xs font-mono text-text-muted uppercase tracking-widest">{title}</p>
@@ -253,7 +241,7 @@ function Section({ title, children }: { title: string; children: React.ReactNode
   );
 }
 
-function Pill({ value, enabled }: { value: string; enabled: boolean }) {
+function TplPill({ value, enabled }: { value: string; enabled: boolean }) {
   return (
     <span
       className={[
@@ -268,9 +256,6 @@ function Pill({ value, enabled }: { value: string; enabled: boolean }) {
   );
 }
 
-function Divider() {
-  return <div className="border-t border-surface-border" />;
-}
-function Empty() {
+function TplEmpty() {
   return <span className="text-xs text-text-muted font-mono italic">none</span>;
 }
diff --git a/src/renderer/components/settings/ReleaseModal.tsx b/src/renderer/components/settings/ReleaseModal.tsx
new file mode 100644
index 0000000..2127815
--- /dev/null
+++ b/src/renderer/components/settings/ReleaseModal.tsx
@@ -0,0 +1,373 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal } from '../common/Modal';
+import { Button } from '../common/Button';
+import {
+  VscPackage,
+  VscGithub,
+  VscCalendar,
+  VscTag,
+  VscVerified,
+  VscBeaker,
+  VscDebugPause,
+  VscDebugContinue,
+  VscClose,
+} from 'react-icons/vsc';
+import { LuDownload, LuExternalLink, LuCheck, LuRotateCcw } from 'react-icons/lu';
+import { GitHubAsset, GitHubRelease } from '../../../main/shared/types/GitHub.types';
+
+interface Props {
+  release: GitHubRelease;
+  open: boolean;
+  onClose: () => void;
+}
+
+interface DownloadProgress {
+  filename: string;
+  bytesWritten: number;
+  totalBytes: number;
+  percent: number;
+  status: 'downloading' | 'paused' | 'done' | 'error' | 'cancelled';
+  error?: string;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function formatDate(iso: string): string {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+function getPlatformAsset(assets?: GitHubAsset[]): GitHubAsset | undefined {
+  if (!assets || !Array.isArray(assets)) return undefined;
+  return (
+    assets.find((a) => a.name.endsWith('.exe') || a.name.endsWith('.msi')) ??
+    assets.find((a) => a.name.endsWith('.dmg') || a.name.endsWith('.pkg')) ??
+    assets.find((a) => a.name.endsWith('.AppImage') || a.name.endsWith('.deb'))
+  );
+}
+
+function ProgressBar({ progress }: { progress: DownloadProgress }) {
+  const { status, percent, bytesWritten, totalBytes, error } = progress;
+  const isDone = status === 'done';
+  const isError = status === 'error';
+  const isPaused = status === 'paused';
+  const isCancelled = status === 'cancelled';
+
+  const barColor =
+    isError || isCancelled
+      ? 'bg-red-500'
+      : isDone
+        ? 'bg-green-500'
+        : isPaused
+          ? 'bg-yellow-400'
+          : 'bg-accent';
+  const label = isError
+    ? (error ?? 'Error')
+    : isCancelled
+      ? 'Cancelled'
+      : isDone
+        ? 'Complete'
+        : isPaused
+          ? 'Paused'
+          : `${formatBytes(bytesWritten)}${totalBytes > 0 ? ` / ${formatBytes(totalBytes)}` : ''}`;
+  const percentColor = isDone
+    ? 'text-green-400'
+    : isError || isCancelled
+      ? 'text-red-400'
+      : isPaused
+        ? 'text-yellow-400'
+        : 'text-accent';
+
+  return (
+    <div className="mt-2 space-y-1">
+      <div className="relative h-1 w-full rounded-full bg-surface-border overflow-hidden">
+        <div
+          className={`absolute left-0 top-0 h-full rounded-full transition-all duration-200 ${barColor} ${!isDone && !isError && !isCancelled && !isPaused ? 'animate-pulse' : ''}`}
+          style={{ width: `${percent}%` }}
+        />
+      </div>
+      <div className="flex items-center justify-between text-[10px] font-mono text-text-muted">
+        <span>{label}</span>
+        <span className={percentColor}>{isDone ? '100%' : `${percent}%`}</span>
+      </div>
+    </div>
+  );
+}
+
+export function ReleaseModal({ release, open, onClose }: Props) {
+  const [downloads, setDownloads] = useState<Map<string, DownloadProgress>>(new Map());
+
+  const updateDownload = useCallback((payload: DownloadProgress) => {
+    setDownloads((prev) => new Map(prev).set(payload.filename, payload));
+  }, []);
+
+  const resetDownload = useCallback((filename: string) => {
+    setDownloads((prev) => {
+      const next = new Map(prev);
+      next.delete(filename);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const unsub = window.api.onDownloadProgress((progress: DownloadProgress) =>
+      updateDownload(progress)
+    );
+    return () => unsub();
+  }, [updateDownload]);
+
+  const platformAsset = getPlatformAsset(release.assets);
+  const getDl = (name: string) => downloads.get(name);
+  const isActive = (name: string) => {
+    const s = downloads.get(name)?.status;
+    return s === 'downloading' || s === 'paused';
+  };
+
+  const handleDownload = async (asset: GitHubAsset) => {
+    await window.api.downloadAsset(asset.browser_download_url, asset.name);
+  };
+
+  const handlePause = async (filename: string) => {
+    const dl = downloads.get(filename);
+    if (!dl) return;
+    if (dl.status === 'paused') await window.api.resumeDownload(filename);
+    else await window.api.pauseDownload(filename);
+  };
+
+  const handleCancel = async (filename: string) => {
+    await window.api.cancelDownload(filename);
+  };
+
+  const renderControls = (asset: GitHubAsset, variant: 'primary' | 'ghost') => {
+    const dl = getDl(asset.name);
+    const active = isActive(asset.name);
+    return (
+      <div className="flex items-center gap-1.5 shrink-0">
+        {active && (
+          <>
+            <button
+              onClick={() => handlePause(asset.name)}
+              className="p-1 rounded text-text-muted hover:text-accent transition-colors"
+              title={dl?.status === 'paused' ? 'Resume' : 'Pause'}
+            >
+              {dl?.status === 'paused' ? (
+                <VscDebugContinue size={14} />
+              ) : (
+                <VscDebugPause size={14} />
+              )}
+            </button>
+            <button
+              onClick={() => handleCancel(asset.name)}
+              className="p-1 rounded text-text-muted hover:text-red-400 transition-colors"
+              title="Cancel"
+            >
+              <VscClose size={14} />
+            </button>
+          </>
+        )}
+        {dl?.status === 'done' && (
+          <div className="flex items-center gap-2">
+            <span className="flex items-center gap-1 text-xs text-green-400 font-mono">
+              <LuCheck size={12} /> Saved
+            </span>
+            <button
+              onClick={() => resetDownload(asset.name)}
+              className="p-1 rounded text-text-muted hover:text-accent transition-colors"
+              title="Download again"
+            >
+              <LuRotateCcw size={12} />
+            </button>
+          </div>
+        )}
+        {(dl?.status === 'cancelled' || dl?.status === 'error') && (
+          <Button
+            variant={variant}
+            size="sm"
+            onClick={() => {
+              resetDownload(asset.name);
+              handleDownload(asset);
+            }}
+          >
+            Retry
+          </Button>
+        )}
+        {!dl && !active && (
+          <Button variant={variant} size="sm" onClick={() => handleDownload(asset)}>
+            {variant === 'primary' ? 'Download' : 'Save'}
+          </Button>
+        )}
+      </div>
+    );
+  };
+
+  const bodyLines = (release.body ?? '').split('\n');
+
+  return (
+    <Modal open={open} onClose={onClose} title="Release Details" width="xl">
+      <div className="px-5 py-4 space-y-5">
+        {/* Header */}
+        <div className="flex items-start gap-4">
+          {release.author && (
+            <img
+              src={release.author.avatar_url}
+              alt={release.author.login}
+              className="w-10 h-10 rounded-full border border-surface-border shrink-0"
+            />
+          )}
+          <div className="flex-1 min-w-0">
+            <div className="flex items-center gap-2 flex-wrap">
+              <h3 className="text-base font-semibold text-text-primary">
+                {release.name ?? release.tag_name}
+              </h3>
+              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs font-mono bg-accent/10 border-accent/30 text-accent">
+                <VscTag size={10} />
+                {release.tag_name}
+              </span>
+              {release.prerelease ? (
+                <span className="flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs font-mono bg-yellow-500/10 border-yellow-500/30 text-yellow-400">
+                  <VscBeaker size={10} />
+                  Pre-release
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 px-2 py-0.5 rounded-full border text-xs font-mono bg-green-500/10 border-green-500/30 text-green-400">
+                  <VscVerified size={10} />
+                  Stable
+                </span>
+              )}
+            </div>
+            <div className="flex items-center gap-3 mt-1 text-xs text-text-muted font-mono">
+              {release.author && (
+                <span className="flex items-center gap-1">
+                  <VscGithub size={11} />
+                  {release.author.login}
+                </span>
+              )}
+              {release.published_at && (
+                <span className="flex items-center gap-1">
+                  <VscCalendar size={11} />
+                  {formatDate(release.published_at)}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Platform asset quick download */}
+        {platformAsset && (
+          <div className="rounded-lg border border-accent/20 bg-accent/5 px-4 py-3">
+            <div className="flex items-center justify-between gap-4">
+              <div className="flex items-center gap-3">
+                <LuDownload size={18} className="text-accent shrink-0" />
+                <div>
+                  <p className="text-xs font-medium text-text-primary">{platformAsset.name}</p>
+                  <p className="text-xs text-text-muted font-mono">
+                    {formatBytes(platformAsset.size)} ·{' '}
+                    {platformAsset.download_count.toLocaleString()} downloads
+                  </p>
+                </div>
+              </div>
+              {renderControls(platformAsset, 'primary')}
+            </div>
+            {getDl(platformAsset.name) && <ProgressBar progress={getDl(platformAsset.name)!} />}
+          </div>
+        )}
+
+        {/* Release notes */}
+        {release.body && (
+          <div>
+            <p className="text-xs font-mono text-text-muted uppercase tracking-widest mb-2">
+              Release Notes
+            </p>
+            <div className="rounded-lg border border-surface-border bg-base-950 px-4 py-3 space-y-1 max-h-48 overflow-y-auto">
+              {bodyLines.map((line, i) => {
+                const h2 = line.startsWith('## ');
+                const h3 = line.startsWith('### ');
+                const li = line.startsWith('- ') || line.startsWith('* ');
+                if (!line.trim()) return <div key={i} className="h-1" />;
+                if (h2)
+                  return (
+                    <p key={i} className="text-xs font-semibold text-text-primary pt-1">
+                      {line.slice(3)}
+                    </p>
+                  );
+                if (h3)
+                  return (
+                    <p key={i} className="text-xs font-medium text-text-secondary">
+                      {line.slice(4)}
+                    </p>
+                  );
+                if (li)
+                  return (
+                    <div key={i} className="flex gap-2 text-xs text-text-secondary font-mono">
+                      <span className="text-accent shrink-0">·</span>
+                      <span>{line.slice(2)}</span>
+                    </div>
+                  );
+                return (
+                  <p key={i} className="text-xs text-text-muted font-mono">
+                    {line}
+                  </p>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* All assets */}
+        {(release.assets ?? []).length > 0 && (
+          <div>
+            <p className="text-xs font-mono text-text-muted uppercase tracking-widest mb-2">
+              All Assets
+            </p>
+            <div className="space-y-1.5">
+              {(release.assets ?? []).map((asset) => (
+                <div
+                  key={asset.id}
+                  className="px-3 py-2 rounded-lg border border-surface-border bg-base-900/50"
+                >
+                  <div className="flex items-center gap-3">
+                    <VscPackage size={13} className="text-text-muted shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-xs font-mono text-text-primary truncate">{asset.name}</p>
+                      <p className="text-xs text-text-muted font-mono">
+                        {formatBytes(asset.size)} · {asset.download_count.toLocaleString()}{' '}
+                        downloads
+                      </p>
+                    </div>
+                    {renderControls(asset, 'ghost')}
+                  </div>
+                  {getDl(asset.name) && <ProgressBar progress={getDl(asset.name)!} />}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="flex items-center justify-between pt-1 border-t border-surface-border">
+          {release.html_url ? (
+            <button
+              onClick={() => window.api.openExternal(release.html_url)}
+              className="flex items-center gap-1.5 text-xs text-text-muted hover:text-accent transition-colors font-mono"
+            >
+              <LuExternalLink size={11} />
+              View on GitHub
+            </button>
+          ) : (
+            <div />
+          )}
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/renderer/components/settings/SettingsTab.tsx b/src/renderer/components/settings/SettingsTab.tsx
index 13afb75..8f66d17 100644
--- a/src/renderer/components/settings/SettingsTab.tsx
+++ b/src/renderer/components/settings/SettingsTab.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import { useApp } from '../../store/AppStore';
 import { Button } from '../common/Button';
 import { Toggle } from '../common/Toggle';
-import { VersionChecker } from './version/VersionChecker';
+import { VersionChecker } from './VersionChecker';
 import { REST_API_CONFIG } from '../../../main/shared/config/API.config';
 import { version } from '../../../../package.json';
 import { AppSettings, JRCEnvironment } from '../../../main/shared/types/App.types';
@@ -19,42 +19,23 @@ export function SettingsTab() {
 
   useEffect(() => {
     if (!state.settings) return;
-
     setDraft((prev) => {
       if (!prev) return state.settings;
-
-      // keep user changes, but refresh from store
-      return {
-        ...state.settings,
-        ...prev,
-        devModeEnabled: prev.devModeEnabled, // external wins
-      };
+      return { ...state.settings, ...prev, devModeEnabled: prev.devModeEnabled };
     });
   }, [state.settings]);
 
   useEffect(() => {
     const listener = async (e: JRCEnvironment) => {
       setSaved(false);
-
       setDraft((prev) => {
-        if (!prev) return prev;
-        if (prev.devModeEnabled === e.devMode) return prev;
-
-        return {
-          ...prev,
-          devModeEnabled: e.devMode,
-        };
+        if (!prev || prev.devModeEnabled === e.devMode) return prev;
+        return { ...prev, devModeEnabled: e.devMode };
       });
-
-      // 🔥 sync to store so isDirty stays correct
       if (state.settings && state.settings.devModeEnabled !== e.devMode) {
-        await saveSettings({
-          ...state.settings,
-          devModeEnabled: e.devMode,
-        });
+        await saveSettings({ ...state.settings, devModeEnabled: e.devMode });
       }
     };
-
     window.env.onChange(listener);
   }, [state.settings, saveSettings]);
 
@@ -73,7 +54,7 @@ export function SettingsTab() {
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full min-h-0">
       {(isDirty || saved) && (
         <div className="flex items-center gap-3 px-4 py-2.5 border-b border-surface-border bg-base-900 shrink-0 animate-fade-in">
           <span className="text-xs text-text-secondary flex-1">
@@ -84,7 +65,8 @@ export function SettingsTab() {
           </Button>
         </div>
       )}
-      <div className="flex-1 overflow-y-auto">
+
+      <div className="flex-1 overflow-y-auto min-h-0">
         <div className="px-5 py-5 max-w-2xl space-y-8">
           <Section title="Startup">
             <Row
@@ -114,7 +96,9 @@ export function SettingsTab() {
               <Toggle checked={draft.minimizeToTray} onChange={(v) => set({ minimizeToTray: v })} />
             </Row>
           </Section>
+
           <Divider />
+
           <Section title="Console">
             <Row label="Font size" hint="Console output font size in pixels">
               <div className="flex items-center gap-2.5">
@@ -174,7 +158,7 @@ export function SettingsTab() {
           <Section title="Developer Options">
             <Row
               label="Toggle Developer Mode (Right-Shift + 7)"
-              hint="Enables the Developer tab and DevTools. Warning: may expose sensitive information and powerful features. Use with caution."
+              hint="Enables the Developer tab and DevTools. Use with caution."
             >
               <Toggle checked={draft.devModeEnabled} onChange={(v) => set({ devModeEnabled: v })} />
             </Row>
@@ -211,6 +195,7 @@ export function SettingsTab() {
           </Section>
 
           <Divider />
+
           <Section title="About">
             <VersionChecker currentVersion={version} />
             <Row label="Stack">
diff --git a/src/renderer/components/settings/VersionChecker.tsx b/src/renderer/components/settings/VersionChecker.tsx
new file mode 100644
index 0000000..ec40de8
--- /dev/null
+++ b/src/renderer/components/settings/VersionChecker.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useCallback } from 'react';
+import { Button } from '../common/Button';
+import { Tooltip } from '../common/Tooltip';
+import { ReleaseModal } from './ReleaseModal';
+import { VscCheck, VscWarning, VscSync, VscCircleSlash } from 'react-icons/vsc';
+import { GitHubRelease } from '../../../../main/shared/types/GitHub.types';
+
+interface Props {
+  currentVersion: string;
+}
+
+type CheckState = 'idle' | 'checking' | 'up-to-date' | 'update-available' | 'error';
+
+function semverGt(a: string, b: string): boolean {
+  const parse = (v: string) => v.replace(/^v/, '').split('.').map(Number);
+  const [am, an, ap] = parse(a);
+  const [bm, bn, bp] = parse(b);
+  if (am !== bm) return am > bm;
+  if (an !== bn) return an > bn;
+  return ap > bp;
+}
+
+export function VersionChecker({ currentVersion }: Props) {
+  const [checkState, setCheckState] = useState<CheckState>('idle');
+  const [release, setRelease] = useState<GitHubRelease | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const check = useCallback(async () => {
+    setCheckState('checking');
+    setErrorMsg(null);
+    const res = await window.api.fetchLatestRelease();
+    if (!res.ok || !res.data) {
+      setCheckState('error');
+      setErrorMsg(res.error ?? 'Could not reach GitHub');
+      return;
+    }
+    setRelease(res.data);
+    const remoteVersion = (res.data.tag_name ?? '').replace(/^v/, '');
+    setCheckState(semverGt(remoteVersion, currentVersion) ? 'update-available' : 'up-to-date');
+  }, [currentVersion]);
+
+  const Icon = {
+    idle: VscSync,
+    checking: VscSync,
+    'up-to-date': VscCheck,
+    'update-available': VscWarning,
+    error: VscCircleSlash,
+  }[checkState];
+  const iconColor = {
+    idle: 'text-text-muted',
+    checking: 'text-text-muted animate-spin',
+    'up-to-date': 'text-accent',
+    'update-available': 'text-yellow-400',
+    error: 'text-red-400',
+  }[checkState];
+  const tooltipContent = {
+    idle: 'Click to check for updates',
+    checking: 'Checking...',
+    'up-to-date': `You are on the latest version (${currentVersion})`,
+    'update-available': release
+      ? `${release.tag_name} is available — click for details`
+      : 'Update available',
+    error: errorMsg ?? 'Check failed',
+  }[checkState];
+
+  const handleClick = () => {
+    if (checkState === 'idle' || checkState === 'error') {
+      check();
+      return;
+    }
+    if ((checkState === 'up-to-date' || checkState === 'update-available') && release)
+      setModalOpen(true);
+  };
+
+  return (
+    <>
+      <div className="flex items-center justify-between gap-4 py-3.5">
+        <div className="flex-1 min-w-0">
+          <p className="text-sm text-text-primary">Version</p>
+          <p className="text-xs text-text-muted mt-0.5 leading-4">
+            Current: <span className="font-mono text-accent">{currentVersion}</span>
+            {checkState === 'update-available' && release && (
+              <span className="ml-2 font-mono text-yellow-400">→ {release.tag_name} available</span>
+            )}
+          </p>
+        </div>
+        <Tooltip content={tooltipContent} side="left">
+          <button
+            onClick={handleClick}
+            className="flex items-center gap-2 px-2.5 py-1 rounded-md border border-surface-border text-xs font-mono text-text-secondary hover:text-text-primary hover:border-text-muted transition-colors"
+          >
+            <Icon size={12} className={iconColor} />
+            {checkState === 'idle' && 'Check for updates'}
+            {checkState === 'checking' && 'Checking...'}
+            {checkState === 'up-to-date' && 'Up to date'}
+            {checkState === 'update-available' && 'View update'}
+            {checkState === 'error' && 'Retry'}
+          </button>
+        </Tooltip>
+      </div>
+      {release && (
+        <ReleaseModal release={release} open={modalOpen} onClose={() => setModalOpen(false)} />
+      )}
+    </>
+  );
+}
diff --git a/src/renderer/components/utils/ActivityLogPanel.tsx b/src/renderer/components/utils/ActivityLogPanel.tsx
index e5efbf1..f81c2f0 100644
--- a/src/renderer/components/utils/ActivityLogPanel.tsx
+++ b/src/renderer/components/utils/ActivityLogPanel.tsx
@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { Button } from '../common/Button';
 import { Dialog } from '../common/Dialog';
+import { EmptyState } from '../common/EmptyState';
 import { VscListUnordered } from 'react-icons/vsc';
 import { ProcessLogEntry } from '../../../main/shared/types/Process.types';
 
@@ -15,13 +16,13 @@ export function ActivityLogPanel() {
     setLoading(false);
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     load();
   }, [load]);
 
   return (
     <>
-      <div className="flex flex-col h-full">
+      <div className="flex flex-col h-full min-h-0">
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900/50 shrink-0">
           <p className="text-xs text-text-muted flex-1">
             All processes started by JRC this session
@@ -39,9 +40,9 @@ export function ActivityLogPanel() {
           </Button>
         </div>
 
-        <div className="flex-1 overflow-y-auto px-4 py-3">
+        <div className="flex-1 overflow-y-auto min-h-0 px-4 py-3">
           {loading && !entries && (
-            <p className="text-xs text-text-muted py-8 text-center font-mono">Loading…</p>
+            <p className="text-xs text-text-muted py-8 text-center font-mono">Loading...</p>
           )}
           {entries && entries.length === 0 && (
             <EmptyState
@@ -79,7 +80,6 @@ export function ActivityLogPanel() {
 function LogEntryRow({ entry }: { entry: ProcessLogEntry }) {
   const duration = entry.stoppedAt ? formatDuration(entry.stoppedAt - entry.startedAt) : null;
   const jarName = entry.jarPath.split(/[/\\]/).pop() ?? entry.jarPath;
-
   return (
     <div className="rounded-lg border border-surface-border bg-base-900 px-3 py-2.5">
       <div className="flex items-start justify-between gap-3">
@@ -121,15 +121,6 @@ function LogEntryRow({ entry }: { entry: ProcessLogEntry }) {
   );
 }
 
-function EmptyState({ icon, text }: { icon: React.ReactNode; text: string }) {
-  return (
-    <div className="flex flex-col items-center gap-3 py-12 text-text-muted">
-      {icon}
-      <p className="text-xs font-mono text-center max-w-xs leading-relaxed">{text}</p>
-    </div>
-  );
-}
-
 function formatTime(ts: number): string {
   return new Date(ts).toLocaleTimeString([], {
     hour: '2-digit',
diff --git a/src/renderer/components/utils/ScannerPanel.tsx b/src/renderer/components/utils/ScannerPanel.tsx
index 51c94a9..27a2d95 100644
--- a/src/renderer/components/utils/ScannerPanel.tsx
+++ b/src/renderer/components/utils/ScannerPanel.tsx
@@ -1,17 +1,17 @@
 import React, { useState, useCallback } from 'react';
 import { Button } from '../common/Button';
 import { Dialog } from '../common/Dialog';
+import { EmptyState } from '../common/EmptyState';
 import { VscCheck } from 'react-icons/vsc';
 import { LuScanLine } from 'react-icons/lu';
 import { JavaProcessInfo } from '../../../main/shared/types/Process.types';
 
+type Filter = 'java' | 'all';
 interface KillIntent {
   proc: JavaProcessInfo;
   nonJava: boolean;
 }
 
-type Filter = 'java' | 'all';
-
 export function ScannerPanel() {
   const [results, setResults] = useState<JavaProcessInfo[] | null>(null);
   const [scanning, setScanning] = useState(false);
@@ -29,11 +29,9 @@ export function ScannerPanel() {
     setKilledPids(new Set());
     setSearch('');
     setExpandedPid(null);
-
     const found = await window.api.scanAllProcesses();
     setResults(found);
     setScanning(false);
-
     const javaCount = found.filter((p) => p.isJava).length;
     setStatusMsg({ text: `Found ${found.length} processes — ${javaCount} java`, ok: true });
   }, []);
@@ -53,7 +51,7 @@ export function ScannerPanel() {
   const handleKillAll = async () => {
     const res = await window.api.killAllJava();
     setStatusMsg({
-      text: `Killed ${res.killed} java process${res.killed === 1 ? '' : 'es'}`,
+      text: `Killed ${res.killed} java process${res.killed === 1 ? '' : 'es'} (protected skipped)`,
       ok: true,
     });
     setKillAllConfirm(false);
@@ -72,25 +70,38 @@ export function ScannerPanel() {
         )
     : null;
 
-  const javaVisible = visible?.some((r) => r.isJava) ?? false;
+  const killableJavaVisible = visible?.some((r) => r.isJava && !r.protected) ?? false;
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full min-h-0">
       <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900/50 shrink-0 flex-wrap gap-y-2">
-        <FilterToggle value={filter} onChange={setFilter} />
-
+        <div className="flex items-center gap-1 bg-base-950 rounded-lg p-0.5 border border-surface-border">
+          {(['java', 'all'] as const).map((f) => (
+            <button
+              key={f}
+              onClick={() => setFilter(f)}
+              className={[
+                'px-2.5 py-1 text-xs rounded-md transition-colors font-mono',
+                filter === f
+                  ? 'bg-surface-raised text-text-primary'
+                  : 'text-text-muted hover:text-text-primary',
+              ].join(' ')}
+            >
+              {f === 'java' ? 'Java only' : 'All'}
+            </button>
+          ))}
+        </div>
         {results !== null && (
           <input
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search PID or command…"
+            placeholder="Search PID or command..."
             className="h-7 bg-base-950 border border-surface-border rounded-md px-2.5 text-xs font-mono text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 w-48"
           />
         )}
-
         <div className="flex-1" />
-        {javaVisible && (
+        {killableJavaVisible && (
           <Button variant="danger" size="sm" onClick={() => setKillAllConfirm(true)}>
             Kill All Java
           </Button>
@@ -113,7 +124,7 @@ export function ScannerPanel() {
         </div>
       )}
 
-      <div className="flex-1 overflow-y-auto px-4 py-3">
+      <div className="flex-1 overflow-y-auto min-h-0 px-4 py-3">
         {results === null && !scanning && (
           <EmptyState
             icon={<LuScanLine size={28} />}
@@ -122,7 +133,7 @@ export function ScannerPanel() {
         )}
         {scanning && (
           <p className="text-xs text-text-muted font-mono py-8 text-center animate-pulse">
-            Scanning all processes…
+            Scanning all processes...
           </p>
         )}
         {visible !== null && visible.length === 0 && !scanning && (
@@ -148,13 +159,23 @@ export function ScannerPanel() {
 
       <Dialog
         open={!!killIntent}
-        title={killIntent?.nonJava ? 'Kill non-Java process?' : `Kill PID ${killIntent?.proc.pid}?`}
+        title={
+          killIntent?.proc.protected
+            ? 'Kill protected process?'
+            : killIntent?.nonJava
+              ? 'Kill non-Java process?'
+              : `Kill PID ${killIntent?.proc.pid}?`
+        }
         message={
-          killIntent?.nonJava
-            ? `Warning: this process does not appear to be Java.\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}\n\nForcefully terminating unknown processes can cause data loss.`
-            : `Forcefully terminate PID ${killIntent?.proc.pid}?\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}`
+          killIntent?.proc.protected
+            ? `This process is marked as protected.\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}\n\nAre you sure?`
+            : killIntent?.nonJava
+              ? `Warning: not a Java process.\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}\n\nForcefully terminating unknown processes can cause data loss.`
+              : `Forcefully terminate PID ${killIntent?.proc.pid}?\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}`
+        }
+        confirmLabel={
+          killIntent?.proc.protected || killIntent?.nonJava ? 'Kill anyway' : 'Kill Process'
         }
-        confirmLabel={killIntent?.nonJava ? 'Kill anyway' : 'Kill Process'}
         danger
         onConfirm={handleKill}
         onCancel={() => setKillIntent(null)}
@@ -163,7 +184,7 @@ export function ScannerPanel() {
       <Dialog
         open={killAllConfirm}
         title="Kill all Java processes?"
-        message="This forcefully terminates every java process on this machine — including those not managed by JRC. Running servers will lose unsaved data."
+        message="This forcefully terminates every non-protected java process. Protected processes will be skipped. Running servers will lose unsaved data."
         confirmLabel="Kill All"
         danger
         onConfirm={handleKillAll}
@@ -173,27 +194,6 @@ export function ScannerPanel() {
   );
 }
 
-function FilterToggle({ value, onChange }: { value: Filter; onChange: (f: Filter) => void }) {
-  return (
-    <div className="flex items-center gap-1 bg-base-950 rounded-lg p-0.5 border border-surface-border">
-      {(['java', 'all'] as const).map((f) => (
-        <button
-          key={f}
-          onClick={() => onChange(f)}
-          className={[
-            'px-2.5 py-1 text-xs rounded-md transition-colors font-mono',
-            value === f
-              ? 'bg-surface-raised text-text-primary'
-              : 'text-text-muted hover:text-text-primary',
-          ].join(' ')}
-        >
-          {f === 'java' ? 'Java only' : 'All'}
-        </button>
-      ))}
-    </div>
-  );
-}
-
 function ProcessRow({
   proc,
   expanded,
@@ -209,54 +209,57 @@ function ProcessRow({
     <div
       className={[
         'rounded-lg border transition-colors overflow-hidden',
-        proc.isJava ? 'border-accent/20 bg-accent/5' : 'border-surface-border bg-base-900/40',
+        proc.protected
+          ? 'border-surface-border/50 bg-base-900/20 opacity-50'
+          : proc.isJava
+            ? 'border-accent/20 bg-accent/5'
+            : 'border-surface-border bg-base-900/40',
       ].join(' ')}
     >
       <div className="flex items-center gap-2 px-3 py-2">
-        <ExpandChevron expanded={expanded} onClick={onToggle} />
-
+        <button
+          onClick={onToggle}
+          className="text-text-muted hover:text-text-primary transition-colors shrink-0"
+        >
+          <svg
+            width="10"
+            height="10"
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            className={['transition-transform', expanded ? 'rotate-90' : ''].join(' ')}
+          >
+            <polyline points="3,2 7,5 3,8" />
+          </svg>
+        </button>
         <div className="flex items-center gap-1 shrink-0">
-          {proc.managed && (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-accent/15 text-accent border border-accent/30">
-              Managed
-            </span>
-          )}
-          {proc.isJava ? (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/20">
-              Java
-            </span>
-          ) : (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-surface-raised text-text-muted border border-surface-border">
-              Non-Java
-            </span>
-          )}
+          {proc.protected && <Badge label="Protected" />}
+          {proc.managed && <Badge label="Managed" accent />}
+          {proc.isJava ? <Badge label="Java" blue /> : <Badge label="Non-Java" />}
         </div>
-
         <code
           className={[
             'text-xs font-mono shrink-0 w-14',
-            proc.isJava ? 'text-accent' : 'text-text-muted',
+            proc.isJava && !proc.protected ? 'text-accent' : 'text-text-muted',
           ].join(' ')}
         >
           {proc.pid}
         </code>
-
         <span
           className="text-xs font-mono text-text-secondary truncate flex-1 min-w-0"
           title={proc.command}
         >
           {proc.jarName ?? proc.name ?? proc.command.slice(0, 60)}
         </span>
-
         {proc.memoryMB !== undefined && (
           <span className="text-xs font-mono text-text-muted shrink-0">{proc.memoryMB} MB</span>
         )}
-
         <Button variant="danger" size="sm" onClick={onKill}>
           Kill
         </Button>
       </div>
-
       {expanded && (
         <div className="px-10 pb-3 pt-1 border-t border-surface-border/50 space-y-1.5 animate-fade-in">
           <DetailRow label="Full command" value={proc.command} mono wrap />
@@ -267,31 +270,30 @@ function ProcessRow({
           {proc.threads !== undefined && <DetailRow label="Threads" value={String(proc.threads)} />}
           {proc.startTime && <DetailRow label="Started" value={proc.startTime} />}
           <DetailRow label="Managed by JRC" value={proc.managed ? 'Yes' : 'No'} />
+          <DetailRow
+            label="Protected"
+            value={proc.protected ? 'Yes — excluded from Kill All Java' : 'No'}
+          />
         </div>
       )}
     </div>
   );
 }
 
-function ExpandChevron({ expanded, onClick }: { expanded: boolean; onClick: () => void }) {
+function Badge({ label, accent, blue }: { label: string; accent?: boolean; blue?: boolean }) {
   return (
-    <button
-      onClick={onClick}
-      className="text-text-muted hover:text-text-primary transition-colors shrink-0"
+    <span
+      className={[
+        'px-1.5 py-0.5 rounded text-xs font-mono border',
+        accent
+          ? 'bg-accent/15 text-accent border-accent/30'
+          : blue
+            ? 'bg-blue-500/10 text-blue-400 border-blue-500/20'
+            : 'bg-surface-raised text-text-muted border-surface-border',
+      ].join(' ')}
     >
-      <svg
-        width="10"
-        height="10"
-        viewBox="0 0 10 10"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        className={['transition-transform', expanded ? 'rotate-90' : ''].join(' ')}
-      >
-        <polyline points="3,2 7,5 3,8" />
-      </svg>
-    </button>
+      {label}
+    </span>
   );
 }
 
@@ -321,12 +323,3 @@ function DetailRow({
     </div>
   );
 }
-
-function EmptyState({ icon, text }: { icon: React.ReactNode; text: string }) {
-  return (
-    <div className="flex flex-col items-center gap-3 py-12 text-text-muted">
-      {icon}
-      <p className="text-xs font-mono text-center max-w-xs leading-relaxed">{text}</p>
-    </div>
-  );
-}
diff --git a/src/renderer/components/utils/UtilitiesTab.tsx b/src/renderer/components/utils/UtilitiesTab.tsx
index d736c7b..9dec9ac 100644
--- a/src/renderer/components/utils/UtilitiesTab.tsx
+++ b/src/renderer/components/utils/UtilitiesTab.tsx
@@ -1,9 +1,8 @@
-import React, { useState, useCallback } from 'react';
-import { Dialog } from '../common/Dialog';
-import { Button } from '../common/Button';
-import { VscCheck, VscListUnordered } from 'react-icons/vsc';
+import React, { useState } from 'react';
+import { VscListUnordered } from 'react-icons/vsc';
 import { LuScanLine } from 'react-icons/lu';
-import { JavaProcessInfo, ProcessLogEntry } from '../../../main/shared/types/Process.types';
+import { ActivityLogPanel } from './ActivityLogPanel';
+import { ScannerPanel } from './ScannerPanel';
 
 type Panel = 'log' | 'scanner';
 
@@ -14,8 +13,9 @@ const PANELS = [
 
 export function UtilitiesTab() {
   const [panel, setPanel] = useState<Panel>('log');
+
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full min-h-0">
       <div className="flex items-center gap-0 px-4 border-b border-surface-border bg-base-900 shrink-0">
         {PANELS.map((p) => (
           <button
@@ -33,482 +33,11 @@ export function UtilitiesTab() {
           </button>
         ))}
       </div>
-      <div className="flex-1 overflow-hidden">
+
+      <div className="flex-1 min-h-0 overflow-hidden">
         {panel === 'log' && <ActivityLogPanel />}
         {panel === 'scanner' && <ScannerPanel />}
       </div>
     </div>
   );
 }
-
-// ── Activity Log ──────────────────────────────────────────────────────────────
-
-function ActivityLogPanel() {
-  const [entries, setEntries] = useState<ProcessLogEntry[] | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [confirmClear, setConfirmClear] = useState(false);
-
-  const load = useCallback(async () => {
-    setLoading(true);
-    setEntries(await window.api.getProcessLog());
-    setLoading(false);
-  }, []);
-
-  React.useEffect(() => {
-    load();
-  }, [load]);
-
-  return (
-    <>
-      <div className="flex flex-col h-full">
-        <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900/50 shrink-0">
-          <p className="text-xs text-text-muted flex-1">
-            All processes started by JRC this session
-          </p>
-          <Button variant="ghost" size="sm" onClick={load} loading={loading}>
-            Refresh
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => setConfirmClear(true)}
-            disabled={!entries || entries.length === 0}
-          >
-            Clear
-          </Button>
-        </div>
-        <div className="flex-1 overflow-y-auto px-4 py-3">
-          {loading && !entries && (
-            <p className="text-xs text-text-muted py-8 text-center font-mono">Loading...</p>
-          )}
-          {entries && entries.length === 0 && (
-            <EmptyState
-              icon={<VscListUnordered size={28} />}
-              text="No processes started yet this session"
-            />
-          )}
-          {entries && entries.length > 0 && (
-            <div className="space-y-2">
-              {entries.map((e) => (
-                <LogEntryRow key={e.id} entry={e} />
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-      <Dialog
-        open={confirmClear}
-        title="Clear activity log?"
-        message="All recorded process entries will be removed. Running processes are not affected."
-        confirmLabel="Clear"
-        danger
-        onConfirm={async () => {
-          await window.api.clearProcessLog();
-          setEntries([]);
-          setConfirmClear(false);
-        }}
-        onCancel={() => setConfirmClear(false)}
-      />
-    </>
-  );
-}
-
-function LogEntryRow({ entry }: { entry: ProcessLogEntry }) {
-  const duration = entry.stoppedAt ? formatDuration(entry.stoppedAt - entry.startedAt) : null;
-  const jarName = entry.jarPath.split(/[/\\]/).pop() ?? entry.jarPath;
-  return (
-    <div className="rounded-lg border border-surface-border bg-base-900 px-3 py-2.5">
-      <div className="flex items-start justify-between gap-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 flex-wrap mb-0.5">
-            <span className="text-sm font-medium text-text-primary">{entry.profileName}</span>
-            <code className="font-mono text-xs text-text-muted bg-surface-raised px-1.5 py-0.5 rounded">
-              PID {entry.pid}
-            </code>
-            {entry.stoppedAt ? (
-              <span className="text-xs text-text-muted">stopped</span>
-            ) : (
-              <span className="flex items-center gap-1 text-xs text-accent">
-                <span className="w-1.5 h-1.5 rounded-full bg-accent animate-pulse-dot" />
-                running
-              </span>
-            )}
-          </div>
-          <p className="text-xs text-text-muted font-mono truncate" title={entry.jarPath}>
-            {jarName}
-          </p>
-        </div>
-        <div className="text-right shrink-0 space-y-0.5">
-          <p className="text-xs text-text-muted font-mono">{formatTime(entry.startedAt)}</p>
-          {duration && <p className="text-xs text-text-muted/60 font-mono">{duration}</p>}
-          {entry.exitCode !== undefined && (
-            <p
-              className={[
-                'text-xs font-mono',
-                entry.exitCode === 0 ? 'text-accent' : 'text-console-error',
-              ].join(' ')}
-            >
-              exit {entry.exitCode}
-            </p>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ── Process Scanner ───────────────────────────────────────────────────────────
-
-interface KillIntent {
-  proc: JavaProcessInfo;
-  nonJava: boolean;
-}
-
-function ScannerPanel() {
-  const [results, setResults] = useState<JavaProcessInfo[] | null>(null);
-  const [scanning, setScanning] = useState(false);
-  const [killIntent, setKillIntent] = useState<KillIntent | null>(null);
-  const [killAllConfirm, setKillAllConfirm] = useState(false);
-  const [statusMsg, setStatusMsg] = useState<{ text: string; ok: boolean } | null>(null);
-  const [killedPids, setKilledPids] = useState<Set<number>>(new Set());
-  const [filter, setFilter] = useState<'all' | 'java'>('java');
-  const [search, setSearch] = useState('');
-  const [expandedPid, setExpandedPid] = useState<number | null>(null);
-
-  const scan = useCallback(async () => {
-    setScanning(true);
-    setStatusMsg(null);
-    setKilledPids(new Set());
-    setSearch('');
-    setExpandedPid(null);
-    const found = await window.api.scanAllProcesses();
-    setResults(found);
-    setScanning(false);
-    const javaCount = found.filter((p) => p.isJava).length;
-    setStatusMsg({ text: `Found ${found.length} processes - ${javaCount} java`, ok: true });
-  }, []);
-
-  const handleKill = async () => {
-    if (!killIntent) return;
-    const res = await window.api.killPid(killIntent.proc.pid);
-    if (res.ok) {
-      setKilledPids((prev) => new Set([...prev, killIntent.proc.pid]));
-      setStatusMsg({ text: `Killed PID ${killIntent.proc.pid}`, ok: true });
-    } else {
-      setStatusMsg({ text: `Failed to kill PID ${killIntent.proc.pid}: ${res.error}`, ok: false });
-    }
-    setKillIntent(null);
-  };
-
-  const handleKillAll = async () => {
-    const res = await window.api.killAllJava();
-    setStatusMsg({
-      text: `Killed ${res.killed} java process${res.killed === 1 ? '' : 'es'} (protected processes skipped)`,
-      ok: true,
-    });
-    setKillAllConfirm(false);
-    setTimeout(scan, 800);
-  };
-
-  const searchLower = search.trim().toLowerCase();
-  const visible = results
-    ? (filter === 'java' ? results.filter((r) => r.isJava) : results)
-        .filter((r) => !killedPids.has(r.pid))
-        .filter(
-          (r) =>
-            !searchLower ||
-            r.command.toLowerCase().includes(searchLower) ||
-            String(r.pid).includes(searchLower)
-        )
-    : null;
-
-  // Only killable (non-protected) java processes shown in the "Kill All" button
-  const killableJavaVisible = visible?.some((r) => r.isJava && !r.protected) ?? false;
-
-  return (
-    <div className="flex flex-col h-full">
-      <div className="flex items-center gap-2 px-4 py-2.5 border-b border-surface-border bg-base-900/50 shrink-0 flex-wrap gap-y-2">
-        <div className="flex items-center gap-1 bg-base-950 rounded-lg p-0.5 border border-surface-border">
-          {(['java', 'all'] as const).map((f) => (
-            <button
-              key={f}
-              onClick={() => setFilter(f)}
-              className={[
-                'px-2.5 py-1 text-xs rounded-md transition-colors font-mono',
-                filter === f
-                  ? 'bg-surface-raised text-text-primary'
-                  : 'text-text-muted hover:text-text-primary',
-              ].join(' ')}
-            >
-              {f === 'java' ? 'Java only' : 'All'}
-            </button>
-          ))}
-        </div>
-        {results !== null && (
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search PID or command..."
-            className="h-7 bg-base-950 border border-surface-border rounded-md px-2.5 text-xs font-mono
-              text-text-primary placeholder:text-text-muted focus:outline-none focus:border-accent/40 w-48"
-          />
-        )}
-        <div className="flex-1" />
-        {killableJavaVisible && (
-          <Button variant="danger" size="sm" onClick={() => setKillAllConfirm(true)}>
-            Kill All Java
-          </Button>
-        )}
-        <Button variant="primary" size="sm" onClick={scan} loading={scanning}>
-          {results === null ? 'Scan' : 'Re-scan'}
-        </Button>
-      </div>
-
-      {statusMsg && (
-        <div
-          className={[
-            'mx-4 mt-2 shrink-0 px-3 py-1.5 rounded-lg text-xs font-mono border animate-fade-in',
-            statusMsg.ok
-              ? 'bg-surface-raised border-surface-border text-text-secondary'
-              : 'bg-red-500/10 border-red-500/20 text-red-400',
-          ].join(' ')}
-        >
-          {statusMsg.text}
-        </div>
-      )}
-
-      <div className="flex-1 overflow-y-auto px-4 py-3">
-        {results === null && !scanning && (
-          <EmptyState
-            icon={<LuScanLine size={28} />}
-            text='Click "Scan" to list all running processes'
-          />
-        )}
-        {scanning && (
-          <p className="text-xs text-text-muted font-mono py-8 text-center animate-pulse">
-            Scanning all processes...
-          </p>
-        )}
-        {visible !== null && visible.length === 0 && !scanning && (
-          <EmptyState
-            icon={<VscCheck size={28} />}
-            text={filter === 'java' ? 'No java processes found' : 'No processes found'}
-          />
-        )}
-        {visible !== null && visible.length > 0 && (
-          <div className="space-y-1.5">
-            {visible.map((proc) => (
-              <ProcessRow
-                key={proc.pid}
-                proc={proc}
-                expanded={expandedPid === proc.pid}
-                onToggle={() => setExpandedPid(expandedPid === proc.pid ? null : proc.pid)}
-                onKill={() => setKillIntent({ proc, nonJava: !proc.isJava })}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-
-      <Dialog
-        open={!!killIntent}
-        title={
-          killIntent?.nonJava
-            ? 'Kill non-Java process?'
-            : killIntent?.proc.protected
-              ? 'Kill protected process?'
-              : `Kill PID ${killIntent?.proc.pid}?`
-        }
-        message={
-          killIntent?.proc.protected
-            ? `This process is marked as protected and was excluded from "Kill All Java".\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}\n\nAre you sure you want to forcefully terminate it?`
-            : killIntent?.nonJava
-              ? `Warning: this process does not appear to be Java.\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}\n\nForcefully terminating unknown processes can cause data loss.`
-              : `Forcefully terminate PID ${killIntent?.proc.pid}?\n\nCommand: ${(killIntent?.proc.command ?? '').slice(0, 120)}`
-        }
-        confirmLabel={
-          killIntent?.proc.protected
-            ? 'Kill anyway'
-            : killIntent?.nonJava
-              ? 'Kill anyway'
-              : 'Kill Process'
-        }
-        danger
-        onConfirm={handleKill}
-        onCancel={() => setKillIntent(null)}
-      />
-
-      <Dialog
-        open={killAllConfirm}
-        title="Kill all Java processes?"
-        message="This forcefully terminates every non-protected java process on this machine — including those not managed by JRC. Protected processes will be skipped. Running servers will lose unsaved data."
-        confirmLabel="Kill All"
-        danger
-        onConfirm={handleKillAll}
-        onCancel={() => setKillAllConfirm(false)}
-      />
-    </div>
-  );
-}
-
-function ProcessRow({
-  proc,
-  expanded,
-  onToggle,
-  onKill,
-}: {
-  proc: JavaProcessInfo;
-  expanded: boolean;
-  onToggle: () => void;
-  onKill: () => void;
-}) {
-  const isProtected = proc.protected;
-
-  return (
-    <div
-      className={[
-        'rounded-lg border transition-colors overflow-hidden',
-        isProtected
-          ? 'border-surface-border/50 bg-base-900/20 opacity-50'
-          : proc.isJava
-            ? 'border-accent/20 bg-accent/5'
-            : 'border-surface-border bg-base-900/40',
-      ].join(' ')}
-    >
-      <div className="flex items-center gap-2 px-3 py-2">
-        <button
-          onClick={onToggle}
-          className="text-text-muted hover:text-text-primary transition-colors shrink-0"
-        >
-          <svg
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            className={['transition-transform', expanded ? 'rotate-90' : ''].join(' ')}
-          >
-            <polyline points="3,2 7,5 3,8" />
-          </svg>
-        </button>
-
-        <div className="flex items-center gap-1 shrink-0">
-          {isProtected && (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-surface-raised text-text-muted border border-surface-border">
-              Protected
-            </span>
-          )}
-          {proc.managed && (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-accent/15 text-accent border border-accent/30">
-              Managed
-            </span>
-          )}
-          {proc.isJava ? (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-blue-500/10 text-blue-400 border border-blue-500/20">
-              Java
-            </span>
-          ) : (
-            <span className="px-1.5 py-0.5 rounded text-xs font-mono bg-surface-raised text-text-muted border border-surface-border">
-              Non-Java
-            </span>
-          )}
-        </div>
-
-        <code
-          className={[
-            'text-xs font-mono shrink-0 w-14',
-            proc.isJava && !isProtected ? 'text-accent' : 'text-text-muted',
-          ].join(' ')}
-        >
-          {proc.pid}
-        </code>
-
-        <span
-          className="text-xs font-mono text-text-secondary truncate flex-1 min-w-0"
-          title={proc.command}
-        >
-          {proc.jarName ?? proc.name ?? proc.command.slice(0, 60)}
-        </span>
-
-        {proc.memoryMB !== undefined && (
-          <span className="text-xs font-mono text-text-muted shrink-0">{proc.memoryMB} MB</span>
-        )}
-
-        <Button variant="danger" size="sm" onClick={onKill}>
-          Kill
-        </Button>
-      </div>
-
-      {expanded && (
-        <div className="px-10 pb-3 pt-1 border-t border-surface-border/50 space-y-1.5 animate-fade-in">
-          <DetailRow label="Full command" value={proc.command} mono wrap />
-          {proc.jarName && <DetailRow label="JAR" value={proc.jarName} />}
-          {proc.memoryMB !== undefined && (
-            <DetailRow label="Memory" value={`${proc.memoryMB} MB`} />
-          )}
-          {proc.threads !== undefined && <DetailRow label="Threads" value={String(proc.threads)} />}
-          {proc.startTime && <DetailRow label="Started" value={proc.startTime} />}
-          <DetailRow label="Managed by JRC" value={proc.managed ? 'Yes' : 'No'} />
-          <DetailRow
-            label="Protected"
-            value={proc.protected ? 'Yes - excluded from Kill All Java' : 'No'}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
-
-function DetailRow({
-  label,
-  value,
-  mono,
-  wrap,
-}: {
-  label: string;
-  value: string;
-  mono?: boolean;
-  wrap?: boolean;
-}) {
-  return (
-    <div className="flex gap-3 text-xs">
-      <span className="text-text-muted font-mono w-28 shrink-0">{label}</span>
-      <span
-        className={[
-          mono ? 'font-mono' : '',
-          wrap ? 'break-all' : 'truncate',
-          'text-text-secondary flex-1',
-        ].join(' ')}
-      >
-        {value}
-      </span>
-    </div>
-  );
-}
-
-function EmptyState({ icon, text }: { icon: React.ReactNode; text: string }) {
-  return (
-    <div className="flex flex-col items-center gap-3 py-12 text-text-muted">
-      {icon}
-      <p className="text-xs font-mono text-center max-w-xs leading-relaxed">{text}</p>
-    </div>
-  );
-}
-
-function formatTime(ts: number): string {
-  return new Date(ts).toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-}
-
-function formatDuration(ms: number): string {
-  const s = Math.floor(ms / 1000);
-  if (s < 60) return `${s}s`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
-  return `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`;
-}
diff --git a/src/renderer/hooks/useAutoScroll.ts b/src/renderer/hooks/useAutoScroll.ts
new file mode 100644
index 0000000..c772dd5
--- /dev/null
+++ b/src/renderer/hooks/useAutoScroll.ts
@@ -0,0 +1,27 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+
+export function useAutoScroll(deps: unknown[]) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setAutoScroll(el.scrollHeight - el.scrollTop - el.clientHeight < 40);
+  }, []);
+
+  useEffect(() => {
+    if (autoScroll) {
+      bottomRef.current?.scrollIntoView({ behavior: 'instant' });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [...deps, autoScroll]);
+
+  const scrollToBottom = useCallback(() => {
+    setAutoScroll(true);
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, []);
+
+  return { scrollRef, bottomRef, autoScroll, handleScroll, scrollToBottom };
+}
diff --git a/src/renderer/hooks/useDevMode.ts b/src/renderer/hooks/useDevMode.ts
index 62998c1..7392446 100644
--- a/src/renderer/hooks/useDevMode.ts
+++ b/src/renderer/hooks/useDevMode.ts
@@ -7,12 +7,10 @@ export function useDevMode(): boolean {
   useEffect(() => {
     let mounted = true;
 
-    // fetch initial value
     window.env.get().then((value) => {
       if (mounted) setEnabled(value.devMode);
     });
 
-    // subscribe to changes
     const handler = (value: JRCEnvironment) => {
       if (mounted) setEnabled(value.devMode);
     };
diff --git a/src/renderer/main.tsx b/src/renderer/main.tsx
index dfa8b77..a2f0a49 100644
--- a/src/renderer/main.tsx
+++ b/src/renderer/main.tsx
@@ -5,20 +5,20 @@ import './styles/globals.css';
 
 import { name, version } from '../../package.json';
 
-async function printVersionInfo() {
+function printVersionInfo() {
   console.log(
     `%cYou are running %c${name}%c v${version}%c.`,
     'color: gray;',
-    'color: magenta;', // name
-    'color: lightgreen;', // version
-    'color: gray;' // reset
+    'color: magenta;',
+    'color: lightgreen;',
+    'color: gray;'
   );
 }
 
-printVersionInfo().then(() => {
-  ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  );
-});
+printVersionInfo();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/src/renderer/store/AppStore.tsx b/src/renderer/store/AppStore.tsx
index ff12f55..79ce447 100644
--- a/src/renderer/store/AppStore.tsx
+++ b/src/renderer/store/AppStore.tsx
@@ -6,36 +6,43 @@ import React, {
   useCallback,
   type ReactNode,
 } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { AppSettings } from '../../main/shared/types/App.types';
 import { ConsoleLine, ProcessState } from '../../main/shared/types/Process.types';
 import { Profile } from '../../main/shared/types/Profile.types';
-import { v4 as uuidv4 } from 'uuid';
 
-const SS_KEY = (id: string) => `jrc:console:${id}`;
+// ─── Session log helpers ──────────────────────────────────────────────────────
+
+const ssKey = (id: string) => `jrc:console:${id}`;
+
 function loadLogs(id: string, max: number): ConsoleLine[] {
   try {
-    const r = sessionStorage.getItem(SS_KEY(id));
+    const r = sessionStorage.getItem(ssKey(id));
     return r ? (JSON.parse(r) as ConsoleLine[]).slice(-max) : [];
   } catch {
     return [];
   }
 }
+
 function saveLogs(id: string, lines: ConsoleLine[]): void {
   try {
-    sessionStorage.setItem(SS_KEY(id), JSON.stringify(lines));
+    sessionStorage.setItem(ssKey(id), JSON.stringify(lines));
   } catch {
     /* quota */
   }
 }
+
 function clearLogs(id: string): void {
   try {
-    sessionStorage.removeItem(SS_KEY(id));
+    sessionStorage.removeItem(ssKey(id));
   } catch {
     /* ignore */
   }
 }
 
-interface AppState {
+// ─── State ────────────────────────────────────────────────────────────────────
+
+export interface AppState {
   profiles: Profile[];
   activeProfileId: string;
   processStates: ProcessState[];
@@ -53,6 +60,8 @@ const INITIAL_STATE: AppState = {
   loading: true,
 };
 
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
 type Action =
   | { type: 'INIT'; profiles: Profile[]; settings: AppSettings; states: ProcessState[] }
   | { type: 'SET_PROFILES'; profiles: Profile[] }
@@ -100,6 +109,8 @@ function reducer(state: AppState, action: Action): AppState {
   }
 }
 
+// ─── Context ──────────────────────────────────────────────────────────────────
+
 interface AppContextValue {
   state: AppState;
   activeProfile: Profile | undefined;
@@ -118,6 +129,17 @@ interface AppContextValue {
 
 const AppContext = createContext<AppContextValue | null>(null);
 
+export const PROFILE_COLORS = [
+  '#4ade80',
+  '#60a5fa',
+  '#f472b6',
+  '#fb923c',
+  '#a78bfa',
+  '#34d399',
+  '#fbbf24',
+  '#f87171',
+];
+
 export function AppProvider({ children }: { children: ReactNode }) {
   const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
 
@@ -149,9 +171,7 @@ export function AppProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     if (!window.api) return;
-    return window.api.onConsoleClear((profileId) => {
-      dispatch({ type: 'CLEAR_LOG', profileId });
-    });
+    return window.api.onConsoleClear((profileId) => dispatch({ type: 'CLEAR_LOG', profileId }));
   }, []);
 
   useEffect(() => {
@@ -210,21 +230,26 @@ export function AppProvider({ children }: { children: ReactNode }) {
 
   const startProcess = useCallback((p: Profile) => window.api.startProcess(p), []);
   const stopProcess = useCallback((id: string) => window.api.stopProcess(id), []);
+
   const sendInput = useCallback(async (profileId: string, input: string) => {
     await window.api.sendInput(profileId, input);
   }, []);
+
   const clearConsole = useCallback(
     (profileId: string) => dispatch({ type: 'CLEAR_LOG', profileId }),
     []
   );
+
   const saveSettings = useCallback(async (s: AppSettings) => {
     await window.api.saveSettings(s);
     dispatch({ type: 'SET_SETTINGS', settings: s });
   }, []);
+
   const isRunning = useCallback(
     (profileId: string) => state.processStates.some((s) => s.profileId === profileId && s.running),
     [state.processStates]
   );
+
   const activeProfile = state.profiles.find((p) => p.id === state.activeProfileId);
 
   return (
@@ -255,14 +280,3 @@ export function useApp(): AppContextValue {
   if (!ctx) throw new Error('useApp must be used within AppProvider');
   return ctx;
 }
-
-export const PROFILE_COLORS = [
-  '#4ade80',
-  '#60a5fa',
-  '#f472b6',
-  '#fb923c',
-  '#a78bfa',
-  '#34d399',
-  '#fbbf24',
-  '#f87171',
-];
diff --git a/src/renderer/styles/globals.css b/src/renderer/styles/globals.css
index d782931..b8eef9d 100644
--- a/src/renderer/styles/globals.css
+++ b/src/renderer/styles/globals.css
@@ -1,11 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
+
 body {
   font-family:
     'Inter',
@@ -17,6 +19,7 @@ body {
   overflow: hidden;
   user-select: none;
 }
+
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
@@ -31,9 +34,11 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: #3a3d4a;
 }
+
 .select-text {
   user-select: text;
 }
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -47,6 +52,7 @@ body {
 .animate-fade-in {
   animation: fade-in 0.15s ease-out;
 }
+
 @keyframes pulse-dot {
   0%,
   100% {