diff --git a/public/fonts/NERD-FONTS-LICENSE.txt b/public/fonts/NERD-FONTS-LICENSE.txt
new file mode 100644
index 0000000..06eb073
--- /dev/null
+++ b/public/fonts/NERD-FONTS-LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Ryan L McIntyre
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/public/fonts/SymbolsNerdFontMono-Regular.woff2 b/public/fonts/SymbolsNerdFontMono-Regular.woff2
new file mode 100644
index 0000000..e92681b
Binary files /dev/null and b/public/fonts/SymbolsNerdFontMono-Regular.woff2 differ
diff --git a/src/index.css b/src/index.css
index c5711f9..5451c68 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: 'Symbols Nerd Font Mono';
+  src: url('/fonts/SymbolsNerdFontMono-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 @theme {
   --color-page: #0D0E10;
   --color-card: #141518;
@@ -39,6 +47,33 @@ html, body {
   overflow: hidden;
 }
 
+.scrollbar-ghost {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+
+.scrollbar-ghost::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-ghost::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar-ghost::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 6px;
+}
+
+.scrollbar-ghost:hover::-webkit-scrollbar-thumb,
+.scrollbar-ghost:hover {
+  scrollbar-color: rgba(200, 164, 52, 0.25) transparent;
+}
+
+.scrollbar-ghost:hover::-webkit-scrollbar-thumb {
+  background: rgba(200, 164, 52, 0.25);
+}
+
 /* Native <select> dropdown panels are OS/browser-rendered and ignore most
    component styling — without this, options render with a white background
    and near-white text, making them unreadable against this dark theme.
diff --git a/src/lib/terminalPrefs.ts b/src/lib/terminalPrefs.ts
index fa5f384..b9b6947 100644
--- a/src/lib/terminalPrefs.ts
+++ b/src/lib/terminalPrefs.ts
@@ -38,7 +38,7 @@ export interface TabState {
 const PREFS_KEY = 'archnest-terminal-prefs'
 
 export function defaultPrefs(): TerminalPrefs {
-  return { themeName: TERM_THEMES[0].name, fontSize: 13, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace' }
+  return { themeName: TERM_THEMES[0].name, fontSize: 13, fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace, "Symbols Nerd Font Mono"' }
 }
 
 export function loadPrefs(): TerminalPrefs {
diff --git a/src/pages/Containers.tsx b/src/pages/Containers.tsx
index 8a6f1e9..bef726f 100644
--- a/src/pages/Containers.tsx
+++ b/src/pages/Containers.tsx
@@ -305,7 +305,7 @@ export default function Containers() {
       </div>
 
       {/* Intra-page tab bar */}
-      <div className="flex items-center gap-1 border-b border-white/10">
+      <div className="flex items-end gap-1 border-b border-white/10">
         <TabButton label="Containers" active={activeTab === 'list'} onClick={() => setActiveTab('list')} />
         {detailTabs.map((t) => (
           <TabButton
@@ -331,14 +331,14 @@ export default function Containers() {
         <div style={cardBase} className="overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr style={{ color: TEXT_SECONDARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
-                <th className="px-3 py-2 text-left font-medium">Name</th>
-                <th className="px-3 py-2 text-left font-medium">Image</th>
-                <th className="px-3 py-2 text-left font-medium">State</th>
-                <th className="px-3 py-2 text-left font-medium">CPU</th>
-                <th className="px-3 py-2 text-left font-medium">Memory</th>
-                <th className="px-3 py-2 text-left font-medium">Ports</th>
-                <th className="px-3 py-2 text-right font-medium">Actions</th>
+              <tr style={{ color: TEXT_PRIMARY, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
+                <th className="px-3 py-3 text-center text-base font-bold">Name</th>
+                <th className="px-3 py-3 text-center text-base font-bold">Image</th>
+                <th className="px-3 py-3 text-center text-base font-bold">State</th>
+                <th className="px-3 py-3 text-center text-base font-bold">CPU</th>
+                <th className="px-3 py-3 text-center text-base font-bold">Memory</th>
+                <th className="px-3 py-3 text-center text-base font-bold">Ports</th>
+                <th className="px-3 py-3 text-center text-base font-bold">Actions</th>
               </tr>
             </thead>
             <tbody>
@@ -354,67 +354,67 @@ export default function Containers() {
                 const busy = busyId === c.id
                 return (
                   <tr key={c.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
-                    <td className="px-3 py-2">
+                    <td className="px-3 py-4 text-center text-[15px]">
                       <button
                         onClick={() => openDetail(c)}
-                        className="text-left hover:underline"
+                        className="hover:underline"
                         style={{ color: GOLD }}
                         title="View details"
                       >
                         {c.name}
                       </button>
                     </td>
-                    <td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
+                    <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
                       {c.image}
                     </td>
-                    <td className="px-3 py-2">
-                      <span className="flex items-center gap-1.5">
+                    <td className="px-3 py-4 text-center text-[15px]">
+                      <span className="flex items-center justify-center gap-1.5">
                         <span className="inline-block h-2 w-2 rounded-full" style={{ background: stateColor(c.state) }} />
                         <span style={{ color: TEXT_PRIMARY }}>{c.status}</span>
                       </span>
                     </td>
-                    <td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
+                    <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
                       {stats ? `${stats.cpuPercent.toFixed(1)}%` : '—'}
                     </td>
-                    <td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
+                    <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
                       {stats ? `${formatBytes(stats.memUsage)} / ${formatBytes(stats.memLimit)}` : '—'}
                     </td>
-                    <td className="px-3 py-2" style={{ color: TEXT_SECONDARY }}>
+                    <td className="px-3 py-4 text-center text-[15px]" style={{ color: TEXT_SECONDARY }}>
                       {c.ports || '—'}
                     </td>
-                    <td className="px-3 py-2">
-                      <div className="flex items-center justify-end gap-1.5">
+                    <td className="px-3 py-4 text-[15px]">
+                      <div className="flex items-center justify-center gap-2">
                         {canManage ? (
                           <>
                             {c.state === 'running' ? (
                               <>
                                 <button disabled={busy} onClick={() => runAction(c, 'pause')} title="Pause" style={{ color: TEXT_SECONDARY }}>
-                                  <Pause size={14} />
+                                  <Pause size={16} />
                                 </button>
                                 <button disabled={busy} onClick={() => runAction(c, 'restart')} title="Restart" style={{ color: TEXT_SECONDARY }}>
-                                  <RotateCw size={14} />
+                                  <RotateCw size={16} />
                                 </button>
                                 <button disabled={busy} onClick={() => runAction(c, 'stop')} title="Stop" style={{ color: TEXT_SECONDARY }}>
-                                  <Square size={14} />
+                                  <Square size={16} />
                                 </button>
                                 <button disabled={busy} onClick={() => setExecRow(c)} title="Exec terminal" style={{ color: GOLD }}>
-                                  <TerminalSquare size={14} />
+                                  <TerminalSquare size={16} />
                                 </button>
                               </>
                             ) : c.state === 'paused' ? (
                               <button disabled={busy} onClick={() => runAction(c, 'unpause')} title="Unpause" style={{ color: TEXT_SECONDARY }}>
-                                <PlayCircle size={14} />
+                                <PlayCircle size={16} />
                               </button>
                             ) : (
                               <button disabled={busy} onClick={() => runAction(c, 'start')} title="Start" style={{ color: TEXT_SECONDARY }}>
-                                <Play size={14} />
+                                <Play size={16} />
                               </button>
                             )}
                             <button disabled={busy} onClick={() => setLogsRow(c)} title="Logs" style={{ color: TEXT_SECONDARY }}>
-                              <ScrollText size={14} />
+                              <ScrollText size={16} />
                             </button>
                             <button disabled={busy} onClick={() => removeRow(c)} title="Remove" style={{ color: '#E74C3C' }}>
-                              <Trash2 size={14} />
+                              <Trash2 size={16} />
                             </button>
                           </>
                         ) : (
@@ -450,17 +450,20 @@ function TabButton({ label, active, onClick, onClose }: { label: string; active:
   return (
     <div
       onClick={onClick}
-      className="flex cursor-pointer items-center gap-2 rounded-t-md px-3 py-1.5 text-xs"
+      className="flex cursor-pointer items-center gap-2 rounded-t-md px-4 py-2 text-sm font-semibold"
       style={{
         color: active ? GOLD : TEXT_SECONDARY,
-        borderBottom: active ? `2px solid ${GOLD}` : '2px solid transparent',
+        backgroundColor: active ? 'rgba(200,164,52,0.12)' : 'rgba(255,255,255,0.02)',
+        border: active ? '1px solid rgba(200,164,52,0.35)' : '1px solid rgba(255,255,255,0.06)',
+        borderBottom: active ? '1px solid rgba(200,164,52,0.12)' : '1px solid rgba(255,255,255,0.06)',
+        marginBottom: '-1px',
         maxWidth: '200px',
       }}
     >
       <span className="truncate">{label}</span>
       {onClose && (
         <X
-          size={12}
+          size={13}
           onClick={(e) => {
             e.stopPropagation()
             onClose()
diff --git a/src/pages/Infrastructure.tsx b/src/pages/Infrastructure.tsx
index 3731f0a..3b4401f 100644
--- a/src/pages/Infrastructure.tsx
+++ b/src/pages/Infrastructure.tsx
@@ -246,7 +246,7 @@ export default function Infrastructure() {
             <div className="relative z-10 flex flex-1 flex-col">
               <h3 style={sectionTitle}>Node Status</h3>
               {resources && resources.length > 0 ? (
-                <div className="grid flex-1 grid-cols-4 content-start gap-3" style={{ overflowY: 'auto' }}>
+                <div className="scrollbar-ghost grid min-h-0 flex-1 grid-cols-5 content-start gap-2" style={{ overflowY: 'auto' }}>
                   {resources.map((node, i) => (
                     <div
                       key={i}
@@ -255,7 +255,7 @@ export default function Infrastructure() {
                         backgroundColor: 'rgba(10, 10, 12, 0.55)',
                         border: `1px solid ${nodeStatusColor[node.status]}33`,
                         borderRadius: '8px',
-                        padding: '10px 12px',
+                        padding: '8px 10px',
                         display: 'flex',
                         flexDirection: 'column',
                         gap: '6px',
diff --git a/src/pages/Terminal.tsx b/src/pages/Terminal.tsx
index a4948c7..46c0026 100644
--- a/src/pages/Terminal.tsx
+++ b/src/pages/Terminal.tsx
@@ -8,10 +8,15 @@ const GOLD = '#C8A434'
 const TEXT_SECONDARY = '#7A7D85'
 
 const FONT_SIZES = [11, 12, 13, 14, 15, 16]
+// "Symbols Nerd Font Mono" is appended as a glyph-only fallback to every option, so
+// distro icons / git branch / etc. from prompts like Starship render instead of
+// showing as boxes — it has no letterforms of its own, so it never overrides the
+// chosen base font for normal text.
+const NERD_FALLBACK = '"Symbols Nerd Font Mono"'
 const FONT_FAMILIES = [
-  { name: 'Monospace', value: 'ui-monospace, SFMono-Regular, Menlo, monospace' },
-  { name: 'Fira Code', value: '"Fira Code", ui-monospace, monospace' },
-  { name: 'JetBrains Mono', value: '"JetBrains Mono", ui-monospace, monospace' },
+  { name: 'Monospace', value: `ui-monospace, SFMono-Regular, Menlo, monospace, ${NERD_FALLBACK}` },
+  { name: 'Fira Code', value: `"Fira Code", ui-monospace, monospace, ${NERD_FALLBACK}` },
+  { name: 'JetBrains Mono', value: `"JetBrains Mono", ui-monospace, monospace, ${NERD_FALLBACK}` },
 ]
 
 export default function Terminal() {