diff --git a/docs/vercel/.eslintrc.cjs b/docs/vercel/.eslintrc.cjs
new file mode 100644
index 000000000..350ec23d1
--- /dev/null
+++ b/docs/vercel/.eslintrc.cjs
@@ -0,0 +1,22 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 12,
+    sourceType: 'module',
+    parser: '@typescript-eslint/parser',
+    extraFileExtensions: ['.svelte'],
+  },
+  plugins: ['@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+    },
+  ],
+};
diff --git a/docs/vercel/.eslintrc.json b/docs/vercel/.eslintrc.json
deleted file mode 100644
index 2575d7c00..000000000
--- a/docs/vercel/.eslintrc.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": 2021,
-    "sourceType": "module"
-  },
-  "plugins": ["@typescript-eslint"],
-  "extends": ["plugin:svelte/recommended"],
-  "overrides": [
-    {
-      "files": ["*.svelte"],
-      "parser": "svelte-eslint-parser",
-      "parserOptions": {
-        "parser": "@typescript-eslint/parser"
-      }
-    }
-  ],
-  "rules": {
-    "svelte/no-at-html-tags": "off"
-  }
-}
diff --git a/docs/vercel/.prettierrc.json b/docs/vercel/.prettierrc
similarity index 60%
rename from docs/vercel/.prettierrc.json
rename to docs/vercel/.prettierrc
index 707f9c9d3..752f2cfb4 100644
--- a/docs/vercel/.prettierrc.json
+++ b/docs/vercel/.prettierrc
@@ -7,5 +7,7 @@
   "bracketSameLine": true,
   "singleAttributePerLine": false,
   "quoteProps": "consistent",
-  "plugins": ["prettier-plugin-svelte"]
+  "plugins": ["prettier-plugin-svelte"],
+  "svelteSortOrder": "scripts-options-markup-styles",
+  "svelteIndentScriptAndStyle": true
 }
diff --git a/docs/vercel/README.md b/docs/vercel/README.md
index aac3c0d85..8f2fb18ab 100644
--- a/docs/vercel/README.md
+++ b/docs/vercel/README.md
@@ -8,5 +8,5 @@
 npm i
 
 # run server with hot reloading
-npm run dev
+npm start
 ```
diff --git a/docs/vercel/index.html b/docs/vercel/index.html
index 898af4a90..159e5aff5 100644
--- a/docs/vercel/index.html
+++ b/docs/vercel/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" href="/onefetch.ico" />
-    <link rel="stylesheet" href="/sakura.css" type="text/css" />
+    <link rel="stylesheet" href="/sakura-dark.css" type="text/css" />
     <title>Onefetch</title>
   </head>
 
diff --git a/docs/vercel/package-lock.json b/docs/vercel/package-lock.json
index 9bc46209f..b52a8826b 100644
--- a/docs/vercel/package-lock.json
+++ b/docs/vercel/package-lock.json
@@ -15,6 +15,7 @@
         "@typescript-eslint/parser": "^7.1.0",
         "eslint": "^8.57.0",
         "eslint-plugin-svelte": "^2.35.1",
+        "eslint-plugin-unused-imports": "^3.1.0",
         "prettier": "^3.2.5",
         "prettier-plugin-svelte": "^3.2.2",
         "svelte": "^4.2.12",
@@ -1593,6 +1594,36 @@
         }
       }
     },
+    "node_modules/eslint-plugin-unused-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.1.0.tgz",
+      "integrity": "sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==",
+      "dev": true,
+      "dependencies": {
+        "eslint-rule-composer": "^0.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "6 - 7",
+        "eslint": "8"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
@@ -4196,6 +4227,21 @@
         "svelte-eslint-parser": ">=0.33.0 <1.0.0"
       }
     },
+    "eslint-plugin-unused-imports": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-unused-imports/-/eslint-plugin-unused-imports-3.1.0.tgz",
+      "integrity": "sha512-9l1YFCzXKkw1qtAru1RWUtG2EVDZY0a0eChKXcL+EZ5jitG7qxdctu4RnvhOJHv4xfmUf7h+JJPINlVpGhZMrw==",
+      "dev": true,
+      "requires": {
+        "eslint-rule-composer": "^0.3.0"
+      }
+    },
+    "eslint-rule-composer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz",
+      "integrity": "sha512-bt+Sh8CtDmn2OajxvNO+BX7Wn4CIWMpTRm3MaiKPCQcnnlm0CS2mhui6QaoeQugs+3Kj2ESKEEGJUdVafwhiCg==",
+      "dev": true
+    },
     "eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
diff --git a/docs/vercel/package.json b/docs/vercel/package.json
index 2922a0048..2055502c0 100644
--- a/docs/vercel/package.json
+++ b/docs/vercel/package.json
@@ -4,14 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "start": "vite",
     "build": "vite build",
     "format": "prettier -w .",
     "preview": "vite preview",
-    "check": "check:svelte && check:prettier && check:eslint",
+    "check": "npm run check:svelte && npm run check:prettier && npm run check:lint",
     "check:svelte": "svelte-check",
     "check:prettier": "prettier --check **/*.{ts,js,svelte,css,html,json}",
-    "check:lint": "eslint 'src/**/*.{ts,js,svelte}'"
+    "check:lint": "eslint src/**/*.{ts,js,svelte}"
   },
   "devDependencies": {
     "@rollup/plugin-yaml": "^4.1.2",
diff --git a/docs/vercel/public/sakura.css b/docs/vercel/public/sakura-dark.css
similarity index 86%
rename from docs/vercel/public/sakura.css
rename to docs/vercel/public/sakura-dark.css
index 304e1b1ac..2fd58722d 100644
--- a/docs/vercel/public/sakura.css
+++ b/docs/vercel/public/sakura-dark.css
@@ -1,3 +1,4 @@
+/* $color-text: #dedce5; */
 /* Sakura.css v1.5.0
  * ================
  * Minimal css theme.
@@ -15,8 +16,8 @@ body {
   line-height: 1.618;
   max-width: 38em;
   margin: auto;
-  color: #222222;
-  background-color: #ffffff;
+  color: #c9c9c9;
+  background-color: #222222;
   padding: 13px;
 }
 
@@ -84,19 +85,19 @@ sup {
 }
 
 hr {
-  border-color: #007559;
+  border-color: #ffffff;
 }
 
 a {
   text-decoration: none;
-  color: #007559;
+  color: #ffffff;
 }
 a:visited {
-  color: #004232;
+  color: #e6e6e6;
 }
 a:hover {
-  color: #006994;
-  border-bottom: 2px solid #222222;
+  color: #c9c9c9;
+  border-bottom: 2px solid #c9c9c9;
 }
 
 ul {
@@ -116,9 +117,9 @@ blockquote {
   padding-top: 0.8em;
   padding-bottom: 0.8em;
   padding-right: 0.8em;
-  border-left: 5px solid #007559;
+  border-left: 5px solid #ffffff;
   margin-bottom: 2.5rem;
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
 }
 
 blockquote p {
@@ -135,7 +136,7 @@ video {
 
 /* Pre and Code */
 pre {
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
   display: block;
   padding: 1em;
   overflow-x: auto;
@@ -149,7 +150,7 @@ kbd,
 samp {
   font-size: 0.9em;
   padding: 0 0.5em;
-  background-color: #f7f7f7;
+  background-color: #4a4a4a;
   white-space: pre-wrap;
 }
 
@@ -171,17 +172,17 @@ table {
 td,
 th {
   padding: 0.5em;
-  border-bottom: 1px solid #f7f7f7;
+  border-bottom: 1px solid #4a4a4a;
 }
 
 /* Buttons, forms and input */
 input,
 textarea {
-  border: 1px solid #222222;
+  border: 1px solid #c9c9c9;
 }
 input:focus,
 textarea:focus {
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
 }
 
 textarea {
@@ -199,10 +200,10 @@ input[type='file']::file-selector-button {
   text-align: center;
   text-decoration: none;
   white-space: nowrap;
-  background-color: #007559;
-  color: #ffffff;
+  background-color: #ffffff;
+  color: #222222;
   border-radius: 1px;
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
   cursor: pointer;
   box-sizing: border-box;
 }
@@ -221,8 +222,8 @@ input[type='submit']:hover,
 input[type='reset']:hover,
 input[type='button']:hover,
 input[type='file']::file-selector-button:hover {
-  background-color: #006994;
-  color: #ffffff;
+  background-color: #c9c9c9;
+  color: #222222;
   outline: 0;
 }
 .button:focus-visible,
@@ -238,11 +239,11 @@ input[type='file']::file-selector-button:focus-visible {
 textarea,
 select,
 input {
-  color: #222222;
+  color: #c9c9c9;
   padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
   margin-bottom: 10px;
-  background-color: #f7f7f7;
-  border: 1px solid #f7f7f7;
+  background-color: #4a4a4a;
+  border: 1px solid #4a4a4a;
   border-radius: 4px;
   box-shadow: none;
   box-sizing: border-box;
@@ -250,12 +251,12 @@ input {
 textarea:focus,
 select:focus,
 input:focus {
-  border: 1px solid #007559;
+  border: 1px solid #ffffff;
   outline: 0;
 }
 
 input[type='checkbox']:focus {
-  outline: 1px dotted #007559;
+  outline: 1px dotted #ffffff;
 }
 
 label,
diff --git a/docs/vercel/src/Index.svelte b/docs/vercel/src/Index.svelte
index 5225471df..8a9b984ed 100644
--- a/docs/vercel/src/Index.svelte
+++ b/docs/vercel/src/Index.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import AsciiPreview from './lib/AsciiPreview.svelte';
+  import AsciiPreview from './components/AsciiPreview.svelte';
   import data from '../../../languages.yaml';
   import type { Languages, Language } from '../../../languages.yaml';
   import { onMount } from 'svelte';
@@ -45,7 +45,7 @@
   {#if tagName && htmlUrl}
     <div class="banner">
       <small
-        >Version {tagName} is available 🎉 Check the
+        >🎉 Version {tagName} is available, check the
         <a href={htmlUrl}>release notes</a>!!</small>
     </div>
   {/if}
@@ -62,11 +62,11 @@
 </header>
 <main>
   <p>
-    This page shows you an ASCII preview for all the programming languages
-    supported by onefetch. Like the binary, the data is taken from the <a
+    This page displays an ASCII preview for all the programming languages
+    supported by onefetch. Like the binary, the data is sourced from the <a
       href="https://raw.githubusercontent.com/o2sh/onefetch/main/languages.yaml"
-      ><code>Languages.yaml</code></a> file and the layout is meant to mimic the
-    way the logo would look inside a terminal.
+      ><code>Languages.yaml</code></a> file, and the layout aims to replicate how
+    the logo would appear inside a terminal.
   </p>
   <p>
     Suggestions and PRs are welcome at <a
@@ -74,8 +74,7 @@
   </p>
   <div class="title">
     <h3>Languages <small>({$filteredLanguages.length})</small></h3>
-    <button class="filter-button" on:click={() => (showMenu = !showMenu)}
-      >Filter by type</button>
+    <button on:click={() => (showMenu = !showMenu)}>Filter by type</button>
   </div>
 
   <div class:hide={!showMenu}>
@@ -110,13 +109,14 @@
 
 <style>
   .banner {
-    background-color: #e1f6e5;
+    background-color: black;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     text-align: center;
     padding: 0.5rem 0;
+    color: white;
   }
 
   .title {
diff --git a/docs/vercel/src/lib/AsciiPreview.svelte b/docs/vercel/src/components/AsciiPreview.svelte
similarity index 93%
rename from docs/vercel/src/lib/AsciiPreview.svelte
rename to docs/vercel/src/components/AsciiPreview.svelte
index 0ebc1e4a5..d7717b7f2 100644
--- a/docs/vercel/src/lib/AsciiPreview.svelte
+++ b/docs/vercel/src/components/AsciiPreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { mapToDefaultTerminalFgColor } from '../lib/utils';
   import Chip from './Chip.svelte';
   import TitleLink from './TitleLink.svelte';
 
@@ -27,10 +28,6 @@
       return `${htmlLine}${'</span>'.repeat(spanCount)}`;
     })
     .join('\n');
-
-  function mapToDefaultTerminalFgColor(color: string, dark: boolean): string {
-    return color === 'white' && !dark ? 'black' : color;
-  }
 </script>
 
 <div class="title-row">
@@ -59,6 +56,7 @@
   .logo-container {
     display: flex;
     justify-content: center;
+    background-color: white;
   }
 
   .logo-container.dark {
diff --git a/docs/vercel/src/lib/Chip.svelte b/docs/vercel/src/components/Chip.svelte
similarity index 100%
rename from docs/vercel/src/lib/Chip.svelte
rename to docs/vercel/src/components/Chip.svelte
diff --git a/docs/vercel/src/components/TitleLink.svelte b/docs/vercel/src/components/TitleLink.svelte
new file mode 100644
index 000000000..617fcceb8
--- /dev/null
+++ b/docs/vercel/src/components/TitleLink.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let name: string;
+</script>
+
+<h3 id={name}><a href="#{name}">{name}</a></h3>
diff --git a/docs/vercel/src/lib/TitleLink.svelte b/docs/vercel/src/lib/TitleLink.svelte
deleted file mode 100644
index 5ca939ecf..000000000
--- a/docs/vercel/src/lib/TitleLink.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  export let name: string;
-</script>
-
-<h3 id={name}><a href="#{name}" class="title-link">{name}</a></h3>
-
-<style>
-  .title-link,
-  .title-link:hover,
-  .title-link:visited {
-    color: #222;
-  }
-</style>
diff --git a/docs/vercel/src/lib/utils.ts b/docs/vercel/src/lib/utils.ts
new file mode 100644
index 000000000..83fd6af0e
--- /dev/null
+++ b/docs/vercel/src/lib/utils.ts
@@ -0,0 +1,6 @@
+export function mapToDefaultTerminalFgColor(
+  color: string,
+  dark: boolean
+): string {
+  return color === 'white' && !dark ? 'black' : color;
+}
diff --git a/docs/vercel/typings/yaml.d.ts b/docs/vercel/src/yaml.d.ts
similarity index 100%
rename from docs/vercel/typings/yaml.d.ts
rename to docs/vercel/src/yaml.d.ts
diff --git a/docs/vercel/tsconfig.json b/docs/vercel/tsconfig.json
index 1d987673f..b30055489 100644
--- a/docs/vercel/tsconfig.json
+++ b/docs/vercel/tsconfig.json
@@ -1,17 +1,12 @@
 {
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
-    "target": "ESNext",
+    "target": "esnext",
     "useDefineForClassFields": true,
-    "module": "ESNext",
+    "module": "esnext",
     "resolveJsonModule": true,
+    "moduleResolution": "node",
     "baseUrl": ".",
-    /**
-     * Typecheck JS in `.svelte` and `.js` files by default.
-     * Disable checkJs if you'd like to use dynamic types in JS.
-     * Note that setting allowJs false does not prevent the use
-     * of JS in `.svelte` files.
-     */
     "allowJs": true,
     "checkJs": true
   },
@@ -20,6 +15,6 @@
     "src/**/*.ts",
     "src/**/*.js",
     "src/**/*.svelte",
-    "typings/**/*.d.ts"
+    "src/**/*.d.ts"
   ]
 }