diff --git a/frontend/index.html b/frontend/index.html
index ed77c2e..fb1107a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,6 +5,9 @@
Nexus | Noveria Operations
+
+
+
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 8d142f6..96d3211 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4,6 +4,52 @@
@custom-variant dark (&:is(.dark *));
+/* ── Nexus V2 Theme (Tailwind v4 @theme directive) ── */
+@theme {
+ /* Font families */
+ --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+ --font-display: 'Space Grotesk', sans-serif;
+ --font-mono: 'JetBrains Mono', monospace;
+
+ /* Space surfaces */
+ --color-space-0: #050410;
+ --color-space-1: #0a0818;
+ --color-space-2: #0e0c20;
+ --color-space-3: #141130;
+ --color-space-4: #1b1742;
+
+ /* Glass */
+ --color-glass: rgba(20, 17, 48, 0.55);
+ --color-glass-2: rgba(28, 24, 64, 0.55);
+
+ /* Lines */
+ --color-line: rgba(150, 140, 255, 0.10);
+ --color-line-2: rgba(150, 140, 255, 0.18);
+ --color-line-3: rgba(150, 140, 255, 0.30);
+
+ /* Text */
+ --color-tx: #ece9ff;
+ --color-tx-2: #a8a3d6;
+ --color-tx-3: #6f6aa0;
+
+ /* Accent */
+ --color-a-blue: #4f7cff;
+ --color-a-purple: #b557f6;
+ --color-a-mid: #7c6cff;
+
+ /* Status */
+ --color-st-work: #3ddc97;
+ --color-st-think: #34d6f5;
+ --color-st-queue: #fbbf24;
+ --color-st-block: #fb7185;
+ --color-st-idle: #6b6796;
+
+ /* Border radius */
+ --radius-r: 14px;
+ --radius-r-sm: 10px;
+ --radius-r-lg: 20px;
+}
+
:root {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
@@ -39,7 +85,7 @@
body {
background: hsl(var(--background));
color: hsl(var(--foreground));
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+ font-family: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', sans-serif;
margin: 0;
min-width: 320px;
diff --git a/frontend/src/assets/nexus-tokens.css b/frontend/src/assets/nexus-tokens.css
new file mode 100644
index 0000000..83d036b
--- /dev/null
+++ b/frontend/src/assets/nexus-tokens.css
@@ -0,0 +1,110 @@
+/* ================================================================
+ nexus-tokens.css — Nexus Mission Control V2 Design Tokens
+ Geladen NACH main.css, überschreibt shadcn/v1-Standards.
+ ================================================================ */
+
+:root {
+ /* ── Surfaces ─────────────────────────────────────── */
+ --space-0: #050410;
+ --space-1: #0a0818;
+ --space-2: #0e0c20;
+ --space-3: #141130;
+ --space-4: #1b1742;
+ --glass: rgba(20, 17, 48, 0.55);
+ --glass-2: rgba(28, 24, 64, 0.55);
+
+ /* ── Lines ────────────────────────────────────────── */
+ --line: rgba(150, 140, 255, 0.10);
+ --line-2: rgba(150, 140, 255, 0.18);
+ --line-3: rgba(150, 140, 255, 0.30);
+
+ /* ── Text ─────────────────────────────────────────── */
+ --tx: #ece9ff;
+ --tx-2: #a8a3d6;
+ --tx-3: #6f6aa0;
+
+ /* ── Accent Gradient ──────────────────────────────── */
+ --a-blue: #4f7cff;
+ --a-purple: #b557f6;
+ --a-mid: #7c6cff;
+ --grad: linear-gradient(120deg, var(--a-blue), var(--a-purple));
+ --grad-soft: linear-gradient(120deg, rgba(79,124,255,.18), rgba(181,87,246,.18));
+
+ /* ── Status ───────────────────────────────────────── */
+ --st-work: #3ddc97;
+ --st-think: #34d6f5;
+ --st-queue: #fbbf24;
+ --st-block: #fb7185;
+ --st-idle: #6b6796;
+
+ /* ── Glows ────────────────────────────────────────── */
+ --glow: 0 0 0 1px rgba(124,108,255,.20), 0 0 28px -4px rgba(124,108,255,.55);
+ --glow-blue: 0 0 24px -2px rgba(79,124,255,.65);
+ --glow-purple: 0 0 24px -2px rgba(181,87,246,.60);
+ --glow-work: 0 0 16px -1px rgba(61,220,151,.70);
+ --glow-think: 0 0 16px -1px rgba(52,214,245,.65);
+
+ /* ── Radius ───────────────────────────────────────── */
+ --r: 14px;
+ --r-sm: 10px;
+ --r-lg: 20px;
+
+ /* ── Layout ───────────────────────────────────────── */
+ --sidebar-w: 248px;
+ --topbar-h: 62px;
+ --rail-w: 360px;
+}
+
+/* ── Glass card utility ────────────────────────────── */
+.glass-panel {
+ background: var(--glass);
+ border: 1px solid var(--line);
+ border-radius: var(--r);
+ backdrop-filter: blur(12px);
+}
+
+/* ── Gradient text ─────────────────────────────────── */
+.grad-text {
+ background: var(--grad);
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+}
+
+/* ── Status dot keyframes ──────────────────────────── */
+@keyframes pulse-work {
+ 0% { box-shadow: 0 0 0 0 rgba(61,220,151,.55); }
+ 70% { box-shadow: 0 0 0 7px rgba(61,220,151,0); }
+ 100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
+}
+@keyframes pulse-think {
+ 0% { box-shadow: 0 0 0 0 rgba(52,214,245,.55); }
+ 70% { box-shadow: 0 0 0 7px rgba(52,214,245,0); }
+ 100% { box-shadow: 0 0 0 0 rgba(52,214,245,0); }
+}
+@keyframes pulse-block {
+ 0% { box-shadow: 0 0 0 0 rgba(251,113,133,.55); }
+ 70% { box-shadow: 0 0 0 7px rgba(251,113,133,0); }
+ 100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); }
+}
+@keyframes shimmer {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(180%); }
+}
+/* ── V2 Scrollbars ─────────────────────────────────── */
+.v2-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
+.v2-scroll::-webkit-scrollbar-thumb {
+ background: rgba(124,108,255,.22);
+ border-radius: 9px;
+ border: 2px solid transparent;
+ background-clip: padding-box;
+}
+.v2-scroll::-webkit-scrollbar-thumb:hover {
+ background: rgba(124,108,255,.4);
+ background-clip: padding-box;
+}
+.v2-scroll::-webkit-scrollbar-track { background: transparent; }
+
+/* ── Typography helpers ────────────────────────────── */
+.font-display { font-family: 'Space Grotesk', sans-serif; }
+.font-mono-v2 { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }
diff --git a/frontend/src/components/background/GalaxyBackground.vue b/frontend/src/components/background/GalaxyBackground.vue
new file mode 100644
index 0000000..cc1b15f
--- /dev/null
+++ b/frontend/src/components/background/GalaxyBackground.vue
@@ -0,0 +1,249 @@
+
+
+
+
+
+
+
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index b2e50ed..eabd07d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -4,6 +4,7 @@ import App from './App.vue'
import router from './router'
import { useAuthStore } from './stores/auth'
import './assets/main.css'
+import './assets/nexus-tokens.css'
const pinia = createPinia()