diff --git a/frontend/src/app.css b/frontend/src/app.css
index d4b5078..a2be562 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1 +1,90 @@
 @import 'tailwindcss';
+
+/* Synops mørkt tema — matcher landingssiden */
+@theme {
+  --color-bg: #0a0a0b;
+  --color-surface: #141416;
+  --color-surface-hover: #1a1a1e;
+  --color-border: #2a2a2e;
+  --color-border-hover: #3a3a3e;
+  --color-text: #e8e8ec;
+  --color-text-muted: #8a8a96;
+  --color-text-dim: #5a5a66;
+  --color-accent: #6366f1;
+  --color-accent-hover: #7577f5;
+  --color-accent-glow: rgba(99, 102, 241, 0.15);
+  --color-success: #22c55e;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+}
+
+body {
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: 'Inter', -apple-system, system-ui, sans-serif;
+}
+
+/* Override Tailwind defaults for dark theme */
+@layer base {
+  /* Overstyr alle bg-white til surface */
+  .bg-white { background-color: var(--color-surface) !important; }
+  .bg-gray-50 { background-color: var(--color-bg) !important; }
+  .bg-gray-100 { background-color: var(--color-surface) !important; }
+  .bg-gray-200 { background-color: var(--color-border) !important; }
+
+  /* Tekst */
+  .text-gray-900 { color: var(--color-text) !important; }
+  .text-gray-800 { color: var(--color-text) !important; }
+  .text-gray-700 { color: var(--color-text-muted) !important; }
+  .text-gray-600 { color: var(--color-text-muted) !important; }
+  .text-gray-500 { color: var(--color-text-muted) !important; }
+  .text-gray-400 { color: var(--color-text-dim) !important; }
+  .text-gray-300 { color: var(--color-text-dim) !important; }
+
+  /* Borders */
+  .border-gray-200 { border-color: var(--color-border) !important; }
+  .border-gray-300 { border-color: var(--color-border) !important; }
+  .border-gray-100 { border-color: var(--color-border) !important; }
+
+  /* Hover states */
+  .hover\:bg-gray-200:hover { background-color: var(--color-surface-hover) !important; }
+  .hover\:bg-gray-100:hover { background-color: var(--color-surface-hover) !important; }
+  .hover\:text-gray-700:hover { color: var(--color-text) !important; }
+
+  /* Accent-farger for knapper */
+  .bg-indigo-500, .bg-indigo-600 { background-color: var(--color-accent) !important; }
+  .hover\:bg-indigo-600:hover, .hover\:bg-indigo-700:hover { background-color: var(--color-accent-hover) !important; }
+  .text-indigo-600, .text-indigo-500, .text-indigo-700 { color: var(--color-accent) !important; }
+  .bg-indigo-50, .bg-indigo-100 { background-color: var(--color-accent-glow) !important; }
+  .border-indigo-300 { border-color: var(--color-accent) !important; }
+  .hover\:border-indigo-300:hover { border-color: var(--color-accent) !important; }
+
+  /* Inputs og textareas */
+  input, textarea, select {
+    background-color: var(--color-surface) !important;
+    color: var(--color-text) !important;
+    border-color: var(--color-border) !important;
+  }
+  input:focus, textarea:focus, select:focus {
+    border-color: var(--color-accent) !important;
+    outline-color: var(--color-accent) !important;
+  }
+  input::placeholder, textarea::placeholder {
+    color: var(--color-text-dim) !important;
+  }
+
+  /* Shadows */
+  .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important; }
+  .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; }
+
+  /* Status-farger */
+  .text-green-600 { color: var(--color-success) !important; }
+  .text-yellow-600 { color: var(--color-warning) !important; }
+  .text-red-600 { color: var(--color-error) !important; }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar { width: 8px; }
+  ::-webkit-scrollbar-track { background: var(--color-bg); }
+  ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--color-border-hover); }
+}