diff --git a/web/package-lock.json b/web/package-lock.json
index 2b9e8dd..25905b8 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,6 +8,7 @@
       "name": "silo-web",
       "version": "0.0.0",
       "dependencies": {
+        "lucide-react": "^0.564.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.0.0"
@@ -1499,6 +1500,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.564.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.564.0.tgz",
+      "integrity": "sha512-JJ8GVTQqFwuliifD48U6+h7DXEHdkhJ/E87kksGByII3qHxtPciVb8T8woQONHBQgHVOl7rSMrrip3SeVNy7Fg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
diff --git a/web/package.json b/web/package.json
index b30bec5..ad2910d 100644
--- a/web/package.json
+++ b/web/package.json
@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.564.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0"
diff --git a/web/src/components/AppShell.tsx b/web/src/components/AppShell.tsx
index 92d291b..843bc68 100644
--- a/web/src/components/AppShell.tsx
+++ b/web/src/components/AppShell.tsx
@@ -113,9 +113,9 @@ export function AppShell() {
               onClick={toggleDensity}
               title={`Switch to ${density === "comfortable" ? "compact" : "comfortable"} view`}
               style={{
-                padding: "0.2rem 0.5rem",
-                fontSize: "0.7rem",
-                borderRadius: "0.3rem",
+                padding: "0.25rem 0.5rem",
+                fontSize: "var(--font-sm)",
+                borderRadius: "0.375rem",
                 cursor: "pointer",
                 border: "1px solid var(--ctp-surface1)",
                 background: "var(--ctp-surface0)",
@@ -130,7 +130,7 @@ export function AppShell() {
               onClick={logout}
               style={{
                 padding: "0.35rem 0.75rem",
-                fontSize: "0.8rem",
+                fontSize: "var(--font-table)",
                 borderRadius: "0.4rem",
                 cursor: "pointer",
                 border: "none",
diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
index 13e4e6c..1c53131 100644
--- a/web/src/components/ContextMenu.tsx
+++ b/web/src/components/ContextMenu.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
+import { Check } from "lucide-react";
 
 export interface ContextMenuItem {
   label: string;
@@ -24,76 +25,95 @@ export function ContextMenu({ x, y, items, onClose }: ContextMenuProps) {
       if (ref.current && !ref.current.contains(e.target as Node)) onClose();
     };
     const handleKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
+      if (e.key === "Escape") onClose();
     };
     const handleScroll = () => onClose();
 
-    document.addEventListener('mousedown', handleClick);
-    document.addEventListener('keydown', handleKey);
-    window.addEventListener('scroll', handleScroll, true);
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    window.addEventListener("scroll", handleScroll, true);
     return () => {
-      document.removeEventListener('mousedown', handleClick);
-      document.removeEventListener('keydown', handleKey);
-      window.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+      window.removeEventListener("scroll", handleScroll, true);
     };
   }, [onClose]);
 
   // Clamp position to viewport
   const style: React.CSSProperties = {
-    position: 'fixed',
+    position: "fixed",
     left: Math.min(x, window.innerWidth - 220),
     top: Math.min(y, window.innerHeight - items.length * 32 - 16),
     zIndex: 9999,
-    backgroundColor: 'var(--ctp-surface0)',
-    border: '1px solid var(--ctp-surface1)',
-    borderRadius: '0.5rem',
-    padding: '0.25rem 0',
+    backgroundColor: "var(--ctp-surface0)",
+    border: "1px solid var(--ctp-surface1)",
+    borderRadius: "0.5rem",
+    padding: "0.25rem 0",
     minWidth: 200,
-    boxShadow: '0 4px 12px rgba(0,0,0,0.4)',
+    boxShadow: "0 4px 12px rgba(0,0,0,0.4)",
   };
 
   return (
     <div ref={ref} style={style}>
       {items.map((item, i) =>
         item.divider ? (
-          <div key={i} style={{ borderTop: '1px solid var(--ctp-surface1)', margin: '0.25rem 0' }} />
+          <div
+            key={i}
+            style={{
+              borderTop: "1px solid var(--ctp-surface1)",
+              margin: "0.25rem 0",
+            }}
+          />
         ) : (
           <button
             key={i}
             onClick={() => {
               if (item.onToggle) item.onToggle();
-              else if (item.onClick) { item.onClick(); onClose(); }
+              else if (item.onClick) {
+                item.onClick();
+                onClose();
+              }
             }}
             disabled={item.disabled}
             style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '0.5rem',
-              width: '100%',
-              padding: '0.35rem 0.75rem',
-              background: 'none',
-              border: 'none',
-              color: item.disabled ? 'var(--ctp-overlay0)' : 'var(--ctp-text)',
-              fontSize: '0.85rem',
-              cursor: item.disabled ? 'default' : 'pointer',
-              textAlign: 'left',
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              width: "100%",
+              padding: "0.35rem 0.75rem",
+              background: "none",
+              border: "none",
+              color: item.disabled ? "var(--ctp-overlay0)" : "var(--ctp-text)",
+              fontSize: "var(--font-body)",
+              cursor: item.disabled ? "default" : "pointer",
+              textAlign: "left",
             }}
             onMouseEnter={(e) => {
-              if (!item.disabled) e.currentTarget.style.backgroundColor = 'var(--ctp-surface1)';
+              if (!item.disabled)
+                e.currentTarget.style.backgroundColor = "var(--ctp-surface1)";
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = 'transparent';
+              e.currentTarget.style.backgroundColor = "transparent";
             }}
           >
             {item.checked !== undefined && (
-              <span style={{
-                width: 16, height: 16, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
-                border: '1px solid var(--ctp-overlay0)', borderRadius: 3,
-                backgroundColor: item.checked ? 'var(--ctp-mauve)' : 'transparent',
-                color: item.checked ? 'var(--ctp-crust)' : 'transparent',
-                fontSize: '0.7rem', fontWeight: 700, flexShrink: 0,
-              }}>
-                {item.checked ? '✓' : ''}
+              <span
+                style={{
+                  width: 16,
+                  height: 16,
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  border: "1px solid var(--ctp-overlay0)",
+                  borderRadius: 3,
+                  backgroundColor: item.checked
+                    ? "var(--ctp-mauve)"
+                    : "transparent",
+                  color: item.checked ? "var(--ctp-crust)" : "transparent",
+                  flexShrink: 0,
+                }}
+              >
+                {item.checked ? <Check size={14} /> : ""}
               </span>
             )}
             {item.label}
diff --git a/web/src/components/TagInput.tsx b/web/src/components/TagInput.tsx
index 4519fc8..39b3322 100644
--- a/web/src/components/TagInput.tsx
+++ b/web/src/components/TagInput.tsx
@@ -1,4 +1,5 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from "react";
+import { X } from "lucide-react";
 
 export interface TagOption {
   id: string;
@@ -12,34 +13,45 @@ interface TagInputProps {
   searchFn: (query: string) => Promise<TagOption[]>;
 }
 
-export function TagInput({ value, onChange, placeholder, searchFn }: TagInputProps) {
-  const [query, setQuery] = useState('');
+export function TagInput({
+  value,
+  onChange,
+  placeholder,
+  searchFn,
+}: TagInputProps) {
+  const [query, setQuery] = useState("");
   const [results, setResults] = useState<TagOption[]>([]);
   const [open, setOpen] = useState(false);
   const [highlighted, setHighlighted] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const containerRef = useRef<HTMLDivElement>(null);
-  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | undefined>(
+    undefined,
+  );
 
   // Debounced search
   const search = useCallback(
     (q: string) => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (q.trim() === '') {
+      if (q.trim() === "") {
         // Show all results when input is empty but focused
         debounceRef.current = setTimeout(() => {
-          searchFn('').then((opts) => {
-            setResults(opts.filter((o) => !value.includes(o.id)));
-            setHighlighted(0);
-          }).catch(() => setResults([]));
+          searchFn("")
+            .then((opts) => {
+              setResults(opts.filter((o) => !value.includes(o.id)));
+              setHighlighted(0);
+            })
+            .catch(() => setResults([]));
         }, 100);
         return;
       }
       debounceRef.current = setTimeout(() => {
-        searchFn(q).then((opts) => {
-          setResults(opts.filter((o) => !value.includes(o.id)));
-          setHighlighted(0);
-        }).catch(() => setResults([]));
+        searchFn(q)
+          .then((opts) => {
+            setResults(opts.filter((o) => !value.includes(o.id)));
+            setHighlighted(0);
+          })
+          .catch(() => setResults([]));
       }, 200);
     },
     [searchFn, value],
@@ -53,17 +65,20 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
   // Close on click outside
   useEffect(() => {
     const handler = (e: MouseEvent) => {
-      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(e.target as Node)
+      ) {
         setOpen(false);
       }
     };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
   }, []);
 
   const select = (id: string) => {
     onChange([...value, id]);
-    setQuery('');
+    setQuery("");
     setOpen(false);
     inputRef.current?.focus();
   };
@@ -73,22 +88,22 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Backspace' && query === '' && value.length > 0) {
+    if (e.key === "Backspace" && query === "" && value.length > 0) {
       onChange(value.slice(0, -1));
       return;
     }
-    if (e.key === 'Escape') {
+    if (e.key === "Escape") {
       setOpen(false);
       return;
     }
     if (!open || results.length === 0) return;
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       setHighlighted((h) => (h + 1) % results.length);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       setHighlighted((h) => (h - 1 + results.length) % results.length);
-    } else if (e.key === 'Enter') {
+    } else if (e.key === "Enter") {
       e.preventDefault();
       if (results[highlighted]) select(results[highlighted].id);
     }
@@ -99,19 +114,19 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
   for (const r of results) labelMap.current.set(r.id, r.label);
 
   return (
-    <div ref={containerRef} style={{ position: 'relative' }}>
+    <div ref={containerRef} style={{ position: "relative" }}>
       <div
         style={{
-          display: 'flex',
-          flexWrap: 'wrap',
-          alignItems: 'center',
-          gap: '0.25rem',
-          padding: '0.25rem 0.5rem',
-          backgroundColor: 'var(--ctp-base)',
-          border: '1px solid var(--ctp-surface1)',
-          borderRadius: '0.3rem',
-          cursor: 'text',
-          minHeight: '1.8rem',
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          gap: "0.25rem",
+          padding: "0.25rem 0.5rem",
+          backgroundColor: "var(--ctp-base)",
+          border: "1px solid var(--ctp-surface1)",
+          borderRadius: "0.375rem",
+          cursor: "text",
+          minHeight: "1.8rem",
         }}
         onClick={() => inputRef.current?.focus()}
       >
@@ -119,14 +134,14 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
           <span
             key={id}
             style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: '0.25rem',
-              padding: '0.1rem 0.5rem',
-              borderRadius: '1rem',
-              backgroundColor: 'rgba(203,166,247,0.15)',
-              color: 'var(--ctp-mauve)',
-              fontSize: '0.75rem',
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.25rem",
+              padding: "0.15rem 0.5rem",
+              borderRadius: "1rem",
+              backgroundColor: "rgba(203,166,247,0.15)",
+              color: "var(--ctp-mauve)",
+              fontSize: "0.75rem",
             }}
           >
             {labelMap.current.get(id) ?? id}
@@ -137,16 +152,16 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
                 remove(id);
               }}
               style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                color: 'var(--ctp-mauve)',
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                color: "var(--ctp-mauve)",
                 padding: 0,
-                fontSize: '0.8rem',
                 lineHeight: 1,
+                display: "inline-flex",
               }}
             >
-              ×
+              <X size={14} />
             </button>
           </span>
         ))}
@@ -166,30 +181,30 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
           placeholder={value.length === 0 ? placeholder : undefined}
           style={{
             flex: 1,
-            minWidth: '4rem',
-            border: 'none',
-            outline: 'none',
-            background: 'transparent',
-            color: 'var(--ctp-text)',
-            fontSize: '0.85rem',
-            padding: '0.1rem 0',
+            minWidth: "4rem",
+            border: "none",
+            outline: "none",
+            background: "transparent",
+            color: "var(--ctp-text)",
+            fontSize: "var(--font-body)",
+            padding: "0.15rem 0",
           }}
         />
       </div>
       {open && results.length > 0 && (
         <div
           style={{
-            position: 'absolute',
-            top: '100%',
+            position: "absolute",
+            top: "100%",
             left: 0,
             right: 0,
             zIndex: 10,
-            marginTop: '0.2rem',
-            backgroundColor: 'var(--ctp-surface0)',
-            border: '1px solid var(--ctp-surface1)',
-            borderRadius: '0.3rem',
-            maxHeight: '160px',
-            overflowY: 'auto',
+            marginTop: "0.25rem",
+            backgroundColor: "var(--ctp-surface0)",
+            border: "1px solid var(--ctp-surface1)",
+            borderRadius: "0.375rem",
+            maxHeight: "160px",
+            overflowY: "auto",
           }}
         >
           {results.map((opt, i) => (
@@ -201,15 +216,15 @@ export function TagInput({ value, onChange, placeholder, searchFn }: TagInputPro
               }}
               onMouseEnter={() => setHighlighted(i)}
               style={{
-                padding: '0.25rem 0.5rem',
-                height: '28px',
-                display: 'flex',
-                alignItems: 'center',
-                fontSize: '0.8rem',
-                cursor: 'pointer',
-                color: 'var(--ctp-text)',
+                padding: "0.25rem 0.5rem",
+                height: "28px",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "var(--font-table)",
+                cursor: "pointer",
+                color: "var(--ctp-text)",
                 backgroundColor:
-                  i === highlighted ? 'var(--ctp-surface1)' : 'transparent',
+                  i === highlighted ? "var(--ctp-surface1)" : "transparent",
               }}
             >
               {opt.label}
diff --git a/web/src/components/audit/AuditDetailPanel.tsx b/web/src/components/audit/AuditDetailPanel.tsx
index ba5819a..6e013c6 100644
--- a/web/src/components/audit/AuditDetailPanel.tsx
+++ b/web/src/components/audit/AuditDetailPanel.tsx
@@ -210,7 +210,7 @@ export function AuditDetailPanel({
             fontFamily: "'JetBrains Mono', monospace",
             color: "var(--ctp-peach)",
             fontWeight: 600,
-            fontSize: "1rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {audit.part_number}
@@ -263,7 +263,7 @@ export function AuditDetailPanel({
           style={{
             padding: "0.5rem 1rem",
             color: "var(--ctp-red)",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
           }}
         >
           {error}
@@ -274,7 +274,7 @@ export function AuditDetailPanel({
       <div
         style={{
           padding: "0.5rem 1rem",
-          fontSize: "0.85rem",
+          fontSize: "var(--font-body)",
           color: "var(--ctp-subtext1)",
           borderBottom: "1px solid var(--ctp-surface0)",
           flexShrink: 0,
@@ -361,8 +361,8 @@ function FieldGroup({
     <div style={{ marginBottom: "0.75rem" }}>
       <div
         style={{
-          padding: "0.3rem 1rem",
-          fontSize: "0.7rem",
+          padding: "0.25rem 1rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -424,7 +424,7 @@ function FieldRow({
       style={{
         display: "flex",
         alignItems: "center",
-        padding: "0.3rem 1rem",
+        padding: "0.25rem 1rem",
         borderLeft: `3px solid ${borderColor}`,
         marginLeft: "0.5rem",
         gap: "0.5rem",
@@ -434,7 +434,7 @@ function FieldRow({
         style={{
           width: 140,
           flexShrink: 0,
-          fontSize: "0.78rem",
+          fontSize: "var(--font-table)",
           color: "var(--ctp-subtext1)",
         }}
         title={`Weight: ${field.weight}`}
@@ -445,7 +445,7 @@ function FieldRow({
             style={{
               marginLeft: 4,
               color: "var(--ctp-red)",
-              fontSize: "0.65rem",
+              fontSize: "var(--font-xs)",
             }}
           >
             *
@@ -456,7 +456,7 @@ function FieldRow({
         <div
           style={{
             flex: 1,
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: field.filled ? "var(--ctp-text)" : "var(--ctp-subtext0)",
             fontStyle: field.filled ? "normal" : "italic",
           }}
@@ -477,10 +477,10 @@ function FieldRow({
           placeholder="---"
           style={{
             flex: 1,
-            padding: "0.2rem 0.4rem",
-            fontSize: "0.8rem",
+            padding: "0.25rem 0.4rem",
+            fontSize: "var(--font-table)",
             border: "1px solid var(--ctp-surface1)",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             backgroundColor: "var(--ctp-surface0)",
             color: "var(--ctp-text)",
             outline: "none",
@@ -492,10 +492,10 @@ function FieldRow({
 }
 
 const closeBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
-  fontSize: "0.8rem",
+  padding: "0.25rem 0.5rem",
+  fontSize: "var(--font-table)",
   border: "none",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   backgroundColor: "var(--ctp-surface1)",
   color: "var(--ctp-subtext1)",
   cursor: "pointer",
diff --git a/web/src/components/audit/AuditSummaryBar.tsx b/web/src/components/audit/AuditSummaryBar.tsx
index 503037d..1aaa046 100644
--- a/web/src/components/audit/AuditSummaryBar.tsx
+++ b/web/src/components/audit/AuditSummaryBar.tsx
@@ -51,7 +51,7 @@ export function AuditSummaryBar({
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                fontSize: "0.7rem",
+                fontSize: "var(--font-sm)",
                 fontWeight: 600,
                 color: "var(--ctp-crust)",
                 transition: "all 0.15s ease",
@@ -71,7 +71,7 @@ export function AuditSummaryBar({
           display: "flex",
           gap: "1.5rem",
           marginTop: "0.4rem",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           color: "var(--ctp-subtext0)",
         }}
       >
diff --git a/web/src/components/audit/AuditTable.tsx b/web/src/components/audit/AuditTable.tsx
index c71e095..fe92e72 100644
--- a/web/src/components/audit/AuditTable.tsx
+++ b/web/src/components/audit/AuditTable.tsx
@@ -55,7 +55,7 @@ export function AuditTable({
         style={{
           width: "100%",
           borderCollapse: "collapse",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
         }}
       >
         <thead>
diff --git a/web/src/components/items/BOMTab.tsx b/web/src/components/items/BOMTab.tsx
index 0d1e64a..fc1090c 100644
--- a/web/src/components/items/BOMTab.tsx
+++ b/web/src/components/items/BOMTab.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from "react";
+import { Plus, Download } from "lucide-react";
 import { get, post, put, del } from "../../api/client";
 import type { BOMEntry } from "../../api/types";
 
@@ -117,11 +118,11 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
   };
 
   const inputStyle: React.CSSProperties = {
-    padding: "0.2rem 0.4rem",
-    fontSize: "0.8rem",
+    padding: "0.25rem 0.4rem",
+    fontSize: "var(--font-table)",
     backgroundColor: "var(--ctp-base)",
     border: "1px solid var(--ctp-surface1)",
-    borderRadius: "0.3rem",
+    borderRadius: "0.375rem",
     color: "var(--ctp-text)",
     width: "100%",
   };
@@ -225,7 +226,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
           marginBottom: "0.5rem",
         }}
       >
-        <span style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
+        <span
+          style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
+        >
           {entries.length} entries
         </span>
         <span style={{ flex: 1 }} />
@@ -233,9 +236,14 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
           onClick={() => {
             window.location.href = `/api/items/${encodeURIComponent(partNumber)}/bom/export.csv`;
           }}
-          style={toolBtnStyle}
+          style={{
+            ...toolBtnStyle,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.35rem",
+          }}
         >
-          Export CSV
+          <Download size={14} /> Export CSV
         </button>
         {isEditor && (
           <button
@@ -244,9 +252,14 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
               setEditIdx(null);
               setForm(emptyForm);
             }}
-            style={toolBtnStyle}
+            style={{
+              ...toolBtnStyle,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.35rem",
+            }}
           >
-            + Add
+            <Plus size={14} /> Add
           </button>
         )}
       </div>
@@ -254,9 +267,9 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
       {isEditor && assemblyCount > 0 && (
         <div
           style={{
-            padding: "0.35rem 0.6rem",
+            padding: "0.35rem 0.5rem",
             marginBottom: "0.5rem",
-            borderRadius: "0.3rem",
+            borderRadius: "0.375rem",
             backgroundColor: "rgba(148,226,213,0.1)",
             border: "1px solid rgba(148,226,213,0.3)",
             fontSize: "0.75rem",
@@ -274,7 +287,7 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
           style={{
             width: "100%",
             borderCollapse: "collapse",
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
           }}
         >
           <thead>
@@ -403,12 +416,12 @@ export function BOMTab({ partNumber, isEditor }: BOMTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: "0.3rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   textAlign: "left",
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.7rem",
+  fontSize: "var(--font-sm)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   whiteSpace: "nowrap",
@@ -438,12 +451,12 @@ const actionBtnStyle: React.CSSProperties = {
   cursor: "pointer",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.1rem 0.3rem",
+  padding: "0.15rem 0.25rem",
   borderRadius: "0.375rem",
 };
 
 const saveBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
@@ -455,9 +468,9 @@ const saveBtnStyle: React.CSSProperties = {
 };
 
 const sourceBadgeBase: React.CSSProperties = {
-  padding: "0.1rem 0.4rem",
+  padding: "0.15rem 0.4rem",
   borderRadius: "1rem",
-  fontSize: "0.7rem",
+  fontSize: "var(--font-sm)",
   fontWeight: 500,
 };
 
@@ -474,7 +487,7 @@ const manualBadge: React.CSSProperties = {
 };
 
 const cancelBtnStyle: React.CSSProperties = {
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
diff --git a/web/src/components/items/CategoryPicker.tsx b/web/src/components/items/CategoryPicker.tsx
index 4b64592..826021d 100644
--- a/web/src/components/items/CategoryPicker.tsx
+++ b/web/src/components/items/CategoryPicker.tsx
@@ -95,7 +95,7 @@ export function CategoryPicker({
                     }
                   }}
                   style={{
-                    padding: "0.2rem 0.5rem",
+                    padding: "0.25rem 0.5rem",
                     fontSize: "0.75rem",
                     fontWeight: 500,
                     border: "none",
@@ -134,7 +134,7 @@ export function CategoryPicker({
         style={{
           width: "100%",
           padding: "0.4rem 0.5rem",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           border: "none",
           borderBottom: "1px solid var(--ctp-surface1)",
           backgroundColor: "var(--ctp-mantle)",
@@ -152,7 +152,7 @@ export function CategoryPicker({
               padding: "0.75rem",
               textAlign: "center",
               color: "var(--ctp-subtext0)",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             Select a domain to see categories
@@ -163,7 +163,7 @@ export function CategoryPicker({
               padding: "0.75rem",
               textAlign: "center",
               color: "var(--ctp-subtext0)",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             No categories found
@@ -180,9 +180,9 @@ export function CategoryPicker({
                   display: "flex",
                   alignItems: "center",
                   gap: "0.5rem",
-                  padding: "0.3rem 0.5rem",
+                  padding: "0.25rem 0.5rem",
                   cursor: "pointer",
-                  fontSize: "0.8rem",
+                  fontSize: "var(--font-table)",
                   backgroundColor: isSelected
                     ? "rgba(203,166,247,0.12)"
                     : "transparent",
@@ -228,7 +228,7 @@ export function CategoryPicker({
       {value && categories[value] && (
         <div
           style={{
-            padding: "0.3rem 0.5rem",
+            padding: "0.25rem 0.5rem",
             fontSize: "0.75rem",
             color: "var(--ctp-subtext0)",
             borderTop: "1px solid var(--ctp-surface0)",
diff --git a/web/src/components/items/CreateItemPane.tsx b/web/src/components/items/CreateItemPane.tsx
index cac706f..7a8c008 100644
--- a/web/src/components/items/CreateItemPane.tsx
+++ b/web/src/components/items/CreateItemPane.tsx
@@ -263,7 +263,7 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
           style={{
             color: "var(--ctp-green)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           New Item
@@ -400,13 +400,19 @@ export function CreateItemPane({ onCreated, onCancel }: CreateItemPaneProps) {
                 />
               ) : thumbnailFile?.uploadStatus === "uploading" ? (
                 <span
-                  style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
+                  style={{
+                    fontSize: "var(--font-table)",
+                    color: "var(--ctp-subtext0)",
+                  }}
                 >
                   Uploading... {thumbnailFile.uploadProgress}%
                 </span>
               ) : (
                 <span
-                  style={{ fontSize: "0.8rem", color: "var(--ctp-subtext0)" }}
+                  style={{
+                    fontSize: "var(--font-table)",
+                    color: "var(--ctp-subtext0)",
+                  }}
                 >
                   Click to upload
                 </span>
@@ -571,7 +577,7 @@ function SectionHeader({ children }: { children: React.ReactNode }) {
     >
       <span
         style={{
-          fontSize: "0.7rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -608,7 +614,7 @@ function SidebarSection({
     >
       <div
         style={{
-          fontSize: "0.7rem",
+          fontSize: "var(--font-sm)",
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.05em",
@@ -629,7 +635,7 @@ function MetaRow({ label, value }: { label: string; value: string }) {
       style={{
         display: "flex",
         justifyContent: "space-between",
-        fontSize: "0.8rem",
+        fontSize: "var(--font-table)",
         padding: "0.15rem 0",
       }}
     >
@@ -647,13 +653,13 @@ function FormGroup({
   children: React.ReactNode;
 }) {
   return (
-    <div style={{ marginBottom: "0.6rem" }}>
+    <div style={{ marginBottom: "0.5rem" }}>
       <label
         style={{
           display: "block",
           fontSize: "0.75rem",
           color: "var(--ctp-subtext0)",
-          marginBottom: "0.2rem",
+          marginBottom: "0.25rem",
         }}
       >
         {label}
@@ -676,7 +682,7 @@ const headerStyle: React.CSSProperties = {
 };
 
 const actionBtnStyle: React.CSSProperties = {
-  padding: "0.3rem 0.75rem",
+  padding: "0.25rem 0.75rem",
   fontSize: "0.75rem",
   fontWeight: 500,
   border: "none",
@@ -692,17 +698,17 @@ const cancelBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
 
 const inputStyle: React.CSSProperties = {
   width: "100%",
   padding: "0.35rem 0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   color: "var(--ctp-text)",
   boxSizing: "border-box",
 };
@@ -717,7 +723,7 @@ const errorStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
   backgroundColor: "rgba(243,139,168,0.1)",
   padding: "0.5rem",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   marginBottom: "0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/components/items/DeleteItemPane.tsx b/web/src/components/items/DeleteItemPane.tsx
index 9b0026a..99e4711 100644
--- a/web/src/components/items/DeleteItemPane.tsx
+++ b/web/src/components/items/DeleteItemPane.tsx
@@ -45,7 +45,7 @@ export function DeleteItemPane({
           style={{
             color: "var(--ctp-red)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Delete Item
@@ -73,8 +73,8 @@ export function DeleteItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem 1rem",
-              borderRadius: "0.3rem",
-              fontSize: "0.85rem",
+              borderRadius: "0.375rem",
+              fontSize: "var(--font-body)",
               width: "100%",
               textAlign: "center",
             }}
@@ -86,7 +86,7 @@ export function DeleteItemPane({
         <div style={{ textAlign: "center" }}>
           <p
             style={{
-              fontSize: "0.9rem",
+              fontSize: "var(--font-body)",
               color: "var(--ctp-text)",
               marginBottom: "0.5rem",
             }}
@@ -97,7 +97,7 @@ export function DeleteItemPane({
             style={{
               fontFamily: "'JetBrains Mono', monospace",
               color: "var(--ctp-peach)",
-              fontSize: "1.1rem",
+              fontSize: "var(--font-title)",
               fontWeight: 600,
             }}
           >
@@ -108,7 +108,7 @@ export function DeleteItemPane({
         <p
           style={{
             color: "var(--ctp-subtext0)",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
             textAlign: "center",
             maxWidth: 300,
           }}
@@ -163,6 +163,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/EditItemPane.tsx b/web/src/components/items/EditItemPane.tsx
index 10ebdaa..5f6fa7e 100644
--- a/web/src/components/items/EditItemPane.tsx
+++ b/web/src/components/items/EditItemPane.tsx
@@ -79,7 +79,7 @@ export function EditItemPane({
           style={{
             color: "var(--ctp-blue)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Edit {partNumber}
@@ -89,7 +89,7 @@ export function EditItemPane({
           onClick={() => void handleSave()}
           disabled={saving}
           style={{
-            padding: "0.3rem 0.75rem",
+            padding: "0.25rem 0.75rem",
             fontSize: "0.75rem",
             fontWeight: 500,
             border: "none",
@@ -114,9 +114,9 @@ export function EditItemPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               marginBottom: "0.5rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {error}
@@ -190,13 +190,13 @@ function FormGroup({
   children: React.ReactNode;
 }) {
   return (
-    <div style={{ marginBottom: "0.6rem" }}>
+    <div style={{ marginBottom: "0.5rem" }}>
       <label
         style={{
           display: "block",
           fontSize: "0.75rem",
           color: "var(--ctp-subtext0)",
-          marginBottom: "0.2rem",
+          marginBottom: "0.25rem",
         }}
       >
         {label}
@@ -209,10 +209,10 @@ function FormGroup({
 const inputStyle: React.CSSProperties = {
   width: "100%",
   padding: "0.35rem 0.5rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   backgroundColor: "var(--ctp-base)",
   border: "1px solid var(--ctp-surface1)",
-  borderRadius: "0.3rem",
+  borderRadius: "0.375rem",
   color: "var(--ctp-text)",
 };
 
@@ -223,6 +223,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/FileDropZone.tsx b/web/src/components/items/FileDropZone.tsx
index c6585a1..a327796 100644
--- a/web/src/components/items/FileDropZone.tsx
+++ b/web/src/components/items/FileDropZone.tsx
@@ -76,7 +76,9 @@ export function FileDropZone({
           transition: "all 0.15s ease",
         }}
       >
-        <div style={{ fontSize: "0.85rem", color: "var(--ctp-subtext1)" }}>
+        <div
+          style={{ fontSize: "var(--font-body)", color: "var(--ctp-subtext1)" }}
+        >
           Drop files here or{" "}
           <span style={{ color: "var(--ctp-mauve)", fontWeight: 600 }}>
             browse
@@ -85,7 +87,7 @@ export function FileDropZone({
         {accept && (
           <div
             style={{
-              fontSize: "0.7rem",
+              fontSize: "var(--font-sm)",
               color: "var(--ctp-overlay0)",
               marginTop: "0.25rem",
             }}
@@ -141,8 +143,8 @@ function FileRow({
         display: "flex",
         alignItems: "center",
         gap: "0.5rem",
-        padding: "0.3rem 0.4rem",
-        borderRadius: "0.3rem",
+        padding: "0.25rem 0.4rem",
+        borderRadius: "0.375rem",
         position: "relative",
       }}
     >
@@ -151,13 +153,13 @@ function FileRow({
         style={{
           width: 28,
           height: 28,
-          borderRadius: "0.3rem",
+          borderRadius: "0.375rem",
           backgroundColor: color,
           opacity: 0.8,
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          fontSize: "0.6rem",
+          fontSize: "var(--font-xs)",
           fontWeight: 700,
           color: "var(--ctp-crust)",
           flexShrink: 0,
@@ -170,7 +172,7 @@ function FileRow({
       <div style={{ flex: 1, minWidth: 0 }}>
         <div
           style={{
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: "var(--ctp-text)",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -179,7 +181,9 @@ function FileRow({
         >
           {attachment.file.name}
         </div>
-        <div style={{ fontSize: "0.7rem", color: "var(--ctp-overlay0)" }}>
+        <div
+          style={{ fontSize: "var(--font-sm)", color: "var(--ctp-overlay0)" }}
+        >
           {formatSize(attachment.file.size)}
           {attachment.uploadStatus === "error" && (
             <span style={{ color: "var(--ctp-red)", marginLeft: "0.5rem" }}>
@@ -215,7 +219,7 @@ function FileRow({
       {attachment.uploadStatus === "complete" ? (
         <span
           style={{
-            fontSize: "0.7rem",
+            fontSize: "var(--font-sm)",
             color: "var(--ctp-green)",
             flexShrink: 0,
           }}
@@ -233,7 +237,7 @@ function FileRow({
           background: "none",
           border: "none",
           cursor: "pointer",
-          fontSize: "0.8rem",
+          fontSize: "var(--font-table)",
           color: hovered ? "var(--ctp-red)" : "var(--ctp-overlay0)",
           padding: "0 0.2rem",
           flexShrink: 0,
diff --git a/web/src/components/items/ImportItemsPane.tsx b/web/src/components/items/ImportItemsPane.tsx
index b55a42b..726509f 100644
--- a/web/src/components/items/ImportItemsPane.tsx
+++ b/web/src/components/items/ImportItemsPane.tsx
@@ -72,7 +72,7 @@ export function ImportItemsPane({
           style={{
             color: "var(--ctp-yellow)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Import Items (CSV)
@@ -90,9 +90,9 @@ export function ImportItemsPane({
               color: "var(--ctp-red)",
               backgroundColor: "rgba(243,139,168,0.1)",
               padding: "0.5rem",
-              borderRadius: "0.3rem",
+              borderRadius: "0.375rem",
               marginBottom: "0.5rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {error}
@@ -102,7 +102,7 @@ export function ImportItemsPane({
         {/* Instructions */}
         <div
           style={{
-            fontSize: "0.8rem",
+            fontSize: "var(--font-table)",
             color: "var(--ctp-subtext0)",
             marginBottom: "0.75rem",
           }}
@@ -120,7 +120,10 @@ export function ImportItemsPane({
           </p>
           <a
             href="/api/items/template.csv"
-            style={{ color: "var(--ctp-sapphire)", fontSize: "0.8rem" }}
+            style={{
+              color: "var(--ctp-sapphire)",
+              fontSize: "var(--font-table)",
+            }}
           >
             Download CSV template
           </a>
@@ -149,7 +152,7 @@ export function ImportItemsPane({
               color: "var(--ctp-subtext1)",
               cursor: "pointer",
               width: "100%",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {file ? file.name : "Choose CSV file..."}
@@ -162,7 +165,7 @@ export function ImportItemsPane({
             display: "flex",
             alignItems: "center",
             gap: "0.4rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
             color: "var(--ctp-subtext1)",
             marginBottom: "0.75rem",
           }}
@@ -225,7 +228,7 @@ export function ImportItemsPane({
               padding: "0.5rem",
               backgroundColor: "var(--ctp-surface0)",
               borderRadius: "0.4rem",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
             }}
           >
             <p>
@@ -259,7 +262,7 @@ export function ImportItemsPane({
                     style={{
                       color: "var(--ctp-red)",
                       fontSize: "0.75rem",
-                      padding: "0.1rem 0",
+                      padding: "0.15rem 0",
                     }}
                   >
                     Row {err.row}
@@ -293,6 +296,6 @@ const headerBtnStyle: React.CSSProperties = {
   color: "var(--ctp-subtext1)",
   fontSize: "0.75rem",
   fontWeight: 500,
-  padding: "0.2rem 0.4rem",
+  padding: "0.25rem 0.4rem",
   borderRadius: "0.375rem",
 };
diff --git a/web/src/components/items/ItemDetail.tsx b/web/src/components/items/ItemDetail.tsx
index f7fdf39..8c2d640 100644
--- a/web/src/components/items/ItemDetail.tsx
+++ b/web/src/components/items/ItemDetail.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { X } from "lucide-react";
 import { get } from "../../api/client";
 import type { Item } from "../../api/types";
 import { MainTab } from "./MainTab";
@@ -95,16 +96,16 @@ export function ItemDetail({
             fontFamily: "'JetBrains Mono', monospace",
             color: "var(--ctp-peach)",
             fontWeight: 600,
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {item.part_number}
         </span>
         <span
           style={{
-            padding: "0.1rem 0.5rem",
+            padding: "0.15rem 0.5rem",
             borderRadius: "1rem",
-            fontSize: "0.7rem",
+            fontSize: "var(--font-sm)",
             fontWeight: 500,
             backgroundColor: tc.bg,
             color: tc.color,
@@ -131,9 +132,13 @@ export function ItemDetail({
         )}
         <button
           onClick={onClose}
-          style={{ ...headerBtnStyle, fontSize: "1rem" }}
+          style={{
+            ...headerBtnStyle,
+            display: "inline-flex",
+            alignItems: "center",
+          }}
         >
-          ×
+          <X size={14} />
         </button>
       </div>
 
@@ -153,7 +158,7 @@ export function ItemDetail({
             onClick={() => setActiveTab(tab.key)}
             style={{
               padding: "0.4rem 0.75rem",
-              fontSize: "0.8rem",
+              fontSize: "var(--font-table)",
               border: "none",
               borderBottom:
                 activeTab === tab.key
@@ -199,6 +204,6 @@ const headerBtnStyle: React.CSSProperties = {
   border: "none",
   cursor: "pointer",
   color: "var(--ctp-subtext1)",
-  fontSize: "0.8rem",
-  padding: "0.2rem 0.4rem",
+  fontSize: "var(--font-table)",
+  padding: "0.25rem 0.4rem",
 };
diff --git a/web/src/components/items/ItemTable.tsx b/web/src/components/items/ItemTable.tsx
index 32b82fd..6caabbe 100644
--- a/web/src/components/items/ItemTable.tsx
+++ b/web/src/components/items/ItemTable.tsx
@@ -1,4 +1,5 @@
 import { useState, useCallback } from "react";
+import { ChevronUp, ChevronDown } from "lucide-react";
 import type { Item } from "../../api/types";
 import { ContextMenu, type ContextMenuItem } from "../ContextMenu";
 
@@ -191,8 +192,18 @@ export function ItemTable({
                 >
                   {col.label}
                   {sortKey === col.key && (
-                    <span style={{ marginLeft: 4 }}>
-                      {sortDir === "asc" ? "▲" : "▼"}
+                    <span
+                      style={{
+                        marginLeft: 4,
+                        display: "inline-flex",
+                        verticalAlign: "middle",
+                      }}
+                    >
+                      {sortDir === "asc" ? (
+                        <ChevronUp size={14} />
+                      ) : (
+                        <ChevronDown size={14} />
+                      )}
                     </span>
                   )}
                 </th>
@@ -257,7 +268,7 @@ export function ItemTable({
                           <td key={col.key} style={tdStyle}>
                             <span
                               style={{
-                                padding: "0.1rem 0.5rem",
+                                padding: "0.15rem 0.5rem",
                                 borderRadius: "1rem",
                                 fontSize: "0.75rem",
                                 fontWeight: 500,
diff --git a/web/src/components/items/ItemsToolbar.tsx b/web/src/components/items/ItemsToolbar.tsx
index fdfd238..2a97c2f 100644
--- a/web/src/components/items/ItemsToolbar.tsx
+++ b/web/src/components/items/ItemsToolbar.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { Columns2, Rows2, Plus, Download, Upload } from "lucide-react";
 import { get } from "../../api/client";
 import type { Project } from "../../api/types";
 import type { ItemFilters } from "../../hooks/useItems";
@@ -127,20 +128,42 @@ export function ItemsToolbar({
           onLayoutChange(layout === "horizontal" ? "vertical" : "horizontal")
         }
         title={`Switch to ${layout === "horizontal" ? "vertical" : "horizontal"} layout`}
-        style={toolBtnStyle}
+        style={{
+          ...toolBtnStyle,
+          display: "inline-flex",
+          alignItems: "center",
+        }}
       >
-        {layout === "horizontal" ? "⬌" : "⬍"}
+        {layout === "horizontal" ? <Columns2 size={14} /> : <Rows2 size={14} />}
       </button>
 
       {/* Export */}
-      <button onClick={onExport} style={toolBtnStyle} title="Export CSV">
-        Export
+      <button
+        onClick={onExport}
+        style={{
+          ...toolBtnStyle,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "0.35rem",
+        }}
+        title="Export CSV"
+      >
+        <Download size={14} /> Export
       </button>
 
       {/* Import (editor only) */}
       {isEditor && (
-        <button onClick={onImport} style={toolBtnStyle} title="Import CSV">
-          Import
+        <button
+          onClick={onImport}
+          style={{
+            ...toolBtnStyle,
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.35rem",
+          }}
+          title="Import CSV"
+        >
+          <Upload size={14} /> Import
         </button>
       )}
 
@@ -152,9 +175,12 @@ export function ItemsToolbar({
             ...toolBtnStyle,
             backgroundColor: "var(--ctp-mauve)",
             color: "var(--ctp-crust)",
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.35rem",
           }}
         >
-          + New
+          <Plus size={14} /> New
         </button>
       )}
     </div>
diff --git a/web/src/components/items/MainTab.tsx b/web/src/components/items/MainTab.tsx
index 52f43e1..57a6798 100644
--- a/web/src/components/items/MainTab.tsx
+++ b/web/src/components/items/MainTab.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { X } from "lucide-react";
 import { get, post, del } from "../../api/client";
 import type { Item, Project, Revision } from "../../api/types";
 
@@ -83,8 +84,8 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
       style={{
         display: "flex",
         gap: "1rem",
-        padding: "0.3rem 0",
-        fontSize: "0.85rem",
+        padding: "0.25rem 0",
+        fontSize: "var(--font-body)",
       }}
     >
       <span style={{ width: 120, flexShrink: 0, color: "var(--ctp-subtext0)" }}>
@@ -134,7 +135,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
             padding: "0.5rem",
             backgroundColor: "var(--ctp-surface0)",
             borderRadius: "0.4rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           <div
@@ -176,7 +177,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 display: "inline-flex",
                 alignItems: "center",
                 gap: "0.25rem",
-                padding: "0.1rem 0.5rem",
+                padding: "0.15rem 0.5rem",
                 borderRadius: "1rem",
                 backgroundColor: "rgba(203,166,247,0.15)",
                 color: "var(--ctp-mauve)",
@@ -192,11 +193,11 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                     border: "none",
                     color: "var(--ctp-overlay0)",
                     cursor: "pointer",
-                    fontSize: "0.8rem",
                     padding: 0,
+                    display: "inline-flex",
                   }}
                 >
-                  ×
+                  <X size={14} />
                 </button>
               )}
             </span>
@@ -207,11 +208,11 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 value={addProject}
                 onChange={(e) => setAddProject(e.target.value)}
                 style={{
-                  padding: "0.1rem 0.3rem",
+                  padding: "0.15rem 0.25rem",
                   fontSize: "0.75rem",
                   backgroundColor: "var(--ctp-surface0)",
                   border: "1px solid var(--ctp-surface1)",
-                  borderRadius: "0.3rem",
+                  borderRadius: "0.375rem",
                   color: "var(--ctp-text)",
                 }}
               >
@@ -228,12 +229,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 <button
                   onClick={() => void handleAddProject()}
                   style={{
-                    padding: "0.1rem 0.4rem",
-                    fontSize: "0.7rem",
+                    padding: "0.15rem 0.4rem",
+                    fontSize: "var(--font-sm)",
                     border: "none",
                     backgroundColor: "var(--ctp-mauve)",
                     color: "var(--ctp-crust)",
-                    borderRadius: "0.3rem",
+                    borderRadius: "0.375rem",
                     cursor: "pointer",
                   }}
                 >
@@ -269,7 +270,7 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
               display: "flex",
               alignItems: "center",
               gap: "0.75rem",
-              fontSize: "0.85rem",
+              fontSize: "var(--font-body)",
             }}
           >
             {latestRev.file_size != null && (
@@ -292,12 +293,12 @@ export function MainTab({ item, onReload, isEditor }: MainTabProps) {
                 window.location.href = `/api/items/${encodeURIComponent(item.part_number)}/file/${latestRev.revision_number}`;
               }}
               style={{
-                padding: "0.2rem 0.5rem",
-                fontSize: "0.8rem",
+                padding: "0.25rem 0.5rem",
+                fontSize: "var(--font-table)",
                 border: "none",
                 backgroundColor: "var(--ctp-surface1)",
                 color: "var(--ctp-text)",
-                borderRadius: "0.3rem",
+                borderRadius: "0.375rem",
                 cursor: "pointer",
               }}
             >
diff --git a/web/src/components/items/PropertiesTab.tsx b/web/src/components/items/PropertiesTab.tsx
index 47fda08..0b0bbb7 100644
--- a/web/src/components/items/PropertiesTab.tsx
+++ b/web/src/components/items/PropertiesTab.tsx
@@ -1,6 +1,7 @@
-import { useState } from 'react';
-import { post } from '../../api/client';
-import type { Item } from '../../api/types';
+import { useState } from "react";
+import { X, Plus } from "lucide-react";
+import { post } from "../../api/client";
+import type { Item } from "../../api/types";
 
 interface PropertiesTabProps {
   item: Item;
@@ -8,24 +9,24 @@ interface PropertiesTabProps {
   isEditor: boolean;
 }
 
-type Mode = 'form' | 'json';
+type Mode = "form" | "json";
 
 interface PropRow {
   key: string;
   value: string;
-  type: 'string' | 'number' | 'boolean';
+  type: "string" | "number" | "boolean";
 }
 
-function detectType(v: unknown): PropRow['type'] {
-  if (typeof v === 'number') return 'number';
-  if (typeof v === 'boolean') return 'boolean';
-  return 'string';
+function detectType(v: unknown): PropRow["type"] {
+  if (typeof v === "number") return "number";
+  if (typeof v === "boolean") return "boolean";
+  return "string";
 }
 
 function toRows(props: Record<string, unknown>): PropRow[] {
   return Object.entries(props).map(([key, value]) => ({
     key,
-    value: String(value ?? ''),
+    value: String(value ?? ""),
     type: detectType(value),
   }));
 }
@@ -35,17 +36,26 @@ function fromRows(rows: PropRow[]): Record<string, unknown> {
   for (const row of rows) {
     if (!row.key.trim()) continue;
     switch (row.type) {
-      case 'number': obj[row.key] = Number(row.value) || 0; break;
-      case 'boolean': obj[row.key] = row.value === 'true'; break;
-      default: obj[row.key] = row.value;
+      case "number":
+        obj[row.key] = Number(row.value) || 0;
+        break;
+      case "boolean":
+        obj[row.key] = row.value === "true";
+        break;
+      default:
+        obj[row.key] = row.value;
     }
   }
   return obj;
 }
 
-export function PropertiesTab({ item, onReload, isEditor }: PropertiesTabProps) {
+export function PropertiesTab({
+  item,
+  onReload,
+  isEditor,
+}: PropertiesTabProps) {
   const props = item.properties ?? {};
-  const [mode, setMode] = useState<Mode>('form');
+  const [mode, setMode] = useState<Mode>("form");
   const [rows, setRows] = useState<PropRow[]>(toRows(props));
   const [jsonText, setJsonText] = useState(JSON.stringify(props, null, 2));
   const [jsonError, setJsonError] = useState<string | null>(null);
@@ -62,18 +72,20 @@ export function PropertiesTab({ item, onReload, isEditor }: PropertiesTabProps)
       setRows(toRows(parsed));
       setJsonError(null);
     } catch (e) {
-      setJsonError(e instanceof Error ? e.message : 'Invalid JSON');
+      setJsonError(e instanceof Error ? e.message : "Invalid JSON");
     }
   };
 
   const switchMode = (m: Mode) => {
-    if (m === 'json') syncFormToJson();
+    if (m === "json") syncFormToJson();
     else syncJsonToForm();
     setMode(m);
   };
 
   const updateRow = (idx: number, field: keyof PropRow, value: string) => {
-    setRows((prev) => prev.map((r, i) => i === idx ? { ...r, [field]: value } : r));
+    setRows((prev) =>
+      prev.map((r, i) => (i === idx ? { ...r, [field]: value } : r)),
+    );
   };
 
   const removeRow = (idx: number) => {
@@ -81,72 +93,112 @@ export function PropertiesTab({ item, onReload, isEditor }: PropertiesTabProps)
   };
 
   const addRow = () => {
-    setRows((prev) => [...prev, { key: '', value: '', type: 'string' }]);
+    setRows((prev) => [...prev, { key: "", value: "", type: "string" }]);
   };
 
   const handleSave = async () => {
     let properties: Record<string, unknown>;
-    if (mode === 'json') {
+    if (mode === "json") {
       try {
         properties = JSON.parse(jsonText) as Record<string, unknown>;
       } catch {
-        setJsonError('Invalid JSON');
+        setJsonError("Invalid JSON");
         return;
       }
     } else {
       properties = fromRows(rows);
     }
 
-    const comment = prompt('Revision comment (optional):') ?? '';
+    const comment = prompt("Revision comment (optional):") ?? "";
     setSaving(true);
     try {
-      await post(`/api/items/${encodeURIComponent(item.part_number)}/revisions`, { properties, comment });
+      await post(
+        `/api/items/${encodeURIComponent(item.part_number)}/revisions`,
+        { properties, comment },
+      );
       onReload();
     } catch (e) {
-      alert(e instanceof Error ? e.message : 'Failed to save properties');
+      alert(e instanceof Error ? e.message : "Failed to save properties");
     } finally {
       setSaving(false);
     }
   };
 
   const inputStyle: React.CSSProperties = {
-    padding: '0.25rem 0.4rem', fontSize: '0.8rem',
-    backgroundColor: 'var(--ctp-base)', border: '1px solid var(--ctp-surface1)',
-    borderRadius: '0.3rem', color: 'var(--ctp-text)',
+    padding: "0.25rem 0.4rem",
+    fontSize: "var(--font-table)",
+    backgroundColor: "var(--ctp-base)",
+    border: "1px solid var(--ctp-surface1)",
+    borderRadius: "0.375rem",
+    color: "var(--ctp-text)",
   };
 
   return (
     <div>
       {/* Mode toggle */}
-      <div style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.5rem', alignItems: 'center' }}>
-        <button onClick={() => switchMode('form')} style={mode === 'form' ? activeTabBtn : tabBtn}>Form</button>
-        <button onClick={() => switchMode('json')} style={mode === 'json' ? activeTabBtn : tabBtn}>JSON</button>
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          marginBottom: "0.5rem",
+          alignItems: "center",
+        }}
+      >
+        <button
+          onClick={() => switchMode("form")}
+          style={mode === "form" ? activeTabBtn : tabBtn}
+        >
+          Form
+        </button>
+        <button
+          onClick={() => switchMode("json")}
+          style={mode === "json" ? activeTabBtn : tabBtn}
+        >
+          JSON
+        </button>
         <span style={{ flex: 1 }} />
         {isEditor && (
-          <button onClick={() => void handleSave()} disabled={saving} style={{
-            padding: '0.3rem 0.75rem', fontSize: '0.8rem', border: 'none', borderRadius: '0.3rem',
-            backgroundColor: 'var(--ctp-mauve)', color: 'var(--ctp-crust)', cursor: 'pointer',
-            opacity: saving ? 0.6 : 1,
-          }}>
-            {saving ? 'Saving...' : 'Save (New Revision)'}
+          <button
+            onClick={() => void handleSave()}
+            disabled={saving}
+            style={{
+              padding: "0.25rem 0.75rem",
+              fontSize: "var(--font-table)",
+              border: "none",
+              borderRadius: "0.375rem",
+              backgroundColor: "var(--ctp-mauve)",
+              color: "var(--ctp-crust)",
+              cursor: "pointer",
+              opacity: saving ? 0.6 : 1,
+            }}
+          >
+            {saving ? "Saving..." : "Save (New Revision)"}
           </button>
         )}
       </div>
 
-      {mode === 'form' ? (
+      {mode === "form" ? (
         <div>
           {rows.map((row, idx) => (
-            <div key={idx} style={{ display: 'flex', gap: '0.3rem', marginBottom: '0.25rem', alignItems: 'center' }}>
+            <div
+              key={idx}
+              style={{
+                display: "flex",
+                gap: "0.25rem",
+                marginBottom: "0.25rem",
+                alignItems: "center",
+              }}
+            >
               <input
                 value={row.key}
-                onChange={(e) => updateRow(idx, 'key', e.target.value)}
+                onChange={(e) => updateRow(idx, "key", e.target.value)}
                 placeholder="Key"
                 style={{ ...inputStyle, width: 140 }}
                 disabled={!isEditor}
               />
               <select
                 value={row.type}
-                onChange={(e) => updateRow(idx, 'type', e.target.value)}
+                onChange={(e) => updateRow(idx, "type", e.target.value)}
                 style={{ ...inputStyle, width: 80 }}
                 disabled={!isEditor}
               >
@@ -154,44 +206,90 @@ export function PropertiesTab({ item, onReload, isEditor }: PropertiesTabProps)
                 <option value="number">num</option>
                 <option value="boolean">bool</option>
               </select>
-              {row.type === 'boolean' ? (
-                <select value={row.value} onChange={(e) => updateRow(idx, 'value', e.target.value)} style={{ ...inputStyle, flex: 1 }} disabled={!isEditor}>
+              {row.type === "boolean" ? (
+                <select
+                  value={row.value}
+                  onChange={(e) => updateRow(idx, "value", e.target.value)}
+                  style={{ ...inputStyle, flex: 1 }}
+                  disabled={!isEditor}
+                >
                   <option value="true">true</option>
                   <option value="false">false</option>
                 </select>
               ) : (
                 <input
-                  type={row.type === 'number' ? 'number' : 'text'}
+                  type={row.type === "number" ? "number" : "text"}
                   value={row.value}
-                  onChange={(e) => updateRow(idx, 'value', e.target.value)}
+                  onChange={(e) => updateRow(idx, "value", e.target.value)}
                   placeholder="Value"
                   style={{ ...inputStyle, flex: 1 }}
                   disabled={!isEditor}
                 />
               )}
               {isEditor && (
-                <button onClick={() => removeRow(idx)} style={{ background: 'none', border: 'none', color: 'var(--ctp-red)', cursor: 'pointer', fontSize: '0.9rem' }}>×</button>
+                <button
+                  onClick={() => removeRow(idx)}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    color: "var(--ctp-red)",
+                    cursor: "pointer",
+                    display: "inline-flex",
+                  }}
+                >
+                  <X size={14} />
+                </button>
               )}
             </div>
           ))}
           {isEditor && (
-            <button onClick={addRow} style={{ ...tabBtn, marginTop: '0.25rem' }}>+ Add Property</button>
+            <button
+              onClick={addRow}
+              style={{
+                ...tabBtn,
+                marginTop: "0.25rem",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: "0.35rem",
+              }}
+            >
+              <Plus size={14} /> Add Property
+            </button>
           )}
         </div>
       ) : (
         <div>
           <textarea
             value={jsonText}
-            onChange={(e) => { setJsonText(e.target.value); setJsonError(null); }}
+            onChange={(e) => {
+              setJsonText(e.target.value);
+              setJsonError(null);
+            }}
             disabled={!isEditor}
             style={{
-              width: '100%', minHeight: 200, padding: '0.5rem',
-              fontFamily: "'JetBrains Mono', monospace", fontSize: '0.8rem',
-              backgroundColor: 'var(--ctp-base)', border: '1px solid var(--ctp-surface1)',
-              borderRadius: '0.4rem', color: 'var(--ctp-text)', resize: 'vertical',
+              width: "100%",
+              minHeight: 200,
+              padding: "0.5rem",
+              fontFamily: "'JetBrains Mono', monospace",
+              fontSize: "var(--font-table)",
+              backgroundColor: "var(--ctp-base)",
+              border: "1px solid var(--ctp-surface1)",
+              borderRadius: "0.4rem",
+              color: "var(--ctp-text)",
+              resize: "vertical",
             }}
           />
-          {jsonError && <div style={{ color: 'var(--ctp-red)', fontSize: '0.8rem', marginTop: '0.25rem' }}>{jsonError}</div>}
+          {jsonError && (
+            <div
+              style={{
+                color: "var(--ctp-red)",
+                fontSize: "var(--font-table)",
+                marginTop: "0.25rem",
+              }}
+            >
+              {jsonError}
+            </div>
+          )}
         </div>
       )}
     </div>
@@ -199,11 +297,17 @@ export function PropertiesTab({ item, onReload, isEditor }: PropertiesTabProps)
 }
 
 const tabBtn: React.CSSProperties = {
-  padding: '0.25rem 0.5rem', fontSize: '0.8rem', border: 'none', borderRadius: '0.3rem',
-  backgroundColor: 'var(--ctp-surface0)', color: 'var(--ctp-subtext1)', cursor: 'pointer',
+  padding: "0.25rem 0.5rem",
+  fontSize: "var(--font-table)",
+  border: "none",
+  borderRadius: "0.375rem",
+  backgroundColor: "var(--ctp-surface0)",
+  color: "var(--ctp-subtext1)",
+  cursor: "pointer",
 };
 
 const activeTabBtn: React.CSSProperties = {
   ...tabBtn,
-  backgroundColor: 'var(--ctp-surface1)', color: 'var(--ctp-mauve)',
+  backgroundColor: "var(--ctp-surface1)",
+  color: "var(--ctp-mauve)",
 };
diff --git a/web/src/components/items/RevisionsTab.tsx b/web/src/components/items/RevisionsTab.tsx
index dee302e..0d674cc 100644
--- a/web/src/components/items/RevisionsTab.tsx
+++ b/web/src/components/items/RevisionsTab.tsx
@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
-import { get, post } from '../../api/client';
-import type { Revision, RevisionComparison } from '../../api/types';
+import { useState, useEffect } from "react";
+import { Download } from "lucide-react";
+import { get, post } from "../../api/client";
+import type { Revision, RevisionComparison } from "../../api/types";
 
 interface RevisionsTabProps {
   partNumber: string;
@@ -8,28 +9,35 @@ interface RevisionsTabProps {
 }
 
 const statusColors: Record<string, string> = {
-  draft: 'var(--ctp-overlay1)',
-  review: 'var(--ctp-yellow)',
-  released: 'var(--ctp-green)',
-  obsolete: 'var(--ctp-red)',
+  draft: "var(--ctp-overlay1)",
+  review: "var(--ctp-yellow)",
+  released: "var(--ctp-green)",
+  obsolete: "var(--ctp-red)",
 };
 
 function formatDate(s: string) {
-  if (!s) return '';
-  return new Date(s).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+  if (!s) return "";
+  return new Date(s).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
 }
 
 export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
   const [revisions, setRevisions] = useState<Revision[]>([]);
   const [loading, setLoading] = useState(true);
-  const [compareFrom, setCompareFrom] = useState('');
-  const [compareTo, setCompareTo] = useState('');
+  const [compareFrom, setCompareFrom] = useState("");
+  const [compareTo, setCompareTo] = useState("");
   const [comparison, setComparison] = useState<RevisionComparison | null>(null);
 
   const load = () => {
     setLoading(true);
     get<Revision[]>(`/api/items/${encodeURIComponent(partNumber)}/revisions`)
-      .then((r) => { setRevisions(r); setLoading(false); })
+      .then((r) => {
+        setRevisions(r);
+        setLoading(false);
+      })
       .catch(() => setLoading(false));
   };
 
@@ -39,97 +47,177 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
     if (!compareFrom || !compareTo) return;
     try {
       const result = await get<RevisionComparison>(
-        `/api/items/${encodeURIComponent(partNumber)}/revisions/compare?from=${compareFrom}&to=${compareTo}`
+        `/api/items/${encodeURIComponent(partNumber)}/revisions/compare?from=${compareFrom}&to=${compareTo}`,
       );
       setComparison(result);
     } catch (e) {
-      alert(e instanceof Error ? e.message : 'Compare failed');
+      alert(e instanceof Error ? e.message : "Compare failed");
     }
   };
 
   const handleStatusChange = async (rev: number, status: string) => {
     try {
-      await fetch(`/api/items/${encodeURIComponent(partNumber)}/revisions/${rev}`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        credentials: 'include',
-        body: JSON.stringify({ status }),
-      });
+      await fetch(
+        `/api/items/${encodeURIComponent(partNumber)}/revisions/${rev}`,
+        {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ status }),
+        },
+      );
       load();
     } catch (e) {
-      alert(e instanceof Error ? e.message : 'Status update failed');
+      alert(e instanceof Error ? e.message : "Status update failed");
     }
   };
 
   const handleRollback = async (rev: number) => {
-    if (!confirm(`Rollback to revision ${rev}? This creates a new revision with data from rev ${rev}.`)) return;
-    const comment = prompt('Rollback comment:') ?? `Rollback to rev ${rev}`;
+    if (
+      !confirm(
+        `Rollback to revision ${rev}? This creates a new revision with data from rev ${rev}.`,
+      )
+    )
+      return;
+    const comment = prompt("Rollback comment:") ?? `Rollback to rev ${rev}`;
     try {
-      await post(`/api/items/${encodeURIComponent(partNumber)}/revisions/${rev}/rollback`, { comment });
+      await post(
+        `/api/items/${encodeURIComponent(partNumber)}/revisions/${rev}/rollback`,
+        { comment },
+      );
       load();
     } catch (e) {
-      alert(e instanceof Error ? e.message : 'Rollback failed');
+      alert(e instanceof Error ? e.message : "Rollback failed");
     }
   };
 
-  if (loading) return <div style={{ color: 'var(--ctp-subtext0)' }}>Loading revisions...</div>;
+  if (loading)
+    return (
+      <div style={{ color: "var(--ctp-subtext0)" }}>Loading revisions...</div>
+    );
 
   const selectStyle: React.CSSProperties = {
-    padding: '0.25rem 0.4rem', fontSize: '0.8rem',
-    backgroundColor: 'var(--ctp-surface0)', border: '1px solid var(--ctp-surface1)',
-    borderRadius: '0.3rem', color: 'var(--ctp-text)',
+    padding: "0.25rem 0.4rem",
+    fontSize: "var(--font-table)",
+    backgroundColor: "var(--ctp-surface0)",
+    border: "1px solid var(--ctp-surface1)",
+    borderRadius: "0.375rem",
+    color: "var(--ctp-text)",
   };
 
   return (
     <div>
       {/* Compare controls */}
-      <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center', marginBottom: '0.75rem' }}>
-        <select value={compareFrom} onChange={(e) => setCompareFrom(e.target.value)} style={selectStyle}>
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          alignItems: "center",
+          marginBottom: "0.75rem",
+        }}
+      >
+        <select
+          value={compareFrom}
+          onChange={(e) => setCompareFrom(e.target.value)}
+          style={selectStyle}
+        >
           <option value="">From rev...</option>
-          {revisions.map((r) => <option key={r.id} value={r.revision_number}>Rev {r.revision_number}</option>)}
+          {revisions.map((r) => (
+            <option key={r.id} value={r.revision_number}>
+              Rev {r.revision_number}
+            </option>
+          ))}
         </select>
-        <select value={compareTo} onChange={(e) => setCompareTo(e.target.value)} style={selectStyle}>
+        <select
+          value={compareTo}
+          onChange={(e) => setCompareTo(e.target.value)}
+          style={selectStyle}
+        >
           <option value="">To rev...</option>
-          {revisions.map((r) => <option key={r.id} value={r.revision_number}>Rev {r.revision_number}</option>)}
+          {revisions.map((r) => (
+            <option key={r.id} value={r.revision_number}>
+              Rev {r.revision_number}
+            </option>
+          ))}
         </select>
-        <button onClick={() => void handleCompare()} disabled={!compareFrom || !compareTo} style={{
-          padding: '0.25rem 0.5rem', fontSize: '0.8rem', border: 'none', borderRadius: '0.3rem',
-          backgroundColor: 'var(--ctp-mauve)', color: 'var(--ctp-crust)', cursor: 'pointer',
-          opacity: (!compareFrom || !compareTo) ? 0.5 : 1,
-        }}>
+        <button
+          onClick={() => void handleCompare()}
+          disabled={!compareFrom || !compareTo}
+          style={{
+            padding: "0.25rem 0.5rem",
+            fontSize: "var(--font-table)",
+            border: "none",
+            borderRadius: "0.375rem",
+            backgroundColor: "var(--ctp-mauve)",
+            color: "var(--ctp-crust)",
+            cursor: "pointer",
+            opacity: !compareFrom || !compareTo ? 0.5 : 1,
+          }}
+        >
           Compare
         </button>
       </div>
 
       {/* Compare results */}
       {comparison && (
-        <div style={{
-          padding: '0.5rem', backgroundColor: 'var(--ctp-surface0)', borderRadius: '0.4rem',
-          fontSize: '0.8rem', marginBottom: '0.75rem', fontFamily: "'JetBrains Mono', monospace",
-        }}>
+        <div
+          style={{
+            padding: "0.5rem",
+            backgroundColor: "var(--ctp-surface0)",
+            borderRadius: "0.4rem",
+            fontSize: "var(--font-table)",
+            marginBottom: "0.75rem",
+            fontFamily: "'JetBrains Mono', monospace",
+          }}
+        >
           {comparison.status_changed && (
-            <div>Status: <span style={{ color: 'var(--ctp-red)' }}>{comparison.status_changed.from}</span> → <span style={{ color: 'var(--ctp-green)' }}>{comparison.status_changed.to}</span></div>
+            <div>
+              Status:{" "}
+              <span style={{ color: "var(--ctp-red)" }}>
+                {comparison.status_changed.from}
+              </span>{" "}
+              →{" "}
+              <span style={{ color: "var(--ctp-green)" }}>
+                {comparison.status_changed.to}
+              </span>
+            </div>
+          )}
+          {comparison.file_changed && (
+            <div style={{ color: "var(--ctp-yellow)" }}>File changed</div>
           )}
-          {comparison.file_changed && <div style={{ color: 'var(--ctp-yellow)' }}>File changed</div>}
           {Object.entries(comparison.added).map(([k, v]) => (
-            <div key={k} style={{ color: 'var(--ctp-green)' }}>+ {k}: {String(v)}</div>
+            <div key={k} style={{ color: "var(--ctp-green)" }}>
+              + {k}: {String(v)}
+            </div>
           ))}
           {Object.entries(comparison.removed).map(([k, v]) => (
-            <div key={k} style={{ color: 'var(--ctp-red)' }}>- {k}: {String(v)}</div>
+            <div key={k} style={{ color: "var(--ctp-red)" }}>
+              - {k}: {String(v)}
+            </div>
           ))}
           {Object.entries(comparison.changed).map(([k, c]) => (
-            <div key={k} style={{ color: 'var(--ctp-yellow)' }}>~ {k}: {String(c.from)} → {String(c.to)}</div>
+            <div key={k} style={{ color: "var(--ctp-yellow)" }}>
+              ~ {k}: {String(c.from)} → {String(c.to)}
+            </div>
           ))}
-          {!comparison.status_changed && !comparison.file_changed &&
-           Object.keys(comparison.added).length === 0 && Object.keys(comparison.removed).length === 0 &&
-           Object.keys(comparison.changed).length === 0 && (
-            <div style={{ color: 'var(--ctp-subtext0)' }}>No differences</div>
-          )}
+          {!comparison.status_changed &&
+            !comparison.file_changed &&
+            Object.keys(comparison.added).length === 0 &&
+            Object.keys(comparison.removed).length === 0 &&
+            Object.keys(comparison.changed).length === 0 && (
+              <div style={{ color: "var(--ctp-subtext0)" }}>No differences</div>
+            )}
         </div>
       )}
 
       {/* Revisions table */}
-      <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
+      <table
+        style={{
+          width: "100%",
+          borderCollapse: "collapse",
+          fontSize: "var(--font-table)",
+        }}
+      >
         <thead>
           <tr>
             <th style={thStyle}>Rev</th>
@@ -143,17 +231,32 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
         </thead>
         <tbody>
           {revisions.map((rev, idx) => (
-            <tr key={rev.id} style={{ backgroundColor: idx % 2 === 0 ? 'var(--ctp-base)' : 'var(--ctp-surface0)' }}>
+            <tr
+              key={rev.id}
+              style={{
+                backgroundColor:
+                  idx % 2 === 0 ? "var(--ctp-base)" : "var(--ctp-surface0)",
+              }}
+            >
               <td style={tdStyle}>{rev.revision_number}</td>
               <td style={tdStyle}>
                 {isEditor ? (
                   <select
                     value={rev.status}
-                    onChange={(e) => void handleStatusChange(rev.revision_number, e.target.value)}
+                    onChange={(e) =>
+                      void handleStatusChange(
+                        rev.revision_number,
+                        e.target.value,
+                      )
+                    }
                     style={{
-                      padding: '0.1rem 0.3rem', fontSize: '0.75rem', border: 'none', borderRadius: '0.3rem',
-                      backgroundColor: 'transparent', color: statusColors[rev.status] ?? 'var(--ctp-text)',
-                      cursor: 'pointer',
+                      padding: "0.15rem 0.25rem",
+                      fontSize: "0.75rem",
+                      border: "none",
+                      borderRadius: "0.375rem",
+                      backgroundColor: "transparent",
+                      color: statusColors[rev.status] ?? "var(--ctp-text)",
+                      cursor: "pointer",
                     }}
                   >
                     <option value="draft">draft</option>
@@ -162,27 +265,58 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
                     <option value="obsolete">obsolete</option>
                   </select>
                 ) : (
-                  <span style={{ color: statusColors[rev.status] ?? 'var(--ctp-text)' }}>{rev.status}</span>
+                  <span
+                    style={{
+                      color: statusColors[rev.status] ?? "var(--ctp-text)",
+                    }}
+                  >
+                    {rev.status}
+                  </span>
                 )}
               </td>
               <td style={tdStyle}>{formatDate(rev.created_at)}</td>
-              <td style={tdStyle}>{rev.created_by ?? '—'}</td>
-              <td style={{ ...tdStyle, maxWidth: 150, overflow: 'hidden', textOverflow: 'ellipsis' }}>{rev.comment ?? ''}</td>
+              <td style={tdStyle}>{rev.created_by ?? "—"}</td>
+              <td
+                style={{
+                  ...tdStyle,
+                  maxWidth: 150,
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                }}
+              >
+                {rev.comment ?? ""}
+              </td>
               <td style={tdStyle}>
                 {rev.file_key ? (
                   <button
-                    onClick={() => { window.location.href = `/api/items/${encodeURIComponent(partNumber)}/file/${rev.revision_number}`; }}
-                    style={{ background: 'none', border: 'none', color: 'var(--ctp-sapphire)', cursor: 'pointer', fontSize: '0.8rem' }}
+                    onClick={() => {
+                      window.location.href = `/api/items/${encodeURIComponent(partNumber)}/file/${rev.revision_number}`;
+                    }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      color: "var(--ctp-sapphire)",
+                      cursor: "pointer",
+                      display: "inline-flex",
+                    }}
                   >
-                    ↓
+                    <Download size={14} />
                   </button>
-                ) : '—'}
+                ) : (
+                  "—"
+                )}
               </td>
               {isEditor && (
                 <td style={tdStyle}>
                   <button
                     onClick={() => void handleRollback(rev.revision_number)}
-                    style={{ background: 'none', border: 'none', color: 'var(--ctp-peach)', cursor: 'pointer', fontSize: '0.75rem' }}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      color: "var(--ctp-peach)",
+                      cursor: "pointer",
+                      fontSize: "0.75rem",
+                    }}
                     title="Rollback to this revision"
                   >
                     Rollback
@@ -198,10 +332,18 @@ export function RevisionsTab({ partNumber, isEditor }: RevisionsTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: '0.3rem 0.5rem', textAlign: 'left', borderBottom: '1px solid var(--ctp-surface1)',
-  color: 'var(--ctp-subtext1)', fontWeight: 600, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em',
+  padding: "0.25rem 0.5rem",
+  textAlign: "left",
+  borderBottom: "1px solid var(--ctp-surface1)",
+  color: "var(--ctp-subtext1)",
+  fontWeight: 600,
+  fontSize: "var(--font-sm)",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: '0.25rem 0.5rem', borderBottom: '1px solid var(--ctp-surface0)', whiteSpace: 'nowrap',
+  padding: "0.25rem 0.5rem",
+  borderBottom: "1px solid var(--ctp-surface0)",
+  whiteSpace: "nowrap",
 };
diff --git a/web/src/components/items/WhereUsedTab.tsx b/web/src/components/items/WhereUsedTab.tsx
index 7246545..07e8da4 100644
--- a/web/src/components/items/WhereUsedTab.tsx
+++ b/web/src/components/items/WhereUsedTab.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { get } from '../../api/client';
-import type { WhereUsedEntry } from '../../api/types';
+import { useState, useEffect } from "react";
+import { get } from "../../api/client";
+import type { WhereUsedEntry } from "../../api/types";
 
 interface WhereUsedTabProps {
   partNumber: string;
@@ -12,20 +12,35 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
 
   useEffect(() => {
     setLoading(true);
-    get<WhereUsedEntry[]>(`/api/items/${encodeURIComponent(partNumber)}/bom/where-used`)
+    get<WhereUsedEntry[]>(
+      `/api/items/${encodeURIComponent(partNumber)}/bom/where-used`,
+    )
       .then(setEntries)
       .catch(() => setEntries([]))
       .finally(() => setLoading(false));
   }, [partNumber]);
 
-  if (loading) return <div style={{ color: 'var(--ctp-subtext0)' }}>Loading where-used...</div>;
+  if (loading)
+    return (
+      <div style={{ color: "var(--ctp-subtext0)" }}>Loading where-used...</div>
+    );
 
   if (entries.length === 0) {
-    return <div style={{ color: 'var(--ctp-subtext0)', padding: '1rem' }}>Not used in any assemblies.</div>;
+    return (
+      <div style={{ color: "var(--ctp-subtext0)", padding: "1rem" }}>
+        Not used in any assemblies.
+      </div>
+    );
   }
 
   return (
-    <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
+    <table
+      style={{
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: "var(--font-table)",
+      }}
+    >
       <thead>
         <tr>
           <th style={thStyle}>Parent PN</th>
@@ -36,13 +51,25 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
       </thead>
       <tbody>
         {entries.map((e, idx) => (
-          <tr key={e.id} style={{ backgroundColor: idx % 2 === 0 ? 'var(--ctp-base)' : 'var(--ctp-surface0)' }}>
-            <td style={{ ...tdStyle, fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)' }}>
+          <tr
+            key={e.id}
+            style={{
+              backgroundColor:
+                idx % 2 === 0 ? "var(--ctp-base)" : "var(--ctp-surface0)",
+            }}
+          >
+            <td
+              style={{
+                ...tdStyle,
+                fontFamily: "'JetBrains Mono', monospace",
+                color: "var(--ctp-peach)",
+              }}
+            >
               {e.parent_part_number}
             </td>
             <td style={tdStyle}>{e.parent_description}</td>
             <td style={tdStyle}>{e.rel_type}</td>
-            <td style={tdStyle}>{e.quantity ?? '—'}</td>
+            <td style={tdStyle}>{e.quantity ?? "—"}</td>
           </tr>
         ))}
       </tbody>
@@ -51,10 +78,18 @@ export function WhereUsedTab({ partNumber }: WhereUsedTabProps) {
 }
 
 const thStyle: React.CSSProperties = {
-  padding: '0.3rem 0.5rem', textAlign: 'left', borderBottom: '1px solid var(--ctp-surface1)',
-  color: 'var(--ctp-subtext1)', fontWeight: 600, fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.05em',
+  padding: "0.25rem 0.5rem",
+  textAlign: "left",
+  borderBottom: "1px solid var(--ctp-surface1)",
+  color: "var(--ctp-subtext1)",
+  fontWeight: 600,
+  fontSize: "var(--font-sm)",
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: '0.25rem 0.5rem', borderBottom: '1px solid var(--ctp-surface0)', whiteSpace: 'nowrap',
+  padding: "0.25rem 0.5rem",
+  borderBottom: "1px solid var(--ctp-surface0)",
+  whiteSpace: "nowrap",
 };
diff --git a/web/src/pages/AuditPage.tsx b/web/src/pages/AuditPage.tsx
index dc70813..d36f237 100644
--- a/web/src/pages/AuditPage.tsx
+++ b/web/src/pages/AuditPage.tsx
@@ -57,7 +57,7 @@ export function AuditPage() {
           style={{
             color: "var(--ctp-red)",
             padding: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Error: {error}
diff --git a/web/src/pages/ItemsPage.tsx b/web/src/pages/ItemsPage.tsx
index 2c4a8da..26ffd35 100644
--- a/web/src/pages/ItemsPage.tsx
+++ b/web/src/pages/ItemsPage.tsx
@@ -179,7 +179,7 @@ export function ItemsPage() {
           style={{
             color: "var(--ctp-red)",
             padding: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           Error: {error}
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 33af26f..899756d 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -78,7 +78,7 @@ export function LoginPage() {
                 style={{
                   padding: "0 1rem",
                   color: "var(--ctp-overlay0)",
-                  fontSize: "0.85rem",
+                  fontSize: "var(--font-body)",
                 }}
               >
                 or
@@ -123,7 +123,7 @@ const titleStyle: React.CSSProperties = {
 const subtitleStyle: React.CSSProperties = {
   color: "var(--ctp-subtext0)",
   textAlign: "center",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   marginBottom: "2rem",
 };
 
@@ -134,7 +134,7 @@ const errorStyle: React.CSSProperties = {
   padding: "0.75rem 1rem",
   borderRadius: "0.5rem",
   marginBottom: "1rem",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const formGroupStyle: React.CSSProperties = {
@@ -146,7 +146,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.5rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -156,7 +156,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.5rem",
   color: "var(--ctp-text)",
-  fontSize: "1rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
diff --git a/web/src/pages/ProjectsPage.tsx b/web/src/pages/ProjectsPage.tsx
index a08d59c..b10e71e 100644
--- a/web/src/pages/ProjectsPage.tsx
+++ b/web/src/pages/ProjectsPage.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback, type FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
+import { Plus, ChevronUp, ChevronDown } from "lucide-react";
 import { get, post, put, del } from "../api/client";
 import { useAuth } from "../hooks/useAuth";
 import type {
@@ -180,7 +181,17 @@ export function ProjectsPage() {
   };
 
   const sortArrow = (key: typeof sortKey) =>
-    sortKey === key ? (sortAsc ? " \u25B2" : " \u25BC") : "";
+    sortKey === key ? (
+      <span
+        style={{
+          marginLeft: 4,
+          display: "inline-flex",
+          verticalAlign: "middle",
+        }}
+      >
+        {sortAsc ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+      </span>
+    ) : null;
 
   if (loading)
     return <p style={{ color: "var(--ctp-subtext0)" }}>Loading projects...</p>;
@@ -199,8 +210,16 @@ export function ProjectsPage() {
       >
         <h2>Projects ({projects.length})</h2>
         {isEditor && mode === "list" && (
-          <button onClick={openCreate} style={btnPrimaryStyle}>
-            + New Project
+          <button
+            onClick={openCreate}
+            style={{
+              ...btnPrimaryStyle,
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.35rem",
+            }}
+          >
+            <Plus size={14} /> New Project
           </button>
         )}
       </div>
@@ -319,7 +338,7 @@ export function ProjectsPage() {
               style={{
                 color: "var(--ctp-red)",
                 marginTop: "0.5rem",
-                fontSize: "0.85rem",
+                fontSize: "var(--font-body)",
               }}
             >
               This action cannot be undone.
@@ -478,7 +497,7 @@ const btnDangerStyle: React.CSSProperties = {
 };
 
 const btnSmallStyle: React.CSSProperties = {
-  padding: "0.3rem 0.6rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
@@ -501,7 +520,7 @@ const formHeaderStyle: React.CSSProperties = {
   alignItems: "center",
   padding: "0.5rem 1rem",
   color: "var(--ctp-crust)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const formCloseStyle: React.CSSProperties = {
@@ -521,7 +540,7 @@ const errorBannerStyle: React.CSSProperties = {
   padding: "0.5rem 0.75rem",
   borderRadius: "0.4rem",
   marginBottom: "0.75rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const fieldStyle: React.CSSProperties = {
@@ -533,7 +552,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.35rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -543,7 +562,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.4rem",
   color: "var(--ctp-text)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
@@ -560,7 +579,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
   cursor: "pointer",
@@ -570,5 +589,5 @@ const thStyle: React.CSSProperties = {
 const tdStyle: React.CSSProperties = {
   padding: "0.35rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/pages/SchemasPage.tsx b/web/src/pages/SchemasPage.tsx
index 6e72063..d9887ff 100644
--- a/web/src/pages/SchemasPage.tsx
+++ b/web/src/pages/SchemasPage.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState, type FormEvent } from "react";
+import { ChevronRight, ChevronDown, Plus } from "lucide-react";
 import { get, post, put, del } from "../api/client";
 import { useAuth } from "../hooks/useAuth";
 import type { Schema, SchemaSegment } from "../api/types";
@@ -282,10 +283,13 @@ function SchemaCard({
           color: "var(--ctp-sapphire)",
           userSelect: "none",
           marginTop: "1rem",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.25rem",
         }}
       >
-        {isExpanded ? "\u25BC" : "\u25B6"} View Segments (
-        {schema.segments.length})
+        {isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}{" "}
+        View Segments ({schema.segments.length})
       </div>
 
       {isExpanded &&
@@ -381,7 +385,7 @@ function SegmentBlock({
           style={{
             color: "var(--ctp-subtext0)",
             marginBottom: "0.5rem",
-            fontSize: "0.85rem",
+            fontSize: "var(--font-body)",
           }}
         >
           {segment.description}
@@ -415,7 +419,9 @@ function SegmentBlock({
                   return (
                     <tr key={code}>
                       <td style={tdStyle}>
-                        <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                        <code style={{ fontSize: "var(--font-body)" }}>
+                          {code}
+                        </code>
                       </td>
                       <td style={tdStyle}>
                         <form
@@ -479,13 +485,15 @@ function SegmentBlock({
                       style={{ backgroundColor: "rgba(243, 139, 168, 0.1)" }}
                     >
                       <td style={tdStyle}>
-                        <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                        <code style={{ fontSize: "var(--font-body)" }}>
+                          {code}
+                        </code>
                       </td>
                       <td style={tdStyle}>
                         <span
                           style={{
                             color: "var(--ctp-red)",
-                            fontSize: "0.85rem",
+                            fontSize: "var(--font-body)",
                           }}
                         >
                           Delete this value?
@@ -527,7 +535,9 @@ function SegmentBlock({
                 return (
                   <tr key={code}>
                     <td style={tdStyle}>
-                      <code style={{ fontSize: "0.85rem" }}>{code}</code>
+                      <code style={{ fontSize: "var(--font-body)" }}>
+                        {code}
+                      </code>
                     </td>
                     <td style={tdStyle}>{desc}</td>
                     {isEditor && (
@@ -642,9 +652,15 @@ function SegmentBlock({
         !(isThisSegment(editState) && editState!.mode === "add") && (
           <button
             onClick={() => onStartAdd(schemaName, segment.name)}
-            style={{ ...btnTinyPrimaryStyle, marginTop: "0.5rem" }}
+            style={{
+              ...btnTinyPrimaryStyle,
+              marginTop: "0.5rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.35rem",
+            }}
           >
-            + Add Value
+            <Plus size={14} /> Add Value
           </button>
         )}
     </div>
@@ -664,7 +680,7 @@ const codeStyle: React.CSSProperties = {
   background: "var(--ctp-surface1)",
   padding: "0.25rem 0.5rem",
   borderRadius: "0.25rem",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const segmentStyle: React.CSSProperties = {
@@ -696,19 +712,19 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
 
 const tdStyle: React.CSSProperties = {
-  padding: "0.3rem 0.75rem",
+  padding: "0.25rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const btnTinyStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
@@ -719,7 +735,7 @@ const btnTinyStyle: React.CSSProperties = {
 };
 
 const btnTinyPrimaryStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-mauve)",
@@ -735,7 +751,7 @@ const inlineInputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.25rem",
   color: "var(--ctp-text)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   width: "100%",
   boxSizing: "border-box",
 };
diff --git a/web/src/pages/SettingsPage.tsx b/web/src/pages/SettingsPage.tsx
index 46d3331..1258d99 100644
--- a/web/src/pages/SettingsPage.tsx
+++ b/web/src/pages/SettingsPage.tsx
@@ -116,7 +116,7 @@ export function SettingsPage() {
                   display: "inline-block",
                   padding: "0.15rem 0.5rem",
                   borderRadius: "1rem",
-                  fontSize: "0.8rem",
+                  fontSize: "var(--font-table)",
                   fontWeight: 600,
                   ...roleBadgeStyles[user.role],
                 }}
@@ -137,7 +137,7 @@ export function SettingsPage() {
           style={{
             color: "var(--ctp-subtext0)",
             marginBottom: "1.25rem",
-            fontSize: "0.9rem",
+            fontSize: "var(--font-body)",
           }}
         >
           API tokens allow the FreeCAD plugin and scripts to authenticate with
@@ -175,7 +175,7 @@ export function SettingsPage() {
             <p
               style={{
                 color: "var(--ctp-subtext0)",
-                fontSize: "0.85rem",
+                fontSize: "var(--font-body)",
                 marginTop: "0.5rem",
               }}
             >
@@ -212,7 +212,7 @@ export function SettingsPage() {
         {tokensLoading ? (
           <p style={mutedStyle}>Loading tokens...</p>
         ) : tokensError ? (
-          <p style={{ color: "var(--ctp-red)", fontSize: "0.85rem" }}>
+          <p style={{ color: "var(--ctp-red)", fontSize: "var(--font-body)" }}>
             {tokensError}
           </p>
         ) : (
@@ -332,7 +332,7 @@ const cardStyle: React.CSSProperties = {
 
 const cardTitleStyle: React.CSSProperties = {
   marginBottom: "1rem",
-  fontSize: "1.1rem",
+  fontSize: "var(--font-title)",
 };
 
 const dlStyle: React.CSSProperties = {
@@ -344,12 +344,12 @@ const dlStyle: React.CSSProperties = {
 const dtStyle: React.CSSProperties = {
   color: "var(--ctp-subtext0)",
   fontWeight: 500,
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const ddStyle: React.CSSProperties = {
   margin: 0,
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
 };
 
 const mutedStyle: React.CSSProperties = {
@@ -371,7 +371,7 @@ const tokenDisplayStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.5rem",
   fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   color: "var(--ctp-peach)",
   wordBreak: "break-all",
 };
@@ -389,7 +389,7 @@ const labelStyle: React.CSSProperties = {
   marginBottom: "0.35rem",
   fontWeight: 500,
   color: "var(--ctp-subtext1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
 
 const inputStyle: React.CSSProperties = {
@@ -399,7 +399,7 @@ const inputStyle: React.CSSProperties = {
   border: "1px solid var(--ctp-surface1)",
   borderRadius: "0.4rem",
   color: "var(--ctp-text)",
-  fontSize: "0.9rem",
+  fontSize: "var(--font-body)",
   boxSizing: "border-box",
 };
 
@@ -441,7 +441,7 @@ const btnDangerStyle: React.CSSProperties = {
   background: "rgba(243, 139, 168, 0.15)",
   color: "var(--ctp-red)",
   border: "none",
-  padding: "0.3rem 0.6rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -452,7 +452,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
   background: "var(--ctp-red)",
   color: "var(--ctp-crust)",
   border: "none",
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   cursor: "pointer",
   fontSize: "0.75rem",
@@ -460,7 +460,7 @@ const btnRevokeConfirmStyle: React.CSSProperties = {
 };
 
 const btnTinyStyle: React.CSSProperties = {
-  padding: "0.2rem 0.5rem",
+  padding: "0.25rem 0.5rem",
   borderRadius: "0.375rem",
   border: "none",
   backgroundColor: "var(--ctp-surface1)",
@@ -472,7 +472,7 @@ const btnTinyStyle: React.CSSProperties = {
 
 const errorStyle: React.CSSProperties = {
   color: "var(--ctp-red)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
   marginTop: "0.25rem",
 };
 
@@ -482,7 +482,7 @@ const thStyle: React.CSSProperties = {
   borderBottom: "1px solid var(--ctp-surface1)",
   color: "var(--ctp-overlay1)",
   fontWeight: 600,
-  fontSize: "0.8rem",
+  fontSize: "var(--font-table)",
   textTransform: "uppercase",
   letterSpacing: "0.05em",
 };
@@ -490,5 +490,5 @@ const thStyle: React.CSSProperties = {
 const tdStyle: React.CSSProperties = {
   padding: "0.4rem 0.75rem",
   borderBottom: "1px solid var(--ctp-surface1)",
-  fontSize: "0.85rem",
+  fontSize: "var(--font-body)",
 };
diff --git a/web/src/styles/theme.css b/web/src/styles/theme.css
index 7b209fc..df4cb00 100644
--- a/web/src/styles/theme.css
+++ b/web/src/styles/theme.css
@@ -28,6 +28,15 @@
     --ctp-crust: #11111b;
 }
 
+/* ── Font scale ── */
+:root {
+    --font-title: 1.1rem; /* page titles */
+    --font-body: 0.8125rem; /* 13px — body text, breadcrumbs */
+    --font-table: 0.75rem; /* 12px — table cells, inputs, buttons */
+    --font-sm: 0.6875rem; /* 11px — section headers, labels, captions */
+    --font-xs: 0.625rem; /* 10px — badges (minimum) */
+}
+
 /* ── Density: comfortable (default) ── */
 [data-density="comfortable"],
 :root {
@@ -39,24 +48,24 @@
     --d-nav-px: 0.75rem;
     --d-nav-radius: 0.4rem;
     --d-user-gap: 0.6rem;
-    --d-user-font: 0.85rem;
+    --d-user-font: var(--font-body);
 
     --d-th-py: 0.35rem;
     --d-th-px: 0.75rem;
-    --d-th-font: 0.75rem;
+    --d-th-font: var(--font-table);
     --d-td-py: 0.25rem;
     --d-td-px: 0.75rem;
-    --d-td-font: 0.85rem;
+    --d-td-font: var(--font-body);
 
     --d-toolbar-gap: 0.5rem;
     --d-toolbar-py: 0.5rem;
     --d-toolbar-mb: 0.35rem;
     --d-input-py: 0.35rem;
     --d-input-px: 0.6rem;
-    --d-input-font: 0.85rem;
+    --d-input-font: var(--font-body);
 
     --d-footer-h: 28px;
-    --d-footer-font: 0.75rem;
+    --d-footer-font: var(--font-table);
     --d-footer-px: 2rem;
 }
 
@@ -70,23 +79,23 @@
     --d-nav-px: 0.5rem;
     --d-nav-radius: 0.3rem;
     --d-user-gap: 0.35rem;
-    --d-user-font: 0.8rem;
+    --d-user-font: var(--font-table);
 
     --d-th-py: 0.2rem;
     --d-th-px: 0.5rem;
-    --d-th-font: 0.7rem;
+    --d-th-font: var(--font-sm);
     --d-td-py: 0.125rem;
     --d-td-px: 0.5rem;
-    --d-td-font: 0.8rem;
+    --d-td-font: var(--font-table);
 
     --d-toolbar-gap: 0.35rem;
     --d-toolbar-py: 0.25rem;
     --d-toolbar-mb: 0.15rem;
     --d-input-py: 0.2rem;
     --d-input-px: 0.4rem;
-    --d-input-font: 0.8rem;
+    --d-input-font: var(--font-table);
 
     --d-footer-h: 24px;
-    --d-footer-font: 0.7rem;
+    --d-footer-font: var(--font-sm);
     --d-footer-px: 1.25rem;
 }