diff --git a/package.json b/package.json
index 3e34170..a2b483a 100755
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"post:install": "./scripts/generate-blurred-images.sh"
 	},
 	"keywords": [
 		"hyprland"
@@ -26,39 +27,39 @@
 		"node": ">=16.0.0"
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.98",
+		"@iconify/json": "^2.2.109",
 		"@interactjs/types": "^1.10.18",
 		"@sveltejs/adapter-auto": "^2.1.0",
 		"@sveltejs/adapter-static": "^2.0.3",
-		"@sveltejs/kit": "^1.22.4",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.46.0",
-		"eslint-config-prettier": "^8.10.0",
-		"eslint-plugin-svelte": "^2.32.4",
-		"postcss": "^8.4.27",
-		"prettier": "^3.0.1",
+		"@sveltejs/kit": "^1.24.0",
+		"autoprefixer": "^10.4.15",
+		"eslint": "^8.48.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.33.0",
+		"postcss": "^8.4.29",
+		"prettier": "^3.0.3",
 		"prettier-plugin-svelte": "^3.0.3",
-		"svelte": "^4.1.2",
-		"svelte-add": "2023.6.28-0.0",
-		"svelte-check": "^3.4.6",
+		"svelte": "^4.2.0",
+		"svelte-add": "2023.8.31-0.0",
+		"svelte-check": "^3.5.1",
 		"tailwindcss": "^3.3.3",
-		"tailwindcss-animate": "^1.0.6",
-		"typescript": "^5.1.6",
-		"unplugin-icons": "^0.16.5",
-		"vite": "^4.4.8"
+		"tailwindcss-animate": "^1.0.7",
+		"typescript": "^5.2.2",
+		"unplugin-icons": "^0.16.6",
+		"vite": "^4.4.9"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource-variable/inter": "^5.0.7",
-		"@fontsource-variable/work-sans": "^5.0.8",
-		"@fontsource/ibm-plex-mono": "^5.0.7",
+		"@fontsource-variable/inter": "^5.0.8",
+		"@fontsource-variable/work-sans": "^5.0.9",
+		"@fontsource/ibm-plex-mono": "^5.0.8",
 		"clsx": "^2.0.0",
 		"interactjs": "^1.10.18",
-		"prettier-plugin-tailwindcss": "^0.4.1",
-		"remeda": "^1.24.0",
+		"prettier-plugin-tailwindcss": "^0.5.4",
+		"remeda": "^1.26.0",
 		"rxjs": "^7.8.1",
 		"simplex-noise": "^4.0.1",
 		"svelte-inview": "^4.0.1",
-		"ts-pattern": "^5.0.4"
+		"ts-pattern": "^5.0.5"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index af97e76..59a3060 100755
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,14 +6,14 @@ settings:
 
 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-variable/work-sans':
+    specifier: ^5.0.9
+    version: 5.0.9
   '@fontsource/ibm-plex-mono':
-    specifier: ^5.0.7
-    version: 5.0.7
+    specifier: ^5.0.8
+    version: 5.0.8
   clsx:
     specifier: ^2.0.0
     version: 2.0.0
@@ -21,11 +21,11 @@ dependencies:
     specifier: ^1.10.18
     version: 1.10.18
   prettier-plugin-tailwindcss:
-    specifier: ^0.4.1
-    version: 0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1)
+    specifier: ^0.5.4
+    version: 0.5.4(prettier-plugin-svelte@3.0.3)(prettier@3.0.3)
   remeda:
-    specifier: ^1.24.0
-    version: 1.24.0
+    specifier: ^1.26.0
+    version: 1.26.0
   rxjs:
     specifier: ^7.8.1
     version: 7.8.1
@@ -34,72 +34,72 @@ dependencies:
     version: 4.0.1
   svelte-inview:
     specifier: ^4.0.1
-    version: 4.0.1(svelte@4.1.2)
+    version: 4.0.1(svelte@4.2.0)
   ts-pattern:
-    specifier: ^5.0.4
-    version: 5.0.4
+    specifier: ^5.0.5
+    version: 5.0.5
 
 devDependencies:
   '@iconify/json':
-    specifier: ^2.2.98
-    version: 2.2.98
+    specifier: ^2.2.109
+    version: 2.2.109
   '@interactjs/types':
     specifier: ^1.10.18
     version: 1.10.18
   '@sveltejs/adapter-auto':
     specifier: ^2.1.0
-    version: 2.1.0(@sveltejs/kit@1.22.4)
+    version: 2.1.0(@sveltejs/kit@1.24.0)
   '@sveltejs/adapter-static':
     specifier: ^2.0.3
-    version: 2.0.3(@sveltejs/kit@1.22.4)
+    version: 2.0.3(@sveltejs/kit@1.24.0)
   '@sveltejs/kit':
-    specifier: ^1.22.4
-    version: 1.22.4(svelte@4.1.2)(vite@4.4.8)
+    specifier: ^1.24.0
+    version: 1.24.0(svelte@4.2.0)(vite@4.4.9)
   autoprefixer:
-    specifier: ^10.4.14
-    version: 10.4.14(postcss@8.4.27)
+    specifier: ^10.4.15
+    version: 10.4.15(postcss@8.4.29)
   eslint:
-    specifier: ^8.46.0
-    version: 8.46.0
+    specifier: ^8.48.0
+    version: 8.48.0
   eslint-config-prettier:
-    specifier: ^8.10.0
-    version: 8.10.0(eslint@8.46.0)
+    specifier: ^9.0.0
+    version: 9.0.0(eslint@8.48.0)
   eslint-plugin-svelte:
-    specifier: ^2.32.4
-    version: 2.32.4(eslint@8.46.0)(svelte@4.1.2)
+    specifier: ^2.33.0
+    version: 2.33.0(eslint@8.48.0)(svelte@4.2.0)
   postcss:
-    specifier: ^8.4.27
-    version: 8.4.27
+    specifier: ^8.4.29
+    version: 8.4.29
   prettier:
-    specifier: ^3.0.1
-    version: 3.0.1
+    specifier: ^3.0.3
+    version: 3.0.3
   prettier-plugin-svelte:
     specifier: ^3.0.3
-    version: 3.0.3(prettier@3.0.1)(svelte@4.1.2)
+    version: 3.0.3(prettier@3.0.3)(svelte@4.2.0)
   svelte:
-    specifier: ^4.1.2
-    version: 4.1.2
+    specifier: ^4.2.0
+    version: 4.2.0
   svelte-add:
-    specifier: 2023.6.28-0.0
-    version: 2023.6.28-0.0
+    specifier: 2023.8.31-0.0
+    version: 2023.8.31-0.0
   svelte-check:
-    specifier: ^3.4.6
-    version: 3.4.6(postcss@8.4.27)(svelte@4.1.2)
+    specifier: ^3.5.1
+    version: 3.5.1(postcss@8.4.29)(svelte@4.2.0)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.3
   tailwindcss-animate:
-    specifier: ^1.0.6
-    version: 1.0.6(tailwindcss@3.3.3)
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.3.3)
   typescript:
-    specifier: ^5.1.6
-    version: 5.1.6
+    specifier: ^5.2.2
+    version: 5.2.2
   unplugin-icons:
-    specifier: ^0.16.5
-    version: 0.16.5
+    specifier: ^0.16.6
+    version: 0.16.6
   vite:
-    specifier: ^4.4.8
-    version: 4.4.8
+    specifier: ^4.4.9
+    version: 4.4.9
 
 packages:
 
@@ -127,8 +127,8 @@ packages:
       find-up: 5.0.0
     dev: true
 
-  /@antfu/utils@0.7.5:
-    resolution: {integrity: sha512-dlR6LdS+0SzOAPx/TPRhnoi7hE251OVeT2Snw0RguNbBSbjUHdWr0l3vcUUDg26rEysT89kCbtw1lVorBXLLCg==}
+  /@antfu/utils@0.7.6:
+    resolution: {integrity: sha512-pvFiLP2BeOKA/ZOS6jxx4XhKzdVLHDhGlFEaZ2flWWYf2xOqVniqpk38I04DFRyz+L0ASggl7SkItTc+ZLju4w==}
     dev: true
 
   /@esbuild/android-arm64@0.18.17:
@@ -329,14 +329,14 @@ packages:
     dev: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.46.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.48.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.46.0
-      eslint-visitor-keys: 3.4.2
+      eslint: 8.48.0
+      eslint-visitor-keys: 3.4.3
     dev: true
 
   /@eslint-community/regexpp@4.6.2:
@@ -344,8 +344,8 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint/eslintrc@2.1.1:
-    resolution: {integrity: sha512-9t7ZA7NGGK8ckelF0PQCfcxIUzs1Md5rrO6U/c+FIQNanea5UZC0wqKXH4vHBccmu4ZJgZ2idtPeW7+Q2npOEA==}
+  /@eslint/eslintrc@2.1.2:
+    resolution: {integrity: sha512-+wvgpDsrB1YqAMdEUCcnTlpfVBH7Vqn6A/NT3D8WVXFIaKMlErPIZT3oCIAVCOtarRpMtelZLqJeU3t7WY6X6g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
@@ -361,21 +361,21 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.46.0:
-    resolution: {integrity: sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==}
+  /@eslint/js@8.48.0:
+    resolution: {integrity: sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@fontsource-variable/inter@5.0.7:
-    resolution: {integrity: sha512-aOG0xPnkjV9w5Iw9maGWYyM3P2ivRKCFHkzbSVN2MAmwsMQJP3Dkr6Og1FSHoQBZjGx4SfMWTU72h+dXthND5g==}
+  /@fontsource-variable/inter@5.0.8:
+    resolution: {integrity: sha512-WkYfFNccmEIeL2fNg0mYeLWqOoB7xD8MFxFRc4IwbSP2o8ZaBt36v5aW4by4MyrgGRMNk7uNi5LbvYKq6clPjw==}
     dev: false
 
-  /@fontsource-variable/work-sans@5.0.8:
-    resolution: {integrity: sha512-JlLUSV+nzSJ20olB4nol7528NipgnStY3zh2Na/qsHvvSe+pGud3PFj4q4fmCAFDKrU9FnOcr68rQE6WkHUHAQ==}
+  /@fontsource-variable/work-sans@5.0.9:
+    resolution: {integrity: sha512-aGK91wJIc7HPQ1hT5vAfGui0OajlaDc/ZCU5xvugr6ITXlyudM5qVfpjGEMpe4ACACRGeC5bKYFYZlX4pW9gzA==}
     dev: false
 
-  /@fontsource/ibm-plex-mono@5.0.7:
-    resolution: {integrity: sha512-k6wK71xPVn96CNxaC5d7u/+VAEoGBoeypNP8X31yoDsQHj7/0EW+M0Uelb8MVlrq5p1DeP4deZcn4Q8u5CmSPA==}
+  /@fontsource/ibm-plex-mono@5.0.8:
+    resolution: {integrity: sha512-AoR7K2YtlGKy3LApyLYjqjyz0o8XtkRvbB/juMsGSGNayBBAly140ykZls+VxcXjZSLQpp2RyxKo6lYOuHPmUw==}
     dev: false
 
   /@humanwhocodes/config-array@0.11.10:
@@ -398,8 +398,8 @@ packages:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
 
-  /@iconify/json@2.2.98:
-    resolution: {integrity: sha512-KbXFeKbbKrzdjei/vu43CJLQhBF8ZasVoY9+MWhKvqazzsd7ANC5+Z3CP87EP8vO7hEGUxD0ZXgyujSwk3s3aw==}
+  /@iconify/json@2.2.109:
+    resolution: {integrity: sha512-Hi5InevdpLbDOjaJ1a0e5wQq8x8lDcNh3xyCq7yMyH/N/wniKa2vGUzzLQWLwENYcMm81b50jCAt7R4cOkx1BQ==}
     dependencies:
       '@iconify/types': 2.0.0
       pathe: 1.1.1
@@ -409,11 +409,11 @@ packages:
     resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
     dev: true
 
-  /@iconify/utils@2.1.7:
-    resolution: {integrity: sha512-P8S3z/L1LcV4Qem9AoCfVAaTFGySEMzFEY4CHZLkfRj0Fv9LiR+AwjDgrDrzyI93U2L2mg9JHsbTJ52mF8suNw==}
+  /@iconify/utils@2.1.9:
+    resolution: {integrity: sha512-mo+A4n3MwLlWlg1SoSO+Dt6pOPWKElk9sSJ6ZpuzbB9OcjxN8RUWxU3ulPwB1nglErWKRam2x4BAohbYF7FiFA==}
     dependencies:
       '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.5
+      '@antfu/utils': 0.7.6
       '@iconify/types': 2.0.0
       debug: 4.3.4
       kolorist: 1.8.0
@@ -478,25 +478,25 @@ packages:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
     dev: true
 
-  /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.22.4):
+  /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.24.0):
     resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
+      '@sveltejs/kit': 1.24.0(svelte@4.2.0)(vite@4.4.9)
       import-meta-resolve: 3.0.0
     dev: true
 
-  /@sveltejs/adapter-static@2.0.3(@sveltejs/kit@1.22.4):
+  /@sveltejs/adapter-static@2.0.3(@sveltejs/kit@1.24.0):
     resolution: {integrity: sha512-VUqTfXsxYGugCpMqQv1U0LIdbR3S5nBkMMDmpjGVJyM6Q2jHVMFtdWJCkeHMySc6mZxJ+0eZK3T7IgmUCDrcUQ==}
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.22.4(svelte@4.1.2)(vite@4.4.8)
+      '@sveltejs/kit': 1.24.0(svelte@4.2.0)(vite@4.4.9)
     dev: true
 
-  /@sveltejs/kit@1.22.4(svelte@4.1.2)(vite@4.4.8):
-    resolution: {integrity: sha512-Opkqw1QXk4Cc25b/heJP2D7mX+OUBFAq4MXKfET58svTTxdeiHFKzmnuRsSF3nmxESqrLjqPAgHpib+knNGzRw==}
+  /@sveltejs/kit@1.24.0(svelte@4.2.0)(vite@4.4.9):
+    resolution: {integrity: sha512-r7Gj0/VcdAIRL1yE1cJ5rurWJ5drrR7BzRv+P+NAathtvnMCi0u4FhezO7T4bj7DJdQ3TNsax3yQcrVWxh60fg==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -504,7 +504,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.2)(vite@4.4.8)
+      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.2.0)(vite@4.4.9)
       '@types/cookie': 0.5.1
       cookie: 0.5.0
       devalue: 4.3.2
@@ -515,14 +515,15 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.3
-      svelte: 4.1.2
-      undici: 5.22.1
-      vite: 4.4.8
+      svelte: 4.2.0
+      tiny-glob: 0.2.9
+      undici: 5.23.0
+      vite: 4.4.9
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.1.2)(vite@4.4.8):
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.2.0)(vite@4.4.9):
     resolution: {integrity: sha512-Khdl5jmmPN6SUsVuqSXatKpQTMIifoQPDanaxC84m9JxIibWvSABJyHpyys0Z+1yYrxY5TTEQm+6elh0XCMaOA==}
     engines: {node: ^14.18.0 || >= 16}
     peerDependencies:
@@ -530,30 +531,30 @@ packages:
       svelte: ^3.54.0 || ^4.0.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.1.2)(vite@4.4.8)
+      '@sveltejs/vite-plugin-svelte': 2.4.2(svelte@4.2.0)(vite@4.4.9)
       debug: 4.3.4
-      svelte: 4.1.2
-      vite: 4.4.8
+      svelte: 4.2.0
+      vite: 4.4.9
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@2.4.2(svelte@4.1.2)(vite@4.4.8):
+  /@sveltejs/vite-plugin-svelte@2.4.2(svelte@4.2.0)(vite@4.4.9):
     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.2)(vite@4.4.8)
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.3(@sveltejs/vite-plugin-svelte@2.4.2)(svelte@4.2.0)(vite@4.4.9)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.0
-      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)
+      svelte: 4.2.0
+      svelte-hmr: 0.15.2(svelte@4.2.0)
+      vite: 4.4.9
+      vitefu: 0.2.4(vite@4.4.9)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -569,37 +570,37 @@ packages:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
 
-  /@typescript-eslint/types@5.62.0:
-    resolution: {integrity: sha512-87NVngcbVXUahrRTqIK27gD2t5Cu1yuCXxbLcFtCzZGlfyVWWh8mLHkoxzjsB6DDNnvdL+fW8MiwPEJyGJQDgQ==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/types@6.5.0:
+    resolution: {integrity: sha512-eqLLOEF5/lU8jW3Bw+8auf4lZSbbljHR2saKnYqON12G/WsJrGeeDHWuQePoEf9ro22+JkbPfWQwKEC5WwLQ3w==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     dev: true
 
-  /@typescript-eslint/typescript-estree@5.62.0(typescript@5.1.6):
-    resolution: {integrity: sha512-CmcQ6uY7b9y694lKdRB8FEel7JbU/40iSAPomu++SjLMntB+2Leay2LO6i8VnJk58MtE9/nQSFIH6jpyRWyYzA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/typescript-estree@6.5.0(typescript@5.2.2):
+    resolution: {integrity: sha512-q0rGwSe9e5Kk/XzliB9h2LBc9tmXX25G0833r7kffbl5437FPWb2tbpIV9wAATebC/018pGa9fwPDuvGN+LxWQ==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/types': 5.62.0
-      '@typescript-eslint/visitor-keys': 5.62.0
+      '@typescript-eslint/types': 6.5.0
+      '@typescript-eslint/visitor-keys': 6.5.0
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.5.3
-      tsutils: 3.21.0(typescript@5.1.6)
-      typescript: 5.1.6
+      semver: 7.5.4
+      ts-api-utils: 1.0.2(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@typescript-eslint/visitor-keys@5.62.0:
-    resolution: {integrity: sha512-07ny+LHRzQXepkGg6w0mFY41fVUNBrL2Roj/++7V1txKugfjm/Ci/qSND03r2RhlJhJYMcTn9AhhSSqQp0Ysyw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+  /@typescript-eslint/visitor-keys@6.5.0:
+    resolution: {integrity: sha512-yCB/2wkbv3hPsh02ZS8dFQnij9VVQXJMN/gbQsaaY+zxALkZnxa/wagvLEFsAWMPv7d7lxQmNsIzGU1w/T/WyA==}
+    engines: {node: ^16.0.0 || >=18.0.0}
     dependencies:
-      '@typescript-eslint/types': 5.62.0
+      '@typescript-eslint/types': 6.5.0
       eslint-visitor-keys: 3.4.2
     dev: true
 
@@ -683,19 +684,19 @@ packages:
       tslib: 2.6.1
     dev: true
 
-  /autoprefixer@10.4.14(postcss@8.4.27):
-    resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
+  /autoprefixer@10.4.15(postcss@8.4.29):
+    resolution: {integrity: sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==}
     engines: {node: ^10 || ^12 || >=14}
     hasBin: true
     peerDependencies:
       postcss: ^8.1.0
     dependencies:
-      browserslist: 4.21.9
-      caniuse-lite: 1.0.30001513
+      browserslist: 4.21.10
+      caniuse-lite: 1.0.30001525
       fraction.js: 4.2.0
       normalize-range: 0.1.2
       picocolors: 1.0.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
     dev: true
 
@@ -732,15 +733,15 @@ packages:
       fill-range: 7.0.1
     dev: true
 
-  /browserslist@4.21.9:
-    resolution: {integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==}
+  /browserslist@4.21.10:
+    resolution: {integrity: sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001513
-      electron-to-chromium: 1.4.454
+      caniuse-lite: 1.0.30001525
+      electron-to-chromium: 1.4.508
       node-releases: 2.0.13
-      update-browserslist-db: 1.0.11(browserslist@4.21.9)
+      update-browserslist-db: 1.0.11(browserslist@4.21.10)
     dev: true
 
   /buffer-crc32@0.2.13:
@@ -771,8 +772,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /caniuse-lite@1.0.30001513:
-    resolution: {integrity: sha512-pnjGJo7SOOjAGytZZ203Em95MRM8Cr6jhCXNF/FAXTpCTRTECnqQWLpiTRqrFtdYcth8hf4WECUpkezuYsMVww==}
+  /caniuse-lite@1.0.30001525:
+    resolution: {integrity: sha512-/3z+wB4icFt3r0USMwxujAqRvaD/B7rvGTsKhbhSQErVrJvkZCLhgNLJxU8MevahQVH6hCU9FsHdNUFbiwmE7Q==}
     dev: true
 
   /chalk@4.1.2:
@@ -957,8 +958,8 @@ packages:
       domhandler: 5.0.3
     dev: true
 
-  /electron-to-chromium@1.4.454:
-    resolution: {integrity: sha512-pmf1rbAStw8UEQ0sr2cdJtWl48ZMuPD9Sto8HVQOq9vx9j2WgDEN6lYoaqFvqEHYOmGA9oRGn7LqWI9ta0YugQ==}
+  /electron-to-chromium@1.4.508:
+    resolution: {integrity: sha512-FFa8QKjQK/A5QuFr2167myhMesGrhlOBD+3cYNxO9/S4XzHEXesyTD/1/xF644gC8buFPz3ca6G1LOQD0tZrrg==}
     dev: true
 
   /entities@4.5.0:
@@ -1014,17 +1015,17 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-prettier@8.10.0(eslint@8.46.0):
-    resolution: {integrity: sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==}
+  /eslint-config-prettier@9.0.0(eslint@8.48.0):
+    resolution: {integrity: sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.46.0
+      eslint: 8.48.0
     dev: true
 
-  /eslint-plugin-svelte@2.32.4(eslint@8.46.0)(svelte@4.1.2):
-    resolution: {integrity: sha512-VJ12i2Iogug1jvhwxSlognnfGj76P5gks/V4pUD4SCSVQOp14u47MNP0zAG8AQR3LT0Fi1iUvIFnY4l9z5Rwbg==}
+  /eslint-plugin-svelte@2.33.0(eslint@8.48.0)(svelte@4.2.0):
+    resolution: {integrity: sha512-kk7Z4BfxVjFYJseFcOpS8kiKNio7KnAnhFagmM89h1wNSKlM7tIn+uguNQppKM9leYW+S+Us0Rjg2Qg3zsEcvg==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0-0
@@ -1033,32 +1034,24 @@ packages:
       svelte:
         optional: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.46.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.48.0)
       '@jridgewell/sourcemap-codec': 1.4.15
       debug: 4.3.4
-      eslint: 8.46.0
+      eslint: 8.48.0
       esutils: 2.0.3
       known-css-properties: 0.28.0
-      postcss: 8.4.27
-      postcss-load-config: 3.1.4(postcss@8.4.27)
-      postcss-safe-parser: 6.0.0(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-load-config: 3.1.4(postcss@8.4.29)
+      postcss-safe-parser: 6.0.0(postcss@8.4.29)
       postcss-selector-parser: 6.0.13
       semver: 7.5.3
-      svelte: 4.1.2
-      svelte-eslint-parser: 0.32.2(svelte@4.1.2)
+      svelte: 4.2.0
+      svelte-eslint-parser: 0.33.0(svelte@4.2.0)
     transitivePeerDependencies:
       - supports-color
       - ts-node
     dev: true
 
-  /eslint-scope@7.2.0:
-    resolution: {integrity: sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-    dev: true
-
   /eslint-scope@7.2.2:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1067,25 +1060,25 @@ packages:
       estraverse: 5.3.0
     dev: true
 
-  /eslint-visitor-keys@3.4.1:
-    resolution: {integrity: sha512-pZnmmLwYzf+kWaM/Qgrvpen51upAktaaiI01nsJD/Yr3lMOdNtq0cxkrrg16w64VtisN6okbs7Q8AfGqj4c9fA==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    dev: true
-
   /eslint-visitor-keys@3.4.2:
     resolution: {integrity: sha512-8drBzUEyZ2llkpCA67iYrgEssKDUu68V8ChqqOfFupIaG/LCVPUT+CoGJpT77zJprs4T/W7p07LP7zAIMuweVw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.46.0:
-    resolution: {integrity: sha512-cIO74PvbW0qU8e0mIvk5IV3ToWdCq5FYG6gWPHHkx6gNdjlbAYvtfHmlCMXxjcoVaIdwy/IAt3+mDkZkfvb2Dg==}
+  /eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    dev: true
+
+  /eslint@8.48.0:
+    resolution: {integrity: sha512-sb6DLeIuRXxeM1YljSe1KEx9/YYeZFQWcV8Rq9HfigmdDEugjLEVEa1ozDjL6YDjBpQHPJxJzze+alxi4T3OLg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.46.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.48.0)
       '@eslint-community/regexpp': 4.6.2
-      '@eslint/eslintrc': 2.1.1
-      '@eslint/js': 8.46.0
+      '@eslint/eslintrc': 2.1.2
+      '@eslint/js': 8.48.0
       '@humanwhocodes/config-array': 0.11.10
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -1096,7 +1089,7 @@ packages:
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
-      eslint-visitor-keys: 3.4.2
+      eslint-visitor-keys: 3.4.3
       espree: 9.6.1
       esquery: 1.5.0
       esutils: 2.0.3
@@ -1127,22 +1120,13 @@ packages:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
     dev: true
 
-  /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
-      acorn-jsx: 5.3.2(acorn@8.9.0)
-      eslint-visitor-keys: 3.4.1
-    dev: true
-
   /espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       acorn: 8.9.0
       acorn-jsx: 5.3.2(acorn@8.9.0)
-      eslint-visitor-keys: 3.4.2
+      eslint-visitor-keys: 3.4.3
     dev: true
 
   /esprima@4.0.1:
@@ -1341,6 +1325,10 @@ packages:
       type-fest: 0.20.2
     dev: true
 
+  /globalyzer@0.1.0:
+    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+    dev: true
+
   /globby@11.1.0:
     resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
     engines: {node: '>=10'}
@@ -1353,6 +1341,10 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: true
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -1862,29 +1854,29 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /postcss-import@15.1.0(postcss@8.4.27):
+  /postcss-import@15.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       postcss: ^8.0.0
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.2
     dev: true
 
-  /postcss-js@4.0.1(postcss@8.4.27):
+  /postcss-js@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
     engines: {node: ^12 || ^14 || >= 16}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-load-config@3.1.4(postcss@8.4.27):
+  /postcss-load-config@3.1.4(postcss@8.4.29):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
     peerDependencies:
@@ -1897,11 +1889,11 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       yaml: 1.10.2
     dev: true
 
-  /postcss-load-config@4.0.1(postcss@8.4.27):
+  /postcss-load-config@4.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
     engines: {node: '>= 14'}
     peerDependencies:
@@ -1914,36 +1906,36 @@ packages:
         optional: true
     dependencies:
       lilconfig: 2.1.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       yaml: 2.3.1
     dev: true
 
-  /postcss-nested@6.0.1(postcss@8.4.27):
+  /postcss-nested@6.0.1(postcss@8.4.29):
     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.2.14
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
       postcss-selector-parser: 6.0.13
     dev: true
 
-  /postcss-safe-parser@6.0.0(postcss@8.4.27):
+  /postcss-safe-parser@6.0.0(postcss@8.4.29):
     resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.3.3
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
-  /postcss-scss@4.0.6(postcss@8.4.27):
-    resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
+  /postcss-scss@4.0.7(postcss@8.4.29):
+    resolution: {integrity: sha512-xPv2GseoyXPa58Nro7M73ZntttusuCmZdeOojUFR5PZDz2BR62vfYx1w9TyOnp1+nYFowgOMipsCBhxzVkAEPw==}
     engines: {node: '>=12.0'}
     peerDependencies:
       postcss: ^8.4.19
     dependencies:
-      postcss: 8.4.27
+      postcss: 8.4.29
     dev: true
 
   /postcss-selector-parser@6.0.13:
@@ -1958,8 +1950,8 @@ packages:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
 
-  /postcss@8.4.27:
-    resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
+  /postcss@8.4.29:
+    resolution: {integrity: sha512-cbI+jaqIeu/VGqXEarWkRCCffhjgXc0qjBtXpqJhTBohMUjUQnbBr0xqX3vEKudc4iviTewcJo5ajcec5+wdJw==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.6
@@ -1972,35 +1964,35 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@4.1.2):
+  /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@4.2.0):
     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.2
+      svelte: 4.2.0
     dev: true
 
-  /prettier-plugin-svelte@3.0.3(prettier@3.0.1)(svelte@4.1.2):
+  /prettier-plugin-svelte@3.0.3(prettier@3.0.3)(svelte@4.2.0):
     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.1
-      svelte: 4.1.2
+      prettier: 3.0.3
+      svelte: 4.2.0
 
-  /prettier-plugin-tailwindcss@0.4.1(prettier-plugin-svelte@3.0.3)(prettier@3.0.1):
-    resolution: {integrity: sha512-hwn2EiJmv8M+AW4YDkbjJ6HlZCTzLyz1QlySn9sMuKV/Px0fjwldlB7tol8GzdgqtkdPtzT3iJ4UzdnYXP25Ag==}
-    engines: {node: '>=12.17.0'}
+  /prettier-plugin-tailwindcss@0.5.4(prettier-plugin-svelte@3.0.3)(prettier@3.0.3):
+    resolution: {integrity: sha512-QZzzB1bID6qPsKHTeA9qPo1APmmxfFrA5DD3LQ+vbTmAnY40eJI7t9Q1ocqel2EKMWNPLJqdTDWZj1hKYgqSgg==}
+    engines: {node: '>=14.21.3'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-pug': '*'
       '@shopify/prettier-plugin-liquid': '*'
       '@shufo/prettier-plugin-blade': '*'
       '@trivago/prettier-plugin-sort-imports': '*'
-      prettier: ^2.2 || ^3.0
+      prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
       prettier-plugin-import-sort: '*'
@@ -2043,8 +2035,8 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
-      prettier: 3.0.1
-      prettier-plugin-svelte: 3.0.3(prettier@3.0.1)(svelte@4.1.2)
+      prettier: 3.0.3
+      prettier-plugin-svelte: 3.0.3(prettier@3.0.3)(svelte@4.2.0)
     dev: false
 
   /prettier@2.8.8:
@@ -2053,8 +2045,8 @@ packages:
     hasBin: true
     dev: true
 
-  /prettier@3.0.1:
-    resolution: {integrity: sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==}
+  /prettier@3.0.3:
+    resolution: {integrity: sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -2099,8 +2091,8 @@ packages:
       tslib: 2.6.1
     dev: true
 
-  /remeda@1.24.0:
-    resolution: {integrity: sha512-tjLxwU4yLtvX8yHlePnE7CdQXRe2pKatlVY+AunqAQV5t9FNw1yuiIAqKpu6zevd+No5LQHEJ/HK3r3ZFK7KXg==}
+  /remeda@1.26.0:
+    resolution: {integrity: sha512-v+Qbi2krvXknCvG60gviLUSBJQPxXUVBAvi64m3Awoua3X+ygAmPYPrbFgqwPpiM1tBHNBVrHPBKtza7if+HyQ==}
     dev: false
 
   /resolve-from@4.0.0:
@@ -2136,8 +2128,8 @@ packages:
       glob: 7.2.3
     dev: true
 
-  /rollup@3.26.0:
-    resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==}
+  /rollup@3.28.1:
+    resolution: {integrity: sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==}
     engines: {node: '>=14.18.0', npm: '>=8.0.0'}
     hasBin: true
     optionalDependencies:
@@ -2180,6 +2172,14 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
+  /semver@7.5.4:
+    resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==}
+    engines: {node: '>=10'}
+    hasBin: true
+    dependencies:
+      lru-cache: 6.0.0
+    dev: true
+
   /set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
     dev: true
@@ -2296,11 +2296,11 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte-add@2023.6.28-0.0:
-    resolution: {integrity: sha512-DQIpLs8yFNY8w3EDoHyfjUTgC0IMjcwPexnhL1E7ZhizxzNfJTgyvDyUj5yIPzAl8e/empOb7IkEWQre2tMBmQ==}
+  /svelte-add@2023.8.31-0.0:
+    resolution: {integrity: sha512-1ALhxbkCvh/s0IGFhG00fb0ZJyhb5rhIf4e5A+Qor0uF995anpZdKHKgtcdRm4dPSo9f4ELIlenUNlyF7mJa8w==}
     hasBin: true
     dependencies:
-      '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.1.6)
+      '@typescript-eslint/typescript-estree': 6.5.0(typescript@5.2.2)
       detect-package-manager: 2.0.1
       dom-serializer: 2.0.0
       domhandler: 5.0.3
@@ -2309,19 +2309,19 @@ packages:
       htmlparser2: 9.0.0
       kleur: 4.1.5
       mri: 1.2.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       prettier: 2.8.8
-      prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@4.1.2)
+      prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@4.2.0)
       prompts: 2.4.2
       recast: 0.23.3
-      svelte: 4.1.2
-      typescript: 5.1.6
+      svelte: 4.2.0
+      typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /svelte-check@3.4.6(postcss@8.4.27)(svelte@4.1.2):
-    resolution: {integrity: sha512-OBlY8866Zh1zHQTkBMPS6psPi7o2umTUyj6JWm4SacnIHXpWFm658pG32m3dKvKFL49V4ntAkfFHKo4ztH07og==}
+  /svelte-check@3.5.1(postcss@8.4.29)(svelte@4.2.0):
+    resolution: {integrity: sha512-+Zb4iHxAhdUtcUg/WJPRjlS1RJalIsWAe9Mz6G1zyznSs7dDkT7VUBdXc3q7Iwg49O/VrZgyJRvOJkjuBfKjFA==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0
@@ -2332,9 +2332,9 @@ packages:
       import-fresh: 3.3.0
       picocolors: 1.0.0
       sade: 1.8.1
-      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
+      svelte: 4.2.0
+      svelte-preprocess: 5.0.4(postcss@8.4.29)(svelte@4.2.0)(typescript@5.2.2)
+      typescript: 5.2.2
     transitivePeerDependencies:
       - '@babel/core'
       - coffeescript
@@ -2347,8 +2347,8 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.32.2(svelte@4.1.2):
-    resolution: {integrity: sha512-Ok9D3A4b23iLQsONrjqtXtYDu5ZZ/826Blaw2LeFZVTg1pwofKDG4mz3/GYTax8fQ0plRGHI6j+d9VQYy5Lo/A==}
+  /svelte-eslint-parser@0.33.0(svelte@4.2.0):
+    resolution: {integrity: sha512-5awZ6Bs+Tb/zQwa41PSdcLynAVQTwW0HGyCBjtbAQ59taLZqDgQSMzRlDmapjZdDtzERm0oXDZNE0E+PKJ6ryg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       svelte: ^3.37.0 || ^4.0.0
@@ -2356,32 +2356,32 @@ packages:
       svelte:
         optional: true
     dependencies:
-      eslint-scope: 7.2.0
-      eslint-visitor-keys: 3.4.1
-      espree: 9.6.0
-      postcss: 8.4.27
-      postcss-scss: 4.0.6(postcss@8.4.27)
-      svelte: 4.1.2
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.2
+      espree: 9.6.1
+      postcss: 8.4.29
+      postcss-scss: 4.0.7(postcss@8.4.29)
+      svelte: 4.2.0
     dev: true
 
-  /svelte-hmr@0.15.2(svelte@4.1.2):
+  /svelte-hmr@0.15.2(svelte@4.2.0):
     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.2
+      svelte: 4.2.0
     dev: true
 
-  /svelte-inview@4.0.1(svelte@4.1.2):
+  /svelte-inview@4.0.1(svelte@4.2.0):
     resolution: {integrity: sha512-8NuT/DKFiZAccDw1Z16cIsdZ7K6/BGxrUfDaFaWTCEdn3YqMj1TUAkfmQ08FQ1+INl1G+TQS+ImXIBiiISgXog==}
     peerDependencies:
       svelte: ^3.0.0 || ^4.0.0
     dependencies:
-      svelte: 4.1.2
+      svelte: 4.2.0
     dev: false
 
-  /svelte-preprocess@5.0.4(postcss@8.4.27)(svelte@4.1.2)(typescript@5.1.6):
+  /svelte-preprocess@5.0.4(postcss@8.4.29)(svelte@4.2.0)(typescript@5.2.2):
     resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
     engines: {node: '>= 14.10.0'}
     requiresBuild: true
@@ -2422,15 +2422,15 @@ packages:
       '@types/pug': 2.0.6
       detect-indent: 6.1.0
       magic-string: 0.27.0
-      postcss: 8.4.27
+      postcss: 8.4.29
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.1.2
-      typescript: 5.1.6
+      svelte: 4.2.0
+      typescript: 5.2.2
     dev: true
 
-  /svelte@4.1.2:
-    resolution: {integrity: sha512-/evA8U6CgOHe5ZD1C1W3va9iJG7mWflcCdghBORJaAhD2JzrVERJty/2gl0pIPrJYBGZwZycH6onYf+64XXF9g==}
+  /svelte@4.2.0:
+    resolution: {integrity: sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==}
     engines: {node: '>=16'}
     dependencies:
       '@ampproject/remapping': 2.2.1
@@ -2447,8 +2447,8 @@ packages:
       magic-string: 0.30.0
       periscopic: 3.1.0
 
-  /tailwindcss-animate@1.0.6(tailwindcss@3.3.3):
-    resolution: {integrity: sha512-4WigSGMvbl3gCCact62ZvOngA+PRqhAn7si3TQ3/ZuPuQZcIEtVap+ENSXbzWhpojKB8CpvnIsrwBu8/RnHtuw==}
+  /tailwindcss-animate@1.0.7(tailwindcss@3.3.3):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
@@ -2474,11 +2474,11 @@ packages:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.0.0
-      postcss: 8.4.27
-      postcss-import: 15.1.0(postcss@8.4.27)
-      postcss-js: 4.0.1(postcss@8.4.27)
-      postcss-load-config: 4.0.1(postcss@8.4.27)
-      postcss-nested: 6.0.1(postcss@8.4.27)
+      postcss: 8.4.29
+      postcss-import: 15.1.0(postcss@8.4.29)
+      postcss-js: 4.0.1(postcss@8.4.29)
+      postcss-load-config: 4.0.1(postcss@8.4.29)
+      postcss-nested: 6.0.1(postcss@8.4.29)
       postcss-selector-parser: 6.0.13
       resolve: 1.22.2
       sucrase: 3.32.0
@@ -2503,6 +2503,13 @@ packages:
       any-promise: 1.3.0
     dev: true
 
+  /tiny-glob@0.2.9:
+    resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
+    dependencies:
+      globalyzer: 0.1.0
+      globrex: 0.1.2
+    dev: true
+
   /to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -2515,31 +2522,26 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /ts-api-utils@1.0.2(typescript@5.2.2):
+    resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}
+    engines: {node: '>=16.13.0'}
+    peerDependencies:
+      typescript: '>=4.2.0'
+    dependencies:
+      typescript: 5.2.2
+    dev: true
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
 
-  /ts-pattern@5.0.4:
-    resolution: {integrity: sha512-D5iVliqugv2C9541W2CNXFYNEZxr4TiHuLPuf49tKEdQFp/8y8fR0v1RExUvXkiWozKCwE7zv07C6EKxf0lKuQ==}
+  /ts-pattern@5.0.5:
+    resolution: {integrity: sha512-tL0w8U/pgaacOmkb9fRlYzWEUDCfVjjv9dD4wHTgZ61MjhuMt46VNWTG747NqW6vRzoWIKABVhFSOJ82FvXrfA==}
     dev: false
 
-  /tslib@1.14.1:
-    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
-    dev: true
-
   /tslib@2.6.1:
     resolution: {integrity: sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig==}
 
-  /tsutils@3.21.0(typescript@5.1.6):
-    resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
-    engines: {node: '>= 6'}
-    peerDependencies:
-      typescript: '>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta'
-    dependencies:
-      tslib: 1.14.1
-      typescript: 5.1.6
-    dev: true
-
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -2552,21 +2554,21 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /typescript@5.1.6:
-    resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
+  /typescript@5.2.2:
+    resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==}
     engines: {node: '>=14.17'}
     hasBin: true
     dev: true
 
-  /undici@5.22.1:
-    resolution: {integrity: sha512-Ji2IJhFXZY0x/0tVBXeQwgPlLWw13GVzpsWPQ3rV50IFMMof2I55PZZxtm4P6iNq+L5znYN9nSTAq0ZyE6lSJw==}
+  /undici@5.23.0:
+    resolution: {integrity: sha512-1D7w+fvRsqlQ9GscLBwcAJinqcZGHUKjbOmXdlE/v8BvEGXjeWAax+341q44EuTcHXXnfyKNbKRq4Lg7OzhMmg==}
     engines: {node: '>=14.0'}
     dependencies:
       busboy: 1.6.0
     dev: true
 
-  /unplugin-icons@0.16.5:
-    resolution: {integrity: sha512-laCCqMWfng1XZgB9yowGfjBdDhtmz8t8zVnhzRNEMhBNdy26QrVewVmdXk/zsiAQYnEWvIxTjvW1nQXrxdd2+w==}
+  /unplugin-icons@0.16.6:
+    resolution: {integrity: sha512-jL70sAC7twp4hI/MTfm+vyvTRtHqiEIzf3XOjJz7yzhMEEQnk5Ey5YIXRAU03Mc4BF99ITvvnBzfyRZee86OeA==}
     peerDependencies:
       '@svgr/core': '>=7.0.0'
       '@svgx/core': ^1.0.1
@@ -2586,18 +2588,18 @@ packages:
         optional: true
     dependencies:
       '@antfu/install-pkg': 0.1.1
-      '@antfu/utils': 0.7.5
-      '@iconify/utils': 2.1.7
+      '@antfu/utils': 0.7.6
+      '@iconify/utils': 2.1.9
       debug: 4.3.4
       kolorist: 1.8.0
       local-pkg: 0.4.3
-      unplugin: 1.3.2
+      unplugin: 1.4.0
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /unplugin@1.3.2:
-    resolution: {integrity: sha512-Lh7/2SryjXe/IyWqx9K7IKwuKhuOFZEhotiBquOODsv2IVyDkI9lv/XhgfjdXf/xdbv32txmnBNnC/JVTDJlsA==}
+  /unplugin@1.4.0:
+    resolution: {integrity: sha512-5x4eIEL6WgbzqGtF9UV8VEC/ehKptPXDS6L2b0mv4FRMkJxRtjaJfOWDd6a8+kYbqsjklix7yWP0N3SUepjXcg==}
     dependencies:
       acorn: 8.9.0
       chokidar: 3.5.3
@@ -2605,13 +2607,13 @@ packages:
       webpack-virtual-modules: 0.5.0
     dev: true
 
-  /update-browserslist-db@1.0.11(browserslist@4.21.9):
+  /update-browserslist-db@1.0.11(browserslist@4.21.10):
     resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
-      browserslist: 4.21.9
+      browserslist: 4.21.10
       escalade: 3.1.1
       picocolors: 1.0.0
     dev: true
@@ -2636,8 +2638,8 @@ packages:
       which-typed-array: 1.1.11
     dev: true
 
-  /vite@4.4.8:
-    resolution: {integrity: sha512-LONawOUUjxQridNWGQlNizfKH89qPigK36XhMI7COMGztz8KNY0JHim7/xDd71CZwGT4HtSRgI7Hy+RlhG0Gvg==}
+  /vite@4.4.9:
+    resolution: {integrity: sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
     peerDependencies:
@@ -2665,13 +2667,13 @@ packages:
         optional: true
     dependencies:
       esbuild: 0.18.17
-      postcss: 8.4.27
-      rollup: 3.26.0
+      postcss: 8.4.29
+      rollup: 3.28.1
     optionalDependencies:
       fsevents: 2.3.2
     dev: true
 
-  /vitefu@0.2.4(vite@4.4.8):
+  /vitefu@0.2.4(vite@4.4.9):
     resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0
@@ -2679,7 +2681,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.4.8
+      vite: 4.4.9
     dev: true
 
   /webpack-sources@3.2.3:
diff --git a/scripts/generate-blurred-images.sh b/scripts/generate-blurred-images.sh
index f580b4f..d28728d 100755
--- a/scripts/generate-blurred-images.sh
+++ b/scripts/generate-blurred-images.sh
@@ -14,9 +14,14 @@ while IFS= read -r -d '' filepath; do
     max_brightness="65535" # The possible maximum brightness possible from the previous command
     brightness_threshold=$( python -c "print( $max_brightness * 0.5 )"  )
     
-    # Adjust the brightness, make it brighter if dark, otherwise lighten it
-    brightness_boost=$( python -c "print( (1 - ($brightness / $brightness_threshold)) * 50 )" )
+    # Boost the brightness if the image is very dark
+    brightness_boost=$( python -c "print( max( (1 - ($brightness / $brightness_threshold)) * 50 , 0) )" )
     
-    magick convert  -scale 10%   -brightness-contrast ${brightness_boost}x20 -modulate 100,500,100 -gaussian-blur 0x20 -resize 1000%   "$filepath" "$generated_filename" 
-    # magick  "$generated_filename" "./hald-clut.png" -hald-clut "$generated_filename" 
+    # Modify colors with LUT
+    magick convert -brightness-contrast ${brightness_boost}x40 -modulate 100,1000,100    "$filepath" "$generated_filename" 
+    magick  "$generated_filename" "./hald-clut.color.io.png" -hald-clut "$generated_filename" 
+    magick convert -modulate 100,250,100   -scale 10% -gaussian-blur 0x20  -resize 1000% -quality 50   "$generated_filename" "$generated_filename" 
+    
+
+    # magick convert  -scale 10%   -brightness-contrast ${brightness_boost}x25 -modulate 100,500,100  -gaussian-blur 0x20  -resize 1000%   "$filepath" "$generated_filename" 
 done
diff --git a/scripts/hald-clut.color.io.png b/scripts/hald-clut.color.io.png
new file mode 100755
index 0000000..ec4f147
Binary files /dev/null and b/scripts/hald-clut.color.io.png differ
diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs
index 963d8e5..0f5d2a1 100755
--- a/src/lib/Helper.mjs
+++ b/src/lib/Helper.mjs
@@ -78,28 +78,6 @@ export function lerp(start, end, given) {
 	return (1 - given) * start + given * end
 }
 
-/**
- * @param {number} t A number between 0 and 1
- * @param {number | undefined} strength
- */
-export function easeInT(t, strength) {
-	return t ** (strength ?? 2)
-}
-
-/**
- * @param {number} t A number between 0 and 1
- * @param {number | undefined} strength
- */
-export function easeOutT(t, strength) {
-	return 1 - (1 - t ** (strength ?? 2))
-}
-
-// easeOutT(0.5) //?
-// easeOutT(0.99) //?
-// easeOutT(0.2) //?
-// easeOutT(0) //?
-// easeOutT(1) //?
-
 /**
  * Taken from https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser/11381730#11381730
  */
@@ -118,3 +96,8 @@ export function getIsMobile() {
 	})(navigator.userAgent || navigator.vendor || window.opera)
 	return check
 }
+
+/** Get the `generated_<filename>` if blurredThumbnail is not set manually **/
+export function getBlurredPath(path) {
+	return `${path.substring(0, path.lastIndexOf('/'))}/generated_${path.split('/').at(-1)}`
+}
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index e3f500e..9d3ff0c 100755
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,18 +1,19 @@
 <script>
 	import clsx from 'clsx'
 
-	/** @type { 'md'|'lg'}*/
+	/** @type { 'md'|'lg'|'xl'}*/
 	export let size = 'md'
 	/** @type { 'primary'|'outline'|'fancyOutline' }*/
 	export let type = 'primary'
 
 	$: classes = clsx(
-		'animate  rounded font-bold text-sm hover:scale-[1.03] active:scale-95',
+		'animate  rounded text-sm font-bold hover:scale-[1.03] active:scale-95',
 		'primary' == type && 'bg-slate-200 text-black',
-		'outline' == type && 'outline-2 outline outline-slate-200 text-white bg-transparent',
+		'outline' == type && 'bg-transparent text-white outline outline-2 outline-slate-200',
 		'fancyOutline' == type && 'fancy',
-		'md' == size && 'px-4 py-2 min-w-[5rem]',
-		'lg' == size && 'px-6 py-2.5 min-w-[5rem] text-lg',
+		'md' == size && 'min-w-[5rem] px-4 py-2',
+		'lg' == size && 'min-w-[5rem] px-6 py-2.5 ',
+		'xl' == size && 'min-w-[5rem] px-8 py-4 ',
 		$$restProps.class
 	)
 </script>
@@ -21,15 +22,15 @@
 	<div class="relative">
 		<button class={classes} on:click><slot>NO LABEL PROVIDED</slot></button>
 		<span
-			class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-cyan-500/90 blur-xl scale-y-75"
+			class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-cyan-500/90 px-4 py-2 blur-xl"
 			style="--easing: x; --duration: 8s;"
 		/>
 		<span
-			class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-secondary/90 blur-xl scale-y-75"
+			class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-secondary/90 px-4 py-2 blur-xl"
 			style="--easing: y; --duration: 8s;"
 		/>
 		<span
-			class="-z-10 absolute fancy-bg inset-0 w-[110%] h-full px-4 py-2 min-w-[5rem] bg-purple-500/90 blur-xl scale-y-75"
+			class="fancy-bg absolute inset-0 -z-10 h-full w-[110%] min-w-[5rem] scale-y-75 bg-purple-500/90 px-4 py-2 blur-xl"
 			style="--easing: z;--duration: 8s;"
 		/>
 	</div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 08d4de4..447a1d5 100755
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -15,13 +15,13 @@
 </script>
 
 <footer
-	class="bg-black/50 mt-16 md:mt-24 lg:mt-32 border-t border-blue-400/50 relative flex items-center justify-center max-w-screen"
+	class="max-w-screen relative mt-16 flex items-center justify-center border-t border-blue-400/50 bg-black/50 md:mt-24 lg:mt-32"
 >
 	<div
-		class="flex flex-wrap gap-12 justify-between px-8 py-14 max-w-5xl text-slate-300 items-start"
+		class="flex max-w-5xl flex-wrap items-start justify-between gap-12 px-8 py-14 text-slate-300"
 	>
 		<div class="flex flex-col gap-4 rounded-lg">
-			<div class="text-slate-400 text-sm uppercase font-bold">Developers</div>
+			<div class="pretitle">Developers</div>
 			<ul class="flex flex-col gap-3 font-medium">
 				<li>
 					<a href="https://github.com/vaxerski">
@@ -45,8 +45,8 @@
 		</div>
 
 		<div class="flex flex-col gap-4">
-			<div class="text-slate-400 font-bold text-sm uppercase">Links</div>
-			<ul class="flex flex-col font-medium gap-3">
+			<div class="pretitle">Links</div>
+			<ul class="flex flex-col gap-3 font-medium">
 				<li><a href="https://wiki.hyprland.org/">Wiki</a></li>
 				<li>
 					<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
@@ -56,7 +56,7 @@
 		</div>
 
 		<div class="flex flex-col gap-4">
-			<div class="text-slate-400 text-sm uppercase font-bold" font-bold>Socials</div>
+			<div class="pretitle" font-bold>Socials</div>
 			<ul class="flex gap-6">
 				<li class="">
 					<a
@@ -72,7 +72,7 @@
 			</ul>
 		</div>
 
-		<div class="flex gap-4 flex-wrap text-sm text-slate-400 font-medium w-full">
+		<div class="flex w-full flex-wrap gap-4 text-sm font-medium text-slate-400">
 			<div>Hyprland is licensed under the BSD 3-Clause "New" or "Revised" License.</div>
 			<div>© Hyprland Development {new Date().getFullYear()}.</div>
 			<div>Doki doki waku waku.</div>
@@ -83,6 +83,10 @@
 </footer>
 
 <style lang="postcss">
+	.pretitle {
+		@apply text-sm font-bold uppercase text-slate-400;
+	}
+
 	a:hover {
 		filter: brightness(1.5);
 	}
diff --git a/src/lib/components/GitTile.svelte b/src/lib/components/GitTile.svelte
index 6f6f49c..05db13b 100755
--- a/src/lib/components/GitTile.svelte
+++ b/src/lib/components/GitTile.svelte
@@ -1,7 +1,8 @@
 <script>
-	import { easeOutT, lerp } from '$lib/Helper.mjs'
+	import { lerp } from '$lib/Helper.mjs'
 	import { createNoise2D } from 'simplex-noise'
 	import { onMount } from 'svelte'
+	import { expoIn } from 'svelte/easing'
 
 	/** Lifespan in milliseconds */
 	export let lifeSpan = 1500
@@ -36,8 +37,8 @@
 		async function animate() {
 			const deltaTime = (timestamp - Date.now()) / 17 // One frame should last roughly 17ms for 60fps
 
-			x += noiseX(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
-			y += noiseY(i, 1) * speed * deltaTime * easeOutT(lifePercentage)
+			x += noiseX(i, 1) * speed * deltaTime * expoIn(lifePercentage)
+			y += noiseY(i, 1) * speed * deltaTime * expoIn(lifePercentage)
 
 			i += wobbliness * deltaTime
 
@@ -54,7 +55,7 @@
 </script>
 
 <div
-	class="absolute w-6 h-6 rounded-md"
+	class="absolute h-6 w-6 rounded-md"
 	style:translate={`${x}px ${y}px`}
 	style:background={color}
 	style:opacity={(lifeRemaining / lifeSpan - (1 - maxOpacity)) ** 5}
diff --git a/src/routes/FameRicePreview.svelte b/src/routes/FameRicePreview.svelte
index 68e3264..91f9e50 100755
--- a/src/routes/FameRicePreview.svelte
+++ b/src/routes/FameRicePreview.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { animateIn } from '$lib/Helper.mjs'
+	import { animateIn, getBlurredPath } from '$lib/Helper.mjs'
 
 	/** @type {string}
 	 * The path to the image. Usually the file within `static`, but can also be an URL
@@ -12,13 +12,20 @@
 </script>
 
 <div class="rice {containerClass} group">
-	<div class="w-full h-full" use:animateIn={{ slide: 20, duration: 800 }}>
+	<div class="h-full w-full" use:animateIn={{ slide: 20, duration: 800 }}>
 		<img
 			src={image}
 			alt="Rice desktop"
-			class="max-sm:[xmask-image:none] w-full nice-hover object-cover object-top rounded-xl overflow-hidden shadow-2xl hover:scale-[1.01] {imageClass}"
+			class="nice-hover w-full rounded-xl object-cover object-top shadow-2xl hover:scale-[1.01] max-sm:[xmask-image:none] {imageClass}"
 		/>
-		<img src={image} alt="Rice desktop" aria-hidden="true" class="rice-bg" />
+		<div class="rice-blurred">
+			<img
+				src={getBlurredPath(image)}
+				alt="Rice desktop"
+				aria-hidden="true"
+				class="h-full w-full"
+			/>
+		</div>
 	</div>
 </div>
 
@@ -29,11 +36,24 @@
 	.nice-hover {
 		transition: all 540ms cubic-bezier(0.1, -0.81, 0.31, 2);
 	}
-	.rice-bg {
-		@apply pointer-events-none absolute -bottom-10 left-3 -z-10   h-full w-[calc(100%-24px)] rounded-3xl opacity-50 blur-2xl brightness-150 saturate-[5] transition-[filter] duration-500 max-sm:hidden;
+	.rice-blurred {
+		translate: -50% 30%;
+		position: absolute;
+		bottom: -40px;
+		left: 50%;
+		pointer-events: none;
+		width: calc(100% + 120px);
+		height: calc(150% + 120px);
+		opacity: 0.9;
+		/* filter: brightness(2.5); */
+		z-index: -10;
+		background-color: red;
+		mask-image: radial-gradient(50% 50% at 50% 50%, black, transparent);
+
+		@apply -z-10 transition-[filter] duration-500;
 
 		.rice:hover & {
-			@apply brightness-200;
+			filter: brightness(4);
 		}
 	}
 </style>
diff --git a/src/routes/FeatureCard.svelte b/src/routes/FeatureCard.svelte
index 70d3ca2..942d58c 100755
--- a/src/routes/FeatureCard.svelte
+++ b/src/routes/FeatureCard.svelte
@@ -13,15 +13,19 @@
 	let container
 	let isMobile = false
 
-	const fillX = spring(999, { damping: 0.9, stiffness: 0.021, precision: 0.3 })
-	const fillY = spring(999, { damping: 0.9, stiffness: 0.021, precision: 0.3 })
-	const borderX = spring(999, { damping: 0.9, stiffness: 0.03, precision: 0.3 })
-	const borderY = spring(999, { damping: 0.9, stiffness: 0.03, precision: 0.3 })
+	const damping = 0.2
+
+	const fillX = spring(999, { damping, stiffness: 0.021, precision: 0.3 })
+	const fillY = spring(999, { damping, stiffness: 0.021, precision: 0.3 })
+	const borderX = spring(999, { damping, stiffness: 0.03, precision: 0.3 })
+	const borderY = spring(999, { damping, stiffness: 0.03, precision: 0.3 })
 
 	const bounceBack = 2
 	const soft = 0.8
 
 	let isMouseOver = false
+	/** Has the mouse entered and not left*/
+	let hasMouseEntered = false
 
 	$: {
 		if (container && $mouseX !== undefined) {
@@ -45,10 +49,16 @@
 		$borderY = normY
 
 		if (!isMouseOver) {
-			/* Put it in the corners again. As it is scaled by half, 
-			coordinates should be multiplied by two. But it looks better when they peek in more */
-			fillX.set(width * 1.5, { soft: 4 })
-			fillY.set(height * 1.5, { soft: 4 })
+			hasMouseEntered = false
+
+			return
+		}
+
+		// Instantly update the blob positon without easing when the mouse has just entered
+		if (hasMouseEntered === false) {
+			fillX.set(normX, { hard: true })
+			fillY.set(normY, { hard: true })
+			hasMouseEntered = true
 			return
 		}
 
@@ -63,7 +73,7 @@
 </script>
 
 <div
-	class={clsx('card min-h-[20rem] group', $$restProps.class)}
+	class={clsx('card group min-h-[20rem]', $$restProps.class)}
 	style:--x={$fillX}
 	style:--y={$fillY}
 	style:--borderX={$borderX}
@@ -78,8 +88,8 @@
 	class:purpleGradient={color === 'purple'}
 	role="contentinfo"
 >
-	<div class="p-8 sm:p-12 z-10 w-full h-full flex flex-col justify-end">
-		<h1 class="text-5xl font-bold mb-6 text-white">{title}</h1>
+	<div class="z-10 flex h-full w-full flex-col justify-end p-8 sm:p-12">
+		<h1 class="mb-6 text-5xl font-bold text-white">{title}</h1>
 
 		<slot>Nothing in the slot here</slot>
 	</div>
@@ -96,7 +106,7 @@
 	}
 
 	.gradient_black {
-		@apply absolute inset-[1px];
+		@apply absolute inset-[2px];
 		z-index: 2;
 		border-radius: inherit;
 		contain: strict;
@@ -109,6 +119,7 @@
 			);
 	}
 
+	/* This gradient is visible on the borders when hovering */
 	.border-gradient {
 		position: absolute;
 		z-index: 1;
@@ -117,17 +128,17 @@
 		height: 100%;
 		opacity: 0%;
 		transform-origin: top left;
-		transition: opacity 140ms ease-in-out;
+		transition: opacity 120ms ease-in-out;
 		left: 0%;
 		top: 0%;
 		content: '';
 		pointer-events: none;
-		filter: brightness(1.2) saturate(2);
+		filter: brightness(1.5) saturate(4);
 		contain: strict;
 		background: radial-gradient(
-			320px circle at calc(var(--borderX) * 1px) calc(var(--borderY) * 1px),
+			620px circle at calc(var(--borderX) * 1px) calc(var(--borderY) * 1px),
 			color-mix(in srgb, var(--color1, theme(colors.cyan.500)), transparent 70%),
-			color-mix(in srgb, var(--color2, theme(colors.blue.500)), transparent 90%)
+			transparent
 		);
 
 		.isHoverCards & {
@@ -141,12 +152,12 @@
 		border-radius: inherit;
 		height: calc(100% - 2px);
 		border-radius: inherit;
-		margin: 1px;
+		margin: 0px;
 		z-index: 20;
 		mix-blend-mode: hard-light;
 		contain: strict;
 
-		/* Gradient */
+		/* Gradient blob */
 		&::before {
 			position: absolute;
 			z-index: 20;
diff --git a/src/routes/Firefly.svelte b/src/routes/Firefly.svelte
index 741545c..7e8dee9 100755
--- a/src/routes/Firefly.svelte
+++ b/src/routes/Firefly.svelte
@@ -7,15 +7,16 @@
 
 	// Idea: Boid behavior
 
-	const maxSize = 18
-	const size = Math.max(Math.random() * maxSize, 6)
+	const maxSize = 24
+	const minSize = 7
+	const size = Math.max(Math.random() * maxSize, minSize)
 	/** How much the fireflies can vanish into the edges of the screen. Include their invisible padding for mouse detection. */
 	const edgeClip = maxSize * 8
 	const noiseY = createNoise2D()
 	const noiseX = createNoise2D()
 	const SPEED = Math.random() * 5 + 2
 
-	let classes = clsx(Math.random() > 0.5 ? 'bg-primary/70' : 'bg-blue-500/70')
+	let classes = clsx(size > maxSize / 2 ? 'bg-primary/70' : 'bg-blue-500/70')
 
 	let x = 0
 	let y = 0
@@ -67,7 +68,7 @@
 </script>
 
 <div
-	class="absolute hidden max-sm:[contain:strict] md:block p-24 top-0 left-0 firefly pointer-events-auto opacity-50 hover:opacity-100 transition-opacity z-0"
+	class="firefly pointer-events-auto absolute left-0 top-0 z-0 hidden p-24 opacity-50 transition-opacity hover:opacity-100 max-sm:[contain:strict] md:block"
 	style:--x={x + 'px'}
 	style:--y={y + 'px'}
 	style="--size:{size}px; --fadeDelay: {Math.random() * 6 - 3}s"
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
index 68f245e..205471b 100755
--- a/src/routes/Hero.svelte
+++ b/src/routes/Hero.svelte
@@ -3,7 +3,7 @@
 	import Button from '$lib/components/Button.svelte'
 	import Logo from '$lib/images/logos/hyprland-color.svg'
 	import { onMount } from 'svelte'
-	import Firefly from './Firefly.svelte'
+	// import Firefly from './Firefly.svelte'
 	import { inview } from 'svelte-inview'
 
 	let isVisible = true
@@ -15,32 +15,32 @@
 </script>
 
 <section
-	class="w-full relative flex flex-col items-center justify-center min-h-[100svh] overflow-x-hidden h-max"
+	class="relative flex h-max min-h-[100svh] w-full flex-col items-center justify-center overflow-x-hidden"
 	use:inview
 	on:inview_change={({ detail: { inView } }) => {
 		isVisible = inView
 	}}
 >
 	<!-- Hero text and logo -->
-	<div class="flex h-screen min-h-max justify-center flex-col items-center z-10">
-		<div class="text-center -mt-20 items-center flex flex-col gap-6 mb-8">
-			<img src={Logo} alt="Hyprland Logo" class="h-36 mb-4 ani-in fill-mode-backwards" />
-			<div class="relative ani-in fill-mode-backwards [animation-delay:584ms]">
+	<div class="x z-10 flex h-screen min-h-max flex-col items-center justify-center">
+		<div class="-mt-20 mb-8 flex flex-col items-center gap-6 text-center">
+			<img src={Logo} alt="Hyprland Logo" class="ani-in mb-6 h-48 fill-mode-backwards" />
+			<div class="ani-in relative fill-mode-backwards [animation-delay:384ms]">
 				<h1
-					class="text-5xl md:text-7xl p-2 font-bold bg-clip-text text-transparent font-london hyprgradient tracking-wider md:tracking-widest"
+					class="hyprgradient bg-clip-text p-2 font-london text-6xl font-bold tracking-wider text-transparent md:text-7xl md:tracking-widest"
 				>
 					Hyprland
 				</h1>
 			</div>
 		</div>
 		<h2
-			class="ani-in text-center mb-10 [animation-delay:944ms] fill-mode-backwards font-medium text-xl text-blue-200/60"
+			class="ani-in mb-10 text-center text-2xl font-medium leading-9 text-blue-200/80 fill-mode-backwards [animation-delay:944ms]"
 		>
-			Dynamic tiling Wayland compositor<br />with the looks.
+			Dynamic tiling Wayland compositor<br />with the looks
 		</h2>
 
 		<div
-			class="flex gap-6 items-center animate-in fade-in-0 slide-in-from-bottom-4 [animation-delay:1390ms] duration-500 fill-mode-backwards"
+			class="flex items-center gap-6 duration-500 animate-in fade-in-0 slide-in-from-bottom-4 fill-mode-backwards [animation-delay:1390ms]"
 		>
 			<a href="https://wiki.hyprland.org/Getting-Started/Installation/">
 				<Button size="lg">Install</Button>
@@ -52,31 +52,31 @@
 	</div>
 
 	<!-- Fireflies -->
-	{#if isVisible}
+	<!-- {#if isVisible}
 		<div
-			class="absolute animate-in fade-in-0 [animation-delay:900ms] [animation-duration:4500ms] fill-mode-backwards pointer-events-none max-w-screen inset-0 overflow-hidden -z-10"
+			class="max-w-screen pointer-events-none absolute inset-0 -z-10 overflow-hidden animate-in fade-in-0 fill-mode-backwards [animation-delay:900ms] [animation-duration:4500ms]"
 		>
-			<div class="bg-gradient-to-t from-black z-10 w-full h-52 absolute bottom-0" />
+			<div class="absolute bottom-0 z-10 h-52 w-full bg-gradient-to-t from-black" />
 
 			{#each { length: 40 } as _}
 				<Firefly />
 			{/each}
 		</div>
-	{/if}
+	{/if} -->
 
 	<!-- Gradient background -->
 	<div
-		class="absolute -z-50 max-w-screen w-screen min-h-screen h-full right-0 top-0 overflow-hidden"
+		class="max-w-screen absolute right-0 top-0 -z-50 h-full min-h-screen w-screen overflow-hidden"
 	>
-		<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+		<div class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2">
 			<div
-				class="bg-gradient-radial via-emerald-300/0 to-emerald-200/0 from-sky-400/20 bg"
+				class="bg bg-gradient-radial from-sky-400/20 via-emerald-300/0 to-emerald-200/0"
 				style="--seed: 20;"
 			/>
 		</div>
-		<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+		<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
 			<div
-				class="bg-gradient-radial to-cyan-400/0 from-blue-500/10 bg"
+				class="bg bg-gradient-radial from-blue-500/10 to-cyan-400/0"
 				style="--offset: -3s; --seed: 4; --duration:102s"
 			/>
 		</div>
@@ -87,41 +87,8 @@
 	.bg {
 		width: calc(120vw + 500px);
 		height: calc(120vh + 500px);
-
-		animation: move var(--duration, 50s) ease-in-out var(--offset, 0ms) infinite alternate both;
 	}
 
-	@keyframes move {
-		0% {
-			transform: translate3d(
-				calc(10vw * sin(var(--seed, 1))),
-				calc(20vh * sin(var(--seed, 1))),
-				0px
-			);
-		}
-		30% {
-			transform: translate3d(
-				calc(-20vw * sin(var(--seed, 1))),
-				calc(12vh * sin(var(--seed, 1))),
-				0px
-			);
-		}
-		70% {
-			transform: translate3d(
-				calc(-230px * sin(var(--seed, 1))),
-				calc(-160px * sin(var(--seed, 1))),
-				0px
-			);
-			opacity: sin(var(--seed, 1));
-		}
-		to {
-			transform: translate3d(
-				calc(50px * sin(var(--seed, 1))),
-				calc(200px * sin(var(--seed, 1))),
-				0px
-			);
-		}
-	}
 	@keyframes slidein {
 		from {
 			transform: translateX(0%);
@@ -133,6 +100,7 @@
 	}
 
 	.ani-in {
-		@apply animate-in fade-in-0 slide-in-from-bottom-4 ease-in-out   [animation-duration:800ms];
+		@apply ease-out animate-in fade-in-0 slide-in-from-bottom-6;
+		animation-duration: 1000ms;
 	}
 </style>
diff --git a/src/routes/InstallSlice.svelte b/src/routes/InstallSlice.svelte
index 47d8179..b49919a 100755
--- a/src/routes/InstallSlice.svelte
+++ b/src/routes/InstallSlice.svelte
@@ -24,7 +24,7 @@
 					AUR git version: <a
 						class="hover:underline hover:text-white"
 						target="_blank"
-						href="https://aur.aachlinux.org/packages/hyprland-git/">hyprland-git</a
+						href="https://aur.archlinux.org/packages/hyprland-git/">hyprland-git</a
 					>
 				</div></InstallButton
 			>
diff --git a/src/routes/Navbar.svelte b/src/routes/Navbar.svelte
index 44487a8..2a8647f 100755
--- a/src/routes/Navbar.svelte
+++ b/src/routes/Navbar.svelte
@@ -18,19 +18,19 @@
 </script>
 
 <header
-	class="flex items-center z-50 justify-between fixed top-0 inset-x-0 rounded-full animate-in slide-in-from-top-1 [animation-delay:0ms] lg:[animation-delay:1250ms] fade-in-0 duration-1000 fill-mode-backwards pt-2 px-6"
+	class="fixed inset-x-0 top-0 z-50 flex items-center justify-between rounded-full px-6 pt-2 duration-1000 animate-in fade-in-0 slide-in-from-top-1 fill-mode-backwards [animation-delay:0ms] lg:[animation-delay:1250ms]"
 >
 	<a
 		href="/"
-		class="flex gap-4 font-london tracking-wider lg:px-4 py-1 text-sm rounded-full lg:bg-black/10 items-center lg:backdrop-blur font-bold text-white"
+		class="flex items-center gap-4 rounded-full py-1 font-london text-sm font-bold tracking-wider text-white lg:bg-black/50 lg:px-4 lg:py-2 lg:backdrop-blur"
 	>
 		<img src={logo} alt="Hyprland Logo" class="w-6" /><span
-			class="lg:block lg:mt-1 tracking-widest text-xl hidden">Hyprland</span
+			class="hidden text-xl tracking-widest lg:mt-1 lg:block">Hyprland</span
 		></a
 	>
 
 	<button
-		class="lg:hidden rounded-full p-2 bg-black/10 z-50 md:backdrop-blur"
+		class="z-50 rounded-full bg-black/10 p-2 md:backdrop-blur lg:hidden"
 		on:click={toggleExpanded}
 	>
 		{#if isExpanded}
@@ -42,7 +42,7 @@
 
 	<nav class="nav" class:!flex={isExpanded}>
 		<ul
-			class="flex lg:flex-row flex-col gap-5 rounded-full items-center lg:max-h-full lg:h-full hover:[&_li]:text-cyan-300"
+			class="flex flex-col items-center gap-5 rounded-full lg:h-full lg:max-h-full lg:flex-row hover:[&_li]:text-cyan-300"
 		>
 			<li>
 				<a href="https://wiki.hyprland.org/Getting-Started/Master-Tutorial/">Get started</a>
@@ -55,21 +55,21 @@
 			</li>
 		</ul>
 		<ul
-			class="lg:border-purple-400 lg:border lg:mr-2 lg:ml-4 lg:rounded-full flex items-center flex-row gap-3 px-4"
+			class="flex flex-row items-center gap-3 px-4 lg:ml-4 lg:mr-2 lg:rounded-full lg:border lg:border-purple-400"
 		>
 			<li>
 				<a href="https://discord.com/invite/hQ9XvMUjjr" class="social-icon">
-					<DiscordIcon class="w-full h-full" />
+					<DiscordIcon class="h-full w-full" />
 				</a>
 			</li>
 			<li>
 				<a href="https://github.com/hyprwm/Hyprland" class="social-icon">
-					<GithubIcon class="w-full h-full" />
+					<GithubIcon class="h-full w-full" />
 				</a>
 			</li>
 		</ul>
 		<a
-			class="bg-primary rounded-full px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
+			class="rounded-full bg-primary px-4 py-1 uppercase tracking-wide text-black hover:bg-cyan-200"
 			href="https://wiki.hyprland.org/Getting-Started/Installation/">Install</a
 		>
 	</nav>
diff --git a/src/routes/PreviewRiceSlice.svelte b/src/routes/PreviewRiceSlice.svelte
index aa7df96..c8fc7b0 100755
--- a/src/routes/PreviewRiceSlice.svelte
+++ b/src/routes/PreviewRiceSlice.svelte
@@ -17,9 +17,10 @@
 	let isMuted = true
 	let isPaused = false
 
-	function toggleMute() {
-		isMuted = !isMuted
-	}
+	// Video has no sound anymore
+	// function toggleMute() {
+	// 	isMuted = !isMuted
+	// }
 	function togglePlay() {
 		videoElement.paused ? videoElement.play() : videoElement.pause()
 		isPaused = videoElement.paused
@@ -39,15 +40,13 @@
 </script>
 
 <section
-	class="max-w-[1400px] px-1 relative -mb-4 lg:px-8 w-full animate-in [animation-delay:1700ms] fade-in-0 fill-mode-backwards [animation-duration:2000ms] slide-in-from-bottom-10 {$$restProps.class}"
+	class="relative -mb-4 -mt-8 w-full max-w-[1400px] px-1 animate-in fade-in-0 slide-in-from-bottom-10 fill-mode-backwards [animation-delay:1700ms] [animation-duration:2000ms] lg:px-8 {$$restProps.class}"
+	class:isVisible
 >
 	<div
-		class={clsx(
-			'rounded-xl group  relative  border-sky-400 border-2  transition-all [transition-duration:1460ms] mx-3 shadow-2xl shadow-cyan-400/40',
-			!isVisible && 'opacity-20 scale-90'
-		)}
+		class="rice-video"
 		role="banner"
-		use:inview={{ threshold: 0.8 }}
+		use:inview={{ threshold: 0.5 }}
 		on:inview_enter={() => {
 			isVisible = true
 			videoElement.play()
@@ -75,12 +74,12 @@
 		/>
 		<div
 			class={clsx(
-				'opacity-0 transition-opacity z-20  ',
+				'z-20 opacity-0 transition-opacity  ',
 				isShowingControls ? 'opacity-100' : 'pointer-events-none'
 			)}
 		>
-			<button
-				class="absolute p-2 h-10 bg-black/5 rounded-full w-10 bottom-4 right-4 opacity-70 hover:opacity-100"
+			<!-- <button
+				class="absolute bottom-4 right-4 h-10 w-10 rounded-full bg-black/5 p-2 opacity-70 hover:opacity-100"
 				on:click|stopPropagation={toggleMute}
 			>
 				{#if isMuted}
@@ -88,10 +87,10 @@
 				{:else}
 					<AudioIcon class="h-full w-full" />
 				{/if}
-			</button>
+			</button> -->
 			{#if isPaused}
 				<div
-					class="absolute h-14 rounded-full -translate-x-1/2 -translate-y-1/2 w-14 top-1/2 left-1/2 opacity-80 hover:opacity-100 pointer-events-none"
+					class="pointer-events-none absolute left-1/2 top-1/2 h-14 w-14 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-80 hover:opacity-100"
 				>
 					<PauseIcon class="h-full w-full" />
 				</div>
@@ -99,18 +98,57 @@
 		</div>
 
 		<a
-			class="px-3 pt-2 block absolute -bottom-7 left-0 max-w-max text-sm text-slate-100/70 hover:underline"
+			class="absolute -bottom-7 left-0 block max-w-max px-3 pt-2 text-sm font-medium text-slate-100/70 hover:underline"
 			href="https://github.com/end-4/">Setup by @end_4</a
 		>
 	</div>
 
-	<div class="preview-rice-bg overflow-x-hidden" aria="hidden" />
+	<div class="preview-rice-bg" aria="hidden" />
 </section>
 
 <style lang="postcss">
+	.rice-video {
+		@apply mx-3  rounded-xl      transition-all;
+		transition-duration: 1460ms;
+		position: relative;
+		box-shadow: 0px 0px 44px theme(colors.primary / 80%);
+		border: solid 2px theme(colors.sky.400);
+		scale: 0.9;
+		background: theme(colors.cyan.300 / 70%);
+
+		& video {
+			@apply transition-opacity;
+			transition-duration: 1460ms;
+			opacity: 0.3;
+		}
+
+		.isVisible & {
+			scale: 1;
+			background: transparent;
+			box-shadow: 0px 0px 24px theme(colors.primary / 50%);
+
+			& video {
+				opacity: 1;
+			}
+		}
+	}
+
 	.preview-rice-bg {
-		@apply absolute inset-0  -top-40 -z-10  w-full opacity-50;
-		/* background-color: red; */
-		background-image: radial-gradient(closest-side, theme(colors.sky.500), transparent);
+		position: absolute;
+		z-index: -10;
+		opacity: 0.4;
+		min-width: 2800px;
+		overflow-x: hidden;
+		top: -160px;
+		left: 50%;
+		translate: -50% 0px;
+		width: 1100px;
+		height: 200%;
+
+		background-image: radial-gradient(
+			closest-side,
+			theme(colors.sky.500),
+			theme(colors.indigo.500 / 0%)
+		);
 	}
 </style>
diff --git a/src/routes/WallOfFameSlice.svelte b/src/routes/WallOfFameSlice.svelte
index 8571329..a26aed2 100755
--- a/src/routes/WallOfFameSlice.svelte
+++ b/src/routes/WallOfFameSlice.svelte
@@ -6,40 +6,38 @@
 </script>
 
 <section
-	class="w-full relative flex flex-col items-center"
+	class="relative flex w-full flex-col items-center"
 	use:animateIn={{ fade: 0, slide: 24, duration: 3000, threshold: 0.1 }}
 >
-	<div class="px-4 -mb-40 z-20">
+	<div class="z-20 -mb-40 px-4">
 		<Title>
 			<span slot="pre"> Memorials of the ricing legends </span>
 			<span slot="title">Wall of Fame</span>
 		</Title>
 	</div>
 
+	<div class="atmosphere" />
+
 	<div
-		class="w-full -mt-24 max-w-[1100px] flex relative flex-col gap-16 lg:gap-24 items-center justify-end overflow-hidden md:px-16 [perspective:100px]"
+		class="relative -mt-24 flex w-full max-w-[1100px] flex-col items-center justify-end gap-16 overflow-hidden [perspective:100px] md:px-16 lg:gap-24"
 		use:animateIn={{ slide: 24, fade: 0.5, duration: 800 }}
 	>
 		<a class="absolute bottom-24 left-1/2 z-20 -translate-x-1/2" href="/wall_of_fame">
 			<Button size="lg" type="fancyOutline">Go to Wall of Fame</Button>
 		</a>
 
-		<div
-			class="w-full [translate:0px_40px_-10px] md:[translate:0px_0px_-40px] absolute top-0 inset-0 -z-30 atmosphere"
-		/>
-
 		<FameRicePreview
-			image="/imgs/ricingcomp1/lauroro.jpg"
+			image="/imgs/ricing_competitions/1/lauroro.webp"
 			containerClass="[translate:0px_50px_-100px] -mb-[30%] hover:[translate:0px_0px_-98px] transition-all duration-500"
 			imageClass="[mask-image:linear-gradient(black,black_45%,transparent_65%)] opacity-50 hover:opacity-60"
 		/>
 		<FameRicePreview
-			image="/imgs/ricingcomp1/amadeus.png"
+			image="/imgs/ricing_competitions/1/amadeus.webp"
 			containerClass="[translate:0px_50px_-40px] hover:[translate:0px_0px_-38px]  -mb-[30%] duration-500 transition-all group"
 			imageClass="md:[mask-image:linear-gradient(black,black_50%,transparent_75%)] [mask-image:linear-gradient(black,black_10%,transparent_75%)] opacity-80 group-hover:opacity-100 transition-all duration-500"
 		/>
 		<FameRicePreview
-			image="/imgs/ricingcomp1/flicko.png"
+			image="/imgs/ricing_competitions/1/flicko.webp"
 			imageClass="!rounded-none !rounded-t-xl [mask-image:linear-gradient(black,black_50%,transparent)] rounded-t-xl   h-[200px] sm:h-[250px] lg:h-[500px]"
 		/>
 	</div>
@@ -48,8 +46,17 @@
 </section>
 
 <style lang="postcss">
+	/* The blue gradient in the background */
 	.atmosphere {
-		background: radial-gradient(closest-side, theme(colors.blue.500), transparent);
+		position: absolute;
+		z-index: -30;
+		bottom: 0;
+		left: 50%;
+		translate: -50% 0px;
+		height: 100vh;
+		width: 200vw;
+		background: radial-gradient(closest-side, theme(colors.blue.500 / 30%), transparent),
+			radial-gradient(15% 20%, theme(colors.cyan.500 / 70%), transparent);
 	}
 
 	.glow {
diff --git a/src/routes/styles.css b/src/routes/styles.css
index fc42b4c..f3579a0 100755
--- a/src/routes/styles.css
+++ b/src/routes/styles.css
@@ -15,7 +15,7 @@ body {
 }
 
 .hyprgradient {
-	background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #00a1f8);
+	background-image: linear-gradient(to bottom right, #00e6cf, #00c4e3, #0081c6);
 }
 
 ::selection {
diff --git a/src/routes/wall_of_fame/+page.svelte b/src/routes/wall_of_fame/+page.svelte
index 66ccf56..f462fc8 100755
--- a/src/routes/wall_of_fame/+page.svelte
+++ b/src/routes/wall_of_fame/+page.svelte
@@ -2,10 +2,11 @@
 	import Title from '$lib/components/Title.svelte'
 	import Contest from './Contest.svelte'
 	import FamedRice from './FamedRice.svelte'
+	import colors from 'tailwindcss/colors'
 </script>
 
-<section class="min-h-screen flex flex-col gap-14 items-center justify-center p-8 overflow-hidden">
-	<div class="h-[50vh] min-h-min flex flex-col items-center justify-center">
+<section class="flex min-h-screen flex-col items-center justify-center gap-14 overflow-hidden">
+	<div class="flex h-[50vh] min-h-min flex-col items-center justify-center">
 		<Title>
 			<h1 slot="title">Wall of fame</h1>
 			<div slot="subtitle">
@@ -14,7 +15,7 @@
 		</Title>
 	</div>
 
-	<Contest name="Summer" number={2}>
+	<Contest name="Summer" number={2} date="May 2023" --color="orange">
 		<FamedRice
 			name="Novel Nock"
 			creator="end_4"
@@ -41,7 +42,7 @@
 		/>
 	</Contest>
 
-	<Contest name="Winter" number={1}>
+	<Contest name="Winter" number={1} date="December 2022" --color={colors.cyan[500]}>
 		<FamedRice
 			name="Unnamed"
 			creator="Flafy"
diff --git a/src/routes/wall_of_fame/Contest.svelte b/src/routes/wall_of_fame/Contest.svelte
index b002b77..582e3f6 100755
--- a/src/routes/wall_of_fame/Contest.svelte
+++ b/src/routes/wall_of_fame/Contest.svelte
@@ -1,18 +1,46 @@
 <script>
+	import { inview } from 'svelte-inview'
+
 	/** @type {string} */
 	export let name
 	/** @type {number} */
 	export let number
+	/** @type {string} */
+	export let date
+
+	/** Used to show the background gradient. Show if user scrolls, but do not disable when the user scrolls past from the top.  */
+	let enabled = false
+
+	function setEnabled({ detail }) {
+		console.log({ detail })
+		const { inView, scrollDirection } = detail
+		const isScrollingUp = scrollDirection.vertical === 'up'
+
+		if (!inView && !isScrollingUp) {
+			enabled = false
+			return
+		}
+		if (inView) {
+			enabled = true
+		}
+	}
 </script>
 
-<section class="flex flex-col mt-24">
-	<div class="relative mb-24">
-		<div class="mix-blend-color-dodge p-6 flex items-center flex-col">
-			<div class="text-2xl font-bold text-slate-300/80">Contest #{number}</div>
-			<h2 class="text-9xl text-slate-200/80 text-center font-bold">{name}</h2>
+<section class="relative flex flex-col py-24">
+	<div class="relative py-56">
+		<div
+			class="flex flex-col items-center p-6 mix-blend-color-dodge"
+			use:inview={{ threshold: 0.25 }}
+			on:inview_change={setEnabled}
+		>
+			<div class="text-2xl font-bold text-neutral-300/80">Contest #{number}</div>
+			<h2 class="text-center text-9xl font-bold text-neutral-200/80">{name}</h2>
+			<h2 class="mt-2 text-center text-xl font-bold text-slate-200/80">{date}</h2>
 		</div>
 
-		<div class="background" aria-hidden="true"></div>
+		<div class="mask" class:enabled>
+			<div class="background" aria-hidden="true"></div>
+		</div>
 	</div>
 
 	<div class="flex flex-col gap-40">
@@ -21,30 +49,49 @@
 </section>
 
 <style lang="postcss">
-	.background {
+	.mask {
+		overflow: hidden;
+		top: 0px;
+		left: 50%;
+		width: 400%;
+		translate: -50% 0px;
+		transform-origin: center;
+		height: 250%;
 		position: absolute;
-		top: 150px;
+		pointer-events: none;
+		z-index: -10;
+		transform-origin: top;
+	}
+	.background {
+		/* scale: 0.8 0.8; */
+		--c1: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 10%);
+		--c2: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 15%);
+		--c3: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 20%);
+		--c4: color-mix(in hsl shorter hue, var(--color), hsl(0, 100%, 0%) 30%);
+
+		position: absolute;
+		top: 500px;
 		left: 50%;
 		translate: -50% -50%;
-		width: 100vw;
+		width: 100%;
 		height: 1000px;
 		z-index: -10;
-		background: radial-gradient(
-				140px 100px at 50% 45%,
-				var(--color, theme(colors.cyan.500)),
-				transparent
-			),
-			radial-gradient(
-				145px 110px at 50% 45%,
-				var(--color, theme(colors.blue.500 / 80%)) 80%,
-				transparent
-			),
-			radial-gradient(210px 140px, var(--color, theme(colors.blue.600)), transparent),
-			radial-gradient(300px 200px, var(--color, theme(colors.sky.600)), transparent),
-			radial-gradient(600px 220px, var(--color, theme(colors.blue.700)), transparent);
+		background: radial-gradient(140px 100px at 50% 45%, var(--color), transparent),
+			radial-gradient(145px 110px at 50% 45%, var(--c1) 80%, transparent),
+			radial-gradient(210px 140px, var(--c2, theme(colors.blue.600)), transparent),
+			radial-gradient(300px 200px, var(--c2, theme(colors.sky.600)), transparent),
+			radial-gradient(600px 220px, var(--c3, theme(colors.blue.700)), transparent),
+			radial-gradient(1100px 420px, var(--c4, theme(colors.blue.800 / 60%)), transparent);
 
-		& ::after {
-			content: ' ';
+		mask-image: radial-gradient(100% 100% at 50% 50%, black 20%, transparent 50%);
+
+		opacity: 0.1;
+		scale: 0.95 1;
+		transition: all 1200ms ease-in-out 120ms;
+
+		.enabled & {
+			opacity: 1;
+			scale: 1;
 		}
 	}
 </style>
diff --git a/src/routes/wall_of_fame/FamedRice.svelte b/src/routes/wall_of_fame/FamedRice.svelte
index c2c9b58..7a26e46 100755
--- a/src/routes/wall_of_fame/FamedRice.svelte
+++ b/src/routes/wall_of_fame/FamedRice.svelte
@@ -1,4 +1,7 @@
 <script>
+	import { getBlurredPath } from '$lib/Helper.mjs'
+	import { inview } from 'svelte-inview'
+
 	/** @type {string} */
 	export let name
 	/** @type {string} */
@@ -17,37 +20,30 @@
 	/** @type {string} */
 	export let pretitel
 
-	let background =
-		blurredThumbnail ??
-		// Get the `generated_<filename>` if blurredThumbnail is not set manually
-		`${thumbnail.substring(0, thumbnail.lastIndexOf('/'))}/generated_${thumbnail.split('/').at(-1)}`
+	let background = blurredThumbnail ?? getBlurredPath(thumbnail)
 </script>
 
-<div class="flex flex-col gap-14">
-	<div class="flex justify-center items-center flex-col">
-		<div class="text-lg font-bold mb-2">{pretitel}</div>
-		<h3 class="text-6xl hover:text-slate-200 mb-6 font-bold">
+<div class="flex flex-col gap-12 px-4">
+	<div class="flex flex-col items-center justify-center">
+		<div class="mb-2 text-lg font-bold">{pretitel}</div>
+		<h3 class="mb-6 text-6xl font-bold hover:text-slate-200">
 			<a href={dotfilesLink} target="_blank">{name}</a>
 		</h3>
-		<a class="flex gap-3 group" href={dotfilesLink} target="_blank">
+		<a class="group flex gap-3" href={dotfilesLink} target="_blank">
 			<img
 				src={creatorProfilePicture}
-				class="rounded-full h-6 aspect-square"
+				class="aspect-square h-6 rounded-full"
 				alt={creator + ' profile picture'}
 			/>
-			<div class="font-medium text-lg transition-colors group-hover:text-white text-slate-300">
+			<div class="text-lg font-medium text-slate-300 transition-colors group-hover:text-white">
 				{creator}
 			</div>
 		</a>
 	</div>
 
-	<div class="px-6 sm:px-8 w-full max-w-[1100px] relative">
-		<a class="" href={dotfilesLink} target="_blank">
-			<img
-				src={thumbnail}
-				alt={`${name} by ${creator} thumbnail`}
-				class="rounded-lg hover:scale-[1.01] duration-300 transition-transform w-full"
-			/>
+	<div class="relative w-full max-w-[1100px] px-6 sm:px-8">
+		<a class="rice" href={dotfilesLink} target="_blank">
+			<img src={thumbnail} alt={`${name} by ${creator} thumbnail`} class="" />
 		</a>
 		<!-- wide background -->
 		<!-- <img
@@ -67,29 +63,47 @@
 </div>
 
 <style lang="postcss">
-	.background {
-		position: absolute;
-		opacity: 0.4;
-		min-width: calc(200% + 400px);
-		height: calc(100% + 200px);
-		pointer-events: none;
-		inset: 0px 0 0 -200px;
-		translate: 0px -50%;
-		z-index: -10;
-		background: red;
+	.rice {
+		position: relative;
+		display: block;
+		@apply w-full rounded-lg transition-transform;
+		box-shadow: 0px 0px 8px theme(colors.black / 40%);
 
-		mask-image: radial-gradient(closest-side, black, transparent);
+		& img {
+			@apply rounded-lg shadow-lg duration-300;
+			&:hover {
+				scale: 1.005;
+			}
+		}
+
+		&:after {
+			--size: 5rem;
+			color: red;
+			z-index: -1000;
+			content: ' ';
+			@apply rounded-lg shadow-2xl;
+			width: calc(100% + var(--size) * 0.5);
+			height: calc(100% + var(--size) * 0.5);
+			pointer-events: none;
+			position: absolute;
+			left: calc(var(--size) * -0.25);
+			top: calc(var(--size) * -0.25);
+			/* background: red; */
+			background: rgba(255, 255, 255, 0.05);
+			border: rgba(255, 255, 255, 0.1) solid 1px;
+		}
 	}
 	.background-blurred {
 		position: absolute;
 		opacity: 0.3;
-		min-width: calc(120% + 400px);
+		min-width: calc(120% + 200px);
 		height: calc(120% + 200px);
 		pointer-events: none;
-		top: -55%;
+		top: -45%;
 		left: 50%;
 		translate: -50%;
 		z-index: -10;
+		filter: contrast(2.5);
 
 		mask-image: radial-gradient(farthest-side, black, transparent);
 	}
diff --git a/static/imgs/ricing_competitions/1/amadeus.webp b/static/imgs/ricing_competitions/1/amadeus.webp
index feb0868..8fb1eee 100755
Binary files a/static/imgs/ricing_competitions/1/amadeus.webp and b/static/imgs/ricing_competitions/1/amadeus.webp differ
diff --git a/static/imgs/ricing_competitions/1/flafy.webp b/static/imgs/ricing_competitions/1/flafy.webp
index a821db3..cff3ab0 100755
Binary files a/static/imgs/ricing_competitions/1/flafy.webp and b/static/imgs/ricing_competitions/1/flafy.webp differ
diff --git a/static/imgs/ricing_competitions/1/flicko.webp b/static/imgs/ricing_competitions/1/flicko.webp
index 808626c..dc6f210 100755
Binary files a/static/imgs/ricing_competitions/1/flicko.webp and b/static/imgs/ricing_competitions/1/flicko.webp differ
diff --git a/static/imgs/ricing_competitions/1/lauroro.webp b/static/imgs/ricing_competitions/1/lauroro.webp
index 22d60ec..4af4bfb 100755
Binary files a/static/imgs/ricing_competitions/1/lauroro.webp and b/static/imgs/ricing_competitions/1/lauroro.webp differ
diff --git a/static/imgs/ricing_competitions/1/lyasm.webp b/static/imgs/ricing_competitions/1/lyasm.webp
index 48dfe7e..8c29745 100755
Binary files a/static/imgs/ricing_competitions/1/lyasm.webp and b/static/imgs/ricing_competitions/1/lyasm.webp differ
diff --git a/static/imgs/ricing_competitions/2/day-night.webp b/static/imgs/ricing_competitions/2/day-night.webp
index 452813c..f794a92 100755
Binary files a/static/imgs/ricing_competitions/2/day-night.webp and b/static/imgs/ricing_competitions/2/day-night.webp differ
diff --git a/static/imgs/ricing_competitions/2/end_4.webp b/static/imgs/ricing_competitions/2/end_4.webp
index 1381132..feddd48 100755
Binary files a/static/imgs/ricing_competitions/2/end_4.webp and b/static/imgs/ricing_competitions/2/end_4.webp differ
diff --git a/static/imgs/ricing_competitions/2/flafy.webp b/static/imgs/ricing_competitions/2/flafy.webp
index 4f34409..b3b97ec 100755
Binary files a/static/imgs/ricing_competitions/2/flafy.webp and b/static/imgs/ricing_competitions/2/flafy.webp differ