Adding card and radio-group, update deps, remove all custom css for now, add in theme from user and in layout, and change game to shad card.

2025-09-08 17:40:22 +00:00 · 2023-07-02 23:04:33 -07:00 · 2023-07-02 23:04:33 -07:00 · 4a803998c6
commit 4a803998c6
parent 9c71c3664f
19 changed files with 387 additions and 131 deletions
--- a/package.json
+++ b/package.json
@ -25,15 +25,15 @@
 		"@playwright/test": "^1.35.1",
 		"@sveltejs/adapter-auto": "^1.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/kit": "^1.20.5",
+		"@sveltejs/kit": "^1.21.0",
 		"@types/cookie": "^0.5.1",
-		"@types/node": "^18.16.18",
+		"@types/node": "^18.16.19",
 		"@typescript-eslint/eslint-plugin": "^5.60.1",
 		"@typescript-eslint/parser": "^5.60.1",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.43.0",
+		"eslint": "^8.44.0",
 		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte": "^2.31.1",
+		"eslint-plugin-svelte": "^2.32.2",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
 		"postcss": "^8.4.24",
@ -42,12 +42,12 @@
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"prisma": "^4.16.1",
+		"prisma": "^4.16.2",
 		"sass": "^1.63.6",
 		"svelte": "^3.59.2",
 		"svelte-check": "^2.10.3",
 		"svelte-preprocess": "^5.0.4",
-		"sveltekit-superforms": "^1.1.2",
+		"sveltekit-superforms": "^1.1.3",
 		"tailwindcss": "^3.3.2",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.6.0",
@ -81,7 +81,7 @@
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
 		"lucia-auth": "^1.8.0",
-		"lucide-svelte": "^0.256.0",
+		"lucide-svelte": "^0.256.1",
 		"open-props": "^1.5.10",
 		"radix-svelte": "^0.8.0",
 		"svelte-lazy": "^1.2.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -34,7 +34,7 @@ dependencies:
    version: 2.0.1
  '@prisma/client':
    specifier: 4.16.1
-    version: 4.16.1(prisma@4.16.1)
+    version: 4.16.1(prisma@4.16.2)
  '@types/feather-icons':
    specifier: ^4.29.1
    version: 4.29.1
@ -63,8 +63,8 @@ dependencies:
    specifier: ^1.8.0
    version: 1.8.0
  lucide-svelte:
-    specifier: ^0.256.0
-    version: 0.256.0(svelte@3.59.2)
+    specifier: ^0.256.1
+    version: 0.256.1(svelte@3.59.2)
  open-props:
    specifier: ^1.5.10
    version: 1.5.10
@ -82,7 +82,7 @@ dependencies:
    version: 0.2.1(svelte@3.59.2)
  sveltekit-flash-message:
    specifier: ^0.11.3
-    version: 0.11.3(@sveltejs/kit@1.20.5)(svelte@3.59.2)
+    version: 0.11.3(@sveltejs/kit@1.21.0)(svelte@3.59.2)
  tailwind-merge:
    specifier: ^1.13.2
    version: 1.13.2
@ -99,37 +99,37 @@ devDependencies:
    version: 1.35.1
  '@sveltejs/adapter-auto':
    specifier: ^1.0.3
-    version: 1.0.3(@sveltejs/kit@1.20.5)
+    version: 1.0.3(@sveltejs/kit@1.21.0)
  '@sveltejs/adapter-vercel':
    specifier: ^1.0.6
-    version: 1.0.6(@sveltejs/kit@1.20.5)
+    version: 1.0.6(@sveltejs/kit@1.21.0)
  '@sveltejs/kit':
-    specifier: ^1.20.5
-    version: 1.20.5(svelte@3.59.2)(vite@4.3.9)
+    specifier: ^1.21.0
+    version: 1.21.0(svelte@3.59.2)(vite@4.3.9)
  '@types/cookie':
    specifier: ^0.5.1
    version: 0.5.1
  '@types/node':
-    specifier: ^18.16.18
-    version: 18.16.18
+    specifier: ^18.16.19
+    version: 18.16.19
  '@typescript-eslint/eslint-plugin':
    specifier: ^5.60.1
-    version: 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5)
+    version: 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5)
  '@typescript-eslint/parser':
    specifier: ^5.60.1
-    version: 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+    version: 5.60.1(eslint@8.44.0)(typescript@4.9.5)
  autoprefixer:
    specifier: ^10.4.14
    version: 10.4.14(postcss@8.4.24)
  eslint:
-    specifier: ^8.43.0
-    version: 8.43.0
+    specifier: ^8.44.0
+    version: 8.44.0
  eslint-config-prettier:
    specifier: ^8.8.0
-    version: 8.8.0(eslint@8.43.0)
+    version: 8.8.0(eslint@8.44.0)
  eslint-plugin-svelte:
-    specifier: ^2.31.1
-    version: 2.31.1(eslint@8.43.0)(svelte@3.59.2)(ts-node@10.9.1)
+    specifier: ^2.32.2
+    version: 2.32.2(eslint@8.44.0)(svelte@3.59.2)(ts-node@10.9.1)
  just-clone:
    specifier: ^6.2.0
    version: 6.2.0
@ -155,8 +155,8 @@ devDependencies:
    specifier: ^2.10.1
    version: 2.10.1(prettier@2.8.8)(svelte@3.59.2)
  prisma:
-    specifier: ^4.16.1
-    version: 4.16.1
+    specifier: ^4.16.2
+    version: 4.16.2
  sass:
    specifier: ^1.63.6
    version: 1.63.6
@ -170,14 +170,14 @@ devDependencies:
    specifier: ^5.0.4
    version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.24)(sass@1.63.6)(svelte@3.59.2)(typescript@4.9.5)
  sveltekit-superforms:
-    specifier: ^1.1.2
-    version: 1.1.2(@sveltejs/kit@1.20.5)(svelte@3.59.2)(zod@3.21.4)
+    specifier: ^1.1.3
+    version: 1.1.3(@sveltejs/kit@1.21.0)(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)
+    version: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
  tslib:
    specifier: ^2.6.0
    version: 2.6.0
@ -186,7 +186,7 @@ devDependencies:
    version: 4.9.5
  vite:
    specifier: ^4.3.9
-    version: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+    version: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
  vitest:
    specifier: ^0.25.3
    version: 0.25.8(sass@1.63.6)
@ -196,6 +196,11 @@ devDependencies:

 packages:

+  /@aashutoshrathi/word-wrap@1.2.6:
+    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
  /@alloc/quick-lru@5.2.0:
    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
    engines: {node: '>=10'}
@ -980,13 +985,13 @@ packages:
    requiresBuild: true
    optional: true

-  /@eslint-community/eslint-utils@4.4.0(eslint@8.43.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0):
    resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
    dependencies:
-      eslint: 8.43.0
+      eslint: 8.44.0
      eslint-visitor-keys: 3.4.1
    dev: true

@ -995,13 +1000,13 @@ packages:
    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
    dev: true

-  /@eslint/eslintrc@2.0.3:
-    resolution: {integrity: sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==}
+  /@eslint/eslintrc@2.1.0:
+    resolution: {integrity: sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      ajv: 6.12.6
      debug: 4.3.4
-      espree: 9.5.2
+      espree: 9.6.0
      globals: 13.19.0
      ignore: 5.2.1
      import-fresh: 3.3.0
@ -1012,8 +1017,8 @@ packages:
      - supports-color
    dev: true

-  /@eslint/js@8.43.0:
-    resolution: {integrity: sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==}
+  /@eslint/js@8.44.0:
+    resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

@ -1132,7 +1137,7 @@ packages:
      '@prisma/client': ^4.2.0
      lucia-auth: ^1.3.0
    dependencies:
-      '@prisma/client': 4.16.1(prisma@4.16.1)
+      '@prisma/client': 4.16.1(prisma@4.16.2)
      lucia-auth: 1.8.0
    dev: false

@ -1189,7 +1194,7 @@ packages:
    engines: {node: '>=16'}
    hasBin: true
    dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
      playwright-core: 1.35.1
    optionalDependencies:
      fsevents: 2.3.2
@ -1198,7 +1203,7 @@ packages:
  /@polka/url@1.0.0-next.21:
    resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}

-  /@prisma/client@4.16.1(prisma@4.16.1):
+  /@prisma/client@4.16.1(prisma@4.16.2):
    resolution: {integrity: sha512-CoDHu7Bt+NuDo40ijoeHP79EHtECsPBTy3yte5Yo3op8TqXt/kV0OT5OrsWewKvQGKFMHhYQ+ePed3zzjYdGAw==}
    engines: {node: '>=14.17'}
    requiresBuild: true
@ -1209,15 +1214,15 @@ packages:
        optional: true
    dependencies:
      '@prisma/engines-version': 4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c
-      prisma: 4.16.1
+      prisma: 4.16.2
    dev: false

  /@prisma/engines-version@4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c:
    resolution: {integrity: sha512-tMWAF/qF00fbUH1HB4Yjmz6bjh7fzkb7Y3NRoUfMlHu6V+O45MGvqwYxqwBjn1BIUXkl3r04W351D4qdJjrgvA==}
    dev: false

-  /@prisma/engines@4.16.1:
-    resolution: {integrity: sha512-gpZG0kGGxfemgvK/LghHdBIz+crHkZjzszja94xp4oytpsXrgt/Ice82MvPsWMleVIniKuARrowtsIsim0PFJQ==}
+  /@prisma/engines@4.16.2:
+    resolution: {integrity: sha512-vx1nxVvN4QeT/cepQce68deh/Turxy5Mr+4L4zClFuK1GlxN3+ivxfuv+ej/gvidWn1cE1uAhW7ALLNlYbRUAw==}
    requiresBuild: true

  /@rollup/pluginutils@4.2.1:
@ -1228,21 +1233,21 @@ packages:
      picomatch: 2.3.1
    dev: true

-  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.20.5):
+  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.21.0):
    resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==}
    peerDependencies:
      '@sveltejs/kit': ^1.0.0
    dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
      import-meta-resolve: 2.2.0
    dev: true

-  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.20.5):
+  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.21.0):
    resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==}
    peerDependencies:
      '@sveltejs/kit': ^1.0.0
    dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
      '@vercel/nft': 0.22.6
      esbuild: 0.16.8
    transitivePeerDependencies:
@ -1250,8 +1255,8 @@ packages:
      - supports-color
    dev: true

-  /@sveltejs/kit@1.20.5(svelte@3.59.2)(vite@4.3.9):
-    resolution: {integrity: sha512-8rJYZ2boRlO75lwpbpB+DlSzIwmTuamXTpVlDtw4dBk86o3UaDe/+Ro4xCsV/4FtTw2U8xPHyV83edAWbQHG0w==}
+  /@sveltejs/kit@1.21.0(svelte@3.59.2)(vite@4.3.9):
+    resolution: {integrity: sha512-CBsYoI34SjtOQp0eG85dmVnvTR3Pjs8VgAQhO0CgQja9BIorKl808F1X8EunPhCcyek5r5lKQE1Mmbi0RuzHqA==}
    engines: {node: ^16.14 || >=18}
    hasBin: true
    requiresBuild: true
@ -1272,7 +1277,7 @@ packages:
      sirv: 2.0.2
      svelte: 3.59.2
      undici: 5.22.0
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
    transitivePeerDependencies:
      - supports-color

@ -1287,7 +1292,7 @@ packages:
      '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.59.2)(vite@4.3.9)
      debug: 4.3.4
      svelte: 3.59.2
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
    transitivePeerDependencies:
      - supports-color

@ -1305,7 +1310,7 @@ packages:
      magic-string: 0.30.0
      svelte: 3.59.2
      svelte-hmr: 0.15.2(svelte@3.59.2)
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
      vitefu: 0.2.4(vite@4.3.9)
    transitivePeerDependencies:
      - supports-color
@ -1343,8 +1348,8 @@ packages:
    resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
    dev: true

-  /@types/node@18.16.18:
-    resolution: {integrity: sha512-/aNaQZD0+iSBAGnvvN2Cx92HqE5sZCPZtx2TsK+4nvV23fFe09jVDvpArXr2j9DnYlzuU9WuoykDDc6wqvpNcw==}
+  /@types/node@18.16.19:
+    resolution: {integrity: sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==}

  /@types/pug@2.0.6:
    resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
@ -1353,7 +1358,7 @@ packages:
  /@types/sass@1.43.1:
    resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
    dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
    dev: true

  /@types/semver@7.5.0:
@ -1364,7 +1369,7 @@ packages:
    resolution: {integrity: sha512-txGIh+0eDFzKGC25zORnswy+br1Ha7hj5cMVwKIU7+s0U2AxxJru/jZSMU6OC9MJWP6+pc/hc6ZjyZShpsyY2g==}
    dev: false

-  /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5):
    resolution: {integrity: sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1376,12 +1381,12 @@ packages:
        optional: true
    dependencies:
      '@eslint-community/regexpp': 4.5.0
-      '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.60.1(eslint@8.44.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)
+      '@typescript-eslint/type-utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
      debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
      grapheme-splitter: 1.0.4
      ignore: 5.2.1
      natural-compare-lite: 1.4.0
@ -1392,7 +1397,7 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/parser@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/parser@5.60.1(eslint@8.44.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:
@ -1406,7 +1411,7 @@ packages:
      '@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
+      eslint: 8.44.0
      typescript: 4.9.5
    transitivePeerDependencies:
      - supports-color
@ -1420,7 +1425,7 @@ packages:
      '@typescript-eslint/visitor-keys': 5.60.1
    dev: true

-  /@typescript-eslint/type-utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/type-utils@5.60.1(eslint@8.44.0)(typescript@4.9.5):
    resolution: {integrity: sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
@ -1431,9 +1436,9 @@ packages:
        optional: true
    dependencies:
      '@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)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
      debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
      tsutils: 3.21.0(typescript@4.9.5)
      typescript: 4.9.5
    transitivePeerDependencies:
@ -1466,19 +1471,19 @@ packages:
      - supports-color
    dev: true

-  /@typescript-eslint/utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/utils@5.60.1(eslint@8.44.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
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
      '@types/json-schema': 7.0.12
      '@types/semver': 7.5.0
      '@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: 8.44.0
      eslint-scope: 5.1.1
      semver: 7.3.8
    transitivePeerDependencies:
@ -2053,29 +2058,29 @@ packages:
    engines: {node: '>=10'}
    dev: true

-  /eslint-config-prettier@8.8.0(eslint@8.43.0):
+  /eslint-config-prettier@8.8.0(eslint@8.44.0):
    resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
    hasBin: true
    peerDependencies:
      eslint: '>=7.0.0'
    dependencies:
-      eslint: 8.43.0
+      eslint: 8.44.0
    dev: true

-  /eslint-plugin-svelte@2.31.1(eslint@8.43.0)(svelte@3.59.2)(ts-node@10.9.1):
-    resolution: {integrity: sha512-08v+DqzHiwIVEbi+266D7+BDhayp9OSqCwa/lHaZlZOlFY0vZLYs/h7SkkUPzA5fTVt8OUJBtvCxFiWEYOvvGg==}
+  /eslint-plugin-svelte@2.32.2(eslint@8.44.0)(svelte@3.59.2)(ts-node@10.9.1):
+    resolution: {integrity: sha512-Jgbop2fNZsoxxkklZAIbDNhwAPynvnCtUXLsEC6O2qax7N/pfe2cNqT0ZoBbubXKJitQQDEyVDQ1rZs4ZWcrTA==}
    engines: {node: ^14.17.0 || >=16.0.0}
    peerDependencies:
      eslint: ^7.0.0 || ^8.0.0-0
-      svelte: ^3.37.0 || ^4.0.0-0
+      svelte: ^3.37.0 || ^4.0.0
    peerDependenciesMeta:
      svelte:
        optional: true
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
      '@jridgewell/sourcemap-codec': 1.4.15
      debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
      esutils: 2.0.3
      known-css-properties: 0.27.0
      postcss: 8.4.24
@ -2084,7 +2089,7 @@ packages:
      postcss-selector-parser: 6.0.13
      semver: 7.5.3
      svelte: 3.59.2
-      svelte-eslint-parser: 0.31.0(svelte@3.59.2)
+      svelte-eslint-parser: 0.32.0(svelte@3.59.2)
    transitivePeerDependencies:
      - supports-color
      - ts-node
@ -2111,15 +2116,15 @@ packages:
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dev: true

-  /eslint@8.43.0:
-    resolution: {integrity: sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==}
+  /eslint@8.44.0:
+    resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    hasBin: true
    dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
      '@eslint-community/regexpp': 4.5.0
-      '@eslint/eslintrc': 2.0.3
-      '@eslint/js': 8.43.0
+      '@eslint/eslintrc': 2.1.0
+      '@eslint/js': 8.44.0
      '@humanwhocodes/config-array': 0.11.10
      '@humanwhocodes/module-importer': 1.0.1
      '@nodelib/fs.walk': 1.2.8
@ -2131,7 +2136,7 @@ packages:
      escape-string-regexp: 4.0.0
      eslint-scope: 7.2.0
      eslint-visitor-keys: 3.4.1
-      espree: 9.5.2
+      espree: 9.6.0
      esquery: 1.5.0
      esutils: 2.0.3
      fast-deep-equal: 3.1.3
@ -2151,7 +2156,7 @@ packages:
      lodash.merge: 4.6.2
      minimatch: 3.1.2
      natural-compare: 1.4.0
-      optionator: 0.9.1
+      optionator: 0.9.3
      strip-ansi: 6.0.1
      strip-json-comments: 3.1.1
      text-table: 0.2.0
@ -2162,8 +2167,8 @@ packages:
  /esm-env@1.0.0:
    resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}

-  /espree@9.5.2:
-    resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
+  /espree@9.6.0:
+    resolution: {integrity: sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    dependencies:
      acorn: 8.9.0
@ -2629,10 +2634,10 @@ 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==}
+  /lucide-svelte@0.256.1(svelte@3.59.2):
+    resolution: {integrity: sha512-Fk8kQ5Xal9lxvX7T4fkyo592so3zzBtwfAfCOtptEh68jOKery/DyMlhY5m/Bh0M0pvb87soakYchighTBzPLQ==}
    peerDependencies:
-      svelte: ^3.49.0
+      svelte: '>=3 <5'
    dependencies:
      svelte: 3.59.2
    dev: false
@ -2842,16 +2847,16 @@ packages:
    resolution: {integrity: sha512-iE+B7Zo0ytgeUNI38uHiBrxF5Nnv3uX8AzogBXzf7wqeNyG6oqQEEBs1gnAZdRF+h7IRO0zOGM5d9/huiNFR+w==}
    dev: false

-  /optionator@0.9.1:
-    resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
+  /optionator@0.9.3:
+    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
    engines: {node: '>= 0.8.0'}
    dependencies:
+      '@aashutoshrathi/word-wrap': 1.2.6
      deep-is: 0.1.4
      fast-levenshtein: 2.0.6
      levn: 0.4.1
      prelude-ls: 1.2.1
      type-check: 0.4.0
-      word-wrap: 1.2.3
    dev: true

  /p-limit@3.1.0:
@ -3135,7 +3140,7 @@ packages:
    dependencies:
      lilconfig: 2.1.0
      postcss: 8.4.24
-      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
      yaml: 1.10.2
    dev: true

@ -3153,7 +3158,7 @@ packages:
    dependencies:
      lilconfig: 2.0.6
      postcss: 8.4.24
-      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
      yaml: 2.1.3

  /postcss-logical@6.2.0(postcss@8.4.24):
@ -3377,13 +3382,13 @@ packages:
    resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
    dev: false

-  /prisma@4.16.1:
-    resolution: {integrity: sha512-C2Xm7yxHxjFjjscBEW4tmoraPHH/Vyu/A0XABdbaFtoiOZARsxvOM7rwc2iZ0qVxbh0bGBGBWZUSXO/52/nHBQ==}
+  /prisma@4.16.2:
+    resolution: {integrity: sha512-SYCsBvDf0/7XSJyf2cHTLjLeTLVXYfqp7pG5eEVafFLeT0u/hLFz/9W196nDRGUOo1JfPatAEb+uEnTQImQC1g==}
    engines: {node: '>=14.17'}
    hasBin: true
    requiresBuild: true
    dependencies:
-      '@prisma/engines': 4.16.1
+      '@prisma/engines': 4.16.2

  /prismjs@1.29.0:
    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
@ -3709,18 +3714,18 @@ packages:
      - sugarss
    dev: true

-  /svelte-eslint-parser@0.31.0(svelte@3.59.2):
-    resolution: {integrity: sha512-/31RpBf/e3YjoFphjsyo3JRyN1r4UalGAGafXrZ6EJK4h4COOO0rbfBoen5byGsXnIJKsrlC1lkEd2Vzpq2IDg==}
+  /svelte-eslint-parser@0.32.0(svelte@3.59.2):
+    resolution: {integrity: sha512-Q8Nh3GHHoWZMv3Ej4zw+3+gyWPR8I5pPTJXEOvW+JOgwhGXqGKh7mOKNlVcEPtk+PCGiK9TPaRtvRkKoJR327A==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
    peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0-0
+      svelte: ^3.37.0 || ^4.0.0
    peerDependenciesMeta:
      svelte:
        optional: true
    dependencies:
      eslint-scope: 7.2.0
      eslint-visitor-keys: 3.4.1
-      espree: 9.5.2
+      espree: 9.6.0
      postcss: 8.4.24
      postcss-scss: 4.0.6(postcss@8.4.24)
      svelte: 3.59.2
@ -3865,24 +3870,24 @@ packages:
    resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
    engines: {node: '>= 8'}

-  /sveltekit-flash-message@0.11.3(@sveltejs/kit@1.20.5)(svelte@3.59.2):
+  /sveltekit-flash-message@0.11.3(@sveltejs/kit@1.21.0)(svelte@3.59.2):
    resolution: {integrity: sha512-tMKBobVFLYth0z2Kq9M+pi7Ip2OBhOrzivzx64v9+D2bWRwnZ3pmdWStYfQYxlz5CayozRQsmtipNg1vM+JN9Q==}
    peerDependencies:
      '@sveltejs/kit': ^1.0.0
      svelte: ^3
    dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
      svelte: 3.59.2
    dev: false

-  /sveltekit-superforms@1.1.2(@sveltejs/kit@1.20.5)(svelte@3.59.2)(zod@3.21.4):
-    resolution: {integrity: sha512-oWW3+Phcs/CkUKGEx0IsCr6Dw3a22/MVs4Tvi8k/jh66pqwP/jOZu3/dT367pkbIh5T7NK20yrnbHu8nm2E7pQ==}
+  /sveltekit-superforms@1.1.3(@sveltejs/kit@1.21.0)(svelte@3.59.2)(zod@3.21.4):
+    resolution: {integrity: sha512-BMyzxYXppdSyzeMPd5VFfJRr0Gr/EpUISz4d97vSFuP+/HTACg7qTI+M0sddJ7IvVw/9PAzIvKFh+FRfmeOmaQ==}
    peerDependencies:
      '@sveltejs/kit': 1.x
      svelte: 3.x || 4.x
      zod: 3.x
    dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
      svelte: 3.59.2
      zod: 3.21.4
    dev: true
@ -3998,7 +4003,7 @@ packages:
  /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):
+  /ts-node@10.9.1(@types/node@18.16.19)(typescript@4.9.5):
    resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
    hasBin: true
    peerDependencies:
@ -4017,7 +4022,7 @@ packages:
      '@tsconfig/node12': 1.0.11
      '@tsconfig/node14': 1.0.3
      '@tsconfig/node16': 1.0.4
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
      acorn: 8.8.2
      acorn-walk: 8.2.0
      arg: 4.1.3
@ -4108,7 +4113,7 @@ packages:
  /v8-compile-cache-lib@3.0.1:
    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}

-  /vite@4.3.9(@types/node@18.16.18)(sass@1.63.6):
+  /vite@4.3.9(@types/node@18.16.19)(sass@1.63.6):
    resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
    engines: {node: ^14.18.0 || >=16.0.0}
    hasBin: true
@ -4133,7 +4138,7 @@ packages:
      terser:
        optional: true
    dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
      esbuild: 0.17.18
      postcss: 8.4.24
      rollup: 3.21.0
@ -4149,7 +4154,7 @@ packages:
      vite:
        optional: true
    dependencies:
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)

  /vitest@0.25.8(sass@1.63.6):
    resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
@ -4175,7 +4180,7 @@ packages:
    dependencies:
      '@types/chai': 4.3.4
      '@types/chai-subset': 1.3.3
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
      acorn: 8.8.1
      acorn-walk: 8.2.0
      chai: 4.3.7
@ -4186,7 +4191,7 @@ packages:
      tinybench: 2.3.1
      tinypool: 0.3.0
      tinyspy: 1.0.2
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
    transitivePeerDependencies:
      - less
      - sass
@ -4230,11 +4235,6 @@ packages:
      triple-beam: 1.3.0
    dev: false

-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
  /wrappy@1.0.2:
    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}

--- a/src/app.html
+++ b/src/app.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<meta name="robots" content="noindex, nofollow" />
 		<meta charset="utf-8" />
 		<meta name="description" content="Bored? Find a game! Bored Game!" />
 		<link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
--- a/src/app.postcss
+++ b/src/app.postcss
@ -9,7 +9,9 @@
@tailwind utilities;

@layer base {
-	:root {
+	:root,
+	.light,
+	system {
 		--background: 0 0% 100%;
 		--foreground: 222.2 47.4% 11.2%;

@ -40,6 +42,39 @@
 		--ring: 215 20.2% 65.1%;

 		--radius: 0.5rem;
+
+		/* @media (prefers-color-scheme: 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;
+		} */
 	}

 	.dark {
@ -85,7 +120,7 @@
 		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;
--- a/src/lib/components/game/index.svelte
+++ b/src/lib/components/game/index.svelte
@ -4,7 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import plusCircle from '@iconify-icons/line-md/plus-circle';
 	import minusCircle from '@iconify-icons/line-md/minus-circle';
-	import Button from '$lib/components/button/index.svelte';
+	// import Button from '$lib/components/button/index.svelte';
 	import type { GameType, SavedGameType } from '$lib/types';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
@ -13,6 +13,8 @@
 	import { browser } from '$app/environment';
  import { binarySearchOnStore } from '$lib/util/binarySearchOnStore';
  import { convertToSavedGame } from '$lib/util/gameMapper';
+	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$components/ui/card';
+	import { Button } from '$components/ui/button';

 	export let game: GameType | SavedGameType;
 	export let detailed: boolean = false;
@ -27,7 +29,7 @@
 		dispatch('handleRemoveCollection', game);
 	}

-	function onCollectionClick() {	
+	function onCollectionClick() {
 		if (existsInCollection) {
 			removeGameFromCollection();
 		} else {
@ -74,7 +76,51 @@
 	$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
 </script>

-<article class="game-container" transition:fade>
+<article class="grid grid-template-cols-2 gap-4" transition:fade>
+	<Card>
+		<CardHeader>
+			<CardTitle>{game.name}</CardTitle>
+			<!-- <CardDescription>Card Description</CardDescription> -->
+		</CardHeader>
+		<CardContent>
+			<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />
+			<div class="game-details">
+			{#if game?.players}
+				<p>Players: {game.players}</p>
+				<p>Time: {game.playtime} minutes</p>
+				{#if isGameType(game) && game?.min_age}
+					<p>Min Age: {game.min_age}</p>
+				{/if}
+				{#if detailed && isGameType(game) && game?.description}
+					<div class="description">{@html game.description}</div>
+				{/if}
+			{/if}
+		</div>
+		</CardContent>
+		<CardFooter>
+	<div class="flex gap-2">
+		<Button variant={existsInCollection ? 'destructive' : 'default'} on:click={onCollectionClick}>
+			{collectionText}
+			{#if existsInCollection}
+				<iconify-icon class="ml-2" icon={minusCircle} width="24" height="24" />
+			{:else}
+				<iconify-icon class="ml-2" icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
+		<Button variant={existsInCollection ? 'destructive' : 'default'} on:click={onWishlistClick}>
+			{wishlistText}
+			{#if existsInWishlist}
+				<iconify-icon class="ml-2" icon={minusCircle} width="24" height="24" />
+			{:else}
+				<iconify-icon class="ml-2" icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
+	</div>
+		</CardFooter>
+	</Card>
+</article>
+
+<!-- <article class="game-container" transition:fade>
 	<h2>{game.name}</h2>
 	<a
 		class="thumbnail"
@ -83,11 +129,11 @@
 		data-sveltekit-preload-data
 	>
 		<!-- <Image src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
-		<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />
+		<!-- <img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" /> -->
 		<!-- loading="lazy" decoding="async" -->
-	</a>
+	<!-- </a> -->

-		<div class="game-details">
+		<!-- <div class="game-details">
 			{#if game?.players}
 				<p>Players: {game.players}</p>
 				<p>Time: {game.playtime} minutes</p>
@ -117,8 +163,8 @@
 				<iconify-icon icon={plusCircle} width="24" height="24" />
 			{/if}
 		</Button>
-	</div>
-</article>
+	</div> -->
+<!-- </article> -->

 <style lang="scss">
 	.game-container {
@ -137,9 +183,9 @@
 		transition: all 0.3s;
 		border-radius: 8px;
 		background-color: var(--primary);
-		&:hover {
+		/* &:hover {
 			background-color: hsla(222, 9%, 65%, 1);
-		}
+		} */

 		/* .game-info {
 			display: grid;
--- a/src/lib/components/ui/card/Card.svelte
+++ b/src/lib/components/ui/card/Card.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"rounded-lg border bg-card text-card-foreground shadow-sm",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/CardContent.svelte
+++ b/src/lib/components/ui/card/CardContent.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/CardDescription.svelte
+++ b/src/lib/components/ui/card/CardDescription.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
--- a/src/lib/components/ui/card/CardFooter.svelte
+++ b/src/lib/components/ui/card/CardFooter.svelte
@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/CardHeader.svelte
+++ b/src/lib/components/ui/card/CardHeader.svelte
@ -0,0 +1,10 @@
+<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 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/CardTitle.svelte
+++ b/src/lib/components/ui/card/CardTitle.svelte
@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	export let tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h3";
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@ -0,0 +1,6 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardContent } from "./CardContent.svelte";
+export { default as CardDescription } from "./CardDescription.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardTitle } from "./CardTitle.svelte";
--- a/src/lib/components/ui/radio-group/RadioGroup.svelte
+++ b/src/lib/components/ui/radio-group/RadioGroup.svelte
@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { RadioGroupRootProps } from "radix-svelte";
+	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: RadioGroupRootProps["value"] = undefined;
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:value
+	class={cn("grid gap-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</RadioGroupPrimitive.Root>
--- a/src/lib/components/ui/radio-group/RadioGroupItem.svelte
+++ b/src/lib/components/ui/radio-group/RadioGroupItem.svelte
@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { RadioGroupItemProps } from "radix-svelte";
+	import { Circle } from "lucide-svelte";
+	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: RadioGroupItemProps["value"] = "";
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+>
+	<RadioGroupPrimitive.Indicator class="flex items-center justify-center">
+		<Circle class="h-2.5 w-2.5 fill-current text-current" />
+	</RadioGroupPrimitive.Indicator>
+</RadioGroupPrimitive.Item>
--- a/src/lib/components/ui/radio-group/index.ts
+++ b/src/lib/components/ui/radio-group/index.ts
@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.svelte";
+export { default as RadioGroupItem } from "./RadioGroupItem.svelte";
--- a/src/lib/server/lucia.ts
+++ b/src/lib/server/lucia.ts
@ -18,7 +18,8 @@ export const auth = lucia({
 			lastName: userData.lastName,
 			verified: userData.verified,
 			receiveEmail: userData.receiveEmail,
-			token: userData.token
+			token: userData.token,
+			theme: userData.theme
 		};
 	},
 	experimental: {
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -17,8 +17,10 @@
 	import { gameStore } from '$lib/stores/gameSearchStore';
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
+	import { theme } from '$state/theme';
 	// import '$styles/styles.pcss';
 	import type { SavedGameType } from '$lib/types';
+	import { onMount } from "svelte";

 	$: {
 		if ($navigating) {
@ -70,10 +72,17 @@
 	const dev = process.env.NODE_ENV !== 'production';

 	export let data;
+	$: ({ user } = data);
+
+	onMount(() => {
+		// set the theme to the user's active theme
+		$theme = user?.theme || 'system';
+		document.querySelector('html')?.setAttribute('data-theme', $theme);
+	});
 </script>

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

 <!-- {#if dev}
--- a/src/state/theme.ts
+++ b/src/state/theme.ts
@ -0,0 +1,38 @@
+import { writable } from 'svelte/store';
+
+export const theme = writable('system');
+
+const new_theme_selector = () => {
+	const { subscribe, update, set } = writable({
+		status: 'CLOSED'
+	});
+
+	function open() {
+		update((theme) => {
+			return { ...theme, status: 'OPEN' };
+		});
+	}
+
+	function close() {
+		update((theme) => {
+			return { ...theme, status: 'CLOSED' };
+		});
+	}
+
+	function toggle() {
+		update((theme) => {
+			return { ...theme, status: status === 'CLOSED' ? 'OPEN' : 'CLOSED' };
+		});
+	}
+
+	return {
+		subscribe,
+		update,
+		set,
+		close,
+		open,
+		toggle
+	};
+};
+
+export const theme_selector = new_theme_selector();
--- a/svelte.config.js
+++ b/svelte.config.js
@ -16,6 +16,7 @@ const config = {
 			'$components/*': 'src/lib/components/*',
 			$db: './src/db',
 			$lib: './src/lib',
+			$state: './src/state',
 			$styles: './src/styles',
 			$themes: './src/themes'
 		}