diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9e546e4..44c93ca 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -12,6 +12,7 @@ module.exports = {
 		node: true
 	},
 	rules: {
-		'no-unused-vars': ['off', { varsIgnorePattern: '.*' }]
+		'no-unused-vars': ['off', { varsIgnorePattern: '.*' }],
+		'svelte/no-at-html-tags': 'off'
 	}
 }
diff --git a/package.json b/package.json
index be26a6b..8e9a458 100644
--- a/package.json
+++ b/package.json
@@ -26,31 +26,34 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.95",
-		"@interactjs/types": "^1.10.17",
+		"@iconify/json": "^2.2.98",
+		"@interactjs/types": "^1.10.18",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.22.3",
+		"@sveltejs/kit": "^1.22.4",
 		"autoprefixer": "^10.4.14",
 		"eslint": "^8.46.0",
-		"eslint-config-prettier": "^8.9.0",
+		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-svelte": "^2.32.4",
 		"postcss": "^8.4.27",
-		"prettier": "^3.0.0",
+		"prettier": "^3.0.1",
 		"prettier-plugin-svelte": "^3.0.3",
-		"svelte": "^4.1.1",
+		"svelte": "^4.1.2",
 		"svelte-add": "2023.6.28-0.0",
 		"svelte-check": "^3.4.6",
 		"tailwindcss": "^3.3.3",
 		"tailwindcss-animate": "^1.0.6",
 		"typescript": "^5.1.6",
 		"unplugin-icons": "^0.16.5",
-		"vite": "^4.4.7"
+		"vite": "^4.4.8"
 	},
 	"type": "module",
 	"dependencies": {
+		"@fontsource-variable/inter": "^5.0.7",
+		"@fontsource-variable/work-sans": "^5.0.8",
+		"@fontsource/ibm-plex-mono": "^5.0.7",
 		"clsx": "^2.0.0",
-		"interactjs": "^1.10.17",
+		"interactjs": "^1.10.18",
 		"remeda": "^1.24.0",
 		"simplex-noise": "^4.0.1",
 		"svelte-inview": "^4.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4343284..02b0daa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,12 +5,21 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@fontsource-variable/inter':
+    specifier: ^5.0.7
+    version: 5.0.7
+  '@fontsource-variable/work-sans':
+    specifier: ^5.0.8
+    version: 5.0.8
+  '@fontsource/ibm-plex-mono':
+    specifier: ^5.0.7
+    version: 5.0.7
   clsx:
     specifier: ^2.0.0
     version: 2.0.0
   interactjs:
-    specifier: ^1.10.17
-    version: 1.10.17
+    specifier: ^1.10.18
+    version: 1.10.18
   remeda:
     specifier: ^1.24.0
     version: 1.24.0
@@ -19,27 +28,27 @@ dependencies:
     version: 4.0.1
   svelte-inview:
     specifier: ^4.0.1
-    version: 4.0.1(svelte@4.1.1)
+    version: 4.0.1(svelte@4.1.2)
   ts-pattern:
     specifier: ^5.0.4
     version: 5.0.4
 
 devDependencies:
   '@iconify/json':
-    specifier: ^2.2.95
-    version: 2.2.95
+    specifier: ^2.2.98
+    version: 2.2.98
   '@interactjs/types':
-    specifier: ^1.10.17
-    version: 1.10.17
+    specifier: ^1.10.18
+    version: 1.10.18
   '@sveltejs/adapter-auto':
     specifier: ^2.1.0
-    version: 2.1.0(@sveltejs/kit@1.22.3)
+    version: 2.1.0(@sveltejs/kit@1.22.4)
   '@sveltejs/adapter-static':
     specifier: ^2.0.3
-    version: 2.0.3(@sveltejs/kit@1.22.3)
+    version: 2.0.3(@sveltejs/kit@1.22.4)
   '@sveltejs/kit':
-    specifier: ^1.22.3
-    version: 1.22.3(svelte@4.1.1)(vite@4.4.7)
+    specifier: ^1.22.4
+    version: 1.22.4(svelte@4.1.2)(vite@4.4.8)
   autoprefixer:
     specifier: ^10.4.14
     version: 10.4.14(postcss@8.4.27)
@@ -47,35 +56,29 @@ devDependencies:
     specifier: ^8.46.0
     version: 8.46.0
   eslint-config-prettier:
-    specifier: ^8.9.0
-    version: 8.9.0(eslint@8.46.0)
+    specifier: ^8.10.0
+    version: 8.10.0(eslint@8.46.0)
   eslint-plugin-svelte:
     specifier: ^2.32.4
-    version: 2.32.4(eslint@8.46.0)(svelte@4.1.1)
+    version: 2.32.4(eslint@8.46.0)(svelte@4.1.2)
   postcss:
     specifier: ^8.4.27
     version: 8.4.27
   prettier:
-    specifier: ^3.0.0
-    version: 3.0.0
+    specifier: ^3.0.1
+    version: 3.0.1
   prettier-plugin-svelte:
     specifier: ^3.0.3
-    version: 3.0.3(prettier@3.0.0)(svelte@4.1.1)
-  sass:
-    specifier: ^1.64.1
-    version: 1.64.1
-  scss:
-    specifier: ^0.2.4
-    version: 0.2.4
+    version: 3.0.3(prettier@3.0.1)(svelte@4.1.2)
   svelte:
-    specifier: ^4.1.1
-    version: 4.1.1
+    specifier: ^4.1.2
+    version: 4.1.2
   svelte-add:
     specifier: 2023.6.28-0.0
     version: 2023.6.28-0.0
   svelte-check:
     specifier: ^3.4.6
-    version: 3.4.6(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.1)
+    version: 3.4.6(postcss@8.4.27)(svelte@4.1.2)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3
@@ -89,8 +92,8 @@ devDependencies:
     specifier: ^0.16.5
     version: 0.16.5
   vite:
-    specifier: ^4.4.7
-    version: 4.4.7(sass@1.64.1)
+    specifier: ^4.4.8
+    version: 4.4.8
 
 packages:
 
@@ -357,6 +360,18 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
+  /@fontsource-variable/inter@5.0.7:
+    resolution: {integrity: sha512-aOG0xPnkjV9w5Iw9maGWYyM3P2ivRKCFHkzbSVN2MAmwsMQJP3Dkr6Og1FSHoQBZjGx4SfMWTU72h+dXthND5g==}
+    dev: false
+
+  /@fontsource-variable/work-sans@5.0.8:
+    resolution: {integrity: sha512-JlLUSV+nzSJ20olB4nol7528NipgnStY3zh2Na/qsHvvSe+pGud3PFj4q4fmCAFDKrU9FnOcr68rQE6WkHUHAQ==}
+    dev: false
+
+  /@fontsource/ibm-plex-mono@5.0.7:
+    resolution: {integrity: sha512-k6wK71xPVn96CNxaC5d7u/+VAEoGBoeypNP8X31yoDsQHj7/0EW+M0Uelb8MVlrq5p1DeP4deZcn4Q8u5CmSPA==}
+    dev: false
+
   /@humanwhocodes/config-array@0.11.10:
     resolution: {integrity: sha512-KVVjQmNUepDVGXNuoRRdmmEjruj0KfiGSbS8LVc12LMsWDQzRXJ0qdhN8L8uUigKpfEHRhlaQFY0ib1tnUbNeQ==}
     engines: {node: '>=10.10.0'}
@@ -377,8 +392,8 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify/json@2.2.95:
-    resolution: {integrity: sha512-54c4P8Z2Zuvgd3EEhAGV/byNPJ1sjVHO+Sd94376//6heUW73x04TjtNAnYviFdypI8S7SdYCn+ncyW4JhOmiA==}
+  /@iconify/json@2.2.98:
+    resolution: {integrity: sha512-KbXFeKbbKrzdjei/vu43CJLQhBF8ZasVoY9+MWhKvqazzsd7ANC5+Z3CP87EP8vO7hEGUxD0ZXgyujSwk3s3aw==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.1
@@ -401,8 +416,8 @@ packages:
       - supports-color
     dev: true
 
-  /@interactjs/types@1.10.17:
-    resolution: {integrity: sha512-X2JpoM7xUw0p9Me0tMaI0HNfcF/Hd07ZZlzpnpEMpGerUZOLoyeThrV9P+CrBHxZrluWJrigJbcdqXliFd0YMA==}
+  /@interactjs/types@1.10.18:
+    resolution: {integrity: sha512-3a+2Kx6PhA60ekxImRQJl+EyT4lD0/kd3/PveyaLtgfNxkxnSWdUq7Ixo3Y/t1lon4EqVGZQgp+qj/QNaEs6qA==}
 
   /@jridgewell/gen-mapping@0.3.3:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
@@ -457,25 +472,25 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.3):
+  /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.4):
     resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.3(svelte@4.1.1)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
       import-meta-resolve: 3.0.0
     dev: true
 
-  /@sveltejs/adapter-static@2.0.3(@sveltejs/kit@1.22.3):
+  /@sveltejs/adapter-static@2.0.3(@sveltejs/kit@1.22.4):
     resolution: {integrity: sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==}
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.22.3(svelte@4.1.1)(vite@4.4.7)
+      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
     dev: true
 
-  /@sveltejs/kit@1.22.3(svelte@4.1.1)(vite@4.4.7):
-    resolution: {integrity: sha512-IpHD5wvuoOIHYaHQUBJ1zERD2Iz+fB/rBXhXjl8InKw6X4VKE9BSus+ttHhE7Ke+Ie9ecfilzX8BnWE3FeQyng==}
+  /@sveltejs/kit@1.22.4(svelte@4.1.2)(vite@4.4.8):
+    resolution: {integrity: sha512-Opkqw1QXk4Cc25b/heJP2D7mX+OUBFAq4MXKfET58svTTxdeiHFKzmnuRsSF3nmxESqrLjqPAgHpib+knNGzRw==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -483,7 +498,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.1)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.2)(vite@4.4.8)
       '@types/cookie': 0.5.1
       cookie: 0.5.0
       devalue: 4.3.2
@@ -494,14 +509,14 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.3
-      svelte: 4.1.1
+      svelte: 4.1.2
       undici: 5.22.1
-      vite: 4.4.7(sass@1.64.1)
+      vite: 4.4.8
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.1)(vite@4.4.7):
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.2)(vite@4.4.8):
     resolution: {integrity: sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -509,30 +524,30 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.1)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.2)(vite@4.4.8)
       debug: 4.3.4
-      svelte: 4.1.1
-      vite: 4.4.7(sass@1.64.1)
+      svelte: 4.1.2
+      vite: 4.4.8
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.4.2(svelte@4.1.1)(vite@4.4.7):
+  /@sveltejs/vite-plugin-svelte@2.4.2(svelte@4.1.2)(vite@4.4.8):
     resolution: {integrity: sha512-ePfcC48ftMKhkT0OFGdOyycYKnnkT6i/buzey+vHRTR/JpQvuPzzhf1PtKqCDQfJRgoPSN2vscXs6gLigx/zGw==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.1)(vite@4.4.7)
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.2)(vite@4.4.8)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.0
-      svelte: 4.1.1
-      svelte-hmr: 0.15.2(svelte@4.1.1)
-      vite: 4.4.7(sass@1.64.1)
-      vitefu: 0.2.4(vite@4.4.7)
+      svelte: 4.1.2
+      svelte-hmr: 0.15.2(svelte@4.1.2)
+      vite: 4.4.8
+      vitefu: 0.2.4(vite@4.4.8)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -993,8 +1008,8 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-prettier@8.9.0(eslint@8.46.0):
-    resolution: {integrity: sha512-+sbni7NfVXnOpnRadUA8S28AUlsZt9GjgFvABIRL9Hkn8KqNzOp+7Lw4QWtrwn20KzU3wqu1QoOj2m+7rKRqkA==}
+  /eslint-config-prettier@8.10.0(eslint@8.46.0):
+    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
@@ -1002,7 +1017,7 @@ packages:
       eslint: 8.46.0
     dev: true
 
-  /eslint-plugin-svelte@2.32.4(eslint@8.46.0)(svelte@4.1.1):
+  /eslint-plugin-svelte@2.32.4(eslint@8.46.0)(svelte@4.1.2):
     resolution: {integrity: sha512-VJ12i2Iogug1jvhwxSlognnfGj76P5gks/V4pUD4SCSVQOp14u47MNP0zAG8AQR3LT0Fi1iUvIFnY4l9z5Rwbg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1023,8 +1038,8 @@ packages:
       postcss-safe-parser: 6.0.0(postcss@8.4.27)
       postcss-selector-parser: 6.0.13
       semver: 7.5.3
-      svelte: 4.1.1
-      svelte-eslint-parser: 0.32.2(svelte@4.1.1)
+      svelte: 4.1.2
+      svelte-eslint-parser: 0.32.2(svelte@4.1.2)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -1400,10 +1415,6 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
-  /immutable@4.3.1:
-    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
-    dev: true
-
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -1432,10 +1443,10 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
-  /interactjs@1.10.17:
-    resolution: {integrity: sha512-grjHJgnWkCoQLmAlk2yalNd1r0ztUhXLJNVjSOfWn1wfNNgU2tx1cDEkro9WYerDNC9UG3MZTeD4O6zOM5gbIA==}
+  /interactjs@1.10.18:
+    resolution: {integrity: sha512-ho+Qgr5U3b3oz23Iv7MkIZGoWaTsSCRnrCL34Dtjzs5eFghwpESJeiPj9RhYKc/SgRJL9anR+2OQxFsCg4PmLA==}
     dependencies:
-      '@interactjs/types': 1.10.17
+      '@interactjs/types': 1.10.18
     dev: false
 
   /is-arguments@1.1.1:
@@ -1745,11 +1756,6 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /ometa@0.2.2:
-    resolution: {integrity: sha512-LZuoK/yjU3FvrxPjUXUlZ1bavCfBPqauA7fsNdwi+AVhRdyk2IzgP3JRnevvjzQ6fKHdUw8YISshf53FmpHrng==}
-    engines: {node: '>= 0.2.0'}
-    dev: true
-
   /once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
     dependencies:
@@ -1960,24 +1966,24 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@4.1.1):
+  /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@4.1.2):
     resolution: {integrity: sha512-Wlq7Z5v2ueCubWo0TZzKc9XHcm7TDxqcuzRuGd0gcENfzfT4JZ9yDlCbEgxWgiPmLHkBjfOtpAWkcT28MCDpUQ==}
     peerDependencies:
       prettier: ^1.16.4 || ^2.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0
     dependencies:
       prettier: 2.8.8
-      svelte: 4.1.1
+      svelte: 4.1.2
     dev: true
 
-  /prettier-plugin-svelte@3.0.3(prettier@3.0.0)(svelte@4.1.1):
+  /prettier-plugin-svelte@3.0.3(prettier@3.0.1)(svelte@4.1.2):
     resolution: {integrity: sha512-dLhieh4obJEK1hnZ6koxF+tMUrZbV5YGvRpf2+OADyanjya5j0z1Llo8iGwiHmFWZVG/hLEw/AJD5chXd9r3XA==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0
     dependencies:
-      prettier: 3.0.0
-      svelte: 4.1.1
+      prettier: 3.0.1
+      svelte: 4.1.2
     dev: true
 
   /prettier@2.8.8:
@@ -1986,8 +1992,8 @@ packages:
     hasBin: true
     dev: true
 
-  /prettier@3.0.0:
-    resolution: {integrity: sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==}
+  /prettier@3.0.1:
+    resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -2100,23 +2106,6 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /sass@1.64.1:
-    resolution: {integrity: sha512-16rRACSOFEE8VN7SCgBu1MpYCyN7urj9At898tyzdXFhC+a+yOX5dXwAR7L8/IdPJ1NB8OYoXmD55DM30B2kEQ==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.1
-      source-map-js: 1.0.2
-    dev: true
-
-  /scss@0.2.4:
-    resolution: {integrity: sha512-4u8V87F+Q/upVhUmhPnB4C1R11xojkRkWjExL2v0CX2EXTg18VrKd+9JWoeyCp2VEMdSpJsyAvVU+rVjogh51A==}
-    engines: {node: '>= 0.2.0'}
-    dependencies:
-      ometa: 0.2.2
-    dev: true
-
   /semver@7.5.3:
     resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
     engines: {node: '>=10'}
@@ -2256,16 +2245,16 @@ packages:
       mri: 1.2.0
       postcss: 8.4.27
       prettier: 2.8.8
-      prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@4.1.1)
+      prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@4.1.2)
       prompts: 2.4.2
       recast: 0.23.3
-      svelte: 4.1.1
+      svelte: 4.1.2
       typescript: 5.1.6
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /svelte-check@3.4.6(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.1):
+  /svelte-check@3.4.6(postcss@8.4.27)(svelte@4.1.2):
     resolution: {integrity: sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==}
     hasBin: true
     peerDependencies:
@@ -2277,8 +2266,8 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      svelte: 4.1.1
-      svelte-preprocess: 5.0.4(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.1)(typescript@5.1.6)
+      svelte: 4.1.2
+      svelte-preprocess: 5.0.4(postcss@8.4.27)(svelte@4.1.2)(typescript@5.1.6)
       typescript: 5.1.6
     transitivePeerDependencies:
       - '@babel/core'
@@ -2292,7 +2281,7 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.32.2(svelte@4.1.1):
+  /svelte-eslint-parser@0.32.2(svelte@4.1.2):
     resolution: {integrity: sha512-Ok9D3A4b23iLQsONrjqtXtYDu5ZZ/826Blaw2LeFZVTg1pwofKDG4mz3/GYTax8fQ0plRGHI6j+d9VQYy5Lo/A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -2306,27 +2295,27 @@ packages:
       espree: 9.6.0
       postcss: 8.4.27
       postcss-scss: 4.0.6(postcss@8.4.27)
-      svelte: 4.1.1
+      svelte: 4.1.2
     dev: true
 
-  /svelte-hmr@0.15.2(svelte@4.1.1):
+  /svelte-hmr@0.15.2(svelte@4.1.2):
     resolution: {integrity: sha512-q/bAruCvFLwvNbeE1x3n37TYFb3mTBJ6TrCq6p2CoFbSTNhDE9oAtEfpy+wmc9So8AG0Tja+X0/mJzX9tSfvIg==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0-next.0
     dependencies:
-      svelte: 4.1.1
+      svelte: 4.1.2
     dev: true
 
-  /svelte-inview@4.0.1(svelte@4.1.1):
+  /svelte-inview@4.0.1(svelte@4.1.2):
     resolution: {integrity: sha512-8NuT/DKFiZAccDw1Z16cIsdZ7K6/BGxrUfDaFaWTCEdn3YqMj1TUAkfmQ08FQ1+INl1G+TQS+ImXIBiiISgXog==}
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0
     dependencies:
-      svelte: 4.1.1
+      svelte: 4.1.2
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss@8.4.27)(sass@1.64.1)(svelte@4.1.1)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss@8.4.27)(svelte@4.1.2)(typescript@5.1.6):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -2368,15 +2357,14 @@ packages:
       detect-indent: 6.1.0
       magic-string: 0.27.0
       postcss: 8.4.27
-      sass: 1.64.1
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.1.1
+      svelte: 4.1.2
       typescript: 5.1.6
     dev: true
 
-  /svelte@4.1.1:
-    resolution: {integrity: sha512-Enick5fPFISLoVy0MFK45cG+YlQt6upw8skEK9zzTpJnH1DqEv8xOZwizCGSo3Q6HZ7KrZTM0J18poF7aQg5zw==}
+  /svelte@4.1.2:
+    resolution: {integrity: sha512-/evA8U6CgOHe5ZD1C1W3va9iJG7mWflcCdghBORJaAhD2JzrVERJty/2gl0pIPrJYBGZwZycH6onYf+64XXF9g==}
     engines: {node: '>=16'}
     dependencies:
       '@ampproject/remapping': 2.2.1
@@ -2583,8 +2571,8 @@ packages:
       which-typed-array: 1.1.11
     dev: true
 
-  /vite@4.4.7(sass@1.64.1):
-    resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
+  /vite@4.4.8:
+    resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -2614,12 +2602,11 @@ packages:
       esbuild: 0.18.17
       postcss: 8.4.27
       rollup: 3.26.0
-      sass: 1.64.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitefu@0.2.4(vite@4.4.7):
+  /vitefu@0.2.4(vite@4.4.8):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -2627,7 +2614,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.7(sass@1.64.1)
+      vite: 4.4.8
     dev: true
 
   /webpack-sources@3.2.3:
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index ac2acba..8d0e8e1 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -1,3 +1,98 @@
-<footer class="h-96 flex items-center p-8 mt-20 border border-blue-500 rounded-3xl mx-8 mb-8">
-	<br />
+<script>
+	import DiscordIcon from '~icons/prime/discord'
+	import GithubIcon from '~icons/ri/github-fill'
+
+	/** @type {[string, string, string, string]} */
+	let developers = [
+		['Fufexan', 'Supporting Developer', 'cyan', 'https://github.com/fufexan'],
+		['VDawg', 'Webdesign-and dev', 'teal', 'https://github.com/Visual-Dawg'],
+		['System-x64', 'Webdev', 'green', 'https://github.com/System-x64'],
+		['That one calculator', 'Package Maintaner', 'lime', 'https://github.com/ThatOneCalculator']
+	]
+	function createRole(role, color) {
+		return `<span class='text-${color}-500'><span class='text-${color}-600'>[ </span>${role}<span class='text-${color}-600'> ]</span></span>`
+	}
+</script>
+
+<footer
+	class="bg-black/50 border-t border-blue-500 relative flex items-center justify-center w-screen _shadow"
+>
+	<div
+		class=" flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
+	>
+		<div class="flex flex-col gap-4">
+			<div class="text-cyan-600 text-sm uppercase font-bold">> Developers</div>
+			<ul class="flex flex-col gap-3 font-medium">
+				<li>
+					<a href="https://github.com/vaxerski">
+						Vaxerski <span
+							class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-transparent"
+							>[ Lead Developer ]</span
+						>
+					</a>
+				</li>
+				{#each developers as [name, role, color, href]}
+					<li>
+						<a {href} target="_blank">{name} {@html createRole(role, color)}</a>
+					</li>
+				{/each}
+				<li>
+					and our <a href="https://github.com/hyprwm/Hyprland/graphs/contributors" target="_blank"
+						><span class="text-indigo-400">fellow contributors</span></a
+					>
+				</li>
+			</ul>
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<div class="text-cyan-600 font-bold text-sm uppercase">Links</div>
+			<ul class="flex flex-col font-medium gap-3">
+				<li><a href="wiki.hyprland.org/">Wiki</a></li>
+				<li>
+					<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
+				</li>
+				<li>Hall of fame</li>
+			</ul>
+		</div>
+
+		<div class="flex flex-col gap-4">
+			<div class="text-cyan-600 text-sm uppercase font-bold" font-bold>Socials</div>
+			<ul class="flex gap-6">
+				<li class="">
+					<a
+						href="https://discord.com/invite/hQ9XvMUjjr"
+						class="text-slate-400 hover:text-slate-200"><DiscordIcon class="h-12 w-12 " /></a
+					>
+				</li>
+				<li class="">
+					<a href="https://github.com/hyprwm/Hyprland" class="text-slate-400 hover:text-slate-200"
+						><GithubIcon class="h-12 w-12 " /></a
+					>
+				</li>
+			</ul>
+		</div>
+
+		<div class="flex gap-4 flex-wrap text-sm text-slate-300 w-full">
+			<div>Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.</div>
+			<div>© Hyprland Development 2023.</div>
+			<div>Doki doki waku waku.</div>
+		</div>
+	</div>
+
+	<div class="gradient"></div>
 </footer>
+
+<style lang="postcss">
+	a:hover {
+		filter: brightness(1.5);
+	}
+	.gradient {
+		position: absolute;
+		top: -450px;
+		left: 0px;
+		width: 100vw;
+		height: 900px;
+		z-index: -10;
+		background: radial-gradient(105vw 450px at 50% 50%, theme(colors.blue.600 / 80%), transparent);
+	}
+</style>
diff --git a/src/lib/images/logos/arch.svg b/src/lib/images/logos/arch.svg
new file mode 100644
index 0000000..f0e1c59
--- /dev/null
+++ b/src/lib/images/logos/arch.svg
@@ -0,0 +1,10 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M35.6255 9C33.2545 14.8302 31.8244 18.6438 29.1845 24.3007C30.8031 26.0214 32.7898 28.0252 36.0162 30.2883C32.5475 28.8568 30.1814 27.4196 28.4132 25.9282C25.0347 32.9986 19.7415 43.0701 9 62.4268C17.4425 57.5386 23.9869 54.5249 30.086 53.375C29.8241 52.2453 29.6752 51.0233 29.6854 49.7482L29.6954 49.477C29.8293 44.0523 32.643 39.8807 35.9761 40.164C39.3092 40.4472 41.9 45.077 41.766 50.5017C41.7408 51.5225 41.626 52.5044 41.4254 53.4152C47.4583 54.5988 53.9328 57.6047 62.261 62.4268C60.6189 59.3946 59.1531 56.6613 57.7533 54.0582C55.5485 52.3443 53.2487 50.1136 48.5576 47.6988C51.782 48.5391 54.0906 49.5085 55.8902 50.5921C41.6584 24.0176 40.5059 20.4864 35.6255 9Z" fill="url(#paint0_linear_1413_1353)"/>
+<defs>
+<linearGradient id="paint0_linear_1413_1353" x1="18.6377" y1="2.77914" x2="61.3673" y2="3.35572" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CF"/>
+<stop offset="0.489583" stop-color="#00C4E3"/>
+<stop offset="1" stop-color="#00A1F8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/lib/images/logos/freebsd.svg b/src/lib/images/logos/freebsd.svg
new file mode 100644
index 0000000..9977d9a
--- /dev/null
+++ b/src/lib/images/logos/freebsd.svg
@@ -0,0 +1,22 @@
+<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M68.4738 6.54513C71.8755 9.94514 62.4451 24.8908 60.8513 26.4855C59.2571 28.0773 55.2084 26.6131 51.8076 23.2118C48.4063 19.8114 46.941 15.7619 48.5352 14.1677C50.129 12.5726 65.0734 3.14386 68.4738 6.54513Z" fill="url(#paint0_linear_1425_1638)"/>
+<path d="M20.7735 10.1429C15.5802 7.19589 8.19153 3.91848 5.84065 6.26927C3.45844 8.65028 6.85634 16.2061 9.83373 21.4089C12.4832 16.8018 16.2529 12.924 20.7735 10.1429Z" fill="url(#paint1_linear_1425_1638)"/>
+<path d="M63.2865 25.3123C63.7643 26.9347 63.6782 28.2747 62.9032 29.0484C61.0911 30.8608 56.198 28.9319 51.7874 24.7338C51.4788 24.4579 51.174 24.1712 50.8738 23.8705C49.2792 22.2751 48.0381 20.5759 47.2442 19.0119C45.6991 16.2409 45.3127 13.7931 46.4806 12.6255C47.1169 11.9894 48.1351 11.816 49.377 12.0398C50.1869 11.528 51.1425 10.957 52.1909 10.3725C47.9281 8.14937 43.0816 6.89316 37.9395 6.89316C20.887 6.89316 7.06152 20.7157 7.06152 37.7703C7.06152 54.8224 20.887 68.6467 37.9395 68.6467C54.9926 68.6467 68.8177 54.8224 68.8177 37.7703C68.8177 32.2631 67.3726 27.0985 64.8467 22.6215C64.3013 23.6174 63.7706 24.5301 63.2865 25.3123Z" fill="url(#paint2_linear_1425_1638)"/>
+<defs>
+<linearGradient id="paint0_linear_1425_1638" x1="51.7482" y1="29.6108" x2="68.8505" y2="29.3794" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CF"/>
+<stop offset="0.489583" stop-color="#00C4E3"/>
+<stop offset="1" stop-color="#00A1F8"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1425_1638" x1="7.88564" y1="23.2652" x2="20.5095" y2="23.0965" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CF"/>
+<stop offset="0.489583" stop-color="#00C4E3"/>
+<stop offset="1" stop-color="#00A1F8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_1425_1638" x1="18.2365" y1="75.8371" x2="67.7814" y2="75.1665" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CF"/>
+<stop offset="0.489583" stop-color="#00C4E3"/>
+<stop offset="1" stop-color="#00A1F8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/lib/images/logos/nixos.svg b/src/lib/images/logos/nixos.svg
new file mode 100644
index 0000000..5f12cdc
--- /dev/null
+++ b/src/lib/images/logos/nixos.svg
@@ -0,0 +1,23 @@
+<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1413_1526)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3891 36.8152L39.4522 66.3727L31.6106 66.4463L27.0552 58.5053L22.4672 66.4038L18.571 66.4023L16.5755 62.9547L23.1119 51.7154L18.4719 43.6408L22.3891 36.8152Z" fill="#5277C3" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5478 24.6401L11.4818 54.196L7.49729 47.4418L12.0967 39.5262L2.96235 39.5022L1.01562 36.1272L3.00354 32.6752L16.0053 32.7163L20.6781 24.6606L28.5478 24.6401Z" fill="#7EBAE4" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8571 48.2666L63.9862 48.2683L60.1291 55.096L50.9743 55.0707L55.5207 62.9932L53.5712 66.3666L49.5878 66.3711L43.1224 55.0907L33.8096 55.0718L29.8571 48.2666Z" fill="#7EBAE4" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.7214 35.3159L32.6583 5.75837L40.4998 5.68481L45.0553 13.6258L49.6432 5.72725L53.5394 5.72878L55.5349 9.17635L48.9985 20.4157L53.6385 28.4903L49.7214 35.3159Z" fill="#7EBAE4" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.3891 36.8152L39.4522 66.3727L31.6106 66.4463L27.0552 58.5053L22.4672 66.4038L18.571 66.4023L16.5755 62.9547L23.1119 51.7154L18.4719 43.6408L22.3891 36.8152Z" fill="#5277C3" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.2081 23.7897L8.07892 23.7881L11.936 16.9603L21.0908 16.9857L16.5444 9.06311L18.4939 5.6897L22.4773 5.6853L28.9427 16.9657L38.2555 16.9846L42.2081 23.7897Z" fill="#5277C3" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5395 47.4846L60.6055 17.9287L64.59 24.6829L59.9906 32.5986L69.1249 32.6226L71.0717 35.9975L69.0838 39.4495L56.082 39.4084L51.4092 47.4641L43.5395 47.4846Z" fill="#5277C3" fill-opacity="0.77"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4093 36.7961L39.4724 66.3537L31.6309 66.4272L27.0754 58.4862L22.4875 66.3848L18.5913 66.3833L16.5958 62.9357L23.1322 51.6964L18.4922 43.6218L22.4093 36.7961Z" fill="#58E1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.568 24.6209L11.502 54.1767L7.51752 47.4225L12.1169 39.5069L2.98258 39.4829L1.03581 36.1079L3.02373 32.656L16.0255 32.697L20.6983 24.6413L28.568 24.6209Z" fill="#58E1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.8773 48.2475L64.0064 48.2492L60.1494 55.077L50.9945 55.0516L55.5409 62.9742L53.5915 66.3476L49.608 66.352L43.1427 55.0716L33.8299 55.0527L29.8773 48.2475Z" fill="#58E1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M49.7417 35.2969L32.6786 5.73933L40.5201 5.66578L45.0756 13.6068L49.6635 5.70821L53.5597 5.70975L55.5552 9.15731L49.0188 20.3967L53.6588 28.4712L49.7417 35.2969Z" fill="#58E1FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22.4093 36.7961L39.4724 66.3537L31.6309 66.4272L27.0754 58.4862L22.4875 66.3848L18.5913 66.3833L16.5958 62.9357L23.1322 51.6964L18.4922 43.6218L22.4093 36.7961Z" fill="#4DCAFF" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.2032 23.7774L8.07407 23.7757L11.9311 16.9479L21.086 16.9733L16.5396 9.05072L18.489 5.67729L22.4725 5.6729L28.9378 16.9533L38.2506 16.9722L42.2032 23.7774Z" fill="#4DCAFF" fill-opacity="0.8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M43.5442 47.4673L60.6102 17.9114L64.5947 24.6656L59.9953 32.5813L69.1296 32.6053L71.0764 35.9802L69.0885 39.4322L56.0867 39.3911L51.4139 47.4468L43.5442 47.4673Z" fill="#4DCAFF" fill-opacity="0.8"/>
+</g>
+<defs>
+<clipPath id="clip0_1413_1526">
+<rect width="72" height="72" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/lib/images/logos/opensuse.svg b/src/lib/images/logos/opensuse.svg
new file mode 100644
index 0000000..f6900d4
--- /dev/null
+++ b/src/lib/images/logos/opensuse.svg
@@ -0,0 +1,10 @@
+<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.2005 29.684C57.2357 28.7296 57.6335 27.8438 58.3279 27.1941C59.0227 26.5422 59.9294 26.2054 60.8802 26.2357C62.8403 26.3061 64.3804 27.9687 64.3141 29.9363C64.2771 30.8907 63.8795 31.7765 63.1867 32.4242C62.4919 33.0799 61.5875 33.4169 60.6324 33.3846C58.6747 33.3122 57.1363 31.6534 57.2025 29.684H57.2005ZM66.709 33.203C66.8706 33.0957 66.9893 33.0069 67.0393 32.9871L67.0933 32.9026C66.9566 32.039 65.6756 27.8521 64.7077 26.8452C64.4408 26.5708 64.2269 26.3004 63.7942 26.046C60.288 23.9939 51.9744 22.755 51.5848 22.6985L51.5185 22.7169L51.4936 22.7774C51.4936 22.7774 51.4615 24.5087 51.4567 24.7022C50.6075 24.4154 44.4343 22.412 38.6469 22.2102C33.739 22.0369 26.5921 21.3991 17.1198 27.2506L16.8397 27.4258C12.3837 30.2183 9.30722 33.6627 7.69872 37.6639C7.19428 38.923 6.51593 41.764 7.18825 44.4376C7.47782 45.6061 8.0178 46.7802 8.74575 47.8314C10.3912 50.2064 13.1516 51.7822 16.1256 52.0486C20.3226 52.4259 23.5014 50.5314 24.632 46.984C25.4093 44.5364 24.632 40.9448 21.6519 39.1127C19.2281 37.6213 16.6216 37.9603 15.1095 38.9654C13.7978 39.8393 13.0552 41.197 13.0672 42.6882C13.0976 45.3335 15.3645 46.7398 16.9951 46.7439C17.4688 46.7439 17.9446 46.6611 18.4809 46.4856C18.6719 46.4271 18.8514 46.3546 19.0494 46.2316L19.1115 46.195L19.1504 46.1688L19.1374 46.1767C19.5091 45.9222 19.7326 45.5084 19.7326 45.0647C19.7326 44.9436 19.7157 44.8209 19.6812 44.6974C19.4886 44.0275 18.8299 43.6222 18.1474 43.7471L18.0552 43.7691L17.9305 43.8074L17.7496 43.87C17.374 43.9628 17.0929 43.9709 17.0329 43.9729C16.8419 43.9606 15.9033 43.6781 15.9033 42.6452V42.6311C15.9033 42.2517 16.0547 41.9856 16.1382 41.8401C16.4302 41.38 17.2297 40.9285 18.309 41.0229C19.7266 41.1462 20.7489 41.8766 21.4256 43.2545C22.054 44.5356 21.8895 46.1117 21.0019 47.2659C20.1204 48.4097 18.552 48.8958 16.4636 48.67C14.3591 48.4362 12.5799 47.2193 11.5838 45.3246C10.6087 43.4727 10.5555 41.2769 11.4463 39.5901C13.5769 35.5485 17.6012 35.5909 19.8081 35.9742C23.0733 36.5434 26.7883 39.5699 28.1057 43.0647C28.3185 43.6218 28.427 44.0633 28.5217 44.4672L28.6639 45.0705L32.3528 46.8803L32.401 46.9168L32.4906 46.9085L32.5069 46.8018C32.484 46.7189 32.4303 46.6426 32.3452 45.6052C32.2751 44.6847 32.1323 42.1649 33.395 40.9159C33.8852 40.4279 34.6322 39.9922 35.2222 39.8528C37.64 39.2594 40.4755 39.6688 43.1563 42.7866C44.5441 44.397 45.2207 45.1313 45.56 45.4602L45.6785 45.5675L45.8179 45.6722C45.9291 45.733 50.4285 47.8151 50.4285 47.8151L50.5211 47.7929L50.5229 47.6963C50.493 47.662 47.6714 43.9977 48.1734 40.9811C48.5688 38.578 50.4727 38.7959 53.1054 39.0945C53.9648 39.1954 54.9432 39.3084 55.9569 39.331C58.7843 39.349 61.8307 38.8243 63.7082 37.9991C64.923 37.4684 65.6981 37.1153 66.1843 36.6716C66.359 36.5261 66.4493 36.29 66.5439 36.036L66.61 35.8683C66.6885 35.6623 66.8042 35.2285 66.8548 34.9906C66.8753 34.8858 66.8873 34.7751 66.8128 34.7164L66.553 34.7648C65.7284 35.2634 63.6673 36.2075 61.7415 36.2478C59.3498 36.2965 54.5323 33.8306 54.0303 33.5682L53.9819 33.5119C53.8636 33.2214 53.1405 31.5045 52.9859 31.1411C56.4539 33.4373 59.3295 34.7065 61.5325 34.9022C63.9844 35.1215 65.8941 33.7775 66.7114 33.2028H66.7112L66.709 33.203ZM61.2569 30.015C60.6483 30.015 60.1567 29.684 60.1567 29.2785C60.1567 28.8691 60.6483 28.54 61.2569 28.54C61.8656 28.54 62.3586 28.8691 62.3586 29.2785C62.3582 29.684 61.8652 30.015 61.2569 30.015ZM60.8511 27.2889C60.1862 27.2649 59.5559 27.501 59.0739 27.955C58.5922 28.409 58.308 29.024 58.2879 29.6901C58.2417 31.0664 59.3143 32.2244 60.6816 32.2749C61.3461 32.295 61.9797 32.059 62.4644 31.605C62.9482 31.1487 63.2265 30.5333 63.2476 29.8699C63.2938 28.494 62.2216 27.3376 60.8519 27.2891L60.8511 27.2889Z" fill="url(#paint0_linear_1427_1838)"/>
+<defs>
+<linearGradient id="paint0_linear_1427_1838" x1="17.7976" y1="55.5884" x2="66.0566" y2="54.2777" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00E6CF"/>
+<stop offset="0.489583" stop-color="#00C4E3"/>
+<stop offset="1" stop-color="#00A1F8"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/lib/videos/end_4_rice_intro.mp4 b/src/lib/videos/end_4_rice_intro.mp4
new file mode 100644
index 0000000..9996ad5
Binary files /dev/null and b/src/lib/videos/end_4_rice_intro.mp4 differ
diff --git a/src/lib/videos/end_4_thumbnail.png b/src/lib/videos/end_4_thumbnail.png
new file mode 100644
index 0000000..ae8fa2c
Binary files /dev/null and b/src/lib/videos/end_4_thumbnail.png differ
diff --git a/src/lib/videos/prasanthrangan_rice.mp4 b/src/lib/videos/prasanthrangan_rice.mp4
deleted file mode 100644
index 57dbf2f..0000000
Binary files a/src/lib/videos/prasanthrangan_rice.mp4 and /dev/null differ
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 16f2e51..efa3907 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,8 @@
 	import Footer from '$lib/components/Footer.svelte'
 	import Navbar from './Navbar.svelte'
 	import './styles.css'
+	import '@fontsource-variable/work-sans'
+	import '@fontsource/ibm-plex-mono/500.css'
 </script>
 
 <div class="flex flex-col min-h-screen">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 06402d4..0da6c55 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,6 +3,7 @@
 	import FeaturesSlice from './FeaturesSlice.svelte'
 	import HallOfFameSlice from './HallOfFameSlice.svelte'
 	import Hero from './Hero.svelte'
+	import InstallSlice from './InstallSlice.svelte'
 	import PreviewRiceSlice from './PreviewRiceSlice.svelte'
 </script>
 
@@ -23,6 +24,8 @@
 	<HallOfFameSlice />
 
 	<Community />
+
+	<InstallSlice />
 </div>
 
 <div class="mt-[16rem]" />
diff --git a/src/routes/CommunitySlice.svelte b/src/routes/CommunitySlice.svelte
index 704c520..1f2b2bf 100644
--- a/src/routes/CommunitySlice.svelte
+++ b/src/routes/CommunitySlice.svelte
@@ -6,7 +6,6 @@
 	import Button from '$lib/components/Button.svelte'
 	import DiscordIcon from '~icons/prime/discord'
 	import DiscordProfilePicture from './DiscordProfilePicture.svelte'
-	import clsx from 'clsx'
 	import { animateIn } from '$lib/Helper.mjs'
 	import { setContext } from 'svelte'
 
@@ -64,10 +63,10 @@
 			class: 'outline-orange-500'
 		},
 		{
-			image: '/imgs/profile_pictures/beardwarrior.webp',
+			image: '/imgs/profile_pictures/loseardes77.gif',
 			coordinates: [24, 341],
 			size: 49,
-			class: 'outline-amber-500'
+			class: 'outline-green-500'
 		},
 		{
 			image: '/imgs/profile_pictures/captainiveau.webp',
@@ -123,10 +122,10 @@
 			class: 'outline-purple-500'
 		},
 		{
-			image: '/imgs/profile_pictures/loseardes77.gif',
+			image: '/imgs/profile_pictures/beardwarrior.webp',
 			coordinates: [736, 277],
 			size: 87,
-			class: 'outline-green-500'
+			class: 'outline-amber-500'
 		},
 		{
 			image: '/imgs/profile_pictures/neoney.webp',
@@ -174,7 +173,7 @@
 </script>
 
 <section
-	class="relative flex flex-col items-center w-screen min-h-max h-[1200px] max-w-[100vw] overflow-x-hidden"
+	class="relative flex flex-col items-center w-screen overflow-hidden min-h-max h-[1100px] -mb-[200px] max-w-[100vw]"
 	bind:this={sectionElement}
 >
 	<div use:animateIn={{ slide: 24, fade: 0 }}>
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
index c986f8e..b428c14 100644
--- a/src/routes/Hero.svelte
+++ b/src/routes/Hero.svelte
@@ -21,10 +21,14 @@
 		<div class="text-center items-center flex flex-col gap-6 mb-8">
 			<img src={Logo} alt="Hyprland Logo" class="w-32 mb-4 ani-in fill-mode-backwards" />
 			<div class="relative ani-in fill-mode-backwards [animation-delay:584ms]">
-				<h1 class="text-7xl p-2 font-bold bg-clip-text text-transparent hyprgradient">Hyprland</h1>
+				<h1
+					class="text-7xl p-2 font-bold bg-clip-text text-transparent font-london hyprgradient tracking-wider"
+				>
+					Hyprland
+				</h1>
 				<div
 					aria-hidden="true"
-					class="text-7xl top-0 pointer-events-none p-2 font-bold title-shadow absolute -z-10"
+					class="text-7xl top-0 pointer-events-none p-2 font-bold title-shadow absolute font-london tracking-wider -z-10"
 				>
 					Hyprland
 				</div>
@@ -90,8 +94,10 @@
 	}
 
 	.title-shadow {
-		text-shadow: 8px 9px 32px theme(colors.secondary / 10%),
-			-8px -9px 32px theme(colors.primary / 20%), 1px 0px 3px theme(colors.purple.500 / 50%),
+		text-shadow:
+			8px 9px 32px theme(colors.secondary / 10%),
+			-8px -9px 32px theme(colors.primary / 20%),
+			1px 0px 3px theme(colors.purple.500 / 50%),
 			0px 9px 16px theme(colors.black / 50%);
 		animate: title_effect 1s ease infinite alternate;
 	}
diff --git a/src/routes/InstallButton.svelte b/src/routes/InstallButton.svelte
new file mode 100644
index 0000000..29aef3e
--- /dev/null
+++ b/src/routes/InstallButton.svelte
@@ -0,0 +1,80 @@
+<script>
+	import { onDestroy } from 'svelte'
+	import ClipboardIcon from '~icons/mingcute/copy-2-line'
+
+	/** @type {string} */
+	export let command
+	/** @type {string} */
+	export let image
+	/** @type {string} */
+	export let name
+
+	let isShowingCopied = false
+	let timeoutId
+
+	async function copyCommand() {
+		await navigator.clipboard.writeText(command).then(() => (isShowingCopied = true))
+		clearTimeout(timeoutId)
+		timeoutId = setTimeout(() => (isShowingCopied = false), 1400)
+	}
+
+	onDestroy(() => {
+		clearTimeout(timeoutId)
+	})
+</script>
+
+<div class="flex gap-4 items-center">
+	<div
+		class="flex flex-col gap-1 justify-center items-center text-primary text-lg font-medium rounded-full w-32 h-32"
+	>
+		<img src={image} alt="Arch Logo" />{name}
+	</div>
+
+	<div class="flex flex-col relative font-mono">
+		<button
+			class="flex text-base transition-all min-w-[18rem] items-center font-medium rounded-full border-primary border py-3 pl-6 pr-6 gap-4 justify-center group active:scale-[1.01]"
+			on:click={$$slots.default ? undefined : copyCommand}
+		>
+			<slot>
+				<div class="flex gap-4 relative justify-between w-full">
+					<div class="flex gap-4">
+						<div class="text-primary select-none font-bold">></div>
+						<span>{command}</span>
+					</div>
+					<ClipboardIcon
+						class="group-hover:opacity-80 group-active:opacity-100 opacity-0 w-6 h-6 hover:!opacity-100 transition-opacity"
+					/>
+				</div></slot
+			>
+		</button>
+		<div
+			class="text-green-400 [translate:-50%_0px] select-none pointer-events-none absolute -top-8 w-full left-1/2 hidden max-w-max"
+			class:copy={isShowingCopied}
+		>
+			Copied to clipboard ✔
+		</div>
+		{#if $$slots.extra}
+			<div class="text-xs font-sans opacity-80 absolute -bottom-6 w-full flex justify-center">
+				<slot name="extra" />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style lang="postcss">
+	.copy {
+		animation: 80ms cubic-bezier(0.5, 0.2, 0, 1.5) 1 copy;
+		display: block;
+	}
+
+	@keyframes copy {
+		from {
+			opacity: 0.8;
+			scale: 0.98;
+		}
+		to {
+			opacity: 1;
+			scale: 1;
+		}
+	}
+</style>
diff --git a/src/routes/InstallSlice.svelte b/src/routes/InstallSlice.svelte
new file mode 100644
index 0000000..3933e7f
--- /dev/null
+++ b/src/routes/InstallSlice.svelte
@@ -0,0 +1,42 @@
+<script>
+	import { animateIn } from '$lib/Helper.mjs'
+	import archLogo from '$lib/images/logos/arch.svg'
+	import nixLogo from '$lib/images/logos/nixos.svg'
+	import bsdLogo from '$lib/images/logos/freebsd.svg'
+	import suseLogo from '$lib/images/logos/opensuse.svg'
+	import LinkOutIcon from '~icons/akar-icons/link-out'
+	import InstallButton from './InstallButton.svelte'
+	import Button from '$lib/components/Button.svelte'
+</script>
+
+<section>
+	<div use:animateIn={{ slide: 24, fade: 0 }}>
+		<h1 class="text-8xl mb-6 font-bold text-center">Install now</h1>
+		<div class="text-center text-lg mb-20 font-extrabold text-slate-300">
+			For your favourite distro
+		</div>
+	</div>
+
+	<div class="flex flex-col gap-6 items-center" use:animateIn={{ slide: 24, fade: 0 }}>
+		<InstallButton name="Arch" command="pacman -S hyprland" image={archLogo}
+			><div slot="extra">
+				AUR git version: <a href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a>
+			</div></InstallButton
+		>
+		<InstallButton name="NixOs" image={nixLogo}
+			><a
+				href="https://wiki.hyprland.org/Nix/"
+				target="_blank"
+				class="flex gap-4 items-center justify-between w-full">See instructions <LinkOutIcon /></a
+			></InstallButton
+		>
+		<InstallButton name="FreeBSD" command="pkg install hyprland" image={bsdLogo} />
+		<InstallButton name="openSuse" command="zypper in hyprland" image={suseLogo}
+			><div slot="extra">or install “hyprland” via YaST2 Software.</div></InstallButton
+		>
+
+		<a href="https://wiki.hyprland.org/Getting-Started/Installation/#packages" class="mt-10">
+			<Button size="lg" type="fancyOutline">Install more</Button>
+		</a>
+	</div>
+</section>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 782c35d..2465b54 100644
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { page } from '$app/stores'
 	import logo from '$lib/images/logo.png'
-	import GithubIcon from '~icons/akar-icons/github-fill'
+	import GithubIcon from '~icons/ri/github-fill'
 	import DiscordIcon from '~icons/prime/discord'
 </script>
 
@@ -10,7 +10,7 @@
 >
 	<a
 		href="/"
-		class="flex gap-2 px-4 py-1 text-sm rounded-full bg-black/50 items-center font-bold tracking-wide text-white"
+		class="flex gap-2 font-london tracking-wider px-4 py-1 text-sm rounded-full bg-black/50 items-center font-bold text-white"
 	>
 		<img src={logo} alt="Hyprland Logo" class="w-6" />Hyprland</a
 	>
@@ -29,7 +29,7 @@
 		</ul>
 		<ul class="border-purple-400 border mr-2 ml-4 rounded-full flex items-center gap-3 px-4">
 			<li>
-				<a href="https://github.com/hyprwm/Hyprland">
+				<a href="https://discord.com/invite/hQ9XvMUjjr">
 					<DiscordIcon class="w-8 h-8 p-1 rounded-full hover:bg-purple-500 hover:text-white" />
 				</a>
 			</li>
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index 26f83a7..8e9210d 100644
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { inview } from 'svelte-inview'
-	import previewRice from '$lib/videos/prasanthrangan_rice.mp4'
+	import previewRice from '$lib/videos/end_4_rice_intro.mp4'
+	import previewRiceThumbnail from '$lib/videos/end_4_thumbnail.png'
 
 	/** @type HTMLVideoElement */
 	let videoElement
@@ -10,7 +11,7 @@
 	class="max-w-7xl relative animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 z-20 {$$restProps.class}"
 >
 	<div
-		class="rounded-xl opacity-20 overflow-hidden border-purple-400 border-2 scale-90 transition-all [transition-duration:1460ms]"
+		class="rounded-xl opacity-20 overflow-hidden border-sky-400 border-2 scale-90 transition-all [transition-duration:1460ms]"
 		use:inview={{ unobserveOnEnter: true, threshold: 0.8 }}
 		on:inview_enter={({ detail: { node } }) => {
 			node.classList.remove('opacity-20')
@@ -26,6 +27,7 @@
 			loop
 			muted
 			preload="auto"
+			poster={previewRiceThumbnail}
 		/>
 	</div>
 	<div class="preview-rice-bg" aria="hidden" />
@@ -35,6 +37,6 @@
 	.preview-rice-bg {
 		@apply w-screen max-w-7xl h-full absolute -z-10 -top-20 left-1/2 -translate-x-1/2 opacity-50;
 		/* background-color: red; */
-		background-image: radial-gradient(closest-side, theme(colors.purple.500), transparent);
+		background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent);
 	}
 </style>
diff --git a/src/routes/styles.css b/src/routes/styles.css
index 0b7b9f8..f9c71c7 100644
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -3,9 +3,8 @@
 @tailwind utilities;
 
 @font-face {
-	font-family: 'Space Grotesk';
-	src: url('/fonts/spacegrotesk.woff2') format('woff2');
-	font-weight: 300 700;
+	font-family: 'London Between';
+	src: url('/fonts/LondonBetween.woff') format('woff');
 	font-display: swap;
 }
 
diff --git a/static/fonts/LondonBetween.woff b/static/fonts/LondonBetween.woff
new file mode 100644
index 0000000..22df529
Binary files /dev/null and b/static/fonts/LondonBetween.woff differ
diff --git a/static/fonts/SpaceGrotesk-VariableFont_wght.ttf b/static/fonts/SpaceGrotesk-VariableFont_wght.ttf
deleted file mode 100644
index edd0cec..0000000
--- a/static/fonts/SpaceGrotesk-VariableFont_wght.ttf
+++ /dev/null
@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:e13b56b9bc84600ac672b2785c052bc2011aa8d503177e8b041981ab498f105c
-size 134112
diff --git a/static/fonts/spacegrotesk.woff2 b/static/fonts/spacegrotesk.woff2
deleted file mode 100644
index 58e40be..0000000
Binary files a/static/fonts/spacegrotesk.woff2 and /dev/null differ
diff --git a/tailwind.config.js b/tailwind.config.js
index f2daef4..838b432 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,8 +8,9 @@ export default {
 			colors: { black: '#0D0E0F', primary: '#58E1FF', secondary: '#00A2F8' },
 			fontFamily: {
 				...fontFamily,
-				// sans: ['"Space Grotesk"', ...fontFamily['sans']]
-				sans: ['"Space Grotesk"']
+				sans: ['Work Sans Variable', ...fontFamily['sans']],
+				mono: ['IBM Plex Mono', ...fontFamily['mono']],
+				london: ['"London Between"', ...fontFamily['sans']]
 			},
 			backgroundImage: {
 				'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))'
@@ -17,5 +18,17 @@ export default {
 		}
 	},
 	plugins: [require('tailwindcss-animate')],
-	safelist: ['animate-bounce', 'outline-amber-500']
+	safelist: [
+		'animate-bounce',
+		'outline-amber-500',
+		// In here because of the footer
+		'text-teal-500',
+		'text-teal-600',
+		'text-cyan-500',
+		'text-cyan-600',
+		'text-green-500',
+		'text-green-600',
+		'text-lime-500',
+		'text-lime-600'
+	]
 }
diff --git a/vite.config.js b/vite.config.js
index 2d3828e..28e0399 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,12 +8,5 @@ export default defineConfig({
 		Icons({
 			compiler: 'svelte'
 		})
-	],
-	build: {
-		rollupOptions: {
-			output: {
-				manualChunks: {}
-			}
-		}
-	}
+	]
 })