diff --git a/frontend/.claude/launch.json b/frontend/.claude/launch.json
new file mode 100644
index 0000000..72eb748
--- /dev/null
+++ b/frontend/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+	"version": "0.0.1",
+	"configurations": [
+		{
+			"name": "musify-web",
+			"runtimeExecutable": "npm",
+			"runtimeArgs": ["run", "dev"],
+			"port": 5173
+		}
+	]
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dc407b6..10ca183 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,6 +8,10 @@
 			"name": "frontend",
 			"version": "0.0.1",
 			"dependencies": {
+				"@fontsource-variable/inter": "^5.2.8",
+				"@fontsource-variable/manrope": "^5.2.8",
+				"@fontsource-variable/sora": "^5.2.8",
+				"@lucide/svelte": "^1.23.0",
 				"@sveltejs/adapter-node": "^5.5.7",
 				"jose": "^6.2.3",
 				"openapi-fetch": "^0.17.0",
@@ -18,6 +22,7 @@
 				"@sveltejs/kit": "^2.63.0",
 				"@sveltejs/vite-plugin-svelte": "^7.1.2",
 				"@tailwindcss/vite": "^4.3.0",
+				"@types/node": "^22.20.1",
 				"svelte": "^5.56.1",
 				"svelte-check": "^4.6.0",
 				"tailwindcss": "^4.3.0",
@@ -35,6 +40,33 @@
 				"tslib": "^2.4.0"
 			}
 		},
+		"node_modules/@fontsource-variable/inter": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+			"integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource-variable/manrope": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/manrope/-/manrope-5.2.8.tgz",
+			"integrity": "sha512-nc9lOuCRz73UHnovDE2bwXUdghE2SEOc7Aii0qGe3CLyE03W1a7VnY5Z6euRiapiKbCkGS+eXbY3s/kvWeGeSw==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
+		"node_modules/@fontsource-variable/sora": {
+			"version": "5.2.8",
+			"resolved": "https://registry.npmjs.org/@fontsource-variable/sora/-/sora-5.2.8.tgz",
+			"integrity": "sha512-sP+ILTfi5r3cqmMBntI4ooQNxFI+LyHyD5hcPbWwwL4uh4kKFAkOz0w2veCXjz18fKRdva6OG0dY+5yQ02f30w==",
+			"license": "OFL-1.1",
+			"funding": {
+				"url": "https://github.com/sponsors/ayuhito"
+			}
+		},
 		"node_modules/@jridgewell/gen-mapping": {
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
@@ -80,6 +112,15 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lucide/svelte": {
+			"version": "1.23.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.23.0.tgz",
+			"integrity": "sha512-3LQbKXx9vId6Nx4E2Nu2qwgJfdmr5+CVeVJbxe5cy+HcnCRd9QVVtZXqvgBYAV1OJrPmQAf9/3gJWLCpASC/Ng==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
 		"node_modules/@napi-rs/wasm-runtime": {
 			"version": "1.1.6",
 			"resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.6.tgz",
@@ -1236,6 +1277,17 @@
 			"integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==",
 			"license": "MIT"
 		},
+		"node_modules/@types/node": {
+			"version": "22.20.1",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-22.20.1.tgz",
+			"integrity": "sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==",
+			"devOptional": true,
+			"license": "MIT",
+			"peer": true,
+			"dependencies": {
+				"undici-types": "~6.21.0"
+			}
+		},
 		"node_modules/@types/resolve": {
 			"version": "1.20.2",
 			"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz",
@@ -2203,6 +2255,13 @@
 				"node": ">=14.17"
 			}
 		},
+		"node_modules/undici-types": {
+			"version": "6.21.0",
+			"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+			"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+			"devOptional": true,
+			"license": "MIT"
+		},
 		"node_modules/vite": {
 			"version": "8.1.3",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-8.1.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 2857179..439c394 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
 		"@sveltejs/kit": "^2.63.0",
 		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@tailwindcss/vite": "^4.3.0",
+		"@types/node": "^22.20.1",
 		"svelte": "^5.56.1",
 		"svelte-check": "^4.6.0",
 		"tailwindcss": "^4.3.0",
@@ -24,6 +25,10 @@
 		"vite": "^8.0.16"
 	},
 	"dependencies": {
+		"@fontsource-variable/inter": "^5.2.8",
+		"@fontsource-variable/manrope": "^5.2.8",
+		"@fontsource-variable/sora": "^5.2.8",
+		"@lucide/svelte": "^1.23.0",
 		"@sveltejs/adapter-node": "^5.5.7",
 		"jose": "^6.2.3",
 		"openapi-fetch": "^0.17.0",
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index dd21275..c1c5be5 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -4,6 +4,9 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
+	ssr: {
+		noExternal: ['@lucide/svelte']
+	},
 	plugins: [
 		tailwindcss(),
 		sveltekit({