diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 677c127..7768d26 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,11 +1,11 @@
 {
-  "name": "frontend",
+  "name": "micronomicon",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "frontend",
+      "name": "micronomicon",
       "version": "0.0.0",
       "dependencies": {
         "@base-ui/react": "^1.3.0",
@@ -18,6 +18,7 @@
         "@codemirror/view": "^6.40.0",
         "@dagrejs/dagre": "^3.0.0",
         "@fontsource-variable/geist": "^5.2.8",
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@tailwindcss/vite": "^4.2.2",
         "@xyflow/react": "^12.10.2",
         "class-variance-authority": "^0.7.1",
@@ -1077,6 +1078,15 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
+    "node_modules/@fontsource-variable/jetbrains-mono": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
+      "integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@hono/node-server": {
       "version": "1.19.12",
       "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.12.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d14ac41..63f430f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,6 +20,7 @@
     "@codemirror/view": "^6.40.0",
     "@dagrejs/dagre": "^3.0.0",
     "@fontsource-variable/geist": "^5.2.8",
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@tailwindcss/vite": "^4.2.2",
     "@xyflow/react": "^12.10.2",
     "class-variance-authority": "^0.7.1",
diff --git a/frontend/src/components/editor/PreviewPane.tsx b/frontend/src/components/editor/PreviewPane.tsx
index 6b0de98..8b696ab 100644
--- a/frontend/src/components/editor/PreviewPane.tsx
+++ b/frontend/src/components/editor/PreviewPane.tsx
@@ -42,7 +42,7 @@ export default function PreviewPane() {
             </span>
           )}
         </span>
-        <div className="flex gap-0.5 bg-muted rounded-md p-0.5">
+        <div className="flex gap-1">
           {tabs
             .filter((t) => t.show)
             .map((tab) => (
@@ -50,10 +50,10 @@ export default function PreviewPane() {
                 key={tab.value}
                 onClick={() => setPreviewMode(tab.value)}
                 className={cn(
-                  "text-xs px-2 py-0.5 rounded transition-colors",
+                  "text-xs px-2 py-0.5 uppercase tracking-wider transition-all border-2",
                   previewMode === tab.value
-                    ? "bg-background text-foreground shadow-sm"
-                    : "text-muted-foreground hover:text-foreground",
+                    ? "bg-background text-foreground border-border"
+                    : "text-muted-foreground hover:text-foreground border-transparent",
                 )}
               >
                 {tab.label}
diff --git a/frontend/src/components/editor/ToolBar.tsx b/frontend/src/components/editor/ToolBar.tsx
index a2a0c66..eadddfe 100644
--- a/frontend/src/components/editor/ToolBar.tsx
+++ b/frontend/src/components/editor/ToolBar.tsx
@@ -1,5 +1,5 @@
 import { useRef, useState } from "react";
-import { BookOpen, ImagePlus } from "lucide-react";
+import { BookOpen, Upload } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -55,7 +55,7 @@ export default function ToolBar({
         <PopoverTrigger
           render={
             <button
-              className="inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium h-8 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors"
+              className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider "
               title="Insert example template"
             >
               <BookOpen className="h-3.5 w-3.5" />
@@ -152,10 +152,10 @@ function UploadImageButton({ onUploaded }: { onUploaded: (path: string) => void
       <button
         onClick={() => fileRef.current?.click()}
         disabled={uploading}
-        className="inline-flex items-center justify-center gap-1.5 rounded-md text-xs font-medium h-8 px-3 border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors disabled:opacity-50"
+        className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider  disabled:opacity-50"
         title="Upload image for embedding"
       >
-        <ImagePlus className="h-3.5 w-3.5" />
+        <Upload className="h-3.5 w-3.5" />
         <span>{uploading ? "Uploading…" : "Image"}</span>
       </button>
     </>
diff --git a/frontend/src/components/shared/NavBar.tsx b/frontend/src/components/shared/NavBar.tsx
index c228c28..7c8aaa0 100644
--- a/frontend/src/components/shared/NavBar.tsx
+++ b/frontend/src/components/shared/NavBar.tsx
@@ -43,7 +43,9 @@ export default function NavBar() {
 
   return (
     <nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
-      <span className="font-bold mr-6 text-foreground">Micronomicon</span>
+      <span className="mr-6 text-primary font-bold tracking-widest" title="Micronomicon"
+        style={{ fontVariantLigatures: "none" }}
+      >╠═ MICRONOMICON ═╣</span>
 
       <NavLink to="/" end className={navLink}>
         Dashboard
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index 444f4ef..d8746db 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -49,6 +49,7 @@ function Button({
   return (
     <ButtonPrimitive
       data-slot="button"
+      data-variant={variant}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />
diff --git a/frontend/src/components/ui/table.tsx b/frontend/src/components/ui/table.tsx
index 1017c00..31a4047 100644
--- a/frontend/src/components/ui/table.tsx
+++ b/frontend/src/components/ui/table.tsx
@@ -31,7 +31,7 @@ function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
   return (
     <tbody
       data-slot="table-body"
-      className={cn("[&_tr:last-child]:border-0", className)}
+      className={cn("", className)}
       {...props}
     />
   )
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 2909308..5c2f528 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1,13 +1,14 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
-@import "@fontsource-variable/geist";
+@import "@fontsource-variable/jetbrains-mono";
 
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
-    --font-heading: var(--font-sans);
-    --font-sans: 'Geist Variable', sans-serif;
+    --font-heading: var(--font-mono);
+    --font-sans: 'JetBrains Mono Variable', 'Courier New', monospace;
+    --font-mono: 'JetBrains Mono Variable', 'Courier New', monospace;
     --color-sidebar-ring: var(--sidebar-ring);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -39,122 +40,204 @@
     --color-card: var(--card);
     --color-foreground: var(--foreground);
     --color-background: var(--background);
-    --radius-sm: calc(var(--radius) * 0.6);
-    --radius-md: calc(var(--radius) * 0.8);
-    --radius-lg: var(--radius);
-    --radius-xl: calc(var(--radius) * 1.4);
-    --radius-2xl: calc(var(--radius) * 1.8);
-    --radius-3xl: calc(var(--radius) * 2.2);
-    --radius-4xl: calc(var(--radius) * 2.6);
+    --radius-sm: 0px;
+    --radius-md: 0px;
+    --radius-lg: 0px;
+    --radius-xl: 0px;
+    --radius-2xl: 0px;
+    --radius-3xl: 0px;
+    --radius-4xl: 0px;
 }
 
+/* ── Terracotta Light Theme ── */
 :root {
-    --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
-    --card: oklch(1 0 0);
-    --card-foreground: oklch(0.145 0 0);
-    --popover: oklch(1 0 0);
-    --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
-    --primary-foreground: oklch(0.985 0 0);
-    --secondary: oklch(0.97 0 0);
-    --secondary-foreground: oklch(0.205 0 0);
-    --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
-    --destructive: oklch(0.577 0.245 27.325);
-    --border: oklch(0.922 0 0);
-    --input: oklch(0.922 0 0);
-    --ring: oklch(0.708 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --radius: 0.625rem;
-    --sidebar: oklch(0.985 0 0);
-    --sidebar-foreground: oklch(0.145 0 0);
-    --sidebar-primary: oklch(0.205 0 0);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.97 0 0);
-    --sidebar-accent-foreground: oklch(0.205 0 0);
-    --sidebar-border: oklch(0.922 0 0);
-    --sidebar-ring: oklch(0.708 0 0);
+    --background: oklch(0.94 0.02 55);
+    --foreground: oklch(0.18 0.03 45);
+    --card: oklch(0.91 0.025 55);
+    --card-foreground: oklch(0.18 0.03 45);
+    --popover: oklch(0.91 0.025 55);
+    --popover-foreground: oklch(0.18 0.03 45);
+    --primary: oklch(0.55 0.14 45);
+    --primary-foreground: oklch(0.95 0.02 55);
+    --secondary: oklch(0.86 0.03 55);
+    --secondary-foreground: oklch(0.18 0.03 45);
+    --muted: oklch(0.86 0.025 55);
+    --muted-foreground: oklch(0.45 0.04 45);
+    --accent: oklch(0.84 0.035 55);
+    --accent-foreground: oklch(0.18 0.03 45);
+    --destructive: oklch(0.5 0.2 25);
+    --border: oklch(0.6 0.08 45);
+    --input: oklch(0.78 0.04 55);
+    --ring: oklch(0.55 0.14 45);
+    --chart-1: oklch(0.55 0.14 45);
+    --chart-2: oklch(0.65 0.1 70);
+    --chart-3: oklch(0.5 0.08 30);
+    --chart-4: oklch(0.6 0.06 90);
+    --chart-5: oklch(0.4 0.04 45);
+    --radius: 0px;
+    --sidebar: oklch(0.90 0.025 55);
+    --sidebar-foreground: oklch(0.18 0.03 45);
+    --sidebar-primary: oklch(0.55 0.14 45);
+    --sidebar-primary-foreground: oklch(0.95 0.02 55);
+    --sidebar-accent: oklch(0.84 0.035 55);
+    --sidebar-accent-foreground: oklch(0.18 0.03 45);
+    --sidebar-border: oklch(0.6 0.08 45);
+    --sidebar-ring: oklch(0.55 0.14 45);
 }
 
+/* ── Black-Figure Dark Theme (primary) ──
+   Inspired by Greek pottery: black ground, terracotta figures, gold accents
+*/
 .dark {
-    --background: oklch(0.145 0 0);
-    --foreground: oklch(0.985 0 0);
-    --card: oklch(0.205 0 0);
-    --card-foreground: oklch(0.985 0 0);
-    --popover: oklch(0.205 0 0);
-    --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.922 0 0);
-    --primary-foreground: oklch(0.205 0 0);
-    --secondary: oklch(0.269 0 0);
-    --secondary-foreground: oklch(0.985 0 0);
-    --muted: oklch(0.269 0 0);
-    --muted-foreground: oklch(0.708 0 0);
-    --accent: oklch(0.269 0 0);
-    --accent-foreground: oklch(0.985 0 0);
-    --destructive: oklch(0.704 0.191 22.216);
-    --border: oklch(1 0 0 / 10%);
-    --input: oklch(1 0 0 / 15%);
-    --ring: oklch(0.556 0 0);
-    --chart-1: oklch(0.87 0 0);
-    --chart-2: oklch(0.556 0 0);
-    --chart-3: oklch(0.439 0 0);
-    --chart-4: oklch(0.371 0 0);
-    --chart-5: oklch(0.269 0 0);
-    --sidebar: oklch(0.205 0 0);
-    --sidebar-foreground: oklch(0.985 0 0);
-    --sidebar-primary: oklch(0.488 0.243 264.376);
-    --sidebar-primary-foreground: oklch(0.985 0 0);
-    --sidebar-accent: oklch(0.269 0 0);
-    --sidebar-accent-foreground: oklch(0.985 0 0);
-    --sidebar-border: oklch(1 0 0 / 10%);
-    --sidebar-ring: oklch(0.556 0 0);
+    --background: oklch(0.12 0.015 45);
+    --foreground: oklch(0.72 0.08 55);
+    --card: oklch(0.16 0.02 45);
+    --card-foreground: oklch(0.72 0.08 55);
+    --popover: oklch(0.16 0.02 45);
+    --popover-foreground: oklch(0.72 0.08 55);
+    --primary: oklch(0.7 0.13 55);
+    --primary-foreground: oklch(0.12 0.015 45);
+    --secondary: oklch(0.22 0.025 45);
+    --secondary-foreground: oklch(0.7 0.08 55);
+    --muted: oklch(0.22 0.02 45);
+    --muted-foreground: oklch(0.5 0.05 55);
+    --accent: oklch(0.24 0.03 45);
+    --accent-foreground: oklch(0.72 0.08 55);
+    --destructive: oklch(0.55 0.18 25);
+    --border: oklch(0.38 0.06 45);
+    --input: oklch(0.26 0.03 45);
+    --ring: oklch(0.7 0.13 55);
+    --chart-1: oklch(0.7 0.13 55);
+    --chart-2: oklch(0.65 0.1 70);
+    --chart-3: oklch(0.55 0.08 30);
+    --chart-4: oklch(0.6 0.06 90);
+    --chart-5: oklch(0.45 0.04 45);
+    --sidebar: oklch(0.14 0.018 45);
+    --sidebar-foreground: oklch(0.72 0.08 55);
+    --sidebar-primary: oklch(0.7 0.13 55);
+    --sidebar-primary-foreground: oklch(0.12 0.015 45);
+    --sidebar-accent: oklch(0.24 0.03 45);
+    --sidebar-accent-foreground: oklch(0.72 0.08 55);
+    --sidebar-border: oklch(0.38 0.06 45);
+    --sidebar-ring: oklch(0.7 0.13 55);
 }
 
 @layer base {
   * {
     @apply border-border outline-ring/50;
-    }
+  }
   body {
     @apply bg-background text-foreground;
-    }
+    font-size: 13px;
+    letter-spacing: -0.01em;
+  }
   html {
-    @apply font-sans;
-    }
+    @apply font-mono;
+  }
 
-  /* Dark-mode scrollbars */
+  /* Terracotta scrollbars */
   * {
     scrollbar-width: thin;
-    scrollbar-color: oklch(0.35 0 0) transparent;
+    scrollbar-color: oklch(0.35 0.05 45) transparent;
   }
   *::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
   }
   *::-webkit-scrollbar-track {
     background: transparent;
   }
   *::-webkit-scrollbar-thumb {
-    background: oklch(0.35 0 0);
-    border-radius: 3px;
+    background: oklch(0.35 0.05 45);
+    border-radius: 0;
   }
   *::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.45 0 0);
+    background: oklch(0.5 0.08 55);
   }
   *::-webkit-scrollbar-corner {
     background: transparent;
   }
 
-  .dark *::-webkit-scrollbar-thumb {
-    background: oklch(0.3 0 0);
+  /* Terracotta cursor */
+  .cm-cursor {
+    border-left-color: oklch(0.7 0.13 55) !important;
   }
-  .dark *::-webkit-scrollbar-thumb:hover {
-    background: oklch(0.4 0 0);
+
+  /* Bold console aesthetic */
+  button, [role="button"], [data-slot="button"] {
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-size: 11px;
+    cursor: pointer;
   }
-}
\ No newline at end of file
+
+  /* Ensure all interactive elements have pointer cursor */
+  a, [role="link"], [role="tab"], [role="option"],
+  [data-slot="popover-trigger"], [data-slot="toggle-group-item"],
+  [data-slot="alert-dialog-action"], [data-slot="alert-dialog-cancel"],
+  .cm-tooltip-autocomplete [role="option"] {
+    cursor: pointer;
+  }
+
+  nav {
+    border-bottom-width: 3px;
+  }
+
+  /* ── Dithered offset shadow ──
+     Simulates a stippled/dot-matrix shadow using multiple box-shadow
+     dots at alternating positions. Works even with overflow:auto.
+  */
+
+  /* Panels and containers — checkerboard dot shadow */
+  [data-slot="table-container"],
+  [data-slot="alert-dialog-content"],
+  [data-slot="popover-content"],
+  [data-slot="card"],
+  .panel-shadow {
+    border: 2px solid var(--border);
+    box-shadow:
+      3px 3px 0 0 var(--border),
+      5px 3px 0 0 transparent,
+      7px 3px 0 0 var(--border),
+      4px 4px 0 0 transparent,
+      6px 4px 0 0 var(--border),
+      3px 5px 0 0 var(--border),
+      5px 5px 0 0 transparent,
+      7px 5px 0 0 var(--border),
+      4px 6px 0 0 var(--border),
+      6px 6px 0 0 transparent;
+  }
+
+  /* Primary (default) buttons only — dithered shadow */
+  button[data-slot="button"][data-variant="default"] {
+    border: 2px solid var(--border);
+    box-shadow:
+      2px 2px 0 0 var(--border),
+      4px 2px 0 0 transparent,
+      6px 2px 0 0 var(--border),
+      3px 3px 0 0 transparent,
+      5px 3px 0 0 var(--border),
+      2px 4px 0 0 var(--border),
+      4px 4px 0 0 transparent,
+      6px 4px 0 0 var(--border);
+    transition: box-shadow 0.1s, transform 0.1s;
+  }
+  button[data-slot="button"][data-variant="default"]:active {
+    box-shadow: none;
+    transform: translate(2px, 2px);
+  }
+
+  /* All other buttons — no shadow */
+  button[data-slot="button"][data-variant="outline"],
+  button[data-slot="button"][data-variant="secondary"],
+  button[data-slot="button"][data-variant="ghost"],
+  button[data-slot="button"][data-variant="link"],
+  button[data-slot="button"][data-variant="destructive"] {
+    box-shadow: none !important;
+  }
+
+  /* Input fields */
+  input[data-slot="input"] {
+    border: 2px solid var(--border);
+  }
+}