diff --git a/docker-compose.yml b/docker-compose.yml
index abe878f..d790233 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -39,7 +39,7 @@ services:
       context: ./frontend
       dockerfile: Dockerfile
     ports:
-      - "4321:4321"
+      - "4322:4321"
     environment:
       - PUBLIC_API_URL=http://backend:3000
     depends_on:
diff --git a/frontend/src/components/react/admin/Editor.tsx b/frontend/src/components/react/admin/Editor.tsx
index 50b8b21..70feae0 100644
--- a/frontend/src/components/react/admin/Editor.tsx
+++ b/frontend/src/components/react/admin/Editor.tsx
@@ -317,74 +317,74 @@ export default function Editor({ editSlug }: Props) {
         {/* Title + Date */}
         <div className="grid grid-cols-1 md:grid-cols-[1fr_180px] gap-4">
           <div>
-            <label className="block text-sm font-medium text-subtext1 mb-2">Title</label>
+            <label className="field-label">Title</label>
             <input
               type="text"
               value={title}
               onChange={e => setTitle(e.target.value)}
               required
               placeholder="Untitled (charcoal on paper)"
-              className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+              className="field-input"
             />
           </div>
           <div>
-            <label className="block text-sm font-medium text-subtext1 mb-2">Date</label>
+            <label className="field-label">Date</label>
             <input
               type="date"
               value={date}
               onChange={e => setDate(e.target.value)}
-              className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
+              className="field-input font-mono"
             />
           </div>
         </div>
 
         {/* Slug */}
         <div>
-          <label className="block text-sm font-medium text-subtext1 mb-2">
-            Slug <span className="text-overlay0 font-normal">(URL identifier — auto-derived from title)</span>
+          <label className="field-label">
+            Slug <span className="normal-case tracking-normal text-[var(--overlay0)] italic font-display">— auto-derived from title</span>
           </label>
           <input
             type="text"
             value={slug}
             onChange={e => { setSlug(e.target.value); setSlugTouched(true); }}
             required
-            placeholder="my-awesome-post"
-            className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono"
+            placeholder="untitled-charcoal-on-paper"
+            className="field-input font-mono"
           />
         </div>
 
         {/* Tags + Draft */}
         <div className="grid grid-cols-1 md:grid-cols-[1fr_auto] gap-4 md:items-end">
           <div>
-            <label className="block text-sm font-medium text-subtext1 mb-2">Tags (comma-separated)</label>
+            <label className="field-label">Tags (comma-separated)</label>
             <input
               type="text"
               value={tagsInput}
               onChange={e => setTagsInput(e.target.value)}
               placeholder="oil, paper, 2026, study"
-              className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+              className="field-input"
             />
           </div>
-          <label className="flex items-center gap-2 px-4 py-3 bg-crust border border-surface1 rounded-lg cursor-pointer hover:border-peach/40 transition-colors select-none">
+          <label className="flex items-center gap-2 px-4 py-3 bg-[var(--surface0)]/60 border border-[var(--surface2)] cursor-pointer hover:border-[var(--peach)] transition-colors select-none" style={{ borderRadius: 1 }}>
             <input
               type="checkbox"
               checked={draft}
               onChange={e => setDraft(e.target.checked)}
-              className="accent-peach"
+              className="accent-[var(--peach)]"
             />
-            <span className="text-sm font-medium text-subtext1">Draft</span>
+            <span className="text-sm font-display italic text-[var(--subtext1)]">Sketch (draft)</span>
           </label>
         </div>
 
         {/* Summary */}
         <div>
-          <label className="block text-sm font-medium text-subtext1 mb-2">Custom Summary (Optional)</label>
+          <label className="field-label">Caption (optional)</label>
           <textarea
             value={summary}
             onChange={e => setSummary(e.target.value)}
             rows={2}
             placeholder="A short caption for the catalogue index..."
-            className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors resize-none"
+            className="field-input resize-none"
           />
         </div>
 
diff --git a/frontend/src/components/react/admin/Settings.tsx b/frontend/src/components/react/admin/Settings.tsx
index 49bf690..995629d 100644
--- a/frontend/src/components/react/admin/Settings.tsx
+++ b/frontend/src/components/react/admin/Settings.tsx
@@ -25,74 +25,74 @@ export default function Settings() {
     e.preventDefault();
     try {
       await updateConfig(config);
-      showAlert('Settings saved successfully! Refresh to see changes.', 'success');
+      showAlert('Settings saved. Refresh to see changes.', 'success');
     } catch (e) {
       showAlert(e instanceof ApiError ? `Error: ${e.message}` : 'Failed to save settings.', 'error');
     }
   }
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-8">
+    <form onSubmit={handleSubmit} className="space-y-10">
       {alert && (
-        <div className={`p-4 rounded-lg mb-6 text-sm font-semibold text-center backdrop-blur-sm ${
-          alert.type === 'success'
-            ? 'bg-green/15 text-green border border-green/30'
-            : 'bg-red/15 text-red border border-red/30'
-        }`}>
+        <div
+          className={`p-4 text-sm font-display italic text-center border ${
+            alert.type === 'success'
+              ? 'bg-[var(--green)]/15 text-[var(--green)] border-[var(--green)]/30'
+              : 'bg-[var(--red)]/15 text-[var(--red)] border-[var(--red)]/30'
+          }`}
+          style={{ borderRadius: 1 }}
+        >
           {alert.msg}
         </div>
       )}
 
       <section className="space-y-6">
-        <h2 className="text-xl font-bold text-lavender border-l-4 border-lavender pl-4">General Identity</h2>
+        <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--mauve)] pl-4">Identity</h2>
         <div className="grid md:grid-cols-2 gap-6">
-          <Field label="Blog Title (Nav)" value={config.title || ''} onChange={v => update('title', v)} />
-          <Field label="Nav Subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
-          <Field label="Welcome Title (Frontpage)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
-          <Field label="Welcome Subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
-        </div>
-        <div>
-          <Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="URL to the icon shown in browser tabs." />
+          <Field label="Gallery name (nav)" value={config.title || ''} onChange={v => update('title', v)} />
+          <Field label="Nav subtitle" value={config.subtitle || ''} onChange={v => update('subtitle', v)} />
+          <Field label="Welcome title (index)" value={config.welcome_title || ''} onChange={v => update('welcome_title', v)} />
+          <Field label="Welcome subtitle" value={config.welcome_subtitle || ''} onChange={v => update('welcome_subtitle', v)} />
         </div>
+        <Field label="Favicon URL" value={config.favicon || ''} onChange={v => update('favicon', v)} hint="Icon shown in browser tabs." />
       </section>
 
       <section className="space-y-6">
-        <h2 className="text-xl font-bold text-blue border-l-4 border-blue pl-4">Appearance</h2>
+        <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--blue)] pl-4">Appearance</h2>
         <div>
-          <label className="block text-sm font-medium text-subtext1 mb-2">Color Theme (Catppuccin)</label>
+          <label className="field-label">Theme</label>
           <select
-            value={config.theme || 'mocha'}
+            value={config.theme || 'salon'}
             onChange={e => update('theme', e.target.value)}
-            className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+            className="field-input font-display italic"
           >
-            <option value="mocha">Mocha (Dark, High Contrast)</option>
-            <option value="macchiato">Macchiato (Dark, Medium Contrast)</option>
-            <option value="frappe">Frappe (Dark, Low Contrast)</option>
-            <option value="latte">Latte (Light Mode)</option>
-            <option value="scaled-and-icy">Scaled and Icy (Vibrant Light)</option>
+            <option value="salon">Salon (parchment, default)</option>
+            <option value="salon-noir">Salon Noir (black gallery wall)</option>
+            <option value="latte">Latte (light)</option>
+            <option value="mocha">Mocha (dark)</option>
           </select>
-          <p className="text-[10px] text-subtext0 mt-1">Select a predefined Catppuccin color palette.</p>
+          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Salon and Salon Noir are tuned for the gallery aesthetic.</p>
         </div>
         <div>
-          <label className="block text-sm font-medium text-subtext1 mb-2">Custom CSS</label>
+          <label className="field-label">Custom CSS</label>
           <textarea
             value={config.custom_css || ''}
             onChange={e => update('custom_css', e.target.value)}
             rows={4}
-            className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors font-mono text-xs"
+            className="field-input font-mono text-xs"
             placeholder="body { ... }"
           />
-          <p className="text-[10px] text-subtext0 mt-1">Inject custom CSS styles globally.</p>
+          <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">Injected globally — use sparingly.</p>
         </div>
       </section>
 
       <section className="space-y-6">
-        <h2 className="text-xl font-bold text-teal border-l-4 border-teal pl-4">Footer</h2>
-        <Field label="Footer Text" value={config.footer || ''} onChange={v => update('footer', v)} />
+        <h2 className="font-display italic text-2xl text-[var(--text)] border-l-2 border-[var(--teal)] pl-4">Footer</h2>
+        <Field label="Footer text" value={config.footer || ''} onChange={v => update('footer', v)} />
       </section>
 
-      <button type="submit" className="w-full md:w-auto bg-mauve text-crust font-bold py-4 px-12 rounded-lg hover:bg-pink transition-all transform hover:scale-[1.02] active:scale-[0.98]">
-        Save Site Configuration
+      <button type="submit" className="btn-stamp">
+        Save site settings
       </button>
     </form>
   );
@@ -101,15 +101,15 @@ export default function Settings() {
 function Field({ label, value, onChange, hint }: { label: string; value: string; onChange: (v: string) => void; hint?: string }) {
   return (
     <div>
-      <label className="block text-sm font-medium text-subtext1 mb-2">{label}</label>
+      <label className="field-label">{label}</label>
       <input
         type="text"
         value={value}
         onChange={e => onChange(e.target.value)}
         required
-        className="w-full bg-crust border border-surface1 rounded-lg px-4 py-3 text-text focus:outline-none focus:border-mauve transition-colors"
+        className="field-input"
       />
-      {hint && <p className="text-[10px] text-subtext0 mt-1">{hint}</p>}
+      {hint && <p className="text-[10px] font-display italic text-[var(--subtext0)] mt-2 tracking-wider">{hint}</p>}
     </div>
   );
 }