diff --git a/package.json b/package.json
index c10be5c..19e67e8 100644
--- a/package.json
+++ b/package.json
@@ -16,37 +16,37 @@
     "@playwright/test": "^1.25.1",
     "@rgossiaux/svelte-headlessui": "1.0.2",
     "@rgossiaux/svelte-heroicons": "^0.1.2",
-    "@sveltejs/adapter-auto": "1.0.0-next.69",
-    "@sveltejs/kit": "1.0.0-next.448",
+    "@sveltejs/adapter-auto": "1.0.0-next.71",
+    "@sveltejs/kit": "1.0.0-next.461",
     "@types/cookie": "^0.5.1",
-    "@types/node": "^18.7.13",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "carbon-components-svelte": "^0.67.7",
+    "@types/node": "^18.7.14",
+    "@typescript-eslint/eslint-plugin": "^5.36.1",
+    "@typescript-eslint/parser": "^5.36.1",
+    "carbon-components-svelte": "^0.70.4",
     "carbon-icons-svelte": "^11.2.0",
     "eslint": "^8.23.0",
     "eslint-config-prettier": "^8.1.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "just-debounce-it": "^3.0.1",
+    "just-debounce-it": "^3.1.1",
     "prettier": "^2.7.1",
     "prettier-plugin-svelte": "^2.7.0",
-    "sass": "^1.54.3",
+    "sass": "^1.54.8",
     "svelte": "^3.49.0",
     "svelte-check": "^2.9.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.0.0",
     "typescript": "^4.8.2",
-    "vite": "^3.0.9"
+    "vite": "^3.1.0-beta.1"
   },
   "type": "module",
   "dependencies": {
-    "@fontsource/fira-mono": "^4.5.8",
+    "@fontsource/fira-mono": "^4.5.9",
     "@leveluptuts/svelte-side-menu": "^1.0.5",
     "@leveluptuts/svelte-toy": "^2.0.3",
     "@lukeed/uuid": "^2.0.0",
     "@types/feather-icons": "^4.7.0",
     "cookie": "^0.5.0",
     "feather-icons": "^4.29.0",
-    "zod": "^3.17.10"
+    "zod": "^3.18.0"
   }
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8fae779..257b328 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,79 +1,79 @@
 lockfileVersion: 5.4
 
 specifiers:
-  '@fontsource/fira-mono': ^4.5.8
+  '@fontsource/fira-mono': ^4.5.9
   '@leveluptuts/svelte-side-menu': ^1.0.5
   '@leveluptuts/svelte-toy': ^2.0.3
   '@lukeed/uuid': ^2.0.0
   '@playwright/test': ^1.25.1
   '@rgossiaux/svelte-headlessui': 1.0.2
   '@rgossiaux/svelte-heroicons': ^0.1.2
-  '@sveltejs/adapter-auto': 1.0.0-next.69
-  '@sveltejs/kit': 1.0.0-next.448
+  '@sveltejs/adapter-auto': 1.0.0-next.71
+  '@sveltejs/kit': 1.0.0-next.461
   '@types/cookie': ^0.5.1
   '@types/feather-icons': ^4.7.0
-  '@types/node': ^18.7.13
-  '@typescript-eslint/eslint-plugin': ^5.35.1
-  '@typescript-eslint/parser': ^5.35.1
-  carbon-components-svelte: ^0.67.7
+  '@types/node': ^18.7.14
+  '@typescript-eslint/eslint-plugin': ^5.36.1
+  '@typescript-eslint/parser': ^5.36.1
+  carbon-components-svelte: ^0.70.4
   carbon-icons-svelte: ^11.2.0
   cookie: ^0.5.0
   eslint: ^8.23.0
   eslint-config-prettier: ^8.1.0
   eslint-plugin-svelte3: ^4.0.0
   feather-icons: ^4.29.0
-  just-debounce-it: ^3.0.1
+  just-debounce-it: ^3.1.1
   prettier: ^2.7.1
   prettier-plugin-svelte: ^2.7.0
-  sass: ^1.54.3
+  sass: ^1.54.8
   svelte: ^3.49.0
   svelte-check: ^2.9.0
   svelte-preprocess: ^4.10.7
   tslib: ^2.0.0
   typescript: ^4.8.2
-  vite: ^3.0.9
-  zod: ^3.17.10
+  vite: ^3.1.0-beta.1
+  zod: ^3.18.0
 
 dependencies:
-  '@fontsource/fira-mono': 4.5.8
+  '@fontsource/fira-mono': 4.5.9
   '@leveluptuts/svelte-side-menu': 1.0.5
   '@leveluptuts/svelte-toy': 2.0.3
   '@lukeed/uuid': 2.0.0
   '@types/feather-icons': 4.7.0
   cookie: 0.5.0
   feather-icons: 4.29.0
-  zod: 3.17.10
+  zod: 3.18.0
 
 devDependencies:
   '@playwright/test': 1.25.1
   '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0
   '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0
-  '@sveltejs/adapter-auto': 1.0.0-next.69
-  '@sveltejs/kit': 1.0.0-next.448_svelte@3.49.0+vite@3.0.9
+  '@sveltejs/adapter-auto': 1.0.0-next.71
+  '@sveltejs/kit': 1.0.0-next.461_fhgkwirxvgjw2igda6zmhiisma
   '@types/cookie': 0.5.1
-  '@types/node': 18.7.13
-  '@typescript-eslint/eslint-plugin': 5.35.1_pfwtupu3r4wxmgbx6hj7gwmyuu
-  '@typescript-eslint/parser': 5.35.1_yqf6kl63nyoq5megxukfnom5rm
-  carbon-components-svelte: 0.67.7
+  '@types/node': 18.7.14
+  '@typescript-eslint/eslint-plugin': 5.36.1_lbwfnm54o3pmr3ypeqp3btnera
+  '@typescript-eslint/parser': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
+  carbon-components-svelte: 0.70.4
   carbon-icons-svelte: 11.2.0
   eslint: 8.23.0
   eslint-config-prettier: 8.5.0_eslint@8.23.0
   eslint-plugin-svelte3: 4.0.0_sfdub7vxhxkt5wmgvhhmmgyu2e
-  just-debounce-it: 3.0.1
+  just-debounce-it: 3.1.1
   prettier: 2.7.1
   prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
-  sass: 1.54.3
+  sass: 1.54.8
   svelte: 3.49.0
-  svelte-check: 2.9.0_sass@1.54.3+svelte@3.49.0
-  svelte-preprocess: 4.10.7_6ana3ytd3snhau5vat6zcz3vta
+  svelte-check: 2.9.0_sass@1.54.8+svelte@3.49.0
+  svelte-preprocess: 4.10.7_wvqslddg27v5ozoudw2pkwd4de
   tslib: 2.4.0
   typescript: 4.8.2
-  vite: 3.0.9_sass@1.54.3
+  vite: 3.1.0-beta.1_sass@1.54.8
 
 packages:
 
-  /@cloudflare/workers-types/3.14.1:
-    resolution: {integrity: sha512-B1/plF62pt+H2IJHvApK8fdOJAVsvojvacuac8x8s+JIyqbropMyqNqHTKLm3YD8ZFLGwYeFTudU+PQ7vGvBdA==}
+  /@cloudflare/workers-types/3.15.0:
+    resolution: {integrity: sha512-meL/Afy5qdIsgfdnlbVfcYUh/YjHk23EWUvgmULf6iDrDbrBcd+fse2os3CC7rxSfScdP1OqJVTHgRSEjUm/Pw==}
     dev: true
 
   /@esbuild/linux-loong64/0.14.54:
@@ -102,8 +102,8 @@ packages:
       - supports-color
     dev: true
 
-  /@fontsource/fira-mono/4.5.8:
-    resolution: {integrity: sha512-sFuSPB/Km8B1fy3CH0NqO5Nb4GmVMzp3XFaw6MwK293xhm3OnB68QJawwTTjLewcrS78wOTAhTUB058qxurJoQ==}
+  /@fontsource/fira-mono/4.5.9:
+    resolution: {integrity: sha512-DDhkRUjPHwPK/wB7GM/7LzGkcEC5JyTZM93YnFoP2Qfjffq3qX1asnXNqfglgZxXHXVmu3RI8OjRf87I97XCfA==}
     dev: false
 
   /@humanwhocodes/config-array/0.10.4:
@@ -216,7 +216,7 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
-      '@types/node': 18.7.13
+      '@types/node': 18.7.14
       playwright-core: 1.25.1
     dev: true
 
@@ -248,12 +248,12 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@sveltejs/adapter-auto/1.0.0-next.69:
-    resolution: {integrity: sha512-DSrcYgrJ1YFnxJecTiktV4A01B2Avn5t6HvO49YJiGp2mdSxCxJbvqn6I4tPB1T64AInBLFUMmKBK9o9ZJbBMA==}
+  /@sveltejs/adapter-auto/1.0.0-next.71:
+    resolution: {integrity: sha512-Qsl82HcehWJbZztXgmU/nTPDeeIaB4jrOQpSvy3Pi8octs+rEf/CO87Wk06EP+M/zUzEHDNENMOx0DgWuHpj7Q==}
     dependencies:
       '@sveltejs/adapter-cloudflare': 1.0.0-next.32
-      '@sveltejs/adapter-netlify': 1.0.0-next.75
-      '@sveltejs/adapter-vercel': 1.0.0-next.71
+      '@sveltejs/adapter-netlify': 1.0.0-next.76
+      '@sveltejs/adapter-vercel': 1.0.0-next.72
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -262,13 +262,13 @@ packages:
   /@sveltejs/adapter-cloudflare/1.0.0-next.32:
     resolution: {integrity: sha512-tzkUsdQlBk9xUjcGUOBYos4HKaeaXvz9v4TQ1QS2yIHEtL5xvMEDPZ94/DB2gPL4LZCnYbdY2lsy5HCsoN0hkQ==}
     dependencies:
-      '@cloudflare/workers-types': 3.14.1
+      '@cloudflare/workers-types': 3.15.0
       esbuild: 0.14.54
       worktop: 0.8.0-next.14
     dev: true
 
-  /@sveltejs/adapter-netlify/1.0.0-next.75:
-    resolution: {integrity: sha512-1zTR/U/ceEAyqIGJ74v54G+JbIR+fSmTN9qfqGOM0gBwVoBVRUujGm4tDFJQNYzvuGzVnC7br/rhYMLZd2JluQ==}
+  /@sveltejs/adapter-netlify/1.0.0-next.76:
+    resolution: {integrity: sha512-XC33i13N+zkDP1rKrssQ55TPzt4DkLjKux6g1xW2MB+5KxnC9PP2rIkocKxFw/pK2XU8cUIgmOJ1y5PQrHaiKg==}
     dependencies:
       '@iarna/toml': 2.2.5
       esbuild: 0.14.54
@@ -276,8 +276,8 @@ packages:
       tiny-glob: 0.2.9
     dev: true
 
-  /@sveltejs/adapter-vercel/1.0.0-next.71:
-    resolution: {integrity: sha512-Tj8za7fMXheaiB6hNqv61jr/AmAUm+G8huoY1cIvtSqqBHzGmiZH+GFK1Tq/e8e0XR2Xb/ZpZCQSyrFLU2grIQ==}
+  /@sveltejs/adapter-vercel/1.0.0-next.72:
+    resolution: {integrity: sha512-oNs8FQaYC2NnwDcvX/jc9MDNqXc9HxwGPQNkd+1vBpFVWZl9mShQgCcOMzfTOIH0ka984jYNa0ZawYYHex79xg==}
     dependencies:
       '@vercel/nft': 0.22.0
       esbuild: 0.14.54
@@ -286,20 +286,20 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.448_svelte@3.49.0+vite@3.0.9:
-    resolution: {integrity: sha512-x1ufQj04uP2eidZMJXubWLQXF3UvDnFUrugNwKZBkuoSekv7kWb3cRop2Q24/QpSrqYVV4aMeeZ2OoHcASsxGQ==}
+  /@sveltejs/kit/1.0.0-next.461_fhgkwirxvgjw2igda6zmhiisma:
+    resolution: {integrity: sha512-REe/ZIjE9F6ndEtCn4oPXpGWjiyLtOVWKJ73q53I3zxxoohL8OG6Zy0tnrdSvQj0nOBFTyQ4QXeYFn4TAO5oSw==}
     engines: {node: '>=16.14'}
     hasBin: true
     requiresBuild: true
     peerDependencies:
       svelte: ^3.44.0
-      vite: ^3.0.0
+      vite: ^3.1.0-beta.1
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 1.0.2_svelte@3.49.0+vite@3.0.9
+      '@sveltejs/vite-plugin-svelte': 1.0.3_fhgkwirxvgjw2igda6zmhiisma
       cookie: 0.5.0
       devalue: 3.1.2
       kleur: 4.1.5
-      magic-string: 0.26.2
+      magic-string: 0.26.3
       mime: 3.0.0
       node-fetch: 3.2.10
       sade: 1.8.1
@@ -308,14 +308,14 @@ packages:
       svelte: 3.49.0
       tiny-glob: 0.2.9
       undici: 5.10.0
-      vite: 3.0.9_sass@1.54.3
+      vite: 3.1.0-beta.1_sass@1.54.8
     transitivePeerDependencies:
       - diff-match-patch
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte/1.0.2_svelte@3.49.0+vite@3.0.9:
-    resolution: {integrity: sha512-8tTVbNuraeDchBaArNbwaZLpO0feM7BRSdZU5yeM4Clasx2p1p1CYBoWh+VgxZlxiark49HXummkHqKztbl8lA==}
+  /@sveltejs/vite-plugin-svelte/1.0.3_fhgkwirxvgjw2igda6zmhiisma:
+    resolution: {integrity: sha512-0Qu51m2W9RBlxWPp8i31KJpnqmjWMOne8vAzgmOX6ZM9uX+/RAv6BNhEMcNoP5MsyLjyW1ZTCiJoaZZ5EeqpFg==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       diff-match-patch: ^1.0.5
@@ -329,10 +329,10 @@ packages:
       debug: 4.3.4
       deepmerge: 4.2.2
       kleur: 4.1.5
-      magic-string: 0.26.2
+      magic-string: 0.26.3
       svelte: 3.49.0
       svelte-hmr: 0.14.12_svelte@3.49.0
-      vite: 3.0.9_sass@1.54.3
+      vite: 3.1.0-beta.1_sass@1.54.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -349,8 +349,8 @@ packages:
     resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
     dev: true
 
-  /@types/node/18.7.13:
-    resolution: {integrity: sha512-46yIhxSe5xEaJZXWdIBP7GU4HDTG8/eo0qd9atdiL+lFpA03y8KS+lkTN834TWJj5767GbWv4n/P6efyTFt1Dw==}
+  /@types/node/18.7.14:
+    resolution: {integrity: sha512-6bbDaETVi8oyIARulOE9qF1/Qdi/23z6emrUh0fNJRUmjznqrixD4MpGDdgOFk5Xb0m2H6Xu42JGdvAxaJR/wA==}
     dev: true
 
   /@types/pug/2.0.6:
@@ -360,11 +360,11 @@ packages:
   /@types/sass/1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.7.13
+      '@types/node': 18.7.14
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.35.1_pfwtupu3r4wxmgbx6hj7gwmyuu:
-    resolution: {integrity: sha512-RBZZXZlI4XCY4Wzgy64vB+0slT9+yAPQRjj/HSaRwUot33xbDjF1oN9BLwOLTewoOI0jothIltZRe9uJCHf8gg==}
+  /@typescript-eslint/eslint-plugin/5.36.1_lbwfnm54o3pmr3ypeqp3btnera:
+    resolution: {integrity: sha512-iC40UK8q1tMepSDwiLbTbMXKDxzNy+4TfPWgIL661Ym0sD42vRcQU93IsZIrmi+x292DBr60UI/gSwfdVYexCA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       '@typescript-eslint/parser': ^5.0.0
@@ -374,10 +374,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.35.1_yqf6kl63nyoq5megxukfnom5rm
-      '@typescript-eslint/scope-manager': 5.35.1
-      '@typescript-eslint/type-utils': 5.35.1_yqf6kl63nyoq5megxukfnom5rm
-      '@typescript-eslint/utils': 5.35.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/parser': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/type-utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
       eslint: 8.23.0
       functional-red-black-tree: 1.0.1
@@ -390,8 +390,8 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.35.1_yqf6kl63nyoq5megxukfnom5rm:
-    resolution: {integrity: sha512-XL2TBTSrh3yWAsMYpKseBYTVpvudNf69rPOWXWVBI08My2JVT5jR66eTt4IgQFHA/giiKJW5dUD4x/ZviCKyGg==}
+  /@typescript-eslint/parser/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
+    resolution: {integrity: sha512-/IsgNGOkBi7CuDfUbwt1eOqUXF9WGVBW9dwEe1pi+L32XrTsZIgmDFIi2RxjzsvB/8i+MIf5JIoTEH8LOZ368A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
@@ -400,9 +400,9 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/scope-manager': 5.35.1
-      '@typescript-eslint/types': 5.35.1
-      '@typescript-eslint/typescript-estree': 5.35.1_typescript@4.8.2
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
       debug: 4.3.4
       eslint: 8.23.0
       typescript: 4.8.2
@@ -410,16 +410,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/scope-manager/5.35.1:
-    resolution: {integrity: sha512-kCYRSAzIW9ByEIzmzGHE50NGAvAP3wFTaZevgWva7GpquDyFPFcmvVkFJGWJJktg/hLwmys/FZwqM9EKr2u24Q==}
+  /@typescript-eslint/scope-manager/5.36.1:
+    resolution: {integrity: sha512-pGC2SH3/tXdu9IH3ItoqciD3f3RRGCh7hb9zPdN2Drsr341zgd6VbhP5OHQO/reUqihNltfPpMpTNihFMarP2w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.35.1
-      '@typescript-eslint/visitor-keys': 5.35.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/visitor-keys': 5.36.1
     dev: true
 
-  /@typescript-eslint/type-utils/5.35.1_yqf6kl63nyoq5megxukfnom5rm:
-    resolution: {integrity: sha512-8xT8ljvo43Mp7BiTn1vxLXkjpw8wS4oAc00hMSB4L1/jIiYbjjnc3Qp2GAUOG/v8zsNCd1qwcqfCQ0BuishHkw==}
+  /@typescript-eslint/type-utils/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
+    resolution: {integrity: sha512-xfZhfmoQT6m3lmlqDvDzv9TiCYdw22cdj06xY0obSznBsT///GK5IEZQdGliXpAOaRL34o8phEvXzEo/VJx13Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '*'
@@ -428,7 +428,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.35.1_yqf6kl63nyoq5megxukfnom5rm
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
+      '@typescript-eslint/utils': 5.36.1_yqf6kl63nyoq5megxukfnom5rm
       debug: 4.3.4
       eslint: 8.23.0
       tsutils: 3.21.0_typescript@4.8.2
@@ -437,13 +438,13 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/types/5.35.1:
-    resolution: {integrity: sha512-FDaujtsH07VHzG0gQ6NDkVVhi1+rhq0qEvzHdJAQjysN+LHDCKDKCBRlZFFE0ec0jKxiv0hN63SNfExy0KrbQQ==}
+  /@typescript-eslint/types/5.36.1:
+    resolution: {integrity: sha512-jd93ShpsIk1KgBTx9E+hCSEuLCUFwi9V/urhjOWnOaksGZFbTOxAT47OH2d4NLJnLhkVD+wDbB48BuaycZPLBg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree/5.35.1_typescript@4.8.2:
-    resolution: {integrity: sha512-JUqE1+VRTGyoXlDWWjm6MdfpBYVq+hixytrv1oyjYIBEOZhBCwtpp5ZSvBt4wIA1MKWlnaC2UXl2XmYGC3BoQA==}
+  /@typescript-eslint/typescript-estree/5.36.1_typescript@4.8.2:
+    resolution: {integrity: sha512-ih7V52zvHdiX6WcPjsOdmADhYMDN15SylWRZrT2OMy80wzKbc79n8wFW0xpWpU0x3VpBz/oDgTm2xwDAnFTl+g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       typescript: '*'
@@ -451,8 +452,8 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.35.1
-      '@typescript-eslint/visitor-keys': 5.35.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/visitor-keys': 5.36.1
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
@@ -463,16 +464,16 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.35.1_yqf6kl63nyoq5megxukfnom5rm:
-    resolution: {integrity: sha512-v6F8JNXgeBWI4pzZn36hT2HXXzoBBBJuOYvoQiaQaEEjdi5STzux3Yj8v7ODIpx36i/5s8TdzuQ54TPc5AITQQ==}
+  /@typescript-eslint/utils/5.36.1_yqf6kl63nyoq5megxukfnom5rm:
+    resolution: {integrity: sha512-lNj4FtTiXm5c+u0pUehozaUWhh7UYKnwryku0nxJlYUEWetyG92uw2pr+2Iy4M/u0ONMKzfrx7AsGBTCzORmIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
       '@types/json-schema': 7.0.11
-      '@typescript-eslint/scope-manager': 5.35.1
-      '@typescript-eslint/types': 5.35.1
-      '@typescript-eslint/typescript-estree': 5.35.1_typescript@4.8.2
+      '@typescript-eslint/scope-manager': 5.36.1
+      '@typescript-eslint/types': 5.36.1
+      '@typescript-eslint/typescript-estree': 5.36.1_typescript@4.8.2
       eslint: 8.23.0
       eslint-scope: 5.1.1
       eslint-utils: 3.0.0_eslint@8.23.0
@@ -481,11 +482,11 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/visitor-keys/5.35.1:
-    resolution: {integrity: sha512-cEB1DvBVo1bxbW/S5axbGPE6b7FIMAbo3w+AGq6zNDA7+NYJOIkKj/sInfTv4edxd4PxJSgdN4t6/pbvgA+n5g==}
+  /@typescript-eslint/visitor-keys/5.36.1:
+    resolution: {integrity: sha512-ojB9aRyRFzVMN3b5joSYni6FAS10BBSCAfKJhjJAV08t/a95aM6tAhz+O1jF+EtgxktuSO3wJysp2R+Def/IWQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.35.1
+      '@typescript-eslint/types': 5.36.1
       eslint-visitor-keys: 3.3.0
     dev: true
 
@@ -628,8 +629,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /carbon-components-svelte/0.67.7:
-    resolution: {integrity: sha512-fx/O38tzw9uLiquqqB9zOI5ARA8pSBTOt1gSbgMNwLADYW0weAsr1dLvLnOmSLmXr3T0jaPgWHSkuEv4VTeo/w==}
+  /carbon-components-svelte/0.70.4:
+    resolution: {integrity: sha512-XLvGi5lFv1JqcOuUxo02rSIWyT4UVkaHtzqZVHgwM+Gbs86expe3SA2FqE4FzungASoERBr8CaQG5UuoF2aD9w==}
     dependencies:
       flatpickr: 4.6.9
     dev: true
@@ -1449,8 +1450,8 @@ packages:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
     dev: true
 
-  /just-debounce-it/3.0.1:
-    resolution: {integrity: sha512-6EQWOpRV8fm/ame6XvGBSxvsjoMbqj7JS9TV/4Q9aOXt9DQw22GBfTGP6gTAqcBNN/PbzlwtwH7jtM0k9oe9pg==}
+  /just-debounce-it/3.1.1:
+    resolution: {integrity: sha512-oPsuRyWp99LJaQ4KXC3A42tQNqkRTcPy0A8BCkRZ5cPCgsx81upB2KUrmHZvDUNhnCDKe7MshfTuWFQB9iXwDg==}
     dev: true
 
   /kleur/4.1.5:
@@ -1494,8 +1495,8 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
-  /magic-string/0.26.2:
-    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+  /magic-string/0.26.3:
+    resolution: {integrity: sha512-u1Po0NDyFcwdg2nzHT88wSK0+Rih0N1M+Ph1Sp08k8yvFFU3KR72wryS7e1qMPJypt99WB7fIFVCA92mQrMjrg==}
     engines: {node: '>=12'}
     dependencies:
       sourcemap-codec: 1.4.8
@@ -1839,8 +1840,8 @@ packages:
       estree-walker: 0.6.1
     dev: true
 
-  /rollup/2.77.3:
-    resolution: {integrity: sha512-/qxNTG7FbmefJWoeeYJFbHehJ2HNWnjkAFRKzWN/45eNBBF/r8lo992CwcJXEzyVxs5FmfId+vTSTQDb+bxA+g==}
+  /rollup/2.78.1:
+    resolution: {integrity: sha512-VeeCgtGi4P+o9hIg+xz4qQpRl6R401LWEXBmxYKOV4zlF82lyhgh2hTZnheFUbANE8l2A41F458iwj2vEYaXJg==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     optionalDependencies:
@@ -1873,8 +1874,8 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /sass/1.54.3:
-    resolution: {integrity: sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==}
+  /sass/1.54.8:
+    resolution: {integrity: sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==}
     engines: {node: '>=12.0.0'}
     hasBin: true
     dependencies:
@@ -1999,7 +2000,7 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte-check/2.9.0_sass@1.54.3+svelte@3.49.0:
+  /svelte-check/2.9.0_sass@1.54.8+svelte@3.49.0:
     resolution: {integrity: sha512-9AVrtP7WbfDgCdqTZNPdj5CCCy1OrYMxFVWAWzNw7fl93c9klFJFtqzVXa6fovfQ050CcpUyJE2dPFL9TFAREw==}
     hasBin: true
     peerDependencies:
@@ -2012,7 +2013,7 @@ packages:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 3.49.0
-      svelte-preprocess: 4.10.7_6ana3ytd3snhau5vat6zcz3vta
+      svelte-preprocess: 4.10.7_wvqslddg27v5ozoudw2pkwd4de
       typescript: 4.8.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -2036,7 +2037,7 @@ packages:
       svelte: 3.49.0
     dev: true
 
-  /svelte-preprocess/4.10.7_6ana3ytd3snhau5vat6zcz3vta:
+  /svelte-preprocess/4.10.7_wvqslddg27v5ozoudw2pkwd4de:
     resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
     engines: {node: '>= 9.11.2'}
     requiresBuild: true
@@ -2081,7 +2082,7 @@ packages:
       '@types/sass': 1.43.1
       detect-indent: 6.1.0
       magic-string: 0.25.9
-      sass: 1.54.3
+      sass: 1.54.8
       sorcery: 0.10.0
       strip-indent: 3.0.0
       svelte: 3.49.0
@@ -2183,8 +2184,8 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
-  /vite/3.0.9_sass@1.54.3:
-    resolution: {integrity: sha512-waYABTM+G6DBTCpYAxvevpG50UOlZuynR0ckTK5PawNVt7ebX6X7wNXHaGIO6wYYFXSM7/WcuFuO2QzhBB6aMw==}
+  /vite/3.1.0-beta.1_sass@1.54.8:
+    resolution: {integrity: sha512-JGEnWSC0hfarcduTCQr6wnRjPLbT62iLCK59HBJXYt9oyWSUMtrvcnDqzvLFC+lHV6KGFQkmWlZucyIQmgUnLA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -2205,8 +2206,8 @@ packages:
       esbuild: 0.14.54
       postcss: 8.4.16
       resolve: 1.22.1
-      rollup: 2.77.3
-      sass: 1.54.3
+      rollup: 2.78.1
+      sass: 1.54.8
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
@@ -2267,6 +2268,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /zod/3.17.10:
-    resolution: {integrity: sha512-IHXnQYQuOOOL/XgHhgl8YjNxBHi3xX0mVcHmqsvJgcxKkEczPshoWdxqyFwsARpf41E0v9U95WUROqsHHxt0UQ==}
+  /zod/3.18.0:
+    resolution: {integrity: sha512-gwTm8RfUCe8l9rDwN5r2A17DkAa8Ez4Yl4yXqc5VqeGaXaJahzYYXbTwvhroZi0SNBqTwh/bKm2N0mpCzuw4bA==}
     dev: false
diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte
new file mode 100644
index 0000000..36a42e9
--- /dev/null
+++ b/src/lib/components/pagination/index.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { boredState } from '$root/lib/stores/boredState';
+
+  const totalCount = $boredState.search.totalCount || 1; // TODO: Check default value
+  $: pageSize = $boredState.search.pageSize;
+  $: currentPage = $boredState.search.currentPage;
+  $: skip = $boredState.search.skip;
+
+  const totalPages: number = Math.ceil(totalCount / pageSize);
+  const prevPage: number = currentPage - 1;
+  const nextPage: number = currentPage + 1;
+  const hasNextPage: boolean = nextPage <= totalPages;
+  const hasPrevPage: boolean = prevPage >= 1;
+  const itemsLeft: number =
+    totalCount - currentPage * pageSize >= 0 ? totalCount - currentPage * pageSize : 0;
+
+  const pageArray = Array.from({ length: 10 }, (_, i) => i + 1);
+  console.log('pageArray', pageArray);
+</script>
+
+<div class="container">
+  {#each pageArray as page}
+    <p>{page}</p>
+  {/each}
+</div>
+
+<style lang="scss">
+  .container {
+    display: grid;
+  }
+</style>
diff --git a/src/lib/stores/boredState.ts b/src/lib/stores/boredState.ts
index 5824923..927aca3 100644
--- a/src/lib/stores/boredState.ts
+++ b/src/lib/stores/boredState.ts
@@ -9,7 +9,13 @@ const state = () => {
     isOpen: false,
     content: DefaultDialog
   }
-  const initial = { loading: false, dialog: initialDialog }
+  const initial: BoredStore = {
+    loading: false, dialog: initialDialog, search: {
+      pageSize: 25,
+      skip: 0,
+      currentPage: 1
+    }
+  };
   const { subscribe, set, update } = writable<BoredStore>(initial);
 
   function clear() {
diff --git a/src/lib/types.ts b/src/lib/types.ts
index a4d83dc..51d2dac 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -6,9 +6,17 @@ export type Dialog = {
   additionalData?: SavedGameType | GameType;
 }
 
+export type Search = {
+  totalCount?: number;
+  pageSize: number;
+  skip: number;
+  currentPage: number;
+}
+
 export type BoredStore = {
   loading: boolean;
   dialog: Dialog;
+  search: Search;
 };
 
 export enum ToastType {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3aae9e4..14367d1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,6 +7,7 @@
   import TextSearch from '$lib/components/search/textSearch/index.svelte';
   import RandomSearch from '$lib/components/search/random/index.svelte';
   import Random from '$lib/components/random/index.svelte';
+  import Pagination from '$lib/components/pagination/index.svelte';
 
   async function handleSearch(event: SubmitEvent) {
     boredState.update((n) => ({ ...n, loading: true }));
@@ -46,29 +47,45 @@
 </svelte:head>
 
 <h1>Search Boardgames!</h1>
-<p>Input your requirements to search for board game that match your criteria</p>
+<p style="margin: 1rem 0;">
+  Input your requirements to search for board game that match your criteria.
+</p>
 <div class="game-search">
   <form on:submit|preventDefault={handleSearch} method="post">
     <TextSearch showButton advancedSearch />
   </form>
-  <div class="random-buttons">
-    <RandomSearch />
-    <Random />
-  </div>
+  <section>
+    <p>Or pick a random game!</p>
+    <div class="random-buttons">
+      <RandomSearch />
+      <Random />
+    </div>
+  </section>
 </div>
 
 {#if $gameStore?.length > 0}
   <div class="games">
     <h1>Games Found:</h1>
     <div class="games-list">
-      {#each $gameStore as game}
+      {#each $gameStore as game (game.id)}
         <Game on:removeGameEvent={handleRemoveGame} {game} />
       {/each}
     </div>
+    <!-- <Pagination /> -->
   </div>
 {/if}
 
 <style lang="scss">
+  .game-search {
+    display: grid;
+    gap: 2rem;
+
+    section {
+      display: grid;
+      gap: 1rem;
+    }
+  }
+
   .games {
     margin: 2rem 0rem;
 
diff --git a/src/routes/api/game/+server.ts b/src/routes/api/game/+server.ts
index a9b32e9..06baf2f 100644
--- a/src/routes/api/game/+server.ts
+++ b/src/routes/api/game/+server.ts
@@ -9,7 +9,7 @@ export const POST: RequestHandler = async ({ request }) => {
   const queryParams: SearchQuery = {
     order_by: 'rank',
     ascending: false,
-    limit: 20,
+    limit: 25,
     client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
     fuzzy_match: true,
     name: ''
@@ -34,7 +34,7 @@ export const POST: RequestHandler = async ({ request }) => {
       'content-type': 'application/json'
     }
   });
-  console.log('response', response);
+  // console.log('board game response', response);
   if (response.status === 404) {
     // user hasn't created a todo list.
     // start with an empty array
@@ -46,6 +46,8 @@ export const POST: RequestHandler = async ({ request }) => {
   if (response.status === 200) {
     const gameResponse = await response.json();
     const gameList = gameResponse?.games;
+    const totalCount = gameResponse?.count;
+    console.log('totalCount', totalCount);
     const games: GameType[] = [];
     gameList.forEach((game) => {
       games.push(mapAPIGameToBoredGame(game));
diff --git a/src/routes/api/games/+server.ts b/src/routes/api/games/+server.ts
index 45683ef..6aef45f 100644
--- a/src/routes/api/games/+server.ts
+++ b/src/routes/api/games/+server.ts
@@ -74,13 +74,13 @@ export const POST: RequestHandler = async ({ request }) => {
       'content-type': 'application/json'
     }
   });
-  // console.log('response', response);
+  console.log('board game response', response);
   if (response.status === 404) {
     // user hasn't created a todo list.
     // start with an empty array
     return json$1({
-  games: []
-});
+      games: []
+    });
   }
 
   if (response.status === 200) {
@@ -92,8 +92,8 @@ export const POST: RequestHandler = async ({ request }) => {
     });
     console.log('games', games);
     return json$1({
-  games
-});
+      games
+    });
   }
 
   return new Response(undefined, { status: response.status });