move to shadcn

2026-01-24 11:43:11 -06:00 · 2026-01-24 11:43:11 -06:00 · d074868e74
commit d074868e74
parent 144cd4787e
41 changed files with 1337 additions and 360 deletions
--- a/components.json
+++ b/components.json
@ -0,0 +1,16 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://shadcn-svelte.com/registry"
+}
--- a/package-lock.json
+++ b/package-lock.json
@ -16,13 +16,17 @@
 			"devDependencies": {
 				"@eslint/compat": "^1.4.0",
 				"@eslint/js": "^9.36.0",
+				"@internationalized/date": "^3.10.1",
+				"@lucide/svelte": "^0.561.0",
 				"@sveltejs/adapter-node": "^5.3.2",
-				"@sveltejs/kit": "^2.43.2",
+				"@sveltejs/kit": "2.49.5",
 				"@sveltejs/vite-plugin-svelte": "^6.2.0",
 				"@tailwindcss/forms": "^0.5.10",
 				"@tailwindcss/vite": "^4.1.13",
 				"@types/node": "^22",
 				"@vitest/browser": "^3.2.4",
+				"bits-ui": "^2.15.4",
+				"clsx": "^2.1.1",
 				"eslint": "^9.36.0",
 				"eslint-config-prettier": "^10.1.8",
 				"eslint-plugin-svelte": "^3.12.4",
@ -33,10 +37,13 @@
 				"prettier-plugin-tailwindcss": "^0.6.14",
 				"svelte": "^5.39.5",
 				"svelte-check": "^4.3.2",
+				"tailwind-merge": "^3.4.0",
+				"tailwind-variants": "^3.2.2",
 				"tailwindcss": "^4.1.13",
+				"tw-animate-css": "^1.4.0",
 				"typescript": "^5.9.2",
 				"typescript-eslint": "^8.44.1",
-				"vite": "^7.1.7",
+				"vite": "7.1.11",
 				"vitest": "^3.2.4",
 				"vitest-browser-svelte": "^1.1.0"
 			}
@ -696,6 +703,34 @@
 				"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.7.3",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+			"integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.7.4",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+			"integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.3",
+				"@floating-ui/utils": "^0.2.10"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+			"integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/@humanfs/core": {
 			"version": "0.19.1",
 			"resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@ -748,6 +783,16 @@
 				"url": "https://github.com/sponsors/nzakas"
 			}
 		},
+		"node_modules/@internationalized/date": {
+			"version": "3.10.1",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.10.1.tgz",
+			"integrity": "sha512-oJrXtQiAXLvT9clCf1K4kxp3eKsQhIaZqxEyowkBcsvZDdZkbWrVmnGknxs5flTD0VGsxrxKgBCZty1EzoiMzA==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"@swc/helpers": "^0.5.0"
+			}
+		},
 		"node_modules/@isaacs/fs-minipass": {
 			"version": "4.0.1",
 			"resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
@ -811,6 +856,16 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@lucide/svelte": {
+			"version": "0.561.0",
+			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.561.0.tgz",
+			"integrity": "sha512-vofKV2UFVrKE6I4ewKJ3dfCXSV6iP6nWVmiM83MLjsU91EeJcEg7LoWUABLp/aOTxj1HQNbJD1f3g3L0JQgH9A==",
+			"dev": true,
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^5"
+			}
+		},
 		"node_modules/@nodelib/fs.scandir": {
 			"version": "2.1.5",
 			"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@ -1294,9 +1349,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.46.5",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.46.5.tgz",
-			"integrity": "sha512-7TSvMrCdmig5TMyYDW876C5FljhA0wlGixtvASCiqUqtLfmyEEpaysXjC7GhR5mWcGRrCGF+L2Bl1eEaW1wTCA==",
+			"version": "2.49.5",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.49.5.tgz",
+			"integrity": "sha512-dCYqelr2RVnWUuxc+Dk/dB/SjV/8JBndp1UovCyCZdIQezd8TRwFLNZctYkzgHxRJtaNvseCSRsuuHPeUgIN/A==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@ -1305,7 +1360,7 @@
 				"@types/cookie": "^0.6.0",
 				"acorn": "^8.14.1",
 				"cookie": "^0.6.0",
-				"devalue": "^5.3.2",
+				"devalue": "^5.6.2",
 				"esm-env": "^1.2.2",
 				"kleur": "^4.1.5",
 				"magic-string": "^0.30.5",
@ -1324,11 +1379,15 @@
 				"@opentelemetry/api": "^1.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0",
 				"svelte": "^4.0.0 || ^5.0.0-next.0",
+				"typescript": "^5.3.3",
 				"vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0"
 			},
 			"peerDependenciesMeta": {
 				"@opentelemetry/api": {
 					"optional": true
+				},
+				"typescript": {
+					"optional": true
 				}
 			}
 		},
@ -1371,6 +1430,16 @@
 				"vite": "^6.3.0 || ^7.0.0"
 			}
 		},
+		"node_modules/@swc/helpers": {
+			"version": "0.5.18",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.18.tgz",
+			"integrity": "sha512-TXTnIcNJQEKwThMMqBXsZ4VGAza6bvN4pa41Rkqoio6QBKMvo+5lexeTMScGCIxtzgQJzElcvIltani+adC5PQ==",
+			"dev": true,
+			"license": "Apache-2.0",
+			"dependencies": {
+				"tslib": "^2.8.0"
+			}
+		},
 		"node_modules/@tailwindcss/forms": {
 			"version": "0.5.10",
 			"resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.10.tgz",
@ -2300,6 +2369,31 @@
 				"node": ">= 18"
 			}
 		},
+		"node_modules/bits-ui": {
+			"version": "2.15.4",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.15.4.tgz",
+			"integrity": "sha512-7H9YUfp03KOk1LVDh8wPYSRPxlZgG/GRWLNSA8QC73/8Z8ytun+DWJhIuibyFyz7A0cP/RANVcB4iDrbY8q+Og==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/core": "^1.7.1",
+				"@floating-ui/dom": "^1.7.1",
+				"esm-env": "^1.1.2",
+				"runed": "^0.35.1",
+				"svelte-toolbelt": "^0.10.6",
+				"tabbable": "^6.2.0"
+			},
+			"engines": {
+				"node": ">=20"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/huntabyte"
+			},
+			"peerDependencies": {
+				"@internationalized/date": "^3.8.1",
+				"svelte": "^5.33.0"
+			}
+		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.12",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@ -2568,9 +2662,9 @@
 			}
 		},
 		"node_modules/devalue": {
-			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.3.2.tgz",
-			"integrity": "sha512-UDsjUbpQn9kvm68slnrs+mfxwFkIflOhkanmyabZ8zOYk8SMEIbJ3TK+88g70hSIeytu4y18f0z/hYHMTrXIWw==",
+			"version": "5.6.2",
+			"resolved": "https://registry.npmjs.org/devalue/-/devalue-5.6.2.tgz",
+			"integrity": "sha512-nPRkjWzzDQlsejL1WVifk5rvcFi/y1onBRxjaFMjZeR9mFpqu2gmAZ9xUB9/IEanEP/vBtGeGganC/GO1fmufg==",
 			"dev": true,
 			"license": "MIT"
 		},
@ -3185,6 +3279,13 @@
 				"node": ">=0.8.19"
 			}
 		},
+		"node_modules/inline-style-parser": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+			"integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+			"dev": true,
+			"license": "MIT"
+		},
 		"node_modules/is-core-module": {
 			"version": "2.16.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@ -4517,6 +4618,31 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/runed": {
+			"version": "0.35.1",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+			"integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"esm-env": "^1.0.0",
+				"lz-string": "^1.5.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.21.0",
+				"svelte": "^5.7.0"
+			},
+			"peerDependenciesMeta": {
+				"@sveltejs/kit": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/sade": {
 			"version": "1.8.1",
 			"resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@ -4671,6 +4797,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/style-to-object": {
+			"version": "1.0.14",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+			"integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"inline-style-parser": "0.2.7"
+			}
+		},
 		"node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@ -4776,6 +4912,27 @@
 				}
 			}
 		},
+		"node_modules/svelte-toolbelt": {
+			"version": "0.10.6",
+			"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+			"integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
+			"dev": true,
+			"funding": [
+				"https://github.com/sponsors/huntabyte"
+			],
+			"dependencies": {
+				"clsx": "^2.1.1",
+				"runed": "^0.35.1",
+				"style-to-object": "^1.0.8"
+			},
+			"engines": {
+				"node": ">=18",
+				"pnpm": ">=8.7.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.30.2"
+			}
+		},
 		"node_modules/svelte/node_modules/aria-query": {
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@ -4796,6 +4953,44 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
+		"node_modules/tabbable": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.4.0.tgz",
+			"integrity": "sha512-05PUHKSNE8ou2dwIxTngl4EzcnsCDZGJ/iCLtDflR/SHB/ny14rXc+qU5P4mG9JkusiV7EivzY9Mhm55AzAvCg==",
+			"dev": true,
+			"license": "MIT"
+		},
+		"node_modules/tailwind-merge": {
+			"version": "3.4.0",
+			"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+			"integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/dcastil"
+			}
+		},
+		"node_modules/tailwind-variants": {
+			"version": "3.2.2",
+			"resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-3.2.2.tgz",
+			"integrity": "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=16.x",
+				"pnpm": ">=7.x"
+			},
+			"peerDependencies": {
+				"tailwind-merge": ">=3.0.0",
+				"tailwindcss": "*"
+			},
+			"peerDependenciesMeta": {
+				"tailwind-merge": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "4.1.14",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.14.tgz",
@ -4931,6 +5126,23 @@
 				"typescript": ">=4.8.4"
 			}
 		},
+		"node_modules/tslib": {
+			"version": "2.8.1",
+			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+			"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+			"dev": true,
+			"license": "0BSD"
+		},
+		"node_modules/tw-animate-css": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.4.0.tgz",
+			"integrity": "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==",
+			"dev": true,
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/Wombosvideo"
+			}
+		},
 		"node_modules/type-check": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@ -5007,9 +5219,9 @@
 			"license": "MIT"
 		},
 		"node_modules/vite": {
-			"version": "7.1.9",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz",
-			"integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==",
+			"version": "7.1.11",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz",
+			"integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
--- a/package.json
+++ b/package.json
@ -18,13 +18,17 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.4.0",
 		"@eslint/js": "^9.36.0",
+		"@internationalized/date": "^3.10.1",
+		"@lucide/svelte": "^0.561.0",
 		"@sveltejs/adapter-node": "^5.3.2",
-		"@sveltejs/kit": "^2.43.2",
+		"@sveltejs/kit": "2.49.5",
 		"@sveltejs/vite-plugin-svelte": "^6.2.0",
 		"@tailwindcss/forms": "^0.5.10",
 		"@tailwindcss/vite": "^4.1.13",
 		"@types/node": "^22",
 		"@vitest/browser": "^3.2.4",
+		"bits-ui": "^2.15.4",
+		"clsx": "^2.1.1",
 		"eslint": "^9.36.0",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.12.4",
@ -35,10 +39,13 @@
 		"prettier-plugin-tailwindcss": "^0.6.14",
 		"svelte": "^5.39.5",
 		"svelte-check": "^4.3.2",
+		"tailwind-merge": "^3.4.0",
+		"tailwind-variants": "^3.2.2",
 		"tailwindcss": "^4.1.13",
+		"tw-animate-css": "^1.4.0",
 		"typescript": "^5.9.2",
 		"typescript-eslint": "^8.44.1",
-		"vite": "^7.1.7",
+		"vite": "7.1.11",
 		"vitest": "^3.2.4",
 		"vitest-browser-svelte": "^1.1.0"
 	},
--- a/src/app.css
+++ b/src/app.css
@ -1,317 +1,129 @@
-@import 'tailwindcss';
-@plugin '@tailwindcss/forms';
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));

-/* defaults */
 :root {
-    --text-color: #000000;
-    --text-box-bg: #00000010;
-    --bg-color: #e9e9e9;
-    --hover-bg-color: #d0d0d0;
-    --separator-line-color: #a0a0a0;
-    --low-emphasis-text-color: #6b6b6b;
-    --primary-color: #1f96f3;
-    --dull-primary-color: #51aaf0;
-    --elevated-bg-color: #ffffff;
-    --bg-accent-color: #f4f4f4;
-    --danger-color: #ff2d2f;
-    --hyperlink-color: #3b82f6;
-    --nav-bg-color: #f0f0f0;
-
-    background: var(--bg-color);
-    color: var(--text-color);
+    --radius: 0.65rem;
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.606 0.25 292.717);
+    --primary-foreground: oklch(0.969 0.016 293.756);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.606 0.25 292.717);
+    --chart-1: oklch(0.646 0.222 41.116);
+    --chart-2: oklch(0.6 0.118 184.704);
+    --chart-3: oklch(0.398 0.07 227.392);
+    --chart-4: oklch(0.828 0.189 84.429);
+    --chart-5: oklch(0.769 0.188 70.08);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.141 0.005 285.823);
+    --sidebar-primary: oklch(0.606 0.25 292.717);
+    --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-border: oklch(0.92 0.004 286.32);
+    --sidebar-ring: oklch(0.606 0.25 292.717);
+    --warning: oklch(0.84 0.16 84);
+    --error: oklch(0.577 0.245 27.325);
 }

-.bg-color {
-    background-color: var(--bg-color);
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.541 0.281 293.009);
+    --primary-foreground: oklch(0.969 0.016 293.756);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.541 0.281 293.009);
+    --chart-1: oklch(0.488 0.243 264.376);
+    --chart-2: oklch(0.696 0.17 162.48);
+    --chart-3: oklch(0.769 0.188 70.08);
+    --chart-4: oklch(0.627 0.265 303.9);
+    --chart-5: oklch(0.645 0.246 16.439);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground: oklch(0.969 0.016 293.756);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.541 0.281 293.009);
+    --warning: oklch(0.84 0.16 84);
+    --error: oklch(0.704 0.191 22.216);
 }

-.hover-bg-color:hover {
-    background-color: var(--hover-bg-color);
+@theme inline {
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-warning: var(--warning);
+    --color-error: var(--error);
 }

-.low-emphasis-text {
-    color: var(--low-emphasis-text-color);
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
    }

-.low-emphasis-text-button {
-    color: var(--low-emphasis-text-color);
+    body {
+        @apply bg-background text-foreground;
+    }
 }

-.low-emphasis-text-button:hover {
-    color: var(--text-color);
-}
-
-.primary-underline {
-    border-bottom: 2px solid var(--primary-color);
-}
-
-.top-border {
-    border-top: 1px solid var(--separator-line-color);
-}
-
-.bottom-border {
-    border-bottom: 1px solid var(--separator-line-color);
-}
-
-.left-border {
-    border-left: 1px solid var(--separator-line-color);
-}
-
-.right-border {
-    border-right: 1px solid var(--separator-line-color);
-}
-
-input[type='search'],
-input[type='text'],
-input[type='password'],
-input[type='email'],
-input[type='tel'],
-input[type='number'],
-textarea,
-select {
-    @apply rounded-t;
-    background-color: var(--text-box-bg);
-    color: var(--text-color);
-    border: 0;
-    border-bottom: 2px solid var(--separator-line-color);
-    caret-color: var(--text-color);
-}
-
-input[type='search']:focus,
-input[type='text']:focus,
-input[type='password']:focus,
-input[type='email']:focus,
-input[type='tel']:focus,
-input[type='number']:focus,
-textarea:focus,
-select:focus {
-    outline: 0 solid var(--text-color);
-    border-bottom: 2px solid var(--primary-color);
-    box-shadow: 0 0 0 0 var(--primary-color);
-    caret-color: var(--text-color);
-}
-
-input[type='search']:-webkit-autofill,
-input[type='text']:-webkit-autofill,
-input[type='password']:-webkit-autofill,
-input[type='email']:-webkit-autofill,
-input[type='tel']:-webkit-autofill,
-input[type='number']:-webkit-autofill,
-textarea:-webkit-autofill,
-select:-webkit-autofill {
-    -webkit-text-fill-color: var(--text-color) !important;
-    background-clip: text !important;
-    caret-color: var(--text-color);
-}
-
-input[type='search'].outlined,
-input[type='text'].outlined,
-input[type='password'].outlined,
-input[type='email'].outlined,
-input[type='tel'].outlined,
-input[type='number'].outlined,
-textarea.outlined,
-select.outlined {
-    @apply rounded;
-    border: 1px solid var(--separator-line-color);
-}
-
-input[type='search'].outlined:focus,
-input[type='text'].outlined:focus,
-input[type='password'].outlined:focus,
-input[type='email'].outlined:focus,
-input[type='tel'].outlined:focus,
-input[type='number'].outlined:focus,
-textarea.outlined:focus,
-select.outlined:focus {
-    border: 1px solid var(--primary-color);
-}
-
-input[type='checkbox'] {
-    background-color: var(--text-box-bg);
-    border: 1px solid var(--separator-line-color);
-    border-radius: 4px;
-}
-
-input[type='checkbox']:focus {
-    box-shadow: none;
-    outline: none;
-}
-
-.text-box-bg {
-    background-color: var(--text-box-bg) !important;
-}
-
-.separator-borders {
-    border: 1px solid var(--separator-line-color);
-}
-
-.elevated {
-    background-color: var(--elevated-bg-color);
-    @apply shadow-lg;
-}
-
-.elevated-bg {
-    background-color: var(--elevated-bg-color);
-}
-
-.card {
-    @apply rounded-lg p-4 block shadow-lg;
-    background-color: var(--elevated-bg-color);
-}
-
-.nav-bg {
-    background-color: var(--nav-bg-color);
-}
-
-.primary-bg-color {
-    background-color: var(--primary-color);
-}
-
-.accent-bg-color {
-    background-color: var(--bg-accent-color);
-}
-
-.dull-primary-bg-color {
-    background-color: var(--dull-primary-color);
-}
-
-.dull-primary-text-color {
-    color: var(--dull-primary-color);
-}
-
-.dull-primary-border-color {
-    border-color: var(--dull-primary-color);
-}
-
-.primary-text-color {
-    color: var(--primary-color);
-}
-
-.danger-bg-color {
-    background-color: var(--danger-color);
-}
-
-.danger-color {
-    color: var(--danger-color);
-}
-
-.danger-border-color {
-    border-color: var(--danger-color);
-}
-
-.hover-hyperlink:hover {
-    color: var(--hyperlink-color);
-    text-decoration: underline var(--hyperlink-color);
-}
-
-.hyperlink-color {
-    color: var(--hyperlink-color);
-}
-
-.hyperlink-underline {
-    text-decoration: underline var(--hyperlink-color);
-}
-
-.center {
-    margin: 0 auto;
-}
-
-h1 {
-    font-size: xx-large;
-}
-
-h2 {
-    font-size: x-large;
-}
-
-h3 {
-    font-size: large;
-}
-
-button {
-    cursor: pointer;
-}
-
-button.normal, a.normal {
-    @apply px-2 py-1 leading-tight rounded-lg;
-    border-width:  1px;
-    border-color: var(--dull-primary-color);
-}
-
-button.large, a.large {
-    @apply px-4 py-3 leading-tight rounded-xl;
-    border-width:  1px;
-    border-color: var(--dull-primary-color);
-}
-
-button.wide {
-    @apply px-4 py-2 leading-tight rounded w-full;
-}
-
-button.text {
-    color: var(--dull-primary-color);
-}
-
-button.filled, a.filled {
-    background-color: var(--dull-primary-color);
-}
-
-button.danger {
-    background-color: var(--danger-color);
-    border-width:  0;
-}
-
-button.outlined-danger {
-    border-color: var(--danger-color);
-}
-
-button.text-danger {
-    color: var(--danger-color);
-    border-width:  0;
-}
-
-.switch {
-    display: flex;
-    border: 1px solid #aaa;
-    border-radius: 4px;
-    overflow: hidden;
-}
-.switch button {
-    flex: 1;
-    padding: 0.5rem 1rem;
-    border: none;
-    background: #f0f0f0;
-    cursor: pointer;
-}
-.switch button.selected {
-    background: #007acc;
-    color: white;
-}
-
-
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0, 0, 0); /* Fallback color */
-    background-color: rgba(0, 0, 0, 0.6); /* Darken background */
-}
-
-.modal-content {
-    background-color: var(--bg-color);
-    margin: 10% auto;
-    padding: 16px;
-    border: 1px solid var(--separator-line-color);
-    max-width: 420px;
-    border-radius: 8px;
-}
-
-tr:nth-child(even) {
-    background-color: rgb(from var(--primary-color) r g b / 10%);
-}
--- a/src/lib/components/login-form.svelte
+++ b/src/lib/components/login-form.svelte
@ -0,0 +1,64 @@
+<script lang="ts">
+	import {
+		FieldGroup,
+		Field,
+		FieldLabel,
+		FieldDescription,
+		FieldSeparator,
+	} from "$lib/components/ui/field/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLFormAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLFormAttributes> = $props();
+
+	const id = $props.id();
+</script>
+
+<form class={cn("flex flex-col gap-6", className)} bind:this={ref} {...restProps}>
+	<FieldGroup>
+		<div class="flex flex-col items-center gap-1 text-center">
+			<h1 class="text-2xl font-bold">Login to your account</h1>
+			<p class="text-muted-foreground text-sm text-balance">
+				Enter your email below to login to your account
+			</p>
+		</div>
+		<Field>
+			<FieldLabel for="email-{id}">Email</FieldLabel>
+			<Input id="email-{id}" type="email" placeholder="m@example.com" required />
+		</Field>
+		<Field>
+			<div class="flex items-center">
+				<FieldLabel for="password-{id}">Password</FieldLabel>
+				<a href="##" class="ms-auto text-sm underline-offset-4 hover:underline">
+					Forgot your password?
+				</a>
+			</div>
+			<Input id="password-{id}" type="password" required />
+		</Field>
+		<Field>
+			<Button type="submit">Login</Button>
+		</Field>
+		<FieldSeparator>Or continue with</FieldSeparator>
+		<Field>
+			<Button variant="outline" type="button">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<path
+						d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+						fill="currentColor"
+					/>
+				</svg>
+				Login with GitHub
+			</Button>
+			<FieldDescription class="text-center">
+				Don't have an account?
+				<a href="##" class="underline underline-offset-4">Sign up</a>
+			</FieldDescription>
+		</Field>
+	</FieldGroup>
+</form>
--- a/src/lib/components/signup-form.svelte
+++ b/src/lib/components/signup-form.svelte
@ -0,0 +1,59 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as Field from "$lib/components/ui/field/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let { class: className, ...restProps }: HTMLAttributes<HTMLFormElement> = $props();
+</script>
+
+<form class={cn("flex flex-col gap-6", className)} {...restProps}>
+	<Field.Group>
+		<div class="flex flex-col items-center gap-1 text-center">
+			<h1 class="text-2xl font-bold">Create your account</h1>
+			<p class="text-muted-foreground text-sm text-balance">
+				Fill in the form below to create your account
+			</p>
+		</div>
+		<Field.Field>
+			<Field.Label for="name">Full Name</Field.Label>
+			<Input id="name" type="text" placeholder="John Doe" required />
+		</Field.Field>
+		<Field.Field>
+			<Field.Label for="email">Email</Field.Label>
+			<Input id="email" type="email" placeholder="m@example.com" required />
+			<Field.Description>
+				We'll use this to contact you. We will not share your email with anyone else.
+			</Field.Description>
+		</Field.Field>
+		<Field.Field>
+			<Field.Label for="password">Password</Field.Label>
+			<Input id="password" type="password" required />
+			<Field.Description>Must be at least 8 characters long.</Field.Description>
+		</Field.Field>
+		<Field.Field>
+			<Field.Label for="confirm-password">Confirm Password</Field.Label>
+			<Input id="confirm-password" type="password" required />
+			<Field.Description>Please confirm your password.</Field.Description>
+		</Field.Field>
+		<Field.Field>
+			<Button type="submit">Create Account</Button>
+		</Field.Field>
+		<Field.Separator>Or continue with</Field.Separator>
+		<Field.Field>
+			<Button variant="outline" type="button">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+					<path
+						d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+						fill="currentColor"
+					/>
+				</svg>
+				Sign up with GitHub
+			</Button>
+			<Field.Description class="px-6 text-center">
+				Already have an account? <a href="#/">Sign in</a>
+			</Field.Description>
+		</Field.Field>
+	</Field.Group>
+</form>
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@ -0,0 +1,82 @@
+<script lang="ts" module>
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
+				destructive:
+					"bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
+				outline:
+					"bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
+				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
+				"icon-sm": "size-8",
+				"icon-lg": "size-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
--- a/src/lib/components/ui/card/card-action.svelte
+++ b/src/lib/components/ui/card/card-action.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("leading-none font-semibold", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn(
+		"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@ -0,0 +1,25 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
--- a/src/lib/components/ui/field/field-content.svelte
+++ b/src/lib/components/ui/field/field-content.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-content"
+	class={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/field/field-description.svelte
+++ b/src/lib/components/ui/field/field-description.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="field-description"
+	class={cn(
+		"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+		"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+		"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
--- a/src/lib/components/ui/field/field-error.svelte
+++ b/src/lib/components/ui/field/field-error.svelte
@ -0,0 +1,58 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '$lib/utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		errors,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+		errors?: { message?: string }[];
+	} = $props();
+
+	const hasContent = $derived.by(() => {
+		// has slotted error
+		if (children) return true;
+
+		// no errors
+		if (!errors) return false;
+
+		// has an error but no message
+		if (errors.length === 1 && !errors[0]?.message) {
+			return false;
+		}
+
+		return true;
+	});
+
+	const isMultipleErrors = $derived(errors && errors.length > 1);
+	const singleErrorMessage = $derived(errors && errors.length === 1 && errors[0]?.message);
+</script>
+
+{#if hasContent}
+	<div
+		bind:this={ref}
+		role="alert"
+		data-slot="field-error"
+		class={cn("text-destructive text-sm font-normal", className)}
+		{...restProps}
+	>
+		{#if children}
+			{@render children()}
+		{:else if singleErrorMessage}
+			{singleErrorMessage}
+		{:else if isMultipleErrors}
+			<ul class="ms-4 flex list-disc flex-col gap-1">
+				{#each errors ?? [] as error, index (index)}
+					{#if error?.message}
+						<li>{error.message}</li>
+					{/if}
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/if}
--- a/src/lib/components/ui/field/field-group.svelte
+++ b/src/lib/components/ui/field/field-group.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-group"
+	class={cn(
+		"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/field/field-label.svelte
+++ b/src/lib/components/ui/field/field-label.svelte
@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof Label> = $props();
+</script>
+
+<Label
+	bind:ref
+	data-slot="field-label"
+	class={cn(
+		"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+		"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
+		"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</Label>
--- a/src/lib/components/ui/field/field-legend.svelte
+++ b/src/lib/components/ui/field/field-legend.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "legend",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLLegendElement>> & {
+		variant?: "legend" | "label";
+	} = $props();
+</script>
+
+<legend
+	bind:this={ref}
+	data-slot="field-legend"
+	data-variant={variant}
+	class={cn(
+		"mb-3 font-medium",
+		"data-[variant=legend]:text-base",
+		"data-[variant=label]:text-sm",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</legend>
--- a/src/lib/components/ui/field/field-separator.svelte
+++ b/src/lib/components/ui/field/field-separator.svelte
@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		children?: Snippet;
+	} = $props();
+
+	const hasContent = $derived(!!children);
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-separator"
+	data-content={hasContent}
+	class={cn(
+		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+		className
+	)}
+	{...restProps}
+>
+	<Separator class="absolute inset-0 top-1/2" />
+	{#if children}
+		<span
+			class="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+			data-slot="field-separator-content"
+		>
+			{@render children()}
+		</span>
+	{/if}
+</div>
--- a/src/lib/components/ui/field/field-set.svelte
+++ b/src/lib/components/ui/field/field-set.svelte
@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLFieldsetAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLFieldsetAttributes> = $props();
+</script>
+
+<fieldset
+	bind:this={ref}
+	data-slot="field-set"
+	class={cn(
+		"flex flex-col gap-6",
+		"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</fieldset>
--- a/src/lib/components/ui/field/field-title.svelte
+++ b/src/lib/components/ui/field/field-title.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="field-title"
+	class={cn(
+		"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/field/field.svelte
+++ b/src/lib/components/ui/field/field.svelte
@ -0,0 +1,53 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const fieldVariants = tv({
+		base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+		variants: {
+			orientation: {
+				vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+				horizontal: [
+					"flex-row items-center",
+					"[&>[data-slot=field-label]]:flex-auto",
+					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+				responsive: [
+					"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+				],
+			},
+		},
+		defaultVariants: {
+			orientation: "vertical",
+		},
+	});
+
+	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: FieldOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="field"
+	data-orientation={orientation}
+	class={cn(fieldVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
--- a/src/lib/components/ui/field/index.ts
+++ b/src/lib/components/ui/field/index.ts
@ -0,0 +1,33 @@
+import Field from "./field.svelte";
+import Set from "./field-set.svelte";
+import Legend from "./field-legend.svelte";
+import Group from "./field-group.svelte";
+import Content from "./field-content.svelte";
+import Label from "./field-label.svelte";
+import Title from "./field-title.svelte";
+import Description from "./field-description.svelte";
+import Separator from "./field-separator.svelte";
+import Error from "./field-error.svelte";
+
+export {
+	Field,
+	Set,
+	Legend,
+	Group,
+	Content,
+	Label,
+	Title,
+	Description,
+	Separator,
+	Error,
+	//
+	Set as FieldSet,
+	Legend as FieldLegend,
+	Group as FieldGroup,
+	Content as FieldContent,
+	Label as FieldLabel,
+	Title as FieldTitle,
+	Description as FieldDescription,
+	Separator as FieldSeparator,
+	Error as FieldError,
+};
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1,7 @@
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
+</script>
+
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"selection:bg-primary dark:bg-input/30 selection:text-primary-foreground border-input ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 pt-1.5 text-sm font-medium shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+			"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+/>
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={cn(
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:min-h-full data-[orientation=vertical]:w-px",
+		className
+	)}
+	{...restProps}
+/>
--- a/src/lib/shared.ts
+++ b/src/lib/shared.ts
@ -0,0 +1,41 @@
+import type { User } from '$lib/types';
+
+export const getCookieValue = (name: string): string =>
+	document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
+
+export const getUserFromJWT = (jwt: string): User => JSON.parse(atob(jwt.split('.')[1]));
+
+// export const userData = () => {
+// 	let userData: User | null = null;
+// 	const cookieValue = getCookieValue('jwt');
+// 	if (cookieValue) {
+// 		userData = getUserFromJWT(cookieValue);
+// 	}
+// 	return userData;
+// };
+
+export function getFormString(data: FormData, key: string): string | undefined {
+	const value = data.get(key);
+	if (value === null) {
+		return undefined;
+	}
+
+	if (typeof value !== 'string') {
+		throw Error(`Incorrect input in field ${key}.`);
+	}
+	return value.trim();
+}
+
+export function getRequiredFormString(data: FormData, key: string) {
+	const value = data.get(key);
+	if (typeof value !== 'string') {
+		throw Error(`Missing required field ${key}.`);
+	}
+	return value.trim();
+}
+
+export const dateFormatOptions: Intl.DateTimeFormatOptions = {
+	year: 'numeric',
+	month: 'short',
+	day: 'numeric'
+};
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@ -18,4 +18,5 @@ export interface Item {
 	title: string;
 	description: string;
 	transferred: boolean; // to L&F location
+	keywords?: string[];
 }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -1,41 +1,13 @@
-import type { User } from '$lib/types';
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';

-export const getCookieValue = (name: string): string =>
-	document.cookie.match('(^|;)\\s*' + name + '\\s*=\\s*([^;]+)')?.pop() || '';
-
-export const getUserFromJWT = (jwt: string): User => JSON.parse(atob(jwt.split('.')[1]));
-
-// export const userData = () => {
-// 	let userData: User | null = null;
-// 	const cookieValue = getCookieValue('jwt');
-// 	if (cookieValue) {
-// 		userData = getUserFromJWT(cookieValue);
-// 	}
-// 	return userData;
-// };
-
-export function getFormString(data: FormData, key: string): string | undefined {
-	const value = data.get(key);
-	if (value === null) {
-		return undefined;
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
 }

-	if (typeof value !== 'string') {
-		throw Error(`Incorrect input in field ${key}.`);
-	}
-	return value.trim();
-}
-
-export function getRequiredFormString(data: FormData, key: string) {
-	const value = data.get(key);
-	if (typeof value !== 'string') {
-		throw Error(`Missing required field ${key}.`);
-	}
-	return value.trim();
-}
-
-export const dateFormatOptions: Intl.DateTimeFormatOptions = {
-	year: 'numeric',
-	month: 'short',
-	day: 'numeric'
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
--- a/src/routes/+layout.server.ts
+++ b/src/routes/+layout.server.ts
@ -1,5 +1,5 @@
 import type { LayoutServerLoad } from './$types';
-import { getUserFromJWT } from '$lib/utils';
+import { getUserFromJWT } from '$lib/shared';

 export const load: LayoutServerLoad = ({ cookies }) => {
 	const jwt = cookies.get('jwt');
--- a/src/routes/signin/+page.server.ts
+++ b/src/routes/signin/+page.server.ts
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@ -0,0 +1,31 @@
+<script lang="ts">
+	import GalleryVerticalEndIcon from '@lucide/svelte/icons/gallery-vertical-end';
+	import LoginForm from '$lib/components/login-form.svelte';
+</script>
+
+<div class="grid min-h-svh lg:grid-cols-2">
+	<div class="flex flex-col gap-4 p-6 md:p-10">
+		<div class="flex justify-center gap-2 md:justify-start">
+			<a href="##" class="flex items-center gap-2 font-medium">
+				<div
+					class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"
+				>
+					<GalleryVerticalEndIcon class="size-4" />
+				</div>
+				Acme Inc.
+			</a>
+		</div>
+		<div class="flex flex-1 items-center justify-center">
+			<div class="w-full max-w-xs">
+				<LoginForm />
+			</div>
+		</div>
+	</div>
+	<div class="bg-muted relative hidden lg:block">
+		<img
+			src="/placeholder.svg"
+			alt="placeholder"
+			class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+		/>
+	</div>
+</div>
--- a/src/routes/signup/+page.server.ts
+++ b/src/routes/signup/+page.server.ts
--- a/src/routes/signup/+page.svelte
+++ b/src/routes/signup/+page.svelte
@ -0,0 +1,31 @@
+<script>
+	import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
+	import SignupForm from "$lib/components/signup-form.svelte";
+</script>
+
+<div class="grid min-h-svh lg:grid-cols-2">
+	<div class="flex flex-col gap-4 p-6 md:p-10">
+		<div class="flex justify-center gap-2 md:justify-start">
+			<a href="#/" class="flex items-center gap-2 font-medium">
+				<div
+					class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"
+				>
+					<GalleryVerticalEndIcon class="size-4" />
+				</div>
+				Acme Inc.
+			</a>
+		</div>
+		<div class="flex flex-1 items-center justify-center">
+			<div class="w-full max-w-xs">
+				<SignupForm />
+			</div>
+		</div>
+	</div>
+	<div class="bg-muted relative hidden lg:block">
+		<img
+			src="/placeholder.svg"
+			alt=""
+			class="absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+		/>
+	</div>
+</div>