Adding shadcn-svelte, updating to tailwind, using tailwind in postcss, removing headless-ui references, comment out custom css, and adding UI comonents to signup / signing.

2025-09-08 17:40:22 +00:00 · 2023-06-30 15:08:45 -07:00 · 2023-06-30 15:08:45 -07:00 · 3d99710eb8
commit 3d99710eb8
parent d111482708
40 changed files with 983 additions and 490 deletions
--- a/package.json
+++ b/package.json
@ -8,10 +8,11 @@
 		"preview": "vite preview",
 		"test": "playwright test",
 		"postinstall": "prisma generate",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
-		"format": "prettier --write --plugin-search-dir=. .",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test:unit": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
 		"site:update": "pnpm update -i -L",
 		"db:studio": "prisma studio",
 		"db:push": "prisma db push",
@ -22,15 +23,13 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.35.1",
-		"@rgossiaux/svelte-headlessui": "1.0.2",
-		"@rgossiaux/svelte-heroicons": "^0.1.2",
 		"@sveltejs/adapter-auto": "^1.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
 		"@sveltejs/kit": "^1.20.5",
 		"@types/cookie": "^0.5.1",
 		"@types/node": "^18.16.18",
-		"@typescript-eslint/eslint-plugin": "^5.60.0",
-		"@typescript-eslint/parser": "^5.60.0",
+		"@typescript-eslint/eslint-plugin": "^5.60.1",
+		"@typescript-eslint/parser": "^5.60.1",
 		"autoprefixer": "^10.4.14",
 		"eslint": "^8.43.0",
 		"eslint-config-prettier": "^8.8.0",
@ -49,8 +48,9 @@
 		"svelte-check": "^2.10.3",
 		"svelte-preprocess": "^5.0.4",
 		"sveltekit-superforms": "^1.1.2",
+		"tailwindcss": "^3.3.2",
 		"ts-node": "^10.9.1",
-		"tslib": "^2.5.3",
+		"tslib": "^2.6.0",
 		"typescript": "^4.9.5",
 		"vite": "^4.3.9",
 		"vitest": "^0.25.3",
@ -73,17 +73,23 @@
 		"@lukeed/uuid": "^2.0.1",
 		"@prisma/client": "4.16.1",
 		"@types/feather-icons": "^4.29.1",
+		"class-variance-authority": "^0.6.1",
+		"clsx": "^1.2.1",
 		"cookie": "^0.5.0",
 		"feather-icons": "^4.29.0",
 		"iconify-icon": "^1.0.8",
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
 		"lucia-auth": "^1.8.0",
+		"lucide-svelte": "^0.256.0",
 		"open-props": "^1.5.10",
+		"radix-svelte": "^0.8.0",
 		"svelte-lazy": "^1.2.1",
 		"svelte-lazy-loader": "^1.0.0",
 		"svelte-legos": "^0.2.1",
 		"sveltekit-flash-message": "^0.11.3",
-		"zod-to-json-schema": "^3.21.2"
+		"tailwind-merge": "^1.13.2",
+		"tailwindcss-animate": "^1.0.6",
+		"zod-to-json-schema": "^3.21.3"
 	}
 }
--- a/playwright.config.ts
+++ b/playwright.config.ts
@ -4,7 +4,9 @@ const config: PlaywrightTestConfig = {
 	webServer: {
 		command: 'npm run build && npm run preview',
 		port: 4173
-	}
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
 };

 export default config;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -38,6 +38,12 @@ dependencies:
  '@types/feather-icons':
    specifier: ^4.29.1
    version: 4.29.1
+  class-variance-authority:
+    specifier: ^0.6.1
+    version: 0.6.1
+  clsx:
+    specifier: ^1.2.1
+    version: 1.2.1
  cookie:
    specifier: ^0.5.0
    version: 0.5.0
@ -56,9 +62,15 @@ dependencies:
  lucia-auth:
    specifier: ^1.8.0
    version: 1.8.0
+  lucide-svelte:
+    specifier: ^0.256.0
+    version: 0.256.0(svelte@3.59.2)
  open-props:
    specifier: ^1.5.10
    version: 1.5.10
+  radix-svelte:
+    specifier: ^0.8.0
+    version: 0.8.0(svelte@3.59.2)
  svelte-lazy:
    specifier: ^1.2.1
    version: 1.2.1(svelte@3.59.2)
@ -71,20 +83,20 @@ dependencies:
  sveltekit-flash-message:
    specifier: ^0.11.3
    version: 0.11.3(@sveltejs/kit@1.20.5)(svelte@3.59.2)
+  tailwind-merge:
+    specifier: ^1.13.2
+    version: 1.13.2
+  tailwindcss-animate:
+    specifier: ^1.0.6
+    version: 1.0.6(tailwindcss@3.3.2)
  zod-to-json-schema:
-    specifier: ^3.21.2
-    version: 3.21.2(zod@3.21.4)
+    specifier: ^3.21.3
+    version: 3.21.3(zod@3.21.4)

 devDependencies:
  '@playwright/test':
    specifier: ^1.35.1
    version: 1.35.1
-  '@rgossiaux/svelte-headlessui':
-    specifier: 1.0.2
-    version: 1.0.2(svelte@3.59.2)
-  '@rgossiaux/svelte-heroicons':
-    specifier: ^0.1.2
-    version: 0.1.2(svelte@3.59.2)
  '@sveltejs/adapter-auto':
    specifier: ^1.0.3
    version: 1.0.3(@sveltejs/kit@1.20.5)
@ -101,11 +113,11 @@ devDependencies:
    specifier: ^18.16.18
    version: 18.16.18
  '@typescript-eslint/eslint-plugin':
-    specifier: ^5.60.0
-    version: 5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@4.9.5)
+    specifier: ^5.60.1
+    version: 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5)
  '@typescript-eslint/parser':
-    specifier: ^5.60.0
-    version: 5.60.0(eslint@8.43.0)(typescript@4.9.5)
+    specifier: ^5.60.1
+    version: 5.60.1(eslint@8.43.0)(typescript@4.9.5)
  autoprefixer:
    specifier: ^10.4.14
    version: 10.4.14(postcss@8.4.24)
@ -160,12 +172,15 @@ devDependencies:
  sveltekit-superforms:
    specifier: ^1.1.2
    version: 1.1.2(@sveltejs/kit@1.20.5)(svelte@3.59.2)(zod@3.21.4)
+  tailwindcss:
+    specifier: ^3.3.2
+    version: 3.3.2(ts-node@10.9.1)
  ts-node:
    specifier: ^10.9.1
    version: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
  tslib:
-    specifier: ^2.5.3
-    version: 2.5.3
+    specifier: ^2.6.0
+    version: 2.6.0
  typescript:
    specifier: ^4.9.5
    version: 4.9.5
@ -181,6 +196,10 @@ devDependencies:

 packages:

+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+
  /@axiomhq/axiom-node@0.12.0:
    resolution: {integrity: sha512-998jnkwSCzKk4oTqiWfHIeW18yj7LZu5+srTq72nLXaEZ5rrGMqKPx5W96hs8u9TeOjFxGBsfJCStEIVnrru1g==}
    engines: {node: '>=14'}
@ -210,7 +229,6 @@ packages:
    engines: {node: '>=12'}
    dependencies:
      '@jridgewell/trace-mapping': 0.3.9
-    dev: true

  /@csstools/cascade-layer-name-parser@1.0.2(@csstools/css-parser-algorithms@2.1.1)(@csstools/css-tokenizer@2.1.1):
    resolution: {integrity: sha512-xm7Mgwej/wBfLoK0K5LfntmPJzoULayl1XZY9JYgQgT29JiqNw++sLnx95u5y9zCihblzkyaRYJrsRMhIBzRdg==}
@ -999,6 +1017,16 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

+  /@floating-ui/core@1.3.1:
+    resolution: {integrity: sha512-Bu+AMaXNjrpjh41znzHqaz3r2Nr8hHuHZT6V2LBKMhyMl0FgKA62PNYbqnfgmzOhoWZj70Zecisbo4H1rotP5g==}
+    dev: false
+
+  /@floating-ui/dom@1.4.2:
+    resolution: {integrity: sha512-VKmvHVatWnewmGGy+7Mdy4cTJX71Pli6v/Wjb5RQBuq5wjUYx+Ef+kRThi8qggZqDgD8CogCpqhRoVp3+yQk+g==}
+    dependencies:
+      '@floating-ui/core': 1.3.1
+    dev: false
+
  /@fontsource/fira-mono@4.5.10:
    resolution: {integrity: sha512-bxUnRP8xptGRo8YXeY073DSpfK74XpSb0ZyRNpHV9WvLnJ7TwPOjZll8hTMin7zLC6iOp59pDZ8EQDj1gzgAQQ==}
    dev: false
@ -1039,14 +1067,24 @@ packages:
    resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
    dev: false

+  /@jridgewell/gen-mapping@0.3.3:
+    resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      '@jridgewell/set-array': 1.1.2
+      '@jridgewell/sourcemap-codec': 1.4.15
+      '@jridgewell/trace-mapping': 0.3.17
+
  /@jridgewell/resolve-uri@3.1.0:
    resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
    engines: {node: '>=6.0.0'}
-    dev: true
+
+  /@jridgewell/set-array@1.1.2:
+    resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
+    engines: {node: '>=6.0.0'}

  /@jridgewell/sourcemap-codec@1.4.14:
    resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
-    dev: true

  /@jridgewell/sourcemap-codec@1.4.15:
    resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
@ -1056,14 +1094,12 @@ packages:
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.14
-    dev: true

  /@jridgewell/trace-mapping@0.3.9:
    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
    dependencies:
      '@jridgewell/resolve-uri': 3.1.0
      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true

  /@leveluptuts/svelte-side-menu@1.0.5:
    resolution: {integrity: sha512-czPmr0LEjVhr7qXYZtH4PrUrfHPYg9nS7ZHH+xDINKoajkERWlHlsBtdoJC5ZTMzGvdhLCLfF70q4xeMzJgS7w==}
@ -1136,12 +1172,10 @@ packages:
    dependencies:
      '@nodelib/fs.stat': 2.0.5
      run-parallel: 1.2.0
-    dev: true

  /@nodelib/fs.stat@2.0.5:
    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
    engines: {node: '>= 8'}
-    dev: true

  /@nodelib/fs.walk@1.2.8:
    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@ -1149,7 +1183,6 @@ packages:
    dependencies:
      '@nodelib/fs.scandir': 2.1.5
      fastq: 1.15.0
-    dev: true

  /@playwright/test@1.35.1:
    resolution: {integrity: sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==}
@ -1187,22 +1220,6 @@ packages:
    resolution: {integrity: sha512-gpZG0kGGxfemgvK/LghHdBIz+crHkZjzszja94xp4oytpsXrgt/Ice82MvPsWMleVIniKuARrowtsIsim0PFJQ==}
    requiresBuild: true

-  /@rgossiaux/svelte-headlessui@1.0.2(svelte@3.59.2):
-    resolution: {integrity: sha512-sauopYTSivhzXe1kAvgawkhyYJcQlK8Li3p0d2OtcCIVprOzdbard5lbqWB4xHDv83zAobt2mR08oizO2poHLQ==}
-    peerDependencies:
-      svelte: ^3.44.0
-    dependencies:
-      svelte: 3.59.2
-    dev: true
-
-  /@rgossiaux/svelte-heroicons@0.1.2(svelte@3.59.2):
-    resolution: {integrity: sha512-c5Ep1QDvBo9HD/P0AxbXItDbn6x77fldCjjL0aBjNseUntV4fkdHkBde1IaLr8i0kmrhTSovjkIen8W83jUPzg==}
-    peerDependencies:
-      svelte: ^3.44.0
-    dependencies:
-      svelte: 3.59.2
-    dev: true
-
  /@rollup/pluginutils@4.2.1:
    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
    engines: {node: '>= 8.0.0'}
@ -1295,19 +1312,15 @@ packages:

  /@tsconfig/node10@1.0.9:
    resolution: {integrity: sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==}
-    dev: true

  /@tsconfig/node12@1.0.11:
    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-    dev: true

  /@tsconfig/node14@1.0.3:
    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-    dev: true

  /@tsconfig/node16@1.0.4:
    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-    dev: true

  /@types/chai-subset@1.3.3:
    resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
@ -1351,8 +1364,8 @@ packages:
    resolution: {integrity: sha512-txGIh+0eDFzKGC25zORnswy+br1Ha7hj5cMVwKIU7+s0U2AxxJru/jZSMU6OC9MJWP6+pc/hc6ZjyZShpsyY2g==}
    dev: false

-  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
+  /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      '@typescript-eslint/parser': ^5.0.0
@ -1363,10 +1376,10 @@ packages:
        optional: true
    dependencies:
      '@eslint-community/regexpp': 4.5.0
-      '@typescript-eslint/parser': 5.60.0(eslint@8.43.0)(typescript@4.9.5)
-      '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/type-utils': 5.60.0(eslint@8.43.0)(typescript@4.9.5)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/scope-manager': 5.60.1
+      '@typescript-eslint/type-utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
      debug: 4.3.4
      eslint: 8.43.0
      grapheme-splitter: 1.0.4
@ -1379,8 +1392,8 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser@5.60.0(eslint@8.43.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-jBONcBsDJ9UoTWrARkRRCgDz6wUggmH5RpQVlt7BimSwaTkTjwypGzKORXbR4/2Hqjk9hgwlon2rVQAjWNpkyQ==}
+  /@typescript-eslint/parser@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -1389,9 +1402,9 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/typescript-estree': 5.60.0(typescript@4.9.5)
+      '@typescript-eslint/scope-manager': 5.60.1
+      '@typescript-eslint/types': 5.60.1
+      '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
      debug: 4.3.4
      eslint: 8.43.0
      typescript: 4.9.5
@ -1399,16 +1412,16 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/scope-manager@5.60.0:
-    resolution: {integrity: sha512-hakuzcxPwXi2ihf9WQu1BbRj1e/Pd8ZZwVTG9kfbxAMZstKz8/9OoexIwnmLzShtsdap5U/CoQGRCWlSuPbYxQ==}
+  /@typescript-eslint/scope-manager@5.60.1:
+    resolution: {integrity: sha512-Dn/LnN7fEoRD+KspEOV0xDMynEmR3iSHdgNsarlXNLGGtcUok8L4N71dxUgt3YvlO8si7E+BJ5Fe3wb5yUw7DQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/visitor-keys': 5.60.0
+      '@typescript-eslint/types': 5.60.1
+      '@typescript-eslint/visitor-keys': 5.60.1
    dev: true

-  /@typescript-eslint/type-utils@5.60.0(eslint@8.43.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-X7NsRQddORMYRFH7FWo6sA9Y/zbJ8s1x1RIAtnlj6YprbToTiQnM6vxcMu7iYhdunmoC0rUWlca13D5DVHkK2g==}
+  /@typescript-eslint/type-utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: '*'
@ -1417,8 +1430,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/typescript-estree': 5.60.0(typescript@4.9.5)
-      '@typescript-eslint/utils': 5.60.0(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
      debug: 4.3.4
      eslint: 8.43.0
      tsutils: 3.21.0(typescript@4.9.5)
@ -1427,13 +1440,13 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/types@5.60.0:
-    resolution: {integrity: sha512-ascOuoCpNZBccFVNJRSC6rPq4EmJ2NkuoKnd6LDNyAQmdDnziAtxbCGWCbefG1CNzmDvd05zO36AmB7H8RzKPA==}
+  /@typescript-eslint/types@5.60.1:
+    resolution: {integrity: sha512-zDcDx5fccU8BA0IDZc71bAtYIcG9PowaOwaD8rjYbqwK7dpe/UMQl3inJ4UtUK42nOCT41jTSCwg76E62JpMcg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /@typescript-eslint/typescript-estree@5.60.0(typescript@4.9.5):
-    resolution: {integrity: sha512-R43thAuwarC99SnvrBmh26tc7F6sPa2B3evkXp/8q954kYL6Ro56AwASYWtEEi+4j09GbiNAHqYwNNZuNlARGQ==}
+  /@typescript-eslint/typescript-estree@5.60.1(typescript@4.9.5):
+    resolution: {integrity: sha512-hkX70J9+2M2ZT6fhti5Q2FoU9zb+GeZK2SLP1WZlvUDqdMbEKhexZODD1WodNRyO8eS+4nScvT0dts8IdaBzfw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      typescript: '*'
@ -1441,8 +1454,8 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/visitor-keys': 5.60.0
+      '@typescript-eslint/types': 5.60.1
+      '@typescript-eslint/visitor-keys': 5.60.1
      debug: 4.3.4
      globby: 11.1.0
      is-glob: 4.0.3
@ -1453,8 +1466,8 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/utils@5.60.0(eslint@8.43.0)(typescript@4.9.5):
-    resolution: {integrity: sha512-ba51uMqDtfLQ5+xHtwlO84vkdjrqNzOnqrnwbMHMRY8Tqeme8C2Q8Fc7LajfGR+e3/4LoYiWXUM6BpIIbHJ4hQ==}
+  /@typescript-eslint/utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+    resolution: {integrity: sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@ -1462,9 +1475,9 @@ packages:
      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
      '@types/json-schema': 7.0.12
      '@types/semver': 7.5.0
-      '@typescript-eslint/scope-manager': 5.60.0
-      '@typescript-eslint/types': 5.60.0
-      '@typescript-eslint/typescript-estree': 5.60.0(typescript@4.9.5)
+      '@typescript-eslint/scope-manager': 5.60.1
+      '@typescript-eslint/types': 5.60.1
+      '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
      eslint: 8.43.0
      eslint-scope: 5.1.1
      semver: 7.3.8
@ -1473,11 +1486,11 @@ packages:
      - typescript
    dev: true

-  /@typescript-eslint/visitor-keys@5.60.0:
-    resolution: {integrity: sha512-wm9Uz71SbCyhUKgcaPRauBdTegUyY/ZWl8gLwD/i/ybJqscrrdVSFImpvUz16BLPChIeKBK5Fa9s6KDQjsjyWw==}
+  /@typescript-eslint/visitor-keys@5.60.1:
+    resolution: {integrity: sha512-xEYIxKcultP6E/RMKqube11pGjXH1DCo60mQoWhVYyKfLkwbIVVjYxmOenNMxILx0TjCujPTjjnTIVzm09TXIw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
-      '@typescript-eslint/types': 5.60.0
+      '@typescript-eslint/types': 5.60.1
      eslint-visitor-keys: 3.4.1
    dev: true

@ -1517,7 +1530,6 @@ packages:
  /acorn-walk@8.2.0:
    resolution: {integrity: sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==}
    engines: {node: '>=0.4.0'}
-    dev: true

  /acorn@8.8.1:
    resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==}
@ -1529,7 +1541,6 @@ packages:
    resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==}
    engines: {node: '>=0.4.0'}
    hasBin: true
-    dev: true

  /acorn@8.9.0:
    resolution: {integrity: sha512-jaVNAFBHNLXspO543WnNNPZFRtavh3skAkITqD0/2aeMkKZTN+254PyhwxFYrk3vQ1xfY+2wbesJMs/JC8/PwQ==}
@ -1567,6 +1578,9 @@ packages:
      color-convert: 2.0.1
    dev: true

+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+
  /anymatch@3.1.3:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
    engines: {node: '>= 8'}
@ -1588,7 +1602,9 @@ packages:

  /arg@4.1.3:
    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: true
+
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}

  /argparse@2.0.1:
    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@ -1646,7 +1662,6 @@ packages:

  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true

  /bignumber.js@2.4.0:
    resolution: {integrity: sha512-uw4ra6Cv483Op/ebM0GBKKfxZlSmn6NgFRby5L3yGTlunLj53KQgndDlqy2WVFOwgvurocApYkSud0aO+mvrpQ==}
@ -1667,7 +1682,6 @@ packages:
    dependencies:
      balanced-match: 1.0.2
      concat-map: 0.0.1
-    dev: true

  /braces@3.0.2:
    resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@ -1712,6 +1726,10 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+
  /caniuse-lite@1.0.30001481:
    resolution: {integrity: sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ==}
    dev: true
@ -1768,10 +1786,21 @@ packages:
    engines: {node: '>=10'}
    dev: true

+  /class-variance-authority@0.6.1:
+    resolution: {integrity: sha512-eurOEGc7YVx3majOrOb099PNKgO3KnKSApOprXI4BTq6bcfbqbQXPN2u+rPPmIJ2di23bMwhk0SxCCthBmszEQ==}
+    dependencies:
+      clsx: 1.2.1
+    dev: false
+
  /classnames@2.3.2:
    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
    dev: false

+  /clsx@1.2.1:
+    resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==}
+    engines: {node: '>=6'}
+    dev: false
+
  /color-convert@2.0.1:
    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
    engines: {node: '>=7.0.0'}
@ -1795,9 +1824,12 @@ packages:
      delayed-stream: 1.0.0
    dev: false

+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+
  /concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
-    dev: true

  /console-control-strings@1.1.0:
    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
@ -1814,7 +1846,6 @@ packages:

  /create-require@1.1.1:
    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-    dev: true

  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@ -1864,7 +1895,6 @@ packages:
    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
    engines: {node: '>=4'}
    hasBin: true
-    dev: true

  /debug@4.3.4:
    resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
@ -1914,10 +1944,12 @@ packages:
  /devalue@4.3.1:
    resolution: {integrity: sha512-Kc0TSP9IUU9eg55au5Q3YtqaYI2cgntVpunJV9Exbm9nvlBeTE5p2NqYHfpuXK6+VF2hF5PI+BPFPUti7e2N1g==}

+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+
  /diff@4.0.2:
    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
    engines: {node: '>=0.3.1'}
-    dev: true

  /dir-glob@3.0.1:
    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
@ -1926,6 +1958,9 @@ packages:
      path-type: 4.0.0
    dev: true

+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+
  /doctrine@3.0.0:
    resolution: {integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==}
    engines: {node: '>=6.0.0'}
@ -2182,7 +2217,6 @@ packages:
      glob-parent: 5.1.2
      merge2: 1.4.1
      micromatch: 4.0.5
-    dev: true

  /fast-json-stable-stringify@2.1.0:
    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@ -2196,7 +2230,6 @@ packages:
    resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
    dependencies:
      reusify: 1.0.4
-    dev: true

  /feather-icons@4.29.0:
    resolution: {integrity: sha512-Y7VqN9FYb8KdaSF0qD1081HCkm0v4Eq/fpfQYQnubpqi0hXx14k+gF9iqtRys1SIcTEi97xDi/fmsPFZ8xo0GQ==}
@ -2278,7 +2311,6 @@ packages:

  /fs.realpath@1.0.0:
    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
-    dev: true

  /fsevents@2.3.2:
    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@ -2289,7 +2321,6 @@ packages:

  /function-bind@1.1.1:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true

  /gauge@3.0.2:
    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
@ -2321,7 +2352,16 @@ packages:
    engines: {node: '>=10.13.0'}
    dependencies:
      is-glob: 4.0.3
-    dev: true
+
+  /glob@7.1.6:
+    resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.2
+      once: 1.4.0
+      path-is-absolute: 1.0.1

  /glob@7.2.3:
    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@ -2379,7 +2419,6 @@ packages:
    engines: {node: '>= 0.4.0'}
    dependencies:
      function-bind: 1.1.1
-    dev: true

  /https-proxy-agent@5.0.1:
    resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
@ -2432,7 +2471,6 @@ packages:
    dependencies:
      once: 1.4.0
      wrappy: 1.0.2
-    dev: true

  /inherits@2.0.4:
    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@ -2447,7 +2485,6 @@ packages:
    resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
    dependencies:
      has: 1.0.3
-    dev: true

  /is-extglob@2.1.1:
    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
@ -2482,6 +2519,10 @@ packages:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true

+  /jiti@1.18.2:
+    resolution: {integrity: sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==}
+    hasBin: true
+
  /js-yaml@4.1.0:
    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
    hasBin: true
@ -2528,7 +2569,13 @@ packages:
  /lilconfig@2.0.6:
    resolution: {integrity: sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==}
    engines: {node: '>=10'}
-    dev: true
+
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}

  /loader@2.1.1:
    resolution: {integrity: sha512-Z6nHbyKiECMexVUmpIAVXp+f+8okRtfiMAQ9j0eTtImCghxSqQwrbeSiAyCYKBnfvRlgXLdQt0tPuaZmcBQzpw==}
@ -2582,6 +2629,14 @@ packages:
    resolution: {integrity: sha512-zI8gT2AOpxTPIxYzToEdgoht+GOflrduZiHPsOEmg4/2pThOyCW3o3lXh+Uwh20tJ9QoXwQe9/Omn6PlUG6efw==}
    dev: false

+  /lucide-svelte@0.256.0(svelte@3.59.2):
+    resolution: {integrity: sha512-F1XMEOV+uyVbGygzojz0ly7pa+fQb0l1uxc6g1MDZQBoqo4LPgqTdaDWMkpH+YEsIsA3OIs7PEcTs9AZmTaIXQ==}
+    peerDependencies:
+      svelte: ^3.49.0
+    dependencies:
+      svelte: 3.59.2
+    dev: false
+
  /magic-string@0.25.9:
    resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
    dependencies:
@ -2610,12 +2665,10 @@ packages:

  /make-error@1.3.6:
    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-    dev: true

  /merge2@1.4.1:
    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
    engines: {node: '>= 8'}
-    dev: true

  /micromatch@4.0.5:
    resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
@ -2623,7 +2676,6 @@ packages:
    dependencies:
      braces: 3.0.2
      picomatch: 2.3.1
-    dev: true

  /mime-db@1.52.0:
    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@ -2651,7 +2703,6 @@ packages:
    resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
    dependencies:
      brace-expansion: 1.1.11
-    dev: true

  /minimist@1.2.7:
    resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
@ -2703,6 +2754,13 @@ packages:
  /ms@2.1.2:
    resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}

+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+
  /nanoid@3.3.6:
    resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -2770,13 +2828,15 @@ packages:
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
-    dev: true
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}

  /once@1.4.0:
    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
      wrappy: 1.0.2
-    dev: true

  /open-props@1.5.10:
    resolution: {integrity: sha512-iE+B7Zo0ytgeUNI38uHiBrxF5Nnv3uX8AzogBXzf7wqeNyG6oqQEEBs1gnAZdRF+h7IRO0zOGM5d9/huiNFR+w==}
@ -2823,7 +2883,6 @@ packages:
  /path-is-absolute@1.0.1:
    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /path-key@3.1.1:
    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@ -2832,7 +2891,6 @@ packages:

  /path-parse@1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true

  /path-type@4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@ -2853,7 +2911,10 @@ packages:
  /pify@2.3.0:
    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
    engines: {node: '>=0.10.0'}
-    dev: true
+
+  /pirates@4.0.6:
+    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
+    engines: {node: '>= 6'}

  /playwright-core@1.35.1:
    resolution: {integrity: sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==}
@ -3029,7 +3090,6 @@ packages:
      postcss-value-parser: 4.2.0
      read-cache: 1.0.0
      resolve: 1.22.1
-    dev: true

  /postcss-initial@4.0.1(postcss@8.4.24):
    resolution: {integrity: sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==}
@ -3039,6 +3099,15 @@ packages:
      postcss: 8.4.24
    dev: true

+  /postcss-js@4.0.1(postcss@8.4.24):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.24
+
  /postcss-lab-function@5.2.3(postcss@8.4.24):
    resolution: {integrity: sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==}
    engines: {node: ^14 || ^16 || >=18}
@ -3064,7 +3133,7 @@ packages:
      ts-node:
        optional: true
    dependencies:
-      lilconfig: 2.0.6
+      lilconfig: 2.1.0
      postcss: 8.4.24
      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
      yaml: 1.10.2
@ -3086,7 +3155,6 @@ packages:
      postcss: 8.4.24
      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
      yaml: 2.1.3
-    dev: true

  /postcss-logical@6.2.0(postcss@8.4.24):
    resolution: {integrity: sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==}
@ -3098,6 +3166,15 @@ packages:
      postcss-value-parser: 4.2.0
    dev: true

+  /postcss-nested@6.0.1(postcss@8.4.24):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.24
+      postcss-selector-parser: 6.0.13
+
  /postcss-nesting@11.3.0(postcss@8.4.24):
    resolution: {integrity: sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==}
    engines: {node: ^14 || ^16 || >=18}
@ -3263,11 +3340,9 @@ packages:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
-    dev: true

  /postcss-value-parser@4.2.0:
    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true

  /postcss@8.4.24:
    resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
@ -3326,13 +3401,21 @@ packages:

  /queue-microtask@1.2.3:
    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
+
+  /radix-svelte@0.8.0(svelte@3.59.2):
+    resolution: {integrity: sha512-VweSd96EiLCml9wA6krPQFxyZfci+A7phAPl9J6QH4nivKroFV2EUSGo9wAnqM2u04nI2mxGKa+wfMhNy84GVg==}
+    peerDependencies:
+      svelte: ^3.58.0
+    dependencies:
+      '@floating-ui/core': 1.3.1
+      '@floating-ui/dom': 1.4.2
+      svelte: 3.59.2
+    dev: false

  /read-cache@1.0.0:
    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
    dependencies:
      pify: 2.3.0
-    dev: true

  /readable-stream@3.6.0:
    resolution: {integrity: sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==}
@ -3369,12 +3452,18 @@ packages:
      is-core-module: 2.12.1
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
-    dev: true
+
+  /resolve@1.22.2:
+    resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
+    hasBin: true
+    dependencies:
+      is-core-module: 2.12.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0

  /reusify@1.0.4:
    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true

  /rimraf@2.7.1:
    resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
@ -3401,7 +3490,6 @@ packages:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
    dependencies:
      queue-microtask: 1.2.3
-    dev: true

  /sade@1.8.1:
    resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@ -3569,6 +3657,19 @@ packages:
      acorn: 8.8.1
    dev: true

+  /sucrase@3.32.0:
+    resolution: {integrity: sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==}
+    engines: {node: '>=8'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 7.1.6
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+
  /supports-color@7.2.0:
    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
    engines: {node: '>=8'}
@ -3579,7 +3680,6 @@ packages:
  /supports-preserve-symlinks-flag@1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
-    dev: true

  /svelte-check@2.10.3(postcss-load-config@4.0.1)(postcss@8.4.24)(sass@1.63.6)(svelte@3.59.2):
    resolution: {integrity: sha512-Nt1aWHTOKFReBpmJ1vPug0aGysqPwJh2seM1OvICfM2oeyaA62mOiy5EvkXhltGfhCcIQcq2LoE0l1CwcWPjlw==}
@ -3787,6 +3887,49 @@ packages:
      zod: 3.21.4
    dev: true

+  /tailwind-merge@1.13.2:
+    resolution: {integrity: sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==}
+    dev: false
+
+  /tailwindcss-animate@1.0.6(tailwindcss@3.3.2):
+    resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.3.2(ts-node@10.9.1)
+    dev: false
+
+  /tailwindcss@3.3.2(ts-node@10.9.1):
+    resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.2.12
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.18.2
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.24
+      postcss-import: 15.1.0(postcss@8.4.24)
+      postcss-js: 4.0.1(postcss@8.4.24)
+      postcss-load-config: 4.0.1(postcss@8.4.24)(ts-node@10.9.1)
+      postcss-nested: 6.0.1(postcss@8.4.24)
+      postcss-selector-parser: 6.0.13
+      postcss-value-parser: 4.2.0
+      resolve: 1.22.2
+      sucrase: 3.32.0
+    transitivePeerDependencies:
+      - ts-node
+
  /tar@6.1.13:
    resolution: {integrity: sha512-jdIBIN6LTIe2jqzay/2vtYLlBHa3JF42ot3h1dW8Q0PaAG4v8rm0cvpVePtau5C6OKXGGcgO9q2AMNSWxiLqKw==}
    engines: {node: '>=10'}
@ -3803,6 +3946,17 @@ packages:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
    dev: true

+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+
  /tinybench@2.3.1:
    resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==}
    dev: true
@ -3841,6 +3995,9 @@ packages:
    resolution: {integrity: sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==}
    dev: false

+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+
  /ts-node@10.9.1(@types/node@18.16.18)(typescript@4.9.5):
    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
    hasBin: true
@ -3870,14 +4027,13 @@ packages:
      typescript: 4.9.5
      v8-compile-cache-lib: 3.0.1
      yn: 3.1.1
-    dev: true

  /tslib@1.14.1:
    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
    dev: true

-  /tslib@2.5.3:
-    resolution: {integrity: sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==}
+  /tslib@2.6.0:
+    resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
    dev: true

  /tsutils@3.21.0(typescript@4.9.5):
@ -3911,7 +4067,6 @@ packages:
    resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==}
    engines: {node: '>=4.2.0'}
    hasBin: true
-    dev: true

  /undici@5.22.0:
    resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==}
@ -3952,7 +4107,6 @@ packages:

  /v8-compile-cache-lib@3.0.1:
    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-    dev: true

  /vite@4.3.9(@types/node@18.16.18)(sass@1.63.6):
    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
@ -4083,7 +4237,6 @@ packages:

  /wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
-    dev: true

  /yallist@4.0.0:
    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
@ -4097,20 +4250,18 @@ packages:
  /yaml@2.1.3:
    resolution: {integrity: sha512-AacA8nRULjKMX2DvWvOAdBZMOfQlypSFkjcOcu9FalllIDJ1kvlREzcdIZmidQUqqeMv7jorHjq2HlLv/+c2lg==}
    engines: {node: '>= 14'}
-    dev: true

  /yn@3.1.1:
    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
    engines: {node: '>=6'}
-    dev: true

  /yocto-queue@0.1.0:
    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
    engines: {node: '>=10'}
    dev: true

-  /zod-to-json-schema@3.21.2(zod@3.21.4):
-    resolution: {integrity: sha512-02yfKymfmIf2rM/5LYGlyw0daEel/f3MsSGMNJZWWf44ato+Y+diFugOpDtgvEUn3cYM5oDAGWW2NHeSD4mByw==}
+  /zod-to-json-schema@3.21.3(zod@3.21.4):
+    resolution: {integrity: sha512-09W/9oyxeF1/wWnzCb6MursW+lOzgKi91QwE7eTBbC+t/qgfuLsUVDai3lHemSQnQu/UONAcT/fv3ZnDvbTeKg==}
    peerDependencies:
      zod: ^3.21.4
    dependencies:
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -1,18 +1,21 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require('autoprefixer');
 const postcssPresetEnv = require('postcss-preset-env');
 const atImport = require('postcss-import');

 const config = {
 	plugins: [
+		tailwindcss(),
 		atImport(),
 		postcssPresetEnv({
 			stage: 2,
 			features: {
 				'nesting-rules': true,
 				'custom-media-queries': true,
-				'media-query-ranges': true,
+				'media-query-ranges': true
 			}
 		})
-	]
+	] //Some plugins, like tailwindcss/nesting, need to run before Tailwind, tailwindcss(), //But others, like autoprefixer, need to run after, autoprefixer]
 };

 module.exports = config;
--- a/src/app.postcss
+++ b/src/app.postcss
@ -1,7 +1,91 @@
 /* Write your global styles here, in PostCSS syntax */

-@import '@fontsource/fira-mono';
+/* Write your global styles here, in PostCSS syntax */

+/* @import '@fontsource/fira-mono'; */
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 222.2 47.4% 11.2%;
+
+		--muted: 210 40% 96.1%;
+		--muted-foreground: 215.4 16.3% 46.9%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 222.2 47.4% 11.2%;
+
+		--border: 214.3 31.8% 91.4%;
+		--input: 214.3 31.8% 91.4%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 222.2 47.4% 11.2%;
+
+		--primary: 222.2 47.4% 11.2%;
+		--primary-foreground: 210 40% 98%;
+
+		--secondary: 210 40% 96.1%;
+		--secondary-foreground: 222.2 47.4% 11.2%;
+
+		--accent: 210 40% 96.1%;
+		--accent-foreground: 222.2 47.4% 11.2%;
+
+		--destructive: 0 92% 38%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: 215 20.2% 65.1%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 224 71% 4%;
+		--foreground: 213 31% 91%;
+
+		--muted: 223 47% 11%;
+		--muted-foreground: 215.4 16.3% 56.9%;
+
+		--accent: 216 34% 17%;
+		--accent-foreground: 210 40% 98%;
+
+		--popover: 224 71% 4%;
+		--popover-foreground: 215 20.2% 65.1%;
+
+		--border: 216 34% 17%;
+		--input: 216 34% 17%;
+
+		--card: 224 71% 4%;
+		--card-foreground: 213 31% 91%;
+
+		--primary: 210 40% 98%;
+		--primary-foreground: 222.2 47.4% 1.2%;
+
+		--secondary: 222.2 47.4% 11.2%;
+		--secondary-foreground: 210 40% 98%;
+
+		--destructive: 359 51% 48%;
+		--destructive-foreground: 210 40% 98%;
+
+		--ring: 216 34% 17%;
+
+		--radius: 0.5rem;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		font-feature-settings: 'rlig' 1, 'calt' 1;
+	}
+}
+/* 
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@ -108,4 +192,4 @@ button:focus:not(:focus-visible) {
 	h1 {
 		font-size: 2.4rem;
 	}
-}
+}*/
--- a/src/lib/components/dialog/ClearCollectionDialog.svelte
+++ b/src/lib/components/dialog/ClearCollectionDialog.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import {
-		Dialog,
-		DialogDescription,
-		DialogOverlay,
-		DialogTitle
-	} from '@rgossiaux/svelte-headlessui';
+	// import {
+	// 	Dialog,
+	// 	DialogDescription,
+	// 	DialogOverlay,
+	// 	DialogTitle
+	// } from '@rgossiaux/svelte-headlessui';
 	import { boredState } from '$lib/stores/boredState';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { browser } from '$app/environment';
@ -21,18 +21,18 @@
 	$: isOpen = $boredState?.dialog?.isOpen;
 </script>

-<Dialog
+<!-- <Dialog
 	open={isOpen}
 	on:close={() => {
 		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
 	}}
 	static
->
+> -->
 	<div transition:fade>
-		<DialogOverlay class="dialog-overlay" />
+		<!-- <DialogOverlay class="dialog-overlay" /> -->
 		<div class="dialog">
-			<DialogTitle>Clear collection</DialogTitle>
-			<DialogDescription>Are you sure you want to clear your collection?</DialogDescription>
+			<!-- <DialogTitle>Clear collection</DialogTitle> -->
+			<!-- <DialogDescription>Are you sure you want to clear your collection?</DialogDescription> -->

 			<div class="dialog-footer">
 				<button class="remove" on:click={clearCollection}>Clear</button>
@ -44,7 +44,7 @@
 			</div>
 		</div>
 	</div>
-</Dialog>
+<!-- </Dialog> -->

 <style lang="scss">
 	.dialog {
--- a/src/lib/components/dialog/DefaultDialog.svelte
+++ b/src/lib/components/dialog/DefaultDialog.svelte
@ -1,12 +1,12 @@
 <script lang="ts">
 	import { type SvelteComponent, createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import {
-		Dialog,
-		DialogDescription,
-		DialogOverlay,
-		DialogTitle
-	} from '@rgossiaux/svelte-headlessui';
+	// import {
+	// 	Dialog,
+	// 	DialogDescription,
+	// 	DialogOverlay,
+	// 	DialogTitle
+	// } from '@rgossiaux/svelte-headlessui';
 	import { boredState } from '$lib/stores/boredState';

 	export let title: string;
@ -25,19 +25,19 @@
 	$: isOpen = $boredState?.dialog?.isOpen;
 </script>

-<Dialog
+<!-- <Dialog
 	open={isOpen}
 	on:close={() => {
 		dispatch('close');
 	}}
 	static
->
+> -->
 	<div transition:fade>
-		<DialogOverlay class="dialog-overlay" />
+		<!-- <DialogOverlay class="dialog-overlay" /> -->
 		<div class="dialog">
-			<DialogTitle>{title}</DialogTitle>
+			<!-- <DialogTitle>{title}</DialogTitle> -->
 			{#if description}
-				<DialogDescription>{description}</DialogDescription>
+				<!-- <DialogDescription>{description}</DialogDescription> -->
 			{/if}

 			<div class="dialog-footer">
@ -72,7 +72,7 @@
 			</div>
 		</div>
 	</div>
-</Dialog>
+<!-- </Dialog> -->

 <style lang="scss">
 	.dialog {
--- a/src/lib/components/dialog/RemoveCollectionDialog.svelte
+++ b/src/lib/components/dialog/RemoveCollectionDialog.svelte
@ -1,11 +1,16 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
+	// import { Button, buttonVariants } from '$components/ui/button';
+	import { Button, buttonVariants } from '$components/ui/button';
 	import {
 		Dialog,
-		DialogDescription,
-		DialogOverlay,
-		DialogTitle
-	} from '@rgossiaux/svelte-headlessui';
+		DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger
+	} from '$components/ui/dialog';
 	import { boredState } from '$lib/stores/boredState';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { removeFromCollection } from '$lib/util/manipulateCollection';
@ -24,7 +29,35 @@
 	$: isOpen = $boredState?.dialog?.isOpen;
 </script>

-<Dialog
+<Dialog modal={true}>
+  <DialogTrigger class={buttonVariants({ variant: "outline" })}>
+    Remove from collection
+  </DialogTrigger>
+  <DialogContent class="sm:max-w-[425px]">
+    <DialogHeader>
+      <DialogTitle>Remove from collection</DialogTitle>
+      <DialogDescription>
+        Are you sure you want to remove from your collection?
+      </DialogDescription>
+    </DialogHeader>
+    <div class="grid gap-4 py-4">
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label class="text-right">Name</Label>
+        <Input id="name" value="Pedro Duarte" class="col-span-3" />
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <Label class="text-right">Username</Label>
+        <Input id="username" value="@peduarte" class="col-span-3" />
+      </div>
+    </div>
+    <DialogFooter>
+      <Button type="submit">Remove</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+
+
+<!-- <Dialog
 	open={isOpen}
 	on:close={() => {
 		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
@ -47,7 +80,7 @@
 			</div>
 		</div>
 	</div>
-</Dialog>
+</Dialog> -->

 <style lang="scss">
 	.dialog {
--- a/src/lib/components/dialog/RemoveWishlistDialog.svelte
+++ b/src/lib/components/dialog/RemoveWishlistDialog.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import {
-		Dialog,
-		DialogDescription,
-		DialogOverlay,
-		DialogTitle
-	} from '@rgossiaux/svelte-headlessui';
+	// import {
+	// 	Dialog,
+	// 	DialogDescription,
+	// 	DialogOverlay,
+	// 	DialogTitle
+	// } from '@rgossiaux/svelte-headlessui';
 	import { boredState } from '$lib/stores/boredState';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
 	import { removeFromWishlist } from '$lib/util/manipulateWishlist';
@ -24,18 +24,18 @@
 	$: isOpen = $boredState?.dialog?.isOpen;
 </script>

-<Dialog
+<!-- <Dialog
 	open={isOpen}
 	on:close={() => {
 		boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
 	}}
 	static
->
+> -->
 	<div transition:fade>
-		<DialogOverlay class="dialog-overlay" />
+		<!-- <DialogOverlay class="dialog-overlay" /> -->
 		<div class="dialog">
-			<DialogTitle>Remove from wishlist</DialogTitle>
-			<DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription>
+			<!-- <DialogTitle>Remove from wishlist</DialogTitle> -->
+			<!-- <DialogDescription>Are you sure you want to remove from your wishlist?</DialogDescription> -->

 			<div class="dialog-footer">
 				<button class="remove" on:click={removeGame}>Remove</button>
@ -47,7 +47,7 @@
 			</div>
 		</div>
 	</div>
-</Dialog>
+<!-- </Dialog> -->

 <style lang="scss">
 	.dialog {
--- a/src/lib/components/listbox.svelte
+++ b/src/lib/components/listbox.svelte
@ -1,11 +1,11 @@
 <script lang="ts">
  import { fade } from 'svelte/transition';
-  import {
-    Listbox,
-    ListboxButton,
-    ListboxOptions,
-    ListboxOption
-  } from '@rgossiaux/svelte-headlessui';
+  // import {
+  //   Listbox,
+  //   ListboxButton,
+  //   ListboxOptions,
+  //   ListboxOption
+  // } from '@rgossiaux/svelte-headlessui';

  const shows = [
    { id: 1, name: 'Cowboy Bebop', completed: false },
@ -22,8 +22,8 @@
 <h4>Listbox</h4>

 <div class="listbox">
-  <Listbox value={selected} on:change={(event) => (selected = event.detail)} let:open>
-    <ListboxButton class="button">
+  <!-- <Listbox value={selected} on:change={(event) => (selected = event.detail)} let:open> -->
+    <!-- <ListboxButton class="button"> -->
      <span>{selected.name}</span>
      <svg
        width="20"
@ -40,25 +40,25 @@
          clip-rule="evenodd"
        />
      </svg>
-    </ListboxButton>
+    <!-- </ListboxButton> -->
    {#if open}
      <div transition:fade={{ duration: 200 }}>
-        <ListboxOptions class="options">
+        <!-- <ListboxOptions class="options"> -->
          {#each shows as anime (anime.id)}
-            <ListboxOption
+            <!-- <ListboxOption
              class="option"
              value={anime}
              disabled={anime.completed}
              let:active
              let:selected
-            >
+            > -->
              <span class:active class:selected>{anime.name}</span>
-            </ListboxOption>
+            <!-- </ListboxOption> -->
          {/each}
-        </ListboxOptions>
+        <!-- </ListboxOptions> -->
      </div>
    {/if}
-  </Listbox>
+  <!-- </Listbox> -->
 </div>

 <!-- ... -->
--- a/src/lib/components/pagination/index.svelte
+++ b/src/lib/components/pagination/index.svelte
@ -2,17 +2,17 @@
 	// Based on https://carbon-components-svelte.onrender.com/components/Pagination
 	import { afterUpdate, createEventDispatcher } from 'svelte';
 	import { fade } from 'svelte/transition';
-	import {
-		Listbox,
-		ListboxButton,
-		ListboxOption,
-		ListboxOptions
-	} from '@rgossiaux/svelte-headlessui';
-	import {
-		CheckIcon,
-		ChevronLeftIcon,
-		ChevronRightIcon
-	} from '@rgossiaux/svelte-heroicons/outline';
+	// import {
+	// 	Listbox,
+	// 	ListboxButton,
+	// 	ListboxOption,
+	// 	ListboxOptions
+	// } from '@rgossiaux/svelte-headlessui';
+	// import {
+	// 	CheckIcon,
+	// 	ChevronLeftIcon,
+	// 	ChevronRightIcon
+	// } from '@rgossiaux/svelte-heroicons/outline';

 	const dispatch = createEventDispatcher();

@ -41,36 +41,36 @@
 <div class="container">
 	<div class="listbox">
 		<p>Per-page:</p>
-		<Listbox
+		<!-- <Listbox
 			class="list-box"
 			value={pageSize || 10}
 			on:change={(e) => {
 				dispatch('perPageEvent', { pageSize: e.detail, page });
 			}}
 			let:open
-		>
-			<ListboxButton>{pageSize || 10}</ListboxButton>
-			{#if open}
+		> -->
+			<!-- <ListboxButton>{pageSize || 10}</ListboxButton> -->
+			<!-- {#if open} -->
 				<div transition:fade={{ duration: 100 }}>
-					<ListboxOptions static class="options">
+					<!-- <ListboxOptions static class="options"> -->
 						{#each pageSizes as size (size)}
-							<ListboxOption
+							<!-- <ListboxOption
 								value={`${size}`}
 								disabled={pageSizeInputDisabled}
 								class={({ active }) => (active ? 'active option' : 'option')}
 								style="display: flex; gap: 1rem; padding: 1rem;"
 								let:selected
-							>
-								{#if selected}
-									<CheckIcon height="24" width="24" />
-								{/if}
-								<span class="size-option" class:selected>{size.toString()}</span>
-							</ListboxOption>
+							> -->
+								<!-- {#if selected} -->
+									<!-- <CheckIcon height="24" width="24" /> -->
+								<!-- {/if} -->
+								<!-- <span class="size-option" class:selected>{size.toString()}</span> -->
+							<!-- </ListboxOption> -->
 						{/each}
-					</ListboxOptions>
+					<!-- </ListboxOptions> -->
 				</div>
-			{/if}
-		</Listbox>
+			<!-- {/if} -->
+		<!-- </Listbox> -->
 	</div>
 	<p>
 		Page {page || 1} of {totalPages || 1}
@ -90,7 +90,7 @@
 				dispatch('previousPageEvent', { page });
 			}}
 		>
-			<ChevronLeftIcon width="24" height="24" />
+			<!-- <ChevronLeftIcon width="24" height="24" /> -->
 			<p class="word">{backwardText || 'Prev'}</p>
 		</button>
 		<button
@ -103,7 +103,7 @@
 			}}
 		>
 			<p class="word">{forwardText || 'Next'}</p>
-			<ChevronRightIcon width="24" height="24" />
+			<!-- <ChevronRightIcon width="24" height="24" /> -->
 		</button>
 	</div>
 </div>
--- a/src/lib/components/preferences/gameCollection.svelte
+++ b/src/lib/components/preferences/gameCollection.svelte
@ -3,7 +3,7 @@
 	import { boredState } from '$lib/stores/boredState';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { ToastType } from '$lib/types';
-	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
 	import ClearCollectionDialog from '../dialog/ClearCollectionDialog.svelte';
 	import { toast } from '../toast/toast';

@ -48,13 +48,15 @@
 	</div>
 	<div class="collection-buttons">
 		<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
-			><ShareIcon width="24" height="24" />Export</button
+			>
+			<!-- <ShareIcon width="24" height="24" /> -->
+			Export</button
 		>
 		<!-- <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
 			><SaveIcon width="24" height="24" />Save</button
 		> -->
 		<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}>
-			<TrashIcon width="24" height="24" />Clear
+			<!-- <TrashIcon width="24" height="24" />Clear -->
 		</button>
 	</div>
 </div>
--- a/src/lib/components/preferences/gameWishlist.svelte
+++ b/src/lib/components/preferences/gameWishlist.svelte
@ -3,7 +3,7 @@
 	import { boredState } from '$lib/stores/boredState';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
 	import { ToastType } from '$lib/types';
-	import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
+	// import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
 	import ClearWishlistDialog from '../dialog/ClearWishlistDialog.svelte';
 	import { toast } from '../toast/toast';

@ -48,13 +48,15 @@
 	</div>
 	<div class="wishlist-buttons">
 		<button type="button" aria-label="Export Wishlist" on:click={() => exportWishlist()}
-			><ShareIcon width="24" height="24" />Export</button
+			>
+			<!-- <ShareIcon width="24" height="24" /> -->
+			Export</button
 		>
 		<!-- <button type="button" aria-label="Save Wishlist" on:click={() => saveWishlist()}
 			><SaveIcon width="24" height="24" />Save</button
 		> -->
 		<button type="button" aria-label="Clear saved wishlist" on:click={() => clearWishlist()}>
-			<TrashIcon width="24" height="24" />Clear
+			<!-- <TrashIcon width="24" height="24" />Clear -->
 		</button>
 	</div>
 </div>
--- a/src/lib/components/preferences/profile.svelte
+++ b/src/lib/components/preferences/profile.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
+	// import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
 	import cogOutline from '@iconify-icons/mdi/cog-outline';
 	import Themes from './themes.svelte';
 	import GameCollection from './gameCollection.svelte';
@ -8,8 +8,8 @@
 </script>

 <div class="container">
-	<Popover let:open class="popover">
-		<PopoverButton aria-label="Preferences">
+	<!-- <Popover let:open class="popover">
+		<PopoverButton aria-label="Preferences"> -->
 			<!-- <CogIcon width="24" height="24" /> -->
 			<!-- <iconify-icon icon="mdi:cog-outline"
 				width="24" height="24"
@ -26,11 +26,11 @@
 					: 'transform: rotate(0deg); transition: transform 0.5s ease;'
 				}
 			/>
-		</PopoverButton>
+		<!-- </PopoverButton> -->

 		{#if open}
 			<div transition:fade={{ duration: 100 }}>
-				<PopoverPanel class="popover-panel" static>
+				<!-- <PopoverPanel class="popover-panel" static> -->
 					<div class="preferences">
 						<svg
 							width="24"
@ -60,10 +60,10 @@
 							<GameWishlist />
 						</div>
 					</div>
-				</PopoverPanel>
+				<!-- </PopoverPanel> -->
 			</div>
 		{/if}
-	</Popover>
+	<!-- </Popover> -->
 </div>

 <style lang="scss">
--- a/src/lib/components/preferences/themes.svelte
+++ b/src/lib/components/preferences/themes.svelte
@ -1,12 +1,12 @@
 <script lang="ts">
  import { fade } from 'svelte/transition';
  import { browser } from '$app/environment';
-  import {
-    Listbox,
-    ListboxButton,
-    ListboxOption,
-    ListboxOptions
-  } from '@rgossiaux/svelte-headlessui';
+  // import {
+  //   Listbox,
+  //   ListboxButton,
+  //   ListboxOption,
+  //   ListboxOptions
+  // } from '@rgossiaux/svelte-headlessui';

  type Themes = Record<string, { name: string }>;

@ -61,8 +61,8 @@

 <div class="theme">
  <div class="listbox">
-    <Listbox value={selectedTheme} on:change={handleChange} let:open>
-      <ListboxButton class="button">
+    <!-- <Listbox value={selectedTheme} on:change={handleChange} let:open> -->
+      <!-- <ListboxButton class="button"> -->
        <span>{selectedTheme.name}</span>

        <span>
@ -82,22 +82,22 @@
            />
          </svg>
        </span>
-      </ListboxButton>
+      <!-- </ListboxButton> -->

      {#if open}
        <div transition:fade={{ duration: 100 }}>
-          <ListboxOptions class="options" static>
+          <!-- <ListboxOptions class="options" static> -->
            {#each Object.entries(themes) as [key, theme] (key)}
-              <ListboxOption value={theme} let:active let:selected>
+              <!-- <ListboxOption value={theme} let:active let:selected> -->
                <span class="option" class:active class:selected>
                  {theme.name}
                </span>
-              </ListboxOption>
+              <!-- </ListboxOption> -->
            {/each}
-          </ListboxOptions>
+          <!-- </ListboxOptions> -->
        </div>
      {/if}
-    </Listbox>
+    <!-- </Listbox> -->
  </div>
 </div>

--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@ -6,6 +6,7 @@
 	import { ToastType } from '$lib/types';
  import { superForm } from 'sveltekit-superforms/client';
 	import { toast } from '../../toast/toast';
+	import Button from '$components/ui/button/Button.svelte';

 	export let data: SuperValidated<SearchSchema>;
 	const { enhance } = superForm(data, {
@ -41,7 +42,8 @@
 	use:enhance
 >
 	<fieldset aria-busy={submitting} disabled={submitting}>
-		<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
+		<Button type="submit" disabled={submitting}>Random Game 🎲</Button>
+		<!-- <button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button> -->
 	</fieldset>
 </form>

--- a/src/lib/components/search/textSearch/index.svelte
+++ b/src/lib/components/search/textSearch/index.svelte
@ -5,8 +5,8 @@
 	import { superForm } from 'sveltekit-superforms/client';
 	import SuperDebug from 'sveltekit-superforms/client/SuperDebug.svelte';
 	import type { SuperValidated } from 'sveltekit-superforms/index';
-	import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
-	import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
+	// import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
+	// import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
 	import { boredState } from '$lib/stores/boredState';
 	import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 	import { xl, md, sm } from '$lib/stores/mediaQueryStore';
@ -168,32 +168,32 @@
 			<input id="limit" type="hidden" name="limit" bind:value={$form.limit} />
 		</fieldset>
 		{#if advancedSearch}
-			<Disclosure>
-				<DisclosureButton
+			<!-- <Disclosure> -->
+				<!-- <DisclosureButton
 					class="disclosure-button"
 					on:click={() => (disclosureOpen = !disclosureOpen)}
-				>
+				> -->
 					<span>Advanced Search?</span>
-					<ChevronRightIcon
+					<!-- <ChevronRightIcon
 						class="icon disclosure-icon"
 						style={disclosureOpen
 							? 'transform: rotate(90deg); transition: transform 0.5s ease;'
 							: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
-					/>
-				</DisclosureButton>
+					/> -->
+				<!-- </DisclosureButton> -->

 				{#if disclosureOpen}
 					<div transition:fade>
 						<!-- Using `static`, `DisclosurePanel` is always rendered,
                and ignores the `open` state -->
-						<DisclosurePanel static>
+						<!-- <DisclosurePanel static> -->
 							{#if disclosureOpen}
 								<AdvancedSearch {form} {errors} {constraints} />
 							{/if}
-						</DisclosurePanel>
+						<!-- </DisclosurePanel> -->
 					</div>
 				{/if}
-			</Disclosure>
+			<!-- </Disclosure> -->
 		{/if}
 	</div>
 	{#if showButton}
--- a/src/lib/components/toggle.svelte
+++ b/src/lib/components/toggle.svelte
@ -1,16 +1,16 @@
 <script>
-  import { Switch } from '@rgossiaux/svelte-headlessui';
+  // import { Switch } from '@rgossiaux/svelte-headlessui';
  let enabled = false;
 </script>

-<Switch
+<!-- <Switch
  checked={enabled}
  on:change={(e) => (enabled = e.detail)}
  class={enabled ? 'switch switch-enabled' : 'switch switch-disabled'}
 >
  <span class="sr-only">Dark Mode</span>
  <span class="toggle" class:toggle-on={enabled} class:toggle-off={!enabled} />
-</Switch>
+</Switch> -->

 <style>
  :global(.switch) {
--- a/src/lib/components/ui/button/Button.svelte
+++ b/src/lib/components/ui/button/Button.svelte
@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { VariantProps } from "class-variance-authority";
+	import type {
+		HTMLAnchorAttributes,
+		HTMLButtonAttributes
+	} from "svelte/elements";
+	import { cn } from "$lib/utils";
+	import { buttonVariants } from ".";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let href: HTMLAnchorAttributes["href"] = undefined;
+	export let type: HTMLButtonAttributes["type"] = undefined;
+	export let variant: VariantProps<typeof buttonVariants>["variant"] =
+		"default";
+	export let size: VariantProps<typeof buttonVariants>["size"] = "default";
+
+	type Props = {
+		class?: string | null;
+		variant?: VariantProps<typeof buttonVariants>["variant"];
+		size?: VariantProps<typeof buttonVariants>["size"];
+	};
+
+	interface AnchorElement extends Props, HTMLAnchorAttributes {
+		href?: HTMLAnchorAttributes["href"];
+		type?: never;
+	}
+
+	interface ButtonElement extends Props, HTMLButtonAttributes {
+		type?: HTMLButtonAttributes["type"];
+		href?: never;
+	}
+
+	type $$Props = AnchorElement | ButtonElement;
+</script>
+
+<svelte:element
+	this={href ? "a" : "button"}
+	type={href ? undefined : type}
+	{href}
+	class={cn(buttonVariants({ variant, size, className }))}
+	{...$$restProps}
+	on:click
+	on:change
+	on:keydown
+	on:keyup
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</svelte:element>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+
+export { default as Button } from "./Button.svelte";
+
+export const buttonVariants = cva(
+	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border border-input hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "underline-offset-4 hover:underline text-primary"
+			},
+			size: {
+				default: "h-10 py-2 px-4",
+				sm: "h-9 px-3 rounded-md",
+				lg: "h-11 px-8 rounded-md"
+			}
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default"
+		}
+	}
+);
--- a/src/lib/components/ui/dialog/DialogContent.svelte
+++ b/src/lib/components/ui/dialog/DialogContent.svelte
@ -0,0 +1,29 @@
+<script lang="ts">
+	import { X } from "lucide-svelte";
+	import { Dialog as DialogPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+	import DialogOverlay from "./DialogOverlay.svelte";
+	import DialogPortal from "./DialogPortal.svelte";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<DialogPortal>
+	<DialogOverlay />
+	<DialogPrimitive.Content
+		class={cn(
+			"fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0",
+			className
+		)}
+		{...$$restProps}
+	>
+		<slot />
+		<DialogPrimitive.Close
+			class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+		>
+			<X className="h-4 w-4" />
+			<span class="sr-only">Close</span>
+		</DialogPrimitive.Close>
+	</DialogPrimitive.Content>
+</DialogPortal>
--- a/src/lib/components/ui/dialog/DialogDescription.svelte
+++ b/src/lib/components/ui/dialog/DialogDescription.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Description
+	class={cn("text-sm text-muted-foreground", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Description>
--- a/src/lib/components/ui/dialog/DialogFooter.svelte
+++ b/src/lib/components/ui/dialog/DialogFooter.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/dialog/DialogHeader.svelte
+++ b/src/lib/components/ui/dialog/DialogHeader.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	{...$$restProps}
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/dialog/DialogOverlay.svelte
+++ b/src/lib/components/ui/dialog/DialogOverlay.svelte
@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Overlay
+	class={cn(
+		"fixed inset-0 z-50 bg-background/80 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
+		className
+	)}
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/dialog/DialogPortal.svelte
+++ b/src/lib/components/ui/dialog/DialogPortal.svelte
@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "radix-svelte";
+</script>
+
+<DialogPrimitive.Portal>
+	<div
+		class="fixed inset-0 z-50 flex items-start justify-center sm:items-center"
+	>
+		<slot />
+	</div>
+</DialogPrimitive.Portal>
--- a/src/lib/components/ui/dialog/DialogTitle.svelte
+++ b/src/lib/components/ui/dialog/DialogTitle.svelte
@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<DialogPrimitive.Title
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Title>
--- a/src/lib/components/ui/dialog/index.ts
+++ b/src/lib/components/ui/dialog/index.ts
@ -0,0 +1,12 @@
+import { Dialog as DialogPrimitive } from "radix-svelte";
+
+export const Dialog = DialogPrimitive.Root;
+export const DialogTrigger = DialogPrimitive.Trigger;
+
+export { default as DialogContent } from "./DialogContent.svelte";
+export { default as DialogDescription } from "./DialogDescription.svelte";
+export { default as DialogFooter } from "./DialogFooter.svelte";
+export { default as DialogHeader } from "./DialogHeader.svelte";
+export { default as DialogOverlay } from "./DialogOverlay.svelte";
+export { default as DialogPortal } from "./DialogPortal.svelte";
+export { default as DialogTitle } from "./DialogTitle.svelte";
--- a/src/lib/components/ui/input/Input.svelte
+++ b/src/lib/components/ui/input/Input.svelte
@ -0,0 +1,30 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+
+	export let value: HTMLInputAttributes["value"] = undefined;
+	export { className as class };
+</script>
+
+<input
+	class={cn(
+		"flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:paste
+	on:input
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1 @@
+export { default as Input } from "./Input.svelte";
--- a/src/lib/components/ui/label/Label.svelte
+++ b/src/lib/components/ui/label/Label.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cva } from "class-variance-authority";
+	import { Label as LabelPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	const labelVariants = cva(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+	);
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root class={cn(labelVariants(), className)} {...$$restProps}>
+	<slot />
+</LabelPrimitive.Root>
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1 @@
+export { default as Label } from "./Label.svelte";
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,6 @@
+import type { ClassValue } from 'clsx';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,4 +1,5 @@
 <script lang="ts">
+	import "../app.postcss";
 	import { browser } from '$app/environment';
 	import { navigating } from '$app/stores';
 	import debounce from 'just-debounce-it';
@ -16,7 +17,7 @@
 	import { gameStore } from '$lib/stores/gameSearchStore';
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
-	import '$styles/styles.pcss';
+	// import '$styles/styles.pcss';
 	import type { SavedGameType } from '$lib/types';

 	$: {
@ -33,38 +34,38 @@
 	$: isOpen = $boredState?.dialog?.isOpen;

 	if (browser) {
-		const collator = new Intl.Collator('en');
+	const collator = new Intl.Collator('en');

-		let collectionEmpty = $collectionStore.length === 0 || false;
-		let wishlistEmpty = $wishlistStore.length === 0 || false;
-		if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
-			const wishlist: SavedGameType[] = JSON.parse(localStorage.wishlist);
-			if (wishlist?.length !== 0) {
-				wishlist.sort((a, b) => collator.compare(a.name, b.name));
-				for (const item of wishlist) {
-					if (!item?.searchTerms) {
-						item.searchTerms = `${item?.name?.toLowerCase()}`;
-					}
-					if (!item?.includeInRandom) {
-						item.includeInRandom = false;
-					}
+	let collectionEmpty = $collectionStore.length === 0 || false;
+	let wishlistEmpty = $wishlistStore.length === 0 || false;
+	if (wishlistEmpty && localStorage?.wishlist && localStorage?.wishlist?.length !== 0) {
+		const wishlist: SavedGameType[] = JSON.parse(localStorage.wishlist);
+		if (wishlist?.length !== 0) {
+			wishlist.sort((a, b) => collator.compare(a.name, b.name));
+			for (const item of wishlist) {
+				if (!item?.searchTerms) {
+					item.searchTerms = `${item?.name?.toLowerCase()}`;
 				}
-				wishlistStore.addAll(wishlist);
-			}
-		}
-		if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
-			const collection: SavedGameType[] = JSON.parse(localStorage.collection);
-			if (collection?.length !== 0) {
-				collection.sort((a, b) => collator.compare(a.name, b.name));
-				for (const item of collection) {
-					if (!item?.searchTerms) {
-						item.searchTerms = `${item?.name?.toLowerCase()}`;
-					}
+				if (!item?.includeInRandom) {
+					item.includeInRandom = false;
 				}
-				collectionStore.addAll(collection);
 			}
+			wishlistStore.addAll(wishlist);
 		}
 	}
+	if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
+		const collection: SavedGameType[] = JSON.parse(localStorage.collection);
+		if (collection?.length !== 0) {
+			collection.sort((a, b) => collator.compare(a.name, b.name));
+			for (const item of collection) {
+				if (!item?.searchTerms) {
+					item.searchTerms = `${item?.name?.toLowerCase()}`;
+				}
+			}
+			collectionStore.addAll(collection);
+		}
+	}
+}

 	const dev = process.env.NODE_ENV !== 'production';

@ -72,7 +73,7 @@
 </script>

 {#if !dev}
-	<Analytics />
+	<Analytics></Analytics>
 {/if}

 <!-- {#if dev}
@ -88,10 +89,10 @@
 {/if} -->

 <div class="wrapper">
-	<Header user={data.user} />
+	<Header user="{data.user}"></Header>
 		<main>
 			<Transition url={data.url} transition={{ type: 'page' }}>
-				<slot />
+				<slot></slot>
 			</Transition>
 		</main>
 	<Footer />
@ -99,18 +100,18 @@
 {#if $boredState?.loading}
 	<Portal>
 			<div class="loading">
-				<Loading />
+				<Loading></Loading>
 				<h3>Loading...</h3>
 			</div>
-		<div class="background" />
+		<div class="background"></div>
 	</Portal>
 {/if}
 {#if isOpen}
 	<div class="container">
-		<svelte:component this={$boredState?.dialog?.content} />
+		<svelte:component this={$boredState?.dialog?.content}></svelte:component>
 	</div>
 {/if}
-<Toast />
+<Toast></Toast>

 <style lang="postcss">
 	.loading {
--- a/src/routes/auth/signin/+page.svelte
+++ b/src/routes/auth/signin/+page.svelte
@ -1,6 +1,9 @@
 <script lang="ts">
 	import { superForm } from 'sveltekit-superforms/client';
 	import { userSchema } from '$lib/config/zod-schemas.js';
+	import Label from '$components/ui/label/Label.svelte';
+	import Input from '$components/ui/input/Input.svelte';
+	import Button from '$components/ui/button/Button.svelte';

 	export let data;

@ -22,45 +25,22 @@
 			</div>
 		</aside>
 	{/if}
-	<div>
-		<label class="label">
-			<span class="sr-only">Username</span>
-			<input
-				id="username"
-				name="username"
-				type="text"
-				placeholder="Username"
-				autocomplete="username"
-				data-invalid={$form.username}
-				bind:value={$form.username}
-				class="input"
-				class:input-error={$errors.username}
-			/>
+	<div class="grid w-full max-w-sm items-center gap-2">
+			<h2
+				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+			>
+				Sign into your account
+			</h2>
+			<Label for="username">Username</Label>
+			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
 			{#if $errors.username}
-				<small>{$errors.username}</small>
+				<p class="text-sm text-muted-foreground">{$errors.username}</p>
 			{/if}
-		</label>
-	</div>
-	<div>
-		<label class="label">
-			<span class="sr-only">Password</span>
-			<input
-				id="password"
-				name="password"
-				type="password"
-				placeholder="Password"
-				data-invalid={$form.password}
-				bind:value={$form.password}
-				class="input"
-				class:input-error={$errors.password}
-			/>
+			<Label for="password">Password</Label>
+			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
 			{#if $errors.password}
-				<small>{$errors.password}</small>
+				<p class="text-sm text-muted-foreground">{$errors.password}</p>
 			{/if}
-		</label>
-	</div>
-
-	<div>
-		<button type="submit" class="button">Sign In</button>
+			<Button type="submit">Sign In</Button>
 	</div>
 </form>
--- a/src/routes/auth/signup/+page.svelte
+++ b/src/routes/auth/signup/+page.svelte
@ -1,5 +1,8 @@
 <script lang="ts">
-  import { userSchema } from '$lib/config/zod-schemas.js';
+	import Button from '$components/ui/button/Button.svelte';
+  import Input from '$components/ui/input/Input.svelte';
+import Label from '$components/ui/label/Label.svelte';
+import { userSchema } from '$lib/config/zod-schemas.js';
  import { superForm } from 'sveltekit-superforms/client';

 	export let data;
@ -22,141 +25,49 @@

 <div class="page">
 	<form method="POST" action="/auth/signup" use:enhance>
-    <h1>Signup user</h1>
-    <label class="label">
-			<span class="sr-only">First Name</span>
-			<input
-				id="firstName"
-				name="firstName"
-				type="text"
-				placeholder="First Name"
-				autocomplete="given-name"
-				data-invalid={$errors.firstName}
-				bind:value={$form.firstName}
-				class="input"
-				class:input-error={$errors.firstName}
-			/>
+		<div class="grid w-full max-w-sm items-center gap-2">
+			<h2
+				class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+			>
+				Signup for an account
+			</h2>
+			<Label for="firstName">First Name</Label>
+			<Input type="text" id="firstName" name="firstName" placeholder="First Name" autocomplete="given-name" data-invalid={$errors.firstName} bind:value={$form.firstName} />
 			{#if $errors.firstName}
-				<small>{$errors.firstName}</small>
+				<p class="text-sm text-muted-foreground">{$errors.firstName}</p>
 			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Last Name</span>
-			<input
-				id="lastName"
-				name="lastName"
-				type="text"
-				placeholder="Last Name"
-				autocomplete="family-name"
-				data-invalid={$errors.lastName}
-				bind:value={$form.lastName}
-				class="input"
-				class:input-error={$errors.lastName}
-			/>
+			<Label for="firstName">Last Name</Label>
+			<Input type="text" id="lastName" name="lastName" placeholder="Last Name" autocomplete="family-name" data-invalid={$errors.lastName} bind:value={$form.lastName} />
 			{#if $errors.lastName}
-				<small>{$errors.lastName}</small>
+				<p class="text-sm text-muted-foreground">{$errors.lastName}</p>
 			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Email</span>
-			<input
-				id="email"
-				name="email"
-				type="email"
-				placeholder="Email"
-				autocomplete="email"
-				data-invalid={$errors.email}
-				bind:value={$form.email}
-				class="input"
-				class:input-error={$errors.email}
-			/>
+			<Label for="email">Email</Label>
+			<Input type="email" id="email" name="email" placeholder="Email" autocomplete="email" data-invalid={$errors.email} bind:value={$form.email} />
 			{#if $errors.email}
-				<small>{$errors.email}</small>
+				<p class="text-sm text-muted-foreground">{$errors.email}</p>
 			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Username</span>
-			<input
-				id="username"
-				name="username"
-				type="username"
-				placeholder="Username"
-				autocomplete="email"
-				{...$constraints.username}
-				data-invalid={$errors.username}
-				bind:value={$form.username}
-				class="input"
-				class:input-error={$errors.username}
-			/>
+			<Label for="username">Username</Label>
+			<Input type="text" id="username" name="username" placeholder="Username" autocomplete="username" data-invalid={$errors.username} bind:value={$form.username} />
 			{#if $errors.username}
-				<small>{$errors.username}</small>
+				<p class="text-sm text-muted-foreground">{$errors.username}</p>
 			{/if}
-		</label>
-    <label class="label">
-			<span class="sr-only">Password</span>
-			<input
-				id="password"
-				name="password"
-				type="password"
-				placeholder="Password"
-				{...$constraints.username}
-				data-invalid={$errors.password}
-				bind:value={$form.password}
-				class="input"
-				class:input-error={$errors.password}
-			/>
+			<Label for="password">Password</Label>
+			<Input type="password" id="password" name="password" placeholder="Password" autocomplete="new-password" data-invalid={$errors.password} bind:value={$form.password} />
 			{#if $errors.password}
-				<small>{$errors.password}</small>
+				<p class="text-sm text-muted-foreground">{$errors.password}</p>
 			{/if}
-		</label>
-		<label class="label">
-			<span class="sr-only">Confirm Password</span>
-			<input
-				id="confirm_password"
-				name="confirm_password"
-				type="password"
-				placeholder="Confirm your password"
-				{...$constraints.confirm_password}
-				data-invalid={$errors.confirm_password}
-				bind:value={$form.confirm_password}
-				class="input"
-				class:input-error={$errors.confirm_password}
-			/>
+			<Label for="confirm_password">Confirm Password</Label>
+			<Input type="password" id="confirm_password" name="confirm_password" placeholder="Confirm Password" autocomplete="new-password" data-invalid={$errors.confirm_password} bind:value={$form.confirm_password} />
 			{#if $errors.confirm_password}
-				<small>{$errors.confirm_password}</small>
+				<p class="text-sm text-muted-foreground">{$errors.confirm_password}</p>
 			{/if}
-		</label>
-    
-    <button type="submit">Signup</button>
-
-    <a class="back" href="/"> or Cancel </a>
+			<div class="flex place-content-">
+				<Button type="submit">Signup</Button>
+				<Button variant="link" href="/">or Cancel</Button>
+			</div>
+		</div>
  </form>
 </div>

 <style scoped>
-  .page {
-    padding: 3rem;
-    display: flex;
-    justify-content: center;
-  }
-
-  /* input[type="text"] {
-    width: 100%;
-    padding: 0.5rem;
-    margin: 0.5rem 0;
-    border-radius: 0.25rem;
-    border: 0.125rem solid rgba(0, 0, 0, 0.2);
-  }
-
-  button[type="submit"] {
-    border: 0;
-    padding: 1rem 2rem;
-  } */
-
-  .back {
-    margin-left: 1rem;
-  }
-  .error {
-    color: red;
-  }
 </style>
--- a/src/routes/game/[id]/+page.svelte
+++ b/src/routes/game/[id]/+page.svelte
@ -3,14 +3,14 @@
 	import { Image } from 'svelte-lazy-loader';
 	import minusCircle from '@iconify-icons/line-md/minus-circle';
 	import plusCircle from '@iconify-icons/line-md/plus-circle';
-	import {
-  ChevronRightIcon,
-		ExternalLinkIcon,
-		MinusCircleIcon,
-		MinusIcon,
-		PlusCircleIcon,
-		PlusIcon
-	} from '@rgossiaux/svelte-heroicons/outline';
+	// import {
+  // ChevronRightIcon,
+	// 	ExternalLinkIcon,
+	// 	MinusCircleIcon,
+	// 	MinusIcon,
+	// 	PlusCircleIcon,
+	// 	PlusIcon
+	// } from '@rgossiaux/svelte-heroicons/outline';
 	import type { GameType, SavedGameType } from '$lib/types';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
@ -113,7 +113,8 @@
 				<p>Minimum Age: {game.min_age}</p>
 			{/if}
 			<LinkWithIcon external ariaLabel={`Board Game Atlas Link for ${game.name}`} url={game.url}>
-				Board Game Atlas <ExternalLinkIcon width="24" height="24" />
+				Board Game Atlas
+				<!-- <ExternalLinkIcon width="24" height="24" /> -->
 			</LinkWithIcon>
 		</div>
 		{#if user?.username}
@ -156,9 +157,11 @@
 	<button class="btn button-icon" type="button" on:click={() => (seeMore = !seeMore)}
 		>See
 		{#if !seeMore}
-			More <PlusIcon width="24" height="24" />
+			More
+			<!-- <PlusIcon width="24" height="24" /> -->
 		{:else}
-			Less <MinusIcon width="24" height="24" />
+			Less
+			<!-- <MinusIcon width="24" height="24" /> -->
 		{/if}
 	</button>
 {:else}
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,25 +1,27 @@
-import preprocess from 'svelte-preprocess';
 import adapter from '@sveltejs/adapter-vercel';
 import { vitePreprocess } from '@sveltejs/kit/vite';
-
-/** @type {import('@sveltejs/kit').Config} */
+/** @type {import('@sveltejs/kit').Config}*/
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [vitePreprocess()],
+	preprocess: [vitePreprocess({})],
 	vitePlugin: {
-		inspector: true,
+		inspector: true
 	},
 	kit: {
 		adapter: adapter(),
 		alias: {
-			$db: './src/db',
 			$assets: './src/assets',
+			$components: './src/components',
+			'$components/*': 'src/lib/components/*',
+			$db: './src/db',
 			$lib: './src/lib',
 			$styles: './src/styles',
 			$themes: './src/themes'
 		}
 	},
+	shadcn: {
+		componentPath: './src/lib/components/ui'
+	}
 };
-
 export default config;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -1,18 +1,65 @@
+import { fontFamily } from 'tailwindcss/defaultTheme';
+import tailwindcssAnimate from 'tailwindcss-animate';
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
-	// 1. Apply the dark mode class setting:
-	darkMode: 'class',
-	content: [
-		'./src/**/*.{html,js,svelte,ts}',
-		// 2. Append the path for the Skeleton NPM package and files:
-		require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')
-	],
+const config = {
+	darkMode: ['class'],
+	content: ['./src/**/*.{html,js,svelte,ts}'],
 	theme: {
-		extend: {}
+		container: {
+			center: true,
+			padding: '2rem',
+			screens: {
+				'2xl': '1400px'
+			}
+		},
+		extend: {
+			colors: {
+				border: 'hsl(var(--border))',
+				input: 'hsl(var(--input))',
+				ring: 'hsl(var(--ring))',
+				background: 'hsl(var(--background))',
+				foreground: 'hsl(var(--foreground))',
+				primary: {
+					DEFAULT: 'hsl(var(--primary))',
+					foreground: 'hsl(var(--primary-foreground))'
+				},
+				secondary: {
+					DEFAULT: 'hsl(var(--secondary))',
+					foreground: 'hsl(var(--secondary-foreground))'
+				},
+				destructive: {
+					DEFAULT: 'hsl(var(--destructive))',
+					foreground: 'hsl(var(--destructive-foreground))'
+				},
+				muted: {
+					DEFAULT: 'hsl(var(--muted))',
+					foreground: 'hsl(var(--muted-foreground))'
+				},
+				accent: {
+					DEFAULT: 'hsl(var(--accent))',
+					foreground: 'hsl(var(--accent-foreground))'
+				},
+				popover: {
+					DEFAULT: 'hsl(var(--popover))',
+					foreground: 'hsl(var(--popover-foreground))'
+				},
+				card: {
+					DEFAULT: 'hsl(var(--card))',
+					foreground: 'hsl(var(--card-foreground))'
+				}
+			},
+			borderRadius: {
+				lg: 'var(--radius)',
+				md: 'calc(var(--radius) - 2px)',
+				sm: 'calc(var(--radius) - 4px)'
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
 	},
-	plugins: [
-		require('@tailwindcss/forms'),
-		// 3. Append the Skeleton plugin to the end of this list
-		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
-	]
+	plugins: [tailwindcssAnimate]
 };
+
+export default config;
--- a/vite.config.ts
+++ b/vite.config.ts
@ -2,5 +2,8 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';

 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
 });
				`@ -0,0 +1 @@`
				`export { default as Input } from "./Input.svelte";`
				`@ -0,0 +1 @@`
				`export { default as Label } from "./Label.svelte";`