diff --git a/drizzle/0000_numerous_chronomancer.sql b/drizzle/0000_numerous_chronomancer.sql
new file mode 100644
index 0000000..2848ea6
--- /dev/null
+++ b/drizzle/0000_numerous_chronomancer.sql
@@ -0,0 +1,31 @@
+CREATE TABLE `lobbys` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`host_email` text,
+	FOREIGN KEY (`host_email`) REFERENCES `users`(`email`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `sessions` (
+	`id` text PRIMARY KEY NOT NULL,
+	`access_token` text,
+	`refresh_token` text,
+	`user_email` text,
+	FOREIGN KEY (`user_email`) REFERENCES `users`(`email`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `auth_states` (
+	`id` text PRIMARY KEY NOT NULL,
+	`code_verifier` text NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE `user_in_lobby` (
+	`user_email` text NOT NULL,
+	`lobby_id` integer NOT NULL,
+	PRIMARY KEY(`user_email`, `lobby_id`),
+	FOREIGN KEY (`user_email`) REFERENCES `users`(`email`) ON UPDATE no action ON DELETE no action,
+	FOREIGN KEY (`lobby_id`) REFERENCES `lobbys`(`id`) ON UPDATE no action ON DELETE no action
+);
+--> statement-breakpoint
+CREATE TABLE `users` (
+	`email` text PRIMARY KEY NOT NULL,
+	`username` text
+);
diff --git a/drizzle/meta/0000_snapshot.json b/drizzle/meta/0000_snapshot.json
new file mode 100644
index 0000000..847f7c0
--- /dev/null
+++ b/drizzle/meta/0000_snapshot.json
@@ -0,0 +1,215 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "6bf15c3f-ef71-4979-b04a-1a93b3274a23",
+  "prevId": "00000000-0000-0000-0000-000000000000",
+  "tables": {
+    "lobbys": {
+      "name": "lobbys",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "host_email": {
+          "name": "host_email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "lobbys_host_email_users_email_fk": {
+          "name": "lobbys_host_email_users_email_fk",
+          "tableFrom": "lobbys",
+          "tableTo": "users",
+          "columnsFrom": [
+            "host_email"
+          ],
+          "columnsTo": [
+            "email"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "sessions": {
+      "name": "sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "user_email": {
+          "name": "user_email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_email_users_email_fk": {
+          "name": "sessions_user_email_users_email_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_email"
+          ],
+          "columnsTo": [
+            "email"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "auth_states": {
+      "name": "auth_states",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "code_verifier": {
+          "name": "code_verifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_in_lobby": {
+      "name": "user_in_lobby",
+      "columns": {
+        "user_email": {
+          "name": "user_email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lobby_id": {
+          "name": "lobby_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_in_lobby_user_email_users_email_fk": {
+          "name": "user_in_lobby_user_email_users_email_fk",
+          "tableFrom": "user_in_lobby",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_email"
+          ],
+          "columnsTo": [
+            "email"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        },
+        "user_in_lobby_lobby_id_lobbys_id_fk": {
+          "name": "user_in_lobby_lobby_id_lobbys_id_fk",
+          "tableFrom": "user_in_lobby",
+          "tableTo": "lobbys",
+          "columnsFrom": [
+            "lobby_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_in_lobby_user_email_lobby_id_pk": {
+          "columns": [
+            "user_email",
+            "lobby_id"
+          ],
+          "name": "user_in_lobby_user_email_lobby_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}
\ No newline at end of file
diff --git a/drizzle/meta/_journal.json b/drizzle/meta/_journal.json
new file mode 100644
index 0000000..f9f6579
--- /dev/null
+++ b/drizzle/meta/_journal.json
@@ -0,0 +1,13 @@
+{
+  "version": "7",
+  "dialect": "sqlite",
+  "entries": [
+    {
+      "idx": 0,
+      "version": "6",
+      "when": 1758887320368,
+      "tag": "0000_numerous_chronomancer",
+      "breakpoints": true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 243af89..15f268d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,8 +8,10 @@
 			"name": "hitstar",
 			"version": "0.0.1",
 			"dependencies": {
+				"@tailwindcss/vite": "^4.1.14",
 				"better-sqlite3": "^11.8.0",
-				"drizzle-orm": "^0.40.0"
+				"drizzle-orm": "^0.40.0",
+				"tailwindcss": "^4.1.14"
 			},
 			"devDependencies": {
 				"@eslint/compat": "^1.2.5",
@@ -772,7 +774,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -806,7 +807,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -840,7 +840,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1156,11 +1155,22 @@
 				"url": "https://github.com/sponsors/nzakas"
 			}
 		},
+		"node_modules/@isaacs/fs-minipass": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+			"integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+			"license": "ISC",
+			"dependencies": {
+				"minipass": "^7.0.4"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1171,7 +1181,6 @@
 			"version": "2.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
 			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -1182,7 +1191,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -1192,14 +1200,12 @@
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.30",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
 			"integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -1361,7 +1367,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1375,7 +1380,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1389,7 +1393,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1403,7 +1406,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1417,7 +1419,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1431,7 +1432,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1445,7 +1445,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1459,7 +1458,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1473,7 +1471,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1487,7 +1484,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1501,7 +1497,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1515,7 +1510,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1529,7 +1523,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1543,7 +1536,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1557,7 +1549,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1571,7 +1562,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1585,7 +1575,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1599,7 +1588,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1613,7 +1601,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1627,7 +1614,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1641,7 +1627,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -1687,6 +1672,7 @@
 			"integrity": "sha512-xgKtpjQ6Ry4mdShd01ht5AODUsW7+K1iValPDq7QX8zI1hWOKREH9GjG8SRCN5tC4K7UXmMhuQam7gbLByVcnw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@standard-schema/spec": "^1.0.0",
 				"@sveltejs/acorn-typescript": "^1.0.5",
@@ -1726,6 +1712,7 @@
 			"integrity": "sha512-3pppgIeIZs6nrQLazzKcdnTJ2IWiui/UucEPXKyFG35TKaHQrfkWBnv6hyJcLxFuR90t+LaoecrqTs8rJKWfSQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@sveltejs/vite-plugin-svelte-inspector": "^5.0.0",
 				"debug": "^4.4.1",
@@ -1760,12 +1747,275 @@
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@tailwindcss/node": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.14.tgz",
+			"integrity": "sha512-hpz+8vFk3Ic2xssIA3e01R6jkmsAhvkQdXlEbRTk6S10xDAtiQiM3FyvZVGsucefq764euO/b8WUW9ysLdThHw==",
+			"license": "MIT",
+			"dependencies": {
+				"@jridgewell/remapping": "^2.3.4",
+				"enhanced-resolve": "^5.18.3",
+				"jiti": "^2.6.0",
+				"lightningcss": "1.30.1",
+				"magic-string": "^0.30.19",
+				"source-map-js": "^1.2.1",
+				"tailwindcss": "4.1.14"
+			}
+		},
+		"node_modules/@tailwindcss/oxide": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.14.tgz",
+			"integrity": "sha512-23yx+VUbBwCg2x5XWdB8+1lkPajzLmALEfMb51zZUBYaYVPDQvBSD/WYDqiVyBIo2BZFa3yw1Rpy3G2Jp+K0dw==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"dependencies": {
+				"detect-libc": "^2.0.4",
+				"tar": "^7.5.1"
+			},
+			"engines": {
+				"node": ">= 10"
+			},
+			"optionalDependencies": {
+				"@tailwindcss/oxide-android-arm64": "4.1.14",
+				"@tailwindcss/oxide-darwin-arm64": "4.1.14",
+				"@tailwindcss/oxide-darwin-x64": "4.1.14",
+				"@tailwindcss/oxide-freebsd-x64": "4.1.14",
+				"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.14",
+				"@tailwindcss/oxide-linux-arm64-gnu": "4.1.14",
+				"@tailwindcss/oxide-linux-arm64-musl": "4.1.14",
+				"@tailwindcss/oxide-linux-x64-gnu": "4.1.14",
+				"@tailwindcss/oxide-linux-x64-musl": "4.1.14",
+				"@tailwindcss/oxide-wasm32-wasi": "4.1.14",
+				"@tailwindcss/oxide-win32-arm64-msvc": "4.1.14",
+				"@tailwindcss/oxide-win32-x64-msvc": "4.1.14"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-android-arm64": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.14.tgz",
+			"integrity": "sha512-a94ifZrGwMvbdeAxWoSuGcIl6/DOP5cdxagid7xJv6bwFp3oebp7y2ImYsnZBMTwjn5Ev5xESvS3FFYUGgPODQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"android"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-arm64": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.14.tgz",
+			"integrity": "sha512-HkFP/CqfSh09xCnrPJA7jud7hij5ahKyWomrC3oiO2U9i0UjP17o9pJbxUN0IJ471GTQQmzwhp0DEcpbp4MZTA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-darwin-x64": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.14.tgz",
+			"integrity": "sha512-eVNaWmCgdLf5iv6Qd3s7JI5SEFBFRtfm6W0mphJYXgvnDEAZ5sZzqmI06bK6xo0IErDHdTA5/t7d4eTfWbWOFw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-freebsd-x64": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.14.tgz",
+			"integrity": "sha512-QWLoRXNikEuqtNb0dhQN6wsSVVjX6dmUFzuuiL09ZeXju25dsei2uIPl71y2Ic6QbNBsB4scwBoFnlBfabHkEw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.14.tgz",
+			"integrity": "sha512-VB4gjQni9+F0VCASU+L8zSIyjrLLsy03sjcR3bM0V2g4SNamo0FakZFKyUQ96ZVwGK4CaJsc9zd/obQy74o0Fw==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.14.tgz",
+			"integrity": "sha512-qaEy0dIZ6d9vyLnmeg24yzA8XuEAD9WjpM5nIM1sUgQ/Zv7cVkharPDQcmm/t/TvXoKo/0knI3me3AGfdx6w1w==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.14.tgz",
+			"integrity": "sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.14.tgz",
+			"integrity": "sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-linux-x64-musl": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.14.tgz",
+			"integrity": "sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-wasm32-wasi": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.14.tgz",
+			"integrity": "sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==",
+			"bundleDependencies": [
+				"@napi-rs/wasm-runtime",
+				"@emnapi/core",
+				"@emnapi/runtime",
+				"@tybys/wasm-util",
+				"@emnapi/wasi-threads",
+				"tslib"
+			],
+			"cpu": [
+				"wasm32"
+			],
+			"license": "MIT",
+			"optional": true,
+			"dependencies": {
+				"@emnapi/core": "^1.5.0",
+				"@emnapi/runtime": "^1.5.0",
+				"@emnapi/wasi-threads": "^1.1.0",
+				"@napi-rs/wasm-runtime": "^1.0.5",
+				"@tybys/wasm-util": "^0.10.1",
+				"tslib": "^2.4.0"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.14.tgz",
+			"integrity": "sha512-Az0RnnkcvRqsuoLH2Z4n3JfAef0wElgzHD5Aky/e+0tBUxUhIeIqFBTMNQvmMRSP15fWwmvjBxZ3Q8RhsDnxAA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.14.tgz",
+			"integrity": "sha512-ttblVGHgf68kEE4om1n/n44I0yGPkCPbLsqzjvybhpwa6mKKtgFfAzy6btc3HRmuW7nHe0OOrSeNP9sQmmH9XA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 10"
+			}
+		},
+		"node_modules/@tailwindcss/vite": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.14.tgz",
+			"integrity": "sha512-BoFUoU0XqgCUS1UXWhmDJroKKhNXeDzD7/XwabjkDIAbMnc4ULn5e2FuEuBbhZ6ENZoSYzKlzvZ44Yr6EUDUSA==",
+			"license": "MIT",
+			"dependencies": {
+				"@tailwindcss/node": "4.1.14",
+				"@tailwindcss/oxide": "4.1.14",
+				"tailwindcss": "4.1.14"
+			},
+			"peerDependencies": {
+				"vite": "^5.2.0 || ^6 || ^7"
+			}
+		},
 		"node_modules/@types/better-sqlite3": {
 			"version": "7.6.13",
 			"resolved": "https://registry.npmjs.org/@types/better-sqlite3/-/better-sqlite3-7.6.13.tgz",
 			"integrity": "sha512-NMv9ASNARoKksWtsq/SHakpYAYnhBrQgGD8zkLYk/jaK8jUGn08CfEdTRgYhMypUQAfzSP8W6gNLe0q19/t4VA==",
 			"devOptional": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/node": "*"
 			}
@@ -1781,7 +2031,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/json-schema": {
@@ -1854,6 +2103,7 @@
 			"integrity": "sha512-gTtSdWX9xiMPA/7MV9STjJOOYtWwIJIYxkQxnSV1U3xcE+mnJSH3f6zI0RYP+ew66WSlZ5ed+h0VCxsvdC1jJg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@typescript-eslint/scope-manager": "8.41.0",
 				"@typescript-eslint/types": "8.41.0",
@@ -2072,6 +2322,7 @@
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"acorn": "bin/acorn"
 			},
@@ -2182,6 +2433,7 @@
 			"integrity": "sha512-EwhOpyXiOEL/lKzHz9AW1msWFNzGc/z+LzeB3/jnFJpxu+th2yqvzsSWas1v9jgs9+xiXJcD5A8CJxAG2TaghQ==",
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"bindings": "^1.5.0",
 				"prebuild-install": "^7.1.1"
@@ -2615,6 +2867,19 @@
 				"once": "^1.4.0"
 			}
 		},
+		"node_modules/enhanced-resolve": {
+			"version": "5.18.3",
+			"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+			"integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+			"license": "MIT",
+			"dependencies": {
+				"graceful-fs": "^4.2.4",
+				"tapable": "^2.2.0"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			}
+		},
 		"node_modules/env-paths": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/env-paths/-/env-paths-3.0.0.tgz",
@@ -2635,6 +2900,7 @@
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"esbuild": "bin/esbuild"
 			},
@@ -2699,6 +2965,7 @@
 			"integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@eslint-community/eslint-utils": "^4.2.0",
 				"@eslint-community/regexpp": "^4.12.1",
@@ -2996,7 +3263,6 @@
 			"version": "6.5.0",
 			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
 			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12.0.0"
@@ -3090,7 +3356,6 @@
 			"version": "2.3.3",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
 			"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"optional": true,
@@ -3117,6 +3382,7 @@
 			"integrity": "sha512-Newg9X7mRYskoBjSw70l1YnJ/ZGbq64VPyR821H5WVkTGpHG2O0mQILxCeUhxdYERLFY9B4tUyKLyf3uMTjtKw==",
 			"devOptional": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"dependencies": {
 				"@petamoriken/float16": "^3.8.7",
 				"debug": "^4.3.4",
@@ -3203,6 +3469,12 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/graceful-fs": {
+			"version": "4.2.11",
+			"resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+			"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+			"license": "ISC"
+		},
 		"node_modules/graphemer": {
 			"version": "1.4.0",
 			"resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -3375,6 +3647,15 @@
 			"dev": true,
 			"license": "ISC"
 		},
+		"node_modules/jiti": {
+			"version": "2.6.1",
+			"resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+			"integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+			"license": "MIT",
+			"bin": {
+				"jiti": "lib/jiti-cli.mjs"
+			}
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -3450,6 +3731,234 @@
 				"node": ">= 0.8.0"
 			}
 		},
+		"node_modules/lightningcss": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+			"integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+			"license": "MPL-2.0",
+			"dependencies": {
+				"detect-libc": "^2.0.3"
+			},
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			},
+			"optionalDependencies": {
+				"lightningcss-darwin-arm64": "1.30.1",
+				"lightningcss-darwin-x64": "1.30.1",
+				"lightningcss-freebsd-x64": "1.30.1",
+				"lightningcss-linux-arm-gnueabihf": "1.30.1",
+				"lightningcss-linux-arm64-gnu": "1.30.1",
+				"lightningcss-linux-arm64-musl": "1.30.1",
+				"lightningcss-linux-x64-gnu": "1.30.1",
+				"lightningcss-linux-x64-musl": "1.30.1",
+				"lightningcss-win32-arm64-msvc": "1.30.1",
+				"lightningcss-win32-x64-msvc": "1.30.1"
+			}
+		},
+		"node_modules/lightningcss-darwin-arm64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+			"integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-darwin-x64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+			"integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"darwin"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-freebsd-x64": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+			"integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"freebsd"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm-gnueabihf": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+			"integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+			"cpu": [
+				"arm"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-gnu": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+			"integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-arm64-musl": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+			"integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-gnu": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+			"integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-linux-x64-musl": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+			"integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"linux"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-arm64-msvc": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+			"integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+			"cpu": [
+				"arm64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
+		"node_modules/lightningcss-win32-x64-msvc": {
+			"version": "1.30.1",
+			"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+			"integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+			"cpu": [
+				"x64"
+			],
+			"license": "MPL-2.0",
+			"optional": true,
+			"os": [
+				"win32"
+			],
+			"engines": {
+				"node": ">= 12.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/parcel"
+			}
+		},
 		"node_modules/lilconfig": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -3491,10 +4000,9 @@
 			"license": "MIT"
 		},
 		"node_modules/magic-string": {
-			"version": "0.30.18",
-			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.18.tgz",
-			"integrity": "sha512-yi8swmWbO17qHhwIBNeeZxTceJMeBvWJaId6dyvTSOwTipqeHhMhOrz6513r1sOKnpvQ7zkhlG8tPrpilwTxHQ==",
-			"dev": true,
+			"version": "0.30.19",
+			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
+			"integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -3571,6 +4079,27 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/minipass": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+			"integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+			"license": "ISC",
+			"engines": {
+				"node": ">=16 || 14 >=14.17"
+			}
+		},
+		"node_modules/minizlib": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.1.0.tgz",
+			"integrity": "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==",
+			"license": "MIT",
+			"dependencies": {
+				"minipass": "^7.1.2"
+			},
+			"engines": {
+				"node": ">= 18"
+			}
+		},
 		"node_modules/mkdirp-classic": {
 			"version": "0.5.3",
 			"resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -3608,7 +4137,6 @@
 			"version": "3.3.11",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "github",
@@ -3751,14 +4279,12 @@
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
 			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=12"
@@ -3771,7 +4297,6 @@
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
 			"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-			"dev": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -3787,6 +4312,7 @@
 				}
 			],
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.11",
 				"picocolors": "^1.1.1",
@@ -3946,6 +4472,7 @@
 			"integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"prettier": "bin/prettier.cjs"
 			},
@@ -4116,8 +4643,8 @@
 			"version": "4.50.0",
 			"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.50.0.tgz",
 			"integrity": "sha512-/Zl4D8zPifNmyGzJS+3kVoyXeDeT/GrsJM94sACNg9RtUE0hrHa1bNPtRSrfHTMH5HjRzce6K7rlTh3Khiw+pw==",
-			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@types/estree": "1.0.8"
 			},
@@ -4339,7 +4866,6 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
@@ -4410,6 +4936,7 @@
 			"integrity": "sha512-ltBPlkvqk3bgCK7/N323atUpP3O3Y+DrGV4dcULrsSn4fZaaNnOmdplNznwfdWclAgvSr5rxjtzn/zJhRm6TKg==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -4493,6 +5020,41 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/tailwindcss": {
+			"version": "4.1.14",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
+			"integrity": "sha512-b7pCxjGO98LnxVkKjaZSDeNuljC4ueKUddjENJOADtubtdo8llTaJy7HwBMeLNSSo2N5QIAgklslK1+Ir8r6CA==",
+			"license": "MIT"
+		},
+		"node_modules/tapable": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+			"integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/webpack"
+			}
+		},
+		"node_modules/tar": {
+			"version": "7.5.1",
+			"resolved": "https://registry.npmjs.org/tar/-/tar-7.5.1.tgz",
+			"integrity": "sha512-nlGpxf+hv0v7GkWBK2V9spgactGOp0qvfWRxUMjqHyzrt3SgwE48DIv/FhqPHJYLHpgW1opq3nERbz5Anq7n1g==",
+			"license": "ISC",
+			"dependencies": {
+				"@isaacs/fs-minipass": "^4.0.0",
+				"chownr": "^3.0.0",
+				"minipass": "^7.1.2",
+				"minizlib": "^3.1.0",
+				"yallist": "^5.0.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/tar-fs": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
@@ -4521,11 +5083,19 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/tar/node_modules/chownr": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+			"integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/tinyglobby": {
 			"version": "0.2.14",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz",
 			"integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"fdir": "^6.4.4",
@@ -4605,6 +5175,7 @@
 			"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
 			"dev": true,
 			"license": "Apache-2.0",
+			"peer": true,
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"
@@ -4664,8 +5235,8 @@
 			"version": "7.1.4",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.4.tgz",
 			"integrity": "sha512-X5QFK4SGynAeeIt+A7ZWnApdUyHYm+pzv/8/A57LqSGcI88U6R6ipOs3uCesdc6yl7nl+zNO0t8LmqAdXcQihw==",
-			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.25.0",
 				"fdir": "^6.5.0",
@@ -4742,7 +5313,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4759,7 +5329,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4776,7 +5345,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4793,7 +5361,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4810,7 +5377,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4827,7 +5393,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4844,7 +5409,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4861,7 +5425,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4878,7 +5441,6 @@
 			"cpu": [
 				"arm"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4895,7 +5457,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4912,7 +5473,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4929,7 +5489,6 @@
 			"cpu": [
 				"loong64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4946,7 +5505,6 @@
 			"cpu": [
 				"mips64el"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4963,7 +5521,6 @@
 			"cpu": [
 				"ppc64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4980,7 +5537,6 @@
 			"cpu": [
 				"riscv64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -4997,7 +5553,6 @@
 			"cpu": [
 				"s390x"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5014,7 +5569,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5031,7 +5585,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5048,7 +5601,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5065,7 +5617,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5082,7 +5633,6 @@
 			"cpu": [
 				"arm64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5099,7 +5649,6 @@
 			"cpu": [
 				"ia32"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5116,7 +5665,6 @@
 			"cpu": [
 				"x64"
 			],
-			"dev": true,
 			"license": "MIT",
 			"optional": true,
 			"os": [
@@ -5130,7 +5678,6 @@
 			"version": "0.25.9",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
 			"integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
-			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
 			"bin": {
@@ -5220,6 +5767,15 @@
 			"integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
 			"license": "ISC"
 		},
+		"node_modules/yallist": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+			"integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+			"license": "BlueOak-1.0.0",
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/package.json b/package.json
index e0f0bfe..8c43b95 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,9 @@
 		"vite": "^7.0.4"
 	},
 	"dependencies": {
+		"@tailwindcss/vite": "^4.1.14",
 		"better-sqlite3": "^11.8.0",
-		"drizzle-orm": "^0.40.0"
+		"drizzle-orm": "^0.40.0",
+		"tailwindcss": "^4.1.14"
 	}
 }
diff --git a/src/app.css b/src/app.css
new file mode 100644
index 0000000..f1d8c73
--- /dev/null
+++ b/src/app.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/src/app.d.ts b/src/app.d.ts
index ce1aeb9..3e56cf1 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -18,4 +18,35 @@ declare global {
 	}
 }
 
-export { };
+export interface Player {
+  id: number;
+  name: string;
+  isHost: boolean;
+}
+
+export interface GameMode {
+  id: string;
+  name: string;
+}
+
+export interface Playlist {
+  id: number;
+  name: string;
+  imageUrl: string;
+  songCount: number;
+}
+
+export interface GameSettings {
+  maxPlayers: number;
+  gameMode: string;
+  selectedPlaylist: number;
+}
+
+export type WebSocketMessage = {
+  type: string;
+  [key: string]: any;
+}
+
+export {
+
+};
diff --git a/src/lib/components/GameSettings.svelte b/src/lib/components/GameSettings.svelte
new file mode 100644
index 0000000..92e107f
--- /dev/null
+++ b/src/lib/components/GameSettings.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+	import type { GameMode, Playlist, Settings } from '$lib/types';
+	import PlaylistSelector from './PlaylistSelector.svelte';
+
+	let {
+		settings,
+		gameModes,
+		playlists,
+		isHost,
+		onUpdate
+	}: {
+		settings: Settings;
+		gameModes: GameMode[];
+		playlists: Playlist[];
+		isHost: boolean;
+		onUpdate: (settings: Settings) => void;
+	} = $props();
+
+	let localSettings = $state<Settings>({
+		maxPlayers: settings.maxPlayers,
+		gameMode: settings.gameMode,
+		selectedPlaylistId: settings.selectedPlaylistId
+	});
+
+	$effect(() => {
+		// Update local settings when change
+		localSettings = {
+			maxPlayers: settings.maxPlayers,
+			gameMode: settings.gameMode,
+			selectedPlaylistId: settings.selectedPlaylistId
+		};
+	});
+
+	function updateMaxPlayers(value: number) {
+		if (value >= 2 && value <= 16) {
+			localSettings.maxPlayers = value;
+			onUpdate(localSettings);
+		}
+	}
+
+	function updateGameMode(modeId: string) {
+		localSettings.gameMode = modeId;
+		onUpdate(localSettings);
+	}
+
+	function updatePlaylist(playlistId: number) {
+		localSettings.selectedPlaylistId = playlistId;
+		onUpdate(localSettings);
+	}
+
+	let selectedPlaylist = $derived(
+		playlists.find((p: Playlist) => p.id === localSettings.selectedPlaylistId)
+	);
+	let selectedGameMode = $derived(gameModes.find((m: GameMode) => m.id === localSettings.gameMode));
+</script>
+
+<div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100">
+	<h2 class="text-xl font-semibold text-gray-800 mb-4">Game Settings</h2>
+
+	{#if isHost}
+		<div class="space-y-6">
+			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
+				<label class="block text-sm font-medium text-gray-700 mb-1">Max Players</label>
+				<div class="flex items-center">
+					<!-- svelte-ignore a11y_consider_explicit_label -->
+					<button
+						class="flex-shrink-0 bg-gray-200 hover:bg-gray-300 text-gray-600 h-10 w-10 rounded-l flex items-center justify-center"
+						onclick={() => updateMaxPlayers(localSettings.maxPlayers - 1)}
+						disabled={localSettings.maxPlayers <= 2}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+					<span
+						class="h-10 bg-gray-100 text-gray-800 font-medium px-4 flex items-center justify-center min-w-[50px]"
+					>
+						{localSettings.maxPlayers}
+					</span>
+					<!-- svelte-ignore a11y_consider_explicit_label -->
+					<button
+						class="flex-shrink-0 bg-gray-200 hover:bg-gray-300 text-gray-600 h-10 w-10 rounded-r flex items-center justify-center"
+						onclick={() => updateMaxPlayers(localSettings.maxPlayers + 1)}
+						disabled={localSettings.maxPlayers >= 16}
+					>
+						<svg
+							xmlns="http:/www.w3.org/2000/svg"
+							class="h-5 w-5"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+
+			<div>
+				<!-- svelte-ignore a11y_label_has_associated_control -->
+				<label class="block text-sm font-medium text-gray-700 mb-2">Game Mode</label>
+				<div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+					{#each gameModes as mode (mode.id)}
+						<button
+							class="p-3 rounded-lg text-center transition-colors {localSettings.gameMode ===
+							mode.id
+								? 'bg-blue-100 border-blue-200 text-blue-700'
+								: 'bg-gray-50 border-gray-100 text-gray-700'} border"
+							onclick={() => updateGameMode(mode.id)}
+						>
+							{mode.name}
+						</button>
+					{/each}
+				</div>
+			</div>
+
+			<div class="mt-4">
+				<!-- svelte-ignore a11y_label_has_associated_control -->
+				<label class="block text-sm font-medium text-gray-700 mb-2">Playlist</label>
+				<PlaylistSelector
+					{playlists}
+					selectedPlaylistId={localSettings.selectedPlaylistId}
+					onSelect={updatePlaylist}
+				/>
+			</div>
+		</div>
+	{:else}
+		<p class="text-gray-600 italic mb-4">The host is configuring game settings...</p>
+
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
+			<div class="bg-gray-50 p-3 rounded-md">
+				<p class="text-sm text-gray-500 mb-1">Max Players</p>
+				<p class="font-medium">{settings.maxPlayers}</p>
+			</div>
+			<div class="bg-gray-50 p-3 rounded-md">
+				<p class="text-sm text-gray-500 mb-1">Game Mode</p>
+				<p class="font-medium">{selectedGameMode?.name || 'Unknown'}</p>
+			</div>
+			<div class="bg-gray-50 p-3 rounded-md">
+				<p class="text-sm text-gray-500 mb-1">Playlist</p>
+				<p class="font-medium">{selectedPlaylist?.name || 'Unknown'}</p>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/components/PlayerList.svelte b/src/lib/components/PlayerList.svelte
new file mode 100644
index 0000000..c755615
--- /dev/null
+++ b/src/lib/components/PlayerList.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Player } from '$lib/types';
+  
+  let {players = [], maxPlayers = 8 }: { players: Player[], maxPlayers: number} = $props();
+</script>
+
+<div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100">
+  <div class="flex justify-between items-center mb-4">
+    <h2 class="text-xl font-semibold text-gray-800">Players</h2>
+    <span class="text-sm text-gray-500">{players.length}/{maxPlayers}</span>
+  </div>
+  
+  <ul class="space-y-2">
+    {#each players as player (player.id)}
+      <li class="flex items-center p-2 rounded-md {player.isHost ? 'bg-blue-50' : 'bg-gray-50'}">
+        <div class="bg-gradient-to-br from-blue-500 to-indigo-600 h-8 w-8 rounded-full flex items-center justify-center text-white font-medium text-sm">
+          {player.name.substring(0, 2).toUpperCase()}
+        </div>
+        <span class="ml-2 text-gray-800 font-medium">{player.name}</span>
+        
+        {#if player.isHost}
+          <span class="ml-auto flex items-center text-blue-600 text-sm font-medium">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M9.504 5.071a.5.5 0 01.992 0l1.5 10a.5.5 0 01-.992 0l-1.5-10zM8 9a1 1 0 100 2h4a1 1 0 100-2H8z" />
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12z" clip-rule="evenodd" />
+            </svg>
+            Host
+          </span>
+        {/if}
+      </li>
+    {/each}
+    
+    {#if players.length < maxPlayers}
+      {#each Array(maxPlayers - players.length) as _}
+        <li class="p-2 rounded-md border border-dashed border-gray-200 text-center text-gray-400 text-sm">
+          Waiting for player...
+        </li>
+      {/each}
+    {/if}
+  </ul>
+</div>
diff --git a/src/lib/components/PlaylistSelector.svelte b/src/lib/components/PlaylistSelector.svelte
new file mode 100644
index 0000000..cda9456
--- /dev/null
+++ b/src/lib/components/PlaylistSelector.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Playlist } from '$lib/types';
+  
+  const props = $props<{
+    playlists: Playlist[];
+    selectedPlaylistId: number;
+    onSelect: (id: number) => void;
+  }>();
+  
+  let searchQuery = $state('');
+  
+  let filteredPlaylists = $derived(props.playlists.filter((playlist: Playlist) => 
+    playlist.name.toLowerCase().includes(searchQuery.toLowerCase())
+  ));
+</script>
+
+<div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100">
+  <h2 class="text-xl font-semibold text-gray-800 mb-4">Select Playlist</h2>
+  
+  <div class="mb-3">
+    <input
+      type="text"
+      placeholder="Search playlists..."
+      bind:value={searchQuery}
+      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+    />
+  </div>
+  
+  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-h-64 overflow-y-auto p-1">
+    {#each filteredPlaylists as playlist (playlist.id)}
+      <button 
+        class="flex flex-col items-center text-left p-3 rounded-lg transition-all {props.selectedPlaylistId === playlist.id ? 'bg-blue-50 border-blue-200 border' : 'bg-gray-50 hover:bg-gray-100 border-gray-100 border'}"
+        onclick={() => props.onSelect(playlist.id)}
+      >
+        <div class="w-full aspect-square mb-2 rounded-md overflow-hidden">
+          <img 
+            src={playlist.imageUrl} 
+            alt={playlist.name}
+            class="w-full h-full object-cover"
+          />
+        </div>
+        <div class="w-full">
+          <h3 class="font-medium text-gray-900 truncate">{playlist.name}</h3>
+          <p class="text-sm text-gray-500">{playlist.songCount} songs</p>
+        </div>
+      </button>
+    {/each}
+    
+    {#if filteredPlaylists.length === 0}
+      <div class="col-span-3 py-8 text-center text-gray-500">
+        No playlists found matching "{searchQuery}"
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/lib/types.ts b/src/lib/types.ts
new file mode 100644
index 0000000..6e96788
--- /dev/null
+++ b/src/lib/types.ts
@@ -0,0 +1,28 @@
+export interface Player {
+  id: number;
+  name: string;
+  isHost: boolean;
+}
+
+export interface GameMode {
+  id: string;
+  name: string;
+}
+
+export interface Playlist {
+  id: number;
+  name: string;
+  imageUrl: string;
+  songCount: number;
+}
+
+export interface Settings {
+  maxPlayers: number;
+  gameMode: string;
+  selectedPlaylistId: number;
+}
+
+export interface WebSocketMessage {
+  type: string;
+  [key: string]: any;
+}
diff --git a/src/lib/websocketClient.ts b/src/lib/websocketClient.ts
new file mode 100644
index 0000000..09b5a3b
--- /dev/null
+++ b/src/lib/websocketClient.ts
@@ -0,0 +1,83 @@
+import type { Player, Settings, WebSocketMessage } from './types';
+
+export function createWebSocketClient() {
+  let socket: WebSocket | null = null;
+
+  let connected = false;
+  let players: Player[] = [];
+  let gameSettings: Settings = {
+    maxPlayers: 8,
+    gameMode: 'classic',
+    selectedPlaylistId: 1
+  };
+
+  function connect(url: string): void {
+    if (socket) socket.close();
+
+    socket = new WebSocket(url);
+
+    socket.onopen = () => {
+      connected = true;
+    };
+
+    socket.onclose = () => {
+      connected = false;
+    };
+
+    socket.onerror = (error) => {
+      console.error('WebSocket error:', error);
+    };
+
+    socket.onmessage = (event: MessageEvent) => {
+      try {
+        const message = JSON.parse(event.data) as WebSocketMessage;
+
+        switch (message.type) {
+          case 'playerJoin':
+            players = [...players, message.player];
+            break;
+
+          case 'playerLeave':
+            players = players.filter(p => p.id !== message.playerId);
+            break;
+
+          case 'playerList':
+            players = message.players;
+            break;
+
+          case 'settingsUpdate':
+            gameSettings = message.settings;
+            break;
+        }
+      } catch (error) {
+        console.error('Failed to parse WebSocket message:', error);
+      }
+    };
+  }
+
+  function sendMessage(message: WebSocketMessage): void {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify(message));
+    } else {
+      console.warn('Cannot send message, WebSocket is not connected');
+    }
+  }
+
+  function disconnect(): void {
+    if (socket) {
+      socket.close();
+      socket = null;
+    }
+    connected = false;
+    players = [];
+  }
+
+  return {
+    connected,
+    players,
+    gameSettings,
+    connect,
+    sendMessage,
+    disconnect
+  };
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 20f8d04..b544af2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
-
+  import "../app.css";
 	let { children } = $props();
 </script>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cd92ff2..9ac4461 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -28,6 +28,8 @@
 	<form method="POST" action="?/deleteUsers">
 		<button type="submit">Delete all Users</button>
 	</form>
+
+  <button type="submit" onclick={async () => await goto("/lobby/create")}>Create Lobby</button>
 {/if}
 <!-- 
 <button
diff --git a/src/routes/api/createLobby/+server.ts b/src/routes/api/createLobby/+server.ts
index ccf0c67..e0efd05 100644
--- a/src/routes/api/createLobby/+server.ts
+++ b/src/routes/api/createLobby/+server.ts
@@ -1,10 +1,10 @@
 import { db } from '$lib/server/db';
-import { lobbysRelations, lobbysTable, usersInLobby, usersTable } from '$lib/server/db/schema';
-import { json } from '@sveltejs/kit';
+import { lobbysTable, usersInLobby } from '$lib/server/db/schema';
+import { json, type RequestHandler } from '@sveltejs/kit';
 import { eq } from 'drizzle-orm';
 
 
-export async function POST({ request }) {
+export const POST: RequestHandler = async ({ request }) => {
     const userReq = await request.json();
 
     const userInLobby = (await db.$count(usersInLobby, eq(usersInLobby.userEmail, userReq.email))) > 0
@@ -38,4 +38,4 @@ export async function POST({ request }) {
     }
 
     return json(lobby, { status: 201 })
-} 
\ No newline at end of file
+} 
diff --git a/src/routes/api/createUser/+server.ts b/src/routes/api/createUser/+server.ts
index b97d3dd..9a3a7fe 100644
--- a/src/routes/api/createUser/+server.ts
+++ b/src/routes/api/createUser/+server.ts
@@ -1,8 +1,8 @@
 import { db } from "$lib/server/db";
 import { usersTable } from "$lib/server/db/schema";
-import { json } from "@sveltejs/kit";
+import { json, type RequestHandler } from "@sveltejs/kit";
 
-export async function POST({ request }) {
+export const POST: RequestHandler = async ({ request }) => {
     const user = await request.json();
     const u: typeof usersTable.$inferInsert = {
         email: user.email,
@@ -16,4 +16,4 @@ export async function POST({ request }) {
     }
 
     return json(result, { status: 201 })
-} 
\ No newline at end of file
+} 
diff --git a/src/routes/lobby/+page.svelte b/src/routes/lobby/+page.svelte
new file mode 100644
index 0000000..a1c57f5
--- /dev/null
+++ b/src/routes/lobby/+page.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { createWebSocketClient } from '$lib/websocketClient';
+  import type { Settings, GameMode, Playlist } from '$lib/types';
+  import PlayerList from '$lib/components/PlayerList.svelte';
+  import GameSettings from '$lib/components/GameSettings.svelte';
+  
+  // Create WebSocket client
+  let wsClient = $state(createWebSocketClient());
+
+  // Current user state
+  let isHost = $state(true); // Assume current user is host for this example
+  let lobbyCode = $state('GAME123');
+  
+  // Available options for settings
+  let gameModes = $state<GameMode[]>([
+    { id: 'classic', name: 'Classic Mode' },
+    { id: 'team', name: 'Team Battle' },
+    { id: 'speed', name: 'Speed Round' }
+  ]);
+  
+  let playlists = $state<Playlist[]>([
+    { id: 1, name: 'Pop Hits 2023', imageUrl: 'https://example.com/images/pop2023.jpg', songCount: 25 },
+    { id: 2, name: 'Rock Classics', imageUrl: 'https://example.com/images/rock.jpg', songCount: 30 },
+    { id: 3, name: '80s Mixtape', imageUrl: 'https://example.com/images/80s.jpg', songCount: 20 },
+    { id: 4, name: 'Movie Soundtracks', imageUrl: 'https://example.com/images/movies.jpg', songCount: 15 },
+    { id: 5, name: 'Hip Hop Essentials', imageUrl: 'https://example.com/images/hiphop.jpg', songCount: 40 },
+    { id: 6, name: 'Indie Discoveries', imageUrl: 'https://example.com/images/indie.jpg', songCount: 35 }
+  ]);
+  
+  function handleSettingsUpdate(settings: Settings) {
+    // Send updated settings to other players via websocket
+    wsClient.sendMessage({
+      type: 'settingsUpdate',
+      settings: settings
+    });
+  }
+  
+  function startGame() {
+    wsClient.sendMessage({
+      type: 'startGame',
+      settings: wsClient.gameSettings
+    });
+    // In a real app, this would navigate to the game screen
+  }
+  
+  function copyLobbyCode() {
+    navigator.clipboard.writeText(lobbyCode);
+    // Would show a toast notification in a real app
+  }
+  
+  function leaveLobby() {
+    wsClient.disconnect();
+    // In a real app, you'd likely redirect to another page here
+  }
+  
+  // Initialize mock data for demo
+  function initializeMockData() {
+    // Simulate WebSocket connection and receiving initial player data
+    setTimeout(() => {
+      console.log("Init mock data");
+      wsClient.players = [
+        { id: 1, name: 'YourName', isHost: true },
+        { id: 2, name: 'Player2', isHost: false },
+        { id: 3, name: 'GamerX', isHost: false }
+      ];
+      wsClient.connected = true;
+    }, 500);
+  }
+  
+  onMount(() => {
+    // In a real app, connect to WebSocket server
+    // wsClient.connect('ws://example.com/game-lobby');
+
+    // For demo purposes, we'll simulate a connection
+    initializeMockData();
+  });
+  
+  onDestroy(() => {
+    // Clean up WebSocket connection when component is destroyed
+    wsClient.disconnect();
+  });
+</script>
+
+<div class="min-h-screen bg-gray-50 py-8 px-4 sm:px-6 lg:px-8">
+  <div class="max-w-5xl mx-auto">
+    <!-- Header -->
+    <div class="mb-8 text-center">
+      <h1 class="text-3xl font-bold text-gray-900">Game Lobby</h1>
+      <div class="mt-3 flex items-center justify-center">
+        <span class="text-gray-600 mr-2">Invite your friends using code:</span>
+        <span class="font-mono bg-white px-3 py-1.5 rounded-md border border-gray-200 text-blue-600 font-semibold">{lobbyCode}</span>
+        <button 
+          class="ml-2 p-1.5 text-gray-500 hover:text-blue-600 transition-colors" 
+          title="Copy to clipboard"
+          on:click={copyLobbyCode}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+            <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+            <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <!-- Left column: Player list -->
+      <div class="md:col-span-1">
+        {#if wsClient.connected}
+          <PlayerList 
+            players={wsClient.players} 
+            maxPlayers={wsClient.gameSettings.maxPlayers} 
+          />
+        {:else}
+          <div class="bg-white rounded-lg shadow-sm p-5 flex items-center justify-center">
+            <div class="flex items-center text-amber-600">
+              <svg class="animate-spin -ml-1 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Connecting to lobby...
+            </div>
+          </div>
+        {/if}
+      </div>
+      
+      <!-- Right column: Game settings and controls -->
+      <div class="md:col-span-2 space-y-6">
+        <GameSettings 
+          settings={wsClient.gameSettings}
+          gameModes={gameModes}
+          playlists={playlists}
+          isHost={isHost}
+          onUpdate={handleSettingsUpdate}
+        />
+        
+        <!-- Action buttons -->
+        <div class="flex justify-between">
+          <button 
+            class="px-4 py-2.5 bg-white border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+            on:click={leaveLobby}
+          >
+            Leave Lobby
+          </button>
+          
+          {#if isHost}
+            <button 
+              class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center"
+              on:click={startGame}
+            >
+              <span>Start Game</span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1.5" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </button>
+          {:else}
+            <div class="text-gray-500 italic self-center flex items-center">
+              <svg class="animate-pulse h-5 w-5 mr-2 text-blue-400" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="12" cy="12" r="10" />
+              </svg>
+              Waiting for host to start...
+            </div>
+          {/if}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/routes/lobby/[id]/+page.svelte b/src/routes/lobby/[id]/+page.svelte
index ae09ac6..1cd4ca6 100644
--- a/src/routes/lobby/[id]/+page.svelte
+++ b/src/routes/lobby/[id]/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import type { PageProps } from './$types';
+	import { onDestroy } from 'svelte';
 
 	let { data }: PageProps = $props();
+
+	onDestroy(() => console.log('left site'));
 </script>
 
 <h1>You are in lobby with ID: {data.lobby?.id}</h1>
-<h2>Youre username is: {data.username}</h2>
+<h2>Your username is: {data.username}</h2>
 
-<h2>Players in Lobby: </h2>
+<h2>Players in Lobby:</h2>
 <ul>
-    {#each data.lobby.usersInLobby as player (player.userEmail)}
-        <li>{player.user.username}</li>
-    {/each}
-</ul>
\ No newline at end of file
+	{#each data.lobby.usersInLobby as player (player.userEmail)}
+		<li>{player.user.username}</li>
+	{/each}
+</ul>
diff --git a/vite.config.ts b/vite.config.ts
index bbf8c7d..7f69006 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
+    tailwindcss(),
+    sveltekit()
+  ]
 });