diff --git a/package.json b/package.json
index 1397fad3..ecafb20a 100644
--- a/package.json
+++ b/package.json
@@ -10,26 +10,21 @@
   },
   "dependencies": {
     "@vueuse/core": "^8.5.0",
-    "@vueuse/motion": "^2.0.0-beta.18",
     "axios": "^0.26.1",
-    "defu": "^6.0.0",
-    "mitt": "^3.0.0",
     "pinia": "^2.0.11",
-    "register-service-worker": "^1.7.1",
     "sass": "^1.49.0",
     "sass-loader": "^10",
     "vite-svg-loader": "^3.4.0",
-    "vue": "^3.0.0",
+    "vue": "^3.2.37",
     "vue-debounce": "^3.0.2",
-    "vue-router": "^4.0.0-0",
-    "webpack": "^5.64.4"
+    "vue-router": "^4.1.3",
+    "webpack": "^5.74.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^1.6.1",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@vitejs/plugin-vue": "^3.0.1",
     "eslint": "^8.7.0",
     "eslint-plugin-vue": "^8.3.0",
-    "vite": "^2.5.4",
+    "vite": "^3.0.4",
     "vue-svg-loader": "^0.16.0"
   },
   "packageManager": "yarn@3.1.1"
diff --git a/server/app/api/album.py b/server/app/api/album.py
index d2bd9c11..80e14b5e 100644
--- a/server/app/api/album.py
+++ b/server/app/api/album.py
@@ -68,7 +68,7 @@ def get_album():
         album.count == 1
         and tracks[0].title == album.title
         and tracks[0].tracknumber == 1
-        and tracks[0].disknumber == 1
+        and tracks[0].discnumber == 1
     ):
         album.is_single = True
 
diff --git a/server/app/api/folder.py b/server/app/api/folder.py
index 6d1e99dc..1cbb0570 100644
--- a/server/app/api/folder.py
+++ b/server/app/api/folder.py
@@ -1,8 +1,6 @@
 """
 Contains all the folder routes.
 """
-from app import api
-from app import helpers
 from app import settings
 from app.lib.folderslib import getFnF
 from flask import Blueprint
diff --git a/server/app/functions.py b/server/app/functions.py
index 116d9745..daf2ae07 100644
--- a/server/app/functions.py
+++ b/server/app/functions.py
@@ -97,7 +97,7 @@ class CheckArtistImages:
     @staticmethod
     def check_if_exists(img_path: str):
         """
-        Checks if an image exists on disk.
+        Checks if an image exists on c.
         """
 
         if os.path.exists(img_path):
diff --git a/server/app/lib/albumslib.py b/server/app/lib/albumslib.py
index 6e196523..efb39446 100644
--- a/server/app/lib/albumslib.py
+++ b/server/app/lib/albumslib.py
@@ -143,6 +143,7 @@ def create_album(track: models.Track) -> dict:
         "title": track.album,
         "artist": track.albumartist,
         "hash": track.albumhash,
+        "copyright": track.copyright,
     }
 
     album["date"] = track.date
diff --git a/server/app/lib/taglib.py b/server/app/lib/taglib.py
index 8cd6280e..055c6f14 100644
--- a/server/app/lib/taglib.py
+++ b/server/app/lib/taglib.py
@@ -3,8 +3,7 @@ from io import BytesIO
 
 import mutagen
 from app import settings
-from mutagen.flac import FLAC
-from mutagen.flac import MutagenError
+from mutagen.flac import FLAC, MutagenError
 from mutagen.id3 import ID3
 from PIL import Image
 
@@ -146,16 +145,25 @@ def parse_track_number(tags):
     return track_number
 
 
-def parse_disk_number(tags):
+def parse_disc_number(tags):
     """
-    Parses the disk number from an audio file.
+    Parses the disc number from an audio file.
     """
     try:
-        disk_number = int(tags["disknumber"][0])
+        disc_number = int(tags["discnumber"][0])
     except (KeyError, IndexError, ValueError):
-        disk_number = 1
+        disc_number = 1
 
-    return disk_number
+    return disc_number
+
+
+def parse_copyright(tags):
+    try:
+        copyright = str(tags["copyright"][0])
+    except (KeyError, IndexError, ValueError):
+        copyright = None
+
+    return copyright
 
 
 def get_tags(fullpath: str) -> dict | None:
@@ -175,7 +183,8 @@ def get_tags(fullpath: str) -> dict | None:
         "genre": parse_genre_tag(tags),
         "date": parse_date_tag(tags)[:4],
         "tracknumber": parse_track_number(tags),
-        "disknumber": parse_disk_number(tags),
+        "discnumber": parse_disc_number(tags),
+        "copyright": parse_copyright(tags),
         "length": round(tags.info.length),
         "bitrate": round(int(tags.info.bitrate) / 1000),
         "filepath": fullpath,
diff --git a/server/app/models.py b/server/app/models.py
index 31d296fd..07d1f07c 100644
--- a/server/app/models.py
+++ b/server/app/models.py
@@ -3,6 +3,7 @@ Contains all the models for objects generation and typing.
 """
 from dataclasses import dataclass
 from dataclasses import field
+from operator import itemgetter
 from typing import List
 
 from app import helpers
@@ -25,26 +26,42 @@ class Track:
     genre: str
     bitrate: int
     tracknumber: int
-    disknumber: int
+    discnumber: int
     albumhash: str
     date: str
     image: str
     uniq_hash: str
+    copyright: str
 
     def __init__(self, tags):
+        (
+            self.title,
+            self.album,
+            self.albumartist,
+            self.genre,
+            self.albumhash,
+            self.date,
+            self.folder,
+            self.filepath,
+            self.copyright,
+        ) = itemgetter(
+            "title",
+            "album",
+            "albumartist",
+            "genre",
+            "albumhash",
+            "date",
+            "folder",
+            "filepath",
+            "copyright",
+        )(
+            tags
+        )
         self.trackid = tags["_id"]["$oid"]
-        self.title = tags["title"]
         self.artists = tags["artists"].split(", ")
-        self.albumartist = tags["albumartist"]
-        self.album = tags["album"]
-        self.folder = tags["folder"]
-        self.filepath = tags["filepath"]
-        self.genre = tags["genre"]
         self.bitrate = int(tags["bitrate"])
         self.length = int(tags["length"])
-        self.disknumber = int(tags["disknumber"])
-        self.albumhash = tags["albumhash"]
-        self.date = tags["date"]
+        self.discnumber = int(tags["discnumber"])
         self.image = tags["albumhash"] + ".webp"
         self.tracknumber = int(tags["tracknumber"])
 
@@ -85,17 +102,21 @@ class Album:
     image: str
     count: int = 0
     duration: int = 0
+    copyright: str = field(default="")
     is_soundtrack: bool = False
     is_compilation: bool = False
     is_single: bool = False
     colors: List[str] = field(default_factory=list)
 
     def __init__(self, tags):
-        self.title = tags["title"]
-        self.artist = tags["artist"]
-        self.date = tags["date"]
-        self.image = tags["image"]
-        self.hash = tags["hash"]
+        (
+            self.title,
+            self.artist,
+            self.date,
+            self.image,
+            self.hash,
+            self.copyright,
+        ) = itemgetter("title", "artist", "date", "image", "hash", "copyright")(tags)
 
         try:
             self.colors = tags["colors"]
diff --git a/src/App.vue b/src/App.vue
index c38cf0c8..6c9d6b81 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <ContextMenu />
   <Modal />
   <Notification />
-  <div class="l-container">
+  <div id="app-grid">
     <div class="l-sidebar rounded">
       <Logo />
       <Navigation />
@@ -11,7 +11,7 @@
       </div>
     </div>
     <NavBar />
-    <div id="acontent">
+    <div id="acontent" class="rounded">
       <router-view />
     </div>
     <SearchInput />
@@ -21,29 +21,27 @@
 </template>
 
 <script setup lang="ts">
-import { useRouter, useRoute, RouteLocationNormalized } from "vue-router";
 import { onStartTyping } from "@vueuse/core";
+import { RouteLocationNormalized, useRoute, useRouter } from "vue-router";
 
-import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import RightSideBar from "@/components/RightSideBar/Main.vue";
-import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
-import NavBar from "@/components/nav/NavBar.vue";
-import Tabs from "@/components/RightSideBar/Tabs.vue";
-import SearchInput from "@/components/RightSideBar/SearchInput.vue";
-import useContextStore from "@/stores/context";
 import ContextMenu from "@/components/contextMenu.vue";
-import Modal from "@/components/modal.vue";
-import Notification from "@/components/Notification.vue";
-import useQStore from "@/stores/queue";
+import Navigation from "@/components/LeftSidebar/Navigation.vue";
+import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
 import Logo from "@/components/Logo.vue";
+import Modal from "@/components/modal.vue";
+import NavBar from "@/components/nav/NavBar.vue";
+import Notification from "@/components/Notification.vue";
+import RightSideBar from "@/components/RightSideBar/Main.vue";
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+import Tabs from "@/components/RightSideBar/Tabs.vue";
+import useContextStore from "@/stores/context";
+import useQStore from "@/stores/queue";
 
 import useShortcuts from "@/composables/useKeyboard";
-import { isSameRoute } from "@/composables/perks";
 
 const context_store = useContextStore();
 const queue = useQStore();
 const app_dom = document.getElementById("app");
-const route = useRoute();
 const router = useRouter();
 
 queue.readQueue();
@@ -55,28 +53,19 @@ app_dom.addEventListener("click", (e) => {
   }
 });
 
-function removeHighlight(route: RouteLocationNormalized) {
-  setTimeout(() => {
-    router.push({ name: route.name, params: route.params });
-  }, 5000);
-}
-
-router.afterEach((to, from) => {
-  const h_hash = to.query.highlight as string;
-
-  if (h_hash) removeHighlight(to);
-  if (isSameRoute(to, from)) return;
-
+router.afterEach(() => {
   document.getElementById("acontent")?.scrollTo(0, 0);
 });
 
 onStartTyping(() => {
-  document.getElementById("globalsearch").focus();
+  const elem = document.getElementById("globalsearch") as HTMLInputElement;
+  elem.focus();
+  elem.value = "";
 });
 </script>
 
 <style lang="scss">
-@import "./assets/css/mixins.scss";
+@import "./assets/scss/mixins.scss";
 
 .l-sidebar {
   position: relative;
diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
deleted file mode 100644
index ca25aca2..00000000
--- a/src/assets/css/global.scss
+++ /dev/null
@@ -1,365 +0,0 @@
-@import "../css/ProgressBar.scss";
-@import "mixins.scss";
-// @import "./moz.scss";
-
-:root {
-  --separator: #ffffff46;
-  --green: #4ad168;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  background-color: $body;
-  color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  overflow: hidden;
-  image-rendering: -webkit-optimize-contrast;
-}
-
-.heading {
-  font-size: 2rem;
-  font-weight: bold;
-}
-
-.t-center {
-  text-align: center;
-}
-
-.h-1:hover {
-  background-color: #3a39393d;
-}
-
-a {
-  text-decoration: none;
-  color: #fff;
-}
-
-.border {
-  background-color: $black;
-  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
-}
-
-.separator {
-  border-top: 0.1px $separator solid;
-  color: transparent;
-  margin: $small 0 $small 0;
-}
-
-.no-border {
-  border: none;
-}
-
-.noscroll {
-  overflow: hidden;
-}
-
-.grid {
-  display: grid;
-}
-
-.card-dark {
-  background-color: #fff;
-}
-
-.hidden {
-  display: none;
-}
-
-input[type="search"] {
-  height: 2.25rem !important;
-}
-
-.l-container {
-  display: grid;
-  grid-template-columns: min-content 1fr min-content;
-  grid-template-rows: max-content 1fr max-content;
-  grid-template-areas:
-    "l-sidebar nav search-input"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content tabs";
-  align-content: center;
-  max-width: 2720px;
-  height: calc(100vh - 1rem);
-  margin: 0 auto;
-  gap: 1rem;
-  margin: $small;
-}
-
-#tabs {
-  grid-area: tabs;
-  height: 3.5rem;
-  margin-top: -$small;
-}
-
-#acontent {
-  grid-area: content;
-  max-width: 1955px;
-  overflow: hidden auto;
-  margin-top: -$small;
-
-  .nav {
-    margin: $small;
-    width: calc(100% - 1rem);
-  }
-}
-
-.tabs {
-  grid-area: tabs;
-
-  @include tablet-landscape {
-    display: none;
-  }
-}
-
-#gsearch-input {
-  grid-area: search-input;
-}
-
-.topnav {
-  grid-area: nav;
-}
-
-.l-sidebar {
-  width: 17rem;
-  grid-area: l-sidebar;
-  background-color: $black;
-  padding: 1rem;
-}
-
-.bottom-bar {
-  grid-area: bottom-bar;
-  height: 4rem;
-}
-
-.ellip {
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.rounded {
-  border-radius: $small;
-}
-
-.circular {
-  border-radius: 20px;
-}
-
-.flex {
-  display: flex;
-}
-
-.r-sidebar {
-  grid-area: r-sidebar;
-  margin-top: -$small;
-  width: 29rem;
-}
-
-.image {
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-  transition: transform 0.3s ease-in-out;
-}
-
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.shadow-sm {
-  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
-}
-
-.shadow-md {
-  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
-}
-
-.shadow-lg {
-  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
-}
-
-/* scrollbars */
-
-/* width */
-
-::-webkit-scrollbar {
-  width: 3px;
-}
-
-/* Track */
-
-::-webkit-scrollbar-track {
-  background: transparent;
-  border-radius: 1rem;
-}
-
-/* Handle */
-
-::-webkit-scrollbar-thumb {
-  background: rgba(128, 128, 128, 0.322);
-  border-radius: 1rem;
-}
-
-/* Handle on hover */
-
-::-webkit-scrollbar-thumb:hover {
-  background: $blue;
-}
-
-@-webkit-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-@-moz-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-@-o-keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-
-@keyframes similarAlbums {
-  0% {
-    background-position: 0 38%;
-  }
-  50% {
-    background-position: 100% 63%;
-  }
-  100% {
-    background-position: 0 38%;
-  }
-}
-
-.now-playing-track {
-  height: 2rem;
-  width: 2rem;
-  border-radius: 50%;
-  background-color: #fff;
-  margin-top: 0;
-  background-size: 60%;
-}
-
-.active {
-  background-image: url(../../assets/icons/playing.gif);
-  transition: all 0.3s ease-in-out;
-}
-
-.not_active {
-  background-image: url(../../assets/icons/playing.webp);
-  transition: all 0.3s ease-in-out;
-}
-
-.item {
-  position: relative;
-  background-color: rgba(34, 33, 33, 0.637);
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  cursor: pointer;
-  margin: 0 $small 0 0;
-  display: flex;
-  align-items: center;
-  font-size: 0.9rem;
-  color: rgb(250, 250, 250);
-
-  &:hover {
-    background-color: $pink;
-  }
-}
-
-input[type="number"] {
-  width: 40px;
-  padding: 4px 5px;
-  border: 1px solid #bbb;
-  border-radius: 3px;
-}
-
-.controls {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-
-  .shuffle {
-    width: 100%;
-    display: flex;
-    align-items: center;
-
-    & * {
-      height: 2rem;
-      width: 2rem;
-      background-size: 70%;
-      cursor: pointer;
-      border-radius: 0.5rem;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
-    & :first-child {
-      background-image: url(../../assets/icons/repeat.svg);
-    }
-
-    & :last-child {
-      background-image: url(../../assets/icons/shuffle.svg);
-    }
-  }
-
-  .fav {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-
-    & * {
-      height: 2rem;
-      width: 2rem;
-      background-size: 70%;
-      border-radius: 0.5rem;
-      cursor: pointer;
-
-      &:hover {
-        background-color: rgb(170, 50, 50);
-      }
-    }
-
-    & :first-child {
-      background-image: url(../../assets/icons/plus.svg);
-    }
-
-    & :last-child {
-      background-image: url(../../assets/icons/heart.svg);
-    }
-  }
-}
diff --git a/src/assets/css/moz.scss b/src/assets/css/moz.scss
deleted file mode 100644
index 72b6c623..00000000
--- a/src/assets/css/moz.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Styles that only apply on our dear Firefox 
-
-@-moz-document url-prefix() {
-  #acontent {
-    padding-right: 1rem !important;
-  }
-
-  #ap-page {
-    width: 100% !important;
-    padding-right: 1rem !important;
-  }
-
-  .ap-page-bottom-container {
-    width: calc(100% - 1rem) !important;
-  }
-}
diff --git a/src/assets/icons/sdcard.svg b/src/assets/icons/sdcard.svg
new file mode 100644
index 00000000..0a863280
--- /dev/null
+++ b/src/assets/icons/sdcard.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.31543 23.1816H18.6758C20.5566 23.1816 21.5322 22.1973 21.5322 20.2988V7.03613C21.5322 5.14648 20.5566 4.15332 18.6758 4.15332H12.9453C12.04 4.15332 11.416 4.39062 10.8447 4.9707L7.21484 8.60938C6.66992 9.1543 6.45898 9.70801 6.45898 10.6396V20.2988C6.45898 22.1885 7.43457 23.1816 9.31543 23.1816ZM9.45605 21.459C8.60352 21.459 8.18164 21.0107 8.18164 20.1934V10.71C8.18164 10.1387 8.2959 9.81348 8.59473 9.50586L11.6709 6.41211C12.0312 6.04297 12.4268 5.87598 12.9805 5.87598H18.5264C19.3789 5.87598 19.8096 6.33301 19.8096 7.1416V20.1934C19.8096 21.0107 19.3789 21.459 18.5352 21.459H9.45605ZM11.9082 8.06445V10.7627C11.9082 11.0879 12.1719 11.3516 12.4971 11.3516C12.8223 11.3516 13.0859 11.0879 13.0859 10.7627V8.06445C13.0859 7.73047 12.8311 7.47559 12.4971 7.47559C12.1719 7.47559 11.9082 7.73926 11.9082 8.06445ZM13.7012 8.06445V10.7627C13.7012 11.0879 13.9736 11.3516 14.3076 11.3516C14.624 11.3516 14.8877 11.0879 14.8877 10.7627V8.06445C14.8877 7.73926 14.6328 7.47559 14.3076 7.47559C13.9736 7.47559 13.7012 7.73926 13.7012 8.06445ZM15.5205 8.06445V10.7627C15.5205 11.0879 15.7842 11.3516 16.1094 11.3516C16.4258 11.3516 16.6895 11.0879 16.6895 10.7627V8.06445C16.6895 7.73047 16.4346 7.47559 16.1094 7.47559C15.7754 7.47559 15.5205 7.73926 15.5205 8.06445ZM17.3311 8.06445V10.7539C17.3311 11.0879 17.5947 11.3516 17.9199 11.3516C18.2451 11.3516 18.5 11.0879 18.5 10.7539V8.06445C18.5 7.73047 18.2451 7.47559 17.9199 7.47559C17.5859 7.47559 17.3311 7.73926 17.3311 8.06445Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/shuffle.svg b/src/assets/icons/shuffle.svg
index 09914732..47d2851a 100644
--- a/src/assets/icons/shuffle.svg
+++ b/src/assets/icons/shuffle.svg
@@ -1,4 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.1666 14.1667H12.8675L4.78413 5.2725C4.70599 5.18663 4.61077 5.11803 4.50458 5.0711C4.39839 5.02418 4.28356 4.99996 4.16746 5H1.66663V6.66667H3.79913L7.20746 10.4167L3.79913 14.1675H1.66663V15.8342H4.16746C4.28356 15.8342 4.39839 15.81 4.50458 15.7631C4.61077 15.7161 4.70599 15.6475 4.78413 15.5617L8.33329 11.6558L11.8825 15.5608C11.9606 15.6467 12.0558 15.7153 12.162 15.7622C12.2682 15.8092 12.383 15.8334 12.4991 15.8333H14.1666V18.3333L18.3333 15L14.1666 11.6667V14.1667V14.1667Z" fill="white"/>
-<path d="M12.8675 6.66667H14.1666V9.16667L18.3333 5.885L14.1666 2.5V5H12.4991C12.383 4.99996 12.2682 5.02418 12.162 5.0711C12.0558 5.11803 11.9606 5.18663 11.8825 5.2725L9.07581 8.36167L10.3091 9.48333L12.8675 6.66667Z" fill="white"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5498 18.3389C3.5498 18.8486 3.94531 19.209 4.49023 19.209H6.55566C8.06738 19.209 8.95508 18.7695 9.99219 17.5479L12.1191 15.0166L14.2197 17.5039C15.2832 18.7695 16.2852 19.209 17.7969 19.209H19.5547V21.3271C19.5547 21.749 19.8096 21.9951 20.2314 21.9951C20.4248 21.9951 20.6006 21.9248 20.75 21.8105L24.1953 18.9365C24.5293 18.6641 24.5293 18.2422 24.1953 17.9521L20.75 15.0781C20.6006 14.9551 20.4248 14.8936 20.2314 14.8936C19.8096 14.8936 19.5547 15.1309 19.5547 15.5615V17.46H17.8496C16.8125 17.46 16.1357 17.1172 15.3887 16.2207L13.2441 13.6807L15.3975 11.1318C16.1621 10.2266 16.7773 9.90137 17.7969 9.90137H19.5547V11.835C19.5547 12.2568 19.8096 12.5029 20.2314 12.5029C20.4248 12.5029 20.6006 12.4326 20.75 12.3184L24.1953 9.44434C24.5293 9.17188 24.5293 8.75 24.1953 8.45996L20.75 5.58594C20.6006 5.46289 20.4248 5.40137 20.2314 5.40137C19.8096 5.40137 19.5547 5.63867 19.5547 6.06934V8.14355H17.8057C16.2412 8.14355 15.2832 8.57422 14.167 9.91016L12.1191 12.3447L9.99219 9.81348C8.95508 8.5918 8.00586 8.15234 6.50293 8.15234H4.49023C3.94531 8.15234 3.5498 8.5127 3.5498 9.02246C3.5498 9.53223 3.94531 9.90137 4.49023 9.90137H6.43262C7.41699 9.90137 8.10254 10.2441 8.8584 11.1406L10.9941 13.6807L8.8584 16.2207C8.10254 17.1172 7.46973 17.46 6.49414 17.46H4.49023C3.94531 17.46 3.5498 17.8291 3.5498 18.3389Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/images/abg.webp b/src/assets/images/abg.webp
deleted file mode 100644
index 519cb7f6..00000000
Binary files a/src/assets/images/abg.webp and /dev/null differ
diff --git a/src/assets/images/album-bg.webp b/src/assets/images/album-bg.webp
deleted file mode 100644
index 3ff5fca4..00000000
Binary files a/src/assets/images/album-bg.webp and /dev/null differ
diff --git a/src/assets/images/eggs.jpg b/src/assets/images/eggs.jpg
deleted file mode 100644
index 148dfd98..00000000
Binary files a/src/assets/images/eggs.jpg and /dev/null differ
diff --git a/src/assets/images/noise-texture.svg b/src/assets/images/noise-texture.svg
deleted file mode 100644
index 8acc4de0..00000000
--- a/src/assets/images/noise-texture.svg
+++ /dev/null
@@ -1,78 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="1600"
-   height="900"
-   viewBox="0 0 1600 900"
-   version="1.1"
-   id="svg13"
-   sodipodi:docname="noise-texture.svg"
-   inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
-  <metadata
-     id="metadata17">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1366"
-     inkscape:window-height="714"
-     id="namedview15"
-     showgrid="false"
-     inkscape:zoom="0.26222222"
-     inkscape:cx="28.104465"
-     inkscape:cy="117.7106"
-     inkscape:window-x="0"
-     inkscape:window-y="28"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="svg13" />
-  <defs
-     id="defs9">
-    <radialGradient
-       id="a"
-       gradientTransform="matrix(1 1 -1 1 0.5 -0.5)">
-      <stop
-         stop-color="#455A64"
-         stop-opacity="0"
-         offset="0.25"
-         id="stop2"
-         style="stop-color:#222222;stop-opacity:0" />
-      <stop
-         stop-color="#455A64"
-         stop-opacity="0.5"
-         offset="0.75"
-         id="stop4"
-         style="stop-color:#222222;stop-opacity:0.50196081" />
-      <stop
-         stop-color="#455A64"
-         stop-opacity="1"
-         offset="1"
-         id="stop6"
-         style="stop-color:#222222;stop-opacity:1" />
-    </radialGradient>
-  </defs>
-  <rect
-     width="1600"
-     height="900"
-     fill="url(#a)"
-     id="rect11" />
-</svg>
diff --git a/src/assets/images/null.webp b/src/assets/images/null.webp
deleted file mode 100644
index 94dd613c..00000000
Binary files a/src/assets/images/null.webp and /dev/null differ
diff --git a/src/assets/images/one.jpg b/src/assets/images/one.jpg
new file mode 100644
index 00000000..f3e3acf5
Binary files /dev/null and b/src/assets/images/one.jpg differ
diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/scss/BottomBar/BottomBar.scss
similarity index 100%
rename from src/assets/css/BottomBar/BottomBar.scss
rename to src/assets/scss/BottomBar/BottomBar.scss
diff --git a/src/assets/scss/Global/app-grid.scss b/src/assets/scss/Global/app-grid.scss
new file mode 100644
index 00000000..8d538ac6
--- /dev/null
+++ b/src/assets/scss/Global/app-grid.scss
@@ -0,0 +1,64 @@
+#app-grid {
+  display: grid;
+  grid-template-columns: min-content 1fr min-content;
+  grid-template-rows: max-content 1fr max-content;
+  grid-template-areas:
+    "l-sidebar nav search-input"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content r-sidebar"
+    "l-sidebar content tabs";
+  align-content: center;
+  max-width: 2720px;
+  height: calc(100vh - 1rem);
+  margin: 0 auto;
+  gap: 1rem;
+  margin: $small;
+}
+
+#acontent {
+  grid-area: content;
+  max-width: 1955px;
+  overflow: hidden scroll;
+  margin-top: -$small;
+
+  .nav {
+    margin: $small;
+    width: calc(100% - 1rem);
+  }
+}
+
+#tabs {
+  grid-area: tabs;
+  height: 3.5rem;
+  margin-top: -$small;
+
+  @include tablet-landscape {
+    display: none;
+  }
+}
+
+.r-sidebar {
+  grid-area: r-sidebar;
+  margin-top: -$small;
+  width: 29rem;
+}
+
+#gsearch-input {
+  grid-area: search-input;
+}
+
+.topnav {
+  grid-area: nav;
+}
+
+.l-sidebar {
+  width: 17rem;
+  grid-area: l-sidebar;
+  background-color: $black;
+  padding: 1rem;
+}
+
+.bottom-bar {
+  grid-area: bottom-bar;
+  height: 4rem;
+}
diff --git a/src/assets/scss/Global/basic.scss b/src/assets/scss/Global/basic.scss
new file mode 100644
index 00000000..337a49e9
--- /dev/null
+++ b/src/assets/scss/Global/basic.scss
@@ -0,0 +1,104 @@
+.t-center {
+  text-align: center;
+}
+
+.image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  transition: transform 0.3s ease-in-out;
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ellip {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cap-first {
+  display: inline-block;
+  &::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+.rounded {
+  border-radius: $small;
+}
+
+.circular {
+  border-radius: 20px;
+}
+
+.flex {
+  display: flex;
+}
+
+.bg-black {
+  background-color: $black;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
+}
+
+.heading {
+  font-size: 2rem;
+  font-weight: bold;
+}
+
+a {
+  text-decoration: none;
+  color: #fff;
+}
+
+button {
+  border: none;
+  font-size: 0.9rem !important;
+  color: inherit;
+  border-radius: $small;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2rem;
+  background-image: linear-gradient(70deg, $gray3, $gray2);
+
+  &:hover {
+    background-image: linear-gradient(70deg, #234ece, $darkblue);
+  }
+}
+
+.btn-active {
+  background-image: linear-gradient(70deg, #234ece, $darkblue);
+}
+
+.separator {
+  border-top: 0.1px $separator solid;
+  color: transparent;
+  margin: $small 0 $small 0;
+}
+
+.no-border {
+  border: none;
+}
+
+.noscroll {
+  overflow: hidden;
+}
+
+.abs {
+  position: absolute;
+}
+
+.grid {
+  display: grid;
+}
+
+.card-dark {
+  background-color: #fff;
+}
diff --git a/src/assets/scss/Global/controls.scss b/src/assets/scss/Global/controls.scss
new file mode 100644
index 00000000..2cfc74d3
--- /dev/null
+++ b/src/assets/scss/Global/controls.scss
@@ -0,0 +1,57 @@
+.controls {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+
+  .shuffle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/repeat.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/shuffle.svg);
+    }
+  }
+
+  .fav {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & * {
+      height: 2rem;
+      width: 2rem;
+      background-size: 70%;
+      border-radius: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgb(170, 50, 50);
+      }
+    }
+
+    & :first-child {
+      background-image: url(../../assets/icons/plus.svg);
+    }
+
+    & :last-child {
+      background-image: url(../../assets/icons/heart.svg);
+    }
+  }
+}
diff --git a/src/assets/scss/Global/index.scss b/src/assets/scss/Global/index.scss
new file mode 100644
index 00000000..cc90a3e4
--- /dev/null
+++ b/src/assets/scss/Global/index.scss
@@ -0,0 +1,23 @@
+@import "./app-grid.scss", "./controls.scss", "./inputs.scss",
+  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss";
+
+:root {
+  --separator: #ffffff46;
+  --green: #4ad168;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background-color: $body;
+  color: #fff;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: "SF Compact Display" !important;
+  font-size: 1rem;
+  overflow: hidden;
+  image-rendering: -webkit-optimize-contrast;
+}
diff --git a/src/assets/scss/Global/inputs.scss b/src/assets/scss/Global/inputs.scss
new file mode 100644
index 00000000..e1cca9db
--- /dev/null
+++ b/src/assets/scss/Global/inputs.scss
@@ -0,0 +1,10 @@
+input[type="number"] {
+  width: 40px;
+  padding: 4px 5px;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+}
+
+input[type="search"] {
+  height: 2.25rem !important;
+}
diff --git a/src/assets/scss/Global/scrollbars.scss b/src/assets/scss/Global/scrollbars.scss
new file mode 100644
index 00000000..3311f5ba
--- /dev/null
+++ b/src/assets/scss/Global/scrollbars.scss
@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 3px;
+}
+
+/* Track */
+
+::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 1rem;
+}
+
+/* Handle */
+
+::-webkit-scrollbar-thumb {
+  background: rgba(128, 128, 128, 0.322);
+  border-radius: 1rem;
+}
+
+/* Handle on hover */
+
+::-webkit-scrollbar-thumb:hover {
+  background: $blue;
+}
diff --git a/src/assets/scss/Global/state.scss b/src/assets/scss/Global/state.scss
new file mode 100644
index 00000000..bd944b19
--- /dev/null
+++ b/src/assets/scss/Global/state.scss
@@ -0,0 +1,19 @@
+
+.now-playing-track-indicator {
+  background-image: url(../../assets/icons/playing.gif);
+  transition: all 0.3s ease-in-out;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  background-color: $white;
+  background-size: 1.5rem !important;
+}
+
+.last_played {
+  background-image: url(../../assets/icons/playing.webp);
+  transition: all 0.3s ease-in-out;
+}
+
+.hidden {
+  display: none;
+}
diff --git a/src/assets/scss/Global/variants.scss b/src/assets/scss/Global/variants.scss
new file mode 100644
index 00000000..bcf30dbd
--- /dev/null
+++ b/src/assets/scss/Global/variants.scss
@@ -0,0 +1,25 @@
+// paddings
+.pad-small {
+  padding: $small;
+}
+
+.pad-medium {
+  padding: $medium;
+}
+
+.pad-large {
+  padding: 1rem;
+}
+
+// shadows
+.shadow-sm {
+  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.452);
+}
+
+.shadow-md {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.075);
+}
+
+.shadow-lg {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.175);
+}
diff --git a/src/assets/css/ProgressBar.scss b/src/assets/scss/ProgressBar.scss
similarity index 100%
rename from src/assets/css/ProgressBar.scss
rename to src/assets/scss/ProgressBar.scss
diff --git a/src/assets/css/_variables.scss b/src/assets/scss/_variables.scss
similarity index 94%
rename from src/assets/css/_variables.scss
rename to src/assets/scss/_variables.scss
index caad1304..0bd9ebcf 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -13,6 +13,8 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
+$banner-height: 18rem;
+
 // apple human design guideline colors
 $black: #181a1c;
 $white: #ffffffde;
@@ -24,9 +26,8 @@ $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
 
-
-$red: #FF453A;
-$blue: #0A84FF;
+$red: #ff453a;
+$blue: #0a84ff;
 $darkblue: #055ee2;
 $green: rgb(20, 160, 55);
 $yellow: rgb(255, 214, 10);
@@ -34,10 +35,9 @@ $orange: rgb(255, 159, 10);
 $pink: rgb(255, 55, 95);
 $purple: #bf5af2;
 $brown: rgb(172, 142, 104);
-$indigo: #5E5CE6;
+$indigo: #5e5ce6;
 $teal: rgb(64, 200, 224);
 
-
 $primary: $gray4;
 $accent: $red;
 $secondary: $gray5;
diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
new file mode 100644
index 00000000..1549b452
--- /dev/null
+++ b/src/assets/scss/index.scss
@@ -0,0 +1,14 @@
+@import 
+"./mixins.scss",
+"./variables",
+"./moz.scss",
+"./ProgressBar.scss",
+"./BottomBar/BottomBar.scss",
+"./Global"
+;
+
+
+@font-face {
+    font-family: "SF Compact Display";
+    src: url("../sf-compact.woff") format("woff");
+}
diff --git a/src/assets/css/mixins.scss b/src/assets/scss/mixins.scss
similarity index 100%
rename from src/assets/css/mixins.scss
rename to src/assets/scss/mixins.scss
diff --git a/src/assets/scss/moz.scss b/src/assets/scss/moz.scss
new file mode 100644
index 00000000..fe7e1ea5
--- /dev/null
+++ b/src/assets/scss/moz.scss
@@ -0,0 +1,5 @@
+// Styles that only apply on our dear Firefox 
+
+// @-moz-document url-prefix() {
+
+// }
diff --git a/src/assets/sf-compact.woff b/src/assets/sf-compact.woff
new file mode 100644
index 00000000..a1cfb319
Binary files /dev/null and b/src/assets/sf-compact.woff differ
diff --git a/src/components/AlbumView/AlbumBio.vue b/src/components/AlbumView/AlbumBio.vue
index 9a7f7e69..43955440 100644
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -11,8 +11,8 @@
         <div class="circle"></div>
         <img class="circle" :src="paths.images.artist + images.artist" alt="" />
       </div>
-      <div class="bio rounded border" v-html="bio" v-if="bio"></div>
-      <div class="bio rounded border" v-else>No bio found</div>
+      <div class="bio rounded bg-black" v-html="bio" v-if="bio"></div>
+      <div class="bio rounded bg-black" v-else>No bio found</div>
     </div>
   </div>
 </template>
@@ -54,7 +54,7 @@ defineProps<{
     width: 100%;
     margin-right: $small;
     overflow: hidden;
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     background-image: linear-gradient(37deg, $gray5 20%, $gray4);
 
     @include tablet-portrait {
@@ -89,7 +89,7 @@ defineProps<{
       height: 7rem;
       bottom: 0;
       left: calc($rectpos + 7rem);
-      border-radius: 50%;
+      bg-black-radius: 50%;
       box-shadow: 0 0 2rem rgb(0, 0, 0);
       transition: all 0.25s ease-in-out;
 
@@ -99,7 +99,7 @@ defineProps<{
     }
   }
   .bio {
-    border: solid 1px $gray5;
+    bg-black: solid 1px $gray5;
     padding: $small;
     line-height: 1.5rem;
 
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 45abe96d..fc1712d6 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -8,24 +8,18 @@
       )`,
     }"
   >
-    <div class="art">
-      <img
-        :src="imguri + album.image"
-        alt=""
-        v-motion-slide-from-left
-        class="rounded shadow-lg"
-      />
-      <img class="filter rounded" src="../../assets/images/noise-texture.svg" alt="" />
+    <div class="art rounded">
+      <img :src="imguri + album.image" alt="" class="rounded shadow-lg" />
     </div>
-    <div class="info" :class="{ nocontrast: isLight() }">
-      <div class="top" v-motion-slide-from-top>
+    <div class="info" :class="{ nocontrast: isLight(album.colors[0]) }">
+      <div class="top">
         <div class="h">
           <span v-if="album.is_soundtrack">Soundtrack</span>
           <span v-else-if="album.is_compilation">Compilation</span>
           <span v-else-if="album.is_single">Single</span>
           <span v-else>Album</span>
         </div>
-        <div class="title ellip">
+        <div class="title ellip cap-first">
           {{ album.title }}
         </div>
       </div>
@@ -38,7 +32,7 @@
         <PlayBtnRect
           :source="playSources.album"
           :store="useAlbumStore"
-          :background="getButtonColor()"
+          :background="getButtonColor(album.colors)"
         />
       </div>
     </div>
@@ -55,6 +49,7 @@ import { formatSeconds } from "../../composables/perks";
 import { paths } from "@/config";
 import { AlbumInfo } from "../../interfaces";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import { getButtonColor, isLight } from "../../composables/colors/album";
 
 const props = defineProps<{
   album: AlbumInfo;
@@ -83,96 +78,6 @@ function handleVisibilityState(state: boolean) {
 }
 
 useVisibility(albumheaderthing, handleVisibilityState);
-
-/**
- * Returns `true` if the rgb color passed is light.
- *
- * @param {string} rgb The color to check whether it's light or dark.
- * @returns {boolean} true if color is light, false if color is dark.
- */
-function isLight(rgb: string = props.album.colors[0]): boolean {
-  if (rgb == null || undefined) return false;
-
-  const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
-  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
-
-  return brightness > 170;
-}
-
-interface BtnColor {
-  color: string;
-  isDark: boolean;
-}
-
-/**
- * Returns the first contrasting color in the album colors.
- *
- * @param {string[]} colors The album colors to choose from.
- * @returns {BtnColor} A color to use as the play button background
- */
-function getButtonColor(colors: string[] = props.album.colors): BtnColor {
-  const base_color = colors[0];
-  if (colors.length === 0) return { color: "#fff", isDark: true };
-
-  for (let i = 0; i < colors.length; i++) {
-    if (theyContrast(base_color, colors[i])) {
-      return {
-        color: colors[i],
-        isDark: isLight(colors[i]),
-      };
-    }
-  }
-
-  return {
-    color: "#fff",
-    isDark: true,
-  };
-}
-
-/**
- * Returns the luminance of a color.
- * @param r The red value of the color.
- * @param g The green value of the color.
- * @param b The blue value of the color.
- */
-function luminance(r: any, g: any, b: any) {
-  let a = [r, g, b].map(function (v) {
-    v /= 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-  });
-  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
-}
-
-/**
- * Returns a contrast ratio of `color1`:`color2`
- * @param {string} color1 The first color
- * @param {string} color2 The second color
- */
-function contrast(color1: number[], color2: number[]): number {
-  let lum1 = luminance(color1[0], color1[1], color1[2]);
-  let lum2 = luminance(color2[0], color2[1], color2[2]);
-  let brightest = Math.max(lum1, lum2);
-  let darkest = Math.min(lum1, lum2);
-  return (brightest + 0.05) / (darkest + 0.05);
-}
-
-/**
- * Converts a rgb color string to an array of the form: `[r, g, b]`
- * @param rgb The color to convert
- * @returns {number[]} The array representation of the color
- */
-function rgbToArray(rgb: string): number[] {
-  return rgb.match(/\d+/g)!.map(Number);
-}
-
-/**
- * Returns true if the `color2` contrast with `color1`.
- * @param color1 The first color
- * @param color2 The second color
- */
-function theyContrast(color1: string, color2: string) {
-  return contrast(rgbToArray(color1), rgbToArray(color2)) > 3;
-}
 </script>
 
 <style lang="scss">
@@ -195,11 +100,7 @@ function theyContrast(color1: string, color2: string) {
       aspect-ratio: 1;
       object-fit: cover;
       transition: all 0.2s ease-in-out;
-    }
-
-    .filter {
-      position: absolute;
-      // display: none;
+      user-select: none;
     }
   }
 
@@ -217,7 +118,6 @@ function theyContrast(color1: string, color2: string) {
       .title {
         font-size: 2.5rem;
         font-weight: 600;
-        text-transform: capitalize;
       }
 
       .artist {
diff --git a/src/components/ArtistsExplorer/ArtistsList.vue b/src/components/ArtistsExplorer/ArtistsList.vue
index 3a7d6c41..2d97cd87 100644
--- a/src/components/ArtistsExplorer/ArtistsList.vue
+++ b/src/components/ArtistsExplorer/ArtistsList.vue
@@ -9,7 +9,7 @@
     <div class="all-albums">
       <div class="item rounded" v-for="artist in artists" :key="artist">
         <div class="album-art image rounded"></div>
-        <div class="name ellip">{{ artist.name }}</div>
+        <div class="name t-center ellip">{{ artist.name }}</div>
       </div>
     </div>
   </div>
@@ -84,16 +84,8 @@ export default {
       }
 
       .name {
-        text-align: center;
         margin-top: $small;
       }
-
-      .artist {
-        font-size: small;
-        font-weight: lighter;
-        text-align: center;
-        color: rgba(255, 255, 255, 0.699);
-      }
     }
   }
 
@@ -131,4 +123,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ArtistsExplorer/TopArtists.vue b/src/components/ArtistsExplorer/TopArtists.vue
index ddb19d3b..103cb31b 100644
--- a/src/components/ArtistsExplorer/TopArtists.vue
+++ b/src/components/ArtistsExplorer/TopArtists.vue
@@ -18,7 +18,7 @@
   </div>
 </template>
 
-<script>
+<script >
 export default {
   setup() {
     const artists = [
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index 5259b3e2..719713be 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import "@/assets/css/BottomBar/BottomBar.scss";
-import Progress from "../LeftSidebar/NP/Progress.vue";
-import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import "@/assets/scss/BottomBar/BottomBar.scss";
 import { formatSeconds } from "@/composables/perks";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import Progress from "../LeftSidebar/NP/Progress.vue";
 
 import useQStore from "@/stores/queue";
 
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index d97449a2..71042fed 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -25,7 +25,6 @@ defineProps<{
   grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
   gap: $medium;
   padding: $small;
-  margin-bottom: 1rem;
   background-color: $gray5;
 }
 </style>
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index c8a56221..29dc07e3 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="folder">
     <div class="table rounded" v-if="tracks.length">
+      <div class="header" v-if="disc && !album.info.is_single">
+        <div class="disc-number">Disc {{ disc }}</div>
+      </div>
       <div class="songlist">
         <SongItem
-          v-for="track in getTracks()"
+          v-for="track in getTrackList()"
           :key="track.trackid"
           :track="track"
           :index="track.index"
@@ -19,6 +22,9 @@
         <div class="text">No tracks here</div>
       </div>
     </div>
+    <div class="copyright" v-if="copyright">
+      {{ copyright() }}
+    </div>
   </div>
 </template>
 
@@ -31,8 +37,10 @@ import { focusElem } from "@/composables/perks";
 import { onMounted, onUpdated, ref } from "vue";
 import { Track } from "@/interfaces";
 import useQStore from "@/stores/queue";
+import useAlbumStore from "@/stores/pages/album";
 
 const queue = useQStore();
+const album = useAlbumStore();
 
 const props = defineProps<{
   tracks: Track[];
@@ -40,6 +48,8 @@ const props = defineProps<{
   pname?: string;
   playlistid?: string;
   on_album_page?: boolean;
+  disc?: string | number;
+  copyright?: () => string;
 }>();
 
 const route = useRoute();
@@ -86,13 +96,15 @@ function updateQueue(track: Track) {
       queue.play(index);
       break;
     case "AlbumView":
+      const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
+
       queue.playFromAlbum(
         track.album,
         track.albumartist,
         track.albumhash,
-        props.tracks
+        album.tracks
       );
-      queue.play(index);
+      queue.play(tindex);
       break;
     case "PlaylistView":
       queue.playFromPlaylist(props.pname, props.playlistid, props.tracks);
@@ -101,7 +113,10 @@ function updateQueue(track: Track) {
   }
 }
 
-function getTracks() {
+/**
+ * Used to show track numbers as indexes in the album page.
+ */
+function getTrackList() {
   if (props.on_album_page) {
     let tracks = props.tracks.map((track) => {
       track.index = track.tracknumber;
@@ -111,7 +126,7 @@ function getTracks() {
     return tracks;
   }
 
-  let tracks = props.tracks.map((track, index) => {
+  const tracks = props.tracks.map((track, index) => {
     track.index = index + 1;
     return track;
   });
@@ -129,12 +144,30 @@ function getTracks() {
   padding: 1rem;
 }
 
+.copyright {
+  font-size: 0.8rem;
+  margin-top: 1rem;
+  text-align: center;
+  opacity: 0.5;
+}
+
 .table {
   height: 100%;
   overflow-y: hidden;
   background-color: $gray5;
   padding: $small 0;
 
+  .header {
+    margin: $small;
+
+    .disc-number {
+      font-size: small;
+      font-weight: bold;
+      margin: $small 1.5rem;
+      color: $gray1;
+    }
+  }
+
   .current {
     a {
       color: inherit;
diff --git a/src/components/LeftSidebar/NP/HotKeys.vue b/src/components/LeftSidebar/NP/HotKeys.vue
index ae9c9827..cfad16d8 100644
--- a/src/components/LeftSidebar/NP/HotKeys.vue
+++ b/src/components/LeftSidebar/NP/HotKeys.vue
@@ -1,4 +1,5 @@
 <template>
+  
   <div class="hotkeys">
     <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
@@ -17,6 +18,7 @@ const q = useQStore();
 </script>
 
 <style lang="scss">
+
 .hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
diff --git a/src/components/LeftSidebar/NP/Progress.vue b/src/components/LeftSidebar/NP/Progress.vue
index 2abfbbdb..49723554 100644
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/src/components/LeftSidebar/NP/Progress.vue
@@ -2,9 +2,9 @@
   <input
     id="progress"
     type="range"
-    :value="q.track.current_time"
+    :value="q.duration.current"
     min="0"
-    max="100"
+    :max="q.duration.full"
     step="0.1"
     @change="seek()"
   />
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index caf73dad..4b5308fb 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -5,7 +5,7 @@
       :key="menu.name"
       :to="{ name: menu.route_name, params: menu.params }"
     >
-      <div class="nav-button" id="home-button" v-motion-slide-from-left-100>
+      <div class="nav-button" id="home-button">
         <div class="in">
           <component :is="menu.icon"></component>
           <span>{{ menu.name }}</span>
@@ -70,8 +70,6 @@ const menus = [
   }
 
   svg {
-    width: 2rem;
-    height: 2rem;
     margin: 0 $small 0 $small;
     border-radius: $small;
   }
diff --git a/src/components/LeftSidebar/SongCard.vue b/src/components/LeftSidebar/SongCard.vue
index dfdee52d..2c1c7918 100644
--- a/src/components/LeftSidebar/SongCard.vue
+++ b/src/components/LeftSidebar/SongCard.vue
@@ -21,9 +21,9 @@
           <span v-else>MP3</span>
           • {{ track.bitrate }}
         </div>
-        <div class="title ellip">{{ props.track.title }}</div>
+        <div class="title ellip cap-first">{{ props.track.title }}</div>
         <div class="separator no-border"></div>
-        <div class="artists ellip" v-if="props.track.artists[0] !== ''">
+        <div class="artists ellip cap-first" v-if="props.track.artists[0] !== ''">
           <span
             v-for="artist in putCommas(props.track.artists)"
             :key="artist"
diff --git a/src/components/LeftSidebar/nowPlaying.vue b/src/components/LeftSidebar/nowPlaying.vue
index 66656f1f..c36b3183 100644
--- a/src/components/LeftSidebar/nowPlaying.vue
+++ b/src/components/LeftSidebar/nowPlaying.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="l_ rounded">
-    <div class="headin">Now Playing</div>
+  <div class="now-playing-card t-center rounded">
+    <div class="headin">Now playing</div>
     <div
       class="button menu rounded"
       @click="showContextMenu"
@@ -11,6 +11,10 @@
     <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.tracks[queue.current]" />
+      <div class="l-track-time">
+        <span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
+        ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
+      </div>
       <Progress />
       <HotKeys />
     </div>
@@ -18,16 +22,17 @@
 </template>
 
 <script setup lang="ts">
-import SongCard from "./SongCard.vue";
-import HotKeys from "./NP/HotKeys.vue";
-import Progress from "./NP/Progress.vue";
-import useQStore from "../../stores/queue";
-import MenuSvg from "../../assets/icons/more.svg";
+import { ContextSrc } from "@/composables/enums";
 import trackContext from "@/contexts/track_context";
 import useContextStore from "@/stores/context";
 import useModalStore from "@/stores/modal";
 import useQueueStore from "@/stores/queue";
-import { ContextSrc } from "@/composables/enums";
+import MenuSvg from "../../assets/icons/more.svg";
+import useQStore from "../../stores/queue";
+import HotKeys from "./NP/HotKeys.vue";
+import Progress from "./NP/Progress.vue";
+import SongCard from "./SongCard.vue";
+import { formatSeconds } from "@/composables/perks";
 
 import { ref } from "vue";
 
@@ -56,14 +61,24 @@ const showContextMenu = (e: Event) => {
 };
 </script>
 <style lang="scss">
-.l_ {
+.now-playing-card {
   padding: 1rem;
   background-color: $primary;
-  text-align: center;
   width: 100%;
   display: grid;
   position: relative;
-  text-transform: capitalize;
+
+  .l-track-time {
+    display: flex;
+    justify-content: space-between;
+    opacity: 0.8;
+    margin-top: $small;
+
+    span {
+      font-size: small;
+      padding: $smaller;
+    }
+  }
 
   &:hover {
     ::-moz-range-thumb {
diff --git a/src/components/Logo.vue b/src/components/Logo.vue
index 25110d8d..1166fa84 100644
--- a/src/components/Logo.vue
+++ b/src/components/Logo.vue
@@ -1,6 +1,5 @@
 <template>
   <div id="logo-container"
-    v-motion-slide-from-top
   >
     <router-link :to="{ name: 'Home' }">
       <div id="logo" class="rounded"></div
@@ -9,7 +8,7 @@
 </template>
 
 <style lang="scss">
-@import "../assets/css/mixins.scss";
+@import "../assets/scss/mixins.scss";
 
 #logo-container {
   overflow: hidden;
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index 7f77e247..17316e0e 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -37,7 +37,7 @@
         <div class="type">Playlist</div>
       </div>
     </div>
-    <div class="last-updated" v-motion-slide-from-right>
+    <div class="last-updated">
       <span class="status"
         >Last updated {{ props.info.lastUpdated }} &#160;|&#160;&#160;</span
       >
diff --git a/src/components/RightSideBar/Home/Main.vue b/src/components/RightSideBar/Home/Main.vue
index c8592ad0..752f5299 100644
--- a/src/components/RightSideBar/Home/Main.vue
+++ b/src/components/RightSideBar/Home/Main.vue
@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import Recommendations from "./Recommendation.vue";
-import UpNext from "../queue/upNext.vue";
+import UpNext from "../Queue/upNext.vue";
 import useQStore from "../../../stores/queue";
 const queue = useQStore();
 </script>
diff --git a/src/components/RightSideBar/Home/Recommendation.vue b/src/components/RightSideBar/Home/Recommendation.vue
index 58e31b57..b21d9844 100644
--- a/src/components/RightSideBar/Home/Recommendation.vue
+++ b/src/components/RightSideBar/Home/Recommendation.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="r-tracks rounded border">
+  <div class="r-tracks rounded bg-black">
     <div class="heading">Similar tracks</div>
     <div class="tracks">
       <div class="song-item" v-for="song in songs" :key="song.artist">
-        <img src="../../../assets/images/null.webp" class="rounded" />
+        <img src="" class="rounded" />
         <div class="tags">
           <div class="title">{{ song.title }}</div>
           <div class="artist">{{ song.artist }}</div>
diff --git a/src/components/RightSideBar/NowPlaying.vue b/src/components/RightSideBar/NowPlaying.vue
index ab270944..028f14d6 100644
--- a/src/components/RightSideBar/NowPlaying.vue
+++ b/src/components/RightSideBar/NowPlaying.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="now-playing border shadow-lg">
+  <div class="now-playing bg-black shadow-lg">
     <div class="art-tags">
       <div class="duration">{{ formatSeconds(current.length) }}</div>
       <div
           :style="{
           backgroundImage: `url(&quot;${current.image}&quot;)`,
         }"
-          class="album-art image border"
+          class="album-art image bg-black"
       ></div>
       <div class="t-a">
         <p id="title" class="ellipsis">{{ current.title }}</p>
-        <div class="separator no-border"></div>
+        <div class="separator no-bg-black"></div>
         <div v-if="current.artists[0] !== ''" id="artist" class="ellip">
           <span v-for="artist in putCommas(current.artists)" :key="artist">{{
               artist
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 2ef1c66f..0bf7ffdd 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -2,7 +2,8 @@
   <div class="up-next">
     <div class="r-grid">
       <UpNext :next="queue.tracks[queue.next]" :playNext="queue.playNext" />
-      <div class="scrollable-r border rounded">
+      <div class="scrollable-r bg-black rounded">
+        <QueueActions />
         <div
           class="inner"
           @mouseenter="setMouseOver(true)"
@@ -25,11 +26,12 @@
 
 <script setup lang="ts">
 import TrackItem from "../shared/TrackItem.vue";
-import useQStore from "../../stores/queue";
-import PlayingFrom from "./queue/playingFrom.vue";
-import UpNext from "./queue/upNext.vue";
+import useQStore from "@/stores/queue";
+import PlayingFrom from "./Queue/playingFrom.vue";
+import UpNext from "./Queue/upNext.vue";
 import { onUpdated, ref } from "vue";
 import { focusElem } from "@/composables/perks";
+import QueueActions from "./Queue/QueueActions.vue";
 
 const queue = useQStore();
 const mouseover = ref(false);
@@ -62,18 +64,22 @@ onUpdated(() => {
     grid-template-rows: max-content 1fr max-content;
     gap: $small;
 
+    .left {
+      display: flex;
+      gap: $small;
+    }
+
     .scrollable-r {
       height: 100%;
-      padding: $small 0 $small $small;
       overflow: hidden;
+      display: grid;
+      grid-template-rows: max-content 1fr;
 
       .inner {
-        height: 100%;
         overflow: scroll;
-        margin-top: 1rem;
-        padding-right: $small;
         overflow-x: hidden;
         scrollbar-color: grey transparent;
+        margin: 1rem 0;
       }
     }
   }
diff --git a/src/components/RightSideBar/Queue/QueueActions.vue b/src/components/RightSideBar/Queue/QueueActions.vue
new file mode 100644
index 00000000..9fb7c585
--- /dev/null
+++ b/src/components/RightSideBar/Queue/QueueActions.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="queue-actions">
+    <div class="left">
+      <button class="clear-queue action" @click="queue.clearQueue">
+        <ClearSvg />
+        <span>Clear</span>
+      </button>
+      <button class="shuffle-queue action">
+        <SaveAsPlaylistSvg />
+        <span> Save as Playlist </span>
+      </button>
+    </div>
+    <div class="right">
+      <button class="more-action action">
+        <MoreSvg />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import useQueueStore from "../../../stores/queue";
+
+import ClearSvg from "@/assets/icons/delete.svg";
+import SaveAsPlaylistSvg from "@/assets/icons/sdcard.svg";
+import MoreSvg from "@/assets/icons/more.svg";
+
+const queue = useQueueStore();
+</script>
+
+<style lang="scss">
+.queue-actions {
+  display: flex;
+  justify-content: space-between;
+  gap: $small;
+  margin: 1rem;
+  margin-bottom: 0;
+
+  .action {
+    padding: $smaller;
+    padding-right: $small;
+
+    svg {
+      transform: scale(0.8);
+    }
+  }
+
+  .more-action {
+    padding-right: $smaller;
+    svg {
+      transform: scale(1.25);
+    }
+  }
+}
+</style>
diff --git a/src/components/RightSideBar/queue/playingFrom.vue b/src/components/RightSideBar/Queue/playingFrom.vue
similarity index 92%
rename from src/components/RightSideBar/queue/playingFrom.vue
rename to src/components/RightSideBar/Queue/playingFrom.vue
index ca4b8d51..17710db6 100644
--- a/src/components/RightSideBar/queue/playingFrom.vue
+++ b/src/components/RightSideBar/Queue/playingFrom.vue
@@ -1,10 +1,10 @@
 <template>
-  <div id="playing-from" class="rounded" @click="goTo">
+  <div id="playing-from" class="bg-black rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
       Playing from
     </div>
-    <div class="name">
+    <div class="name cap-first">
       <div id="to">
         {{ from.text }}
       </div>
@@ -18,8 +18,8 @@ import {
   fromAlbum,
   fromPlaylist,
   fromSearch,
-} from "../../../interfaces";
-import { FromOptions } from "../../../composables/enums";
+} from "@/interfaces";
+import { FromOptions } from "@/composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
 
@@ -120,7 +120,6 @@ function goTo() {
   }
 
   .name {
-    text-transform: capitalize;
     font-weight: bolder;
   }
 
@@ -130,7 +129,6 @@ function goTo() {
     display: flex;
     align-items: center;
     gap: $small;
-    text-transform: capitalize;
     color: rgba(255, 255, 255, 0.849);
 
     .icon {
diff --git a/src/components/RightSideBar/queue/upNext.vue b/src/components/RightSideBar/Queue/upNext.vue
similarity index 87%
rename from src/components/RightSideBar/queue/upNext.vue
rename to src/components/RightSideBar/Queue/upNext.vue
index 2d045fc3..3dcb8157 100644
--- a/src/components/RightSideBar/queue/upNext.vue
+++ b/src/components/RightSideBar/Queue/upNext.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-item border" @click="playNext">
+  <div class="main-item bg-black" @click="playNext">
     <div class="h">Up Next</div>
     <div class="itemx shadow">
       <div
@@ -22,12 +22,12 @@
 </template>
 
 <script setup lang="ts">
-import { Track } from "../../../interfaces";
-import {putCommas} from "../../../composables/perks";
-import { paths } from "../../../config";
-const imguri = paths.images.thumb;
+import { putCommas } from "@/composables/perks";
+import { paths } from "@/config";
+import { Track } from "@/interfaces";
 
-const props = defineProps<{
+const imguri = paths.images.thumb;
+defineProps<{
   next: Track;
   playNext: () => void;
 }>();
diff --git a/src/components/RightSideBar/Search/AlbumGrid.vue b/src/components/RightSideBar/Search/AlbumGrid.vue
index 89fc819f..8024edaa 100644
--- a/src/components/RightSideBar/Search/AlbumGrid.vue
+++ b/src/components/RightSideBar/Search/AlbumGrid.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="albums-results border">
-    <div class="grid">
+  <div class="artists-results">
+    <div class="search-results-grid">
       <AlbumCard
         v-for="album in search.albums.value"
         :key="`${album.artist}-${album.title}`"
@@ -23,22 +23,3 @@ function loadMore() {
   search.loadAlbums(search.loadCounter.albums);
 }
 </script>
-
-<style lang="scss">
-.right-search .albums-results {
-  border-radius: 0.5rem;
-  margin-top: $small;
-  padding: $small;
-  overflow-x: hidden;
-
-  .result-item:hover {
-    background-color: $gray4;
-  }
-
-  .grid {
-    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
-    flex-wrap: wrap;
-    gap: 0.75rem;
-  }
-}
-</style>
diff --git a/src/components/RightSideBar/Search/ArtistGrid.vue b/src/components/RightSideBar/Search/ArtistGrid.vue
index 82c21a54..534aaeef 100644
--- a/src/components/RightSideBar/Search/ArtistGrid.vue
+++ b/src/components/RightSideBar/Search/ArtistGrid.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="artists-results border">
-    <div class="grid">
+  <div class="artists-results" v-if="search.artists.value.length">
+    <div class="search-results-grid">
       <ArtistCard
         v-for="artist in search.artists.value"
         :key="artist.image"
@@ -13,9 +13,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 const search = useSearchStore();
 
 function loadMore() {
@@ -26,17 +26,17 @@ function loadMore() {
 
 <style lang="scss">
 .right-search .artists-results {
-  border-radius: 0.5rem;
-  padding: $small;
-  margin-bottom: $small;
+  display: grid;
+  margin: 0 1rem;
 
   .xartist {
     background-color: $gray;
-  }
 
-  .grid {
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
+    .artist-image {
+      width: 7rem;
+      height: 7rem;
+      object-fit: cover;
+    }
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/LoadMore.vue b/src/components/RightSideBar/Search/LoadMore.vue
index aae43d79..b54845d9 100644
--- a/src/components/RightSideBar/Search/LoadMore.vue
+++ b/src/components/RightSideBar/Search/LoadMore.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="morexx">
-    <div @click="loadMore" class="btn circular">
+    <button @click="loadMore" class="btn">
       <div class="text">Load More</div>
-    </div>
+    </button>
   </div>
 </template>
 
@@ -22,19 +22,8 @@ function loadMore() {
   place-items: center;
   margin-top: $small;
 
-  .btn {
-    height: 2.5rem;
-    width: 15rem;
-    display: grid;
-    place-items: center;
-    transition: all 0.5s ease;
-    background-image: linear-gradient(37deg, $red, $blue);
-    cursor: pointer;
-
-    &:hover {
-      background-color: $blue !important;
-      width: 12rem;
-    }
+  button {
+    padding: 0 1rem !important;
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/Main.vue b/src/components/RightSideBar/Search/Main.vue
index 4198abb9..6567a934 100644
--- a/src/components/RightSideBar/Search/Main.vue
+++ b/src/components/RightSideBar/Search/Main.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
+      <Tab name="Top Results">
+        <ArtistGrid />
+      </Tab>
       <Tab name="tracks">
         <TracksGrid />
       </Tab>
@@ -10,18 +13,19 @@
       <Tab name="artists">
         <ArtistGrid />
       </Tab>
+      <Tab name="Playlists">
+        <ArtistGrid />
+      </Tab>
     </TabsWrapper>
   </div>
 </template>
 
 <script setup lang="ts">
-import TabsWrapper from "./TabsWrapper.vue";
-import Tab from "./Tab.vue";
-import TracksGrid from "./TracksGrid.vue";
 import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
-import "@/assets/css/Search/Search.scss";
-
+import Tab from "./Tab.vue";
+import TabsWrapper from "./TabsWrapper.vue";
+import TracksGrid from "./TracksGrid.vue";
 </script>
 
 <style lang="scss">
@@ -31,21 +35,6 @@ import "@/assets/css/Search/Search.scss";
   width: auto;
   height: 100%;
 
-  .no-res {
-    text-align: center;
-    display: grid;
-    height: calc(100% - $small);
-    place-items: center;
-    font-size: 2rem;
-    transition: all 0.3s ease;
-    line-height: 4rem !important;
-
-    .highlight {
-      padding: $small;
-      background-color: rgb(29, 26, 26);
-    }
-  }
-
   .heading {
     padding: $medium;
     border-radius: $small;
@@ -53,6 +42,11 @@ import "@/assets/css/Search/Search.scss";
     font-size: 2rem;
     color: $white;
   }
+  .search-results-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+  }
 
   .input {
     display: flex;
@@ -60,13 +54,4 @@ import "@/assets/css/Search/Search.scss";
     position: relative;
   }
 }
-
-.right-search .scrollable {
-  overflow-y: auto;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
 </style>
diff --git a/src/components/RightSideBar/Search/PlaylistsGrid.vue b/src/components/RightSideBar/Search/PlaylistsGrid.vue
index e30984ca..b0b222fa 100644
--- a/src/components/RightSideBar/Search/PlaylistsGrid.vue
+++ b/src/components/RightSideBar/Search/PlaylistsGrid.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="albums-results border">
+  <div class="albums-results bg-black">
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
@@ -12,9 +12,9 @@
 </template>
 
 <script setup lang="ts">
+import useSearchStore from "../../../stores/search";
 import PCard from "../../playlists/PlaylistCard.vue";
 import LoadMore from "./LoadMore.vue";
-import useSearchStore from "../../../stores/search";
 
 const search = useSearchStore();
 
diff --git a/src/components/RightSideBar/Search/Tab.vue b/src/components/RightSideBar/Search/Tab.vue
index ac06763e..2ab29086 100644
--- a/src/components/RightSideBar/Search/Tab.vue
+++ b/src/components/RightSideBar/Search/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="name == s.currentTab" v-motion-slide-visible-top>
+  <div v-show="name == s.currentTab">
     <slot />
   </div>
 </template>
diff --git a/src/components/RightSideBar/Search/TabsWrapper.vue b/src/components/RightSideBar/Search/TabsWrapper.vue
index b5338c8c..acba0f50 100644
--- a/src/components/RightSideBar/Search/TabsWrapper.vue
+++ b/src/components/RightSideBar/Search/TabsWrapper.vue
@@ -1,16 +1,19 @@
 <template>
-  <div id="right-tabs">
-    <div id="tabheaders">
-      <div
-        class="tab rounded"
-        v-for="slot in $slots.default()"
-        :key="slot.key"
-        @click="s.changeTab(slot.props.name)"
-        :class="{ activetab: slot.props.name === s.currentTab }"
-      >
-        {{ slot.props.name }}
+  <div id="right-tabs" class="bg-black rounded">
+    <div class="tab-buttons-wrapper">
+      <div id="tabheaders" class="rounded noscroll">
+        <div
+          class="tab cap-first"
+          v-for="slot in $slots.default()"
+          :key="slot.key"
+          @click="s.changeTab(slot.props.name)"
+          :class="{ activetab: slot.props.name === s.currentTab }"
+        >
+          {{ slot.props.name }}
+        </div>
       </div>
     </div>
+
     <div id="tab-content">
       <slot />
     </div>
@@ -26,30 +29,46 @@ const s = useSearchStore();
 <style lang="scss">
 #right-tabs {
   height: 100%;
-  margin-right: $small;
   display: grid;
   grid-template-rows: min-content 1fr;
 
-  #tabheaders {
+  .tab-buttons-wrapper {
     display: flex;
-    gap: $small;
-    margin: $small 0;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #tabheaders {
+    display: grid;
+    grid-template-columns: repeat(5, max-content);
+    justify-content: space-around;
+    margin: 1rem;
+    width: max-content;
+    background: linear-gradient(37deg, $gray3, $gray4, $gray3);
+    height: 2rem;
+
+    & > * {
+      border-left: solid 1px $gray3;
+    }
 
     .tab {
-      background-color: $gray3;
-      padding: $small;
-      text-transform: capitalize;
-      cursor: pointer;
       display: flex;
+      align-items: center;
       justify-content: center;
+
+      cursor: pointer;
       transition: all 0.3s ease;
-      width: 4rem;
+      padding: 0 $small;
+
+      &:first-child {
+        border-left: solid 1px transparent;
+      }
     }
 
     .activetab {
-      background-color: $accent;
-      width: 6rem;
+      background-color: $darkblue;
       transition: all 0.3s ease;
+      border-left: solid 1px transparent;
     }
   }
 
@@ -57,9 +76,7 @@ const s = useSearchStore();
     height: 100%;
     overflow: auto;
     overflow-x: hidden;
-    border-radius: $small;
-    background-color: $gray;
-    // overflow: hidden;
+    padding-bottom: 1rem;
   }
 }
 </style>
diff --git a/src/components/RightSideBar/Search/TracksGrid.vue b/src/components/RightSideBar/Search/TracksGrid.vue
index 3b04da59..e268280d 100644
--- a/src/components/RightSideBar/Search/TracksGrid.vue
+++ b/src/components/RightSideBar/Search/TracksGrid.vue
@@ -19,7 +19,6 @@
 import LoadMore from "./LoadMore.vue";
 import TrackItem from "../../shared/TrackItem.vue";
 import useQStore from "../../../stores/queue";
-import { Track } from "../../../interfaces";
 import useSearchStore from "../../../stores/search";
 
 const queue = useQStore();
@@ -38,8 +37,6 @@ function updateQueue(index: number) {
 
 <style lang="scss">
 .right-search #tracks-results {
-  border-radius: 0.5rem;
-  padding: $small;
   height: 100% !important;
   overflow: hidden;
 
diff --git a/src/components/contextMenu.vue b/src/components/contextMenu.vue
index 7797d1ff..22ee63e3 100644
--- a/src/components/contextMenu.vue
+++ b/src/components/contextMenu.vue
@@ -1,5 +1,4 @@
 <template>
-  <!-- v-show="context.visible" -->
   <div
     class="context-menu rounded shadow-lg"
     :class="[
@@ -26,7 +25,7 @@
       @click="option.action()"
     >
       <div class="icon image" :class="option.icon"></div>
-      <div class="label ellip">{{ option.label }}</div>
+      <div class="label ellip cap-first">{{ option.label }}</div>
       <div class="more image" v-if="option.children"></div>
       <div class="children rounded shadow-sm" v-if="option.children">
         <div
@@ -36,7 +35,7 @@
           :class="[{ critical: child.critical }, child.type]"
           @click="child.action()"
         >
-          <div class="label ellip">
+          <div class="label ellip cap-first">
             {{ child.label }}
           </div>
         </div>
@@ -60,7 +59,7 @@ const context = useContextStore();
   z-index: 10000 !important;
   transform: scale(0);
 
-  padding: $small;
+  padding: $small 0;
   background: $context;
   transform-origin: top left;
   font-size: 0.875rem;
@@ -71,9 +70,7 @@ const context = useContextStore();
     align-items: center;
     cursor: default;
     padding: $small;
-    border-radius: $small;
     position: relative;
-    text-transform: capitalize;
 
     .more {
       height: 1.5rem;
@@ -90,7 +87,7 @@ const context = useContextStore();
       top: -0.5rem;
       max-height: 23.5rem;
 
-      padding: $small !important;
+      padding: $small 0 !important;
       background-color: $context;
       transform: scale(0);
       transform-origin: top left;
@@ -180,7 +177,6 @@ const context = useContextStore();
 
 .context-many-kids {
   .context-item > .children {
-    // top: -0.5rem;
     overflow-y: auto;
   }
 }
diff --git a/src/components/modals/NewPlaylist.vue b/src/components/modals/NewPlaylist.vue
index 15e96728..ba677e68 100644
--- a/src/components/modals/NewPlaylist.vue
+++ b/src/components/modals/NewPlaylist.vue
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { createNewPlaylist } from "../../composables/pages/playlists";
+import { createNewPlaylist } from "../../composables/fetch/playlists";
 import { Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import usePlaylistStore from "@/stores/pages/playlists";
diff --git a/src/components/modals/updatePlaylist.vue b/src/components/modals/updatePlaylist.vue
index a36e88fc..59f0124a 100644
--- a/src/components/modals/updatePlaylist.vue
+++ b/src/components/modals/updatePlaylist.vue
@@ -55,8 +55,8 @@
 <script setup lang="ts">
 import usePStore from "@/stores/pages/playlist";
 import { onMounted } from "vue";
-import { updatePlaylist } from "../../composables/pages/playlists";
-import { Playlist } from "../../interfaces";
+import { updatePlaylist } from "@/composables/fetch/playlists";
+import { Playlist } from "@/interfaces";
 
 const pStore = usePStore();
 
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 8df2c4e6..74eaff7b 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -81,8 +81,6 @@ watch(
 .topnav {
   display: grid;
   grid-template-columns: 1fr min-content max-content;
-  // border-bottom: 1px solid $gray3;
-  // padding-bottom: $small;
 
   .left {
     display: grid;
@@ -94,7 +92,6 @@ watch(
       .title {
         font-size: 1.5rem;
         font-weight: bold;
-        margin-top: $smaller;
         display: flex;
       }
     }
diff --git a/src/components/nav/Titles/APTitle.vue b/src/components/nav/Titles/APTitle.vue
index ed2204bb..959ec149 100644
--- a/src/components/nav/Titles/APTitle.vue
+++ b/src/components/nav/Titles/APTitle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="title albumnavtitle" v-motion-slide-from-left-100>
+  <div class="title albumnavtitle">
     <PlayBtn :source="things.source" :store="things.store" />
     <div class="ellip">
       {{ things.text }}
@@ -44,14 +44,8 @@ const things = computed(() => {
 
 <style lang="scss">
 .albumnavtitle {
-  padding-left: 3rem;
-
-  .play-btn {
-    position: absolute;
-    left: $smaller;
-    top: -$smaller;
-    height: 2.25rem;
-    aspect-ratio: 1;
-  }
+  display: flex;
+  align-items: center;
+  gap: $small;
 }
 </style>
diff --git a/src/components/nav/Titles/Folder.vue b/src/components/nav/Titles/Folder.vue
index ba4b16e2..0168770d 100644
--- a/src/components/nav/Titles/Folder.vue
+++ b/src/components/nav/Titles/Folder.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="folder-nav-title">
-    <div class="folder" v-motion-slide-from-left-100>
+    <div class="folder">
       <div class="fname">
         <div class="icon image"></div>
         <div class="paths">
@@ -9,7 +9,6 @@
             v-for="path in subPaths"
             :key="path.path"
             :class="{ inthisfolder: path.active }"
-            v-motion-slide-from-left-100
             @click="
               $router.push({ name: 'FolderView', params: { path: path.path } })
             "
diff --git a/src/components/nav/Titles/Playlists.vue b/src/components/nav/Titles/Playlists.vue
index f2613ca3..dcbecd48 100644
--- a/src/components/nav/Titles/Playlists.vue
+++ b/src/components/nav/Titles/Playlists.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="title"
-    v-motion-slide-from-left-100
   >
     Playlists
   </div>
diff --git a/src/components/playlists/PlaylistCard.vue b/src/components/playlists/PlaylistCard.vue
index cd56149b..8e462226 100644
--- a/src/components/playlists/PlaylistCard.vue
+++ b/src/components/playlists/PlaylistCard.vue
@@ -11,7 +11,7 @@
       }"
     ></div>
     <div class="bottom">
-      <div class="name ellip">{{ props.playlist.name }}</div>
+      <div class="name ellip cap-first">{{ props.playlist.name }}</div>
       <div class="count">
         <span v-if="props.playlist.count == 0">No Tracks</span>
         <span v-else-if="props.playlist.count == 1"
@@ -85,7 +85,6 @@ const props = defineProps<{
     margin-top: 1rem;
 
     .name {
-      text-transform: capitalize;
       font-weight: 900;
     }
 
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 5b9730e8..5fe01412 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -41,6 +41,7 @@ defineProps<{
   background-color: $gray4;
   color: #ffffffde !important;
   transition: all 0.5s ease;
+  min-width: 8.5rem;
 
   .img {
     position: relative;
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index 686f9703..37dc535e 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -1,11 +1,8 @@
 <template>
   <div class="xartist" :class="{ _is_on_sidebar: alt }">
-    <div
-      class="artist-image image border-sm"
-      :style="{ backgroundImage: `url('${imguri + artist.image}')` }"
-    ></div>
+    <img class="artist-image shadow-sm" :src="imguri + artist.image" alt="" />
     <div>
-      <p class="artist-name ellipsis">{{ artist.name }}</p>
+      <p class="artist-name t-center ellipsis">{{ artist.name }}</p>
     </div>
   </div>
 </template>
@@ -28,7 +25,7 @@ defineProps<{
   overflow: hidden;
   position: relative;
 
-  min-width: 8.25em;
+  min-width: 8.5em;
   height: 11em;
   border-radius: 0.75rem;
   display: flex;
@@ -38,28 +35,23 @@ defineProps<{
   cursor: pointer;
 
   .artist-image {
-    width: 8em;
-    height: 8em;
+    width: 8rem;
+    height: 8rem;
     border-radius: 60%;
     margin-bottom: $small;
-    background-size: 8rem 8rem;
-    background-position: center;
-    background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;
     transition-delay: 0.25s;
+    object-fit: cover;
   }
 
   &:hover {
     .artist-image {
-      background-position: 50% 20%;
       border-radius: 20%;
-      background-size: 10rem 10rem;
     }
   }
 
   .artist-name {
     margin: 0;
-    text-align: center;
     font-size: 0.9rem;
     font-weight: 510;
     max-width: 7rem;
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 56405594..07cc7564 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -12,7 +12,7 @@
     @dblclick="emitUpdate(track)"
     @contextmenu="showContextMenu"
   >
-    <div class="index">{{ index }}</div>
+    <div class="index t-center">{{ index }}</div>
     <div class="flex">
       <div @click="emitUpdate(track)" class="thumbnail">
         <img
@@ -21,16 +21,16 @@
           class="album-art image rounded"
         />
         <div
-          class="now-playing-track image"
-          v-if="isPlaying && isCurrent"
-          :class="{ active: isPlaying, not_active: !isPlaying }"
+          class="now-playing-track-indicator image"
+          v-if="isCurrent"
+          :class="{ last_played: !isPlaying }"
         ></div>
       </div>
       <div @click="emitUpdate(track)">
-        <span class="ellip title">{{ track.title }}</span>
+        <span class="ellip title cap-first">{{ track.title }}</span>
       </div>
     </div>
-    <div class="song-artists">
+    <div class="song-artists cap-first">
       <div class="ellip" v-if="track.artists[0] !== ''">
         <span
           class="artist"
@@ -44,7 +44,7 @@
       </div>
     </div>
     <router-link
-      class="song-album ellip"
+      class="song-album ellip cap-first"
       :to="{
         name: 'AlbumView',
         params: {
@@ -186,7 +186,6 @@ function emitUpdate(track: Track) {
   .index {
     color: grey;
     font-size: 0.8rem;
-    text-align: center;
     width: 2rem;
 
     @include phone-only {
@@ -245,7 +244,7 @@ function emitUpdate(track: Track) {
       cursor: pointer;
     }
 
-    .now-playing-track {
+    .now-playing-track-indicator {
       position: absolute;
       left: $small;
       top: $small;
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index 86dec2ea..3a349541 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="track-item h-1"
+    class="track-item"
     @click="playThis(props.track)"
     :class="[
       {
@@ -17,15 +17,17 @@
       }"
     >
       <div
-        class="now-playing-track image"
+        class="now-playing-track-indicator image"
         v-if="props.isCurrent"
-        :class="{ active: props.isPlaying, not_active: !props.isPlaying }"
+        :class="{ last_played: !props.isPlaying }"
       ></div>
     </div>
     <div class="tags">
-      <div class="title ellip">{{ props.track.title }}</div>
+      <div class="title ellip cap-first">
+       {{ props.track.title }}
+      </div>
       <hr />
-      <div class="artist ellip">
+      <div class="artist ellip cap-first">
         <span v-for="artist in putCommas(props.track.artists)" :key="artist">{{
           artist
         }}</span>
@@ -36,15 +38,15 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { putCommas } from "../../composables/perks";
-import trackContext from "../../contexts/track_context";
-import { Track } from "../../interfaces";
-import { ContextSrc } from "../../composables/enums";
+import { ContextSrc } from "@/composables/enums";
+import { putCommas } from "@/composables/perks";
+import trackContext from "@/contexts/track_context";
+import { Track } from "@/interfaces";
 
-import useContextStore from "../../stores/context";
-import useModalStore from "../../stores/modal";
-import useQueueStore from "../../stores/queue";
-import { paths } from "../../config";
+import { paths } from "@/config";
+import useContextStore from "@/stores/context";
+import useModalStore from "@/stores/modal";
+import useQueueStore from "@/stores/queue";
 
 const contextStore = useContextStore();
 const imguri = paths.images.thumb;
@@ -84,7 +86,7 @@ const playThis = (track: Track) => {
 
 <style lang="scss">
 .currentInQueue {
-  background-color: $gray3;
+  background: linear-gradient(37deg, $gray4, $gray3, $gray3);
 }
 
 .contexton {
@@ -93,17 +95,14 @@ const playThis = (track: Track) => {
 }
 
 .track-item {
-  display: flex;
+  display: grid;
+  grid-template-columns: min-content 1fr;
   align-items: center;
-  border-radius: 0.5rem;
-  position: relative;
-  height: 4rem;
-  padding: 0.5rem 0.5rem 0.5rem 4rem;
-  text-transform: capitalize;
+  padding: $small 1rem;
 
   &:hover {
     cursor: pointer;
-    background-color: $gray4 !important;
+    background: linear-gradient(37deg, $gray4, $gray3, $gray3);
   }
 
   hr {
@@ -111,9 +110,11 @@ const playThis = (track: Track) => {
     margin: 0.1rem;
   }
 
+  // .tags {
+  //   border: solid 1px;
+  // }
+
   .album-art {
-    position: absolute;
-    left: $small;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/composables/colors/album.ts b/src/composables/colors/album.ts
new file mode 100644
index 00000000..9aaa188d
--- /dev/null
+++ b/src/composables/colors/album.ts
@@ -0,0 +1,89 @@
+/**
+ * Returns `true` if the rgb color passed is light.
+ *
+ * @param {string} rgb The color to check whether it's light or dark.
+ * @returns {boolean} true if color is light, false if color is dark.
+ */
+export function isLight(rgb: string): boolean {
+  if (rgb == null || undefined) return false;
+
+  const [r, g, b] = rgb.match(/\d+/g)!.map(Number);
+  const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+  return brightness > 170;
+}
+
+interface BtnColor {
+  color: string;
+  isDark: boolean;
+}
+
+/**
+ * Returns the first contrasting color in the album colors.
+ *
+ * @param {string[]} colors The album colors to choose from.
+ * @returns {BtnColor} A color to use as the play button background
+ */
+export function getButtonColor(colors: string[]): BtnColor {
+  const base_color = colors[0];
+  if (colors.length === 0) return { color: "#fff", isDark: true };
+
+  for (let i = 0; i < colors.length; i++) {
+    if (theyContrast(base_color, colors[i])) {
+      return {
+        color: colors[i],
+        isDark: isLight(colors[i]),
+      };
+    }
+  }
+
+  return {
+    color: "#fff",
+    isDark: true,
+  };
+}
+
+/**
+ * Returns the luminance of a color.
+ * @param r The red value of the color.
+ * @param g The green value of the color.
+ * @param b The blue value of the color.
+ */
+export function luminance(r: any, g: any, b: any) {
+  let a = [r, g, b].map(function (v) {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+/**
+ * Returns a contrast ratio of `color1`:`color2`
+ * @param {string} color1 The first color
+ * @param {string} color2 The second color
+ */
+export function contrast(color1: number[], color2: number[]): number {
+  let lum1 = luminance(color1[0], color1[1], color1[2]);
+  let lum2 = luminance(color2[0], color2[1], color2[2]);
+  let brightest = Math.max(lum1, lum2);
+  let darkest = Math.min(lum1, lum2);
+  return (brightest + 0.05) / (darkest + 0.05);
+}
+
+/**
+ * Converts a rgb color string to an array of the form: `[r, g, b]`
+ * @param rgb The color to convert
+ * @returns {number[]} The array representation of the color
+ */
+export function rgbToArray(rgb: string): number[] {
+  return rgb.match(/\d+/g)!.map(Number);
+}
+
+/**
+ * Returns true if the `color2` contrast with `color1`.
+ * @param color1 The first color
+ * @param color2 The second color
+ */
+export function theyContrast(color1: string, color2: string) {
+  return contrast(rgbToArray(color1), rgbToArray(color2)) > 3;
+}
diff --git a/src/composables/pages/album.ts b/src/composables/fetch/album.ts
similarity index 97%
rename from src/composables/pages/album.ts
rename to src/composables/fetch/album.ts
index 9b1b8ed8..234e7e7d 100644
--- a/src/composables/pages/album.ts
+++ b/src/composables/fetch/album.ts
@@ -1,6 +1,6 @@
 import state from "../state";
 import { AlbumInfo, Track } from "../../interfaces";
-import useAxios from "../useAxios";
+import useAxios from "./useAxios";
 import { NotifType, useNotifStore } from "@/stores/notification";
 
 const getAlbumData = async (hash: string, ToastStore: typeof useNotifStore) => {
diff --git a/src/composables/pages/folders.ts b/src/composables/fetch/folders.ts
similarity index 93%
rename from src/composables/pages/folders.ts
rename to src/composables/fetch/folders.ts
index b75fcf3a..3f9164d4 100644
--- a/src/composables/pages/folders.ts
+++ b/src/composables/fetch/folders.ts
@@ -1,6 +1,6 @@
 import { Folder, Track } from "@/interfaces";
 import state from "../state";
-import useAxios from "../useAxios";
+import useAxios from "./useAxios";
 
 export default async function (path: string) {
   interface FolderData {
diff --git a/src/composables/pages/playlists.ts b/src/composables/fetch/playlists.ts
similarity index 97%
rename from src/composables/pages/playlists.ts
rename to src/composables/fetch/playlists.ts
index 5f45d6b1..80bcd1f5 100644
--- a/src/composables/pages/playlists.ts
+++ b/src/composables/fetch/playlists.ts
@@ -1,8 +1,8 @@
-import { Artist } from "./../../interfaces";
+import { Artist } from "../../interfaces";
 import { Playlist, Track } from "../../interfaces";
 import { Notification, NotifType } from "../../stores/notification";
 import state from "../state";
-import useAxios from "../useAxios";
+import useAxios from "./useAxios";
 /**
  * Creates a new playlist on the server.
  * @param playlist_name The name of the playlist to create.
diff --git a/src/composables/searchMusic.ts b/src/composables/fetch/searchMusic.ts
similarity index 98%
rename from src/composables/searchMusic.ts
rename to src/composables/fetch/searchMusic.ts
index 27d7e43a..fe80343c 100644
--- a/src/composables/searchMusic.ts
+++ b/src/composables/fetch/searchMusic.ts
@@ -1,4 +1,4 @@
-import state from "./state";
+import state from "../state";
 import axios from "axios";
 
 const base_url = `${state.settings.uri}/search`;
diff --git a/src/composables/useAxios.ts b/src/composables/fetch/useAxios.ts
similarity index 93%
rename from src/composables/useAxios.ts
rename to src/composables/fetch/useAxios.ts
index e553b4dc..40b05079 100644
--- a/src/composables/useAxios.ts
+++ b/src/composables/fetch/useAxios.ts
@@ -1,4 +1,4 @@
-import { FetchProps } from "../interfaces";
+import { FetchProps } from "../../interfaces";
 import axios, { AxiosError, AxiosResponse } from "axios";
 
 export default async (args: FetchProps) => {
diff --git a/src/composables/useKeyboard.ts b/src/composables/useKeyboard.ts
index d7825eb5..0a28788f 100644
--- a/src/composables/useKeyboard.ts
+++ b/src/composables/useKeyboard.ts
@@ -3,7 +3,7 @@ import useQStore from "@/stores/queue";
 let key_down_fired = false;
 
 function focusSearchBox() {
-  const elem = document.getElementById("search");
+  const elem = document.getElementById("globalsearch");
 
   elem.focus();
 }
diff --git a/src/contexts/track_context.ts b/src/contexts/track_context.ts
index 244d1842..3d1fb139 100644
--- a/src/contexts/track_context.ts
+++ b/src/contexts/track_context.ts
@@ -4,7 +4,7 @@ import { Option } from "../interfaces";
 import {
   getAllPlaylists,
   addTrackToPlaylist,
-} from "../composables/pages/playlists";
+} from "../composables/fetch/playlists";
 
 import useQueueStore from "../stores/queue";
 import useModalStore from "../stores/modal";
diff --git a/src/data/folders.js b/src/data/folders.js
deleted file mode 100644
index 862f22db..00000000
--- a/src/data/folders.js
+++ /dev/null
@@ -1,92 +0,0 @@
-const folders = [
-  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },  {
-    name: "Jim Reeves - 14 number 1s",
-  },
-  {
-    name: "Nadina",
-  },
-  {
-    name: "Lil Peep - Carlifornia girls",
-  },
-  {
-    name: "Legends never die",
-  },
-  {
-    name: "Flashback party",
-  },
-  {
-    name: "HiFi Gold by Elton John",
-  },
-];
-
-export default {
-  folders,
-};
diff --git a/src/data/songs.js b/src/data/songs.js
deleted file mode 100644
index 7ffa4f3f..00000000
--- a/src/data/songs.js
+++ /dev/null
@@ -1,58 +0,0 @@
-const songs = [
-  {
-    title: "Doom",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Girl Of My Dreams",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Suga [BTS]"],
-    duration: "03:14",
-  },
-  {
-    title: "Feline",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld, ", "Polo G, ", "Lil Yachty"],
-    duration: "03:14",
-  },
-  {
-    title: "Rockstar In His Prime",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Is this love",
-    album: "Fighting Demons",
-    artists: ["Bob Marley"],
-    duration: "03:14",
-  },
-  {
-    title: "I'm a little teapot",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-  {
-    title: "Don't stop me now",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },{
-    title: "Because I got high",
-    album: "Fighting Demons",
-    artists: ["Juice Wrld"],
-    duration: "03:14",
-  },
-];
-
-export default {
-  songs,
-};
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 03d6eb02..41e80750 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -14,9 +14,10 @@ export interface Track {
   genre?: string;
   image: string;
   tracknumber?: number;
-  disknumber?: number;
+  discnumber?: number;
   index?: number;
   uniq_hash: string;
+  copyright?: string;
 }
 
 export interface Folder {
@@ -40,6 +41,7 @@ export interface AlbumInfo {
   is_single: boolean;
   hash: string;
   colors: string[];
+  copyright?: string;
 }
 
 export interface Artist {
diff --git a/src/layouts/HeaderContentBottom.vue b/src/layouts/HeaderContentBottom.vue
index 603efde7..4bc99df1 100644
--- a/src/layouts/HeaderContentBottom.vue
+++ b/src/layouts/HeaderContentBottom.vue
@@ -101,7 +101,6 @@ function toggleBottom() {
 .ap-container {
   height: 100%;
   position: relative;
-  width: calc(100% + 1rem);
 
   #ap-page {
     overflow: auto;
@@ -110,8 +109,6 @@ function toggleBottom() {
     display: grid;
     grid-template-rows: 18rem 1fr;
     gap: 1rem;
-    padding-right: $small;
-    width: calc(100% - $small);
 
     .ap-page-content {
       padding-bottom: 16rem;
@@ -122,7 +119,7 @@ function toggleBottom() {
     position: absolute;
     bottom: 0;
     height: 15rem;
-    width: calc(100% - 1.25rem);
+    width: 100%;
     background-color: $gray;
     transition: all 0.5s ease !important;
     overscroll-behavior: contain;
diff --git a/src/main.js b/src/main.js
index 03e443b8..21853ddd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,14 @@
-import "./registerServiceWorker";
-import "../src/assets/css/global.scss";
+import "./assets/scss/index.scss";
 
-import { MotionPlugin } from "@vueuse/motion";
 import { createPinia } from "pinia";
 import { createApp } from "vue";
 
 import App from "./App.vue";
 import router from "./router";
-import CustomTransitions from "./transitions";
 
 const app = createApp(App);
 
 app.use(createPinia());
 app.use(router);
-app.use(MotionPlugin, CustomTransitions);
 
 app.mount("#app");
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
deleted file mode 100644
index 76cede07..00000000
--- a/src/registerServiceWorker.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from 'register-service-worker'
-
-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready () {
-      console.log(
-        'App is being served from cache by a service worker.\n' +
-        'For more details, visit https://goo.gl/AFskqB'
-      )
-    },
-    registered () {
-      console.log('Service worker has been registered.')
-    },
-    cached () {
-      console.log('Content has been cached for offline use.')
-    },
-    updatefound () {
-      console.log('New content is downloading.')
-    },
-    updated () {
-      console.log('New content is available; please refresh.')
-    },
-    offline () {
-      console.log('No internet connection found. App is running in offline mode.')
-    },
-    error (error) {
-      console.error('Error during service worker registration:', error)
-    }
-  })
-}
diff --git a/src/stores/pages/album.ts b/src/stores/pages/album.ts
index a9aac3dd..665340a9 100644
--- a/src/stores/pages/album.ts
+++ b/src/stores/pages/album.ts
@@ -5,7 +5,7 @@ import {
   getAlbumTracks,
   getAlbumArtists,
   getAlbumBio,
-} from "../../composables/pages/album";
+} from "../../composables/fetch/album";
 
 function sortTracks(tracks: Track[]) {
   return tracks.sort((a, b) => {
@@ -17,10 +17,24 @@ function sortTracks(tracks: Track[]) {
   });
 }
 
+interface Discs {
+  [key: string]: Track[];
+}
+
+function createDiscs(tracks: Track[]): Discs {
+  return tracks.reduce((group, track) => {
+    const { discnumber } = track;
+    group[discnumber] = group[discnumber] ?? [];
+    group[discnumber].push(track);
+    return group;
+  }, {} as Discs);
+}
+
 export default defineStore("album", {
   state: () => ({
     info: <AlbumInfo>{},
     tracks: <Track[]>[],
+    discs: <Discs>{},
     artists: <Artist[]>[],
     bio: null,
   }),
@@ -31,11 +45,16 @@ export default defineStore("album", {
      * @param hash title of the album
      */
     async fetchTracksAndArtists(hash: string) {
-      const tracks = await getAlbumTracks(hash, useNotifStore);
+      this.tracks = [];
+      const album = await getAlbumTracks(hash, useNotifStore);
       const artists = await getAlbumArtists(hash);
 
-      this.tracks = sortTracks(tracks.tracks);
-      this.info = tracks.info;
+      this.discs = createDiscs(sortTracks(album.tracks));
+      Object.keys(this.discs).forEach((disc) => {
+        this.tracks.push(...this.discs[disc]);
+      });
+
+      this.info = album.info;
       this.artists = artists;
     },
     /**
diff --git a/src/stores/pages/folder.ts b/src/stores/pages/folder.ts
index 6ea9498e..803d2df6 100644
--- a/src/stores/pages/folder.ts
+++ b/src/stores/pages/folder.ts
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import { Folder, Track } from "../../interfaces";
 
-import fetchThem from "../../composables/pages/folders";
+import fetchThem from "../../composables/fetch/folders";
 
 export default defineStore("FolderDirs&Tracks", {
   state: () => ({
diff --git a/src/stores/pages/playlist.ts b/src/stores/pages/playlist.ts
index a1941627..f6e4fcc9 100644
--- a/src/stores/pages/playlist.ts
+++ b/src/stores/pages/playlist.ts
@@ -3,7 +3,7 @@ import { defineStore } from "pinia";
 import {
   getPlaylist,
   getPlaylistArtists,
-} from "../../composables/pages/playlists";
+} from "../../composables/fetch/playlists";
 import { Track, Playlist } from "../../interfaces";
 
 export default defineStore("playlist-tracks", {
diff --git a/src/stores/pages/playlists.ts b/src/stores/pages/playlists.ts
index 48509a04..6fb46440 100644
--- a/src/stores/pages/playlists.ts
+++ b/src/stores/pages/playlists.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { Playlist } from "../../interfaces";
-import { getAllPlaylists } from "../../composables/pages/playlists";
+import { getAllPlaylists } from "../../composables/fetch/playlists";
 
 export default defineStore("playlists", {
   state: () => ({
diff --git a/src/stores/queue.ts b/src/stores/queue.ts
index dad5af9b..7ca7ffc9 100644
--- a/src/stores/queue.ts
+++ b/src/stores/queue.ts
@@ -52,9 +52,9 @@ export default defineStore("Queue", {
   state: () => ({
     progressElem: HTMLElement,
     audio: new Audio(),
-    track: {
-      current_time: 0,
-      duration: 0,
+    duration: {
+      current: 0,
+      full: 0,
     },
     current: 0,
     next: 0,
@@ -80,15 +80,16 @@ export default defineStore("Queue", {
         this.audio.onerror = reject;
       })
         .then(() => {
-          this.track.duration = this.audio.duration;
+          this.duration.full = this.audio.duration;
           this.audio.play().then(() => {
             this.playing = true;
             notif(track, this.playPause, this.playNext, this.playPrev);
 
             this.audio.ontimeupdate = () => {
-              this.track.current_time =
+              this.duration.current = this.audio.currentTime;
+              const bg_size =
                 (this.audio.currentTime / this.audio.duration) * 100;
-              elem.style.backgroundSize = `${this.track.current_time}% 100%`;
+              elem.style.backgroundSize = `${bg_size}% 100%`;
             };
 
             this.audio.onended = () => {
@@ -162,8 +163,11 @@ export default defineStore("Queue", {
       this.prev = index - 1;
     },
     setCurrent(index: number) {
+      const track = this.tracks[index];
+
       this.current = index;
-      this.currentid = this.tracks[index].trackid;
+      this.currentid = track.trackid;
+      this.duration.full = track.length;
     },
     setNewQueue(tracklist: Track[]) {
       if (this.tracks !== tracklist) {
@@ -239,5 +243,14 @@ export default defineStore("Queue", {
       );
       writeQueue(this.from, this.tracks);
     },
+    clearQueue() {
+      this.tracks = [defaultTrack] as Track[];
+      this.current = 0;
+      this.currentid = "";
+      this.next = 0;
+      this.prev = 0;
+      this.from = <From>{};
+      console.log(this.current);
+    },
   },
 });
diff --git a/src/stores/search.ts b/src/stores/search.ts
index 49344b71..bc1a545c 100644
--- a/src/stores/search.ts
+++ b/src/stores/search.ts
@@ -8,7 +8,7 @@ import {
   loadMoreTracks,
   loadMoreAlbums,
   loadMoreArtists,
-} from "../composables/searchMusic";
+} from "../composables/fetch/searchMusic";
 import { watch } from "vue";
 import useDebouncedRef from "../composables/useDebouncedRef";
 import useTabStore from "./tabs";
diff --git a/src/transitions.ts b/src/transitions.ts
deleted file mode 100644
index c90ede30..00000000
--- a/src/transitions.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export default {
-  directives: {
-    "slide-from-left": {
-      initial: {
-        opacity: 0,
-        x: 0,
-        y: 20,
-      },
-      enter: {
-        opacity: 1,
-        x: 0,
-        y: 0,
-        transition: {
-          duration: 100,
-          ease: "circInOut",
-        },
-      },
-    },
-    "slide-from-left-100": {
-      initial: {
-        opacity: 0,
-        x: -20,
-      },
-      visible: {
-        opacity: 1,
-        x: 0,
-        transition: {
-          delay: 100,
-        },
-      },
-    },
-    "slide-from-top": {
-      initial: {
-        y: -20,
-        opacity: 0,
-      },
-      enter: {
-        y: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-    "slide-from-right": {
-      initial: {
-        x: 20,
-        opacity: 0,
-      },
-      enter: {
-        x: 0,
-        opacity: 1,
-        transition: {
-          delay: 200,
-        },
-      },
-    },
-  },
-};
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 9beedacb..dbbb0f96 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,6 +1,16 @@
 <template>
   <div id="f-view-parent">
     <div id="scrollable" ref="scrollable">
+      <div class="banner shadow-lg">
+        <div class="text abs rounded pad-medium">
+          <h3><FolderSvg /> {{ getFolderName($route) }}</h3>
+        </div>
+        <img
+          src="../assets/images/one.jpg"
+          alt="folder page banner"
+          class="rounded"
+        />
+      </div>
       <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
       <SongList :tracks="FStore.tracks" :path="FStore.path" />
     </div>
@@ -9,10 +19,11 @@
 
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import { onBeforeRouteUpdate } from "vue-router";
+import { onBeforeRouteUpdate, RouteLocationNormalized } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
+import FolderSvg from "@/assets/icons/folder.svg";
 
 import useFStore from "../stores/pages/folder";
 import useLoaderStore from "../stores/loader";
@@ -23,6 +34,11 @@ const FStore = useFStore();
 
 const scrollable = ref(null);
 
+function getFolderName(route: RouteLocationNormalized) {
+  const path = route.params.path as string;
+  return path.split("/").pop();
+}
+
 onBeforeRouteUpdate((to, from) => {
   if (isSameRoute(to, from)) return;
 
@@ -42,6 +58,7 @@ onBeforeRouteUpdate((to, from) => {
 <style lang="scss">
 #f-view-parent {
   position: relative;
+  overflow: hidden;
 
   .h {
     font-size: 2rem;
@@ -50,8 +67,36 @@ onBeforeRouteUpdate((to, from) => {
 }
 
 #scrollable {
-  overflow-y: auto;
   scrollbar-color: grey transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  .banner {
+    position: relative;
+    height: max-content;
+    height: $banner-height;
+
+    .text {
+      bottom: 1rem;
+      left: 1rem;
+      background-color: $black;
+
+      h3 {
+        margin: $small;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $small;
+      }
+    }
+
+    img {
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
 
   @include phone-only {
     padding-right: 0;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index eefbe3f4..9a18c87d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home">
+  <div class="home t-center">
     <home />
   </div>
 </template>
@@ -10,6 +10,5 @@ import Home from "@/components/Home.vue";
 <style>
 .home {
   padding-left: 20px;
-  text-align: center;
 }
 </style>
diff --git a/src/views/album/Content.vue b/src/views/album/Content.vue
index f66daefb..7847baf4 100644
--- a/src/views/album/Content.vue
+++ b/src/views/album/Content.vue
@@ -1,6 +1,20 @@
 <template>
-  <div class="songs rounded">
-    <SongList :tracks="tracks" :on_album_page="true" />
+  <div class="album-tracks rounded">
+    <div v-for="(disc, key) in discs" class="album-disc">
+      <SongList
+        :key="key"
+        :tracks="disc"
+        :on_album_page="true"
+        :disc="key"
+        :copyright="
+          () => {
+            if (isLastDisc(key)) {
+              return copyright;
+            }
+          }
+        "
+      />
+    </div>
   </div>
 </template>
 
@@ -8,7 +22,23 @@
 import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
 
-defineProps<{
-  tracks: Track[];
+const props = defineProps<{
+  discs: {
+    [key: string]: Track[];
+  };
+  copyright: string;
 }>();
+
+// check if the disc is the last disc
+const isLastDisc = (disc: string | number) => {
+  const discs = Object.keys(props.discs);
+  return discs[discs.length - 1] === disc;
+};
 </script>
+
+<style lang="scss">
+.album-tracks {
+  display: grid;
+  gap: 1rem;
+}
+</style>
diff --git a/src/views/album/index.vue b/src/views/album/index.vue
index d8af31eb..a02dff44 100644
--- a/src/views/album/index.vue
+++ b/src/views/album/index.vue
@@ -4,7 +4,7 @@
       <Header :album="album.info" />
     </template>
     <template #content>
-      <Content :tracks="album.tracks" />
+      <Content :discs="album.discs" :copyright="album.info.copyright" />
     </template>
     <template #bottom>
       <Bottom
diff --git a/vite.config.js b/vite.config.js
index baea30d6..911e94c0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,7 +14,7 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       scss: {
-        additionalData: `@import "@/assets/css/_variables.scss";`,
+        additionalData: `@import "@/assets/scss/_variables.scss";`,
       },
     },
   },
diff --git a/yarn.lock b/yarn.lock
index a94d50e2..91307aa3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -41,10 +41,10 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
-"@types/eslint-scope@^3.7.0":
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.3.tgz#125b88504b61e3c8bc6f870882003253005c3224"
-  integrity sha512-PB3ldyrcnAicT35TWPs5IcwKD8S333HMaa2VVv4+wdvebJkjWuW/xESoB8IwRcog8HYVYamb1g/R31Qv5Bx03g==
+"@types/eslint-scope@^3.7.3":
+  version "3.7.4"
+  resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16"
+  integrity sha512-9K4zoImiZc3HlIp6AVUDE4CWYx22a+lhSZMYNpbjW04+YF0KWj4pJXnEMjdnFTiQibFFmElcsasJXDbdI/EPhA==
   dependencies:
     "@types/eslint" "*"
     "@types/estree" "*"
@@ -57,11 +57,16 @@
     "@types/estree" "*"
     "@types/json-schema" "*"
 
-"@types/estree@*", "@types/estree@^0.0.50":
+"@types/estree@*":
   version "0.0.50"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.50.tgz#1e0caa9364d3fccd2931c3ed96fdbeaa5d4cca83"
   integrity sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==
 
+"@types/estree@^0.0.51":
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
+  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+
 "@types/json-schema@*", "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
@@ -77,20 +82,10 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
-"@vitejs/plugin-vue@^1.6.1":
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-1.10.2.tgz#d718479e2789d8a94b63e00f23f1898ba239253a"
-  integrity sha512-/QJ0Z9qfhAFtKRY+r57ziY4BSbGUTGsPRMpB/Ron3QPwBZM4OZAZHdTa4a8PafCwU5DTatXG8TMDoP8z+oDqJw==
-
-"@vue/compiler-core@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.29.tgz#b06097ab8ff0493177c68c5ea5b63d379a061097"
-  integrity sha512-RePZ/J4Ub3sb7atQw6V6Rez+/5LCRHGFlSetT3N4VMrejqJnNPXKUt5AVm/9F5MJriy2w/VudEIvgscCfCWqxw==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/shared" "3.2.29"
-    estree-walker "^2.0.2"
-    source-map "^0.6.1"
+"@vitejs/plugin-vue@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-3.0.1.tgz#b6af8f782485374bbb5fe09edf067a845bf4caae"
+  integrity sha512-Ll9JgxG7ONIz/XZv3dssfoMUDu9qAnlJ+km+pBA0teYSXzwPCIzS/e1bmwNYl5dcQGs677D21amgfYAnzMl17A==
 
 "@vue/compiler-core@3.2.37":
   version "3.2.37"
@@ -102,14 +97,6 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.29.tgz#ad0ead405bd2f2754161335aad9758aa12430715"
-  integrity sha512-y26vK5khdNS9L3ckvkqJk/78qXwWb75Ci8iYLb67AkJuIgyKhIOcR1E8RIt4mswlVCIeI9gQ+fmtdhaiTAtrBQ==
-  dependencies:
-    "@vue/compiler-core" "3.2.29"
-    "@vue/shared" "3.2.29"
-
 "@vue/compiler-dom@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.37.tgz#10d2427a789e7c707c872da9d678c82a0c6582b5"
@@ -118,23 +105,7 @@
     "@vue/compiler-core" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/compiler-sfc@3.2.29", "@vue/compiler-sfc@^3.0.0":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.29.tgz#f76d556cd5fca6a55a3ea84c88db1a2a53a36ead"
-  integrity sha512-X9+0dwsag2u6hSOP/XsMYqFti/edvYvxamgBgCcbSYuXx1xLZN+dS/GvQKM4AgGS4djqo0jQvWfIXdfZ2ET68g==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.29"
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/compiler-ssr" "3.2.29"
-    "@vue/reactivity-transform" "3.2.29"
-    "@vue/shared" "3.2.29"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
-    postcss "^8.1.10"
-    source-map "^0.6.1"
-
-"@vue/compiler-sfc@^3.2.20":
+"@vue/compiler-sfc@3.2.37", "@vue/compiler-sfc@^3.2.20":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.37.tgz#3103af3da2f40286edcd85ea495dcb35bc7f5ff4"
   integrity sha512-+7i/2+9LYlpqDv+KTtWhOZH+pa8/HnX/905MdVmAcI/mPQOBwkHHIzrsEsucyOIZQYMkXUiTkmZq5am/NyXKkg==
@@ -150,14 +121,6 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.29.tgz#37b15b32dcd2f6b410bb61fca3f37b1a92b7eb1e"
-  integrity sha512-LrvQwXlx66uWsB9/VydaaqEpae9xtmlUkeSKF6aPDbzx8M1h7ukxaPjNCAXuFd3fUHblcri8k42lfimHfzMICA==
-  dependencies:
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/shared" "3.2.29"
-
 "@vue/compiler-ssr@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.37.tgz#4899d19f3a5fafd61524a9d1aee8eb0505313cff"
@@ -166,26 +129,15 @@
     "@vue/compiler-dom" "3.2.37"
     "@vue/shared" "3.2.37"
 
-"@vue/devtools-api@^6.0.0-beta.18":
-  version "6.0.0-beta.21.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.0-beta.21.1.tgz#f1410f53c42aa67fa3b01ca7bdba891f69d7bc97"
-  integrity sha512-FqC4s3pm35qGVeXRGOjTsRzlkJjrBLriDS9YXbflHLsfA9FrcKzIyWnLXoNm+/7930E8rRakXuAc2QkC50swAw==
-
 "@vue/devtools-api@^6.0.0-beta.21":
   version "6.0.12"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.0.12.tgz#7b57cce215ae9f37a86984633b3aa3d595aa5b46"
   integrity sha512-iO/4FIezHKXhiDBdKySCvJVh8/mZPxHpiQrTy+PXVqJZgpTPTdHy4q8GXulaY+UKEagdkBb0onxNQZ0LNiqVhw==
 
-"@vue/reactivity-transform@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.29.tgz#a08d606e10016b7cf588d1a43dae4db2953f9354"
-  integrity sha512-YF6HdOuhdOw6KyRm59+3rML8USb9o8mYM1q+SH0G41K3/q/G7uhPnHGKvspzceD7h9J3VR1waOQ93CUZj7J7OA==
-  dependencies:
-    "@babel/parser" "^7.16.4"
-    "@vue/compiler-core" "3.2.29"
-    "@vue/shared" "3.2.29"
-    estree-walker "^2.0.2"
-    magic-string "^0.25.7"
+"@vue/devtools-api@^6.1.4":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
+  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
 
 "@vue/reactivity-transform@3.2.37":
   version "3.2.37"
@@ -198,49 +150,44 @@
     estree-walker "^2.0.2"
     magic-string "^0.25.7"
 
-"@vue/reactivity@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.29.tgz#afdc9c111d4139b14600be17ad80267212af6052"
-  integrity sha512-Ryhb6Gy62YolKXH1gv42pEqwx7zs3n8gacRVZICSgjQz8Qr8QeCcFygBKYfJm3o1SccR7U+bVBQDWZGOyG1k4g==
+"@vue/reactivity@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.37.tgz#5bc3847ac58828e2b78526e08219e0a1089f8848"
+  integrity sha512-/7WRafBOshOc6m3F7plwzPeCu/RCVv9uMpOwa/5PiY1Zz+WLVRWiy0MYKwmg19KBdGtFWsmZ4cD+LOdVPcs52A==
   dependencies:
-    "@vue/shared" "3.2.29"
+    "@vue/shared" "3.2.37"
 
-"@vue/runtime-core@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.29.tgz#fb8577b2fcf52e8d967bd91cdf49ab9fb91f9417"
-  integrity sha512-VMvQuLdzoTGmCwIKTKVwKmIL0qcODIqe74JtK1pVr5lnaE0l25hopodmPag3RcnIcIXe+Ye3B2olRCn7fTCgig==
+"@vue/runtime-core@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.2.37.tgz#7ba7c54bb56e5d70edfc2f05766e1ca8519966e3"
+  integrity sha512-JPcd9kFyEdXLl/i0ClS7lwgcs0QpUAWj+SKX2ZC3ANKi1U4DOtiEr6cRqFXsPwY5u1L9fAjkinIdB8Rz3FoYNQ==
   dependencies:
-    "@vue/reactivity" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/reactivity" "3.2.37"
+    "@vue/shared" "3.2.37"
 
-"@vue/runtime-dom@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.29.tgz#35e9a2bf04ef80b86ac2ca0e7b2ceaccf1e18f01"
-  integrity sha512-YJgLQLwr+SQyORzTsBQLL5TT/5UiV83tEotqjL7F9aFDIQdFBTCwpkCFvX9jqwHoyi9sJqM9XtTrMcc8z/OjPA==
+"@vue/runtime-dom@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.2.37.tgz#002bdc8228fa63949317756fb1e92cdd3f9f4bbd"
+  integrity sha512-HimKdh9BepShW6YozwRKAYjYQWg9mQn63RGEiSswMbW+ssIht1MILYlVGkAGGQbkhSh31PCdoUcfiu4apXJoPw==
   dependencies:
-    "@vue/runtime-core" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/runtime-core" "3.2.37"
+    "@vue/shared" "3.2.37"
     csstype "^2.6.8"
 
-"@vue/server-renderer@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.29.tgz#ea6afa361b9c781a868c8da18c761f9b7bc89102"
-  integrity sha512-lpiYx7ciV7rWfJ0tPkoSOlLmwqBZ9FTmQm33S+T4g0j1fO/LmhJ9b9Ctl1o5xvIFVDk9QkSUWANZn7H2pXuxVw==
+"@vue/server-renderer@3.2.37":
+  version "3.2.37"
+  resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.2.37.tgz#840a29c8dcc29bddd9b5f5ffa22b95c0e72afdfc"
+  integrity sha512-kLITEJvaYgZQ2h47hIzPh2K3jG8c1zCVbp/o/bzQOyvzaKiCquKS7AaioPI28GNxIsE/zSx+EwWYsNxDCX95MA==
   dependencies:
-    "@vue/compiler-ssr" "3.2.29"
-    "@vue/shared" "3.2.29"
-
-"@vue/shared@3.2.29":
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.29.tgz#07dac7051117236431d2f737d16932aa38bbb925"
-  integrity sha512-BjNpU8OK6Z0LVzGUppEk0CMYm/hKDnZfYdjSmPOs0N+TR1cLKJAkDwW8ASZUvaaSLEi6d3hVM7jnWnX+6yWnHw==
+    "@vue/compiler-ssr" "3.2.37"
+    "@vue/shared" "3.2.37"
 
 "@vue/shared@3.2.37":
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.37.tgz#8e6adc3f2759af52f0e85863dfb0b711ecc5c702"
   integrity sha512-4rSJemR2NQIo9Klm1vabqWjD8rs/ZaJSzMxkMNeJS6lHiUjjUeYFbooN19NgFjztubEKh3WlZUeOLVdbbUWHsw==
 
-"@vueuse/core@^8.1.2", "@vueuse/core@^8.5.0":
+"@vueuse/core@^8.5.0":
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.5.0.tgz#2b7548e52165c88e1463756c36188e105d806543"
   integrity sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==
@@ -254,20 +201,7 @@
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.5.0.tgz#1aaa3787922cfda0f38243aaa7779366a669b4db"
   integrity sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g==
 
-"@vueuse/motion@^2.0.0-beta.18":
-  version "2.0.0-beta.18"
-  resolved "https://registry.yarnpkg.com/@vueuse/motion/-/motion-2.0.0-beta.18.tgz#e98e9a4c34da2ca456a10639dca3b36409e97b5f"
-  integrity sha512-mPeXxuqZp13lqpcb+345TnEP7tEOjC/wTkwf8be1Obzt3913lPpZPXgwKafMoocKRNOnMZye8Y6PqQOEKztk9A==
-  dependencies:
-    "@vueuse/core" "^8.1.2"
-    "@vueuse/shared" "^8.1.2"
-    csstype "^3.0.11"
-    framesync "^6.1.0"
-    popmotion "^11.0.3"
-    style-value-types "^5.1.0"
-    vue-demi "*"
-
-"@vueuse/shared@8.5.0", "@vueuse/shared@^8.1.2":
+"@vueuse/shared@8.5.0":
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.5.0.tgz#fa01ecd3161933f521dd6428b9ef8015ded1bbd3"
   integrity sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==
@@ -415,11 +349,16 @@ acorn-jsx@^5.3.1:
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
-acorn@^8.4.1, acorn@^8.7.0:
+acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
+acorn@^8.7.1:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
 ajv-keywords@^3.5.2:
   version "3.5.2"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
@@ -719,11 +658,6 @@ csstype@^2.6.8:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.19.tgz#feeb5aae89020bb389e1f63669a5ed490e391caa"
   integrity sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==
 
-csstype@^3.0.11:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
-  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
-
 debug@^4.1.1, debug@^4.3.2:
   version "4.3.3"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664"
@@ -744,11 +678,6 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
-defu@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/defu/-/defu-6.0.0.tgz#b397a6709a2f3202747a3d9daf9446e41ad0c5fc"
-  integrity sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==
-
 doctrine@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
@@ -817,10 +746,10 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-enhanced-resolve@^5.8.3:
-  version "5.8.3"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.8.3.tgz#6d552d465cce0423f5b3d718511ea53826a7b2f0"
-  integrity sha512-EGAbGvH7j7Xt2nc0E7D99La1OiEs8LnyimkRgwExpUMScN6O+3x9tIWs7PLQZVNx4YD+00skHXPXi1yQHpAmZA==
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -878,113 +807,131 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-esbuild-android-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
-  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
+esbuild-android-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.51.tgz#414a087cb0de8db1e347ecca6c8320513de433db"
+  integrity sha512-6FOuKTHnC86dtrKDmdSj2CkcKF8PnqkaIXqvgydqfJmqBazCPdw+relrMlhGjkvVdiiGV70rpdnyFmA65ekBCQ==
 
-esbuild-darwin-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
-  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
+esbuild-android-arm64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.51.tgz#55de3bce2aab72bcd2b606da4318ad00fb9c8151"
+  integrity sha512-vBtp//5VVkZWmYYvHsqBRCMMi1MzKuMIn5XDScmnykMTu9+TD9v0NMEDqQxvtFToeYmojdo5UCV2vzMQWJcJ4A==
 
-esbuild-darwin-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
-  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
+esbuild-darwin-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.51.tgz#4259f23ed6b4cea2ec8a28d87b7fb9801f093754"
+  integrity sha512-YFmXPIOvuagDcwCejMRtCDjgPfnDu+bNeh5FU2Ryi68ADDVlWEpbtpAbrtf/lvFTWPexbgyKgzppNgsmLPr8PA==
 
-esbuild-freebsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
-  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
+esbuild-darwin-arm64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.51.tgz#d77b4366a71d84e530ba019d540b538b295d494a"
+  integrity sha512-juYD0QnSKwAMfzwKdIF6YbueXzS6N7y4GXPDeDkApz/1RzlT42mvX9jgNmyOlWKN7YzQAYbcUEJmZJYQGdf2ow==
 
-esbuild-freebsd-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
-  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
+esbuild-freebsd-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.51.tgz#27b6587b3639f10519c65e07219d249b01f2ad38"
+  integrity sha512-cLEI/aXjb6vo5O2Y8rvVSQ7smgLldwYY5xMxqh/dQGfWO+R1NJOFsiax3IS4Ng300SVp7Gz3czxT6d6qf2cw0g==
 
-esbuild-linux-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
-  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
+esbuild-freebsd-arm64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.51.tgz#63c435917e566808c71fafddc600aca4d78be1ec"
+  integrity sha512-TcWVw/rCL2F+jUgRkgLa3qltd5gzKjIMGhkVybkjk6PJadYInPtgtUBp1/hG+mxyigaT7ib+od1Xb84b+L+1Mg==
 
-esbuild-linux-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
-  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
+esbuild-linux-32@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.51.tgz#c3da774143a37e7f11559b9369d98f11f997a5d9"
+  integrity sha512-RFqpyC5ChyWrjx8Xj2K0EC1aN0A37H6OJfmUXIASEqJoHcntuV3j2Efr9RNmUhMfNE6yEj2VpYuDteZLGDMr0w==
 
-esbuild-linux-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
-  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
+esbuild-linux-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.51.tgz#5d92b67f674e02ae0b4a9de9a757ba482115c4ae"
+  integrity sha512-dxjhrqo5i7Rq6DXwz5v+MEHVs9VNFItJmHBe1CxROWNf4miOGoQhqSG8StStbDkQ1Mtobg6ng+4fwByOhoQoeA==
 
-esbuild-linux-arm@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
-  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
+esbuild-linux-arm64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.51.tgz#dac84740516e859d8b14e1ecc478dd5241b10c93"
+  integrity sha512-D9rFxGutoqQX3xJPxqd6o+kvYKeIbM0ifW2y0bgKk5HPgQQOo2k9/2Vpto3ybGYaFPCE5qTGtqQta9PoP6ZEzw==
 
-esbuild-linux-mips64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
-  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
+esbuild-linux-arm@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.51.tgz#b3ae7000696cd53ed95b2b458554ff543a60e106"
+  integrity sha512-LsJynDxYF6Neg7ZC7748yweCDD+N8ByCv22/7IAZglIEniEkqdF4HCaa49JNDLw1UQGlYuhOB8ZT/MmcSWzcWg==
 
-esbuild-linux-ppc64le@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
-  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
+esbuild-linux-mips64le@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.51.tgz#dad10770fac94efa092b5a0643821c955a9dd385"
+  integrity sha512-vS54wQjy4IinLSlb5EIlLoln8buh1yDgliP4CuEHumrPk4PvvP4kTRIG4SzMXm6t19N0rIfT4bNdAxzJLg2k6A==
 
-esbuild-netbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
-  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
+esbuild-linux-ppc64le@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.51.tgz#b68c2f8294d012a16a88073d67e976edd4850ae0"
+  integrity sha512-xcdd62Y3VfGoyphNP/aIV9LP+RzFw5M5Z7ja+zdpQHHvokJM7d0rlDRMN+iSSwvUymQkqZO+G/xjb4/75du8BQ==
 
-esbuild-openbsd-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
-  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
+esbuild-linux-riscv64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.51.tgz#608a318b8697123e44c1e185cdf6708e3df50b93"
+  integrity sha512-syXHGak9wkAnFz0gMmRBoy44JV0rp4kVCEA36P5MCeZcxFq8+fllBC2t6sKI23w3qd8Vwo9pTADCgjTSf3L3rA==
 
-esbuild-sunos-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
-  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
+esbuild-linux-s390x@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.51.tgz#c9e7791170a3295dba79b93aa452beb9838a8625"
+  integrity sha512-kFAJY3dv+Wq8o28K/C7xkZk/X34rgTwhknSsElIqoEo8armCOjMJ6NsMxm48KaWY2h2RUYGtQmr+RGuUPKBhyw==
 
-esbuild-windows-32@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
-  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
+esbuild-netbsd-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.51.tgz#0abd40b8c2e37fda6f5cc41a04cb2b690823d891"
+  integrity sha512-ZZBI7qrR1FevdPBVHz/1GSk1x5GDL/iy42Zy8+neEm/HA7ma+hH/bwPEjeHXKWUDvM36CZpSL/fn1/y9/Hb+1A==
 
-esbuild-windows-64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
-  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
+esbuild-openbsd-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.51.tgz#4adba0b7ea7eb1428bb00d8e94c199a949b130e8"
+  integrity sha512-7R1/p39M+LSVQVgDVlcY1KKm6kFKjERSX1lipMG51NPcspJD1tmiZSmmBXoY5jhHIu6JL1QkFDTx94gMYK6vfA==
 
-esbuild-windows-arm64@0.13.15:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
-  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
+esbuild-sunos-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.51.tgz#4b8a6d97dfedda30a6e39607393c5c90ebf63891"
+  integrity sha512-HoHaCswHxLEYN8eBTtyO0bFEWvA3Kdb++hSQ/lLG7TyKF69TeSG0RNoBRAs45x/oCeWaTDntEZlYwAfQlhEtJA==
 
-esbuild@^0.13.12:
-  version "0.13.15"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
-  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
+esbuild-windows-32@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.51.tgz#d31d8ca0c1d314fb1edea163685a423b62e9ac17"
+  integrity sha512-4rtwSAM35A07CBt1/X8RWieDj3ZUHQqUOaEo5ZBs69rt5WAFjP4aqCIobdqOy4FdhYw1yF8Z0xFBTyc9lgPtEg==
+
+esbuild-windows-64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.51.tgz#7d3c09c8652d222925625637bdc7e6c223e0085d"
+  integrity sha512-HoN/5HGRXJpWODprGCgKbdMvrC3A2gqvzewu2eECRw2sYxOUoh2TV1tS+G7bHNapPGI79woQJGV6pFH7GH7qnA==
+
+esbuild-windows-arm64@0.14.51:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.51.tgz#0220d2304bfdc11bc27e19b2aaf56edf183e4ae9"
+  integrity sha512-JQDqPjuOH7o+BsKMSddMfmVJXrnYZxXDHsoLHc0xgmAZkOOCflRmC43q31pk79F9xuyWY45jDBPolb5ZgGOf9g==
+
+esbuild@^0.14.47:
+  version "0.14.51"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.51.tgz#1c8ecbc8db3710da03776211dc3ee3448f7aa51e"
+  integrity sha512-+CvnDitD7Q5sT7F+FM65sWkF8wJRf+j9fPcprxYV4j+ohmzVj2W7caUqH2s5kCaCJAfcAICjSlKhDCcvDpU7nw==
   optionalDependencies:
-    esbuild-android-arm64 "0.13.15"
-    esbuild-darwin-64 "0.13.15"
-    esbuild-darwin-arm64 "0.13.15"
-    esbuild-freebsd-64 "0.13.15"
-    esbuild-freebsd-arm64 "0.13.15"
-    esbuild-linux-32 "0.13.15"
-    esbuild-linux-64 "0.13.15"
-    esbuild-linux-arm "0.13.15"
-    esbuild-linux-arm64 "0.13.15"
-    esbuild-linux-mips64le "0.13.15"
-    esbuild-linux-ppc64le "0.13.15"
-    esbuild-netbsd-64 "0.13.15"
-    esbuild-openbsd-64 "0.13.15"
-    esbuild-sunos-64 "0.13.15"
-    esbuild-windows-32 "0.13.15"
-    esbuild-windows-64 "0.13.15"
-    esbuild-windows-arm64 "0.13.15"
+    esbuild-android-64 "0.14.51"
+    esbuild-android-arm64 "0.14.51"
+    esbuild-darwin-64 "0.14.51"
+    esbuild-darwin-arm64 "0.14.51"
+    esbuild-freebsd-64 "0.14.51"
+    esbuild-freebsd-arm64 "0.14.51"
+    esbuild-linux-32 "0.14.51"
+    esbuild-linux-64 "0.14.51"
+    esbuild-linux-arm "0.14.51"
+    esbuild-linux-arm64 "0.14.51"
+    esbuild-linux-mips64le "0.14.51"
+    esbuild-linux-ppc64le "0.14.51"
+    esbuild-linux-riscv64 "0.14.51"
+    esbuild-linux-s390x "0.14.51"
+    esbuild-netbsd-64 "0.14.51"
+    esbuild-openbsd-64 "0.14.51"
+    esbuild-sunos-64 "0.14.51"
+    esbuild-windows-32 "0.14.51"
+    esbuild-windows-64 "0.14.51"
+    esbuild-windows-arm64 "0.14.51"
 
 escalade@^3.1.1:
   version "3.1.1"
@@ -1185,20 +1132,6 @@ follow-redirects@^1.14.8:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.9.tgz#dd4ea157de7bfaf9ea9b3fbd85aa16951f78d8d7"
   integrity sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==
 
-framesync@6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
-  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
-  dependencies:
-    tslib "^2.1.0"
-
-framesync@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.0.tgz#b22cf9afba52a9a895668b09e033b6a61e901c41"
-  integrity sha512-aBX+hdWAvwiJYeQlFLY2533VxeL6OEu71CAgV4GGKksrj6+dE6i7K86WSSiRBEARCoJn5bFqffhg4l07eA27tg==
-  dependencies:
-    tslib "^2.3.1"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -1335,11 +1268,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hey-listen@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
-  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -1417,10 +1345,10 @@ is-callable@^1.1.4, is-callable@^1.2.4:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
   integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-core-module@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
-  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+is-core-module@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
   dependencies:
     has "^1.0.3"
 
@@ -1525,10 +1453,10 @@ js-yaml@^4.1.0:
   dependencies:
     argparse "^2.0.1"
 
-json-parse-better-errors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
-  integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
+json-parse-even-better-errors@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
@@ -1653,11 +1581,6 @@ minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
-mitt@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mitt/-/mitt-3.0.0.tgz#69ef9bd5c80ff6f57473e8d89326d01c414be0bd"
-  integrity sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==
-
 mkdirp@~0.5.1:
   version "0.5.6"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.6.tgz#7def03d2432dcae4ba1d611445c48396062255f6"
@@ -1675,6 +1598,11 @@ nanoid@^3.2.0:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -1807,17 +1735,7 @@ pinia@^2.0.11:
     "@vue/devtools-api" "^6.0.0-beta.21"
     vue-demi "*"
 
-popmotion@^11.0.3:
-  version "11.0.3"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
-  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
-  dependencies:
-    framesync "6.0.1"
-    hey-listen "^1.0.8"
-    style-value-types "5.0.0"
-    tslib "^2.1.0"
-
-postcss@^8.1.10, postcss@^8.4.5:
+postcss@^8.1.10:
   version "8.4.6"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.6.tgz#c5ff3c3c457a23864f32cb45ac9b741498a09ae1"
   integrity sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==
@@ -1826,6 +1744,15 @@ postcss@^8.1.10, postcss@^8.4.5:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.14:
+  version "8.4.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf"
+  integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -1869,22 +1796,17 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-register-service-worker@^1.7.1:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/register-service-worker/-/register-service-worker-1.7.2.tgz#6516983e1ef790a98c4225af1216bc80941a4bd2"
-  integrity sha512-CiD3ZSanZqcMPRhtfct5K9f7i3OLCcBBWsJjLh1gW9RO/nS94sVzY59iS+fgYBOBqaBpf4EzfqUF3j9IG+xo8A==
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.20.0:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
-  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+resolve@^1.22.1:
+  version "1.22.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.1.tgz#27cb2ebb53f91abb49470a928bba7558066ac177"
+  integrity sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==
   dependencies:
-    is-core-module "^2.8.1"
+    is-core-module "^2.9.0"
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
@@ -1895,10 +1817,10 @@ rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-rollup@^2.59.0:
-  version "2.67.0"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.67.0.tgz#496de7e641dbe39f681c5a82419cb5013917d406"
-  integrity sha512-W83AaERwvDiHwHEF/dfAfS3z1Be5wf7n+pO3ZAO5IQadCT2lBTr7WQ2MwZZe+nodbD+n3HtC4OCOAdsOPPcKZQ==
+rollup@^2.75.6:
+  version "2.77.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.77.2.tgz#6b6075c55f9cc2040a5912e6e062151e42e2c4e3"
+  integrity sha512-m/4YzYgLcpMQbxX3NmAqDvwLATZzxt8bIegO78FZLl+lAgKJBd1DRAOeEiZcKOIOPjxE6ewHWHNgGEalFXuz1g==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2044,22 +1966,6 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
-style-value-types@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
-  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
-  dependencies:
-    hey-listen "^1.0.8"
-    tslib "^2.1.0"
-
-style-value-types@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.1.0.tgz#228b02bd9418c57db46c1f450b85577e634a877f"
-  integrity sha512-DRIfBtjxQ4ztBZpexkFcI+UR7pODC5qLMf2Syt+bH98PAHHRH2tQnzxBuDQlqcAoYar6GzWnj8iAfqfwnEzCiQ==
-  dependencies:
-    hey-listen "^1.0.8"
-    tslib "^2.3.1"
-
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -2162,11 +2068,6 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
-tslib@^2.1.0, tslib@^2.3.1:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
-  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
-
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
@@ -2224,15 +2125,15 @@ vite-svg-loader@^3.4.0:
     "@vue/compiler-sfc" "^3.2.20"
     svgo "^2.7.0"
 
-vite@^2.5.4:
-  version "2.7.13"
-  resolved "https://registry.yarnpkg.com/vite/-/vite-2.7.13.tgz#99b56e27dfb1e4399e407cf94648f5c7fb9d77f5"
-  integrity sha512-Mq8et7f3aK0SgSxjDNfOAimZGW9XryfHRa/uV0jseQSilg+KhYDSoNb9h1rknOy6SuMkvNDLKCYAYYUMCE+IgQ==
+vite@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/vite/-/vite-3.0.4.tgz#c61688d6b97573e96cf5ac25f2d68597b5ce68e8"
+  integrity sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==
   dependencies:
-    esbuild "^0.13.12"
-    postcss "^8.4.5"
-    resolve "^1.20.0"
-    rollup "^2.59.0"
+    esbuild "^0.14.47"
+    postcss "^8.4.14"
+    resolve "^1.22.1"
+    rollup "^2.75.6"
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -2259,12 +2160,12 @@ vue-eslint-parser@^8.0.1:
     lodash "^4.17.21"
     semver "^7.3.5"
 
-vue-router@^4.0.0-0:
-  version "4.0.12"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.12.tgz#8dc792cddf5bb1abcc3908f9064136de7e13c460"
-  integrity sha512-CPXvfqe+mZLB1kBWssssTiWg4EQERyqJZes7USiqfW9B5N2x+nHlnsM1D3b5CaJ6qgCvMmYJnz+G0iWjNCvXrg==
+vue-router@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.1.3.tgz#f8dc7931a2253cc5aa9b740f8b98969d08ca283c"
+  integrity sha512-XvK81bcYglKiayT7/vYAg/f36ExPC4t90R/HIpzrZ5x+17BOWptXLCrEPufGgZeuq68ww4ekSIMBZY1qdUdfjA==
   dependencies:
-    "@vue/devtools-api" "^6.0.0-beta.18"
+    "@vue/devtools-api" "^6.1.4"
 
 vue-svg-loader@^0.16.0:
   version "0.16.0"
@@ -2274,21 +2175,21 @@ vue-svg-loader@^0.16.0:
     loader-utils "^1.2.3"
     svg-to-vue "^0.7.0"
 
-vue@^3.0.0:
-  version "3.2.29"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.29.tgz#3571b65dbd796d3a6347e2fd45a8e6e11c13d56a"
-  integrity sha512-cFIwr7LkbtCRanjNvh6r7wp2yUxfxeM2yPpDQpAfaaLIGZSrUmLbNiSze9nhBJt5MrZ68Iqt0O5scwAMEVxF+Q==
+vue@^3.2.37:
+  version "3.2.37"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"
+  integrity sha512-bOKEZxrm8Eh+fveCqS1/NkG/n6aMidsI6hahas7pa0w/l7jkbssJVsRhVDs07IdDq7h9KHswZOgItnwJAgtVtQ==
   dependencies:
-    "@vue/compiler-dom" "3.2.29"
-    "@vue/compiler-sfc" "3.2.29"
-    "@vue/runtime-dom" "3.2.29"
-    "@vue/server-renderer" "3.2.29"
-    "@vue/shared" "3.2.29"
+    "@vue/compiler-dom" "3.2.37"
+    "@vue/compiler-sfc" "3.2.37"
+    "@vue/runtime-dom" "3.2.37"
+    "@vue/server-renderer" "3.2.37"
+    "@vue/shared" "3.2.37"
 
-watchpack@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25"
-  integrity sha512-x0t0JuydIo8qCNctdDrn1OzH/qDzk2+rdCOC3YzumZ42fiMqmQ7T3xQurykYMhYfHaPHTp4ZxAx2NfUo1K6QaA==
+watchpack@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
+  integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
   dependencies:
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.1.2"
@@ -2298,34 +2199,34 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@^5.64.4:
-  version "5.68.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.68.0.tgz#a653a58ed44280062e47257f260117e4be90d560"
-  integrity sha512-zUcqaUO0772UuuW2bzaES2Zjlm/y3kRBQDVFVCge+s2Y8mwuUTdperGaAv65/NtRL/1zanpSJOq/MD8u61vo6g==
+webpack@^5.74.0:
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
   dependencies:
-    "@types/eslint-scope" "^3.7.0"
-    "@types/estree" "^0.0.50"
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
     "@webassemblyjs/ast" "1.11.1"
     "@webassemblyjs/wasm-edit" "1.11.1"
     "@webassemblyjs/wasm-parser" "1.11.1"
-    acorn "^8.4.1"
+    acorn "^8.7.1"
     acorn-import-assertions "^1.7.6"
     browserslist "^4.14.5"
     chrome-trace-event "^1.0.2"
-    enhanced-resolve "^5.8.3"
+    enhanced-resolve "^5.10.0"
     es-module-lexer "^0.9.0"
     eslint-scope "5.1.1"
     events "^3.2.0"
     glob-to-regexp "^0.4.1"
     graceful-fs "^4.2.9"
-    json-parse-better-errors "^1.0.2"
+    json-parse-even-better-errors "^2.3.1"
     loader-runner "^4.2.0"
     mime-types "^2.1.27"
     neo-async "^2.6.2"
     schema-utils "^3.1.0"
     tapable "^2.1.1"
     terser-webpack-plugin "^5.1.3"
-    watchpack "^2.3.1"
+    watchpack "^2.4.0"
     webpack-sources "^3.2.3"
 
 which-boxed-primitive@^1.0.2: