diff --git a/package-lock.json b/package-lock.json
index f760ac6..54eb6e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -868,6 +868,7 @@
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/cookie": "^0.6.0",
 				"cookie": "^0.6.0",
@@ -900,6 +901,7 @@
 			"integrity": "sha512-rimpFEAboBBHIlzISibg94iP09k/KYdHgVhJlcsTfn7KMBhc70jFX/GRWkRdFCc2fdnk+4+Bdfej23cMDnJS6A==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^2.1.0",
 				"debug": "^4.3.4",
@@ -1285,6 +1287,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"caniuse-lite": "^1.0.30001646",
 				"electron-to-chromium": "^1.5.4",
@@ -2703,6 +2706,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.7",
 				"picocolors": "^1.0.1",
@@ -2763,6 +2767,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"lilconfig": "^3.0.0",
 				"yaml": "^2.3.4"
@@ -3457,6 +3462,7 @@
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.18.tgz",
 			"integrity": "sha512-d0FdzYIiAePqRJEb90WlJDkjUEx42xhivxN8muUBmfZnP+tzUgz12DJ2hRJi8sIHCME7jeK1PTMgKPSfTd8JrA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@ampproject/remapping": "^2.2.1",
 				"@jridgewell/sourcemap-codec": "^1.4.15",
@@ -3611,6 +3617,7 @@
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.7.tgz",
 			"integrity": "sha512-rxWZbe87YJb4OcSopb7up2Ba4U82BoiSGUdoDr3Ydrg9ckxFS/YWsvhN323GMcddgU65QRy7JndC7ahhInhvlQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -3739,6 +3746,7 @@
 			"integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
 			"dev": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -3818,6 +3826,7 @@
 			"integrity": "sha512-MdjglKR6AQXQb9JGiS7Rc2wC6uMjcm7Go/NHNO63EwiJXfuk9PgqiP/n5IDJCziMkfw9n4Ubp7lttNwz+8ZVKA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.21.3",
 				"postcss": "^8.4.39",
diff --git a/src/app.css b/src/app.css
index fe72099..b88a97c 100644
--- a/src/app.css
+++ b/src/app.css
@@ -4,187 +4,389 @@
  
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
- 
-    --cardBackground: black;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
+    color-scheme: light;
+    --background: 329 100% 96%;
+    --foreground: 326 35% 22%;
+    --muted: 332 55% 88%;
+    --muted-foreground: 323 24% 38%;
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
+    --popover-foreground: 326 35% 22%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 72.2% 50.6%;
+    --card-foreground: 326 35% 22%;
+    --border: 318 41% 86%;
+    --input: 318 41% 86%;
+    --primary: 332 79% 56%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 199 94% 82%;
+    --secondary-foreground: 222 47% 16%;
+    --accent: 197 100% 82%;
+    --accent-foreground: 222 47% 16%;
+    --destructive: 0 72% 51%;
     --destructive-foreground: 210 40% 98%;
- 
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
+    --ring: 332 79% 56%;
+    --panel-radius: 1.5rem;
+    --glass-blur: 26px;
+    --cardBackground: 0 0% 100%;
+    --panel-shadow: 0 25px 50px rgba(238, 140, 180, 0.25);
+    --glass-panel: rgba(255, 255, 255, 0.58);
+    --glass-border: rgba(255, 255, 255, 0.35);
+    --button-surface: rgba(255, 255, 255, 0.55);
+    --button-hover-surface: rgba(255, 255, 255, 0.78);
+    --button-foreground: #8b2255;
+    --button-hover-foreground: #5a1840;
+    --button-shadow: 0 15px 40px rgba(242, 145, 187, 0.28);
+    --page-gradient: linear-gradient(135deg, #ffe4f3 0%, #dae6ff 50%, #ffd9ec 100%);
+    --canvas-overlay: rgba(255, 255, 255, 0.18);
+    --canvas-shadow: 0 25px 120px rgba(212, 130, 172, 0.28);
   }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --cardBackground: black;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: hsl(212.7,26.8%,83.9);
+
+  :root[data-ts-theme="lover"] {
+    color-scheme: light;
+    --background: 329 100% 96%;
+    --foreground: 326 35% 22%;
+    --muted: 332 55% 88%;
+    --muted-foreground: 323 24% 38%;
+    --border: 318 41% 86%;
+    --input: 318 41% 86%;
+    --primary: 332 79% 56%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 199 94% 82%;
+    --secondary-foreground: 222 47% 16%;
+    --accent: 197 100% 82%;
+    --accent-foreground: 222 47% 16%;
+    --panel-shadow: 0 25px 50px rgba(238, 140, 180, 0.25);
+    --glass-panel: rgba(255, 255, 255, 0.58);
+    --glass-border: rgba(255, 255, 255, 0.35);
+    --button-surface: rgba(255, 255, 255, 0.55);
+    --button-hover-surface: rgba(255, 255, 255, 0.78);
+    --button-foreground: #8b2255;
+    --button-hover-foreground: #5a1840;
+    --button-shadow: 0 15px 40px rgba(242, 145, 187, 0.28);
+    --page-gradient: linear-gradient(135deg, #ffe4f3 0%, #dae6ff 50%, #ffd9ec 100%);
+    --canvas-overlay: rgba(255, 255, 255, 0.18);
+    --canvas-shadow: 0 25px 120px rgba(212, 130, 172, 0.28);
   }
-  .su {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
+
+  :root[data-ts-theme="midnights"] {
+    color-scheme: dark;
+    --background: 226 53% 12%;
+    --foreground: 210 40% 96%;
+    --muted: 228 34% 24%;
+    --muted-foreground: 222 20% 75%;
+    --popover: 226 53% 12%;
+    --popover-foreground: 210 40% 96%;
+    --card: 230 42% 16%;
+    --card-foreground: 210 40% 96%;
+    --border: 227 36% 32%;
+    --input: 227 36% 32%;
+    --primary: 265 78% 68%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 216 33% 22%;
     --secondary-foreground: 210 40% 98%;
- 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 265 78% 68%;
     --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --ring: hsl(212.7,26.8%,83.9);
+    --ring: 265 78% 68%;
+    --panel-shadow: 0 25px 70px rgba(15, 23, 42, 0.55);
+    --glass-panel: rgba(19, 28, 57, 0.65);
+    --glass-border: rgba(148, 163, 184, 0.32);
+    --button-surface: rgba(33, 47, 86, 0.6);
+    --button-hover-surface: rgba(59, 83, 126, 0.78);
+    --button-foreground: #dbeafe;
+    --button-hover-foreground: #f8fafc;
+    --button-shadow: 0 25px 60px rgba(23, 36, 74, 0.6);
+    --page-gradient: linear-gradient(135deg, #0f172a 0%, #1d2671 50%, #2e4482 100%);
+    --canvas-overlay: rgba(15, 23, 42, 0.55);
+    --canvas-shadow: 0 35px 140px rgba(12, 18, 36, 0.65);
   }
 
-.suuu {
+  :root[data-ts-theme="folklore"] {
+    color-scheme: light;
+    --background: 36 24% 92%;
+    --foreground: 26 16% 24%;
+    --muted: 35 18% 82%;
+    --muted-foreground: 30 16% 40%;
+    --popover: 35 18% 94%;
+    --popover-foreground: 26 16% 24%;
+    --card: 35 18% 88%;
+    --card-foreground: 26 16% 24%;
+    --border: 30 18% 80%;
+    --input: 30 18% 80%;
+    --primary: 28 26% 42%;
+    --primary-foreground: 35 36% 94%;
+    --secondary: 26 16% 30%;
+    --secondary-foreground: 35 36% 94%;
+    --accent: 32 28% 46%;
+    --accent-foreground: 40 35% 96%;
+    --ring: 28 26% 42%;
+    --panel-shadow: 0 30px 60px rgba(112, 93, 73, 0.28);
+    --glass-panel: rgba(255, 251, 244, 0.72);
+    --glass-border: rgba(164, 147, 123, 0.28);
+    --button-surface: rgba(255, 251, 244, 0.65);
+    --button-hover-surface: rgba(255, 251, 244, 0.82);
+    --button-foreground: #7a5f45;
+    --button-hover-foreground: #5d4430;
+    --button-shadow: 0 20px 55px rgba(136, 112, 88, 0.32);
+    --page-gradient: linear-gradient(135deg, #f1ede2 0%, #d7cec2 50%, #f6f1e8 100%);
+    --canvas-overlay: rgba(241, 234, 222, 0.72);
+    --canvas-shadow: 0 30px 120px rgba(126, 110, 90, 0.35);
+  }
 
-    --foreground:199 64% 73%;
-    --background:200 95% 14%;
- 
-    --muted: 192 70% 43%;
-    --muted-foreground:200 95% 14%;
- 
-    --popover: #023047;
-    --popover-foreground: #219EBC;
- 
-    --card: #023047;
-    --card-foreground: #219EBC;
- 
-    --border: #8ECAE6;
-    --input: #8ECAE6;
- 
-    --primary: #219EBC;
-    --primary-foreground: #023047;
- 
-    --secondary: #8ECAE6;
-    --secondary-foreground: #219EBC;
- 
-    --accent: #8ECAE6;
-    --accent-foreground: #219EBC;
- 
-    --destructive: #FFB703;
-    --destructive-foreground: #219EBC;
- 
-    --ring: #D6E2E9; 
-   }
+  :root[data-ts-theme="reputation"] {
+    color-scheme: dark;
+    --background: 0 0% 6%;
+    --foreground: 0 0% 95%;
+    --muted: 0 0% 16%;
+    --muted-foreground: 0 0% 65%;
+    --popover: 0 0% 7%;
+    --popover-foreground: 0 0% 95%;
+    --card: 0 0% 9%;
+    --card-foreground: 0 0% 95%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --primary: 0 0% 90%;
+    --primary-foreground: 0 0% 12%;
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 92%;
+    --accent: 0 0% 70%;
+    --accent-foreground: 0 0% 10%;
+    --ring: 0 0% 72%;
+    --panel-shadow: 0 35px 85px rgba(0, 0, 0, 0.7);
+    --glass-panel: rgba(20, 20, 20, 0.68);
+    --glass-border: rgba(255, 255, 255, 0.16);
+    --button-surface: rgba(46, 46, 46, 0.65);
+    --button-hover-surface: rgba(255, 255, 255, 0.14);
+    --button-foreground: #f5f5f5;
+    --button-hover-foreground: #ffffff;
+    --button-shadow: 0 35px 90px rgba(0, 0, 0, 0.65);
+    --page-gradient: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 50%, #262626 100%);
+    --canvas-overlay: rgba(17, 17, 17, 0.75);
+    --canvas-shadow: 0 40px 140px rgba(0, 0, 0, 0.7);
+  }
 
+  :root[data-ts-theme="1989"] {
+    color-scheme: light;
+    --background: 204 100% 97%;
+    --foreground: 214 32% 18%;
+    --muted: 200 44% 90%;
+    --muted-foreground: 210 28% 38%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 214 32% 18%;
+    --card: 0 0% 100%;
+    --card-foreground: 214 32% 18%;
+    --border: 203 62% 86%;
+    --input: 203 62% 86%;
+    --primary: 213 90% 55%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 16 82% 64%;
+    --secondary-foreground: 0 0% 100%;
+    --accent: 199 94% 76%;
+    --accent-foreground: 214 32% 18%;
+    --ring: 213 90% 55%;
+    --panel-shadow: 0 30px 70px rgba(125, 173, 233, 0.35);
+    --glass-panel: rgba(255, 255, 255, 0.65);
+    --glass-border: rgba(148, 197, 255, 0.38);
+    --button-surface: rgba(255, 255, 255, 0.68);
+    --button-hover-surface: rgba(224, 239, 255, 0.9);
+    --button-foreground: #1d4ed8;
+    --button-hover-foreground: #1e3a8a;
+    --button-shadow: 0 25px 70px rgba(125, 173, 233, 0.4);
+    --page-gradient: linear-gradient(135deg, #d8ecff 0%, #ffe4d9 50%, #f1f8ff 100%);
+    --canvas-overlay: rgba(227, 242, 255, 0.55);
+    --canvas-shadow: 0 35px 120px rgba(120, 170, 225, 0.38);
+  }
 
-.bg-popover {
-  backdrop-filter: blur(15px) !important;
-  background-color: #00000050 !important;
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply text-foreground;
+    background-color: hsl(var(--background));
+    background-image: var(--page-gradient);
+    background-attachment: fixed;
+    transition: background-color 0.5s ease, color 0.5s ease, background-image 0.8s ease;
+  }
 }
 
-@property --angle{
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 90deg;
+.ts-app-surface {
+  min-height: 100vh;
+  width: 100%;
+  position: relative;
+  background-image: var(--page-gradient);
+  background-size: cover;
+  background-position: center;
+  transition: background-image 0.6s ease;
 }
 
-@keyframes spin {
-  0%{ --angle: 0deg; } 
-  100%{  --angle: 360deg; }
+.ts-surface {
+  background: var(--glass-panel);
+  border-radius: var(--panel-radius);
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(var(--glass-blur));
+  box-shadow: var(--panel-shadow);
+  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease;
 }
 
-.gum {
-    --foreground: 199 64% 73%;
-    --background: 200 95% 14%;
- 
-    --muted: 192 70% 43%;
-    --muted-foreground: 200 95% 14%;
- 
-    --popover: 32 100% 49%;
-    --popover-foreground: 43 100% 51%;
- 
-    --card: 32 100% 49%;
-    --card-foreground: 43 100% 51%;
- 
-    --border: black;
-    --input: 192 70% 43%;
- 
-    --primary: 43 100% 51%;
-    --primary-foreground: 200 95% 14%;
- 
-    --secondary: 192 70% 43%;
-    --secondary-foreground: 43 100% 51%;
- 
-    --accent: 192 70% 43%;
-    --accent-foreground: 43 100% 51%;
- 
-    --destructive: 199 64% 73%;
-    --destructive-foreground: 43 100% 51%;
- 
-    --ring: 200 95% 14%; 
+.ts-surface--compact {
+  border-radius: calc(var(--panel-radius) * 0.6);
 }
+
+.ts-button {
+  background: var(--button-surface);
+  color: var(--button-foreground);
+  border-radius: 9999px;
+  border: 1px solid var(--glass-border);
+  backdrop-filter: blur(calc(var(--glass-blur) * 0.7));
+  box-shadow: var(--button-shadow);
+  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
 }
- 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+
+.ts-button:hover {
+  background: var(--button-hover-surface);
+  color: var(--button-hover-foreground);
+  transform: translateY(-1px);
+}
+
+.ts-button--active {
+  background: hsla(var(--primary), 0.28);
+  color: hsl(var(--primary-foreground));
+  box-shadow: 0 18px 45px hsla(var(--primary), 0.32);
+}
+
+.ts-button:focus-visible {
+  outline: 2px solid hsla(var(--ring), 0.45);
+  outline-offset: 2px;
+}
+
+.ts-dropdown {
+  background: var(--glass-panel);
+  border-radius: calc(var(--panel-radius) * 0.6);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--panel-shadow);
+  backdrop-filter: blur(var(--glass-blur));
+}
+
+.ts-dropdown__item {
+  color: hsl(var(--foreground));
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.ts-dropdown__item[data-highlighted] {
+  background: hsla(var(--accent), 0.18);
+  color: hsl(var(--accent-foreground));
+}
+
+.ts-dropdown__item[data-state="checked"] {
+  background: hsla(var(--primary), 0.22);
+  color: hsl(var(--primary-foreground));
+}
+
+.ts-theme-swatch {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.125rem;
+  width: 2.5rem;
+  height: 0.75rem;
+  border-radius: 9999px;
+  overflow: hidden;
+  border: 1px solid var(--glass-border);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
+}
+
+.ts-theme-swatch__color {
+  flex: 1;
+  height: 100%;
+}
+
+.ts-tablist {
+  gap: 0.35rem;
+  padding: 0.35rem;
+  background: var(--glass-panel);
+  border-radius: 9999px;
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--panel-shadow);
+  backdrop-filter: blur(var(--glass-blur));
+}
+
+.ts-tab-trigger {
+  padding: 0.45rem 1.1rem;
+  border-radius: 9999px;
+  color: hsl(var(--muted-foreground));
+  transition: color 0.3s ease, background 0.3s ease;
+}
+
+.ts-tab-trigger[data-state="active"] {
+  background: hsla(var(--primary), 0.2);
+  color: hsl(var(--primary));
+  border-radius: 9999px;
+}
+
+.ts-text-strong {
+  color: hsl(var(--foreground));
+}
+
+.ts-text-subtle {
+  color: hsl(var(--muted-foreground));
+}
+
+.ts-text-emphasis {
+  color: hsl(var(--primary));
+}
+
+.ts-text-secondary {
+  color: hsl(var(--secondary-foreground));
+}
+
+.ts-canvas {
+  width: 100%;
+  height: 100vh;
+  background: var(--canvas-overlay);
+  box-shadow: var(--canvas-shadow);
+  border-radius: calc(var(--panel-radius) * 1.1);
+  backdrop-filter: blur(calc(var(--glass-blur) * 0.4));
+  transition: background 0.5s ease, box-shadow 0.5s ease;
+  position: relative;
+  z-index: 0;
+}
+
+.ts-panel {
+  padding: clamp(1rem, 1.8vw, 1.4rem);
+  border-radius: var(--panel-radius);
+  background: var(--glass-panel);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--panel-shadow);
+  backdrop-filter: blur(var(--glass-blur));
+  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, color 0.4s ease;
+}
+
+.ts-panel--floating {
+  border-radius: calc(var(--panel-radius) * 0.9);
+}
+
+.ts-textarea {
+  background: hsla(var(--background), 0.65);
+  color: hsl(var(--foreground));
+  border-radius: calc(var(--panel-radius) * 0.4);
+  border: 1px solid var(--glass-border);
+  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
+  transition: background 0.3s ease, border-color 0.3s ease;
+}
+
+.ts-textarea:focus-visible {
+  outline: 2px solid hsla(var(--ring), 0.45);
+  outline-offset: 2px;
+}
+
+.ts-textarea::placeholder {
+  color: hsla(var(--muted-foreground), 0.7);
+}
+
+.ts-dialog-panel {
+  background: var(--glass-panel);
+  border-radius: var(--panel-radius);
+  border: 1px solid var(--glass-border);
+  box-shadow: var(--panel-shadow);
+  backdrop-filter: blur(var(--glass-blur));
+  color: hsl(var(--foreground));
 }
diff --git a/src/app.html b/src/app.html
index 854a203..159b89b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en" data-ts-theme="lover">
 
 <head>
 	<meta charset="utf-8" />
diff --git a/src/lib/themes.ts b/src/lib/themes.ts
new file mode 100644
index 0000000..51d366f
--- /dev/null
+++ b/src/lib/themes.ts
@@ -0,0 +1,41 @@
+export type ThemeId = "lover" | "midnights" | "folklore" | "reputation" | "1989";
+
+export interface ThemeOption {
+  id: ThemeId;
+  name: string;
+  tagline: string;
+  swatch: [string, string, string];
+}
+
+export const TAYLOR_THEMES: ThemeOption[] = [
+  {
+    id: "lover",
+    name: "Lover",
+    tagline: "Pastel daydreams with cotton candy skies.",
+    swatch: ["#ffd9ec", "#f8b4d9", "#b8c9ff"],
+  },
+  {
+    id: "midnights",
+    name: "Midnights",
+    tagline: "Deep midnight blues with a hint of starlight.",
+    swatch: ["#0f172a", "#1d2671", "#7c5cff"],
+  },
+  {
+    id: "folklore",
+    name: "Folklore",
+    tagline: "Warm woods and linen-washed neutrals.",
+    swatch: ["#f1ede2", "#d7cec2", "#9a8874"],
+  },
+  {
+    id: "reputation",
+    name: "Reputation",
+    tagline: "Chromatic noir with metallic edge.",
+    swatch: ["#1a1a1a", "#2e2e2e", "#f5f5f5"],
+  },
+  {
+    id: "1989",
+    name: "1989",
+    tagline: "Polaroid breezes and sun-faded blues.",
+    swatch: ["#d8ecff", "#ffe4d9", "#6fa8ff"],
+  },
+];
diff --git a/src/routes/(components)/Popup.svelte b/src/routes/(components)/Popup.svelte
index fbe3419..e6f148e 100644
--- a/src/routes/(components)/Popup.svelte
+++ b/src/routes/(components)/Popup.svelte
@@ -6,18 +6,18 @@
 
 <div>
 		<!-- ALERT MENU -->
-		<AlertDialog.Root bind:open>
-		  <AlertDialog.Content class="border-none shadow-2xl backdrop-blur bg-black/30 shadow-[0px_0px_50px_2px_black] rounded-lg">
-		    <AlertDialog.Header>
-		      <AlertDialog.Title>Are you sure?</AlertDialog.Title>
-		      <AlertDialog.Description>
-		        This webapp is currently in development and lacks key features
-		        stay tuned for updates and dont hesitate to buy me a coffee.
-		      </AlertDialog.Description>
-		    </AlertDialog.Header>
-		    <AlertDialog.Footer>
-		      <AlertDialog.Action>Continue</AlertDialog.Action>
-		    </AlertDialog.Footer>
-		  </AlertDialog.Content>
-		</AlertDialog.Root>
+                <AlertDialog.Root bind:open>
+                  <AlertDialog.Content class="ts-dialog-panel border-none">
+                    <AlertDialog.Header>
+                      <AlertDialog.Title class="text-2xl font-semibold ts-text-strong">Are you sure?</AlertDialog.Title>
+                      <AlertDialog.Description class="ts-text-subtle">
+                        This webapp is currently in development and lacks key features
+                        stay tuned for updates and dont hesitate to buy me a coffee.
+                      </AlertDialog.Description>
+                    </AlertDialog.Header>
+                    <AlertDialog.Footer>
+                      <AlertDialog.Action class="ts-button px-6 py-2 text-sm font-semibold uppercase tracking-wide">Continue</AlertDialog.Action>
+                    </AlertDialog.Footer>
+                  </AlertDialog.Content>
+                </AlertDialog.Root>
 </div>
diff --git a/src/routes/(components)/overlay/InputCard.svelte b/src/routes/(components)/overlay/InputCard.svelte
index 96e10ef..117d56f 100644
--- a/src/routes/(components)/overlay/InputCard.svelte
+++ b/src/routes/(components)/overlay/InputCard.svelte
@@ -1,43 +1,45 @@
-<script>
-	import { input, reload } from '../../../store.js';  
+<script lang="ts">
+  import { input, reload } from "../../../store.js";
 
-	import * as Tabs from "$lib/components/ui/tabs/index.js";
-	import { Textarea } from "$lib/components/ui/textarea/index.js";
-	import { Button } from "$lib/components/ui/button/index.js";
+  import * as Tabs from "$lib/components/ui/tabs/index.js";
+  import { Textarea } from "$lib/components/ui/textarea/index.js";
+  import { Button } from "$lib/components/ui/button/index.js";
   import { Checkbox } from "$lib/components/ui/checkbox/index.js";
-	import { Label } from "$lib/components/ui/label/index.js";
-
-
+  import { Label } from "$lib/components/ui/label/index.js";
 </script>
 
 <div>
-		<div class="absolute max-width-300 items-top flex-col bottom-1 p-4 backdrop-blur bg-black/30 max-w-xl w-full shadow-[0px_0px_12px_1px_black] m-4 rounded-lg">
-			<Tabs.Root value="regex" class="w-full-[400px]">
-			  <Tabs.List>
-			    <Tabs.Trigger value="text">Text</Tabs.Trigger>
-			    <Tabs.Trigger value="regex">Regex</Tabs.Trigger>
-			  </Tabs.List>
-			  <Tabs.Content value="text">
-					<Textarea placeholder=" (Work in progress i.e does not work) Design a DFA to match 001 or 011 ocurring anywhere in the given string" class="backdrop-blur bg-black/10 resize-none border-none" />
-			  </Tabs.Content>
-			  <Tabs.Content value="regex">
-					<Textarea placeholder="(001)|((10)|(aa)|(bc))" bind:value="{$input}" class="backdrop-blur bg-black/10 resize-none border-none" />
-				</Tabs.Content>
-			</Tabs.Root>
-			<div class="flex items-center m-0 p-0">
-				<Button class="hidden bg-black/30 backdrop-blur text-slate-400 bg-gradient-to-r from-purple-900 to-pink-900 rounded-lg shadow-[0px_0px_50px_2px_black] my-4 mr-2">
-					Generate
-				</Button>
-				<Button class="bg-black/30 backdrop-blur text-slate-400 bg-gradient-to-r from-slate-800 to-slate-600 rounded-lg shadow-[0px_0px_50px_2px_black] my-4 mr-2">
-					Generate
-				</Button>
-			  <Checkbox id="terms" class="m-2" bind:checked="{$reload}" />
-				  <Label
-				    for="terms"
-				    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-				  >
-			    Auto Reload
-			  </Label>				
-			</div>
-		</div>
+  <div class="absolute bottom-1 left-0 m-4 flex w-full max-w-xl flex-col gap-4 ts-panel ts-panel--floating">
+    <Tabs.Root value="regex" class="w-full">
+      <Tabs.List class="ts-tablist">
+        <Tabs.Trigger class="ts-tab-trigger" value="text">Text</Tabs.Trigger>
+        <Tabs.Trigger class="ts-tab-trigger" value="regex">Regex</Tabs.Trigger>
+      </Tabs.List>
+      <Tabs.Content value="text">
+        <Textarea
+          placeholder="(Coming soon) Describe the language you would like to recognise"
+          class="ts-textarea resize-none"
+        />
+      </Tabs.Content>
+      <Tabs.Content value="regex">
+        <Textarea
+          placeholder="(001)|((10)|(aa)|(bc))"
+          bind:value={$input}
+          class="ts-textarea resize-none"
+        />
+      </Tabs.Content>
+    </Tabs.Root>
+    <div class="flex w-full flex-wrap items-center justify-between gap-3">
+      <Button class="ts-button px-6 py-2 text-sm font-semibold uppercase tracking-wide" variant="ghost">Generate</Button>
+      <div class="flex items-center gap-2">
+        <Checkbox id="terms" class="m-0" bind:checked={$reload} />
+        <Label
+          for="terms"
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 ts-text-subtle"
+        >
+          Auto Reload
+        </Label>
+      </div>
+    </div>
+  </div>
 </div>
diff --git a/src/routes/(components)/overlay/RightMenu.svelte b/src/routes/(components)/overlay/RightMenu.svelte
index 78da8c4..98baa2e 100644
--- a/src/routes/(components)/overlay/RightMenu.svelte
+++ b/src/routes/(components)/overlay/RightMenu.svelte
@@ -4,7 +4,7 @@
 
 </script>
 
-<div class="absolute right-1 h-full flex flex-col justify-end pointer-events-none">
+<div class="absolute right-1 top-16 bottom-0 flex flex-col justify-end pointer-events-none">
 
 		<DFATable />
 		<HelpMenu />
@@ -12,7 +12,7 @@
 		
 		<!-- iframe width="100%" style="z-index: 3" height="80" src="https://open.spotify.com/embed/episode/7makk4oTQel546B0PZlDM5?utm_source=oembed"></iframe -->
 		<!-- SPOTIFY EMBED -->
-		<div style="pointer-events: all; z-index:30;" class="mb-4 shadow-[0px_0px_12px_1px_black]">
+                <div style="pointer-events: all; z-index:30;" class="mb-4 ts-panel ts-panel--floating">
 			<div id="embed-iframe" > </div>
 		</div>
 </div>
diff --git a/src/routes/(components)/overlay/TopBar.svelte b/src/routes/(components)/overlay/TopBar.svelte
index de3e6a4..5c8bd1f 100644
--- a/src/routes/(components)/overlay/TopBar.svelte
+++ b/src/routes/(components)/overlay/TopBar.svelte
@@ -1,63 +1,93 @@
-<script>
-	import { theme } from "../../../store.js"
-	
+<script lang="ts">
+  import { theme } from "../../../store.js";
+
   import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
   import Play from "lucide-svelte/icons/play";
   import Pause from "lucide-svelte/icons/pause";
   import Ch from "lucide-svelte/icons/rotate-ccw";
-	
-	import * as Tabs from "$lib/components/ui/tabs/index.js";
-	import { Button } from "$lib/components/ui/button/index.js";
+
+  import * as Tabs from "$lib/components/ui/tabs/index.js";
+  import { Button } from "$lib/components/ui/button/index.js";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
 
-  import EditorMenuBar from "../utils/MenuBar.svelte"
-  
-	let running = true
+  import EditorMenuBar from "../utils/MenuBar.svelte";
+  import { TAYLOR_THEMES } from "$lib/themes";
+
+  let running = true;
 </script>
 
 <div>
 	<EditorMenuBar />
 	
-	<div class="absolute top-12 left-0 flex flex-cols w-full absolute">
-
-		<!-- MODE -->
-		<Tabs.Root value="account" class="m-2 shadow-[0px_0px_12px_1px_black]">
-		  <Tabs.List style="background-color: #404040f0; backdrop-filter: blur(50px)">
-		    <Tabs.Trigger value="account">NFA</Tabs.Trigger>
-		    <Tabs.Trigger value="p">DFA</Tabs.Trigger>
-		  </Tabs.List>
-		</Tabs.Root>
-		<Tabs.Root value="account" class="m-2 shadow-[0px_0px_12px_1px_black]">
-		  <Tabs.List style="background-color: #40404040; backdrop-filter: blur(50px)">
-		    <Tabs.Trigger value="account">Edit</Tabs.Trigger>
-		    <Tabs.Trigger value="p">View</Tabs.Trigger>
-		  </Tabs.List>
-		</Tabs.Root>
-
-		<!-- THEME -->
-		<div class="m-2 shadow-[0px_0px_12px_1px_black]">
-			<DropdownMenu.Root class="bg-white">
-			  <DropdownMenu.Trigger asChild let:builder>
-			    <Button style="background-color: #40404040; backdrop-filter: blur(50px)" class="text-slate-300" builders={[builder]}>Themes <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50"/></Button>
-			  </DropdownMenu.Trigger>
-			  <DropdownMenu.Content>
-			    <DropdownMenu.RadioGroup bind:value={$theme}>
-			      <DropdownMenu.RadioItem value="monochrome">monochrome</DropdownMenu.RadioItem>
-			      <DropdownMenu.RadioItem value="red">red</DropdownMenu.RadioItem>
-			      <DropdownMenu.RadioItem value="fade">fade</DropdownMenu.RadioItem>
-			      <DropdownMenu.RadioItem value="bubblegum">Gum</DropdownMenu.RadioItem>
-			    </DropdownMenu.RadioGroup>
-			  </DropdownMenu.Content>
-			</DropdownMenu.Root>
-		</div>
-
-		<!-- RUN PAUSE MENU -->
-		<div class="m-2 flex rounded-md shadow-[0px_0px_12px_1px_black]" style="background-color: #40404040; backdrop-filter: blur(50px)">
-			<Button class="m-1 h-8 mr-0 hover:bg-sky-700  w-10 bg-{running? 'sky-700': 'transparent'}" on:click={() => { running=!running;} } variant="secondary" size="sm">
-				<Play class="h-4 w-4 shrink-0 opacity-80"/>
-			</Button>
-			<Button class="hover:bg-sky-700 bg-{!running? 'sky-700': 'transparent'} m-1 ml-0 mr-1 h-8 w-10 text-slate-300" on:click={() => { running=!running;  } } variant="secondary" size="sm"><Pause class="h-4 w-4 shrink-0 opacity-80"/></Button>
-			<Button class="bg-transparent  m-1 ml-0 mr-1 h-8 w-10 text-slate-300" size="sm"><Ch class="h-4 w-4 shrink-0 opacity-80"/></Button>
-		</div>
-	</div>
+        <div class="absolute top-12 left-0 flex w-full flex-wrap items-center gap-2">
+
+                <!-- MODE -->
+                <Tabs.Root value="account" class="m-2">
+                  <Tabs.List class="ts-tablist">
+                    <Tabs.Trigger class="ts-tab-trigger" value="account">NFA</Tabs.Trigger>
+                    <Tabs.Trigger class="ts-tab-trigger" value="p">DFA</Tabs.Trigger>
+                  </Tabs.List>
+                </Tabs.Root>
+                <Tabs.Root value="account" class="m-2">
+                  <Tabs.List class="ts-tablist">
+                    <Tabs.Trigger class="ts-tab-trigger" value="account">Edit</Tabs.Trigger>
+                    <Tabs.Trigger class="ts-tab-trigger" value="p">View</Tabs.Trigger>
+                  </Tabs.List>
+                </Tabs.Root>
+
+                <!-- THEME -->
+                <div class="m-2">
+                        <DropdownMenu.Root>
+                          <DropdownMenu.Trigger asChild let:builder>
+                            <Button class="ts-button text-sm font-medium tracking-wide flex items-center gap-2" builders={[builder]} variant="ghost">
+                              Themes
+                              <ChevronsUpDown class="h-4 w-4 shrink-0 opacity-60"/>
+                            </Button>
+                          </DropdownMenu.Trigger>
+                          <DropdownMenu.Content class="ts-dropdown p-2 space-y-1" align="start">
+                            <DropdownMenu.RadioGroup bind:value={$theme}>
+                              {#each TAYLOR_THEMES as option}
+                                <DropdownMenu.RadioItem
+                                  class="ts-dropdown__item flex items-center gap-3 rounded-xl px-3 py-2"
+                                  value={option.id}
+                                >
+                                  <span class="ts-theme-swatch" aria-hidden="true">
+                                    {#each option.swatch as color}
+                                      <span class="ts-theme-swatch__color" style={`background:${color}`}></span>
+                                    {/each}
+                                  </span>
+                                  <span class="flex flex-col text-left">
+                                    <span class="text-sm font-semibold leading-tight ts-text-strong">{option.name}</span>
+                                    <span class="text-[11px] tracking-wide ts-text-subtle">{option.tagline}</span>
+                                  </span>
+                                </DropdownMenu.RadioItem>
+                              {/each}
+                            </DropdownMenu.RadioGroup>
+                          </DropdownMenu.Content>
+                        </DropdownMenu.Root>
+                </div>
+
+                <!-- RUN PAUSE MENU -->
+                <div class="m-2 flex items-center gap-1 rounded-full px-2 py-1 ts-surface ts-surface--compact">
+                        <Button
+                          class={`ts-button m-0 h-9 w-10 flex items-center justify-center ${running ? 'ts-button--active' : ''}`}
+                          on:click={() => { running = !running; }}
+                          variant="ghost"
+                          size="sm"
+                        >
+                                <Play class="h-4 w-4 shrink-0"/>
+                        </Button>
+                        <Button
+                          class={`ts-button m-0 h-9 w-10 flex items-center justify-center ${!running ? 'ts-button--active' : ''}`}
+                          on:click={() => { running = !running; }}
+                          variant="ghost"
+                          size="sm"
+                        >
+                          <Pause class="h-4 w-4 shrink-0"/>
+                        </Button>
+                        <Button class="ts-button m-0 h-9 w-10 flex items-center justify-center" size="sm" variant="ghost">
+                          <Ch class="h-4 w-4 shrink-0"/>
+                        </Button>
+                </div>
+        </div>
 </div>
diff --git a/src/routes/(components)/utils/DFATable.svelte b/src/routes/(components)/utils/DFATable.svelte
index 424391a..8197159 100644
--- a/src/routes/(components)/utils/DFATable.svelte
+++ b/src/routes/(components)/utils/DFATable.svelte
@@ -9,39 +9,39 @@
 
 <div>
 		<!-- DFA TABLE -->
-		<div class="m-0 mt-14 mb-5">
-			<Card.Root class=" p-0 relative backdrop-blur bg-black/30 max-w-xl w-full shadow-[0px_0px_12px_1px_black] rounded-lg border-none" >
-			  <Card.Header>
-			    <span class="absolute top-3 right-3" >
-			    	<i class="mi mi-chevron-down"></i>
-			    </span>
+                <div class="m-0 mt-14 mb-5">
+                        <Card.Root class="relative w-full max-w-xl p-0 ts-panel ts-panel--floating">
+                          <Card.Header class="pb-6">
+                            <span class="absolute top-3 right-3 text-xl ts-text-subtle" >
+                                <i class="mi mi-chevron-down"></i>
+                            </span>
 
-			    <Card.Title>DFA Table</Card.Title>
-			  </Card.Header>
-			  <Card.Content class="overflow-y-scrlloll" style="max-height:400px; pointer-events: all">
+                            <Card.Title class="text-xl font-semibold ts-text-strong">DFA Table</Card.Title>
+                          </Card.Header>
+                          <Card.Content class="pt-0" style="max-height:400px; pointer-events: all">
 
-					    <ScrollArea style = " max-height: 500px" class="h-72 ">
-							<Table.Root >
-							  <Table.Header>
-							    <Table.Row>
-							      <Table.Head class="w-[100px]">DFA State</Table.Head>
-							      <Table.Head>Type</Table.Head>
-							      <Table.Head>0</Table.Head>
-							      <Table.Head class="text-right">1</Table.Head>
-							    </Table.Row>
-							  </Table.Header>
-							  <Table.Body>
-							{#each $states as state}
-							      <Table.Row>
-							        <Table.Cell class="font-medium">{ state.name }</Table.Cell>
-							        <Table.Cell>{ (state.final)?"accept":"-" }</Table.Cell>
-							        <Table.Cell>{ (state.children[1])?state.children[1][0].name:'-' }</Table.Cell>
-							        <Table.Cell class="text-right">{ (state.children[0])?state.children[0][0].name:'-' }</Table.Cell>
-							      </Table.Row>
-							{/each}		
-							  </Table.Body>
-							</Table.Root>	
-							</ScrollArea>			
+                                            <ScrollArea style="max-height: 500px" class="h-72">
+                                                        <Table.Root >
+                                                          <Table.Header>
+                                                            <Table.Row class="ts-text-subtle">
+                                                              <Table.Head class="w-[100px] text-left">DFA State</Table.Head>
+                                                              <Table.Head class="text-left">Type</Table.Head>
+                                                              <Table.Head class="text-left">0</Table.Head>
+                                                              <Table.Head class="text-right">1</Table.Head>
+                                                            </Table.Row>
+                                                          </Table.Header>
+                                                          <Table.Body>
+                                                        {#each $states as state}
+                                                              <Table.Row class="ts-text-strong">
+                                                                <Table.Cell class="font-medium">{ state.name }</Table.Cell>
+                                                                <Table.Cell class="ts-text-subtle uppercase tracking-wide text-xs">{ (state.final)?"accept":"-" }</Table.Cell>
+                                                                <Table.Cell class="ts-text-subtle">{ (state.children[1])?state.children[1][0].name:'-' }</Table.Cell>
+                                                                <Table.Cell class="text-right ts-text-subtle">{ (state.children[0])?state.children[0][0].name:'-' }</Table.Cell>
+                                                              </Table.Row>
+                                                        {/each}
+                                                          </Table.Body>
+                                                        </Table.Root>
+                                                        </ScrollArea>
 				</Card.Content>
 			</Card.Root>
 		</div>
diff --git a/src/routes/(components)/utils/HelpMenu.svelte b/src/routes/(components)/utils/HelpMenu.svelte
index 4df3e37..2b99845 100644
--- a/src/routes/(components)/utils/HelpMenu.svelte
+++ b/src/routes/(components)/utils/HelpMenu.svelte
@@ -5,51 +5,51 @@
 
 <div>
 		<!-- HELP MENU -->
-		<div class="max-w-xl mb-4">
-			<Card.Root class=" w-full backdrop-blur bg-black/30 shadow-[0px_0px_12px_1px_black] bottom-5 rounded-lg border-none">
-			  <Card.Header>
-			    <span class="absolute top-3 right-3">
-			    	<i class="mi mi-chevron-down"></i>
-			    </span>
-			    <Card.Title class="inline">Shortcuts</Card.Title>
-			  </Card.Header>
-		    <Separator class="mb-2"/>
-			  <Card.Content>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Shift + Click</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Add a new State</span>
-					</div>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Alt + Click</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Add a transfomation</span>
-					</div>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Alt + G</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Rearranges the nodes</span>
-					</div>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Ctrl + Click</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Removes a State</span>
-					</div>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Ctrl + F</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Toggle Fullscreen</span>
-					</div>
-					<div class="flex justify-between p-0 m-0">
-							        <span class="font-medium text-slate-300 pr-4">Ctrl + R</span>
-									    <Separator orientation="vertical" />
-							        <span class="text-left text-slate-500 w-3/5">Reset View</span>
-					</div>
-				</Card.Content>
+                <div class="max-w-xl mb-4">
+                        <Card.Root class="w-full ts-panel ts-panel--floating">
+                          <Card.Header class="pb-6">
+                            <span class="absolute top-3 right-3 text-xl ts-text-subtle">
+                                <i class="mi mi-chevron-down"></i>
+                            </span>
+                            <Card.Title class="inline text-xl font-semibold ts-text-strong">Shortcuts</Card.Title>
+                          </Card.Header>
+                    <Separator class="mb-2"/>
+                          <Card.Content class="space-y-2">
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Shift + Click</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Add a new State</span>
+                                        </div>
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Alt + Click</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Add a transformation</span>
+                                        </div>
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Alt + G</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Rearranges the nodes</span>
+                                        </div>
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Ctrl + Click</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Removes a State</span>
+                                        </div>
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Ctrl + F</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Toggle Fullscreen</span>
+                                        </div>
+                                        <div class="flex justify-between p-0 m-0">
+                                                                <span class="font-medium ts-text-strong pr-4">Ctrl + R</span>
+                                                                            <Separator orientation="vertical" />
+                                                                <span class="text-left ts-text-subtle w-3/5">Reset View</span>
+                                        </div>
+                                </Card.Content>
 
-			  <Card.Footer>
-			    <p class="text-slate-500">Press F1 to open documentation</p>
-			  </Card.Footer>
-			  </Card.Root>
-		</div>
+                          <Card.Footer>
+                            <p class="ts-text-subtle">Press F1 to open documentation</p>
+                          </Card.Footer>
+                          </Card.Root>
+                </div>
 </div>
diff --git a/src/routes/(components)/utils/MenuBar.svelte b/src/routes/(components)/utils/MenuBar.svelte
index c6e48fe..a1118b9 100644
--- a/src/routes/(components)/utils/MenuBar.svelte
+++ b/src/routes/(components)/utils/MenuBar.svelte
@@ -1,14 +1,14 @@
 <script>
   import * as Menubar from "$lib/components/ui/menubar/index.js"
   
-	let bookmarks =""
-	let fullUrls =""
+        let bookmarks = false
+        let fullUrls = false
 	
 </script>
 
 <div>
 	<!-- MENUBAR -->
-	<Menubar.Root class="backdrop-blur bg-cardBackground/80 black/20 w-full absolute border-none shadow-[0px_0px_12px_1px_black]">
+        <Menubar.Root class="ts-surface ts-surface--compact w-full absolute border-none px-4 py-2">
 	  <Menubar.Menu >
 	    <Menubar.Trigger>File</Menubar.Trigger>
 	    <Menubar.Content>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5535f91..8d88e68 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,4 +1,25 @@
-<slot></slot>
-<script>
-import "../app.css";
+<script lang="ts">
+  import "../app.css";
+  import { onMount } from "svelte";
+  import { get } from "svelte/store";
+
+  import { theme } from "../store.js";
+
+  onMount(() => {
+    const root = document.documentElement;
+
+    const applyTheme = (value) => {
+      const resolved = value ?? "lover";
+      root.dataset.tsTheme = resolved;
+    };
+
+    applyTheme(get(theme));
+    const unsubscribe = theme.subscribe(applyTheme);
+
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
+
+<slot></slot>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 6014ece..4618e29 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -31,11 +31,11 @@
 
 </script>
 
-<div class="h-full flex-col md:flex bg-gradient-to-tr from-[#111038] via-[#000712] to-[#351033]" style="background-image: linear-gradient(var(--angle), var(--tw-gradient-stops)) !important; animation: spin 5s ease infinite">
-				<Overlay />
+<div class="ts-app-surface flex flex-col items-stretch overflow-hidden">
+                                <canvas id="DFA" class="ts-canvas" tabindex="0"></canvas>
 
-				<canvas id="DFA" style="background-image: none; background: #00000050" tabindex=0></canvas>
+                                <Overlay />
 
-				<SpotifyEmbed />
-				<Popup />
+                                <SpotifyEmbed />
+                                <Popup />
 </div>