Add initial support for the v2 of the API (Still WIP) (#250)

* Functionally implement modpacks * Add LogoAnimated to logo license * Fix eslint errors * Add `z-index: 20` to user dropdown (#287) * Fix pages not working, add changelog page, redesign versions page * Update theme colors, add OLED theme, update some project creation text. (#292) * Update theme colors, add OLED theme, update some project creation text. * Make summary normal text color * Update favicons, update logos to use dynamic colors, updated filters panel a bit * Update wording from #250 * Version page rework * Manually apply some commits from master, other minor v2 fixes (#296) * Homepage styling improvements (#285) * Add border radius to video + example code colors * Change color + allow overflow scroll * Minor v2 fixes - Makes multiple loaders display correctly (used to be `Fabric,Forge` is now `Fabric, Forge` - Fix oopses in #292 - Allow .jar and .zip in file prompt - Apply 30cbd3a6c372940d1e86cc8134d0dfc7e8e5ee9c to pages/create/project.vue - Display `fabric, forge` instead of broken icons on pages/create/project.vue * Markdown styling fixes (#268) * Add table color variables (+ prettier fixes) * Add details and table styling to .markdown-body * Add indexing meta value depending on the status of the mod. (#261) * General UI Improvement (again) (#255) * Add and fix some stuff * Add warning when leaving to `mod/create` * Fix mods/create not working * Fix a bug & add improvements to a couple moderation aspects (#278) This PR fixes reports on the moderation dashboard going to `/dashboard/mod/_id` instead of to `/mod/_id`. It also allows the ability for moderators to unlist mods in the queue from the frontend instead of having to do it via the backend. ![image](https://i.imgur.com/x8shSVn.png) Unlisted mods should have the ability to resubmit for approval, so I've also changed "Submit for Review" to "Submit for approval", allowing unlisted mods to do that as well. ![image](https://i.imgur.com/OC8Vyfo.png) * Add project guidelines to Terms page (#275) * Add project guidelines to Terms page This adds the project guidelines as outlined [here](https://discord.com/channels/734077874708938864/734077874708938867/806556531491471368). NOTE: I've made a few tweaks in wording to accommodate this format, so this is not an exact copy. * Move rules to its own page * Allow users to login from search page when it is rendered serverside (#272) * Change `this.$route.fullPath` → `this.$route.path` * Closes modrinth/knossos#256 * Wrap mod icon and title in link (#273) * Wrap mod icon and title in link * Fixes #218 * Editor's note Skipped #249 (search was rewritten), #266 (couldn't figure out how to apply it), #270 (didn't seem to apply properly), #252 (manually merged in with #292), #262 (superceded by #270), #282, #271, #277, #283, and #281 (those five didn't get wiped) Co-authored-by: venashial <venashial.levo@aleeas.com> Co-authored-by: Redblueflame <contact@redblueflame.com> Co-authored-by: Johan Novak <wickedtree@wickedtree.codes> * SSR descriptions, version edit page * Working version editing + dependency management (besides files) * Version create page, file functionality * Fix some issues with the version page * More versions page fixes * Project gallery * Box shadows, user profile page, WIP header * Finish user dashboard * Finish search and fix minor issues * Moderator page + messages, notifications page * Fix dropdown menu, fix XSS, fix team members page * Change doc url on main page (#309) * Re-Fix docs url (#313) * Clean up. Part 1: Fix immediate problems (#316) * Clean up tabs and cards CSS a little * Fix project page; Remove bad styles from search * Yeet and flatten lots of styles; fix font sizes * Restyle search; fix moderation * Fix profile page * Remove injected SCSS entirely * Fix a mobile layout overflowing * Apiv2-support fixes (#320) * Fix member user_id -> user.id * Fix incorrect report redirect * Change theme switcher from button to multiselect * Fix remaining items Co-authored-by: Jai A <jaiagr+gpg@pm.me> * Fix bugs * Full mobile support, update create project page, fix various bugs * New Dark Mode brand colors (#325) * Use "color-brand-hover" for auth-prompt when hover over * New dark mode brand colors * Fix new version featured bug * Remove old home page, other fixes * Fix error when merging * Fix prettier error :( Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: venashial <venashial.levo@aleeas.com> Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com> Co-authored-by: Emma <emmaffle@modrinth.com> Co-authored-by: Johan Novak <wickedtree@wickedtree.codes> Co-authored-by: Jai A <jaiagr@pm.me> Co-authored-by: Mysterious_Dev <40738104+Mysterious-Dev@users.noreply.github.com> Co-authored-by: Mikhail Oleynikov <contact@falseresync.ru> Co-authored-by: Christian Popov <30723811+Xrey274@users.noreply.github.com>
2022-01-09 23:19:27 +01:00 · 2022-01-09 23:19:27 +01:00 · a2266adb3f
commit a2266adb3f
parent c518f373df
167 changed files with 18841 additions and 18188 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -10,12 +10,10 @@ module.exports = {
  extends: [
    '@nuxtjs',
    'prettier',
-    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended',
  ],
  plugins: ['prettier'],
-  // add your custom rules here
  rules: {
    'no-console': 'off',
  },
--- a/.github/workflows/docker-compile.yml
+++ b/.github/workflows/docker-compile.yml
@ -20,9 +20,7 @@ jobs:
        id: docker_meta
        uses: crazy-max/ghaction-docker-meta@v1
        with:
-          images: |
-            ghcr.io/modrinth/knossos
-            docker.io/modrinth/knossos
+          images: ghcr.io/modrinth/knossos
      -
        name: Get branch name
        id: vars
@ -45,13 +43,6 @@ jobs:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
-      -
-        name: Login to DockerHub
-        uses: docker/login-action@v1
-        if: github.event_name != 'pull_request'
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
      -
        name: Build and push
        uses: docker/build-push-action@v2
--- a/COPYING.md
+++ b/COPYING.md
@ -2,11 +2,13 @@
 The source code of the knossos repository is licensed under GNU Affero General Public License Version 3, which is 
 provided in the file LICENSE.md. However, some files listed below are licensed under a different license.

-The following files are licensed under the license below in the "Logo Licenses" section:
-assets/images/logo.svg
-assets/images/text-logo.svg
-assets/images/text-logo-white.svg
-static/favicon.ico
+The following files are licensed under the license below in the "Logo Licenses" section: <br />
+assets/images/logo.svg <br />
+assets/images/text-logo.svg <br />
+assets/images/text-logo-white.svg <br />
+static/favicon.ico <br />
+components/ui/search/LogoAnimated.vue <br />
+assets/images/landing.svg <br />

 ## Logo Licenses
 All rights reserved. ©2020-2021 Guavy LLC
--- a/app/router.scrollBehavior.js
+++ b/app/router.scrollBehavior.js
@ -1,3 +1,7 @@
 export default function (to, from, savedPosition) {
-  return savedPosition || { x: 0, y: 0 }
+  if (to.name.startsWith('type-id') && !from.name.startsWith('type-id')) {
+    return { x: 0, y: 0 }
+  } else {
+    return savedPosition
+  }
 }
--- a/assets/images/categories/adventure.svg
+++ b/assets/images/categories/adventure.svg
@ -1,6 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <circle cx="12" cy="12" r="10"></circle>
-  <polygon
-    points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
-  ></polygon>
-</svg>
--- a/assets/images/categories/client.svg
+++ b/assets/images/categories/client.svg
@ -1,4 +1,4 @@
-<svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
-	<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-	<path d="M8 21h8M12 17v4" />
-</svg>  
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+  <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+  <path d="M8 21h8M12 17v4" />
+</svg>
--- a/assets/images/categories/cursed.svg
+++ b/assets/images/categories/cursed.svg
@ -1,22 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="7" y="7.5" width="10" height="14" rx="5" />
-  <polyline points="2 12.5 4 14.5 7 14.5" />
-  <polyline points="22 12.5 20 14.5 17 14.5" />
-  <polyline points="3 21.5 5 18.5 7 17.5" />
-  <polyline points="21 21.5 19 18.5 17 17.5" />
-  <polyline points="3 8.5 5 10.5 7 11.5" />
-  <polyline points="21 8.5 19 10.5 17 11.5" />
-  <line x1="12" y1="7.5" x2="12" y2="21.5" />
-  <path
-    d="M15.38,8.82A3,3,0,0,0,16,7h0a3,3,0,0,0-3-3H11A3,3,0,0,0,8,7H8a3,3,0,0,0,.61,1.82"
-  />
-  <line x1="9" y1="4.5" x2="8" y2="2.5" />
-  <line x1="15" y1="4.5" x2="16" y2="2.5" />
-</svg>
--- a/assets/images/categories/decoration.svg
+++ b/assets/images/categories/decoration.svg
@ -1,11 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-  <polyline points="9 22 9 12 15 12 15 22" />
-</svg>
--- a/assets/images/categories/equipment.svg
+++ b/assets/images/categories/equipment.svg
@ -1,18 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M17.573 20.038L3.849 7.913 2.753 2.755 7.838 4.06 19.47 18.206l-1.898 1.832z"
-  />
-  <path d="M7.45 14.455l-3.043 3.661 1.887 1.843 3.717-3.25" />
-  <path
-    d="M16.75 10.82l3.333-2.913 1.123-5.152-5.091 1.28-2.483 2.985"
-  />
-  <path d="M21.131 16.602l-5.187 5.01 2.596-2.508 2.667 2.761" />
-  <path d="M2.828 16.602l5.188 5.01-2.597-2.508-2.667 2.761" />
-</svg>
--- a/assets/images/categories/external.svg
+++ b/assets/images/categories/external.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>
--- a/assets/images/categories/fabric.svg
+++ b/assets/images/categories/fabric.svg
@ -1,11 +0,0 @@
-<svg viewBox="0 0 276 288" fill="none" stroke="currentColor" stroke-width="23" stroke-linecap="round" stroke-linejoin="round">
-    <g transform="matrix(1,0,0,1,-3302.43,-67.3276)">
-        <g transform="matrix(0.564163,0,0,1.70346,1629.87,0)">
-            <g transform="matrix(1.97801,-0.0501803,0.151517,0.655089,1678.7,-354.14)">
-                <g>
-                    <path d="M820.011,761.092C798.277,738.875 754.809,694.442 734.36,673.389C729.774,668.668 723.992,663.75 708.535,674.369C688.629,688.043 700.073,696.251 703.288,699.785C711.508,708.824 787.411,788.803 800.523,803.818C802.95,806.597 780.243,781.318 793.957,764.065C799.444,757.163 811.985,752.043 820.011,761.092C826.534,768.447 830.658,779.178 816.559,790.826C791.91,811.191 714.618,873.211 689.659,893.792C677.105,904.144 661.053,896.143 653.827,887.719C646.269,878.908 623.211,853.212 602.539,829.646C596.999,823.332 598.393,810.031 604.753,804.545C639.873,774.253 696.704,730.787 716.673,713.831"/>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/assets/images/categories/flame.svg
+++ b/assets/images/categories/flame.svg
@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<path d="M7.3,20.8c-0.7-0.8-5.2-6-0.6-10.5c3.8-3.8,4.4-6.9,3.1-8.5c0,0,9.7,4,4,13.2c-1,1.6-3.4,3.4-2.1,7.2L7.3,20.8L7.3,20.8z
-	 M13.2,22c-0.2-0.8-1.1-2.5,1.7-5.8c1.5-1.8,2.1-4.4,2.2-5.4c0,0,5,2.9,0,9.9C17.2,20.7,13.2,22,13.2,22z"/>
-</svg>
--- a/assets/images/categories/flameanvil.svg
+++ b/assets/images/categories/flameanvil.svg
@ -1,3 +0,0 @@
-<svg width="113" height="128" viewBox="0 0 113 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.6637 59.3337L32.1412 51.8562L44.2184 66.0338L29.8772 79.9532C28.7085 81.0876 28.3443 82.8173 28.9563 84.3266C29.5683 85.836 31.0344 86.8235 32.6631 86.8235H92.5028L67.5247 106.806C66.2594 107.818 65.7298 109.494 66.1835 111.049L69.9608 124H31.0805L36.7657 111.596C37.3659 110.286 37.2156 108.755 36.3721 107.587L20.215 85.2161C20.3794 84.9958 20.5226 84.7565 20.6408 84.5005C21.2947 83.0843 21.0658 81.4171 20.0542 80.2297L12.3066 71.1346L20.0395 63.9541C20.0812 63.9153 20.122 63.8758 20.1617 63.8356L24.6614 59.336C24.6622 59.3352 24.6629 59.3344 24.6637 59.3337ZM101.193 76.5647H89.4745C90.2162 73.609 92.1388 69.5598 96.679 64.1834C101.3 58.726 104.009 51.7383 105.519 46.2493C106.213 47.2422 106.872 48.4045 107.402 49.743C109.386 54.7518 109.993 63.3535 101.193 76.5647ZM77.9962 64.0567C75.9317 67.4679 74.1929 71.566 73.842 76.5647H62.454C60.2035 73.7571 56.5771 68.6022 54.7738 62.4556C52.6945 55.3677 53.0109 47.0396 61.1035 39.0164L61.104 39.0159C69.5087 30.6807 74.6146 22.7347 76.8078 15.6999C77.5821 13.2161 78.0043 10.7893 78.0555 8.48397C80.6738 10.3958 83.4898 12.8635 85.9054 15.9006C89.1604 19.9929 91.6386 25.049 92.0315 31.1916C92.424 37.3281 90.7617 44.957 85.0299 54.247C84.3475 55.3429 83.4533 56.4992 82.3222 57.962C82.2062 58.1119 82.0877 58.2651 81.9667 58.4218C80.7208 60.0353 79.2887 61.9211 77.9962 64.0567Z" stroke="currentColor" stroke-width="8" stroke-linejoin="round"/>
-</svg>
--- a/assets/images/categories/food.svg
+++ b/assets/images/categories/food.svg
@ -1,14 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
-  <path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
-  <line x1="6" y1="1" x2="6" y2="4"></line>
-  <line x1="10" y1="1" x2="10" y2="4"></line>
-  <line x1="14" y1="1" x2="14" y2="4"></line>
-</svg>
--- a/assets/images/categories/forge.svg
+++ b/assets/images/categories/forge.svg
@ -1,9 +0,0 @@
-<svg viewBox="0 0 362 208" fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round">
-    <g transform="matrix(1,0,0,1,-3259.27,-486.011)">
-        <g transform="matrix(0.564163,0,0,1.70346,1629.87,0)">
-            <g transform="matrix(6.76583,0,0,2.24074,2829.95,275.109)">
-                <path d="M91.6,16.7L100,14.8L100,7.944L47.452,7.944L47.452,14.388L12,14.1C13.9,15.7 24.4,24.7 31.9,28.4C35.6,30.2 40.2,30.3 44.3,30.4C46.4,30.5 48.5,30.6 50.1,32.2C52.4,34.4 52.9,37.9 50.9,40.5C49,43.1 43.6,43.7 43.6,43.7L39,49.1L39,55.5L85.8,55.5L85.8,49.1L81.3,43.6C81.3,43.6 74.6,43.2 72.9,40.4C67.7,32.6 74.8,20.4 91.6,16.7Z"/>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/assets/images/categories/library.svg
+++ b/assets/images/categories/library.svg
@ -1,13 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path>
-  <path
-    d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"
-  ></path>
-</svg>
--- a/assets/images/categories/magic.svg
+++ b/assets/images/categories/magic.svg
@ -1,12 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M10.42 3C9.88 9.2 4 9.4 4 14.38c0 2.8 1.7 5.35 4.17 6.62.76-2.1 3.83-3.17 3.83-5.57a7.65 7.65 0 013.92 5.52C24.13 15.88 18.9 6.18 10.42 3z"
-  />
-</svg>
--- a/assets/images/categories/misc.svg
+++ b/assets/images/categories/misc.svg
@ -1,14 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <circle cx="12" cy="12" r="10"></circle>
-  <line x1="2" y1="12" x2="22" y2="12"></line>
-  <path
-    d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"
-  ></path>
-</svg>
--- a/assets/images/categories/modrinth.svg
+++ b/assets/images/categories/modrinth.svg
@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg
-  viewBox="0 0 24 24"
-  fill="currentColor"
-  stroke="none"
->
-  <path class="st0" d="m20.2 17.6c-0.5-0.2-0.9 0-1.2 0.3-1.2 1.4-2.8 2.5-4.8 3-3.1 0.8-6.2 0-8.4-1.9l3.6-3.2 2.1 1.9 4-1.8 2.1-3.3-0.8-1.6-2.3 1-1 1.3-1.5 0.7-1.2-1-0.8-1.5 1-1.3 1.5-0.7 1.6-2-1.3-1.2-3.8 1.3-2.7 3.5 1.3 2.5-3.7 3.2-0.5-0.8c-0.1-0.2-0.2-0.5-0.3-0.8 0-0.1-0.1-0.2-0.1-0.2-0.1-0.3-0.5-0.6-0.9-0.6-0.5 0-1 0.4-1 1 0.1 0.2 0.1 0.4 0.2 0.5 2 5.3 7.8 8.3 13.4 6.8 2.4-0.6 4.3-1.9 5.8-3.7 0.5-0.4 0.3-1.2-0.3-1.4zm2.6-8.5c-1.7-5.9-7.8-9.4-13.8-7.9-3.8 1-6.6 3.8-7.8 7.1-0.2 0.7 0.3 1.3 0.9 1.3 0.4 0 0.8-0.3 0.9-0.7 1-2.8 3.3-5 6.4-5.9 4.7-1.2 9.5 1.3 11.1 5.6l0.5 1.8c0.1 0.7 0.1 1.4 0.1 2.1v0.1c0 0.4 0.3 0.8 0.7 0.9 0.6 0.2 1.3-0.2 1.3-0.9 0.1-1 0-2.3-0.3-3.5z"/>
-</svg>
--- a/assets/images/categories/server.svg
+++ b/assets/images/categories/server.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
--- a/assets/images/categories/storage.svg
+++ b/assets/images/categories/storage.svg
@ -1,12 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <polyline points="21 8 21 21 3 21 3 8"></polyline>
-  <rect x="1" y="3" width="22" height="5"></rect>
-  <line x1="10" y1="12" x2="14" y2="12"></line>
-</svg>
--- a/assets/images/categories/tech.svg
+++ b/assets/images/categories/tech.svg
@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
--- a/assets/images/categories/utility.svg
+++ b/assets/images/categories/utility.svg
@ -1,11 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
-  <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
-</svg>
--- a/assets/images/categories/worldgen.svg
+++ b/assets/images/categories/worldgen.svg
@ -1,12 +0,0 @@
-<svg
-  viewBox="0 0 24 24"
-  fill="none"
-  stroke="currentColor"
-  stroke-width="2"
-  stroke-linecap="round"
-  stroke-linejoin="round"
->
-  <path
-    d="M12 2v6.5M10 4l2 1 2-1M3.3 7L9 10.2m-4.9-.5L6 8.5l.1-2.2M3.3 17L9 13.7m-2.9 4L6 15.5l-1.9-1.2M12 22v-6.5m2 4.5l-2-1-2 1m5-6.2l5.6 3.3m-.7-2.8L18 15.5l-.1 2.2M20.7 7L15 10.3m2.9-4l.1 2.2 1.9 1.2M12 8.5l3 1.8v3.5l-3 1.8-3-1.8v-3.5l3-1.8z"
-  />
-</svg>
--- a/assets/images/external/bmac-white.svg
+++ b/assets/images/external/bmac-white.svg
--- a/assets/images/external/bmac.svg
+++ b/assets/images/external/bmac.svg
--- a/assets/images/external/discord-white.svg
+++ b/assets/images/external/discord-white.svg
@ -0,0 +1,10 @@
+<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#ffffff"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/external/discord.svg
+++ b/assets/images/external/discord.svg
@ -0,0 +1,10 @@
+<svg width="71" height="55" viewBox="0 0 71 55" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z" fill="#23272A"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="71" height="55" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/assets/images/external/kofi-white.png
+++ b/assets/images/external/kofi-white.png
--- a/assets/images/external/kofi.png
+++ b/assets/images/external/kofi.png
--- a/assets/images/external/patreon-white.png
+++ b/assets/images/external/patreon-white.png
--- a/assets/images/external/patreon.png
+++ b/assets/images/external/patreon.png
--- a/assets/images/external/paypal-white.png
+++ b/assets/images/external/paypal-white.png
--- a/assets/images/external/paypal.png
+++ b/assets/images/external/paypal.png
--- a/assets/images/illustrations/follow_illustration.svg
+++ b/assets/images/illustrations/follow_illustration.svg
@ -9,7 +9,7 @@

  <path
     d="m 367.46102,279.26375 -46.77977,46.17 -105.72023,104.32 -2.13965,2.11 -11.91992,11.76 -24.9902,-24.69 -2.20019,-2.17 -45.69,-45.13 h -0.01 l -14.64013,-14.47 -8.6499,-8.55 -25.760248,-25.44 -3.4795,-3.44 -41.06006,-40.56 a 117.65792,117.65792 0 0 1 -20.52,-27.63 c -0.5,-0.91 -0.97022,-1.83 -1.43018,-2.75 A 117.50682,117.50682 0 0 1 137.18125,80.263749 h 0.0102 c 0.37989,0.06 0.75,0.12 1.12989,0.2 a 113.60526,113.60526 0 0 1 11.91015,2.77 117.09292,117.09292 0 0 1 29.11961,12.93 q 1.4253,0.885 2.82031,1.8 a 118.17183,118.17183 0 0 1 18.46973,15.090001 l 0.3501,-0.35 0.3501,0.35 a 118.54248,118.54248 0 0 1 10.83007,-9.58 c 0.82959,-0.65 1.66993,-1.29 2.50977,-1.91 a 117.44922,117.44922 0 0 1 90.51025,-21.060001 111.92113,111.92113 0 0 1 11.91993,2.78 q 1.96507,0.55509 3.8999,1.2 c 1.04,0.34 2.08008,0.69 3.10986,1.07 a 116.42525,116.42525 0 0 1 24.39014,12.1 q 2.50488,1.63494 4.93994,3.420001 a 117.54672,117.54672 0 0 1 14.00977,178.19 z"
-     fill="#5da545"
+     fill="var(--color-brand)"
     id="path10" />
  <path
     d="m 320.68125,325.43375 -105.72023,104.32 -2.13965,2.11 -11.91992,11.76 -24.9902,-24.69 -2.20019,-2.17 -45.69,-45.13 c 7.34034,-1.71 18.62012,0.64 22.75,2.68 9.79,4.83 17.84034,12.76 27.78028,17.28 a 46.138,46.138 0 0 0 28.33009,3.13 c 17.81982,-3.74 31.60986,-17.52 43.77,-31.08 12.15966,-13.57 24.58984,-28.13 41.67968,-34.42 9.01028,-3.32 18.68996,-4.07 28.35014,-3.79 z"
--- a/assets/images/illustrations/security.svg
+++ b/assets/images/illustrations/security.svg
@ -72,7 +72,7 @@
        transform="translate(-170.30041 -66.10811)" fill="#ffb9b9"/>
  <path
    d="M698.59666,512.91906s-14.52107,35.54159-19.88626,61.18854-13.53608,60.94229-3.02582,85.97362,40.39191,98.59935,40.69972,106.53707-2.55946,15.99856,3.79071,15.75231,40.90677-11.12587,42.30963-15.95007-11.79-17.03205-11.79-17.03205L718.11733,647.30624,752.1068,580.801l24.51648,99.215,4.80184,123.82844s23.56691-7.27361,26.98824-1.04656c0,0,10.55875-14.71883,11.9-21.13057s-4.98653-128.59106-4.98653-128.59106,21.63236-139.16288,4.16937-138.4857S733.63268,473.40208,698.59666,512.91906Z"
-    transform="translate(-170.30041 -66.10811)" fill="#5da545"/>
+    transform="translate(-170.30041 -66.10811)" fill="var(--color-brand)"/>
  <path
    d="M719.92877,776.02043s-16.10862,35.60315-17.63461,37.25225-12.02317,17.95548-4.08545,17.64767,26.68044-8.98427,40.47584-22.23868,31.98406-36.21877,30.335-37.74475-12.9466-5.85768-12.9466-5.85768Z"
    transform="translate(-170.30041 -66.10811)" fill="#575a89"/>
@ -84,7 +84,7 @@
    transform="translate(-170.30041 -66.10811)" fill="#ffb9b9"/>
  <path
    d="M767.16508,313.10863s6.84267,12.4541,13.19285,12.20785,39.1961-14.2394,40.599-19.06359,10.87963,34.55659,10.87963,34.55659L751.465,482.25016,731.86045,468.701l9.49913-83.04479,7.80153-44.8206Z"
-    transform="translate(-170.30041 -66.10811)" fill="#5da545"/>
+    transform="translate(-170.30041 -66.10811)" fill="var(--color-brand)"/>
  <path
    d="M823.92139,439.69215c-3.206,6.70666-5.20835,13.70047-4.9307,20.86031.01231.31753.02462.635.05282.95187.76057,14.69329,6.17341,31.68646,8.11534,44.04443,1.40908,8.86485,1.00808,15.33551-4.1797,16.85636-12.57723,3.66758,1.83379,6.28861-46.826,22.48493s-57.15159,2.21623-57.27471-.95886,6.89116-27.29605,5.24206-28.822-23.07442,19.974-29.54772,17.04512-.73874-19.05053-.73874-19.05053,14.58264-33.954,14.27483-41.89176,22.08942-45.37466,22.08942-45.37466L745.432,326.67085s5.85768-12.9466,13.73384-14.842,14.411,2.621,14.411,2.621L760.397,343.57977l-13.90546,51.417,2.32629,18.989s16.17018-34.01561,26.7905-47.1469,33.26379-44.21805,33.26379-44.21805,5.28646-17.83738,1.2957-23.16791c-3.99136-5.34632,16.64671-6.14662,25.4463,15.77118,4.66382,11.61641,12.23581,28.93925,16.97922,45.068,4.22682,14.28851,6.22343,27.646,2.03588,35.2811C848.229,407.2371,832.1292,422.56828,823.92139,439.69215Z"
    transform="translate(-170.30041 -66.10811)" fill="#575a89"/>
--- a/assets/images/illustrations/up_to_date.svg
+++ b/assets/images/illustrations/up_to_date.svg
@ -42,8 +42,8 @@
  <path
    d="M800.57267,320.98789c-.35442-5.44445-7.22306-5.631-12.67878-5.68255s-11.97836.14321-15.0654-4.35543c-2.0401-2.973-1.65042-7.10032.035-10.28779s4.45772-5.639,7.18508-7.99742c7.04139-6.08884,14.29842-12.12936,22.7522-16.02662s18.36045-5.472,27.12788-2.3435c10.77008,3.84307,25.32927,23.62588,26.5865,34.99176s-3.28507,22.95252-10.9419,31.44586-25.18188,5.0665-36.21069,8.088c6.7049-9.48964,2.28541-26.73258-8.45572-31.164Z"
    transform="translate(-205 -193.89598)" fill="#2f2e41"/>
-  <circle cx="361.7217" cy="403.5046" r="62.98931" fill="#5da545"/>
+  <circle cx="361.7217" cy="403.5046" r="62.98931" fill="var(--color-brand)"/>
  <path
    d="M524.65625,529.9355a45.15919,45.15919,0,0,1-41.25537-26.78614L383.44873,278.05757a59.83039,59.83039,0,1,1,111.87012-41.86426l72.37744,235.41211a45.07978,45.07978,0,0,1-43.04,58.33008Z"
-    transform="translate(-205 -193.89598)" fill="#5da545"/>
+    transform="translate(-205 -193.89598)" fill="var(--color-brand)"/>
 </svg>
--- a/assets/images/landing.svg
+++ b/assets/images/landing.svg
--- a/assets/images/logo.svg
+++ b/assets/images/logo.svg
@ -1,4 +1,4 @@
-<svg width="512" height="514" viewBox="0 0 512 514" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="#5DA426"/>
-  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="#5DA426"/>
+<svg width="512" height="514" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="var(--color-brand)"/>
+  <path d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="var(--color-brand)"/>
 </svg>
--- a/assets/images/right-arrow.svg
+++ b/assets/images/right-arrow.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
--- a/assets/images/search.mp4
+++ b/assets/images/search.mp4
--- a/assets/images/search.webm
+++ b/assets/images/search.webm
--- a/assets/images/sidebar/notifications.svg
+++ b/assets/images/sidebar/notifications.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
--- a/assets/images/sidebar/settings.svg
+++ b/assets/images/sidebar/settings.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
--- a/assets/images/text-logo-white.svg
+++ b/assets/images/text-logo-white.svg
@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 777 141.73">
-  <g>
-    <path d="M159.07,89.29A70.94,70.94,0,1,0,20,63.52H32A58.78,58.78,0,0,1,145.23,49.93l-11.66,3.12a46.54,46.54,0,0,0-29-26.52l-2.15,12.13a34.31,34.31,0,0,1,2.77,63.26l3.19,11.9a46.52,46.52,0,0,0,28.33-49l11.62-3.1A57.94,57.94,0,0,1,147.27,85Z" transform="translate(-19.79)" fill="#5da545" fill-rule="evenodd"/>
-    <path d="M108.92,139.3A70.93,70.93,0,0,1,19.79,76h12a59.48,59.48,0,0,0,1.78,9.91,58.73,58.73,0,0,0,3.63,9.91l10.68-6.41a46.58,46.58,0,0,1,44.72-65L90.43,36.54A34.38,34.38,0,0,0,57.36,79.75C57.67,80.88,58,82,58.43,83l13.66-8.19L68,63.93l12.9-13.25,16.31-3.51L101.9,53l-7.52,7.61-6.55,2.06-4.69,4.82,2.3,6.38s4.64,4.94,4.65,4.94l6.57-1.74,4.67-5.13,10.2-3.24,3,6.84L104.05,88.43,86.41,94l-7.92-8.81L64.7,93.48a34.44,34.44,0,0,0,28.72,11.59L96.61,117A46.6,46.6,0,0,1,54.13,99.83l-10.64,6.38a58.81,58.81,0,0,0,99.6-9.77l11.8,4.29A70.77,70.77,0,0,1,108.92,139.3Z" transform="translate(-19.79)" fill="#5da545"/>
-  </g>
-  <g>
-    <path d="M303,52.44q7.51,7.45,7.52,22.37v39H294.54v-37q0-8.92-4-13.45t-11.35-4.52q-8,0-12.87,5.29t-4.85,15.1v34.55H245.59v-37q0-8.92-4-13.45t-11.35-4.52q-8.16,0-12.94,5.22t-4.78,15.17v34.55H196.64V45.75h15.17v8.66a24.78,24.78,0,0,1,9.56-7A32.51,32.51,0,0,1,234.11,45a30.83,30.83,0,0,1,13.58,2.87,22,22,0,0,1,9.37,8.48A28.31,28.31,0,0,1,267.89,48a35.16,35.16,0,0,1,14.66-3Q295.43,45,303,52.44Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M343.49,110.25a32.53,32.53,0,0,1-12.94-12.43,35,35,0,0,1-4.66-18,34.68,34.68,0,0,1,4.66-18,32.66,32.66,0,0,1,12.94-12.37,41.33,41.33,0,0,1,37.35,0,32.7,32.7,0,0,1,12.93,12.37,34.68,34.68,0,0,1,4.66,18,35,35,0,0,1-4.66,18,32.57,32.57,0,0,1-12.93,12.43,41.33,41.33,0,0,1-37.35,0Zm33.14-15q5.73-5.86,5.74-15.43t-5.74-15.42a19.46,19.46,0,0,0-14.53-5.87,19.25,19.25,0,0,0-14.47,5.87Q342,70.22,342,79.78t5.67,15.43a19.25,19.25,0,0,0,14.47,5.86A19.46,19.46,0,0,0,376.63,95.21Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M480.39,19.23v94.59H465.1V105a24.75,24.75,0,0,1-9.76,7.27,33,33,0,0,1-12.81,2.42,35.84,35.84,0,0,1-17.65-4.33,31.06,31.06,0,0,1-12.3-12.31,36.71,36.71,0,0,1-4.47-18.29,36.4,36.4,0,0,1,4.47-18.23,31.27,31.27,0,0,1,12.3-12.24A35.94,35.94,0,0,1,442.53,45a32.36,32.36,0,0,1,12.37,2.3,24.89,24.89,0,0,1,9.56,6.88V19.23ZM454.77,98.46A18.92,18.92,0,0,0,462,91a22.87,22.87,0,0,0,2.67-11.22A22.87,22.87,0,0,0,462,68.56a18.89,18.89,0,0,0-7.27-7.45,21.65,21.65,0,0,0-20.65,0,18.89,18.89,0,0,0-7.27,7.45,22.87,22.87,0,0,0-2.67,11.22A22.87,22.87,0,0,0,426.85,91a18.92,18.92,0,0,0,7.27,7.46,21.73,21.73,0,0,0,20.65,0Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M540.69,45V60.15a20.64,20.64,0,0,0-3.7-.38q-9.3,0-14.53,5.42T517.23,80.8v33H501.3V45.75h15.17v9.94Q523.35,45,540.69,45Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M555,31.79A8.94,8.94,0,0,1,552,25,8.94,8.94,0,0,1,555,18.15a10.2,10.2,0,0,1,7.26-2.74A10.55,10.55,0,0,1,569.5,18a8.43,8.43,0,0,1,2.93,6.56,9.58,9.58,0,0,1-2.87,7.08,9.92,9.92,0,0,1-7.33,2.87A10.2,10.2,0,0,1,555,31.79Zm-.77,14h15.94v68.07H554.2Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M650.32,52.5q7.77,7.53,7.77,22.31v39H642.16v-37q0-8.92-4.21-13.45t-12-4.52q-8.81,0-13.9,5.29T607,79.4v34.42H591V45.75h15.17v8.79a25,25,0,0,1,9.94-7.14A35.91,35.91,0,0,1,629.67,45Q642.54,45,650.32,52.5Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M716.6,110.12a18.65,18.65,0,0,1-6.82,3.44,30.46,30.46,0,0,1-8.47,1.15q-11.22,0-17.34-5.86t-6.12-17.09V30.7h15.94V46.26H712V59H693.79V91.38c0,3.32.82,5.85,2.48,7.59a9.14,9.14,0,0,0,7,2.61,14,14,0,0,0,8.92-2.8Z" transform="translate(-19.79)" fill="#fff"/>
-    <path d="M789,52.5q7.77,7.53,7.78,22.31v39H780.85v-37q0-8.92-4.21-13.45t-12-4.52q-8.79,0-13.89,5.29t-5.1,15.23v34.42H729.73V19.23h15.94V53.65a25.82,25.82,0,0,1,9.75-6.44A36,36,0,0,1,768.36,45Q781.23,45,789,52.5Z" transform="translate(-19.79)" fill="#fff"/>
-  </g>
-</svg>
--- a/assets/images/text-logo.svg
+++ b/assets/images/text-logo.svg
@ -1,16 +1,16 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 777 141.73">
  <g>
-    <path d="M159.07,89.29A70.94,70.94,0,1,0,20,63.52H32A58.78,58.78,0,0,1,145.23,49.93l-11.66,3.12a46.54,46.54,0,0,0-29-26.52l-2.15,12.13a34.31,34.31,0,0,1,2.77,63.26l3.19,11.9a46.52,46.52,0,0,0,28.33-49l11.62-3.1A57.94,57.94,0,0,1,147.27,85Z" transform="translate(-19.79)" fill="#5da545" fill-rule="evenodd"/>
-    <path d="M108.92,139.3A70.93,70.93,0,0,1,19.79,76h12a59.48,59.48,0,0,0,1.78,9.91,58.73,58.73,0,0,0,3.63,9.91l10.68-6.41a46.58,46.58,0,0,1,44.72-65L90.43,36.54A34.38,34.38,0,0,0,57.36,79.75C57.67,80.88,58,82,58.43,83l13.66-8.19L68,63.93l12.9-13.25,16.31-3.51L101.9,53l-7.52,7.61-6.55,2.06-4.69,4.82,2.3,6.38s4.64,4.94,4.65,4.94l6.57-1.74,4.67-5.13,10.2-3.24,3,6.84L104.05,88.43,86.41,94l-7.92-8.81L64.7,93.48a34.44,34.44,0,0,0,28.72,11.59L96.61,117A46.6,46.6,0,0,1,54.13,99.83l-10.64,6.38a58.81,58.81,0,0,0,99.6-9.77l11.8,4.29A70.77,70.77,0,0,1,108.92,139.3Z" transform="translate(-19.79)" fill="#5da545"/>
+    <path d="M159.07,89.29A70.94,70.94,0,1,0,20,63.52H32A58.78,58.78,0,0,1,145.23,49.93l-11.66,3.12a46.54,46.54,0,0,0-29-26.52l-2.15,12.13a34.31,34.31,0,0,1,2.77,63.26l3.19,11.9a46.52,46.52,0,0,0,28.33-49l11.62-3.1A57.94,57.94,0,0,1,147.27,85Z" transform="translate(-19.79)" fill="var(--color-brand)" fill-rule="evenodd"/>
+    <path d="M108.92,139.3A70.93,70.93,0,0,1,19.79,76h12a59.48,59.48,0,0,0,1.78,9.91,58.73,58.73,0,0,0,3.63,9.91l10.68-6.41a46.58,46.58,0,0,1,44.72-65L90.43,36.54A34.38,34.38,0,0,0,57.36,79.75C57.67,80.88,58,82,58.43,83l13.66-8.19L68,63.93l12.9-13.25,16.31-3.51L101.9,53l-7.52,7.61-6.55,2.06-4.69,4.82,2.3,6.38s4.64,4.94,4.65,4.94l6.57-1.74,4.67-5.13,10.2-3.24,3,6.84L104.05,88.43,86.41,94l-7.92-8.81L64.7,93.48a34.44,34.44,0,0,0,28.72,11.59L96.61,117A46.6,46.6,0,0,1,54.13,99.83l-10.64,6.38a58.81,58.81,0,0,0,99.6-9.77l11.8,4.29A70.77,70.77,0,0,1,108.92,139.3Z" transform="translate(-19.79)" fill="var(--color-brand)"/>
  </g>
  <g>
-    <path d="M303,52.44q7.51,7.45,7.52,22.37v39H294.54v-37q0-8.92-4-13.45t-11.35-4.52q-8,0-12.87,5.29t-4.85,15.1v34.55H245.59v-37q0-8.92-4-13.45t-11.35-4.52q-8.16,0-12.94,5.22t-4.78,15.17v34.55H196.64V45.75h15.17v8.66a24.78,24.78,0,0,1,9.56-7A32.51,32.51,0,0,1,234.11,45a30.83,30.83,0,0,1,13.58,2.87,22,22,0,0,1,9.37,8.48A28.31,28.31,0,0,1,267.89,48a35.16,35.16,0,0,1,14.66-3Q295.43,45,303,52.44Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M343.49,110.25a32.53,32.53,0,0,1-12.94-12.43,35,35,0,0,1-4.66-18,34.68,34.68,0,0,1,4.66-18,32.66,32.66,0,0,1,12.94-12.37,41.33,41.33,0,0,1,37.35,0,32.7,32.7,0,0,1,12.93,12.37,34.68,34.68,0,0,1,4.66,18,35,35,0,0,1-4.66,18,32.57,32.57,0,0,1-12.93,12.43,41.33,41.33,0,0,1-37.35,0Zm33.14-15q5.73-5.86,5.74-15.43t-5.74-15.42a19.46,19.46,0,0,0-14.53-5.87,19.25,19.25,0,0,0-14.47,5.87Q342,70.22,342,79.78t5.67,15.43a19.25,19.25,0,0,0,14.47,5.86A19.46,19.46,0,0,0,376.63,95.21Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M480.39,19.23v94.59H465.1V105a24.75,24.75,0,0,1-9.76,7.27,33,33,0,0,1-12.81,2.42,35.84,35.84,0,0,1-17.65-4.33,31.06,31.06,0,0,1-12.3-12.31,36.71,36.71,0,0,1-4.47-18.29,36.4,36.4,0,0,1,4.47-18.23,31.27,31.27,0,0,1,12.3-12.24A35.94,35.94,0,0,1,442.53,45a32.36,32.36,0,0,1,12.37,2.3,24.89,24.89,0,0,1,9.56,6.88V19.23ZM454.77,98.46A18.92,18.92,0,0,0,462,91a22.87,22.87,0,0,0,2.67-11.22A22.87,22.87,0,0,0,462,68.56a18.89,18.89,0,0,0-7.27-7.45,21.65,21.65,0,0,0-20.65,0,18.89,18.89,0,0,0-7.27,7.45,22.87,22.87,0,0,0-2.67,11.22A22.87,22.87,0,0,0,426.85,91a18.92,18.92,0,0,0,7.27,7.46,21.73,21.73,0,0,0,20.65,0Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M540.69,45V60.15a20.64,20.64,0,0,0-3.7-.38q-9.3,0-14.53,5.42T517.23,80.8v33H501.3V45.75h15.17v9.94Q523.35,45,540.69,45Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M555,31.79A8.94,8.94,0,0,1,552,25,8.94,8.94,0,0,1,555,18.15a10.2,10.2,0,0,1,7.26-2.74A10.55,10.55,0,0,1,569.5,18a8.43,8.43,0,0,1,2.93,6.56,9.58,9.58,0,0,1-2.87,7.08,9.92,9.92,0,0,1-7.33,2.87A10.2,10.2,0,0,1,555,31.79Zm-.77,14h15.94v68.07H554.2Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M650.32,52.5q7.77,7.53,7.77,22.31v39H642.16v-37q0-8.92-4.21-13.45t-12-4.52q-8.81,0-13.9,5.29T607,79.4v34.42H591V45.75h15.17v8.79a25,25,0,0,1,9.94-7.14A35.91,35.91,0,0,1,629.67,45Q642.54,45,650.32,52.5Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M716.6,110.12a18.65,18.65,0,0,1-6.82,3.44,30.46,30.46,0,0,1-8.47,1.15q-11.22,0-17.34-5.86t-6.12-17.09V30.7h15.94V46.26H712V59H693.79V91.38c0,3.32.82,5.85,2.48,7.59a9.14,9.14,0,0,0,7,2.61,14,14,0,0,0,8.92-2.8Z" transform="translate(-19.79)" fill="#19202c"/>
-    <path d="M789,52.5q7.77,7.53,7.78,22.31v39H780.85v-37q0-8.92-4.21-13.45t-12-4.52q-8.79,0-13.89,5.29t-5.1,15.23v34.42H729.73V19.23h15.94V53.65a25.82,25.82,0,0,1,9.75-6.44A36,36,0,0,1,768.36,45Q781.23,45,789,52.5Z" transform="translate(-19.79)" fill="#19202c"/>
+    <path d="M303,52.44q7.51,7.45,7.52,22.37v39H294.54v-37q0-8.92-4-13.45t-11.35-4.52q-8,0-12.87,5.29t-4.85,15.1v34.55H245.59v-37q0-8.92-4-13.45t-11.35-4.52q-8.16,0-12.94,5.22t-4.78,15.17v34.55H196.64V45.75h15.17v8.66a24.78,24.78,0,0,1,9.56-7A32.51,32.51,0,0,1,234.11,45a30.83,30.83,0,0,1,13.58,2.87,22,22,0,0,1,9.37,8.48A28.31,28.31,0,0,1,267.89,48a35.16,35.16,0,0,1,14.66-3Q295.43,45,303,52.44Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M343.49,110.25a32.53,32.53,0,0,1-12.94-12.43,35,35,0,0,1-4.66-18,34.68,34.68,0,0,1,4.66-18,32.66,32.66,0,0,1,12.94-12.37,41.33,41.33,0,0,1,37.35,0,32.7,32.7,0,0,1,12.93,12.37,34.68,34.68,0,0,1,4.66,18,35,35,0,0,1-4.66,18,32.57,32.57,0,0,1-12.93,12.43,41.33,41.33,0,0,1-37.35,0Zm33.14-15q5.73-5.86,5.74-15.43t-5.74-15.42a19.46,19.46,0,0,0-14.53-5.87,19.25,19.25,0,0,0-14.47,5.87Q342,70.22,342,79.78t5.67,15.43a19.25,19.25,0,0,0,14.47,5.86A19.46,19.46,0,0,0,376.63,95.21Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M480.39,19.23v94.59H465.1V105a24.75,24.75,0,0,1-9.76,7.27,33,33,0,0,1-12.81,2.42,35.84,35.84,0,0,1-17.65-4.33,31.06,31.06,0,0,1-12.3-12.31,36.71,36.71,0,0,1-4.47-18.29,36.4,36.4,0,0,1,4.47-18.23,31.27,31.27,0,0,1,12.3-12.24A35.94,35.94,0,0,1,442.53,45a32.36,32.36,0,0,1,12.37,2.3,24.89,24.89,0,0,1,9.56,6.88V19.23ZM454.77,98.46A18.92,18.92,0,0,0,462,91a22.87,22.87,0,0,0,2.67-11.22A22.87,22.87,0,0,0,462,68.56a18.89,18.89,0,0,0-7.27-7.45,21.65,21.65,0,0,0-20.65,0,18.89,18.89,0,0,0-7.27,7.45,22.87,22.87,0,0,0-2.67,11.22A22.87,22.87,0,0,0,426.85,91a18.92,18.92,0,0,0,7.27,7.46,21.73,21.73,0,0,0,20.65,0Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M540.69,45V60.15a20.64,20.64,0,0,0-3.7-.38q-9.3,0-14.53,5.42T517.23,80.8v33H501.3V45.75h15.17v9.94Q523.35,45,540.69,45Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M555,31.79A8.94,8.94,0,0,1,552,25,8.94,8.94,0,0,1,555,18.15a10.2,10.2,0,0,1,7.26-2.74A10.55,10.55,0,0,1,569.5,18a8.43,8.43,0,0,1,2.93,6.56,9.58,9.58,0,0,1-2.87,7.08,9.92,9.92,0,0,1-7.33,2.87A10.2,10.2,0,0,1,555,31.79Zm-.77,14h15.94v68.07H554.2Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M650.32,52.5q7.77,7.53,7.77,22.31v39H642.16v-37q0-8.92-4.21-13.45t-12-4.52q-8.81,0-13.9,5.29T607,79.4v34.42H591V45.75h15.17v8.79a25,25,0,0,1,9.94-7.14A35.91,35.91,0,0,1,629.67,45Q642.54,45,650.32,52.5Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M716.6,110.12a18.65,18.65,0,0,1-6.82,3.44,30.46,30.46,0,0,1-8.47,1.15q-11.22,0-17.34-5.86t-6.12-17.09V30.7h15.94V46.26H712V59H693.79V91.38c0,3.32.82,5.85,2.48,7.59a9.14,9.14,0,0,0,7,2.61,14,14,0,0,0,8.92-2.8Z" transform="translate(-19.79)" fill="currentColor"/>
+    <path d="M789,52.5q7.77,7.53,7.78,22.31v39H780.85v-37q0-8.92-4.21-13.45t-12-4.52q-8.79,0-13.89,5.29t-5.1,15.23v34.42H729.73V19.23h15.94V53.65a25.82,25.82,0,0,1,9.75-6.44A36,36,0,0,1,768.36,45Q781.23,45,789,52.5Z" transform="translate(-19.79)" fill="currentColor"/>
  </g>
 </svg>
--- a/assets/images/utils/calendar.svg
+++ b/assets/images/utils/calendar.svg
@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M8 7V3M16 7V3M7 11H17M5 21H19C20.1046 21 21 20.1046 21 19V7C21 5.89543 20.1046 5 19 5H5C3.89543 5 3 5.89543 3 7V19C3 20.1046 3.89543 21 5 21Z"
 		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+</svg>
--- a/assets/images/utils/check.svg
+++ b/assets/images/utils/check.svg
@ -1,4 +1,4 @@
 <svg fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-	viewBox="0 0 24 24">
+	viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 	<path d="M20 6L9 17l-5-5" />
-</svg>
+</svg>
--- a/assets/images/utils/client.svg
+++ b/assets/images/utils/client.svg
@ -1,4 +1,4 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
-</svg>
+</svg>
--- a/assets/images/utils/download-alt.svg
+++ b/assets/images/utils/download-alt.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+  <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
+</svg>
--- a/assets/images/utils/download.svg
+++ b/assets/images/utils/download.svg
@ -1,5 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-	<path
-		d="M4 16L4 17C4 18.6569 5.34315 20 7 20L17 20C18.6569 20 20 18.6569 20 17L20 16M16 12L12 16M12 16L8 12M12 16L12 4"
-		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+</svg>
--- a/assets/images/utils/dropdown.svg
+++ b/assets/images/utils/dropdown.svg
@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path d="M19 9L12 16L5 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+</svg>
--- a/assets/images/utils/edit.svg
+++ b/assets/images/utils/edit.svg
@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 	<path
 		d="M11 5H6C4.89543 5 4 5.89543 4 7V18C4 19.1046 4.89543 20 6 20H17C18.1046 20 19 19.1046 19 18V13M17.5858 3.58579C18.3668 2.80474 19.6332 2.80474 20.4142 3.58579C21.1953 4.36683 21.1953 5.63316 20.4142 6.41421L11.8284 15H9L9 12.1716L17.5858 3.58579Z"
 		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+</svg>
--- a/assets/images/utils/exit.svg
+++ b/assets/images/utils/exit.svg
@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
--- a/assets/images/utils/external.svg
+++ b/assets/images/utils/external.svg
@ -1,6 +1,6 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
    <polyline points="15 3 21 3 21 9"></polyline>
    <line x1="10" y1="14" x2="21" y2="3"></line>
-</svg>
+</svg>
--- a/assets/images/utils/eye-off.svg
+++ b/assets/images/utils/eye-off.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
--- a/assets/images/utils/eye.svg
+++ b/assets/images/utils/eye.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
--- a/assets/images/utils/file-text.svg
+++ b/assets/images/utils/file-text.svg
@ -1,8 +1,8 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 	stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
 	<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
 	<polyline points="14 2 14 8 20 8"></polyline>
 	<line x1="16" y1="13" x2="8" y2="13"></line>
 	<line x1="16" y1="17" x2="8" y2="17"></line>
 	<polyline points="10 9 9 9 8 9"></polyline>
-</svg>
+</svg>
--- a/assets/images/utils/gap.svg
+++ b/assets/images/utils/gap.svg
@ -1,4 +1,4 @@
-<svg width="14" height="2" viewBox="0 0 14 2">
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="2" viewBox="0 0 14 2">
 	<path d="M18,12H6" transform="translate(-5 -11)" fill="none" stroke="currentColor" stroke-linecap="round"
 		stroke-linejoin="round" stroke-width="2" />
-</svg>
+</svg>
--- a/assets/images/utils/github.svg
+++ b/assets/images/utils/github.svg
@ -1,5 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve">
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve">
 	<path fill="currentColor" class="st0"
 		d="m12 1c-6.3 0-11.3 5-11.3 11.3 0 5 3.2 9.2 7.7 10.7 0.6 0.1 0.8-0.2 0.8-0.5v-1.9c-3.2 0.6-3.8-1.6-3.8-1.6-0.5-1.3-1.3-1.7-1.3-1.7-1-0.7 0.1-0.7 0.1-0.7 1.1 0.1 1.7 1.2 1.7 1.2 1 1.7 2.7 1.2 3.3 0.9 0.1-0.7 0.4-1.2 0.7-1.5-2.5-0.2-5.1-1.2-5.1-5.5 0-1.2 0.4-2.2 1.2-3-0.1-0.3-0.5-1.4 0.1-3 0 0 1-0.3 3.1 1.2 0.9-0.3 1.8-0.5 2.8-0.5s1.9 0.1 2.8 0.4c2.2-1.5 3.1-1.2 3.1-1.2 0.6 1.6 0.2 2.7 0.1 3 0.7 0.8 1.2 1.8 1.2 3 0 4.4-2.6 5.3-5.2 5.6 0.4 0.3 0.8 1 0.8 2.1v3.1c0 0.3 0.2 0.7 0.8 0.5 4.5-1.5 7.7-5.7 7.7-10.7 0-6.2-5-11.2-11.3-11.2z" />
-</svg>
+</svg>
--- a/assets/images/utils/hamburger.svg
+++ b/assets/images/utils/hamburger.svg
@ -1,6 +1,6 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
    stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu">
    <line x1="3" y1="12" x2="21" y2="12" />
    <line x1="3" y1="6" x2="21" y2="6" />
    <line x1="3" y1="18" x2="21" y2="18" />
-</svg>
+</svg>
--- a/assets/images/utils/heart.svg
+++ b/assets/images/utils/heart.svg
@ -1,3 +1,3 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
 </svg>
--- a/assets/images/utils/info.svg
+++ b/assets/images/utils/info.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
--- a/assets/images/utils/issues.svg
+++ b/assets/images/utils/issues.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
--- a/assets/images/utils/left-arrow.svg
+++ b/assets/images/utils/left-arrow.svg
@ -1,4 +1,4 @@
-<svg width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
+<svg xmlns="http://www.w3.org/2000/svg" width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
 	<path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(-1.586 -3.586)" fill="none"
-		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
-</svg>
+		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
+</svg>
--- a/assets/images/utils/log-out.svg
+++ b/assets/images/utils/log-out.svg
@ -1,6 +1,6 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
    <polyline points="16 17 21 12 16 7"></polyline>
    <line x1="21" y1="12" x2="9" y2="12"></line>
-</svg>
+</svg>
--- a/assets/images/utils/moon.svg
+++ b/assets/images/utils/moon.svg
@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
-</svg>
+</svg>
--- a/assets/images/utils/plus.svg
+++ b/assets/images/utils/plus.svg
@ -5,7 +5,7 @@
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
-  class="new-version"
+  xmlns="http://www.w3.org/2000/svg"
 >
  <line x1="12" y1="5" x2="12" y2="19"></line>
  <line x1="5" y1="12" x2="19" y2="12"></line>
--- a/assets/images/utils/report.svg
+++ b/assets/images/utils/report.svg
@ -1,4 +1 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-    d="M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016zM12 9v2m0 4h.01" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/><line x1="4" y1="22" x2="4" y2="15"/></svg>
--- a/assets/images/utils/right-arrow.svg
+++ b/assets/images/utils/right-arrow.svg
@ -1,4 +1,4 @@
-<svg width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
+<svg xmlns="http://www.w3.org/2000/svg" width="14.414" height="12.162" viewBox="0 0 14.414 12.162">
 	<path d="M7.667,14.333,3,9.667m0,0L7.667,5M3,9.667H15" transform="translate(16 15.748) rotate(180)" fill="none"
-		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
-</svg>
+		stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" />
+</svg>
--- a/assets/images/utils/save.svg
+++ b/assets/images/utils/save.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
--- a/assets/images/utils/search.svg
+++ b/assets/images/utils/search.svg
@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 	<path
 		d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
 		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+</svg>
--- a/assets/images/utils/server.svg
+++ b/assets/images/utils/server.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>
--- a/assets/images/utils/settings.svg
+++ b/assets/images/utils/settings.svg
@ -1,6 +1,6 @@
-<svg width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
 	stroke-width="2" viewBox="0 0 24 24">
 	<circle cx="12" cy="12" r="3" />
 	<path
 		d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
-</svg>
+</svg>
--- a/assets/images/utils/shield.svg
+++ b/assets/images/utils/shield.svg
@ -1,4 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
 	stroke-linecap="round" stroke-linejoin="round" class="feather feather-shield">
 	<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
-</svg>
+</svg>
--- a/assets/images/utils/star.svg
+++ b/assets/images/utils/star.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
--- a/assets/images/utils/sun.svg
+++ b/assets/images/utils/sun.svg
@ -1,4 +1,4 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <circle cx="12" cy="12" r="5"></circle>
    <line x1="12" y1="1" x2="12" y2="3"></line>
@ -9,4 +9,4 @@
    <line x1="21" y1="12" x2="23" y2="12"></line>
    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
-</svg>
+</svg>
--- a/assets/images/utils/sunrise.svg
+++ b/assets/images/utils/sunrise.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>
--- a/assets/images/utils/tag.svg
+++ b/assets/images/utils/tag.svg
@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
 	<path
 		d="M7 7H7.01M7 3H12C12.5119 2.99999 13.0237 3.19525 13.4142 3.58579L20.4143 10.5858C21.1953 11.3668 21.1953 12.6332 20.4143 13.4142L13.4142 20.4142C12.6332 21.1953 11.3668 21.1953 10.5858 20.4142L3.58579 13.4142C3.19526 13.0237 3 12.5118 3 12V7C3 4.79086 4.79086 3 7 3Z"
 		stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-</svg>
+</svg>
--- a/assets/images/utils/trash.svg
+++ b/assets/images/utils/trash.svg
@ -1,13 +1 @@
-<svg
-viewBox="0 0 24 24"
-fill="none"
-stroke="currentColor"
-stroke-width="2"
-stroke-linecap="round"
-stroke-linejoin="round"
->
-<polyline points="3 6 5 6 21 6"></polyline>
-<path
-  d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
-></path>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
--- a/assets/images/utils/unknown.svg
+++ b/assets/images/utils/unknown.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
--- a/assets/images/utils/updated.svg
+++ b/assets/images/utils/updated.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"></polyline><polyline points="23 20 23 14 17 14"></polyline><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path></svg>
--- a/assets/images/utils/upload.svg
+++ b/assets/images/utils/upload.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
--- a/assets/images/utils/user.svg
+++ b/assets/images/utils/user.svg
@ -1,5 +1,5 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
    <circle cx="12" cy="7" r="4"></circle>
-</svg>
+</svg>
--- a/assets/images/utils/users.svg
+++ b/assets/images/utils/users.svg
@ -1,7 +1,7 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
    <circle cx="9" cy="7" r="4"></circle>
    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
-</svg>
+</svg>
--- a/assets/images/utils/version.svg
+++ b/assets/images/utils/version.svg
@ -1 +1 @@
-<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><line x1="1.05" y1="12" x2="7" y2="12"></line><line x1="17.01" y1="12" x2="22.96" y2="12"></line></svg>
--- a/assets/images/utils/wiki.svg
+++ b/assets/images/utils/wiki.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
--- a/assets/images/utils/x.svg
+++ b/assets/images/utils/x.svg
@ -1,5 +1,5 @@
-<svg viewBox="0 0 20 20" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd"
    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
    clip-rule="evenodd" />
-</svg>
+</svg>
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@ -3,27 +3,36 @@
 .iconified-input {
  align-items: center;
  display: inline-flex;
-  flex-direction: row-reverse;

  input {
-    padding-left: 2.5rem;
+    padding-left: 2rem;
  }

  svg {
-    color: var(--color-icon);
+    height: 1rem;
+    z-index: 1;
+
+    color: var(--color-text);
    margin-right: -2rem;
  }
 }

 .iconified-button {
-  padding: 0.25rem 0.5rem;
-  font-size: var(--font-size-sm);
  display: flex;
+  padding: 0.25rem 1rem;
+  margin: 0 0.25rem 0 0;
+  font-size: var(--font-size-nm);
  align-items: center;
+  cursor: pointer;
+
+  box-shadow: inset 0px -1px 1px rgba(17, 24, 39, 0.1);
+
+  max-height: 2rem;

  color: var(--color-button-text);
  background-color: var(--color-button-bg);
-  border-radius: var(--size-rounded-control);
+  text-decoration: none;
+  border-radius: 2rem;

  &:hover,
  &:focus {
@ -66,14 +75,10 @@
 }

 .text-link {
+  color: var(--color-link);
  text-decoration: underline;
 }

-.required:after {
-  content: ' *';
-  color: red;
-}
-
 .markdown-body {
  blockquote,
  details,
@ -92,6 +97,7 @@
    padding: 0;
    line-height: 1.5;
    word-wrap: break-word;
+    overflow-wrap: anywhere;
  }

  h1,
@ -291,104 +297,6 @@
  }
 }

-.tabs {
-  display: flex;
-  padding: 0.5rem 1rem;
-  .filler {
-    flex-grow: 1;
-  }
-}
-
-.tabs a.tab {
-  user-select: none;
-  display: flex;
-  align-items: center;
-  padding: 0.5rem 0.25rem 0.2rem;
-  margin: auto 0.5rem;
-
-  span {
-    border-bottom: 3px solid transparent;
-  }
-
-  svg {
-    width: 1rem;
-    height: 1rem;
-    margin-right: 0.4rem;
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--color-text-medium);
-
-    span {
-      border-bottom: 3px solid var(--color-brand-disabled);
-    }
-  }
-
-  &.nuxt-link-exact-active,
-  &.active-path {
-    color: var(--color-text-dark);
-
-    span {
-      border-bottom: 3px solid var(--color-brand);
-    }
-  }
-}
-
-.sidebar {
-  .card {
-    padding: var(--spacing-card-md);
-    margin-bottom: var(--spacing-card-md);
-    @extend %card;
-
-    &.page-nav {
-      .tab {
-        padding: var(--spacing-card-sm);
-        display: flex;
-        align-items: center;
-        border-radius: var(--size-rounded-control);
-        margin-bottom: 0.5rem;
-        @extend %transparent-clickable;
-
-        svg {
-          color: var(--color-icon);
-          margin-right: 5px;
-          height: 1.25rem;
-          flex-shrink: 0;
-        }
-
-        &.nuxt-link-exact-active,
-        &.active-path {
-          svg {
-            color: var(--color-brand-light);
-          }
-        }
-      }
-
-      .tab:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  @media screen and (min-width: 1024px) {
-    width: 300px;
-  }
-}
-
-.sidebar-l {
-  @extend .sidebar;
-
-  @media screen and (min-width: 1024px) {
-    margin-right: var(--spacing-card-lg);
-  }
-}
-
-.sidebar-r {
-  @extend .sidebar;
-  margin-left: var(--spacing-card-lg);
-}
-
 .button {
  //width: max-content;
  margin: auto 0;
@ -397,6 +305,7 @@
  color: var(--color-button-text);
  background-color: var(--color-button-bg);
  font-weight: var(--font-weight-medium);
+  font-size: var(--font-size-nm);
  &:focus,
  &:hover {
    background-color: var(--color-button-bg-hover);
@ -413,7 +322,24 @@
 }

 .transparent-button {
-  @extend %transparent-clickable;
+  border-radius: var(--size-rounded-control);
+  color: var(--color-text);
+  background-color: transparent;
+
+  &:focus,
+  &:hover,
+  &.selected,
+  &.nuxt-link-exact-active,
+  &.active-path {
+    color: var(--color-transparent-button-text-hover);
+    background-color: var(--color-transparent-button-bg-hover);
+  }
+
+  &:active {
+    color: var(--color-transparent-button-text-active);
+    background-color: var(--color-transparent-button-bg-active);
+  }
+
  margin: auto 0;
  padding: 6px 20px;
  text-decoration: underline;
@ -434,19 +360,45 @@
  }
 }

+.brand-button-colors {
+  box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.25);
+  color: var(--color-brand-inverted);
+  background-color: var(--color-brand);
+  &:focus,
+  &:hover {
+    background-color: var(--color-brand-hover);
+    color: var(--color-brand-inverted);
+  }
+  &:active {
+    background-color: var(--color-brand-active);
+    color: var(--color-brand-inverted);
+  }
+}
+
 .multiselect--above .multiselect__content-wrapper {
  border-top: none !important;
 }

 .multiselect {
  color: var(--color-text) !important;
+
  input {
    background: transparent;
  }
+
+  &.top-margin {
+    .multiselect__tags {
+      padding-top: 10px;
+    }
+  }
+
  .multiselect__tags {
+    border-radius: 1.25rem;
    background: var(--color-dropdown-bg);
    border: none;
    cursor: pointer;
+    padding-left: 1rem;
+
    &:active,
    &:hover {
      background: var(--color-button-bg-hover);
@ -459,6 +411,7 @@
      background: transparent;
    }
    .multiselect__tag {
+      border-radius: 2rem;
      color: var(--color-text-dark);
      background: transparent;
      border: 2px solid var(--color-brand);
@ -469,10 +422,17 @@
        color: var(--color-text-dark);
      }
    }
+    .multiselect__placeholder {
+      color: var(--color-text);
+      font-size: 16px;
+      line-height: 20px;
+    }
  }
  .multiselect__content-wrapper {
    background: var(--color-dropdown-bg);
    border: none;
+    overflow-x: hidden;
+
    .multiselect__element {
      .multiselect__option--highlight {
        background: var(--color-button-bg-active);
@ -495,17 +455,6 @@
  }
 }

-.section-header {
-  @extend %card;
-  padding: var(--spacing-card-md) var(--spacing-card-lg);
-  margin-bottom: var(--spacing-card-md);
-  h3 {
-    margin: auto 0;
-    color: var(--color-text-dark);
-    font-weight: var(--font-weight-extrabold);
-  }
-}
-
 label {
  display: flex;
  flex-direction: column;
@ -603,3 +552,129 @@ label {
    border: 2px solid var(--color-brand);
  }
 }
+
+.download-button {
+  display: flex;
+  align-items: center;
+  height: 1.75rem;
+  width: 1.75rem;
+  border-radius: 1.5rem;
+  background-color: var(--color-button-bg);
+  margin-right: var(--spacing-card-sm);
+  svg {
+    width: 1.25rem;
+    margin: auto;
+  }
+  flex-shrink: 0;
+}
+
+.textarea-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  textarea {
+    border-radius: var(--size-rounded-sm);
+    flex: 1;
+    overflow-y: auto;
+    resize: none;
+    max-width: 100%;
+  }
+}
+
+.styled-tabs {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--spacing-card-sm);
+  font-weight: bold;
+  color: var(--color-text-inactive);
+  overflow-x: scroll;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .tab {
+    padding: 0;
+    margin-right: var(--spacing-card-bg);
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    span {
+      font-weight: bold;
+      display: inline-block;
+      padding-bottom: 6px;
+      position: relative;
+    }
+
+    span::before {
+      background-color: transparent;
+      content: '';
+      position: absolute;
+      width: 60%;
+      height: 4px;
+      bottom: 0;
+      left: 20%;
+    }
+
+    &:hover,
+    &:focus {
+      color: var(--color-text);
+
+      span::before {
+        background-color: var(--color-brand-disabled);
+      }
+    }
+
+    &.nuxt-link-active,
+    &.selected {
+      color: var(--color-text);
+
+      span::before {
+        background-color: var(--color-brand);
+        box-shadow: 0 0 1px 0 var(--color-brand);
+      }
+    }
+  }
+
+  .right {
+    margin-left: auto;
+  }
+}
+
+.error {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  .icon {
+    width: 8rem;
+    height: 8rem;
+    margin: 1.5rem 0;
+  }
+  .text {
+    margin-bottom: 2rem;
+    font-size: 1.25rem;
+    text-align: center;
+  }
+  .link {
+    text-decoration: underline;
+  }
+}
+
+.card {
+  min-height: var(--font-size-2xl);
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  background: var(--color-raised-bg);
+  border-radius: var(--size-rounded-card);
+
+  margin-bottom: var(--spacing-card-md);
+
+  // box-shadow: var(--shadow-card);
+}
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@ -1,32 +1,36 @@
+html {
+  @extend .light-mode;
+}
+
 .light-mode {
-  --color-icon: #718096;
-  --color-text: #4a5568;
-  --color-text-medium: #2a303d;
+  --color-icon: #6b7280;
+  --color-text: hsl(221, 39%, 11%);
+  --color-text-secondary: hsl(220, 9%, 46%);
+  --color-text-inactive: hsl(215, 14%, 34%);
  --color-text-dark: #1a202c;
  --color-heading: #2c313d;
-  --color-heading-light: #777e8d;
-  --color-bg: #edf2f7;
+  --color-bg: hsl(220, 13%, 91%);
  --color-raised-bg: #ffffff;
-  --color-divider: #eaecef;
+  --color-divider: hsl(220, 13%, 91%);
  --color-divider-dark: #c8cdd3;

  --color-text-inverted: var(--color-bg);
  --color-bg-inverted: var(--color-text);

-  --color-brand: #5da545;
-  --color-brand-hover: #53923e;
-  --color-brand-active: #4b8138;
-  --color-brand-light: #6bac57;
+  --color-brand: #30b27b;
+  --color-brand-hover: #1e9565;
+  --color-brand-active: #177955;
+  --color-brand-light: #30b27b;
  --color-brand-inverted: #ffffff;
-  --color-brand-2: #5fa33b;
-  --color-brand-3: #c5ddb7;
+  --color-brand-2: #30b27b;
+  --color-brand-3: #30b27b;
  --color-brand-disabled: #e2e8f0;

-  --color-button-bg: var(--color-bg);
+  --color-button-bg: #e6e7eb;
  --color-button-text: var(--color-text-dark);
-  --color-button-bg-hover: #e0e7ee;
+  --color-button-bg-hover: #d9dce0;
  --color-button-text-hover: #1b1e24;
-  --color-button-bg-active: #d0d7df;
+  --color-button-bg-active: #c3c6cb;
  --color-button-text-active: var(--color-button-text-hover);
  --color-button-bg-disabled: #eceef0;
  --color-button-text-disabled: #9da3ac;
@ -57,12 +61,12 @@

  --color-badge-gray-text: #646161;
  --color-badge-gray-bg: #c8c1c1;
-  --color-badge-red-text: #9b2c2c;
-  --color-badge-red-bg: #fed7d7;
-  --color-badge-green-text: #276749;
-  --color-badge-green-bg: #c6f6d5;
-  --color-badge-yellow-text: #675027;
-  --color-badge-yellow-bg: #f6e8c6;
+  --color-badge-red-text: #6e1931;
+  --color-badge-red-bg: #db3162;
+  --color-badge-green-text: #184e38;
+  --color-badge-green-bg: #24a54e;
+  --color-badge-yellow-text: #755920;
+  --color-badge-yellow-bg: #f7bb43;

  --color-block-quote: var(--color-tooltip-bg);
  --color-header-underline: var(--color-tooltip-text);
@ -70,39 +74,43 @@

  --color-table-border: #dfe2e5;
  --color-table-alternate-row: #f6f8fa;
+
+  --shadow-card: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.1),
+    inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
+  --shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
+    inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
 }

 .dark-mode {
-  --color-icon: #acacac;
-  --color-text: #cecece;
-  --color-text-medium: #e4e4e4;
-  --color-text-dark: #fbf8ec;
-  --color-heading: #fbf8ec;
-  --color-heading-light: #8a8a8a;
-  --color-bg: #171719;
-  --color-raised-bg: #222224;
-  --color-divider: #49494d;
-  --color-divider-dark: #646468;
+  --color-icon: #96a2b0;
+  --color-text: #b0bac5;
+  --color-text-inactive: #929aa3;
+  --color-text-dark: #ecf9fb;
+  --color-heading: #c4cfdd;
+  --color-bg: #16181c;
+  --color-raised-bg: #26292f;
+  --color-divider: #474b54;
+  --color-divider-dark: #646c75;

  --color-text-inverted: var(--color-bg);
  --color-bg-inverted: var(--color-text);

-  --color-brand: #5da545;
-  --color-brand-hover: #6bac57;
-  --color-brand-active: #7fc46a;
-  --color-brand-light: #6bac57;
-  --color-brand-inverted: #ffffff;
-  --color-brand-2: #438121;
-  --color-brand-3: #344d26;
+  --color-brand: #1bd96a;
+  --color-brand-hover: #30b366;
+  --color-brand-active: #55f5ae;
+  --color-brand-light: #30b27b;
+  --color-brand-inverted: #000;
+  --color-brand-2: #30b27b;
+  --color-brand-3: #30b27b;
  --color-brand-disabled: #414146;

-  --color-button-bg: #343438;
+  --color-button-bg: #3e434b;
  --color-button-text: var(--color-text);
-  --color-button-bg-hover: #3a3a3f;
+  --color-button-bg-hover: #494f58;
  --color-button-text-hover: #ffffff;
-  --color-button-bg-active: #49494e;
+  --color-button-bg-active: #616570;
  --color-button-text-active: var(--color-button-text-hover);
-  --color-button-text-disabled: #444444;
+  --color-button-text-disabled: #797979;
  --color-transparent-button-bg-hover: var(--color-button-bg);
  --color-transparent-button-text-hover: var(--color-text-dark);
  --color-transparent-button-bg-active: var(--color-button-bg-hover);
@ -130,12 +138,12 @@

  --color-badge-gray-bg: #646161;
  --color-badge-gray-text: #c8c1c1;
-  --color-badge-red-bg: #9b2c2c;
-  --color-badge-red-text: #fed7d7;
-  --color-badge-green-bg: #276749;
-  --color-badge-green-text: #c6f6d5;
-  --color-badge-yellow-bg: #675027;
-  --color-badge-yellow-text: #f6e8c6;
+  --color-badge-red-text: #bd1a48;
+  --color-badge-red-bg: #db3162;
+  --color-badge-green-text: #1ebb7b;
+  --color-badge-green-bg: #24a54e;
+  --color-badge-yellow-text: #755920;
+  --color-badge-yellow-bg: #f7bb43;

  --color-block-quote: var(--color-code-bg);
  --color-header-underline: var(--color-tooltip-text);
@ -145,6 +153,16 @@
  --color-table-alternate-row: #262a30;
 }

+.oled-mode {
+  @extend .dark-mode;
+  --color-bg: #000000;
+  --color-raised-bg: #101013;
+
+  --color-button-bg: #222329;
+  --color-button-bg-hover: #2d2d32;
+  --color-button-bg-active: #3c3c40;
+}
+
 body {
  // Defaults
  background-color: var(--color-bg);
@ -156,7 +174,6 @@ body {
  font-weight: var(--font-weight-medium);
  margin: 0;
  padding: 0;
-  overflow-y: overlay;

  // Rounding sizes
  --size-rounded-xs: 0.5rem;
@ -165,14 +182,15 @@ body {
  --size-rounded-lg: 1.25rem;

  --size-rounded-max: 999999999px;
-  --size-rounded-card: 0.5rem;
-  --size-rounded-icon: 0.5rem;
+  --size-rounded-card: 1rem;
+  --size-rounded-icon: 1rem;
  --size-rounded-control: 0.25rem;
  --size-rounded-tooltip: 0.25rem;

-  --size-navbar-height: 4rem;
+  --size-navbar-height: 3.5rem;

  --spacing-card-lg: 1.5rem;
+  --spacing-card-bg: 1rem;
  --spacing-card-md: 0.75rem;
  --spacing-card-sm: 0.5rem;

@ -225,10 +243,13 @@ button {
  @extend .button;
 }

+input {
+  border-radius: 2rem;
+}
+
 input,
 textarea {
  background: var(--color-button-bg);
-  border-radius: var(--size-rounded-control);
  color: var(--color-text);
  padding: 0.5rem 1rem;
  border: 2px solid transparent;
--- a/assets/styles/injected.scss
+++ b/assets/styles/injected.scss
@ -1,93 +0,0 @@
-%card {
-  background: var(--color-raised-bg);
-  border-radius: var(--size-rounded-card);
-}
-
-%card-spaced-b {
-  @extend %card;
-  margin-bottom: var(--spacing-card-md);
-}
-
-%row {
-  display: flex;
-  flex-direction: row;
-}
-
-%column {
-  display: flex;
-  flex-direction: column;
-}
-
-%transparent-clickable {
-  border-radius: var(--size-rounded-control);
-  color: var(--color-text);
-  background-color: transparent;
-  &:focus,
-  &:hover,
-  &.selected,
-  &.nuxt-link-exact-active,
-  &.active-path {
-    color: var(--color-transparent-button-text-hover);
-    background-color: var(--color-transparent-button-bg-hover);
-  }
-  &:active {
-    color: var(--color-transparent-button-text-active);
-    background-color: var(--color-transparent-button-bg-active);
-  }
-}
-
-%label {
-  color: var(--color-text);
-  font-weight: var(--font-weight-extrabold);
-  letter-spacing: 0.02rem;
-  margin: 0 0 0.25em;
-  text-transform: uppercase;
-}
-
-%small-label {
-  @extend %label;
-  color: var(--color-text);
-  font-size: var(--font-size-xs);
-  letter-spacing: 0.02rem;
-}
-
-%large-label {
-  @extend %label;
-  color: var(--color-text);
-  font-size: var(--font-size-sm);
-  margin-bottom: 0.5em;
-}
-
-%stat {
-  margin-top: 0.5rem;
-  margin-right: 1rem;
-  @extend %row;
-
-  @media screen and (min-width: 900px) {
-    margin-top: 0;
-  }
-  svg {
-    margin: auto 0.5rem auto 0;
-    height: 1.5rem;
-    width: 1.5rem;
-    color: var(--color-icon);
-  }
-  .info {
-    margin: auto 0;
-    white-space: nowrap;
-    h4 {
-      @extend %small-label;
-    }
-    .value {
-      font-size: var(--font-size-sm);
-      margin: 0;
-      color: var(--color-text-dark);
-    }
-    .capitalize {
-      text-transform: capitalize;
-    }
-    .ellipsis {
-      text-overflow: ellipsis;
-    }
-  }
-}
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@ -19,7 +19,9 @@
  }
 }
 .page-container {
-  margin: var(--spacing-card-lg);
+  margin: var(--spacing-card-md);
+  margin-top: 0;
+
  .page-contents {
    display: flex;
    flex-direction: column;
@ -34,3 +36,26 @@
    }
  }
 }
+
+.normal-page {
+  display: flex;
+  flex-direction: column;
+  margin: 0 0.75rem;
+}
+
+@media (min-width: 1024px) {
+  .normal-page {
+    flex-direction: row;
+    margin: 0 auto;
+    max-width: 80rem;
+  }
+
+  .normal-page__sidebar {
+    width: 20rem;
+  }
+
+  .normal-page__content {
+    padding-left: 1rem;
+    width: 60rem;
+  }
+}
--- a/components/ads/Advertisement.vue
+++ b/components/ads/Advertisement.vue
@ -79,9 +79,20 @@ export default {
      onSmallScreen: false,
      windowResizeListenerDebounce: null,
      ethicalAdLoad: null,
-      tries: 0,
    }
  },
+  head: {
+    script: [
+      {
+        hid: 'ethical_ads_script',
+        type: 'text/javascript',
+        src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
+        async: true,
+        body: true,
+        defer: true,
+      }, // Insert in body
+    ],
+  },
  computed: {
    ethical_ads_on() {
      return (
@ -120,7 +131,7 @@ export default {
    this.displayed = true
    if (process.browser) {
      this.handleWindowResize()
-      this.refresh_ad(true)
+      this.refresh_ad()
    }
  },
  methods: {
@ -134,14 +145,14 @@ export default {
            this.format = sizes[this.type]
            this.displayed = true
            // Refresh ad
-            this.refresh_ad(true)
+            this.refresh_ad()
          }
          return
        }
        if (this.onSmallScreen === false) {
          // Reload ad
          this.onSmallScreen = true
-          this.refresh_ad(true)
+          this.refresh_ad()
        }
        this.onSmallScreen = true
        if (this.smallScreen === 'destroy') {
@ -152,47 +163,26 @@ export default {
        }
      }, 300)
    },
-    refresh_ad(reset = false) {
-      if (reset) {
-        this.tries = 0
-      }
-      if (this.tries >= 3) {
-        // Too many tries, we stop
-        return
-      }
+    refresh_ad() {
      if (this.ethical_ads_on) {
        clearTimeout(this.ethicalAdLoad)
        this.ethicalAdLoad = setTimeout(() => {
-          try {
-            ethicalads.load()
-          } catch (e) {
+          if (typeof window.ethicalads === 'undefined') {
            console.log('EthicalAds are not loaded yet, retrying...')
            this.refresh_ad()
-            this.tries++
          }
+          ethicalads.load()
        }, 100)
      }
    },
  },
-  head: {
-    script: [
-      {
-        hid: 'ethical_ads_script',
-        type: 'text/javascript',
-        src: 'https://media.ethicalads.io/media/client/ethicalads.min.js',
-        async: true,
-        body: true,
-        defer: true,
-      }, // Insert in body
-    ],
-  },
 }
 </script>

 <style lang="scss" scoped>
 .ad-wrapper {
  width: 100%;
-  @extend %card;
+  // @extend %card;
  display: flex;
  flex-direction: row;
  margin-bottom: var(--spacing-card-md);
--- a/components/ads/CookieConsent.vue
+++ b/components/ads/CookieConsent.vue
@ -5,7 +5,7 @@
      class="container"
      :style="{ visibility: shown ? 'visible' : 'hidden' }"
    >
-      <div class="banner">
+      <div class="card banner">
        <span>
          Modrinth uses cookies for various purposes, including advertising.<br />
          We encourage you to review your privacy settings by clicking on the
@ -24,14 +24,14 @@
 import scopes from '~/privacy-toggles'
 export default {
  name: 'CookieConsent',
-  fetch() {
-    this.checkVisibility()
-  },
  data() {
    return {
      shown: false,
    }
  },
+  fetch() {
+    this.checkVisibility()
+  },
  watch: {
    $route() {
      this.checkVisibility()
@ -43,7 +43,7 @@ export default {

      this.shown =
        !this.$store.state.consent.is_consent_given &&
-        this.$route.path !== '/dashboard/privacy'
+        this.$route.path !== '/settings/privacy'
    },
    hide() {
      this.$store.commit('consent/set_consent', true)
@ -57,7 +57,7 @@ export default {
    },
    review() {
      this.shown = false
-      this.$router.push('/dashboard/privacy')
+      this.$router.push('/settings/privacy')
    },
  },
 }
@ -73,7 +73,6 @@ export default {
  bottom: 0;
  right: 0;
  .banner {
-    @extend %card;
    padding: 1rem;
    font-size: 1.05rem;
    border-radius: 0;
--- a/components/layout/MFooter.vue
+++ b/components/layout/MFooter.vue
@ -1,132 +0,0 @@
-<template>
-  <footer :class="{ centered, padded, hideBig, hideSmall }">
-    <span>
-      Modrinth is open source software. You may view the source code at
-      <a target="_blank" href="https://github.com/modrinth">our GitHub page</a>.
-    </span>
-    <ul>
-      <li>
-        <a @click="changeTheme">
-          <span v-if="$colorMode.value === 'light'">Switch to Dark Mode</span>
-          <span v-else>Switch to Light Mode</span>
-        </a>
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <nuxt-link to="/legal/terms">Terms</nuxt-link>
-      </li>
-      <li>
-        <nuxt-link to="/legal/privacy">Privacy</nuxt-link>
-      </li>
-      <li>
-        <nuxt-link to="/about">About</nuxt-link>
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <a target="_blank" href="https://blog.modrinth.com">Blog</a>
-      </li>
-      <li>
-        <a target="_blank" href="https://discord.gg/gFRbNQ2">Discord</a>
-      </li>
-      <li>
-        <a target="_blank" href="https://twitter.com/modrinth">Twitter</a>
-      </li>
-    </ul>
-    <ul>
-      <li>
-        <nuxt-link to="/dashboard/privacy">Change privacy settings</nuxt-link>
-      </li>
-    </ul>
-    <span> © Guavy LLC </span><br />
-    <span v-if="version !== 'unknown'">Version: {{ version }}</span>
-  </footer>
-</template>
-
-<script>
-export default {
-  props: {
-    version: {
-      type: String,
-      default: process.env.version || 'unknown',
-    },
-    centered: {
-      type: Boolean,
-      default: false,
-    },
-    padded: {
-      type: Boolean,
-      default: false,
-    },
-    hideSmall: {
-      type: Boolean,
-      default: false,
-    },
-    hideBig: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    changeTheme() {
-      this.$colorMode.preference =
-        this.$colorMode.value === 'dark' ? 'light' : 'dark'
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.centered {
-  align-items: center;
-}
-
-.padded {
-  padding: 2rem 1rem;
-}
-
-footer {
-  padding: 2rem 0;
-  display: flex;
-  flex-direction: column;
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    li {
-      margin-bottom: var(--spacing-card-sm);
-      &:not(:last-child)::after {
-        content: '•';
-        padding: 0;
-        margin: 0 var(--spacing-card-sm);
-      }
-    }
-  }
-
-  & > *:not(:last-child) {
-    margin-bottom: var(--spacing-card-sm);
-  }
-}
-
-a {
-  text-decoration: underline;
-  cursor: pointer;
-}
-
-.hideSmall {
-  @media screen and (max-width: 1024px) {
-    display: none;
-  }
-}
-
-.hideBig {
-  @media screen and (min-width: 1024px) {
-    display: none;
-  }
-}
-</style>
--- a/components/ui/AvatarIcon.vue
+++ b/components/ui/AvatarIcon.vue
@ -1,76 +0,0 @@
-<template>
-  <div class="avatar-icon">
-    <img :src="this.$auth.user.avatar_url" class="icon" />
-    <div v-if="notifCount > 0" class="bubble" :class="{ dropdownBg }">
-      {{ displayNotifCount }}
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'AvatarIcon',
-  props: {
-    notifCount: {
-      type: Number,
-      default: 0,
-    },
-    dropdownBg: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    displayNotifCount() {
-      return this.notifCount < 100 ? this.notifCount : '99+'
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.avatar-icon {
-  position: relative;
-  height: 2rem;
-  width: 2rem;
-  margin-left: 0.5rem;
-  margin-right: 0.25rem;
-
-  .icon {
-    height: 100%;
-    width: 100%;
-    border-radius: 50%;
-  }
-
-  .bubble {
-    position: absolute;
-    bottom: -0.25rem;
-    right: -0.3rem;
-
-    border-radius: 0.9rem;
-    height: 0.9rem;
-    min-width: 0.45rem;
-    padding: 0 0.22rem;
-    font-size: 0.65rem;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    background-color: #e02914;
-    color: white;
-    border: 0.15rem solid var(--color-raised-bg);
-
-    &.dropdownBg {
-      border-color: var(--color-button-bg);
-    }
-  }
-}
-</style>
-<style lang="scss">
-.dropdown:hover {
-  .bubble {
-    border-color: var(--color-button-bg);
-  }
-}
-</style>
--- a/components/ui/Badge.vue
+++ b/components/ui/Badge.vue
@ -0,0 +1,78 @@
+<template>
+  <span :class="'version-badge ' + color">
+    <span class="circle" /> {{ type }}
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'VersionBadge',
+  props: {
+    type: {
+      type: String,
+      required: true,
+    },
+    color: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.version-badge {
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  text-transform: capitalize;
+
+  .circle {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 0.25rem;
+  }
+
+  &.custom-circle {
+    @media screen and (min-width: 560px) {
+      .circle {
+        margin-left: auto;
+      }
+    }
+  }
+
+  &.red {
+    color: var(--color-badge-red-text);
+
+    .circle {
+      background-color: var(--color-badge-red-bg);
+    }
+  }
+
+  &.green {
+    color: var(--color-badge-green-text);
+
+    .circle {
+      background-color: var(--color-badge-green-bg);
+    }
+  }
+
+  &.yellow {
+    color: var(--color-badge-yellow-text);
+
+    .circle {
+      background-color: var(--color-badge-yellow-bg);
+    }
+  }
+
+  &.gray {
+    color: var(--color-badge-gray-text);
+
+    .circle {
+      background-color: var(--color-badge-gray-bg);
+    }
+  }
+}
+</style>
--- a/components/ui/Checkbox.vue
+++ b/components/ui/Checkbox.vue
@ -1,9 +1,10 @@
 <template>
  <div class="checkbox-outer" :class="{ disabled }" @click="toggle">
-    <button class="checkbox" :disabled="disabled" :class="{ border }">
+    <button class="checkbox" :disabled="disabled" :class="{ checked: value }">
      <CheckIcon v-if="value" />
    </button>
-    <p>{{ label }}</p>
+    <p v-if="label">{{ label }}</p>
+    <slot v-else />
  </div>
 </template>

@ -24,11 +25,11 @@ export default {
      type: Boolean,
      default: false,
    },
-    border: {
-      type: Boolean,
-      default: true,
-    },
    value: Boolean,
+    clickEvent: {
+      type: Function,
+      default: () => {},
+    },
  },
  methods: {
    toggle() {
@ -62,8 +63,9 @@ export default {
  }

  p {
+    user-select: none;
    padding: 0.2rem 0rem;
-    margin: 0 0 0 0.5rem;
+    margin: 0;
  }
 }

@ -73,30 +75,22 @@ export default {
  justify-content: center;
  cursor: pointer;

-  width: 1.5rem;
-  height: 1.5rem;
+  width: 1rem;
+  height: 1rem;

  padding: 0;
-  margin: 0;
+  margin: 0 0.5rem 0 0;

-  svg {
-    color: var(--color-brand-light);
-    stroke-width: 0.2rem;
-    height: 1.2rem;
-    width: 1.2rem;
-    flex-shrink: 0;
+  &.checked {
+    background-color: var(--color-brand);
  }

-  &.border {
-    width: 1.2rem;
-    height: 1.2rem;
-
-    border: 0.15rem solid var(--color-text);
-
-    svg {
-      height: 0.9rem;
-      width: 0.9rem;
-    }
+  svg {
+    color: var(--color-text-inverted);
+    stroke-width: 0.2rem;
+    height: 0.8rem;
+    width: 0.8rem;
+    flex-shrink: 0;
  }
 }
 </style>
--- a/components/ui/Pagination.vue
+++ b/components/ui/Pagination.vue
@ -2,7 +2,7 @@
  <div v-if="pages.length > 1" class="columns paginates">
    <button
      :class="{ disabled: currentPage === 1 }"
-      class="paginate has-icon"
+      class="left-arrow paginate has-icon"
      aria-label="Previous Page"
      @click="currentPage !== 1 ? switchPage(currentPage - 1) : null"
    >
@ -17,7 +17,7 @@
      }"
      class="page-number-container"
    >
-      <div v-if="item == '-'" class="has-icon">
+      <div v-if="item === '-'" class="has-icon">
        <GapIcon />
      </div>
      <button
@ -36,7 +36,7 @@
      :class="{
        disabled: currentPage === pages[pages.length - 1],
      }"
-      class="paginate has-icon"
+      class="right-arrow paginate has-icon"
      aria-label="Next Page"
      @click="
        currentPage !== pages[pages.length - 1]
@ -83,22 +83,27 @@ export default {

 <style scoped lang="scss">
 button {
+  box-shadow: var(--shadow-card);
+
  padding: 0;
  margin: 0;
-  width: 2em;
-  height: 2em;
-  border-radius: 2em;
-  background: transparent;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 2rem;
+  background: var(--color-raised-bg);
+
  &.page-number.current {
-    background: var(--color-button-bg-hover);
-    color: var(--color-button-text-hover);
+    background: var(--color-brand);
+    color: var(--color-brand-inverted);
    cursor: default;
  }
+
  &.paginate.disabled {
-    background: none;
-    color: var(--color-button-text-disabled);
+    background-color: var(--color-button-bg);
    cursor: default;
+    color: var(--color-icon);
  }
+
  &:hover {
    background: var(--color-button-bg-active);
    color: var(--color-button-text-active);
@ -127,8 +132,9 @@ button,
 .paginates {
  height: 2em;
  margin: 0.5rem 0;
-  > div {
-    margin: 0 0.1em;
+  > div,
+  .has-icon {
+    margin: 0 0.5em;
  }
  font-size: 80%;
  @media screen and (min-width: 350px) {
@ -141,4 +147,12 @@ button,
  height: 2.225em;
  width: 2.225em;
 }
+
+.left-arrow {
+  margin-left: auto !important;
+}
+
+.right-arrow {
+  margin-right: auto !important;
+}
 </style>
--- a/components/ui/Popup.vue
+++ b/components/ui/Popup.vue
@ -40,7 +40,7 @@ export default {
  transform: translate(-50%, -50%);
  z-index: 11;
  box-shadow: 0 2px 3px 1px var(--color-button-bg);
-  border-radius: 10px;
+  border-radius: var(--size-rounded-lg);
  max-height: 80%;
  overflow-y: auto;
  background-color: var(--color-raised-bg);
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`
				`@ -1 +0,0 @@`
				`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="12" x2="2" y2="12"></line><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><line x1="6" y1="16" x2="6.01" y2="16"></line><line x1="10" y1="16" x2="10.01" y2="16"></line></svg>`
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="2" x2="12" y2="9"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line><polyline points="8 6 12 2 16 6"></polyline></svg>