fix: enable typing to search on mobile view

add silence skip to quick settings
add quick actions section in settings
2025-12-24 19:30:20 +00:00 · 2024-01-09 14:29:48 +03:00 · 2024-01-08 17:23:46 +03:00 · 2024-01-07 17:20:50 +03:00 · 2024-01-05 01:01:41 +03:00 · 2024-01-04 20:07:45 +03:00
335 changed files with 16018 additions and 6233 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,9 +3,25 @@ module.exports = {
  env: {
    es2021: true,
  },
-  extends: ["plugin:vue/vue3-essential", "eslint:recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-essential",
+    "plugin:vue/vue3-recommended",
+    "plugin:vue/vue3-strongly-recommended",
+    "prettier",
+  ],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/multi-word-component-names": "off",
+    "vue/v-on-event-hyphenation": "off",
+    "vue/no-v-html": "off",
+    "no-unused-vars": "off",
+    "vue/prop-name-casing": "off",
+  },
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
  },
 };
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,8 @@ pnpm-debug.log*
 *.sln
 *.sw?

-__pycache__
+# TODO
+TODO.md
+
+__pycache__
+dev-dist/*
--- a/README.md
+++ b/README.md
@@ -26,6 +26,14 @@ yarn dev
 yarn build
 ```

+---
+### Generating PWA favicons
+
+```sh
+yarn generate-pwa-assets
+```
+---
+

 ### Contributing

--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>Swing Music</title>
+    <base href="./">
  </head>
  <body>
    <noscript>
--- a/package.json
+++ b/package.json
@@ -5,7 +5,8 @@
  "scripts": {
    "dev": "vite",
    "serve": "vite preview",
-    "build": "vite build --emptyOutDir --outDir dist",
+    "build": "vite build",
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal public/logo-fill.light.svg",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
  },
  "dependencies": {
@@ -14,28 +15,37 @@
    "@vueuse/components": "^9.2.0",
    "@vueuse/core": "^8.5.0",
    "@vueuse/integrations": "^9.2.0",
+    "@vueuse/motion": "^2.0.0",
    "axios": "^0.26.1",
    "fuse.js": "^6.6.2",
    "motion": "^10.15.5",
+    "node-vibrant": "3.1.6",
    "pinia": "^2.0.17",
-    "pinia-plugin-persistedstate": "^2.1.1",
-    "sass": "^1.56.1",
-    "sass-loader": "^13.2.0",
+    "pinia-plugin-persistedstate": "^3.2.0",
    "v-wave": "^1.5.0",
    "vue": "^v3.2.45",
    "vue-debounce": "^3.0.2",
    "vue-router": "^4.1.3",
    "vue-template-compiler": "^2.0.0",
    "vue-virtual-scroller": "^2.0.0-beta.7",
-    "webpack": "^5.74.0"
+    "vue-wrap-balancer": "^1.0.0"
  },
  "devDependencies": {
    "@nextcss/color-tools": "^1.0.7",
+    "@typescript-eslint/parser": "^6.3.0",
+    "@vite-pwa/assets-generator": "^0.0.3",
    "@vitejs/plugin-vue": "^3.2.0",
-    "eslint": "^8.7.0",
-    "eslint-plugin-vue": "^8.3.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
+    "typescript": "^5.0.4",
    "vite": "^3.0.4",
-    "vite-svg-loader": "^3.4.0",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-pwa": "^0.16.4",
+    "vite-plugin-singlefile": "^0.13.5",
+    "vite-svg-loader": "^4.0.0",
    "vue-virtual-draglist": "^3.0.4"
  },
  "packageManager": "yarn@1.22.19"
--- a/public/apple-touch-icon-180x180.png
+++ b/public/apple-touch-icon-180x180.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/logo-fill.light.svg
+++ b/public/logo-fill.light.svg
@@ -0,0 +1,23 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_3)">
+<path d="M14 27.6441C21.5354 27.6441 27.6441 21.5354 27.6441 14C27.6441 6.46458 21.5354 0.355927 14 0.355927C6.46461 0.355927 0.355957 6.46458 0.355957 14C0.355957 21.5354 6.46461 27.6441 14 27.6441Z" fill="white"/>
+<g filter="url(#filter0_d_14_3)">
+<path d="M14.1221 14.9372C15.6529 14.9372 17.1518 14.8463 18.3804 14.6644C19.3548 14.517 19.66 13.7979 19.329 12.7716L17.499 7.00511C17.1672 5.94913 16.3182 5.45764 15.1465 5.45764H13.0908C11.9191 5.45764 11.07 5.94913 10.7383 7.00511L8.90825 12.7716C8.57724 13.7979 8.88246 14.517 9.85688 14.6644C11.0855 14.8463 12.5856 14.9372 14.1221 14.9372ZM13.4838 14.451V22.1166H14.756V14.451H13.4838ZM10.9926 22.6014H17.2447C17.5434 22.6014 17.7469 22.3873 17.7469 22.0759C17.7469 21.4994 17.277 21.099 16.5694 21.099H11.6679C10.9603 21.099 10.4973 21.4994 10.4973 22.0759C10.4973 22.3873 10.6939 22.6014 10.9926 22.6014Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_14_3" x="4.77966" y="5.45764" width="18.678" height="25.1438" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14_3" result="shape"/>
+</filter>
+<clipPath id="clip0_14_3">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/logo-fill.svg
+++ b/public/logo-fill.svg
@@ -1,4 +0,0 @@
-<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="59" cy="59" r="57.5" fill="white" stroke="#CBCBCB" stroke-width="3"/>
-<path d="M59.5145 62.9498C65.9658 62.9498 72.2826 62.5664 77.4604 61.8C81.5668 61.179 82.853 58.1484 81.4581 53.8231L73.7457 29.5215C72.3476 25.0713 68.7697 23 63.8316 23H55.1684C50.2303 23 46.6523 25.0713 45.2544 29.5215L37.5419 53.8231C36.1469 58.1484 37.4332 61.179 41.5397 61.8C46.7174 62.5664 53.0395 62.9498 59.5145 62.9498ZM56.8245 60.9007V93.2057H62.1859V60.9007H56.8245ZM46.3261 95.2486H72.6739C73.9328 95.2486 74.7905 94.3463 74.7905 93.0343C74.7905 90.6048 72.8101 88.9172 69.8281 88.9172H49.172C46.19 88.9172 44.2385 90.6048 44.2385 93.0343C44.2385 94.3463 45.0671 95.2486 46.3261 95.2486Z" fill="#FF2171"/>
-</svg>
--- a/public/logo.svg
+++ b/public/logo.svg
@@ -1,4 +1,20 @@
-<svg width="118" height="118" viewBox="0 0 118 118" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="59" cy="59" r="57.5" stroke="#FF2171" stroke-width="3"/>
-<path d="M59.5118 62.9828C65.9124 62.9828 72.2055 62.6018 77.3811 61.8344C81.5487 61.2062 82.8644 58.1137 81.4561 53.7443L73.7855 29.5747C72.3743 25.1017 68.7741 23 63.8107 23H55.1892C50.2259 23 46.6257 25.1017 45.2145 29.5747L37.5439 53.7443C36.1356 58.1137 37.4513 61.2062 41.6189 61.8344C46.7945 62.6018 53.0875 62.9828 59.5118 62.9828ZM59.5118 58.0762C54.1754 58.0762 49.0021 57.7818 43.5558 57.1664C42.1608 57.0191 41.9873 56.1769 42.4268 54.7242L49.6984 31.4809C50.4479 29.0507 52.4363 27.8778 55.1892 27.8778H63.8107C66.5636 27.8778 68.552 29.0507 69.3253 31.4809L76.5732 54.7242C77.0127 56.1769 76.8392 57.0191 75.4443 57.1664C69.9977 57.7818 64.8246 58.0762 59.5118 58.0762ZM56.8364 60.82V92.9501H62.1687V60.82H56.8364ZM46.3949 94.9817H72.605C73.8519 94.9817 74.705 94.0842 74.705 92.7793C74.705 90.363 72.7351 88.6848 69.7747 88.6848H49.2253C46.2648 88.6848 44.3238 90.363 44.3238 92.7793C44.3238 94.0842 45.148 94.9817 46.3949 94.9817Z" fill="#FF2171"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="28" height="28"><svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 27.6441C21.5354 27.6441 27.6441 21.5354 27.6441 14C27.6441 6.46458 21.5354 0.355927 14 0.355927C6.46461 0.355927 0.355957 6.46458 0.355957 14C0.355957 21.5354 6.46461 27.6441 14 27.6441Z" fill="black"></path>
+<g filter="url(#filter0_d_16_11)">
+<path d="M14.1221 14.9372C15.6529 14.9372 17.1518 14.8463 18.3804 14.6644C19.3548 14.517 19.66 13.7979 19.329 12.7716L17.499 7.00511C17.1672 5.94913 16.3182 5.45764 15.1465 5.45764H13.0908C11.9191 5.45764 11.07 5.94913 10.7383 7.00511L8.90825 12.7716C8.57724 13.7979 8.88246 14.517 9.85688 14.6644C11.0855 14.8463 12.5856 14.9372 14.1221 14.9372ZM13.4838 14.451V22.1166H14.756V14.451H13.4838ZM10.9926 22.6014H17.2447C17.5434 22.6014 17.7469 22.3873 17.7469 22.0759C17.7469 21.4994 17.277 21.099 16.5694 21.099H11.6679C10.9603 21.099 10.4973 21.4994 10.4973 22.0759C10.4973 22.3873 10.6939 22.6014 10.9926 22.6014Z" fill="white"></path>
+</g>
+<defs>
+<filter id="SvgjsFilter1000" x="4.77966" y="2.45764" width="18.678" height="25.1438" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
+<feOffset dy="1"></feOffset>
+<feGaussianBlur stdDeviation="2"></feGaussianBlur>
+<feComposite in2="hardAlpha" operator="out"></feComposite>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"></feColorMatrix>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_11"></feBlend>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_11" result="shape"></feBlend>
+</filter>
+</defs>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
--- a/public/maskable-icon-512x512.png
+++ b/public/maskable-icon-512x512.png
--- a/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/public/pwa-64x64.png
+++ b/public/pwa-64x64.png
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
--- a/public/workers/logtrack.js
+++ b/public/workers/logtrack.js
@@ -0,0 +1,15 @@
+onmessage = (e) => {
+  const { trackhash, duration, source, timestamp } = e.data;
+
+  const is_dev = location.port === "5173";
+  const base_url = is_dev ? "http://localhost:1980" : location.origin;
+  const url = base_url + "/logger/track/log";
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ trackhash, duration, source, timestamp }),
+  });
+};
--- a/public/workers/silence.js
+++ b/public/workers/silence.js
@@ -0,0 +1,18 @@
+onmessage = async (e) => {
+  const { ending_file, starting_file } = e.data;
+
+  const is_dev = location.port === "5173";
+  const base_url = is_dev ? "http://localhost:1980" : location.origin;
+  const url = base_url + "/file/silence";
+
+  const res = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ end: ending_file, start: starting_file }),
+  });
+
+  const data = await res.json();
+  postMessage(data);
+};
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,12 +10,14 @@
      NoSideBorders: !xxl,
      extendWidth: settings.extend_width && settings.can_extend_width,
    }"
-    :style="{ maxWidth: `${content_height > 1080 ? '2220px' : '1720px'}` }"
+    :style="{ maxWidth: `${content_height > 1080 ? '2220px' : '1760px'}` }"
  >
-    <LeftSidebar />
+    <LeftSidebar v-if="!isMobile" />
    <NavBar />
-    <div id="acontent" v-element-size="updateContentElemSize">
-      <router-view />
+    <div id="acontent" ref="appcontent" v-element-size="updateContentElemSize">
+      <BalancerProvider>
+        <RouterView />
+      </BalancerProvider>
    </div>
    <RightSideBar v-if="settings.use_sidebar && xl" />
    <BottomBar />
@@ -27,17 +29,25 @@
 // @libraries
 import { vElementSize } from "@vueuse/components";
 import { onStartTyping } from "@vueuse/core";
-import { onMounted } from "vue";
+import { onMounted, Ref, ref } from "vue";
 import { useRouter } from "vue-router";
+import { BalancerProvider } from "vue-wrap-balancer";

 // @stores
-import { content_width, content_height } from "@/stores/content-width";
-import useModalStore from "@/stores/modal";
-import useQStore from "@/stores/queue";
-import useSettingsStore from "@/stores/settings";
+import {
+  content_height,
+  content_width,
+  isMobile,
+  updateCardWidth,
+} from "@/stores/content-width";
+import useLyrics from "@/stores/lyrics";
+import useModal from "@/stores/modal";
+import useQueue from "@/stores/queue";
+import useSettings from "@/stores/settings";
+import useTracker from "@/stores/tracker";

 // @utils
-import handleShortcuts from "@/composables/useKeyboard";
+import handleShortcuts from "@/helpers/useKeyboard";
 import { readLocalStorage, writeLocalStorage } from "@/utils";
 import { xl, xxl } from "./composables/useBreakpoints";

@@ -48,31 +58,42 @@ import Notification from "@/components/Notification.vue";

 // @app-grid-components
 import BottomBar from "@/components/BottomBar/BottomBar.vue";
+import LeftSidebar from "@/components/LeftSidebar/index.vue";
 import NavBar from "@/components/nav/NavBar.vue";
 import RightSideBar from "@/components/RightSideBar/Main.vue";
-import LeftSidebar from "./components/LeftSidebar/index.vue";
-import { baseApiUrl } from "./config";
-import { getRootDirs } from "./composables/fetch/settings/rootdirs";
+import { getAllSettings } from "@/requests/settings";
+
+import { getRootDirs } from "@/requests/settings/rootdirs";
 // import BubbleManager from "./components/bubbles/BinManager.vue";

-const queue = useQStore();
+const appcontent: Ref<HTMLLegendElement | null> = ref(null);
+const queue = useQueue();
+const modal = useModal();
+const lyrics = useLyrics();
 const router = useRouter();
-const modal = useModalStore();
-const settings = useSettingsStore();
+const settings = useSettings();
+useTracker();

-queue.readQueue();
-handleShortcuts(useQStore, useModalStore);
+handleShortcuts(useQueue, useModal);

 router.afterEach(() => {
  (document.getElementById("acontent") as HTMLElement).scrollTo(0, 0);
 });

-onStartTyping((e) => {
+onStartTyping(() => {
  const elem = document.getElementById("globalsearch") as HTMLInputElement;
  elem.focus();
  elem.value = "";
 });

+function getContentSize() {
+  const elem = document.getElementById("acontent") as HTMLElement;
+  return {
+    width: elem.offsetWidth,
+    height: elem.offsetHeight,
+  };
+}
+
 function updateContentElemSize({
  width,
  height,
@@ -80,8 +101,11 @@ function updateContentElemSize({
  width: number;
  height: number;
 }) {
-  content_width.value = width;
+  // 1372 is the maxwidth of the #acontent. see app-grid.scss > $maxwidth
+  const elem_width = Math.min(1372, appcontent.value?.offsetWidth || 0);
+  content_width.value = elem_width;
  content_height.value = height;
+  updateCardWidth();
 }

 function handleWelcomeModal() {
@@ -108,35 +132,34 @@ function handleRootDirsPrompt() {
 }

 onMounted(() => {
-  handleWelcomeModal();
+  const { width, height } = getContentSize();
+  updateContentElemSize({ width, height });

-  if (baseApiUrl.value === null) {
-    modal.showSetIPModal();
-    return;
-  }
+  handleWelcomeModal();
+  settings.initializeVolume();

  handleRootDirsPrompt();
+
+  getAllSettings()
+    .then(({ settings: data }) => {
+      settings.mapDbSettings(data);
+    })
+    .then(() => {
+      if (settings.use_lyrics_plugin) return;
+    });
+
+  if (queue.currenttrack) {
+    lyrics.checkExists(
+      queue.currenttrack.filepath,
+      queue.currenttrack.trackhash
+    );
+  }
 });
 </script>

 <style lang="scss">
@import "./assets/scss/mixins.scss";

-.l-sidebar {
-  position: relative;
-
-  .withlogo {
-    padding: 1rem;
-  }
-
-  .l-album-art {
-    width: calc(100% - 2rem);
-    position: absolute;
-    bottom: 0;
-    margin-bottom: 1rem;
-  }
-}
-
 .r-sidebar {
  &::-webkit-scrollbar {
    display: none;
--- a/src/assets/googlesans.ttf
+++ b/src/assets/googlesans.ttf
--- a/src/assets/icons/delete.svg
+++ b/src/assets/icons/delete.svg
@@ -1,3 +1,4 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.96582 22.7686H18.043C19.3965 22.7686 20.2666 21.9512 20.3369 20.5977L20.9258 7.94141H21.8926C22.3408 7.94141 22.6836 7.58984 22.6836 7.15039C22.6836 6.71094 22.332 6.37695 21.8926 6.37695H17.9902V5.05859C17.9902 3.70508 17.1289 2.91406 15.6611 2.91406H12.3213C10.8535 2.91406 9.99219 3.70508 9.99219 5.05859V6.37695H6.10742C5.66797 6.37695 5.31641 6.71973 5.31641 7.15039C5.31641 7.59863 5.66797 7.94141 6.10742 7.94141H7.07422L7.66309 20.5977C7.7334 21.96 8.59473 22.7686 9.96582 22.7686ZM11.6357 5.1377C11.6357 4.68945 11.9521 4.39941 12.4355 4.39941H15.5469C16.0303 4.39941 16.3467 4.68945 16.3467 5.1377V6.37695H11.6357V5.1377ZM10.1416 21.1953C9.6582 21.1953 9.30664 20.835 9.28027 20.3164L8.69141 7.94141H19.2822L18.7109 20.3164C18.6934 20.8438 18.3506 21.1953 17.8496 21.1953H10.1416ZM11.4072 19.7803C11.7852 19.7803 12.0225 19.543 12.0137 19.1914L11.75 9.99805C11.7412 9.64648 11.4951 9.41797 11.1348 9.41797C10.7656 9.41797 10.5283 9.65527 10.5371 10.0068L10.8008 19.2002C10.8096 19.5518 11.0557 19.7803 11.4072 19.7803ZM14 19.7803C14.3691 19.7803 14.624 19.5518 14.624 19.2002V10.0068C14.624 9.65527 14.3691 9.41797 14 9.41797C13.6309 9.41797 13.3848 9.65527 13.3848 10.0068V19.2002C13.3848 19.5518 13.6309 19.7803 14 19.7803ZM16.5928 19.7891C16.9443 19.7891 17.1904 19.5518 17.1992 19.2002L17.4629 10.0068C17.4717 9.65527 17.2344 9.42676 16.8652 9.42676C16.5049 9.42676 16.2588 9.65527 16.25 10.0068L15.9863 19.2002C15.9775 19.543 16.2148 19.7891 16.5928 19.7891Z"/>
-</svg>
+    <path
+        d="M9.96582 22.7686H18.043C19.3965 22.7686 20.2666 21.9512 20.3369 20.5977L20.9258 7.94141H21.8926C22.3408 7.94141 22.6836 7.58984 22.6836 7.15039C22.6836 6.71094 22.332 6.37695 21.8926 6.37695H17.9902V5.05859C17.9902 3.70508 17.1289 2.91406 15.6611 2.91406H12.3213C10.8535 2.91406 9.99219 3.70508 9.99219 5.05859V6.37695H6.10742C5.66797 6.37695 5.31641 6.71973 5.31641 7.15039C5.31641 7.59863 5.66797 7.94141 6.10742 7.94141H7.07422L7.66309 20.5977C7.7334 21.96 8.59473 22.7686 9.96582 22.7686ZM11.6357 5.1377C11.6357 4.68945 11.9521 4.39941 12.4355 4.39941H15.5469C16.0303 4.39941 16.3467 4.68945 16.3467 5.1377V6.37695H11.6357V5.1377ZM10.1416 21.1953C9.6582 21.1953 9.30664 20.835 9.28027 20.3164L8.69141 7.94141H19.2822L18.7109 20.3164C18.6934 20.8438 18.3506 21.1953 17.8496 21.1953H10.1416ZM11.4072 19.7803C11.7852 19.7803 12.0225 19.543 12.0137 19.1914L11.75 9.99805C11.7412 9.64648 11.4951 9.41797 11.1348 9.41797C10.7656 9.41797 10.5283 9.65527 10.5371 10.0068L10.8008 19.2002C10.8096 19.5518 11.0557 19.7803 11.4072 19.7803ZM14 19.7803C14.3691 19.7803 14.624 19.5518 14.624 19.2002V10.0068C14.624 9.65527 14.3691 9.41797 14 9.41797C13.6309 9.41797 13.3848 9.65527 13.3848 10.0068V19.2002C13.3848 19.5518 13.6309 19.7803 14 19.7803ZM16.5928 19.7891C16.9443 19.7891 17.1904 19.5518 17.1992 19.2002L17.4629 10.0068C17.4717 9.65527 17.2344 9.42676 16.8652 9.42676C16.5049 9.42676 16.2588 9.65527 16.25 10.0068L15.9863 19.2002C15.9775 19.543 16.2148 19.7891 16.5928 19.7891Z" />
+</svg>
--- a/src/assets/icons/heart.fill.svg
+++ b/src/assets/icons/heart.fill.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="rgb(250, 33, 33)" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.9912 22.1445C14.2197 22.1445 14.5449 21.9775 14.8086 21.8105C19.7217 18.6465 22.8682 14.9375 22.8682 11.1758C22.8682 7.9502 20.6445 5.7002 17.8408 5.7002C16.0918 5.7002 14.7822 6.66699 13.9912 8.11719C13.2178 6.67578 11.8994 5.7002 10.1504 5.7002C7.34668 5.7002 5.11426 7.9502 5.11426 11.1758C5.11426 14.9375 8.26074 18.6465 13.1738 21.8105C13.4463 21.9775 13.7715 22.1445 13.9912 22.1445Z"/>
 </svg>
--- a/src/assets/icons/heart.svg
+++ b/src/assets/icons/heart.svg
@@ -1,3 +1,3 @@
-<svg width="28" fill="rgb(250, 33, 33)" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
+<svg width="28" fill="currentColor" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg">
 <path d="M5.09668 11.1846C5.09668 14.9375 8.25195 18.6465 13.1562 21.8105C13.4287 21.9863 13.7627 22.1621 13.9912 22.1621C14.2197 22.1621 14.5537 21.9863 14.8262 21.8105C19.7393 18.6465 22.8857 14.9375 22.8857 11.1846C22.8857 7.94141 20.6445 5.69141 17.7705 5.69141C16.0918 5.69141 14.7822 6.45605 13.9912 7.61621C13.2178 6.46484 11.8994 5.69141 10.2207 5.69141C7.33789 5.69141 5.09668 7.94141 5.09668 11.1846ZM6.90723 11.1758C6.90723 8.96094 8.36621 7.45801 10.3262 7.45801C11.9082 7.45801 12.7959 8.41602 13.3496 9.25098C13.5957 9.61133 13.7627 9.72559 13.9912 9.72559C14.2285 9.72559 14.3779 9.60254 14.6328 9.25098C15.2305 8.43359 16.083 7.45801 17.6562 7.45801C19.625 7.45801 21.084 8.96094 21.084 11.1758C21.084 14.2695 17.8672 17.6973 14.1582 20.1582C14.0791 20.2109 14.0264 20.2461 13.9912 20.2461C13.9561 20.2461 13.9033 20.2109 13.833 20.1582C10.124 17.6973 6.90723 14.2695 6.90723 11.1758Z" />
 </svg>
--- a/src/assets/icons/image.svg
+++ b/src/assets/icons/image.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.5355 20.4111L19.5935 13.8974C19.0683 13.4286 18.4589 13.1771 17.8324 13.1771C17.19 13.1771 16.6137 13.3977 16.0788 13.876L10.7862 18.6062L8.62453 16.6555C8.13234 16.2123 7.59117 15.9896 7.04249 15.9896C6.50039 15.9896 6.02507 16.2006 5.53288 16.6438L1.11023 20.6075C1.16788 22.7666 2.17217 23.8932 4.11232 23.8932H23.1117C25.4627 23.8932 26.6346 22.6801 26.5355 20.4111ZM9.0785 14.1538C10.6134 14.1538 11.8788 12.8883 11.8788 11.3396C11.8788 9.80465 10.6134 8.52754 9.0785 8.52754C7.52975 8.52754 6.26436 9.80465 6.26436 11.3396C6.26436 12.8883 7.52975 14.1538 9.0785 14.1538ZM3.84421 24.8781H23.9109C26.4499 24.8781 27.7552 23.5824 27.7552 21.0819V6.81004C27.7552 4.30739 26.4499 3.00427 23.9109 3.00427H3.84421C1.31484 3.00427 0 4.30739 0 6.81004V21.0819C0 23.5824 1.31484 24.8781 3.84421 24.8781ZM3.97733 22.5821C2.88772 22.5821 2.29592 22.018 2.29592 20.8794V7.01043C2.29592 5.87183 2.88772 5.30019 3.97733 5.30019H23.7778C24.8578 5.30019 25.4592 5.87183 25.4592 7.01043V20.8794C25.4592 22.018 24.8578 22.5821 23.7778 22.5821H3.97733Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/logos/logo-dark.svg
+++ b/src/assets/icons/logos/logo-dark.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="28" viewBox="0 0 18 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75681 15.5528C11.2466 15.5528 13.6945 15.4046 15.7077 15.1061C17.3289 14.8617 17.8407 13.6588 17.2929 11.9592L14.3091 2.55748C13.7602 0.817535 12.3597 0 10.429 0H7.07537C5.14471 0 3.74427 0.817535 3.19533 2.55748L0.211561 11.9592C-0.33625 13.6588 0.175541 14.8617 1.79669 15.1061C3.80993 15.4046 6.25783 15.5528 8.75681 15.5528ZM8.75681 13.6442C6.68101 13.6442 4.66866 13.5297 2.55012 13.2903C2.00748 13.233 1.93999 12.9054 2.11095 12.3403L4.93951 3.29897C5.23106 2.35365 6.00452 1.8974 7.07537 1.8974H10.429C11.4999 1.8974 12.2733 2.35365 12.5741 3.29897L15.3935 12.3403C15.5644 12.9054 15.497 13.233 14.9544 13.2903C12.8357 13.5297 10.8234 13.6442 8.75681 13.6442ZM7.71611 14.7115V27.2097H9.79031V14.7115H7.71611ZM3.65449 28H13.8499C14.3349 28 14.6668 27.6509 14.6668 27.1433C14.6668 26.2034 13.9005 25.5506 12.7489 25.5506H4.75548C3.60388 25.5506 2.84886 26.2034 2.84886 27.1433C2.84886 27.6509 3.16946 28 3.65449 28Z" fill="black"/>
+</svg>
--- a/src/assets/icons/logos/logo-fill-dark.svg
+++ b/src/assets/icons/logos/logo-fill-dark.svg
@@ -0,0 +1,18 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 27.6441C21.5354 27.6441 27.6441 21.5354 27.6441 14C27.6441 6.46458 21.5354 0.355927 14 0.355927C6.46461 0.355927 0.355957 6.46458 0.355957 14C0.355957 21.5354 6.46461 27.6441 14 27.6441Z" fill="black"/>
+<g filter="url(#filter0_d_16_11)">
+<path d="M14.1221 14.9372C15.6529 14.9372 17.1518 14.8463 18.3804 14.6644C19.3548 14.517 19.66 13.7979 19.329 12.7716L17.499 7.00511C17.1672 5.94913 16.3182 5.45764 15.1465 5.45764H13.0908C11.9191 5.45764 11.07 5.94913 10.7383 7.00511L8.90825 12.7716C8.57724 13.7979 8.88246 14.517 9.85688 14.6644C11.0855 14.8463 12.5856 14.9372 14.1221 14.9372ZM13.4838 14.451V22.1166H14.756V14.451H13.4838ZM10.9926 22.6014H17.2447C17.5434 22.6014 17.7469 22.3873 17.7469 22.0759C17.7469 21.4994 17.277 21.099 16.5694 21.099H11.6679C10.9603 21.099 10.4973 21.4994 10.4973 22.0759C10.4973 22.3873 10.6939 22.6014 10.9926 22.6014Z" fill="white"/>
+</g>
+<defs>
+<filter id="filter0_d_16_11" x="4.77966" y="2.45764" width="18.678" height="25.1438" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_16_11"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_16_11" result="shape"/>
+</filter>
+</defs>
+</svg>
--- a/src/assets/icons/logos/logo-fill.light.svg
+++ b/src/assets/icons/logos/logo-fill.light.svg
@@ -0,0 +1,23 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_3)">
+<path d="M14 27.6441C21.5354 27.6441 27.6441 21.5354 27.6441 14C27.6441 6.46458 21.5354 0.355927 14 0.355927C6.46461 0.355927 0.355957 6.46458 0.355957 14C0.355957 21.5354 6.46461 27.6441 14 27.6441Z" fill="white"/>
+<g filter="url(#filter0_d_14_3)">
+<path d="M14.1221 14.9372C15.6529 14.9372 17.1518 14.8463 18.3804 14.6644C19.3548 14.517 19.66 13.7979 19.329 12.7716L17.499 7.00511C17.1672 5.94913 16.3182 5.45764 15.1465 5.45764H13.0908C11.9191 5.45764 11.07 5.94913 10.7383 7.00511L8.90825 12.7716C8.57724 13.7979 8.88246 14.517 9.85688 14.6644C11.0855 14.8463 12.5856 14.9372 14.1221 14.9372ZM13.4838 14.451V22.1166H14.756V14.451H13.4838ZM10.9926 22.6014H17.2447C17.5434 22.6014 17.7469 22.3873 17.7469 22.0759C17.7469 21.4994 17.277 21.099 16.5694 21.099H11.6679C10.9603 21.099 10.4973 21.4994 10.4973 22.0759C10.4973 22.3873 10.6939 22.6014 10.9926 22.6014Z" fill="black"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_14_3" x="4.77966" y="5.45764" width="18.678" height="25.1438" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_14_3"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_14_3" result="shape"/>
+</filter>
+<clipPath id="clip0_14_3">
+<rect width="28" height="28" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/assets/icons/logos/logo-light.svg
+++ b/src/assets/icons/logos/logo-light.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="28" viewBox="0 0 18 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.75681 15.5528C11.2466 15.5528 13.6945 15.4046 15.7077 15.1061C17.3289 14.8617 17.8407 13.6588 17.2929 11.9592L14.3091 2.55748C13.7602 0.817535 12.3597 0 10.429 0H7.07537C5.14471 0 3.74427 0.817535 3.19533 2.55748L0.211561 11.9592C-0.33625 13.6588 0.175541 14.8617 1.79669 15.1061C3.80993 15.4046 6.25783 15.5528 8.75681 15.5528ZM8.75681 13.6442C6.68101 13.6442 4.66866 13.5297 2.55012 13.2903C2.00748 13.233 1.93999 12.9054 2.11095 12.3403L4.93951 3.29897C5.23106 2.35365 6.00452 1.8974 7.07537 1.8974H10.429C11.4999 1.8974 12.2733 2.35365 12.5741 3.29897L15.3935 12.3403C15.5644 12.9054 15.497 13.233 14.9544 13.2903C12.8357 13.5297 10.8234 13.6442 8.75681 13.6442ZM7.71611 14.7115V27.2097H9.79031V14.7115H7.71611ZM3.65449 28H13.8499C14.3349 28 14.6668 27.6509 14.6668 27.1433C14.6668 26.2034 13.9005 25.5506 12.7489 25.5506H4.75548C3.60388 25.5506 2.84886 26.2034 2.84886 27.1433C2.84886 27.6509 3.16946 28 3.65449 28Z" fill="white"/>
+</svg>
--- a/src/assets/icons/logos/logo-rounded-dark.svg
+++ b/src/assets/icons/logos/logo-rounded-dark.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 28.6441C22.5354 28.6441 28.6441 22.5354 28.6441 15C28.6441 7.46458 22.5354 1.35593 15 1.35593C7.46461 1.35593 1.35596 7.46458 1.35596 15C1.35596 22.5354 7.46461 28.6441 15 28.6441Z" stroke="black"/>
+<path d="M15.1214 15.9451C16.6402 15.9451 18.1335 15.8547 19.3616 15.6726C20.3505 15.5235 20.6627 14.7897 20.3286 13.7529L18.5084 8.01774C18.1736 6.95635 17.3193 6.45764 16.1415 6.45764H14.0957C12.918 6.45764 12.0637 6.95635 11.7289 8.01774L9.90872 13.7529C9.57455 14.7897 9.88675 15.5235 10.8757 15.6726C12.1038 15.8547 13.597 15.9451 15.1214 15.9451ZM15.1214 14.7808C13.8552 14.7808 12.6276 14.711 11.3353 14.5649C11.0043 14.53 10.9631 14.3301 11.0674 13.9854L12.7928 8.47006C12.9707 7.8934 13.4425 7.61509 14.0957 7.61509H16.1415C16.7947 7.61509 17.2666 7.8934 17.4501 8.47006L19.1699 13.9854C19.2742 14.3301 19.233 14.53 18.902 14.5649C17.6096 14.711 16.3821 14.7808 15.1214 14.7808ZM14.4866 15.4319V23.056H15.7519V15.4319H14.4866ZM12.009 23.538H18.2283C18.5242 23.538 18.7266 23.3251 18.7266 23.0154C18.7266 22.4421 18.2592 22.0439 17.5567 22.0439H12.6806C11.9781 22.0439 11.5175 22.4421 11.5175 23.0154C11.5175 23.3251 11.7131 23.538 12.009 23.538Z" fill="black"/>
+</svg>
--- a/src/assets/icons/logos/logo-rounded-light.svg
+++ b/src/assets/icons/logos/logo-rounded-light.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 28.6441C22.5354 28.6441 28.6441 22.5354 28.6441 15C28.6441 7.46458 22.5354 1.35593 15 1.35593C7.46461 1.35593 1.35596 7.46458 1.35596 15C1.35596 22.5354 7.46461 28.6441 15 28.6441Z" stroke="white"/>
+<path d="M15.1214 15.9451C16.6402 15.9451 18.1335 15.8547 19.3616 15.6726C20.3505 15.5235 20.6627 14.7897 20.3286 13.7529L18.5084 8.01774C18.1736 6.95635 17.3193 6.45764 16.1415 6.45764H14.0957C12.918 6.45764 12.0637 6.95635 11.7289 8.01774L9.90872 13.7529C9.57455 14.7897 9.88675 15.5235 10.8757 15.6726C12.1038 15.8547 13.597 15.9451 15.1214 15.9451ZM15.1214 14.7808C13.8552 14.7808 12.6276 14.711 11.3353 14.5649C11.0043 14.53 10.9631 14.3301 11.0674 13.9854L12.7928 8.47006C12.9707 7.8934 13.4425 7.61509 14.0957 7.61509H16.1415C16.7947 7.61509 17.2666 7.8934 17.4501 8.47006L19.1699 13.9854C19.2742 14.3301 19.233 14.53 18.902 14.5649C17.6096 14.711 16.3821 14.7808 15.1214 14.7808ZM14.4866 15.4319V23.056H15.7519V15.4319H14.4866ZM12.009 23.538H18.2283C18.5242 23.538 18.7266 23.3251 18.7266 23.0154C18.7266 22.4421 18.2592 22.0439 17.5567 22.0439H12.6806C11.9781 22.0439 11.5175 22.4421 11.5175 23.0154C11.5175 23.3251 11.7131 23.538 12.009 23.538Z" fill="white"/>
+</svg>
--- a/src/assets/icons/lyrics.svg
+++ b/src/assets/icons/lyrics.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.39687 27.1131C9.04913 27.1131 9.53405 26.7937 10.3459 26.0807L14.3572 22.5294H21.4504C24.9784 22.5294 26.9547 20.503 26.9547 17.0251V7.93679C26.9547 4.45891 24.9784 2.4325 21.4504 2.4325H6.50218C2.97625 2.4325 1 4.4493 1 7.93679V17.0251C1 20.5126 3.02476 22.5294 6.42836 22.5294H6.9107V25.4181C6.9107 26.4533 7.45422 27.1131 8.39687 27.1131ZM8.96593 24.532V21.1863C8.96593 20.4986 8.67132 20.2335 8.01319 20.2335H6.56757C4.35225 20.2335 3.29592 19.1066 3.29592 16.9523V8.00007C3.29592 5.84569 4.35225 4.72842 6.56757 4.72842H21.3871C23.5928 4.72842 24.6588 5.84569 24.6588 8.00007V16.9523C24.6588 19.1066 23.5928 20.2335 21.3871 20.2335H14.2321C13.521 20.2335 13.1823 20.3484 12.6864 20.8497L8.96593 24.532Z" fill="currentColor"/>
+<path d="M8.2771 11.2555C8.2771 12.6189 9.13022 13.6523 10.4502 13.6523C10.9762 13.6523 11.4768 13.547 11.7878 13.1582H11.9174C11.5281 14.0908 10.6426 14.7372 9.78389 14.9491C9.37561 15.0578 9.23194 15.2495 9.23194 15.5329C9.23194 15.8427 9.4928 16.0804 9.83147 16.0804C11.0784 16.0804 13.4024 14.5982 13.4024 11.7334C13.4024 10.0933 12.3606 8.83142 10.776 8.83142C9.34444 8.83142 8.2771 9.8315 8.2771 11.2555ZM14.6327 11.2555C14.6327 12.6189 15.4837 13.6523 16.8058 13.6523C17.3317 13.6523 17.8302 13.547 18.1412 13.1582H18.273C17.8837 14.0908 16.9982 14.7372 16.1394 14.9491C15.7387 15.0578 15.5875 15.2495 15.5875 15.5329C15.5875 15.8427 15.8462 16.0804 16.1849 16.0804C17.4318 16.0804 19.7559 14.5982 19.7559 11.7334C19.7559 10.0933 18.7141 8.83142 17.1316 8.83142C15.6979 8.83142 14.6327 9.8315 14.6327 11.2555Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/lyrics2.svg
+++ b/src/assets/icons/lyrics2.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.39687 27.1131C9.04913 27.1131 9.53405 26.7937 10.3459 26.0807L14.3572 22.5294H21.4504C24.9784 22.5294 26.9547 20.503 26.9547 17.0251V7.93679C26.9547 4.45891 24.9784 2.4325 21.4504 2.4325H6.50218C2.97625 2.4325 1 4.4493 1 7.93679V17.0251C1 20.5126 3.02476 22.5294 6.42836 22.5294H6.9107V25.4181C6.9107 26.4533 7.45422 27.1131 8.39687 27.1131ZM8.96593 24.532V21.1863C8.96593 20.4986 8.67132 20.2335 8.01319 20.2335H6.56757C4.35225 20.2335 3.29592 19.1066 3.29592 16.9523V8.00007C3.29592 5.84569 4.35225 4.72842 6.56757 4.72842H21.3871C23.5928 4.72842 24.6588 5.84569 24.6588 8.00007V16.9523C24.6588 19.1066 23.5928 20.2335 21.3871 20.2335H14.2321C13.521 20.2335 13.1823 20.3484 12.6864 20.8497L8.96593 24.532Z" fill="currentColor"/>
+<path d="M8.2771 11.2555C8.2771 12.6189 9.13022 13.6523 10.4502 13.6523C10.9762 13.6523 11.4768 13.547 11.7878 13.1582H11.9174C11.5281 14.0908 10.6426 14.7372 9.78389 14.9491C9.37561 15.0578 9.23194 15.2495 9.23194 15.5329C9.23194 15.8427 9.4928 16.0804 9.83147 16.0804C11.0784 16.0804 13.4024 14.5982 13.4024 11.7334C13.4024 10.0933 12.3606 8.83142 10.776 8.83142C9.34444 8.83142 8.2771 9.8315 8.2771 11.2555ZM14.6327 11.2555C14.6327 12.6189 15.4837 13.6523 16.8058 13.6523C17.3317 13.6523 17.8302 13.547 18.1412 13.1582H18.273C17.8837 14.0908 16.9982 14.7372 16.1394 14.9491C15.7387 15.0578 15.5875 15.2495 15.5875 15.5329C15.5875 15.8427 15.8462 16.0804 16.1849 16.0804C17.4318 16.0804 19.7559 14.5982 19.7559 11.7334C19.7559 10.0933 18.7141 8.83142 17.1316 8.83142C15.6979 8.83142 14.6327 9.8315 14.6327 11.2555Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/more.svg
+++ b/src/assets/icons/more.svg
@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="7.04999" cy="12.0498" r="1.25" fill="white"/>
-<circle cx="12.05" cy="12.0498" r="1.25" fill="white"/>
-<circle cx="17.05" cy="12.0498" r="1.25" fill="white"/>
-</svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="7.04999" cy="12.0498" r="1.25" fill="currentColor" />
+    <circle cx="12.05" cy="12.0498" r="1.25" fill="currentColor" />
+    <circle cx="17.05" cy="12.0498" r="1.25" fill="currentColor" />
+</svg>
--- a/src/assets/icons/pin.fill.svg
+++ b/src/assets/icons/pin.fill.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 17.816C5 18.8775 5.71648 19.5801 6.82812 19.5801H13.0962V25.1161C13.0962 26.7698 13.9348 28.4269 14.2573 28.4269C14.5723 28.4269 15.4109 26.7698 15.4109 25.1161V19.5801H21.6791C22.7907 19.5801 23.5072 18.8775 23.5072 17.816C23.5072 15.2991 21.5035 12.7005 18.1937 11.482L17.8091 6.03984C19.5601 5.04609 20.9431 3.95086 21.5483 3.17625C21.8677 2.76515 22.0285 2.3393 22.0285 1.96242C22.0285 1.18852 21.4334 0.621094 20.5583 0.621094H7.95851C7.07375 0.621094 6.48828 1.18852 6.48828 1.96242C6.48828 2.3393 6.63945 2.76515 6.95891 3.17625C7.56406 3.95086 8.94711 5.04609 10.6981 6.03984L10.3135 11.482C7.00367 12.7005 5 15.2991 5 17.816Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/pin.svg
+++ b/src/assets/icons/pin.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.803 4.385C14.766 2.354 17.45 1.889 19.039 3.478L24.522 8.961C26.111 10.551 25.646 13.234 23.615 14.196L18.225 16.75C17.8189 16.9424 17.5024 17.2836 17.341 17.703L15.752 21.833C15.6474 22.105 15.4764 22.3466 15.2547 22.5359C15.033 22.7251 14.7676 22.8559 14.4825 22.9165C14.1974 22.9771 13.9016 22.9656 13.6221 22.8829C13.3426 22.8002 13.0882 22.649 12.882 22.443L9.75 19.31L4.06 25H3V23.94L8.69 18.25L5.558 15.118C5.352 14.9118 5.20076 14.6575 5.118 14.378C5.03523 14.0986 5.02357 13.8029 5.08406 13.5178C5.14456 13.2327 5.2753 12.9673 5.46441 12.7455C5.65353 12.5238 5.89503 12.3527 6.167 12.248L10.297 10.659C10.717 10.498 11.058 10.181 11.25 9.775L13.803 4.385V4.385ZM17.978 4.539C17.7797 4.34069 17.5367 4.19293 17.2694 4.10817C17.002 4.02341 16.7183 4.00414 16.442 4.05198C16.1656 4.09981 15.9048 4.21335 15.6816 4.38304C15.4583 4.55272 15.2791 4.77357 15.159 5.027L12.606 10.417C12.2487 11.1713 11.615 11.7592 10.836 12.059L6.706 13.648C6.66707 13.6629 6.63247 13.6872 6.60535 13.7188C6.57822 13.7505 6.55944 13.7884 6.55069 13.8291C6.54195 13.8698 6.54353 13.9121 6.55528 13.9521C6.56704 13.9921 6.5886 14.0285 6.618 14.058L13.942 21.382C13.9715 21.4114 14.0078 21.433 14.0477 21.4449C14.0876 21.4567 14.1299 21.4583 14.1706 21.4497C14.2113 21.4411 14.2492 21.4224 14.2809 21.3954C14.3126 21.3684 14.337 21.3339 14.352 21.295L15.941 17.165C16.2405 16.3857 16.8285 15.7515 17.583 15.394L22.973 12.841C23.2266 12.721 23.4476 12.5417 23.6174 12.3184C23.7873 12.095 23.9009 11.8341 23.9487 11.5576C23.9966 11.2812 23.9772 10.9972 23.8923 10.7298C23.8075 10.4624 23.6595 10.2193 23.461 10.021L17.978 4.54V4.539Z" fill="white"/>
+<svg width="28" height="29" viewBox="0 0 28 29" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2573 28.4269C14.5723 28.4269 15.4109 26.7698 15.4109 25.1161V18.5306H13.0962V25.1161C13.0962 26.7698 13.9348 28.4269 14.2573 28.4269ZM6.82812 19.5801H21.6791C22.7907 19.5801 23.5072 18.8775 23.5072 17.816C23.5072 14.2737 19.5411 10.7869 14.2573 10.7869C8.96609 10.7869 5 14.2737 5 17.816C5 18.8775 5.71648 19.5801 6.82812 19.5801ZM7.36437 17.5997C7.12648 17.5997 7.02405 17.4621 7.06671 17.1858C7.34983 15.0869 10.1063 12.7066 14.2573 12.7066C18.4009 12.7066 21.1573 15.0869 21.4405 17.1858C21.4831 17.4621 21.3807 17.5997 21.1428 17.5997H7.36437ZM6.48828 1.96242C6.48828 2.32969 6.63945 2.75554 6.95891 3.16664C7.55445 3.95086 8.94711 5.04609 10.4511 6.03984L10.0133 12.4003H12.1034L12.5434 5.10305C12.5551 4.90735 12.519 4.81922 12.3702 4.74375C10.779 3.92156 9.54404 2.97328 9.3617 2.71781C9.26584 2.58023 9.34694 2.48015 9.47163 2.48015H19.0355C19.1602 2.48015 19.2413 2.58023 19.1455 2.71781C18.9631 2.97328 17.7282 3.92156 16.137 4.74375C15.9978 4.81922 15.9521 4.90735 15.9734 5.10305L16.4037 12.4003H18.4939L18.0561 6.03984C19.5697 5.04609 20.9527 3.95086 21.5483 3.16664C21.8773 2.75554 22.0285 2.32969 22.0285 1.96242C22.0285 1.18852 21.4334 0.621094 20.5583 0.621094H7.95851C7.07375 0.621094 6.48828 1.18852 6.48828 1.96242Z" fill="currentColor"/>
 </svg>
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.3418 21.3711C9.71094 21.3711 10.0361 21.2393 10.4404 21.002L20.8203 14.999C21.5762 14.5596 21.8926 14.2168 21.8926 13.6631C21.8926 13.1094 21.5762 12.7754 20.8203 12.3271L10.4404 6.32422C10.0361 6.08691 9.71094 5.95508 9.3418 5.95508C8.62109 5.95508 8.11133 6.50879 8.11133 7.37891V19.9473C8.11133 20.8262 8.62109 21.3711 9.3418 21.3711Z" fill="#F2F2F2"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.3418 21.3711C9.71094 21.3711 10.0361 21.2393 10.4404 21.002L20.8203 14.999C21.5762 14.5596 21.8926 14.2168 21.8926 13.6631C21.8926 13.1094 21.5762 12.7754 20.8203 12.3271L10.4404 6.32422C10.0361 6.08691 9.71094 5.95508 9.3418 5.95508C8.62109 5.95508 8.11133 6.50879 8.11133 7.37891V19.9473C8.11133 20.8262 8.62109 21.3711 9.3418 21.3711Z" fill="currentColor"/>
 </svg>
--- a/src/assets/icons/queue.svg
+++ b/src/assets/icons/queue.svg
@@ -1 +1,12 @@
-<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 64 64" width="28px" height="28px" baseProfile="basic"><path d="M51,48H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,48,51,48z"/><path d="M16.356,45.919c1.121,0.082,1.962,1.032,1.962,2.222c0,1.647-1.524,2.816-3.678,2.816c-1.9,0-3.391-1.032-3.391-2.201	c0-0.52,0.362-0.889,0.861-0.889c0.328,0,0.602,0.157,0.909,0.54c0.417,0.561,0.957,0.848,1.62,0.848c0.902,0,1.49-0.472,1.49-1.203	c0-0.725-0.595-1.217-1.483-1.217h-0.554c-0.472,0-0.82-0.362-0.82-0.861c0-0.479,0.342-0.848,0.82-0.848h0.533	c0.738,0,1.285-0.465,1.285-1.101s-0.533-1.073-1.299-1.073c-0.588,0-1.053,0.26-1.47,0.813c-0.246,0.321-0.533,0.465-0.889,0.465	c-0.526,0-0.902-0.355-0.902-0.861c0-1.128,1.456-2.119,3.302-2.119c1.996,0,3.391,1.032,3.391,2.502c0,1.005-0.745,1.9-1.688,2.017	V45.919z"/><path d="M51,34H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,34,51,34z"/><path d="M17.345,35.209c0.636,0,1.032,0.342,1.032,0.902c0,0.554-0.39,0.889-1.032,0.889h-4.676c-0.663,0-1.101-0.376-1.101-0.95	c0-0.41,0.226-0.766,0.909-1.436l2.365-2.434c0.731-0.745,1.039-1.237,1.039-1.757c0-0.67-0.485-1.121-1.203-1.121	c-0.581,0-1.005,0.294-1.306,0.902c-0.301,0.465-0.561,0.643-0.957,0.643c-0.54,0-0.916-0.369-0.916-0.889	c0-1.271,1.436-2.461,3.302-2.461c1.88,0,3.254,1.148,3.254,2.714c0,0.964-0.465,1.812-1.606,2.933l-1.948,1.969v0.096H17.345z"/><path d="M51,20.019H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,20.019,51,20.019z"/><path d="M14.765,21.797v-6.146h-0.027l-0.718,0.485c-0.355,0.226-0.547,0.294-0.772,0.294c-0.451,0-0.779-0.328-0.779-0.779	c0-0.335,0.205-0.636,0.608-0.889l1.114-0.745c0.533-0.342,1.019-0.499,1.477-0.499c0.8,0,1.333,0.54,1.333,1.374v6.904	C17,22.569,16.597,23,15.886,23C15.168,23,14.765,22.563,14.765,21.797z"/></svg>
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="28px" height="28px"
+    baseProfile="basic">
+    <path d="M51,48H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,48,51,48z" />
+    <path
+        d="M16.356,45.919c1.121,0.082,1.962,1.032,1.962,2.222c0,1.647-1.524,2.816-3.678,2.816c-1.9,0-3.391-1.032-3.391-2.201	c0-0.52,0.362-0.889,0.861-0.889c0.328,0,0.602,0.157,0.909,0.54c0.417,0.561,0.957,0.848,1.62,0.848c0.902,0,1.49-0.472,1.49-1.203	c0-0.725-0.595-1.217-1.483-1.217h-0.554c-0.472,0-0.82-0.362-0.82-0.861c0-0.479,0.342-0.848,0.82-0.848h0.533	c0.738,0,1.285-0.465,1.285-1.101s-0.533-1.073-1.299-1.073c-0.588,0-1.053,0.26-1.47,0.813c-0.246,0.321-0.533,0.465-0.889,0.465	c-0.526,0-0.902-0.355-0.902-0.861c0-1.128,1.456-2.119,3.302-2.119c1.996,0,3.391,1.032,3.391,2.502c0,1.005-0.745,1.9-1.688,2.017	V45.919z" />
+    <path d="M51,34H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,34,51,34z" />
+    <path
+        d="M17.345,35.209c0.636,0,1.032,0.342,1.032,0.902c0,0.554-0.39,0.889-1.032,0.889h-4.676c-0.663,0-1.101-0.376-1.101-0.95	c0-0.41,0.226-0.766,0.909-1.436l2.365-2.434c0.731-0.745,1.039-1.237,1.039-1.757c0-0.67-0.485-1.121-1.203-1.121	c-0.581,0-1.005,0.294-1.306,0.902c-0.301,0.465-0.561,0.643-0.957,0.643c-0.54,0-0.916-0.369-0.916-0.889	c0-1.271,1.436-2.461,3.302-2.461c1.88,0,3.254,1.148,3.254,2.714c0,0.964-0.465,1.812-1.606,2.933l-1.948,1.969v0.096H17.345z" />
+    <path d="M51,20.019H25c-1.104,0-2-0.896-2-2s0.896-2,2-2h26c1.104,0,2,0.896,2,2S52.104,20.019,51,20.019z" />
+    <path
+        d="M14.765,21.797v-6.146h-0.027l-0.718,0.485c-0.355,0.226-0.547,0.294-0.772,0.294c-0.451,0-0.779-0.328-0.779-0.779	c0-0.335,0.205-0.636,0.608-0.889l1.114-0.745c0.533-0.342,1.019-0.499,1.477-0.499c0.8,0,1.333,0.54,1.333,1.374v6.904	C17,22.569,16.597,23,15.886,23C15.168,23,14.765,22.563,14.765,21.797z" />
+</svg>
--- a/src/assets/icons/radio.svg
+++ b/src/assets/icons/radio.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M21.367 13.6066C22.377 13.5853 23.1931 12.7884 23.1931 11.7944C23.1931 10.7887 22.3749 9.97054 21.367 9.95671C20.3613 9.945 19.5314 10.7866 19.5314 11.7944C19.5314 12.7905 20.3613 13.6205 21.367 13.6066ZM21.367 18.829C22.3727 18.829 23.1931 17.997 23.1931 16.9891C23.1931 15.9813 22.3749 15.1631 21.367 15.1631C20.3613 15.1631 19.5314 15.9855 19.5314 16.9891C19.5314 17.9948 20.3613 18.829 21.367 18.829ZM11.1511 11.3658C11.6283 11.3658 12.0117 10.9631 12.0117 10.4625C12.0117 9.98742 11.6262 9.59226 11.1511 9.59226C10.6739 9.59226 10.2787 9.98742 10.2787 10.4625C10.2787 10.9631 10.6739 11.3658 11.1511 11.3658ZM13.9634 12.1671C14.4598 12.1671 14.8357 11.7644 14.8357 11.2852C14.8357 10.7866 14.4619 10.4032 13.9634 10.4032C13.4841 10.4032 13.1145 10.7866 13.1145 11.2852C13.1145 11.7644 13.4862 12.1671 13.9634 12.1671ZM16.0873 14.2024C16.5687 14.2024 16.9734 13.819 16.9734 13.3418C16.9734 12.8412 16.5687 12.4364 16.0873 12.4364C15.6122 12.4364 15.2309 12.8412 15.2309 13.3418C15.2309 13.819 15.6122 14.2024 16.0873 14.2024ZM16.8087 16.9327C17.2859 16.9327 17.6693 16.5396 17.6693 16.0624C17.6693 15.5756 17.2859 15.1922 16.8087 15.1922C16.3219 15.1922 15.9384 15.5756 15.9384 16.0624C15.9384 16.5396 16.3219 16.9327 16.8087 16.9327ZM16.0873 19.6767C16.5666 19.6767 16.9734 19.272 16.9734 18.7831C16.9734 18.2963 16.5687 17.9128 16.0873 17.9128C15.6122 17.9128 15.2309 18.2963 15.2309 18.7831C15.2309 19.2741 15.6122 19.6767 16.0873 19.6767ZM13.9634 21.7697C14.4619 21.7697 14.8357 21.3766 14.8357 20.8877C14.8357 20.4084 14.4598 20.0037 13.9634 20.0037C13.4862 20.0037 13.1145 20.4084 13.1145 20.8877C13.1145 21.3766 13.4841 21.7697 13.9634 21.7697ZM11.1511 22.6287C11.6262 22.6287 12.0117 22.2335 12.0117 21.7584C12.0117 21.2578 11.6283 20.8531 11.1511 20.8531C10.6739 20.8531 10.2787 21.2578 10.2787 21.7584C10.2787 22.2335 10.6739 22.6287 11.1511 22.6287ZM8.3271 21.7697C8.80429 21.7697 9.17601 21.3766 9.17601 20.8877C9.17601 20.4084 8.80218 20.0037 8.3271 20.0037C7.82859 20.0037 7.45476 20.4084 7.45476 20.8877C7.45476 21.3766 7.82648 21.7697 8.3271 21.7697ZM6.21069 19.6767C6.68577 19.6767 7.0596 19.2741 7.0596 18.7831C7.0596 18.2963 6.68577 17.9128 6.21069 17.9128C5.7239 17.9128 5.31913 18.2963 5.31913 18.7831C5.31913 19.272 5.7239 19.6767 6.21069 19.6767ZM5.4914 16.9327C5.96858 16.9327 6.35202 16.5396 6.35202 16.0624C6.35202 15.5756 5.96858 15.1922 5.4914 15.1922C5.0121 15.1922 4.62116 15.5756 4.62116 16.0624C4.62116 16.5396 5.0121 16.9327 5.4914 16.9327ZM6.21069 14.2024C6.68577 14.2024 7.0596 13.819 7.0596 13.3418C7.0596 12.8412 6.68577 12.4364 6.21069 12.4364C5.7239 12.4364 5.31913 12.8412 5.31913 13.3418C5.31913 13.819 5.7239 14.2024 6.21069 14.2024ZM8.3271 12.1671C8.80218 12.1671 9.17601 11.7644 9.17601 11.2852C9.17601 10.7866 8.80429 10.4032 8.3271 10.4032C7.82648 10.4032 7.45476 10.7866 7.45476 11.2852C7.45476 11.7644 7.82859 12.1671 8.3271 12.1671ZM11.1511 14.2601C11.6283 14.2601 12.0117 13.867 12.0117 13.3898C12.0117 12.8988 11.6283 12.4941 11.1511 12.4941C10.6739 12.4941 10.2787 12.8988 10.2787 13.3898C10.2787 13.867 10.6739 14.2601 11.1511 14.2601ZM13.7728 15.4003C14.2596 15.4003 14.6334 14.9955 14.6334 14.528C14.6334 14.0508 14.2596 13.6556 13.7728 13.6556C13.2977 13.6556 12.8909 14.0529 12.8909 14.528C12.8909 14.9934 13.2977 15.4003 13.7728 15.4003ZM13.7728 18.5674C14.2617 18.5674 14.6334 18.1819 14.6334 17.7047C14.6334 17.2062 14.2617 16.8131 13.7728 16.8131C13.2956 16.8131 12.8909 17.2062 12.8909 17.7047C12.8909 18.1819 13.2956 18.5674 13.7728 18.5674ZM11.1511 19.7248C11.6262 19.7248 12.0117 19.3179 12.0117 18.8311C12.0117 18.3539 11.6283 17.9609 11.1511 17.9609C10.6739 17.9609 10.2787 18.3539 10.2787 18.8311C10.2787 19.3179 10.6739 19.7248 11.1511 19.7248ZM8.51554 18.5674C8.99273 18.5674 9.39749 18.1819 9.39749 17.7047C9.39749 17.2062 8.99273 16.8131 8.51554 16.8131C8.03835 16.8131 7.65492 17.2062 7.65492 17.7047C7.65492 18.1819 8.03835 18.5674 8.51554 18.5674ZM8.51554 15.4003C8.99062 15.4003 9.39749 14.9934 9.39749 14.528C9.39749 14.0529 8.99062 13.6556 8.51554 13.6556C8.04046 13.6556 7.65492 14.0508 7.65492 14.528C7.65492 14.9955 8.04046 15.4003 8.51554 15.4003ZM11.1511 16.9807C11.6283 16.9807 12.0117 16.5877 12.0117 16.1105C12.0117 15.6333 11.6283 15.2402 11.1511 15.2402C10.6739 15.2402 10.2787 15.6333 10.2787 16.1105C10.2787 16.5877 10.6739 16.9807 11.1511 16.9807ZM22.444 7.38796L23.0962 5.33649L6.82734 0.0527401C6.26344 -0.132415 5.64844 0.186802 5.47711 0.746487C5.28985 1.30406 5.60696 1.91906 6.16664 2.10632L22.444 7.38796ZM3.84421 27.0553H23.9109C26.4499 27.0553 27.7552 25.7597 27.7552 23.2591V8.98734C27.7552 6.48469 26.4499 5.18157 23.9109 5.18157H3.84421C1.31484 5.18157 0 6.48469 0 8.98734V23.2591C0 25.7597 1.31484 27.0553 3.84421 27.0553ZM3.97733 24.7594C2.88772 24.7594 2.29592 24.1952 2.29592 23.0566V9.18773C2.29592 8.04913 2.88772 7.47749 3.97733 7.47749H23.7778C24.8578 7.47749 25.4592 8.04913 25.4592 9.18773V23.0566C25.4592 24.1952 24.8578 24.7594 23.7778 24.7594H3.97733Z"
+        fill="currentColor" />
+</svg>
--- a/src/assets/icons/reload.svg
+++ b/src/assets/icons/reload.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15.007C4 20.8158 8.66992 25.4899 14.4712 25.4899C20.2703 25.4899 24.9306 20.8158 24.9306 15.007C24.9306 14.318 24.4478 13.8277 23.7597 13.8277C23.0929 13.8277 22.641 14.318 22.641 15.007C22.641 19.5471 19.0038 23.194 14.4712 23.194C9.93647 23.194 6.29592 19.5471 6.29592 15.007C6.29592 10.4428 9.90694 6.81608 14.4353 6.81608C15.2015 6.81608 15.9196 6.87584 16.5203 7.01038L13.3265 10.1691C13.1233 10.384 13.0042 10.6437 13.0042 10.9488C13.0042 11.5912 13.4913 12.0762 14.1241 12.0762C14.4592 12.0762 14.7262 11.9676 14.924 11.7581L19.7373 6.90866C19.9862 6.66936 20.0915 6.38858 20.0915 6.06421C20.0915 5.75578 19.967 5.44945 19.7373 5.22187L14.924 0.333982C14.7241 0.110624 14.4496 0 14.1241 0C13.4913 0 13.0042 0.508356 13.0042 1.15288C13.0042 1.45804 13.1233 1.71772 13.3169 1.93264L16.1514 4.72992C15.6327 4.63172 15.0426 4.56445 14.4353 4.56445C8.64039 4.56445 4 9.20367 4 15.007Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/settings.svg
+++ b/src/assets/icons/settings.svg
@@ -1,3 +1,3 @@
-<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.1035 23.208H14.8877C15.6172 23.208 16.1885 22.751 16.3643 22.0479L16.7158 20.5098L16.9443 20.4219L18.2891 21.2568C18.9043 21.6436 19.6338 21.5381 20.1523 21.0195L21.3828 19.7891C21.9102 19.2617 21.998 18.541 21.6113 17.9346L20.7764 16.5898L20.8643 16.3789L22.4023 16.0186C23.0967 15.8428 23.5537 15.2715 23.5537 14.542V12.8105C23.5537 12.0811 23.1055 11.5098 22.4023 11.334L20.873 10.9648L20.7852 10.7363L21.6201 9.40039C22.0068 8.79395 21.9189 8.07324 21.3916 7.53711L20.1611 6.30664C19.6514 5.78809 18.9219 5.69141 18.3066 6.06934L16.9619 6.89551L16.7158 6.80762L16.3643 5.26074C16.1885 4.55762 15.6172 4.10938 14.8877 4.10938H13.1035C12.3652 4.10938 11.7939 4.55762 11.627 5.26074L11.2754 6.80762L11.0293 6.89551L9.68457 6.06934C9.06055 5.69141 8.33984 5.78809 7.83008 6.30664L6.59082 7.53711C6.07227 8.07324 5.97559 8.79395 6.3623 9.40039L7.19727 10.7363L7.10938 10.9648L5.58887 11.334C4.88574 11.5098 4.4375 12.0811 4.4375 12.8105V14.542C4.4375 15.2715 4.89453 15.8428 5.58887 16.0186L7.12695 16.3789L7.20605 16.5898L6.37109 17.9346C5.98438 18.541 6.08105 19.2617 6.59961 19.7891L7.83887 21.0195C8.34863 21.5381 9.07812 21.6436 9.69336 21.2568L11.0381 20.4219L11.2754 20.5098L11.627 22.0479C11.7939 22.751 12.3652 23.208 13.1035 23.208ZM13.332 21.5908C13.1826 21.5908 13.1035 21.5293 13.0859 21.3975L12.5586 19.2354C12.0049 19.1035 11.4688 18.875 11.0381 18.6025L9.13965 19.7715C9.02539 19.8418 8.91992 19.833 8.81445 19.7275L7.8916 18.8047C7.78613 18.708 7.78613 18.6025 7.85645 18.4883L9.02539 16.5898C8.7793 16.168 8.55078 15.6406 8.41895 15.0869L6.24805 14.5684C6.11621 14.5508 6.0459 14.4717 6.0459 14.3223V13.0215C6.0459 12.8633 6.10742 12.8018 6.24805 12.7666L8.41016 12.2568C8.54199 11.668 8.79688 11.123 9.0166 10.7275L7.84766 8.84668C7.77734 8.72363 7.77734 8.61816 7.87402 8.5127L8.80566 7.59863C8.91113 7.50195 9.00781 7.48438 9.13965 7.56348L11.0205 8.71484C11.416 8.46875 12.0049 8.22266 12.5674 8.08203L13.0859 5.91992C13.1035 5.78809 13.1826 5.71777 13.332 5.71777H14.6592C14.8086 5.71777 14.8789 5.7793 14.9053 5.91992L15.4326 8.09082C16.0039 8.23145 16.5225 8.46875 16.9619 8.71484L18.8428 7.56348C18.9746 7.49316 19.0713 7.50195 19.1768 7.60742L20.1084 8.52148C20.2139 8.61816 20.2139 8.72363 20.1348 8.84668L18.9746 10.7275C19.1855 11.123 19.4492 11.668 19.5811 12.2568L21.7432 12.7666C21.8838 12.8018 21.9365 12.8633 21.9365 13.0215V14.3223C21.9365 14.4717 21.875 14.5508 21.7432 14.5684L19.5723 15.0869C19.4404 15.6406 19.2031 16.1768 18.957 16.5898L20.126 18.4795C20.1963 18.6025 20.1963 18.6992 20.0908 18.7959L19.168 19.7275C19.0625 19.833 18.957 19.8418 18.8428 19.7715L16.9531 18.6025C16.5137 18.875 16.0127 19.0947 15.4326 19.2354L14.9053 21.3975C14.8789 21.5293 14.8086 21.5908 14.6592 21.5908H13.332ZM14 16.9941C15.8281 16.9941 17.3311 15.4912 17.3311 13.6543C17.3311 11.835 15.8281 10.332 14 10.332C12.1631 10.332 10.6514 11.835 10.6514 13.6543C10.6514 15.4912 12.1631 16.9941 14 16.9941ZM14 15.4736C12.998 15.4736 12.1807 14.6562 12.1807 13.6543C12.1807 12.6699 13.0068 11.8525 14 11.8525C14.9756 11.8525 15.793 12.6699 15.793 13.6543C15.793 14.6475 14.9756 15.4736 14 15.4736Z" fill="#F2F2F2"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.1035 23.208H14.8877C15.6172 23.208 16.1885 22.751 16.3643 22.0479L16.7158 20.5098L16.9443 20.4219L18.2891 21.2568C18.9043 21.6436 19.6338 21.5381 20.1523 21.0195L21.3828 19.7891C21.9102 19.2617 21.998 18.541 21.6113 17.9346L20.7764 16.5898L20.8643 16.3789L22.4023 16.0186C23.0967 15.8428 23.5537 15.2715 23.5537 14.542V12.8105C23.5537 12.0811 23.1055 11.5098 22.4023 11.334L20.873 10.9648L20.7852 10.7363L21.6201 9.40039C22.0068 8.79395 21.9189 8.07324 21.3916 7.53711L20.1611 6.30664C19.6514 5.78809 18.9219 5.69141 18.3066 6.06934L16.9619 6.89551L16.7158 6.80762L16.3643 5.26074C16.1885 4.55762 15.6172 4.10938 14.8877 4.10938H13.1035C12.3652 4.10938 11.7939 4.55762 11.627 5.26074L11.2754 6.80762L11.0293 6.89551L9.68457 6.06934C9.06055 5.69141 8.33984 5.78809 7.83008 6.30664L6.59082 7.53711C6.07227 8.07324 5.97559 8.79395 6.3623 9.40039L7.19727 10.7363L7.10938 10.9648L5.58887 11.334C4.88574 11.5098 4.4375 12.0811 4.4375 12.8105V14.542C4.4375 15.2715 4.89453 15.8428 5.58887 16.0186L7.12695 16.3789L7.20605 16.5898L6.37109 17.9346C5.98438 18.541 6.08105 19.2617 6.59961 19.7891L7.83887 21.0195C8.34863 21.5381 9.07812 21.6436 9.69336 21.2568L11.0381 20.4219L11.2754 20.5098L11.627 22.0479C11.7939 22.751 12.3652 23.208 13.1035 23.208ZM13.332 21.5908C13.1826 21.5908 13.1035 21.5293 13.0859 21.3975L12.5586 19.2354C12.0049 19.1035 11.4688 18.875 11.0381 18.6025L9.13965 19.7715C9.02539 19.8418 8.91992 19.833 8.81445 19.7275L7.8916 18.8047C7.78613 18.708 7.78613 18.6025 7.85645 18.4883L9.02539 16.5898C8.7793 16.168 8.55078 15.6406 8.41895 15.0869L6.24805 14.5684C6.11621 14.5508 6.0459 14.4717 6.0459 14.3223V13.0215C6.0459 12.8633 6.10742 12.8018 6.24805 12.7666L8.41016 12.2568C8.54199 11.668 8.79688 11.123 9.0166 10.7275L7.84766 8.84668C7.77734 8.72363 7.77734 8.61816 7.87402 8.5127L8.80566 7.59863C8.91113 7.50195 9.00781 7.48438 9.13965 7.56348L11.0205 8.71484C11.416 8.46875 12.0049 8.22266 12.5674 8.08203L13.0859 5.91992C13.1035 5.78809 13.1826 5.71777 13.332 5.71777H14.6592C14.8086 5.71777 14.8789 5.7793 14.9053 5.91992L15.4326 8.09082C16.0039 8.23145 16.5225 8.46875 16.9619 8.71484L18.8428 7.56348C18.9746 7.49316 19.0713 7.50195 19.1768 7.60742L20.1084 8.52148C20.2139 8.61816 20.2139 8.72363 20.1348 8.84668L18.9746 10.7275C19.1855 11.123 19.4492 11.668 19.5811 12.2568L21.7432 12.7666C21.8838 12.8018 21.9365 12.8633 21.9365 13.0215V14.3223C21.9365 14.4717 21.875 14.5508 21.7432 14.5684L19.5723 15.0869C19.4404 15.6406 19.2031 16.1768 18.957 16.5898L20.126 18.4795C20.1963 18.6025 20.1963 18.6992 20.0908 18.7959L19.168 19.7275C19.0625 19.833 18.957 19.8418 18.8428 19.7715L16.9531 18.6025C16.5137 18.875 16.0127 19.0947 15.4326 19.2354L14.9053 21.3975C14.8789 21.5293 14.8086 21.5908 14.6592 21.5908H13.332ZM14 16.9941C15.8281 16.9941 17.3311 15.4912 17.3311 13.6543C17.3311 11.835 15.8281 10.332 14 10.332C12.1631 10.332 10.6514 11.835 10.6514 13.6543C10.6514 15.4912 12.1631 16.9941 14 16.9941ZM14 15.4736C12.998 15.4736 12.1807 14.6562 12.1807 13.6543C12.1807 12.6699 13.0068 11.8525 14 11.8525C14.9756 11.8525 15.793 12.6699 15.793 13.6543C15.793 14.6475 14.9756 15.4736 14 15.4736Z" fill="currentColor"/>
 </svg>
--- a/src/assets/icons/speaker.svg
+++ b/src/assets/icons/speaker.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8205 24.9747C13.6952 24.9747 14.3304 24.3395 14.3304 23.4744V5.57171C14.3304 4.70664 13.6952 4.01172 12.8013 4.01172C12.2041 4.01172 11.7881 4.26625 11.1462 4.86883L6.23296 9.4593C6.16476 9.52539 6.06984 9.56055 5.9632 9.56055H2.64538C0.927185 9.56055 0 10.5175 0 12.3273V16.6783C0 18.4977 0.927185 19.4472 2.64538 19.4472H5.96109C6.06773 19.4472 6.16265 19.476 6.23085 19.5421L11.1462 24.1773C11.7241 24.7351 12.2149 24.9747 12.8205 24.9747Z" fill="currentColor"/>
+<path d="M18.5131 19.6804C18.9969 20.0005 19.6489 19.8932 20.0075 19.3792C20.952 18.1218 21.5122 16.3335 21.5122 14.4815C21.5122 12.6295 20.952 10.8508 20.0075 9.57953C19.6489 9.06977 18.9969 8.95071 18.5131 9.28258C17.942 9.65711 17.84 10.3464 18.2877 11.0019C18.9357 11.9226 19.3013 13.1748 19.3013 14.4815C19.3013 15.7881 18.924 17.0287 18.2877 17.961C17.8496 18.6241 17.942 19.2962 18.5131 19.6804Z" fill="currentColor"/>
+<path d="M23.1864 22.8128C23.7128 23.1479 24.3615 23.0193 24.7264 22.4875C26.2517 20.3322 27.137 17.4477 27.137 14.4815C27.137 11.5152 26.2613 8.61156 24.7264 6.47336C24.3615 5.94368 23.7128 5.81501 23.1864 6.15016C22.6346 6.49797 22.5559 7.18375 22.9611 7.79077C24.2089 9.61023 24.9282 12.0065 24.9282 14.4815C24.9282 16.9565 24.1897 19.3314 22.9611 21.1701C22.5655 21.7771 22.6346 22.465 23.1864 22.8128Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/upload.svg
+++ b/src/assets/icons/upload.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="28" viewBox="0 0 30 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.183 19.296V21.5919H24.0023C27.6612 21.5919 29.9102 19.4134 29.9102 16.453C29.9102 13.9804 28.488 11.976 26.1691 11.0502C26.1841 5.75621 22.3633 1.93848 17.4628 1.93848C14.3376 1.93848 12.0063 3.55543 10.5368 5.67371C7.76062 4.98418 4.44797 7.08887 4.33875 10.4008C1.66078 10.8574 0 13.0844 0 15.9027C0 19.0487 2.39062 21.5919 6.2871 21.5919H11.704V19.296H6.28382C3.71108 19.296 2.32123 17.7644 2.32123 15.8626C2.32123 13.6644 3.76451 12.1185 6.16452 12.1185C6.33491 12.1185 6.40194 12.0205 6.39772 11.8576C6.32811 8.36127 8.83358 7.25128 11.3489 7.97549C11.4937 8.02237 11.5884 7.99471 11.6587 7.86159C12.7807 5.82159 14.5247 4.2344 17.448 4.2344C21.1547 4.2344 23.7705 7.16526 23.9571 10.5899C23.9944 11.1953 23.9508 11.8766 23.8955 12.4422C23.8816 12.6051 23.9445 12.7009 24.0977 12.7222C26.2432 13.1404 27.589 14.3898 27.589 16.356C27.589 18.0742 26.3798 19.296 23.9463 19.296H18.183Z" fill="currentColor"/>
+<path d="M14.9473 27.4717C15.5419 27.4717 16.027 26.9856 16.027 26.4133V15.594L15.9166 13.5041L16.6617 14.3636L18.3122 16.015C18.5091 16.214 18.773 16.3342 19.0357 16.3342C19.5647 16.3342 20.0072 15.9501 20.0072 15.4021C20.0072 15.1223 19.9008 14.8944 19.6943 14.7072L15.7587 11.0146C15.4725 10.7498 15.228 10.6509 14.9473 10.6509C14.659 10.6509 14.4145 10.7498 14.1262 11.0146L10.1927 14.7072C9.98629 14.8944 9.87988 15.1223 9.87988 15.4021C9.87988 15.9501 10.3031 16.3342 10.8417 16.3342C11.1044 16.3342 11.378 16.214 11.5727 16.015L13.2232 14.3636L13.9704 13.5041L13.86 15.594V26.4133C13.86 26.9856 14.3527 27.4717 14.9473 27.4717Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/volume-full.svg
+++ b/src/assets/icons/volume-full.svg
@@ -0,0 +1,6 @@
+<svg width="33" height="28" viewBox="0 0 33 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.58773 18.6598H5.91726C6.01218 18.6598 6.09749 18.6886 6.17531 18.7589L11.3234 23.3667C11.9323 23.9107 12.4017 24.1641 13.0169 24.1641C13.8724 24.1641 14.5289 23.5289 14.5289 22.6639V4.76112C14.5289 3.89605 13.8724 3.20113 12.9977 3.20113C12.3909 3.20113 11.977 3.46949 11.3234 4.05824L6.17531 8.62551C6.09538 8.69371 6.01218 8.72465 5.91726 8.72465H2.58773C0.869528 8.72465 0 9.62605 0 11.4455V15.9507C0 17.768 0.879137 18.6598 2.58773 18.6598ZM2.78366 16.5966C2.39647 16.5966 2.20991 16.4079 2.20991 16.0207V11.3733C2.20991 10.9786 2.39647 10.7899 2.78366 10.7899H6.44929C6.76663 10.7899 7.00733 10.725 7.27686 10.4789L11.9695 6.20744C12.0239 6.15095 12.0825 6.12001 12.1624 6.12001C12.2466 6.12001 12.319 6.18072 12.319 6.28829V21.0694C12.319 21.177 12.2466 21.2515 12.1624 21.2515C12.1017 21.2515 12.0335 21.2164 11.9695 21.1599L7.27686 16.9076C7.00733 16.669 6.76663 16.5966 6.44929 16.5966H2.78366Z" fill="currentColor"/>
+<path d="M18.513 18.8698C18.9968 19.1899 19.6488 19.0826 20.0074 18.5686C20.9519 17.3112 21.5121 15.5229 21.5121 13.6709C21.5121 11.8189 20.9519 10.0402 20.0074 8.76894C19.6488 8.25918 18.9968 8.14012 18.513 8.47199C17.9419 8.84652 17.8399 9.53581 18.2876 10.1914C18.9356 11.112 19.3012 12.3642 19.3012 13.6709C19.3012 14.9775 18.9239 16.2181 18.2876 17.1504C17.8495 17.8135 17.9419 18.4856 18.513 18.8698Z" fill="currentColor"/>
+<path d="M23.1843 22.0022C23.7107 22.3374 24.3595 22.2087 24.7223 21.6769C26.2497 19.5216 27.1329 16.6371 27.1329 13.6709C27.1329 10.7046 26.2593 7.80097 24.7223 5.66277C24.3595 5.13309 23.7107 5.00442 23.1843 5.33957C22.6305 5.68738 22.5518 6.37316 22.9591 6.98018C24.2069 8.79964 24.9262 11.1959 24.9262 13.6709C24.9262 16.1459 24.1877 18.5208 22.9591 20.3595C22.5635 20.9665 22.6305 21.6544 23.1843 22.0022Z" fill="currentColor"/>
+<path d="M27.8953 25.1731C28.4013 25.5124 29.0852 25.3636 29.448 24.8063C31.5157 21.7233 32.7503 17.8835 32.7503 13.6772C32.7503 9.46339 31.4868 5.64074 29.448 2.55028C29.0852 1.98122 28.4013 1.84411 27.8953 2.18348C27.3424 2.53879 27.2648 3.21824 27.6466 3.82105C29.4419 6.54893 30.5587 9.93448 30.5587 13.6772C30.5587 17.4103 29.4419 20.8172 27.6466 23.5355C27.2648 24.1383 27.3424 24.8156 27.8953 25.1731Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/volume-low.svg
+++ b/src/assets/icons/volume-low.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.58773 19.4704H8.91726C9.01218 19.4704 9.09749 19.4992 9.17531 19.5695L14.3234 24.1773C14.9227 24.7213 15.4017 24.9747 16.0073 24.9747C16.8724 24.9747 17.5172 24.3395 17.5172 23.4744V5.57171C17.5172 4.70664 16.8724 4.01172 15.9881 4.01172C15.3909 4.01172 14.977 4.28008 14.3234 4.86883L9.17531 9.4361C9.09538 9.5043 9.01218 9.53524 8.91726 9.53524H5.58773C3.86953 9.53524 3 10.4366 3 12.2561V16.7612C3 18.5786 3.87914 19.4704 5.58773 19.4704ZM5.78366 17.4072C5.39647 17.4072 5.20991 17.2185 5.20991 16.8313V12.1839C5.20991 11.7892 5.39647 11.6005 5.78366 11.6005H9.44929C9.76663 11.6005 10.0073 11.5356 10.2769 11.2895L14.9695 7.01803C15.0239 6.96154 15.0825 6.9306 15.1624 6.9306C15.2466 6.9306 15.319 6.99131 15.319 7.09888V21.88C15.319 21.9876 15.2466 22.0621 15.1624 22.0621C15.1017 22.0621 15.0335 22.027 14.9695 21.9705L10.2769 17.7182C10.0073 17.4796 9.76663 17.4072 9.44929 17.4072H5.78366Z" fill="currentColor"/>
+<path d="M21.5033 19.69C21.9871 20.0122 22.6391 19.9028 22.9977 19.3888C23.9401 18.1314 24.5024 16.3431 24.5024 14.4911C24.5024 12.6391 23.9401 10.8604 22.9977 9.58914C22.6391 9.07938 21.9871 8.96032 21.5033 9.29219C20.9322 9.66672 20.8302 10.356 21.2757 11.0116C21.9238 11.9322 22.2915 13.1845 22.2915 14.4911C22.2915 15.7977 21.9142 17.0383 21.2757 17.9706C20.8398 18.6358 20.9322 19.3058 21.5033 19.69Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/volume-mid.svg
+++ b/src/assets/icons/volume-mid.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.58773 19.4704H5.91726C6.01218 19.4704 6.09749 19.4992 6.17531 19.5695L11.3234 24.1773C11.9323 24.7213 12.4017 24.9747 13.0169 24.9747C13.8724 24.9747 14.5289 24.3395 14.5289 23.4744V5.57171C14.5289 4.70664 13.8724 4.01172 12.9977 4.01172C12.3909 4.01172 11.977 4.28008 11.3234 4.86883L6.17531 9.4361C6.09538 9.5043 6.01218 9.53524 5.91726 9.53524H2.58773C0.869528 9.53524 0 10.4366 0 12.2561V16.7612C0 18.5786 0.879137 19.4704 2.58773 19.4704ZM2.78366 17.4072C2.39647 17.4072 2.20991 17.2185 2.20991 16.8313V12.1839C2.20991 11.7892 2.39647 11.6005 2.78366 11.6005H6.44929C6.76663 11.6005 7.00733 11.5356 7.27686 11.2895L11.9695 7.01803C12.0239 6.96154 12.0825 6.9306 12.1624 6.9306C12.2466 6.9306 12.319 6.99131 12.319 7.09888V21.88C12.319 21.9876 12.2466 22.0621 12.1624 22.0621C12.1017 22.0621 12.0335 22.027 11.9695 21.9705L7.27686 17.7182C7.00733 17.4796 6.76663 17.4072 6.44929 17.4072H2.78366Z" fill="currentColor"/>
+<path d="M18.5131 19.6804C18.9969 20.0005 19.6489 19.8932 20.0075 19.3792C20.952 18.1218 21.5122 16.3335 21.5122 14.4815C21.5122 12.6295 20.952 10.8508 20.0075 9.57953C19.6489 9.06977 18.9969 8.95071 18.5131 9.28258C17.942 9.65711 17.84 10.3464 18.2877 11.0019C18.9357 11.9226 19.3013 13.1748 19.3013 14.4815C19.3013 15.7881 18.924 17.0287 18.2877 17.961C17.8496 18.6241 17.942 19.2962 18.5131 19.6804Z" fill="currentColor"/>
+<path d="M23.1864 22.8128C23.7128 23.1479 24.3615 23.0193 24.7264 22.4875C26.2517 20.3322 27.137 17.4477 27.137 14.4815C27.137 11.5152 26.2613 8.61156 24.7264 6.47336C24.3615 5.94368 23.7128 5.81501 23.1864 6.15016C22.6346 6.49797 22.5559 7.18375 22.9611 7.79077C24.2089 9.61023 24.9282 12.0065 24.9282 14.4815C24.9282 16.9565 24.1897 19.3314 22.9611 21.1701C22.5655 21.7771 22.6346 22.465 23.1864 22.8128Z" fill="currentColor"/>
+</svg>
--- a/src/assets/icons/volume-mute.svg
+++ b/src/assets/icons/volume-mute.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.94572 18.8783H11.2699C11.369 18.8783 11.4522 18.9113 11.5279 18.9774L16.678 23.5853C17.2965 24.1292 17.7564 24.3826 18.3716 24.3826C18.9193 24.3826 19.3724 24.1147 19.6525 23.6551L17.7489 21.7611L12.5697 17.0856C12.329 16.8683 12.1694 16.8151 11.8499 16.8151H8.14376C7.74486 16.8151 7.55829 16.6264 7.55829 16.2392V11.5609L5.86096 9.86566C5.53448 10.2765 5.34839 10.8756 5.34839 11.664V16.1692C5.34839 17.9865 6.22752 18.8783 7.94572 18.8783ZM19.8751 16.7612L19.8772 4.97964C19.8772 4.11456 19.2367 3.41964 18.3524 3.41964C17.7456 3.41964 17.335 3.688 16.6717 4.27675L11.7637 8.6359L13.2475 10.1251L17.3179 6.42595C17.3744 6.36946 17.4426 6.33853 17.5108 6.33853C17.597 6.33853 17.6673 6.39923 17.6673 6.50681V14.5492L19.8751 16.7612Z" fill="currentColor"/>
+<path d="M23.7703 25.5182C24.1345 25.8803 24.7394 25.8824 25.0898 25.5182C25.4519 25.1464 25.454 24.5628 25.0898 24.2007L4.60336 3.71426C4.23914 3.35004 3.63422 3.35004 3.27 3.71426C2.91 4.06676 2.91 4.68129 3.27 5.03379L23.7703 25.5182Z" fill="currentColor"/>
+</svg>
--- a/src/assets/images/folder.webp
+++ b/src/assets/images/folder.webp
--- a/src/assets/images/folderbg.svg
+++ b/src/assets/images/folderbg.svg
@@ -1,98 +0,0 @@
-<svg width="1600" height="548" viewBox="0 0 1600 548" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_7_2)" filter="url(#filter0_d_7_2)">
-<path d="M1241.06 372.097L1280.6 358.972C1285.2 357.445 1286.98 353.889 1285.29 348.789L1277.15 324.265C1275.46 319.165 1271.88 317.39 1266.73 319.099L1244.64 326.433C1242.92 327.002 1241.77 326.961 1240.07 326.308L1238.37 325.655C1236.22 324.834 1234.83 324.793 1232.33 325.623L1225.58 327.862C1221.1 329.35 1219.33 332.85 1221 337.878L1230.64 366.93C1232.34 372.054 1235.91 373.806 1241.06 372.097ZM1225.87 336.709C1225.15 334.54 1225.99 332.993 1228.11 332.289L1232.64 330.785C1234.33 330.224 1235.47 330.297 1237.19 330.942L1238.9 331.619C1241.01 332.4 1242.45 332.449 1244.95 331.619L1268 323.968C1270.19 323.24 1271.79 323.981 1272.55 326.269L1273.01 327.675L1227.85 342.667L1225.87 336.709ZM1239.8 367.251C1237.6 367.979 1236.01 367.239 1235.24 364.927L1229.24 346.838L1274.4 331.846L1280.41 349.959C1281.17 352.247 1280.34 353.794 1278.14 354.522L1239.8 367.251Z" fill="#F2F2F2"/>
-</g>
-<g filter="url(#filter1_d_7_2)">
-<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
-</g>
-<g filter="url(#filter2_d_7_2)">
-<path d="M920.83 363.356L946.539 355.986C951.704 354.505 953.602 351.009 952.114 345.819L945.838 323.925C944.876 320.57 943.998 319.149 941.289 317.627L924.921 308.37C922.305 306.899 920.501 306.894 917.483 307.759L905.848 311.095C900.682 312.575 898.785 316.071 900.273 321.261L910.715 357.687C912.21 362.902 915.665 364.837 920.83 363.356ZM919.86 358.514C917.519 359.185 916.007 358.286 915.364 356.041L905.087 320.195C904.45 317.974 905.249 316.386 907.591 315.715L917.874 312.767L921.666 325.995C922.656 329.447 924.847 330.622 928.275 329.639L941.286 325.909L947.3 346.886C947.943 349.131 947.113 350.701 944.772 351.372L919.86 358.514ZM927.519 325.362C926.53 325.646 925.995 325.329 925.711 324.34L922.237 312.222L939.444 321.944L927.519 325.362Z" fill="#F2F2F2"/>
-</g>
-<g filter="url(#filter3_d_7_2)">
-<path d="M784.959 386.222L825.55 376.844C830.272 375.753 832.379 372.38 831.169 367.144L825.353 341.967C824.143 336.731 820.745 334.63 815.46 335.851L792.779 341.091C791.017 341.498 789.875 341.35 788.245 340.541L786.615 339.732C784.55 338.714 783.17 338.543 780.601 339.137L773.677 340.736C769.077 341.799 766.983 345.118 768.176 350.281L775.066 380.106C776.282 385.366 779.674 387.443 784.959 386.222ZM773.141 349.572C772.626 347.345 773.603 345.882 775.78 345.379L780.429 344.305C782.166 343.904 783.29 344.082 784.944 344.886L786.58 345.719C788.61 346.694 790.044 346.878 792.613 346.284L816.273 340.818C818.524 340.298 820.043 341.184 820.585 343.533L820.919 344.976L774.554 355.688L773.141 349.572ZM784.152 381.28C781.901 381.8 780.382 380.914 779.834 378.541L775.543 359.97L821.908 349.258L826.204 367.853C826.747 370.202 825.77 371.665 823.52 372.185L784.152 381.28Z" fill="#F2F2F2"/>
-</g>
-<g clip-path="url(#clip1_7_2)" filter="url(#filter4_d_7_2)">
-<path d="M1175.56 503.894L1196.91 519.989C1201.21 523.223 1205.14 522.634 1208.39 518.322L1222.1 500.132C1224.2 497.345 1224.8 495.789 1224.39 492.709L1221.93 474.066C1221.53 471.092 1220.45 469.648 1217.94 467.759L1208.27 460.475C1203.98 457.241 1200.05 457.829 1196.8 462.141L1174 492.404C1170.73 496.736 1171.26 500.66 1175.56 503.894ZM1178.84 500.205C1176.89 498.739 1176.7 496.991 1178.11 495.126L1200.55 465.344C1201.94 463.499 1203.69 463.181 1205.63 464.647L1214.18 471.085L1205.9 482.075C1203.73 484.943 1204.12 487.4 1206.96 489.546L1217.77 497.692L1204.64 515.119C1203.23 516.985 1201.48 517.267 1199.54 515.801L1178.84 500.205ZM1209.92 486.369C1209.1 485.749 1209.03 485.131 1209.65 484.309L1217.24 474.241L1219.83 493.834L1209.92 486.369Z" fill="#F2F2F2"/>
-</g>
-<g filter="url(#filter5_d_7_2)">
-<path d="M1139.29 314.117C1132.34 317.228 1125.57 322.685 1121.15 328.736C1120.32 329.881 1120.52 331.249 1121.6 332.139C1120.46 334.001 1120.66 336.223 1122.27 338.113C1124.35 340.483 1127.29 340.653 1129.65 338.606L1139.05 330.428C1141.39 328.392 1141.58 325.5 1139.53 323.086C1138.67 322.072 1137.62 321.465 1136.52 321.272C1138.09 320.294 1139.7 319.406 1141.33 318.677C1153.86 313.061 1165.63 316.977 1170.78 328.458C1175.92 339.939 1171.02 351.354 1158.49 356.97C1156.86 357.7 1155.14 358.335 1153.35 358.832C1153.92 357.889 1154.16 356.708 1153.99 355.352C1153.56 352.243 1151.28 350.46 1148.2 350.847L1135.84 352.424C1132.71 352.808 1130.91 355.126 1131.29 358.233C1131.63 360.721 1133.16 362.348 1135.28 362.719C1135.25 364.134 1136.14 365.195 1137.55 365.333C1145.01 366.065 1153.6 364.665 1160.54 361.554C1175.83 354.705 1181.74 340.691 1175.34 326.415C1168.95 312.161 1154.57 307.268 1139.29 314.117Z" fill="#333333" fill-opacity="0.01"/>
-</g>
-<g filter="url(#filter6_d_7_2)">
-<path d="M1021.88 49.7976L1032.05 74.5314C1034.09 79.5014 1037.78 81 1042.77 78.9465L1063.84 70.2835C1067.06 68.9559 1068.38 67.9266 1069.59 65.0655L1076.98 47.7724C1078.15 45.0097 1077.96 43.2162 1076.76 40.3132L1072.16 29.1191C1070.12 24.1491 1066.43 22.6505 1061.44 24.704L1026.39 39.1169C1021.38 41.18 1019.83 44.8276 1021.88 49.7976ZM1026.58 48.2971C1025.66 46.0444 1026.38 44.4425 1028.54 43.5542L1063.03 29.3706C1065.17 28.4919 1066.83 29.11 1067.76 31.3627L1071.83 41.2563L1059.1 46.4904C1055.78 47.8562 1054.86 50.1642 1056.21 53.462L1061.36 65.9799L1041.18 74.2799C1039.02 75.1682 1037.37 74.5173 1036.44 72.2646L1026.58 48.2971ZM1060.38 52.2372C1059.99 51.285 1060.24 50.7183 1061.2 50.3267L1072.85 45.532L1065.1 63.71L1060.38 52.2372Z" fill="#F2F2F2"/>
-</g>
-<defs>
-<filter id="filter0_d_7_2" x="1199" y="294" width="109.13" height="109.13" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter1_d_7_2" x="599" y="285" width="376.948" height="240.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-274" dy="138"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter2_d_7_2" x="873" y="285" width="106.948" height="106.948" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter3_d_7_2" x="748" y="312" width="103.955" height="103.955" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter4_d_7_2" x="1142" y="435" width="120.036" height="120.036" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="4"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter5_d_7_2" x="1033" y="285" width="169.719" height="165.719" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="-60" dy="56"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<filter id="filter6_d_7_2" x="999" y="0" width="158.416" height="317.416" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dx="50" dy="209"/>
-<feGaussianBlur stdDeviation="2"/>
-<feComposite in2="hardAlpha" operator="out"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
-<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_7_2"/>
-<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_7_2" result="shape"/>
-</filter>
-<clipPath id="clip0_7_2">
-<rect width="80" height="80" fill="white" transform="translate(1203 319.204) rotate(-18.3641)"/>
-</clipPath>
-<clipPath id="clip1_7_2">
-<rect width="80" height="80" fill="white" transform="translate(1194.15 435) rotate(37)"/>
-</clipPath>
-</defs>
-</svg>
--- a/src/assets/images/folderbg.webp
+++ b/src/assets/images/folderbg.webp
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -1,4 +0,0 @@
-<svg width="189" height="36" viewBox="0 0 189 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.6328 35L8.625 10.3203H8.41406C8.74219 14.5234 8.90625 17.7891 8.90625 20.1172V35H0.703125V0.734375H13.0312L20.1797 25.0625H20.3672L27.375 0.734375H39.7266V35H31.2188V19.9766C31.2188 19.1953 31.2266 18.3281 31.2422 17.375C31.2734 16.4219 31.3828 14.0859 31.5703 10.3672H31.3594L24.4453 35H15.6328ZM76.2422 0.734375V21.3594C76.2422 25.8438 74.9688 29.3203 72.4219 31.7891C69.8906 34.2422 66.2344 35.4688 61.4531 35.4688C56.7812 35.4688 53.1875 34.2734 50.6719 31.8828C48.1719 29.4922 46.9219 26.0547 46.9219 21.5703V0.734375H56.2266V20.8438C56.2266 23.2656 56.6797 25.0234 57.5859 26.1172C58.4922 27.2109 59.8281 27.7578 61.5938 27.7578C63.4844 27.7578 64.8516 27.2188 65.6953 26.1406C66.5547 25.0469 66.9844 23.2656 66.9844 20.7969V0.734375H76.2422ZM105.844 24.5938C105.844 26.7188 105.305 28.6094 104.227 30.2656C103.148 31.9062 101.594 33.1875 99.5625 34.1094C97.5312 35.0156 95.1484 35.4688 92.4141 35.4688C90.1328 35.4688 88.2188 35.3125 86.6719 35C85.125 34.6719 83.5156 34.1094 81.8438 33.3125V25.0625C83.6094 25.9688 85.4453 26.6797 87.3516 27.1953C89.2578 27.6953 91.0078 27.9453 92.6016 27.9453C93.9766 27.9453 94.9844 27.7109 95.625 27.2422C96.2656 26.7578 96.5859 26.1406 96.5859 25.3906C96.5859 24.9219 96.4531 24.5156 96.1875 24.1719C95.9375 23.8125 95.5234 23.4531 94.9453 23.0938C94.3828 22.7344 92.8672 22 90.3984 20.8906C88.1641 19.875 86.4844 18.8906 85.3594 17.9375C84.25 16.9844 83.4219 15.8906 82.875 14.6562C82.3438 13.4219 82.0781 11.9609 82.0781 10.2734C82.0781 7.11719 83.2266 4.65625 85.5234 2.89062C87.8203 1.125 90.9766 0.242188 94.9922 0.242188C98.5391 0.242188 102.156 1.0625 105.844 2.70312L103.008 9.85156C99.8047 8.38281 97.0391 7.64844 94.7109 7.64844C93.5078 7.64844 92.6328 7.85938 92.0859 8.28125C91.5391 8.70312 91.2656 9.22656 91.2656 9.85156C91.2656 10.5234 91.6094 11.125 92.2969 11.6562C93 12.1875 94.8906 13.1562 97.9688 14.5625C100.922 15.8906 102.969 17.3203 104.109 18.8516C105.266 20.3672 105.844 22.2812 105.844 24.5938ZM111.141 35V0.734375H120.445V35H111.141ZM143.133 7.83594C140.93 7.83594 139.211 8.74219 137.977 10.5547C136.742 12.3516 136.125 14.8359 136.125 18.0078C136.125 24.6016 138.633 27.8984 143.648 27.8984C145.164 27.8984 146.633 27.6875 148.055 27.2656C149.477 26.8438 150.906 26.3359 152.344 25.7422V33.5703C149.484 34.8359 146.25 35.4688 142.641 35.4688C137.469 35.4688 133.5 33.9688 130.734 30.9688C127.984 27.9688 126.609 23.6328 126.609 17.9609C126.609 14.4141 127.273 11.2969 128.602 8.60938C129.945 5.92188 131.867 3.85938 134.367 2.42188C136.883 0.96875 139.836 0.242188 143.227 0.242188C146.93 0.242188 150.469 1.04688 153.844 2.65625L151.008 9.94531C149.742 9.35156 148.477 8.85156 147.211 8.44531C145.945 8.03906 144.586 7.83594 143.133 7.83594Z" fill="white"/>
-<path d="M160.289 14.4453C159.008 12.5859 158.367 9.9375 158.367 6.5V3.10156H167.602L185.039 22.2031C186.023 23.2969 186.68 24.2188 187.008 24.9688C187.336 25.7188 187.578 26.4062 187.734 27.0312C188.078 28.2812 188.25 29.8203 188.25 31.6484V35H179.273L160.359 14.4453H160.289ZM178.102 13.1094C178.102 8.8125 178.766 6.01562 180.094 4.71875C180.797 4.03125 181.711 3.59375 182.836 3.40625C183.977 3.20312 185.359 3.10156 186.984 3.10156H188.25V6.80469C188.25 10.1328 187.375 12.3594 185.625 13.4844C184.375 14.2969 182.273 14.7031 179.32 14.7031H178.102V13.1094ZM158.367 31.3438C158.367 28.0156 159.242 25.7812 160.992 24.6406C162.242 23.8438 164.344 23.4453 167.297 23.4453H168.516V25.0391C168.516 29.3828 167.852 32.1719 166.523 33.4062C165.617 34.25 164.297 34.75 162.562 34.9062C161.688 34.9688 160.711 35 159.633 35H158.367V31.3438Z" fill="#4AD168"/>
-</svg>
--- a/src/assets/scss/BottomBar/BottomBar.scss
+++ b/src/assets/scss/BottomBar/BottomBar.scss
@@ -6,7 +6,7 @@
    height: 100%;
    padding-right: $small;

-    @include phone-only {
+    @include largePhones {
      grid-template-columns: 1fr 9.2rem;
    }

--- a/src/assets/scss/Global/album-grid.scss
+++ b/src/assets/scss/Global/album-grid.scss
@@ -5,7 +5,6 @@
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    padding: 0 1rem;
-    padding-bottom: 4rem;
    overflow: auto;
    max-height: 100%;
    gap: 2rem 1rem;
--- a/src/assets/scss/Global/app-grid.scss
+++ b/src/assets/scss/Global/app-grid.scss
@@ -14,14 +14,24 @@ $g-border: solid 1px $gray5;
  border-top: none;
  border-bottom: none;
  margin: 0 auto;
+
+  @include for-desktop-down {
+    grid-template-columns: min-content 1fr 24rem;
+  }
 }

 #acontent {
  width: 100%;
  grid-area: content;
-  padding-right: calc($medium);
-
  overflow: hidden;
+  margin-right: $margright;
+}
+
+.content-page {
+  scrollbar-gutter: stable;
+  padding-left: $padleft;
+  padding-right: $padright;
+  padding-bottom: $padbottom;
 }

 .vue-recycle-scroller__item-wrapper {
@@ -29,26 +39,23 @@ $g-border: solid 1px $gray5;
 }

 .vue-recycle-scroller {
-  padding-left: 1.25rem;
  scrollbar-gutter: stable;
+  padding-left: $padleft;
 }

 .r-sidebar {
  grid-area: r-sidebar;
  border-left: $g-border;
+
+  .vue-recycle-scroller {
+    padding-left: 0;
+  }
 }

 .topnav {
  grid-area: nav;
-  margin: 1rem 0;
-}
-
-.l-sidebar {
-  width: 15rem;
-  grid-area: l-sidebar;
-  display: grid;
-  grid-template-rows: 1fr max-content;
-  border-right: $g-border;
+  padding: 1rem $padleft;
+  padding-right: $padright;
 }

 .b-bar {
@@ -56,13 +63,6 @@ $g-border: solid 1px $gray5;
  border-top: $g-border;
 }

-.content-page {
-  margin-left: 1.25rem;
-  margin-right: -$medium;
-  padding-right: $medium;
-  scrollbar-gutter: stable;
-}
-
 // ====== MODIFIERS =======

 #app-grid.extendWidth {
@@ -81,13 +81,16 @@ $g-border: solid 1px $gray5;

  #acontent {
    margin-right: 0 !important;
-    padding-right: $medium !important;
+    // padding-right: $medium !important;
  }

-  .topnav {
-    //reduce width to match #acontent
-    width: calc(100% - 1rem);
-    padding-right: 0;
+  @include allPhones {
+    grid-template-columns: 1fr;
+    grid-template-rows: max-content 1fr 9.5rem;
+    grid-template-areas:
+      "nav"
+      "content"
+      "bottombar";
  }
 }

@@ -97,19 +100,18 @@ $g-border: solid 1px $gray5;
 }

 .v-scroll-page {
-  width: calc(100% + $medium) !important;
-
  .scroller {
+    padding-right: $padright;
    height: 100%;
    width: 100%;
-    padding-right: 1.25rem;
    padding-bottom: $content-padding-bottom;
+    padding-bottom: $padbottom;
  }
 }

 .isSmall {
  .songlist-item {
-    grid-template-columns: 1.75rem 2fr 2.5rem 2.5rem;
+    grid-template-columns: 2fr 5.5rem !important;
  }

  .song-artists,
@@ -128,7 +130,7 @@ $g-border: solid 1px $gray5;
 .isMedium {
  // hide album column
  .songlist-item {
-    grid-template-columns: 1.75rem 1.5fr 1fr 2.5rem 2.5rem;
+    grid-template-columns: 1.75rem 1.5fr 1fr 5.5rem;
  }

  .song-album {
--- a/src/assets/scss/Global/basic.scss
+++ b/src/assets/scss/Global/basic.scss
@@ -1,5 +1,8 @@
-// TEXT
+input[type="search"]::-webkit-search-cancel-button {
+  display: none;
+}

+// TEXT
 .t-center {
  text-align: center;
 }
@@ -54,12 +57,12 @@ a {
  border-radius: $medium;
 }

-.circular {
-  border-radius: 10rem;
+.rounded-lg {
+  border-radius: 1.25rem;
 }

-.border {
-  border: 1px solid $gray3;
+.circular {
+  border-radius: 10rem;
 }

 .bg-primary {
@@ -80,7 +83,6 @@ button {
  padding: 0 $small;

  background-color: $gray4;
-  border: solid 1px $gray3;
  font-weight: 700;
  cursor: pointer;

@@ -94,15 +96,17 @@ button {
    }
  }

+  &:focus {
+    outline: none;
+  }
+
  &:hover {
    background-color: $darkestblue;
-    border: solid 1px $darkblue;
  }
 }

 .btn-active {
  background-color: $darkestblue;
-  border: solid 1px $darkblue;
 }

 .btn-disabled {
@@ -136,7 +140,6 @@ button {
  opacity: 0.5;
 }

-// NO THIS, NO THAT (OVERRIDES)
 .no-border {
  border: none;
 }
@@ -166,3 +169,75 @@ button {
  position: absolute;
  left: -20rem;
 }
+
+.spinner {
+  border: solid 3px rgb(0, 0, 0);
+  border-top: solid 3px transparent;
+  border-left: solid 3px transparent;
+  border-radius: 50%;
+  width: 1.25rem;
+  height: 1.25rem;
+  animation: spin 0.45s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.card-list-scroll-x {
+  overflow: hidden;
+
+  h3 {
+    display: grid;
+    grid-template-columns: 1fr max-content;
+    align-items: baseline;
+    padding: 0 $medium;
+    margin-bottom: $medium;
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(10.1rem, 1fr));
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    flex-direction: row;
+    padding-bottom: 2rem;
+
+    @include hideScrollbars;
+  }
+
+  .album-card {
+    &:hover {
+      background-color: $gray;
+    }
+  }
+}
+
+.rhelp {
+  text-transform: uppercase;
+  font-size: 11px;
+  color: $purple;
+  font-weight: bold;
+  margin: $smaller 0;
+
+  &.album {
+    color: $orange;
+  }
+
+  &.track {
+    color: $pink;
+  }
+
+  &.folder {
+    color: $teal;
+  }
+
+  &.playlist {
+    color: $green;
+  }
+}
--- a/src/assets/scss/Global/index.scss
+++ b/src/assets/scss/Global/index.scss
@@ -16,6 +16,9 @@ html {

  & > * {
    overflow: visible !important;
+    -webkit-tap-highlight-color: transparent; /* Webkit browsers like Safari */
+    tap-highlight-color: transparent; /* Some Android browsers */
+    outline: none;
  }
 }

--- a/src/assets/scss/Global/inputs.scss
+++ b/src/assets/scss/Global/inputs.scss
@@ -1,7 +1,6 @@
 input[type="number"] {
  width: 40px;
  padding: 4px 5px;
-  border: 1px solid #bbb;
  border-radius: 3px;
 }

--- a/src/assets/scss/Global/search-tabheaders.scss
+++ b/src/assets/scss/Global/search-tabheaders.scss
@@ -1,33 +1,20 @@
 .tabheaders {
-  display: grid;
-  grid-template-columns: repeat(5, max-content);
-  justify-content: space-around;
-  margin: 1rem;
-  width: max-content;
-  background-color: $gray4;
-  height: 2.25rem;
-
-  & > * {
-    border-left: solid 1px $gray3;
-  }
+  display: flex;
+  align-items: center;
+  gap: $medium;

  .tab {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
+    height: 2rem;
+    text-transform: capitalize;
+    background-color: $gray5;
+    border: none;

    transition: all 0.3s ease;
-    padding: 0 $small;
-
-    &:first-child {
-      border-left: solid 1px transparent;
-    }
+    padding: 0 $medium;
  }

  .activetab {
-    background-color: $darkblue;
-    transition: all 0.3s ease;
-    border-left: solid 1px transparent;
+    background-color: white;
+    color: $gray;
  }
 }
--- a/src/assets/scss/ProgressBar.scss
+++ b/src/assets/scss/ProgressBar.scss
@@ -1,11 +1,13 @@
 input[type="range"] {
  -webkit-appearance: none;
+  appearance: none;
  margin-right: 15px;
  width: calc(100% - 2px);
  height: 0.3rem;
  border-radius: 5px;
-  background: $gray4 linear-gradient(37deg, $pink, $pink) no-repeat;
+  background: $gray4 linear-gradient(37deg, white, white) no-repeat;
  background-size: 100% 100%;
+  cursor: pointer;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
@@ -13,25 +15,27 @@ input[type="range"] {
    height: 0;
    width: 0.8rem;
    border-radius: 50%;
-    background: $pink;
+    background: white;
  }

  &::-moz-range-thumb {
    -webkit-appearance: none;
+    appearance: none;

    height: 0;
    border-radius: 50%;
-    background: $pink;
+    background: white;
    border: none;
  }

  &::-ms-thumb {
    -webkit-appearance: none;
+    appearance: none;

    height: 0;
    width: 0.8rem;
    border-radius: 50%;
-    background: $pink;
+    background: white;
    border: none;
  }
 }
@@ -58,6 +62,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 }

 input[type="range"]::-moz-range-track {
+  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
@@ -65,6 +70,7 @@ input[type="range"]::-moz-range-track {
 }

 input[type="range"]::-ms-track {
+  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
--- a/src/assets/scss/_mixins.scss
+++ b/src/assets/scss/_mixins.scss
@@ -5,8 +5,27 @@
 }

 // media query mixins
-@mixin phone-only {
-  @media (max-width: 599px) {
+@mixin smallPhone {
+  @media (max-width: 550px) {
+    @content;
+  }
+}
+
+@mixin iphoneSE {
+  @media (max-width: 386px) {
+    @content;
+  }
+}
+
+@mixin allPhones {
+  @media (max-width: 900px) {
+    @content;
+  }
+}
+
+@mixin largePhones {
+  // 550px <= width < 900px
+  @media (min-width: 550px) {
    @content;
  }
 }
@@ -18,7 +37,7 @@
 }

@mixin tablet-portrait {
-  @media (max-width: 810) {
+  @media (max-width: 810px) {
    @content;
  }
 }
@@ -34,3 +53,13 @@
    @content;
  }
 }
+
+// hide scrollbar
+@mixin hideScrollbars {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+
+  &::-webkit-scrollbar {
+    display: none !important;
+  }
+}
--- a/src/assets/scss/_variables.scss
+++ b/src/assets/scss/_variables.scss
@@ -1,6 +1,5 @@
 // colors

-$separator: #ffffff2f;
 $highlight-blue: #006eff;
 $darkestblue: #234ece;
 $bbb: #161616; //bottom controls background
@@ -27,14 +26,14 @@ $gray2: rgb(99, 99, 102);
 $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
-$body: rgba(0, 0, 0, 0.95);
+$body: #111111;

 $red: #ff453a;
 $blue: #0a84ff;
 $darkblue: #055ee2;
-$green: rgb(20, 160, 55);
+$green: rgb(94, 247, 132);
 $yellow: rgb(255, 214, 10);
-$orange: rgb(255, 159, 10);
+$orange: #ff9f0a;
 $pink: rgb(255, 55, 95);
 $purple: #bf5af2;
 $brown: rgb(172, 142, 104);
@@ -46,7 +45,7 @@ $accent: $gray1;
 $secondary: $gray5;
 $danger: $red;
 $track-hover: $gray4;
-$context: black;
+$context: $gray5;
 $playlist-card-bg: $gray4;

 // SVG COLORS
@@ -54,3 +53,18 @@ $default: $accent;
 $side-nav-svg: $red;

 $overshoot: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+$separator: $gray4;
+
+$maxwidth: 1372px;
+$maxpadleft: 5rem;
+$maxpadright: calc(100% - $maxwidth);
+
+$padbottom: 4rem;
+$padleft: clamp(2rem, $maxpadright, $maxpadleft);
+$padright: clamp(
+  2rem,
+  max($maxpadright, 5rem),
+  calc($maxpadright + $maxpadleft)
+);
+$margright: calc(0rem - $padright);
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -3,8 +3,7 @@
 "./variables",
 "./ProgressBar.scss",
 "./BottomBar/BottomBar.scss",
-"./Global",
-"./moz.scss"
+"./Global"
 ;


--- a/src/assets/scss/moz.scss
+++ b/src/assets/scss/moz.scss
@@ -1,40 +0,0 @@
-// Styles that only apply to our dear Firefox
-
-@-moz-document url-prefix() {
-  #acontent {
-    margin-right: calc(-1rem + 1px);
-    padding-right: 1rem;
-  }
-
-  // applies to playlist list page
-  .content-page {
-    margin-right: calc(0rem - ($medium + 4px));
-  }
-
-  // virtual scroller pages: folder, playlist, album
-  .header-list-layout {
-    margin-right: calc(0rem - ($medium + 4px)) !important;
-
-    .scrollable {
-      padding-right: calc(1rem - 3px) !important;
-    }
-  }
-
-  .v-scroll-page {
-    width: calc(100% + 1rem) !important;
-
-    .scroller {
-      height: 100%;
-      width: 100%;
-      // padding-right: 1.25rem !important;
-    }
-  }
-
-  #app-grid.noSidebar > #acontent {
-    padding-right: 1rem !important;
-  }
-
-  .search-view {
-    margin-right: -1rem !important;
-  }
-}
--- a/src/components/AlbumView/AlbumBio.vue
+++ b/src/components/AlbumView/AlbumBio.vue
@@ -1,113 +0,0 @@
-<template>
-  <div class="al-bio rounded">
-    <div class="separator" id="av-sep"></div>
-    <div class="grid albumbio">
-      <div class="left rounded">
-        <img
-          class="rect rounded"
-          :src="paths.images.thumb + images.album"
-          alt=""
-          loading="lazy"
-        />
-        <div class="circle"></div>
-        <img
-          class="circle"
-          :src="paths.images.artist + images.artist"
-          alt=""
-          loading="lazy"
-        />
-      </div>
-      <div class="bio rounded bg-primary" v-html="bio" v-if="bio"></div>
-      <div class="bio rounded bg-primary" v-else>No bio found</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { paths } from "@/config";
-
-defineProps<{
-  bio: string | null;
-  images: {
-    artist: string;
-    album: string;
-  };
-}>();
-</script>
-
-<style lang="scss">
-.al-bio {
-  padding: $small;
-
-  .albumbio {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: $small;
-    min-height: 15rem;
-
-    @include for-desktop-down {
-      grid-template-columns: 1fr !important;
-
-      .left {
-        display: none;
-      }
-    }
-  }
-
-  .left {
-    position: relative;
-    height: 100%;
-    width: 100%;
-    margin-right: $small;
-    overflow: hidden;
-    border: solid 1px $gray5;
-    background-image: linear-gradient(37deg, $gray5 20%, $gray4);
-
-    // @include for-desktop-down {
-    //   display: none;
-    // }
-
-    $rectpos: calc(50% - 5rem);
-
-    .rect {
-      width: 10rem;
-      height: 10rem;
-      position: absolute;
-      bottom: 0rem;
-      left: $rectpos;
-      transform: rotate(15deg) translate(-1rem, 1rem);
-      z-index: 1;
-      transition: all 0.5s ease-in-out;
-
-      &:hover {
-        transform: rotate(0deg) translate(-1rem, 0) scale(1.1);
-        transition: all 0.5s ease-in-out;
-      }
-    }
-
-    .circle {
-      position: absolute;
-      width: 7rem;
-      height: 7rem;
-      bottom: 0;
-      left: calc($rectpos + 7rem);
-      border-radius: 50%;
-      box-shadow: 0 0 2rem rgb(0, 0, 0);
-      transition: all 0.25s ease-in-out;
-
-      &:hover {
-        transform: scale(1.5);
-      }
-    }
-  }
-  .bio {
-    border: solid 1px $gray5;
-    padding: $small;
-    line-height: 1.5rem;
-
-    &::after {
-      content: " ...";
-    }
-  }
-}
-</style>
--- a/src/components/AlbumView/AlbumDiscBar.vue
+++ b/src/components/AlbumView/AlbumDiscBar.vue
@@ -1,7 +1,7 @@
 <template>
  <div
-    class="album_disc_header no-select"
    v-if="album_disc.is_album_disc_number"
+    class="album_disc_header no-select"
  >
    <div class="disc_number">Disc {{ album_disc.album_page_disc_number }}</div>
    <div></div>
--- a/src/components/AlbumView/ArtistAlbums.vue
+++ b/src/components/AlbumView/ArtistAlbums.vue
@@ -1,73 +0,0 @@
-<template>
-  <div class="artist-albums">
-    <h3>
-      <span>{{ title }} </span>
-      <SeeAll
-        v-if="maxAbumCards - 1 <= albums.length"
-        :route="route"
-        @click="
-          !favorites ? useArtistDiscographyStore().setPage(albumType) : null
-        "
-      />
-    </h3>
-    <div class="cards">
-      <AlbumCard
-        v-for="a in artist_page
-          ? albums
-              .slice(0, maxAbumCards)
-              .sort((a, b) => parseInt(b.date) - parseInt(a.date))
-          : albums.slice(0, maxAbumCards)"
-        :album="a"
-        :show_date="show_date"
-        :artist_page="artist_page"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Album } from "@/interfaces";
-import { maxAbumCards } from "@/stores/content-width";
-import { discographyAlbumTypes } from "@/composables/enums";
-import useArtistDiscographyStore from "@/stores/pages/artistDiscog";
-
-import AlbumCard from "../shared/AlbumCard.vue";
-import SeeAll from "../shared/SeeAll.vue";
-
-defineProps<{
-  title: string;
-  albums: Album[];
-  albumType?: discographyAlbumTypes;
-  favorites?: boolean;
-  route: string;
-  show_date?: boolean;
-  artist_page?: boolean;
-}>();
-</script>
-
-<style lang="scss">
-.artist-albums {
-  overflow: hidden;
-  max-height: 18rem;
-
-  h3 {
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    align-items: baseline;
-    padding: 0 $medium;
-    margin-bottom: $small;
-  }
-
-  .cards {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-    gap: 5rem 0;
-  }
-
-  .album-card {
-    &:hover {
-      background-color: $gray;
-    }
-  }
-}
-</style>
--- a/src/components/AlbumView/GenreBanner.vue
+++ b/src/components/AlbumView/GenreBanner.vue
@@ -2,73 +2,95 @@
  <div
    class="genres-banner"
    :style="{
-      color: album.info.colors ? getTextColor(album.info.colors[0]) : '',
+      color: color ? getShift(color, [100, -100]) : '',
    }"
  >
-    <!-- :class="{
-      nocontrast: album.info.colors ? isLight(album.info.colors[0]) : false,
-    }" -->
-    <div class="rounded pad-sm">
-      {{ album.info.genres.length ? "Genres" : "No genres" }}
-    </div>
-    <div
-      v-for="genre in album.info.genres"
-      class="rounded pad-sm"
-      :style="{
-        backgroundColor: album.info.colors
-          ? getBackgroundColor(album.info.colors[0])
-          : '',
-      }"
-    >
-      {{ genre }}
+    <div class="scrollable">
+      <div class="rounded pad-sm genre-pill">
+        {{ genres.length ? "Genres" : "No genres" }}
+      </div>
+      <div
+        v-for="genre in genres"
+        :key="genre"
+        class="genre-pill rounded pad-sm"
+        :style="{
+          backgroundColor: color,
+        }"
+      >
+        {{ genre }}
+      </div>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 import useAlbumStore from "@/stores/pages/album";
-import { isLight } from "@/composables/colors/album";
+import useArtistStore from "@/stores/pages/artist";

-import { getTextColor, getBackgroundColor } from "@/utils/colortools/shift";
+import { getShift } from "@/utils/colortools/shift";

 const album = useAlbumStore();
+const store = useArtistStore();

-onMounted(async () => {
-  // onMounted, fetch data to be used in the component below this one.
-  const album = useAlbumStore();
-  await album.fetchArtistAlbums();
+const props = defineProps<{
+  source: string;
+}>();
+
+const genres = computed(() => {
+  return props.source === "album" ? album.info.genres : store.genres;
 });
+
+const color = computed(() => {
+  return props.source === "album" ? album.colors.btn : "";
+});
+
+const hookAction = async () => {
+  if (props.source === "album") {
+    // fetch data to be used in the component below this one.
+    await album.fetchArtistAlbums();
+    return;
+  }
+};
+
+onMounted(hookAction);
 </script>

 <style lang="scss">
 .genres-banner {
-  display: flex;
-  gap: 1rem;
  margin-top: 2rem;
+  padding-bottom: 2rem;
  font-size: 0.9rem;
  padding-left: $medium;
  text-transform: capitalize;
  user-select: none;
+  overflow: scroll;
+  @include hideScrollbars;

-  div {
+  .scrollable {
+    display: flex;
+    flex-wrap: nowrap;
+    width: max-content;
+    gap: 1rem;
+    padding-right: $medium;
+    overflow-x: hidden;
+  }
+
+  .genre-pill {
    background-color: $gray5;
    min-width: 4rem;
    text-align: center;
-    outline: solid 1px $gray;
    padding: $small 1rem;
    font-weight: 700;

    &:first-child {
      background-color: white;
      color: black;
-      outline-color: white;
      pointer-events: none;
    }

    &:hover {
      background-color: $pink !important;
-      outline-color: $pink;
      color: $white;
    }
  }
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -1,309 +0,0 @@
-<template>
-  <div
-    class="album-header-ambient rounded"
-    style="height: 100%; width: 100%"
-    :style="{
-      boxShadow: album.colors[0]
-        ? `0 .5rem 2rem ${album.colors[0]}`
-        : '0 .5rem 2rem black',
-    }"
-  ></div>
-  <div
-    class="a-header rounded"
-    ref="albumheaderthing"
-    :style="{
-      backgroundColor: album.colors[0]
-        ? getBackgroundColor(album.colors[0])
-        : '',
-      height: `${heightLarge ? '24rem' : '18rem'}`,
-    }"
-  >
-    <div
-      class="big-img no-scroll"
-      :class="`${albumHeaderSmall ? 'imgSmall' : ''} shadow-lg rounded-sm`"
-    >
-      <img :src="imguri.thumb.large + album.image" class="rounded-sm" />
-    </div>
-    <div
-      class="info"
-      :style="{ color: album.colors[0] ? getTextColor(album.colors[0]) : '' }"
-    >
-      <!-- :class="{ nocontrast: album.colors ? isLight(album.colors[0]) : false }" -->
-      <div class="album-info">
-        <div class="top">
-          <div v-auto-animate class="h">
-            <span v-if="album.is_soundtrack">Soundtrack</span>
-            <span v-else-if="album.is_live">Concert</span>
-            <span v-else-if="album.is_compilation">Compilation</span>
-            <span v-else-if="album.is_EP">EP</span>
-            <span v-else-if="album.is_single">Single</span>
-            <span v-else>Album</span>
-          </div>
-          <div class="title ellip2" v-tooltip>
-            {{ album.title }}
-          </div>
-        </div>
-        <div class="bottom">
-          <div class="stats ellip">
-            <div class="border rounded-sm pad-sm">
-              <ArtistName
-                :artists="album.albumartists"
-                :albumartists="''"
-                :small="true"
-              />&nbsp;• {{ album.date }} • {{ album.count }}
-              {{ album.count === 1 ? "Track" : "Tracks" }} •
-              {{ formatSeconds(album.duration, true) }}
-            </div>
-          </div>
-          <div class="buttons">
-            <PlayBtnRect :source="playSources.album" :store="useAlbumStore" />
-            <HeartSvg :state="album.is_favorite" @handleFav="handleFav" />
-          </div>
-        </div>
-      </div>
-      <Motion
-        class="art"
-        v-if="!isMedium && !isSmall"
-        :initial="{ opacity: 0, x: 10 }"
-        :animate="{
-          opacity: 1,
-          x: 0,
-          transition: {
-            delay: 0.1,
-          },
-        }"
-      >
-        <RouterLink
-          v-for="a in album.albumartists"
-          :to="{
-            name: Routes.artist,
-            params: { hash: a.artisthash },
-          }"
-        >
-          <img
-            :src="imguri.artist.small + a.image"
-            class="circular"
-            loading="lazy"
-            :title="a.name"
-            :style="{
-              border: `solid 4px ${
-                album.colors[0] ? getBackgroundColor(album.colors[0]) : ''
-              }`,
-            }"
-          />
-        </RouterLink>
-      </Motion>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Routes } from "@/router";
-import { storeToRefs } from "pinia";
-import { ref } from "vue";
-
-import { paths } from "@/config";
-import useNavStore from "@/stores/nav";
-import useAlbumStore from "@/stores/pages/album";
-import {
-  albumHeaderSmall,
-  heightLarge,
-  isMedium,
-  isSmall,
-} from "@/stores/content-width";
-
-import { getBackgroundColor, getTextColor } from "@/utils/colortools/shift";
-
-import { favType, playSources } from "@/composables/enums";
-import { formatSeconds, useVisibility } from "@/utils";
-
-import ArtistName from "@/components/shared/ArtistName.vue";
-import favoriteHandler from "@/composables/favoriteHandler";
-import HeartSvg from "../shared/HeartSvg.vue";
-import PlayBtnRect from "../shared/PlayBtnRect.vue";
-
-const albumheaderthing = ref<any>(null);
-const imguri = paths.images;
-const nav = useNavStore();
-const store = useAlbumStore();
-
-const { info: album } = storeToRefs(store);
-
-defineEmits<{
-  (event: "playThis"): void;
-}>();
-
-/**
- * Calls the `toggleShowPlay` method which toggles the play button in the nav.
- * Emits the `resetBottomPadding` event to reset the album page content bottom padding.
- *
- * @param {boolean} state the new visibility state of the album page header.
- */
-function handleVisibilityState(state: boolean) {
-  nav.toggleShowPlay(state);
-}
-
-useVisibility(albumheaderthing, handleVisibilityState);
-
-// const is_fav = ref(props.album.is_favorite);
-
-function handleFav() {
-  favoriteHandler(
-    album.value.is_favorite,
-    favType.album,
-    album.value.albumhash,
-    store.makeFavorite,
-    store.removeFavorite
-  );
-}
-</script>
-
-<style lang="scss">
-.album-header-ambient {
-  width: 20rem;
-  position: absolute;
-  z-index: -100 !important;
-  opacity: 0.25;
-}
-
-.a-header {
-  display: grid;
-  grid-template-columns: max-content 1fr;
-  gap: 1rem;
-  padding: 1rem;
-  height: 24rem;
-  // height: $banner-height;
-  background-color: $black;
-  align-items: flex-end;
-
-  .buttons {
-    display: flex;
-    gap: $small;
-  }
-
-  .big-img {
-    height: calc(100%);
-    width: 16rem;
-    height: 16rem;
-    display: flex;
-    align-items: flex-end;
-
-    img {
-      height: 16rem;
-      aspect-ratio: 1;
-      object-fit: cover;
-    }
-  }
-
-  .big-img.imgSmall {
-    width: 12rem;
-    height: 12rem;
-
-    img {
-      height: 12rem;
-    }
-  }
-
-  .nocontrast {
-    color: $black;
-
-    .top {
-      .h {
-        color: $pink;
-      }
-    }
-  }
-
-  .info {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr max-content;
-    height: 100%;
-    align-items: flex-end;
-
-    .art {
-      display: inline-flex;
-      gap: $small;
-      max-width: 10rem;
-      flex-wrap: wrap;
-
-      .shadow-inset {
-        height: max-content;
-      }
-
-      img {
-        height: 3rem;
-        background-color: $gray;
-        margin-left: -1.5rem;
-      }
-
-      a {
-        transition: all 0.25s ease-in-out;
-      }
-
-      a:hover {
-        img {
-          z-index: 100;
-          border-color: $pink !important;
-          // margin-right: 1.5rem;
-          // border: solid 2px white !important;
-        }
-      }
-    }
-
-    img {
-      height: 6rem;
-      aspect-ratio: 1;
-      object-fit: cover;
-      user-select: none;
-    }
-
-    .top {
-      .h {
-        font-size: 14px;
-        font-weight: 700;
-      }
-
-      .title {
-        font-size: 2.75rem;
-        font-weight: 700;
-        width: fit-content;
-        cursor: text;
-      }
-
-      .artist {
-        font-size: 1.15rem;
-      }
-    }
-
-    .bottom {
-      margin-top: $smaller;
-
-      .heart-button {
-        background-color: pink !important;
-        border-color: pink;
-      }
-
-      .stats {
-        font-weight: bold;
-        margin-bottom: 0.75rem;
-        font-size: 0.8rem;
-
-        .artistname {
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        div {
-          font-size: 0.8rem;
-          display: flex;
-          flex-wrap: wrap;
-        }
-      }
-    }
-  }
-}
-</style>
--- a/src/components/AlbumView/Header/AlbumType.vue
+++ b/src/components/AlbumView/Header/AlbumType.vue
@@ -0,0 +1,21 @@
+<template>
+  <div v-if="!isSmallPhone" v-auto-animate class="albumtype">
+    <span v-if="album.is_soundtrack">Soundtrack</span>
+    <span v-else-if="album.is_live">Concert</span>
+    <span v-else-if="album.is_compilation">Compilation</span>
+    <span v-else-if="album.is_EP">EP</span>
+    <span v-else-if="album.is_single">Single</span>
+    <span v-else>Album</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Album } from "@/interfaces";
+import { isSmallPhone } from "@/stores/content-width";
+
+defineProps<{
+  album: Album;
+}>();
+</script>
+
+<style lang="scss"></style>
--- a/src/components/AlbumView/Header/Buttons.vue
+++ b/src/components/AlbumView/Header/Buttons.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="album-buttons">
+    <PlayBtnRect :source="playSources.album" :bg_color="colors.btn" />
+
+    <HeartSvg
+      :state="album.is_favorite"
+      :color="colors.bg ? colors.bg : ''"
+      @handleFav="handleFav"
+    />
+    <button
+      class="options"
+      :class="{ context_menu_showing }"
+      @click.prevent="showContextMenu"
+    >
+      <MoreSvg
+        :style="{
+          color: textColor,
+        }"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+
+import { favType, playSources } from "@/enums";
+import useAlbumStore from "@/stores/pages/album";
+
+import MoreSvg from "@/assets/icons/more.svg";
+import HeartSvg from "@/components/shared/HeartSvg.vue";
+import PlayBtnRect from "@/components/shared/PlayBtnRect.vue";
+import favoriteHandler from "@/helpers/favoriteHandler";
+import { showAlbumContextMenu } from "@/helpers/contextMenuHandler";
+
+const store = useAlbumStore();
+const { info: album, colors } = storeToRefs(store);
+
+defineProps<{
+  textColor: string;
+}>();
+
+const context_menu_showing = ref(false);
+
+function showContextMenu(e: MouseEvent) {
+  showAlbumContextMenu(e, context_menu_showing);
+}
+
+function handleFav() {
+  favoriteHandler(
+    album.value.is_favorite,
+    favType.album,
+    album.value.albumhash,
+    store.makeFavorite,
+    store.removeFavorite
+  );
+}
+</script>
+
+<style lang="scss">
+.album-buttons {
+  display: flex;
+  gap: $small;
+
+  .options {
+    background-color: transparent;
+    border: none;
+
+    &.context_menu_showing {
+      background-color: $darkblue;
+
+      svg {
+        color: $white !important;
+      }
+    }
+
+    svg {
+      transform: scale(1.25);
+    }
+  }
+}
+</style>
--- a/src/components/AlbumView/Header/Info.vue
+++ b/src/components/AlbumView/Header/Info.vue
@@ -0,0 +1,109 @@
+<template>
+  <div class="album-info" :style="{ color: textColor }">
+    <div class="top">
+      <AlbumType :album="album" />
+      <div id="albumheadertitle" class="title ellip2">
+        <span v-for="t in titleSplits" :key="t">{{ t }}<br /></span>
+      </div>
+    </div>
+    <div class="bottom">
+      <div id="test-elem"></div>
+      <Versions :color="colors.bg" :versions="album.versions" />
+      <Stats :album="album" />
+      <Buttons :text-color="textColor || ''" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+import { balanceText } from "@/utils/balanceText";
+import { getTextColor } from "@/utils/colortools/shift";
+
+import useAlbumStore from "@/stores/pages/album";
+import updatePageTitle from "@/utils/updatePageTitle";
+
+import Stats from "./Stats.vue";
+import Buttons from "./Buttons.vue";
+import Versions from "./Versions.vue";
+import AlbumType from "./AlbumType.vue";
+
+const store = useAlbumStore();
+
+const { info: album, colors } = storeToRefs(store);
+const titleSplits = ref([""]);
+
+const textColor = computed((): string => {
+  if (colors.value.bg) {
+    return getTextColor(colors.value.bg);
+  }
+
+  return "";
+});
+
+const updateTitle = () => {
+  updatePageTitle(album.value.title + " - " + album.value.albumartists[0].name);
+  const elem = document.getElementById("test-elem");
+  titleSplits.value = balanceText(album.value.title, elem?.offsetWidth || 0);
+};
+
+onMounted(() => {
+  updateTitle();
+});
+
+onBeforeRouteUpdate(() => {
+  updateTitle();
+});
+</script>
+
+<style lang="scss">
+.album-info {
+  img {
+    height: 6rem;
+    aspect-ratio: 1;
+    object-fit: cover;
+    user-select: none;
+  }
+
+  .top {
+    .albumtype {
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    .title {
+      font-size: 2.75rem;
+      font-weight: 700;
+      width: fit-content;
+      cursor: text;
+    }
+
+    .artist {
+      font-size: 1.15rem;
+    }
+  }
+
+  .bottom {
+    margin-top: $smaller;
+
+    .stats2 {
+      text-align: center;
+      margin: 0;
+    }
+
+    .versions {
+      margin-bottom: $medium;
+      margin-left: -$smaller;
+
+      // &:first-child {}
+      // .master-flag {
+      //   background-color: transparent !important;
+      //   border: solid 1px !important;
+      // }
+    }
+  }
+}
+</style>
--- a/src/components/AlbumView/Header/Stats.vue
+++ b/src/components/AlbumView/Header/Stats.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="album-stats ellip2">
+    <div class="ellip">
+      <ArtistName
+        :artists="album.albumartists"
+        :albumartists="''"
+        :small="true"
+        :append="!isSmallPhone ? statsText : ''"
+      />
+    </div>
+    <div v-if="isSmallPhone" class="stats2">
+      {{ album.date }} {{ !album.is_single ? `• ${album.count} Tracks` : "" }} •
+      {{ formatSeconds(album.duration, true) }}
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+import { Album } from "@/interfaces";
+import { formatSeconds } from "@/utils";
+import { isSmallPhone } from "@/stores/content-width";
+
+import ArtistName from "@/components/shared/ArtistName.vue";
+
+const props = defineProps<{
+  album: Album;
+}>();
+
+const statsText = computed(() => {
+  const is_single = props.album.is_single;
+
+  // hide track count if it's a single, also add an s to track if it's plural
+  return `• ${props.album.date} ${
+    !is_single
+      ? `• ${props.album.count.toLocaleString()} Track${
+          props.album.count > 1 ? "s" : ""
+        }`
+      : ""
+  } • ${formatSeconds(props.album.duration, true)}`;
+});
+</script>
+
+<style lang="scss">
+.album-stats {
+  font-weight: bold;
+  margin-bottom: 0.75rem;
+  font-size: 14px;
+  padding-left: $smaller;
+
+  .artistname {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  div {
+    font-size: 0.8rem;
+    word-break: normal;
+  }
+}
+</style>
--- a/src/components/AlbumView/Header/Versions.vue
+++ b/src/components/AlbumView/Header/Versions.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="versions">
+    <MasterFlag
+      v-for="(v, index) in versions"
+      :key="v"
+      :bitrate="1200"
+      :text="v"
+      :bg_color="color ? getShift(color, [80, -90]) : undefined"
+      :text_color="color ? getShift(color, [-100, 80]) : undefined"
+      :fill="versions.length > 1 && index === 0"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getShift } from "@/utils/colortools/shift";
+import MasterFlag from "@/components/shared/MasterFlag.vue";
+
+defineProps<{
+  color: string;
+  versions: string[];
+}>();
+</script>
--- a/src/components/AlbumView/main.vue
+++ b/src/components/AlbumView/main.vue
@@ -0,0 +1,153 @@
+<template>
+  <div
+    class="album-header-ambient rounded-lg"
+    style="height: 100%; width: 100%"
+    :style="{
+      boxShadow: colors.bg ? `0 .5rem 2rem ${colors.bg}` : '0 .5rem 2rem black',
+    }"
+  ></div>
+  <div
+    ref="albumheaderthing"
+    class="a-header rounded-lg"
+    :style="{
+      background: colors.bg ? colors.bg : '',
+    }"
+  >
+    <div
+      class="big-img no-scroll"
+      :class="`${isHeaderSmall ? 'imgSmall' : ''} shadow-lg rounded-sm`"
+    >
+      <img :src="imguri.thumb.large + album.image" class="rounded-sm" />
+    </div>
+    <Info />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { storeToRefs } from "pinia";
+
+import { paths } from "@/config";
+import { isHeaderSmall } from "@/stores/content-width";
+
+import useNavStore from "@/stores/nav";
+import useAlbumStore from "@/stores/pages/album";
+
+import Info from "@/components/AlbumView/Header/Info.vue";
+import useVisibility from "@/utils/useVisibility";
+
+const albumheaderthing = ref<any>(null);
+const imguri = paths.images;
+
+const nav = useNavStore();
+const store = useAlbumStore();
+
+const { info: album, colors } = storeToRefs(store);
+
+defineEmits<{
+  // eslint-disable-next-line no-unused-vars
+  (event: "playThis"): void;
+}>();
+
+function handleVisibilityState(state: boolean) {
+  nav.toggleShowPlay(state);
+}
+
+useVisibility(albumheaderthing, handleVisibilityState);
+</script>
+
+<style lang="scss">
+.balance-text-temp {
+  visibility: hidden;
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+.album-header-ambient {
+  width: 20rem;
+  position: absolute;
+  z-index: -100 !important;
+  opacity: 0.25;
+}
+
+.a-header {
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  height: $banner-height;
+  background-color: $black;
+  align-items: flex-end;
+
+  .big-img {
+    height: 16rem;
+    display: flex;
+    align-items: flex-end;
+
+    img {
+      height: 16rem;
+      max-width: 16rem;
+      object-fit: contain;
+    }
+  }
+
+  .big-img.imgSmall {
+    width: 12rem;
+    height: 12rem;
+
+    img {
+      height: 12rem;
+    }
+  }
+
+  .nocontrast {
+    color: $black;
+
+    .top {
+      .albumtype {
+        color: $pink;
+      }
+    }
+  }
+
+  @include smallPhone {
+    grid-template-columns: 1fr;
+    padding: 2rem 1rem;
+    height: 25rem;
+
+    .big-img {
+      width: 10rem !important;
+      height: 10rem !important;
+      aspect-ratio: 1;
+      margin: 0 auto;
+
+      img {
+        height: 10rem !important;
+      }
+    }
+
+    .title {
+      font-size: 1.5rem !important;
+      max-width: fit-content;
+      margin: 0 auto;
+      text-align: center;
+    }
+
+    .album-buttons {
+      justify-content: center;
+    }
+
+    .album-stats > div {
+      border: none;
+      margin: $small auto;
+    }
+
+    .versions {
+      margin-bottom: 0 !important;
+      margin-left: 0 !important;
+      text-align: center;
+    }
+  }
+}
+</style>
--- a/src/components/AlbumsExplorer/AlbumList.vue
+++ b/src/components/AlbumsExplorer/AlbumList.vue
@@ -1,146 +0,0 @@
-<template>
-  <div class="albums-view rounded">
-    <div class="al-header">
-      <div class="heading">ALL ALBUMS</div>
-      <div class="search">
-        <input type="search" placeholder="Search albums" />
-      </div>
-    </div>
-    <div class="separator"></div>
-    <div class="all-albums">
-      <router-link
-        :to="{ path: '/albums/1' }"
-        class="item rounded"
-        v-for="album in albums"
-        :key="album"
-      >
-        <div class="play"></div>
-        <div class="album-art image rounded"></div>
-        <div class="name ellip">{{ album.title }}</div>
-        <div class="artist ellip">{{ album.albumartists }}</div>
-      </router-link>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  setup() {
-    const albums = [
-      {
-        title: "Album 2 af sjf s d kjf saf ",
-        artist:
-          "Artist  ad asd f adf d da df d adf ds d fadsf fs dfds sf dadf d",
-      },
-      {
-        title: "Album 3",
-        artist: "Artist 3",
-      },
-    ];
-
-    return {
-      albums,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.albums-view {
-  height: calc(100% - 14.5rem);
-  padding: $small;
-  margin-top: $small;
-  overflow: hidden;
-
-  .all-albums {
-    height: calc(100% - 4rem);
-    padding: $small 0 0 0;
-    overflow-y: auto;
-
-    .item {
-      position: relative;
-      width: 10.9rem;
-      height: 13rem;
-      padding: $small 0.95rem $small 0.95rem;
-      margin: $smaller;
-      transition: all 0.2s ease-in-out;
-      cursor: default;
-      float: left;
-
-      .play {
-        position: absolute;
-        bottom: 3rem;
-        left: $small;
-        height: 3rem;
-        width: 3rem;
-        // background: url(../../assets/icons/play.svg) no-repeat center;
-        background-size: 60%;
-        cursor: default;
-        opacity: 0;
-        transition: all 0.5s ease-in-out;
-      }
-
-      &:hover {
-        background-color: #574a4a;
-
-        .play {
-          transition: 0.5s all ease;
-          opacity: 1;
-        }
-      }
-
-      .album-art {
-        height: 9em;
-        width: 9em;
-        // background-image: url(../../assets/images/null.webp);
-      }
-
-      .name {
-        text-align: left;
-        font-weight: bold;
-        margin-top: $small;
-      }
-
-      .artist {
-        font-size: small;
-        font-weight: lighter;
-        text-align: left;
-        color: rgba(255, 255, 255, 0.699);
-      }
-    }
-  }
-
-  .al-header {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: 4em;
-    padding: 0 $small 0 $small;
-
-    .search {
-      position: absolute;
-      right: 0;
-      padding-right: $small;
-
-      input {
-        width: 30rem;
-        border: none;
-        border-radius: 2rem;
-        padding-left: 1rem;
-        background-color: #4645456c;
-        color: rgba(255, 255, 255, 0.521);
-        font-size: 1rem;
-        line-height: 3rem;
-        outline: none;
-      }
-
-      input::-webkit-search-cancel-button {
-        position: relative;
-        right: 20px;
-        cursor: default;
-        width: 50px;
-        height: 50px;
-      }
-    }
-  }
-}
-</style>
--- a/src/components/AlbumsExplorer/TopAlbums.vue
+++ b/src/components/AlbumsExplorer/TopAlbums.vue
@@ -1,164 +0,0 @@
-<template>
-  <div class="top-albums">
-    <div class="heading">TOP ALBUMS</div>
-    <div class="items">
-      <router-link
-        :to="{ path: '/albums/1' }"
-        class="item rounded"
-        v-for="album in albums"
-        :key="album"
-      >
-        <div class="image rounded"></div>
-        <div class="info">
-          <div class="name ellip">{{ album.title }}</div>
-          <div class="artist ellip">{{ album.albumartists }}</div>
-          <div class="separator"></div>
-          <div class="top">
-            <div class="play-icon"></div>
-            <div class="text ellip">{{ album.top_track }}</div>
-          </div>
-        </div>
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  setup() {
-    const albums = [
-      {
-        title: "Thriller",
-        artist: "Michael Jackson, Sting, Shaggy, Juice WRLD",
-        top_track: "Beat It and althought you whatever",
-      },
-      {
-        title: "Figting Demons",
-        artist: "Juice WRLD",
-        top_track: "Girl Of My Dreams",
-      },
-      {
-        title: "Crybaby",
-        artist: "Lil Peep",
-        top_track: "Lil kennedy",
-      },
-    ];
-
-    return {
-      albums,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.top-albums {
-  height: 14rem;
-  border-radius: $small;
-  padding: $small;
-
-  .heading {
-    margin: $small 0 1.5em $small;
-  }
-
-  .items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: $small;
-
-    .item {
-      height: 10rem;
-      width: clamp(10rem, 100%, 25rem);
-      background-color: rgb(7, 6, 6);
-      display: grid;
-      align-items: center;
-      grid-template-columns: 7.5rem 1fr;
-      padding: $small;
-      cursor: default;
-      transition: all 0.2s ease-in-out;
-
-      &:hover {
-        transform: translateY(-0.5em);
-      }
-
-      .image {
-        height: 7rem;
-        width: 7rem;
-        // background-image: url(../../assets/images/null.webp);
-        border-radius: $small;
-      }
-
-      .info .name {
-        font-size: 1.5rem;
-        font-weight: bold;
-      }
-
-      .info .artist {
-        font-size: small;
-        color: rgba(255, 255, 255, 0.699);
-      }
-
-      .info .top {
-        height: 2.5rem;
-        background-color: $blue;
-        border-radius: $small;
-        margin-left: auto;
-        display: grid;
-        grid-template-columns: 2.5rem 1fr;
-        align-items: center;
-        transition: all 0.2s ease-in-out;
-        user-select: none;
-
-        .play-icon {
-          margin: 0 0 0 $small;
-          height: 1.2rem;
-          width: 1.2rem;
-          background-image: url(../../assets/icons/play.svg);
-          background-size: 96%;
-          background-repeat: no-repeat;
-          background-position: center;
-          transition: all 0.2s ease-in-out;
-        }
-
-        .text {
-          color: white;
-        }
-
-        &:hover {
-          background-color: rgb(0, 45, 104);
-          transition: all 0.2s ease-in-out;
-
-          .play-icon {
-            transform: scale(1.2);
-            transition: all 0.2s ease-in-out;
-          }
-        }
-
-        &:active {
-          transform: scale(0.95);
-          transition: all 0.1s ease-in-out;
-        }
-      }
-      &:first-child {
-        background-color: rgb(177, 116, 2);
-
-        .image {
-          background-image: url(../../assets/images/null.webp);
-        }
-      }
-
-      &:nth-child(2) {
-        background-color: rgb(0, 74, 117);
-
-        .image {
-          background-image: url(../../assets/images/null.webp);
-        }
-      }
-
-      &:nth-child(3) {
-        background-color: rgb(161, 106, 106);
-      }
-    }
-  }
-}
-</style>
--- a/src/components/ArtistView/AlbumsFetcher.vue
+++ b/src/components/ArtistView/AlbumsFetcher.vue
@@ -0,0 +1,35 @@
+<template>
+  <div style="height: 1px">
+    <button v-if="show_text" @click="fetch_callback">Load More</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+
+import { updateCardWidth } from "@/stores/content-width";
+
+const props = defineProps<{
+  show_text?: boolean;
+  fetch_callback: () => Promise<void>;
+  reset_callback?: () => Promise<void>;
+  outside_route?: boolean;
+}>();
+
+const update = async () => {
+  await nextTick();
+
+  updateCardWidth();
+};
+
+onMounted(async () => {
+  props.fetch_callback().then(update);
+});
+
+!props.outside_route &&
+  onBeforeRouteUpdate(() => {
+    if (!props.reset_callback) return;
+    props.reset_callback().then(update);
+  });
+</script>
--- a/src/components/ArtistView/ArtistAlbumsFetcher.vue
+++ b/src/components/ArtistView/ArtistAlbumsFetcher.vue
@@ -1,18 +0,0 @@
-<template><div style="height: 1px;"></div></template>
-
-<script setup lang="ts">
-import { onMounted } from "vue";
-import useArtistPageStore from "@/stores/pages/artist";
-import { onBeforeRouteUpdate } from "vue-router";
-
-const store = useArtistPageStore();
-
-onMounted(async () => {
-  await store.getArtistAlbums();
-});
-
-onBeforeRouteUpdate(async (to) => {
-  store.resetAlbums();
-  await store.getArtistAlbums();
-});
-</script>
--- a/src/components/ArtistView/Header.vue
+++ b/src/components/ArtistView/Header.vue
@@ -1,64 +1,46 @@
 <template>
  <div
-    class="artist-header-ambient rounded"
+    v-if="!on_sidebar"
+    class="artist-header-ambient rounded-lg"
+    :class="{ isSmallPhone }"
    style="height: 100%; width: 100%"
    :style="{
-      boxShadow: artist.info.colors.length
-        ? `0 .5rem 2rem ${artist.info.colors[0]}`
+      boxShadow: !useCircularImage
+        ? colors.bg.length
+          ? `0 .5rem 2rem ${colors.bg}`
+          : undefined
        : undefined,
    }"
  ></div>
  <div
-    class="artist-page-header rounded no-scroll"
+    ref="artistheader"
+    class="artist-page-header rounded-lg no-scroll"
+    :class="{ isSmallPhone, useCircularImage }"
    :style="{
-      height: `${heightLarge ? '24rem' : '18rem'}`,
+      height: `${isSmallPhone ? '25rem' : containerHeight}`,
    }"
  >
-    <div
-      class="artist-info"
-      :style="{
-        color: artist.info.colors[0]
-          ? getTextColor(artist.info.colors[0])
-          : undefined,
-      }"
-    >
-      <!-- :class="{
-        nocontrast: artist.info.colors ? isLight(artist.info.colors[0]) : false,
-      }" -->
-      <section class="text">
-        <div class="card-title">Artist</div>
-        <div class="artist-name ellip2">{{ artist.info.name }}</div>
-        <div class="stats">
-          {{ artist.info.trackcount }} Track{{
-            `${artist.info.trackcount == 1 ? "" : "s"}`
-          }}
-          • {{ artist.info.albumcount }} Album{{
-            `${artist.info.albumcount == 1 ? "" : "s"}`
-          }}
-          •
-          {{ formatSeconds(artist.info.duration, true) }}
-        </div>
-      </section>
-      <div class="buttons">
-        <PlayBtnRect :source="playSources.artist" :store="useArtistPageStore" />
-        <HeartSvg @handleFav="handleFav" :state="artist.info.is_favorite" />
-      </div>
-    </div>
+    <Info :artist="artist" :use-circular-image="useCircularImage" />
    <div
      class="artist-img no-select"
      :style="{
-        height: `${heightLarge ? '24rem' : '18rem'}`,
+        height: containerHeight,
      }"
    >
-      <img :src="paths.images.artist.large + artist.info.image" />
+      <img
+        id="artist-avatar"
+        :src="paths.images.artist.large + artist.image"
+        @load="store.setBgColor"
+      />
    </div>
    <div
+      v-if="!useCircularImage"
      class="gradient"
      :style="{
-        backgroundImage: artist.info.colors[0]
-          ? `linear-gradient(to left, transparent 30%,
-      ${artist.info.colors[0]} 50%,
-      ${artist.info.colors[0]} 100%)`
+        backgroundImage: colors.bg
+          ? `linear-gradient(${gradientDirection}, transparent 20%,
+      ${colors.bg} ${gradientWidth}%,
+      ${colors.bg} 100%)`
          : '',
      }"
    ></div>
@@ -66,30 +48,55 @@
 </template>

 <script setup lang="ts">
+import { storeToRefs } from "pinia";
+import { computed, onMounted, ref } from "vue";
+import { onBeforeRouteUpdate } from "vue-router";
+import { useElementSize } from "@vueuse/core";
+import useSettingsStore from "@/stores/settings";
+
 import { paths } from "@/config";
-import useArtistPageStore from "@/stores/pages/artist";
-import formatSeconds from "@/utils/useFormatSeconds";
-import { isLight } from "@/composables/colors/album";
-import { favType, playSources } from "@/composables/enums";
-import favoriteHandler from "@/composables/favoriteHandler";
-import { heightLarge } from "@/stores/content-width";
+import updatePageTitle from "@/utils/updatePageTitle";

-import { getTextColor } from "@/utils/colortools/shift";
+import Info from "./HeaderComponents/Info.vue";
+import useArtistStore from "@/stores/pages/artist";
+import { getShift } from "@/utils/colortools/shift";

-import PlayBtnRect from "../shared/PlayBtnRect.vue";
-import HeartSvg from "@/components/shared/HeartSvg.vue";
+const store = useArtistStore();
+const settings = useSettingsStore();

-const artist = useArtistPageStore();
+const props = defineProps<{
+  on_sidebar?: boolean;
+}>();

-function handleFav() {
-  favoriteHandler(
-    artist.info.is_favorite,
-    favType.artist,
-    artist.info.artisthash,
-    artist.makeFavorite,
-    artist.removeFavorite
-  );
+const { info: artist, colors } = storeToRefs(store);
+
+function updateTitle() {
+  props.on_sidebar ? () => {} : updatePageTitle(artist.value.name);
 }
+
+onMounted(() => updateTitle());
+onBeforeRouteUpdate(() => updateTitle());
+
+const artistheader = ref(null);
+const { width } = useElementSize(artistheader);
+
+const isSmallPhone = computed(() => width.value <= 550);
+const useCircularImage = computed(
+  () =>
+    !isSmallPhone.value && (settings.useCircularArtistImg || width.value >= 995)
+);
+
+const gradientDirection = computed(() =>
+  isSmallPhone.value ? "210deg" : "to left"
+);
+
+const gradientWidth = computed(() => {
+  return isSmallPhone.value ? "80" : "50";
+});
+
+const containerHeight = computed(() => {
+  return useCircularImage.value ? "13rem" : "18rem";
+});
 </script>

 <style lang="scss">
@@ -106,7 +113,9 @@ function handleFav() {
  position: relative;

  .artist-img {
-    // width: 100%;
+    display: flex;
+    align-items: flex-end;
+    order: 1;

    img {
      height: 100%;
@@ -114,61 +123,66 @@ function handleFav() {
      aspect-ratio: 1;
      object-fit: cover;
      object-position: 0% 20%;
+      float: right;
+    }
+  }
+
+  &.useCircularImage {
+    grid-template-columns: min-content 1fr;
+
+    .artist-img {
+      padding: 1rem;
+      order: -1;
+      z-index: 10;
+
+      img {
+        border-radius: 50%;
+        height: calc(100% - 0rem);
+        width: unset;
+        aspect-ratio: 1;
+      }
    }
  }

  .gradient {
    position: absolute;
-    background-image: linear-gradient(to left, transparent 10%, $gray 50%, $gray 100%);
+    background-image: linear-gradient(
+      to left,
+      transparent 10%,
+      $gray 50%,
+      $gray 100%
+    );
    height: 100%;
    width: 100%;
+
+    &.isSmallPhone {
+      background-image: linear-gradient(
+        210deg,
+        transparent 20%,
+        $gray 80%,
+        $gray 100%
+      );
+    }
  }

-  .artist-info {
-    z-index: 1;
-    padding: 1rem;
-    padding-right: 0;
-
+  &.isSmallPhone {
    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
+    flex-direction: column-reverse;
+    position: relative;

-    gap: 1rem;
+    .artist-img {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      height: 100% !important;

-    .text {
-      display: flex;
-      flex-direction: column;
-      gap: $small;
-    }
-
-    .card-title {
-      font-size: small;
-      font-weight: 700;
-    }
-
-    .artist-name {
-      font-size: 3.5rem;
-      font-weight: bold;
-      word-wrap: break-word;
-    }
-
-    .stats {
-      font-size: small;
-      font-weight: 700;
-    }
-  }
-
-  .artist-info.nocontrast {
-    color: $black;
-  }
-
-  .buttons {
-    display: flex;
-    gap: $small;
-
-    .heart-button {
-      background-color: pink !important;
-      border-color: pink;
+      img {
+        height: 100%;
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+        object-position: 0% 20%;
+      }
    }
  }
 }
--- a/src/components/ArtistView/HeaderComponents/Buttons.vue
+++ b/src/components/ArtistView/HeaderComponents/Buttons.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="artist-buttons">
+    <PlayBtnRect :source="playSources.artist" :bg_color="artist.colors.btn" />
+    <HeartSvg
+      :state="artist.info.is_favorite"
+      :color="
+        !useCircularImage
+          ? artist.info.colors[0]
+            ? artist.info.colors[0]
+            : ''
+          : ''
+      "
+      @handleFav="handleFav"
+    />
+    <button
+      class="options"
+      :class="{ context_menu_showing }"
+      @click="showContext"
+    >
+      <MoreSvg />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import { favType, playSources } from "@/enums";
+import favoriteHandler from "@/helpers/favoriteHandler";
+import { showArtistContextMenu } from "@/helpers/contextMenuHandler";
+import useArtistPageStore from "@/stores/pages/artist";
+
+import MoreSvg from "@/assets/icons/more.svg";
+import HeartSvg from "@/components/shared/HeartSvg.vue";
+import PlayBtnRect from "@/components/shared/PlayBtnRect.vue";
+
+defineProps<{
+  useCircularImage?: boolean;
+}>();
+
+const artist = useArtistPageStore();
+const context_menu_showing = ref(false);
+
+function handleFav() {
+  favoriteHandler(
+    artist.info.is_favorite,
+    favType.artist,
+    artist.info.artisthash,
+    artist.makeFavorite,
+    artist.removeFavorite
+  );
+}
+
+function showContext(e: MouseEvent) {
+  showArtistContextMenu(
+    e,
+    context_menu_showing,
+    artist.info.artisthash,
+    artist.info.name
+  );
+}
+</script>
+
+<style lang="scss">
+.artist-buttons {
+  display: flex;
+  gap: $small;
+
+  .options {
+    background-color: transparent;
+    border: none;
+
+    &.context_menu_showing {
+      background-color: $darkblue;
+
+      svg {
+        color: $white !important;
+      }
+    }
+
+    svg {
+      transform: scale(1.25);
+    }
+  }
+}
+</style>
--- a/src/components/ArtistView/HeaderComponents/Info.vue
+++ b/src/components/ArtistView/HeaderComponents/Info.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="artist-info"
+    :style="{
+      color: !useCircularImage
+        ? artist.colors[0]
+          ? getTextColor(artist.colors[0])
+          : undefined
+        : undefined,
+    }"
+  >
+    <section class="text">
+      <div class="card-title">Artist</div>
+      <div
+        class="artist-name"
+        :class="`${useCircularImage ? 'ellip' : 'ellip2'}`"
+      >
+        {{ artist.name }}
+      </div>
+      <div class="stats">
+        <span v-if="artist.trackcount">
+          {{ artist.trackcount.toLocaleString() }} Track{{
+            `${artist.trackcount == 1 ? "" : "s"}`
+          }}
+        </span>
+        {{ artist.albumcount && artist.trackcount.toLocaleString() ? "•" : "" }}
+        <span v-if="artist.albumcount">
+          {{ artist.albumcount.toLocaleString() }} Album{{
+            `${artist.albumcount == 1 ? "" : "s"}`
+          }}
+        </span>
+        <span v-if="artist.duration">
+          {{ ` • ${formatSeconds(artist.duration, true)}` }}
+        </span>
+      </div>
+    </section>
+    <Buttons :use-circular-image="useCircularImage" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getTextColor } from "@/utils/colortools/shift";
+
+import formatSeconds from "@/utils/useFormatSeconds";
+import Buttons from "./Buttons.vue";
+import { Artist } from "@/interfaces";
+
+defineProps<{
+  artist: Artist;
+  useCircularImage?: boolean;
+}>();
+</script>
+
+<style lang="scss">
+.artist-info {
+  z-index: 1;
+  padding: 1rem;
+  padding-right: 0;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+
+  gap: 1rem;
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: $small;
+  }
+
+  .card-title {
+    font-size: small;
+    font-weight: 700;
+  }
+
+  .artist-name {
+    font-size: 3.5rem;
+    font-weight: bold;
+    word-wrap: break-word;
+  }
+
+  .stats {
+    font-size: small;
+    font-weight: 700;
+  }
+}
+</style>
--- a/src/components/ArtistView/TopTracks.vue
+++ b/src/components/ArtistView/TopTracks.vue
@@ -7,22 +7,23 @@
    <div class="tracks" :class="{ isSmall, isMedium }">
      <SongItem
        v-for="(song, index) in tracks"
+        :key="index"
        :track="song"
-        :index="index + 1"
-        @playThis="playHandler(index)"
+        :index="total ? total - index : index + 1"
        :source="source"
+        @playThis="playHandler(index)"
      />
    </div>
-    <div class="error" v-if="!tracks.length">No tracks</div>
+    <div v-if="!tracks.length" class="error">No tracks</div>
  </div>
 </template>

 <script setup lang="ts">
-import SongItem from "../shared/SongItem.vue";
+import { dropSources } from "@/enums";
 import { Track } from "@/interfaces";
 import { isMedium, isSmall } from "@/stores/content-width";
 import SeeAll from "../shared/SeeAll.vue";
-import { dropSources } from "@/composables/enums";
+import SongItem from "../shared/SongItem.vue";

 defineProps<{
  tracks: Track[];
@@ -30,6 +31,7 @@ defineProps<{
  title: string;
  playHandler: (index: number) => void;
  source: dropSources;
+  total?: number;
 }>();
 </script>

--- a/src/components/ArtistsExplorer/ArtistsList.vue
+++ b/src/components/ArtistsExplorer/ArtistsList.vue
@@ -1,126 +0,0 @@
-<template>
-  <div class="artists-view rounded">
-    <div class="al-header">
-      <div class="heading">ALL ARTISTS</div>
-      <div class="search">
-        <input type="search" placeholder="Search artists" />
-      </div>
-    </div>
-    <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 t-center ellip">{{ artist.name }}</div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  setup() {
-    const artists = [
-      {
-        name: "Juice Wrld",
-      },
-      {
-        name: "Eminem",
-      },
-      {
-        name: "Sting",
-      },
-      {
-        name: "Juice Wrld",
-      },
-      {
-        name: "Eminem",
-      },
-      {
-        name: "Sting",
-      },
-      {
-        name: "Juice Wrld",
-      },
-    ];
-
-    return {
-      artists,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.artists-view {
-  height: calc(100% - 14.5rem);
-  padding: $small;
-  margin-top: $small;
-  overflow: hidden;
-
-  .all-albums {
-    height: calc(100% - 4rem);
-    border-top: 1px solid $separator;
-    padding: $small 0 0 0;
-    overflow-y: auto;
-
-    .item {
-      position: relative;
-      width: 10.9rem;
-      height: 12rem;
-      padding: $small 0.95rem $small 0.95rem;
-      margin: $smaller;
-      transition: all 0.2s ease-in-out;
-      cursor: default;
-      float: left;
-
-      &:hover {
-        background-color: rgb(74, 84, 87);
-        // border: solid
-      }
-
-      .album-art {
-        height: 9em;
-        width: 9em;
-        border-radius: 50%;
-        background-image: url(../../assets/images/null.webp);
-      }
-
-      .name {
-        margin-top: $small;
-      }
-    }
-  }
-
-  .al-header {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: 4em;
-    padding: 0 $small 0 $small;
-
-    .search {
-      position: absolute;
-      right: 0;
-      padding-right: $small;
-
-      input {
-        width: 30rem;
-        border: none;
-        border-radius: 2rem;
-        padding-left: 1rem;
-        background-color: #4645456c;
-        color: rgba(255, 255, 255, 0.521);
-        font-size: 1rem;
-        line-height: 3rem;
-        outline: none;
-      }
-
-      input::-webkit-search-cancel-button {
-        position: relative;
-        right: 20px;
-        cursor: default;
-        width: 50px;
-        height: 50px;
-      }
-    }
-  }
-}
-</style>
--- a/src/components/ArtistsExplorer/TopArtists.vue
+++ b/src/components/ArtistsExplorer/TopArtists.vue
@@ -1,160 +0,0 @@
-<template>
-  <div class="top-artists">
-    <div class="heading">TOP ARTISTS</div>
-    <div class="items">
-      <div class="item rounded" v-for="artist in artists" :key="artist">
-        <div class="image"></div>
-        <div class="info">
-          <div class="name ellip">{{ artist.name }}</div>
-          <div class="artist ellip">{{ artist.album_count }} Albums</div>
-          <div class="separator"></div>
-          <div class="top">
-            <div class="play-icon"></div>
-            <div class="text ellip">{{ artist.top_track }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script >
-export default {
-  setup() {
-    const artists = [
-      {
-        name: "Sting",
-        album_count: "12",
-        top_track: "Alien in Newyork",
-      },
-      {
-        name: "Juice Wrld",
-        album_count: "4",
-        top_track: "Girl Of My Dreams",
-      },
-      {
-        name: "Lil Peep",
-        album_count: "6",
-        top_track: "Haunt U",
-      },
-    ];
-
-    return {
-      artists,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-.top-artists {
-  height: 14rem;
-  border-radius: $small;
-  padding: $small;
-
-  .heading {
-    margin: $small 0 1.5em $small;
-  }
-
-  .items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: $small;
-
-    .item {
-      height: 10rem;
-      width: 100%;
-      max-width: 25rem;
-      background-color: rgb(7, 6, 6);
-      display: grid;
-      align-items: center;
-      grid-template-columns: 7.5rem 1fr;
-      padding: $small;
-      cursor: default;
-      transition: all 0.2s ease-in-out;
-
-      &:hover {
-        transform: translateY(-.5em);
-      }
-
-      .image {
-        height: 7rem;
-        width: 7rem;
-        // background-image: url("../../assets/images/null.webp");
-        border-radius: 50%;
-      }
-
-      .info .name {
-        font-size: 1.5rem;
-        font-weight: bold;
-      }
-
-      .info .artist {
-        font-size: small;
-        color: rgba(255, 255, 255, 0.699);
-      }
-
-      .info .top {
-        height: 2.5rem;
-        background-color: rgb(51, 129, 20);
-        border-radius: $small;
-        margin-left: auto;
-        display: grid;
-        grid-template-columns: 2.5rem 1fr;
-        align-items: center;
-        transition: all 0.2s ease-in-out;
-        user-select: none;
-
-        .play-icon {
-          margin: 0 0 0 $small;
-          height: 1.2rem;
-          width: 1.2rem;
-          background-image: url(../../assets/icons/play.svg);
-          background-size: 96%;
-          background-repeat: no-repeat;
-          background-position: center;
-          transition: all 0.2s ease-in-out;
-        }
-
-        .text {
-          color: white;
-        }
-
-        &:hover {
-          background-color: rgb(0, 134, 89);
-          transition: all 0.2s ease-in-out;
-
-          .play-icon {
-            transform: scale(1.2);
-            transition: all 0.2s ease-in-out;
-          }
-        }
-
-        &:active {
-          transform: scale(0.95);
-          transition: all 0.1s ease-in-out;
-        }
-      }
-      &:first-child {
-        background-color: rgb(177, 116, 2);
-
-        .image {
-          background-image: url("../../assets/images/null.webp");
-        }
-      }
-
-      &:nth-child(2){
-        background-color: rgb(0, 74, 117);
-
-        .image {
-          background-image: url("../../assets/images/null.webp");
-        }
-      }
-
-      &:nth-child(3){
-        background-color: rgb(161, 106, 106);
-      }
-    }
-  }
-}
-</style>
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -2,7 +2,7 @@
  <div class="b-bar">
    <LeftGroup @handleFav="handleFav" />
    <div class="center">
-      <div class="with-time">
+      <div v-if="!isMobile" class="with-time">
        <div class="time time-current">
          <span>
            {{ formatSeconds(queue.duration.current || 0) }}
@@ -14,59 +14,33 @@
        </div>
        <div class="time time-full">
          <span>
-            {{
-              formatSeconds(
-                queue.currenttrack ? queue.currenttrack.duration : 0
-              )
-            }}
+            {{ formatSeconds(queue.duration.full) }}
          </span>
        </div>
      </div>
      <Progress />
    </div>
-
-    <div class="right-group">
-      <HeartSvg
-        :state="queue.currenttrack?.is_favorite"
-        @handleFav="handleFav"
-      />
-      <button
-        class="repeat"
-        :class="{ 'repeat-disabled': settings.no_repeat }"
-        @click="settings.toggleRepeatMode"
-        :title="
-          settings.repeat_all
-            ? 'Repeat all'
-            : settings.no_repeat
-            ? 'No repeat'
-            : 'Repeat one'
-        "
-      >
-        <RepeatOneSvg v-if="settings.repeat_one" />
-        <RepeatAllSvg v-else />
-      </button>
-    </div>
+    <RightGroup v-if="!isMobile" @handleFav="handleFav" />
+    <Navigation v-else />
  </div>
 </template>

 <script setup lang="ts">
+import { favType } from "@/enums";
+import favoriteHandler from "@/helpers/favoriteHandler";
+import { isMobile } from "@/stores/content-width";
 import { formatSeconds } from "@/utils";
-import { favType } from "@/composables/enums";
-import favoriteHandler from "@/composables/favoriteHandler";

 import useQStore from "@/stores/queue";
-import useSettingsStore from "@/stores/settings";

 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
+import Navigation from "@/components/LeftSidebar/NavButtons.vue";

-import HeartSvg from "../shared/HeartSvg.vue";
-import RepeatAllSvg from "@/assets/icons/repeat.svg";
-import RepeatOneSvg from "@/assets/icons/repeat-one.svg";
 import LeftGroup from "./Left.vue";
+import RightGroup from "./Right.vue";

 const queue = useQStore();
-const settings = useSettingsStore();

 function handleFav() {
  favoriteHandler(
@@ -86,32 +60,47 @@ function handleFav() {
  grid-template-columns: 1fr max-content 1fr;
  align-items: center;
  z-index: 1;
+  padding: 0 1rem;
+
+  @include allPhones {
+    grid-template-columns: 1fr;
+    grid-template-rows: max-content 1.5rem max-content;
+    padding: 0 1rem $medium 1rem;
+
+    .center > input {
+      height: 2px !important;
+    }
+  }

  button {
-    height: 2rem;
-    width: 2rem;
    background: transparent;
    border-radius: $small;
+    width: 3rem;

    &:hover {
      border: solid 1px $gray3 !important;
      background-color: $gray !important;
    }
+
+    @include allPhones {
+      height: 3rem;
+    }
  }

-  gap: 1rem;
-
  &:hover {
-    ::-moz-range-thumb {
-      height: 0.8rem;
+    #progress::-moz-range-thumb {
+      height: 1rem;
+      width: 1rem;
    }

-    ::-webkit-slider-thumb {
-      height: 0.8rem;
+    #progress::-webkit-slider-thumb {
+      height: 1rem;
+      width: 1rem;
    }

-    ::-ms-thumb {
-      height: 0.8rem;
+    #progress::-ms-thumb {
+      height: 1rem;
+      width: 1rem;
    }
  }

@@ -138,6 +127,11 @@ function handleFav() {
      width: 20rem !important;
    }

+    @include allPhones {
+      width: 100% !important;
+      margin-bottom: $small;
+    }
+
    .time {
      font-size: $medium;
      height: fit-content;
@@ -155,42 +149,12 @@ function handleFav() {
    }
  }

-  // hotkeys
+  // hotkey
  .buttons {
    display: grid;
    place-items: center;
-    scale: 1.2;
+    transform: scale(1.2);
    border: none;
  }
 }
-
-.right-group {
-  display: grid;
-  justify-content: flex-end;
-  grid-template-columns: repeat(2, max-content);
-  align-items: center;
-  height: 4rem;
-  padding-right: 2rem;
-
-  button {
-    padding: 0;
-    height: 3rem;
-    width: 3rem;
-    border: none;
-  }
-
-  button.repeat {
-    background-color: transparent;
-
-    svg {
-      transform: scale(0.75);
-    }
-  }
-
-  button.repeat.repeat-disabled {
-    svg {
-      opacity: 0.25;
-    }
-  }
-}
 </style>
--- a/src/components/BottomBar/Left.vue
+++ b/src/components/BottomBar/Left.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="left-group" v-auto-animate>
+  <div v-auto-animate class="left-group">
    <HeartSvg
-      v-if="settings.use_np_img"
+      v-if="settings.use_np_img && !isMobile"
      :state="queue.currenttrack?.is_favorite"
-      @handleFav="emit('handleFav')"
+      @handleFav="$emit('handleFav')"
    />
    <RouterLink
      v-else
-      title="go to album"
+      title="Go to Now Playing"
      :to="{
-        name: Routes.album,
+        name: Routes.nowPlaying,
        params: {
-          hash: queue.currenttrack?.albumhash || ' ',
+          tab: 'home',
        },
+        replace: true,
      }"
    >
      <img
@@ -27,40 +28,46 @@
        color: getShift(colors.theme1, [0, -170]),
      }"
    >
-      <ArtistName
-        :artists="queue.currenttrack?.artist || []"
-        :albumartists="
-          queue.currenttrack?.albumartist || 'Welcome to Swing Music'
-        "
-        class="artist"
-      />
      <div v-tooltip class="title">
        <span class="ellip">
          {{ queue.currenttrack?.title || "Hello there" }}
        </span>
        <MasterFlag :bitrate="queue.currenttrack?.bitrate || 0" />
      </div>
+      <ArtistName
+        :artists="queue.currenttrack?.artists || []"
+        :albumartists="
+          queue.currenttrack?.albumartists || 'Welcome to Swing Music'
+        "
+        class="artist"
+      />
    </div>
+    <Actions v-if="isLargerMobile" @handleFav="$emit('handleFav')" />
+    <HotKeys v-if="isMobile" />
  </div>
 </template>

 <script setup lang="ts">
-import { Routes } from "@/router";
 import { paths } from "@/config";
-import ArtistName from "@/components/shared/ArtistName.vue";
+import { Routes } from "@/router";
 import { getShift } from "@/utils/colortools/shift";
-import useColorStore from "@/stores/colors";

-import useSettingsStore from "@/stores/settings";
 import useQStore from "@/stores/queue";
+import useColorStore from "@/stores/colors";
+import useSettingsStore from "@/stores/settings";
+import { isLargerMobile, isMobile } from "@/stores/content-width";
+
+import Actions from "./Right.vue";
 import HeartSvg from "../shared/HeartSvg.vue";
 import MasterFlag from "../shared/MasterFlag.vue";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";

 const queue = useQStore();
 const settings = useSettingsStore();
 const colors = useColorStore();

-const emit = defineEmits<{
+defineEmits<{
  (e: "handleFav"): void;
 }>();
 </script>
@@ -68,7 +75,6 @@ const emit = defineEmits<{
 <style lang="scss">
 .left-group {
  display: grid;
-  padding-left: 1rem;
  grid-template-columns: max-content 1fr;
  gap: $small;
  align-items: center;
@@ -104,5 +110,18 @@ const emit = defineEmits<{
      align-items: center;
    }
  }
+  @include allPhones {
+    height: 4rem;
+    grid-template-columns: max-content 1fr max-content;
+
+    .heart-button {
+      height: max-content;
+      border: none !important;
+    }
+  }
+
+  @media screen and (min-width: 550px) {
+    grid-template-columns: max-content 1fr max-content max-content;
+  }
 }
 </style>
--- a/src/components/BottomBar/Right.vue
+++ b/src/components/BottomBar/Right.vue
@@ -0,0 +1,94 @@
+<template>
+  <div class="right-group">
+    <LyricsButton v-if="settings.use_lyrics_plugin || lyrics.exists" />
+    <Volume />
+    <button
+      class="repeat"
+      :class="{ 'repeat-disabled': settings.no_repeat }"
+      :title="
+        settings.repeat_all
+          ? 'Repeat all'
+          : settings.no_repeat
+          ? 'No repeat'
+          : 'Repeat one'
+      "
+      @click="settings.toggleRepeatMode"
+    >
+      <RepeatOneSvg v-if="settings.repeat_one" />
+      <RepeatAllSvg v-else />
+    </button>
+    <button title="Shuffle" @click="queue.shuffleQueue">
+      <ShuffleSvg />
+    </button>
+    <HeartSvg
+      v-if="!hideHeart"
+      title="Favorite"
+      :state="queue.currenttrack?.is_favorite"
+      @handleFav="() => $emit('handleFav')"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import useQueue from "@/stores/queue";
+import useSettings from "@/stores/settings";
+import useLyrics from "@/stores/lyrics";
+
+import Volume from "./Volume.vue";
+import HeartSvg from "../shared/HeartSvg.vue";
+import LyricsButton from "../shared/LyricsButton.vue";
+import RepeatAllSvg from "@/assets/icons/repeat.svg";
+import RepeatOneSvg from "@/assets/icons/repeat-one.svg";
+import ShuffleSvg from "@/assets/icons/shuffle.svg";
+
+const queue = useQueue();
+const lyrics = useLyrics();
+const settings = useSettings();
+
+defineProps<{
+  hideHeart?: boolean;
+}>();
+
+defineEmits<{
+  (event: "handleFav"): void;
+}>();
+</script>
+
+<style lang="scss">
+.right-group {
+  display: grid;
+  justify-content: flex-end;
+  grid-template-columns: repeat(5, max-content);
+  align-items: center;
+  height: 4rem;
+
+  @include allPhones {
+    width: max-content;
+  }
+
+  button {
+    height: 3rem !important;
+    width: 3rem !important;
+    background-color: transparent;
+    border: solid 1px transparent;
+
+    &:hover {
+      border: solid 1px $gray3 !important;
+      background-color: $gray !important;
+    }
+  }
+
+  .lyrics,
+  .repeat {
+    svg {
+      transform: scale(0.75);
+    }
+  }
+
+  button.repeat.repeat-disabled {
+    svg {
+      opacity: 0.25;
+    }
+  }
+}
+</style>
--- a/src/components/BottomBar/Volume.vue
+++ b/src/components/BottomBar/Volume.vue
@@ -0,0 +1,105 @@
+<template>
+  <button class="speaker" @wheel.passive="handleMouseWheel">
+    <div class="icon" @click="settings.toggleMute">
+      <VolumeMuteSvg v-if="settings.mute || settings.volume == 0.0" />
+      <VolumeMidSvg v-else-if="settings.volume > 0.75" />
+      <VolumeLowSvg v-else-if="settings.volume > 0" />
+    </div>
+    <div class="dialog rounded-sm pad-sm">
+      <input
+        id="volume"
+        type="range"
+        name="volume"
+        max="1"
+        min="0"
+        step="0.01"
+        :value="settings.volume"
+        @input="changeVolume"
+      />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+import useSettingsStore from "@/stores/settings";
+import VolumeMuteSvg from "@/assets/icons/volume-mute.svg";
+import VolumeLowSvg from "@/assets/icons/volume-low.svg";
+import VolumeMidSvg from "@/assets/icons/volume-mid.svg";
+
+const settings = useSettingsStore();
+
+const changeVolume = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  settings.setVolume(parseFloat(target.value));
+};
+
+const handleMouseWheel = (event: WheelEvent) => {
+  event.preventDefault();
+  const delta = event.deltaY / 1000;
+  let newVolume = settings.volume - delta / 3;
+
+  if (newVolume > 1) {
+    newVolume = 1;
+  }
+
+  if (newVolume < 0) {
+    newVolume = 0;
+  }
+
+  settings.setVolume(newVolume);
+};
+</script>
+
+<style lang="scss">
+.speaker {
+  position: relative;
+
+  .icon {
+    height: 100%;
+    width: 100%;
+    display: grid;
+    place-items: center;
+  }
+
+  svg {
+    transform: scale(0.75);
+  }
+
+  .dialog {
+    background-color: $gray4;
+    position: absolute;
+    bottom: 2.95rem;
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    visibility: hidden;
+    transition: visibility 0.2s ease-in;
+    transition-delay: 0.25s;
+    cursor: default;
+
+    input {
+      width: max-content;
+      margin: 0;
+
+      &::-webkit-slider-thumb {
+        height: 1rem;
+        width: 1rem;
+        cursor: pointer;
+      }
+
+      &::-moz-range-thumb {
+        height: 1rem;
+        width: 1rem;
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:hover {
+    .dialog {
+      transition-delay: 0.25s;
+      visibility: visible;
+    }
+  }
+}
+</style>
--- a/src/components/ContextMenu.vue
+++ b/src/components/ContextMenu.vue
@@ -1,19 +1,19 @@
 <template>
  <div
-    class="context-menu rounded shadow-lg no-select"
-    ref="contextMenuRef"
    id="context-menu"
+    ref="contextMenuRef"
+    class="context-menu rounded shadow-lg no-select"
    :style="{
-      opacity: context.visible ? '1' : '0',
+      visibility: context.visible ? 'visible' : 'hidden',
    }"
  >
    <ContextItem
-      class="context-item"
      v-for="option in context.options"
      :key="option.label"
+      class="context-item"
      :class="[{ critical: option.critical }, option.type]"
      :option="option"
-      :childrenShowMode="settings.contextChildrenShowMode"
+      :children-show-mode="settings.contextChildrenShowMode"
      @hideContextMenu="context.hideContextMenu()"
    />
  </div>
@@ -42,7 +42,8 @@ context.$subscribe((mutation, state) => {
      }
      watcher = onClickOutside(
        contextMenuRef,
-        (e) => {
+        (e: any) => {
+          if (e.type == "pointerup") return;
          context.hideContextMenu();
        },
        {
@@ -64,7 +65,7 @@ context.$subscribe((mutation, state) => {
  position: fixed;
  top: 0;
  left: 0;
-  width: 12rem;
+  width: 12.5rem;
  z-index: 10000 !important;
  transform: scale(0);
  height: min-content;
@@ -77,11 +78,17 @@ context.$subscribe((mutation, state) => {
  .separator {
    height: 1px;
    padding: 0;
+    margin-left: -$medium;
+    width: calc(100% + $medium * 2);
+    pointer-events: none;
  }

  .critical {
+    color: $red;
+
    &:hover {
      background-color: $red;
+      color: $white;
    }
  }
 }
--- a/src/components/Contextmenu/ContextItem.vue
+++ b/src/components/Contextmenu/ContextItem.vue
@@ -1,31 +1,33 @@
 <template>
  <div
+    ref="parentRef"
    class="context-item"
    @mouseenter="
      option.children &&
+        !isSmall &&
        childrenShowMode === contextChildrenShowMode.hover &&
        showChildren()
    "
    @mouseleave="
      option.children &&
+        !isSmall &&
        childrenShowMode === contextChildrenShowMode.hover &&
        hideChildren()
    "
    @click="runAction"
-    ref="parentRef"
  >
-    <div class="icon image" :class="option.icon"></div>
+    <div class="icon image" v-html="option.icon"></div>
    <div class="label ellip">{{ option.label }}</div>
-    <div class="more image" v-if="option.children"></div>
+    <div v-if="option.children" class="more" v-html="ExpandIcon"></div>
    <div
-      class="children rounded shadow-sm"
      v-if="option.children"
      ref="childRef"
+      class="children rounded shadow-sm"
    >
      <div
-        class="context-item"
        v-for="child in option.children"
        :key="child.label"
+        class="context-item"
        :class="[{ critical: child.critical }, child.type]"
        @click="child.action && runChildAction(child.action)"
      >
@@ -41,8 +43,10 @@
 import { createPopper, Instance } from "@popperjs/core";
 import { ref } from "vue";

-import { contextChildrenShowMode } from "@/composables/enums";
+import { contextChildrenShowMode } from "@/enums";
+import { ExpandIcon } from "@/icons";
 import { Option } from "@/interfaces";
+import { isSmall } from "@/stores/content-width";

 const props = defineProps<{
  option: Option;
@@ -50,6 +54,7 @@ const props = defineProps<{
 }>();

 const emit = defineEmits<{
+  // eslint-disable-next-line no-unused-vars
  (event: "hideContextMenu"): void;
 }>();

@@ -72,9 +77,9 @@ function showChildren() {
      placement: "right-start",
      modifiers: [
        {
-          name: "offset",
+          name: "flip",
          options: {
-            offset: [-5, -2],
+            fallbackPlacements: ["left-start", "auto"],
          },
        },
      ],
@@ -129,18 +134,23 @@ function runChildAction(action: () => void) {
    height: 1.5rem;
    width: 1.5rem;
    position: absolute;
-    right: $small;
-    background-image: url("../../assets/icons/expand.svg");
+    right: 0;
+    transform: scale(0.65);
  }

  .children {
    position: absolute;
    width: 12rem;
-
+    z-index: 10;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transform: scale(0);
    background-color: $context;
    transform: scale(0);
    padding: $medium;
-    border: solid 1px $gray;
+    border: solid 1px $gray3;
+
+    max-height: calc(100vh / 2);

    .context-item {
      padding: $small 1rem;
@@ -156,54 +166,25 @@ function runChildAction(action: () => void) {
    background: $darkestblue;
  }

-  .children {
-    transform: scale(0);
-    overflow: hidden;
-    max-height: calc(100vh - 10rem);
-  }
-
  .icon {
    height: 1.25rem;
    width: 1.25rem;
    margin-right: $small;
+
+    svg {
+      height: 100%;
+      width: 100%;
+      transform: scale(1.15);
+    }
+  }
+
+  // add to queue icon
+  &:nth-child(3) .icon > svg {
+    transform: scale(0.9);
  }

  .label {
    width: 9rem;
  }
-
-  .folder {
-    background-image: url("../../assets/icons/folder.svg");
-    filter: invert(100%);
-  }
-
-  .artist {
-    background-image: url("../../assets/icons/artist.svg");
-  }
-
-  .album {
-    background-image: url("../../assets/icons/album.svg");
-  }
-
-  .delete {
-    background-image: url("../../assets/icons/delete.svg");
-  }
-
-  .plus {
-    background-image: url("../../assets/icons/plus.svg");
-  }
-
-  .play_next {
-    background-image: url("../../assets/icons/add_to_queue.svg");
-  }
-
-  .add_to_queue {
-    background-image: url("../../assets/icons/add-to-queue.svg");
-    transform: scale(0.8); // reason: icon is not from same source as other
-  }
-
-  .heart {
-    background-image: url("../../assets/icons/heart.svg");
-  }
 }
 </style>
--- a/src/components/Favorites/RecentsItemCard.vue
+++ b/src/components/Favorites/RecentsItemCard.vue
@@ -0,0 +1,105 @@
+<template>
+  <RouterLink
+    class="recent-fav-item rounded"
+    :class="fav.type"
+    :to="{
+      name: fav.type === 'album' ? Routes.album : Routes.artist,
+      params:
+        fav.type === 'album'
+          ? { albumhash: fav.item.albumhash }
+          : { hash: fav.item.artisthash },
+    }"
+  >
+    <div class="imagegroup">
+      <img
+        :src="
+          fav.type === 'album'
+            ? paths.images.thumb.large + fav.item.image
+            : paths.images.artist.large + fav.item.image
+        "
+        alt=""
+        class="rounded-sm"
+      />
+    </div>
+    <div
+      class="name ellip"
+      :title="fav.type === 'artist' ? fav.item.name : fav.item.title"
+    >
+      {{ fav.type === "artist" ? fav.item.name : fav.item.title }}
+    </div>
+    <div class="label ellip" :class="{ on_artist: fav.type === 'artist' }">
+      {{ fav.type === "album" ? fav.item.artist : "Artist" }}
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { RecentFavResult } from "@/interfaces";
+import { paths } from "../../config";
+import { Routes } from "@/router";
+
+defineProps<{
+  fav: RecentFavResult;
+}>();
+</script>
+
+<style lang="scss">
+.recent-fav-item {
+  flex: 0 0 10.1rem;
+
+  padding: $medium;
+  height: 100%;
+  display: grid;
+  gap: $small;
+  height: max-content;
+
+  .imagegroup {
+    position: relative;
+    display: flex;
+  }
+
+  &:hover {
+    background-color: $gray5;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .name {
+    font-size: 0.9rem;
+  }
+
+  .label {
+    font-size: 0.8rem;
+    color: $gray1;
+    font-weight: bold;
+    border-radius: 1rem;
+    text-transform: capitalize;
+    margin-top: -$smaller;
+  }
+
+  .on_artist {
+    background-color: $gray5;
+    padding: 0.1rem $small;
+    color: $white;
+  }
+
+  &.artist {
+    img {
+      border-radius: 50%;
+    }
+
+    .name {
+      margin: 0 auto;
+      width: 100%;
+      text-align: center;
+    }
+
+    .label {
+      margin: 0 auto;
+      width: max-content;
+    }
+  }
+}
+</style>
--- a/src/components/FolderView/BreadCrumbNav.vue
+++ b/src/components/FolderView/BreadCrumbNav.vue
@@ -1,11 +1,11 @@
 <template>
  <div class="breadcrumb-nav">
    <div
-      class="path"
      v-for="path in subPaths"
      :key="path.path"
+      class="path"
      :class="{ inthisfolder: path.active }"
-      @click.prevent="emit('navigate', path.path)"
+      @click.prevent="$emit('navigate', path.path)"
    >
      <a class="text">{{ path.name }}</a>
      <!-- 👆 the a tag was misused to avoid rewriting css after moving this code to a component -->
@@ -22,7 +22,7 @@ defineProps<{
  subPaths: subPath[];
 }>();

-const emit = defineEmits<{
+defineEmits<{
  (e: "navigate", path: string): void;
 }>();

--- a/src/components/FolderView/FolderItem.vue
+++ b/src/components/FolderView/FolderItem.vue
@@ -1,35 +1,36 @@
 <template>
  <router-link :to="{ name: Routes.folder, params: { path: folder.path } }">
    <div
+      v-auto-animate
      class="f-item"
-      @click="(e) => (folder_page ? null : handleClick(e))"
-      @mouseover="mouse_over = true"
-      @mouseleave="mouse_over = false"
      :style="{
        backgroundColor: is_checked ? '#234ece' : '',
      }"
-      v-auto-animate
+      :class="{ context_menu_showing }"
+      @click="(e) => (folder_page ? null : handleClick(e))"
+      @mouseover="mouse_over = true"
+      @mouseleave="mouse_over = false"
+      @contextmenu.prevent="(e) => (!folder_page ? null : showContextMenu(e))"
    >
-      <div class="check" v-if="!folder_page">
-        <CheckSvg v-if="!is_checked && mouse_over" />
-        <CheckFilledSvg v-if="is_checked" />
-      </div>
-
-      <FolderSvg v-if="!folder.is_sym" />
      <SymLinkSvg v-if="folder.is_sym" />
+      <FolderSvg v-else />
      <div class="info">
        <div class="f-item-text ellip">{{ folder.name }}</div>
-        <div class="f-count" v-if="folder.count">
+        <div v-if="folder.count" class="f-count">
          {{ folder.count + ` File${folder.count == 1 ? "" : "s"}` }}
        </div>
      </div>
+      <div v-if="!folder_page" class="check">
+        <CheckSvg v-if="!is_checked && mouse_over" />
+        <CheckFilledSvg v-if="is_checked" />
+      </div>
    </div>
  </router-link>
 </template>

 <script setup lang="ts">
-import { ref } from "vue";
 import { Routes } from "@/router";
+import { ref } from "vue";

 import { Folder } from "@/interfaces";

@@ -38,6 +39,8 @@ import SymLinkSvg from "@/assets/icons/symlink.svg";

 import CheckFilledSvg from "@/assets/icons/check.filled.svg";
 import CheckSvg from "@/assets/icons/square.svg";
+import { showFolderContextMenu } from "@/helpers/contextMenuHandler";
+import { ContextSrc } from "@/enums";

 const props = defineProps<{
  folder: Folder;
@@ -51,6 +54,7 @@ const emit = defineEmits<{
 }>();

 const mouse_over = ref(false);
+const context_menu_showing = ref(false);

 function handleClick(e: MouseEvent) {
  e.preventDefault();
@@ -64,6 +68,15 @@ function handleClick(e: MouseEvent) {
    emit("navigate");
  }
 }
+
+function showContextMenu(e: MouseEvent) {
+  showFolderContextMenu(
+    e,
+    context_menu_showing,
+    ContextSrc.FolderCard,
+    props.folder.path
+  );
+}
 </script>

 <style lang="scss">
@@ -75,41 +88,48 @@ function handleClick(e: MouseEvent) {
  background-color: $gray;
  border-radius: $medium;
  position: relative;
+  padding: 0 0 0 1rem;
+  gap: $small;
+
+  &.context_menu_showing {
+    background-color: $gray4;
+  }
+
+  svg {
+    color: $gray1;
+  }

  .f-count {
    font-size: $medium;
    font-weight: 700;
    color: $gray1;
-    margin-top: $smaller;
+    white-space: nowrap;
  }

  .check {
    z-index: 10;
    position: absolute;
    top: $smaller;
-    right: -$smaller;
+    right: $smaller;

    border: none;
    outline: none;
-    scale: 0.75;
    color: $darkblue;
+    transform: scale(0.75);
  }

-  @include phone-only {
+  @include largePhones {
    height: 4rem;
  }

-  svg {
-    margin: 0 $small 0 1rem;
-    color: $gray1;
-  }
-
  .f-item-text {
    margin-right: 1rem;
  }

  &:hover {
-    background: $gray3;
+    .options {
+      display: block;
+    }
  }
 }
 </style>
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,7 +1,9 @@
 <template>
  <div
    class="f-container rounded-sm"
-    :class="{ 'list-mode': settings.folder_list_mode }"
+    :class="{
+      'list-mode': isIphoneSE ? true : settings.folder_list_mode,
+    }"
  >
    <div id="f-items" class="rounded">
      <FolderItem
@@ -18,6 +20,9 @@
 import { Folder } from "@/interfaces";
 import FolderItem from "./FolderItem.vue";
 import useSettingsStore from "@/stores/settings";
+import { isIphoneSE } from "@/stores/content-width";
+
+import { ref } from "vue";

 defineProps<{
  folders: Folder[];
@@ -38,27 +43,30 @@ const settings = useSettingsStore();
 }

 .f-item:hover {
-  // cursor: pointer;
-  background-color: $gray5;
+  background-color: $gray4;
 }

 .f-container.list-mode > #f-items {
  grid-template-columns: 1fr;
  gap: 0;
-  // border: solid 1px $gray;
-  // padding: 1rem;

  .f-item {
    transition: none;
    height: 3.25rem;
    border-radius: $small;
    background-color: transparent;
+    padding-left: $small;

-    .f-count {
-      position: absolute;
-      right: 1.25rem;
-      bottom: 50%;
-      translate: 0 50%;
+    .options {
+      display: block;
+      background-color: transparent !important;
+    }
+
+    .info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-right: $small;
    }

    &:hover {
@@ -67,5 +75,3 @@ const settings = useSettingsStore();
  }
 }
 </style>
-
-<!-- TODO: ADD BUTTON TO TOGGLE LIST MODE -->
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -1,3 +0,0 @@
-<template>
-  <h1>This is your Homepage</h1>
-</template>
--- a/src/components/HomeView/Browse.vue
+++ b/src/components/HomeView/Browse.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="homebrowse">
+    <div class="btitle"><b>Browse Library</b></div>
+    <div class="browselist">
+      <RouterLink
+        v-for="i in browselist"
+        :key="i.title"
+        class="browseitem rounded-sm t-center"
+        :to="{ name: i.route, params: i.params }"
+        :style="{ width: `${album_card_with - 24}px` }"
+      >
+        {{ i.title }}
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Routes } from "@/router";
+import { album_card_with } from "@/stores/content-width";
+
+const browselist = [
+  {
+    title: "Folders",
+    route: Routes.folder,
+    params: {
+      path: "$home",
+    },
+  },
+  {
+    title: "Albums",
+    route: Routes.AlbumList,
+  },
+  {
+    title: "Artists",
+    route: Routes.ArtistList,
+  },
+];
+</script>
+
+<style lang="scss">
+.homebrowse {
+  padding: 1.5rem 0;
+  padding-left: $small;
+
+  .btitle {
+    font-size: 1.15rem;
+    margin-bottom: 1rem;
+  }
+
+  .browselist {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1.5rem;
+    margin-top: $small;
+  }
+
+  .browseitem {
+    padding: 1.5rem 0;
+    background-color: $gray;
+    color: $white;
+  }
+
+  .browseitem:hover {
+    background-color: $gray5;
+  }
+}
+</style>
--- a/src/components/LeftSidebar/MobileNav.vue
+++ b/src/components/LeftSidebar/MobileNav.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="mobile-nav">
+    <router-link
+      v-for="menu in menus"
+      :key="menu.name"
+      :to="{
+        name: menu.route_name,
+        params: menu?.params,
+        query: menu.query && menu.query(),
+      }"
+    >
+      <div v-wave class="rounded-sm">
+        <div
+          v-if="menu.separator"
+          :class="{
+            separator: menu.separator,
+          }"
+        ></div>
+        <div
+          v-else
+          id="home-button"
+          class="nav-button"
+          :class="{ active: $route.name === menu.route_name }"
+      >
+          <div class="in">
+            <component :is="menu.icon"></component>
+            <span>{{ menu.name }}</span>
+          </div>
+        </div>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { menus } from "./navitems";
+</script>
+
+<style scoped></style>
--- a/src/components/LeftSidebar/NP/Bitrate.vue
+++ b/src/components/LeftSidebar/NP/Bitrate.vue
@@ -0,0 +1,29 @@
+<template>
+  <div
+    v-if="q.currenttrack?.bitrate"
+    class="bitrate"
+    title="file type • bitrate"
+  >
+    {{ q.currenttrack.filepath?.split('.').pop() }} • {{ q.currenttrack.bitrate }}
+  </div>
+</template>
+
+<script setup lang="ts">
+import useQueueStore from "@/stores/queue";
+
+const q = useQueueStore();
+</script>
+
+<style lang="scss">
+.bitrate {
+  position: absolute;
+  font-size: 0.75rem;
+  width: max-content;
+  padding: 0.2rem 0.35rem;
+  bottom: $medium;
+  left: $small;
+  background-color: $gray4;
+  border-radius: $smaller;
+  text-transform: uppercase;
+}
+</style>
--- a/src/components/LeftSidebar/NP/HotKeys.vue
+++ b/src/components/LeftSidebar/NP/HotKeys.vue
@@ -1,33 +1,33 @@
 <template>
-  <div
-    class="hotkeys rounded-sm no-scroll"
-
-  >
-    <button @click.prevent="q.playPrev">
+  <div class="hotkeys no-scroll">
+    <button @click.prevent="queue.playPrev">
      <PrevSvg />
    </button>
-    <button @click.prevent="q.playPause">
-      <PauseSvg v-if="q.playing" />
+    <button @click.prevent="queue.playPause">
+      <Spinner v-if="buffering && queue.playing" />
+      <PauseSvg v-else-if="queue.playing" />
      <PlaySvg v-else />
    </button>
-    <button @click.prevent="q.playNext">
+    <button @click.prevent="queue.playNext">
      <NextSvg />
    </button>
  </div>
 </template>

 <script setup lang="ts">
+import { usePlayer } from "@/stores/player";
 import useQStore from "@/stores/queue";

 import {
-  default as NextSvg,
-  default as PrevSvg,
-} from "../../../assets/icons/next.svg";
-import PauseSvg from "../../../assets/icons/pause.svg";
-import PlaySvg from "../../../assets/icons/play.svg";
-
-const q = useQStore();
+default as NextSvg,
+default as PrevSvg,
+} from "@/assets/icons/next.svg";
+import PauseSvg from "@/assets/icons/pause.svg";
+import PlaySvg from "@/assets/icons/play.svg";
+import Spinner from "@/components/shared/Spinner.vue";

+const queue = useQStore();
+const { buffering } = usePlayer();
 </script>

 <style lang="scss">
@@ -36,12 +36,13 @@ const q = useQStore();
  grid-template-columns: 1fr 4rem 1fr;
  gap: 1rem;
  height: 100%;
+  align-items: center;

  button {
    height: 100%;
    padding: 0;
    background: none;
-    border: none;
+    border: 1px solid transparent;
    border-radius: 0;

    &:hover {
@@ -56,7 +57,17 @@ const q = useQStore();
  }

  button:nth-child(2) {
-    width: 100%;
+    width: 4rem;
+  }
+
+  @include allPhones {
+    grid-template-columns: 1fr max-content 1fr;
+    position: relative;
+    margin-right: -$small;
+
+    button:first-child {
+      margin-left: $small;
+    }
  }
 }
-</style>
+</style>
--- a/src/components/LeftSidebar/NP/Progress.vue
+++ b/src/components/LeftSidebar/NP/Progress.vue
@@ -6,12 +6,12 @@
    min="0"
    :max="time.full"
    step="0.1"
-    @change="seek()"
    :style="{
      backgroundSize: `${
-        (time.current / (q.currenttrack?.duration || 0)) * 100
+        (time.current / (time.full || 0)) * 100
      }% 100%`,
    }"
+    @change="seek"
  />
 </template>

@@ -21,8 +21,9 @@ import useQStore from "@/stores/queue";
 const q = useQStore();

 const { duration: time } = q;
-const seek = () => {
-  const elem = document.getElementById("progress") as HTMLInputElement;
+
+const seek = (e: Event) => {
+  const elem = e.target as HTMLInputElement;
  const value = elem.value;

  q.seek(value as unknown as number);
--- a/src/components/LeftSidebar/NP/SongCard.vue
+++ b/src/components/LeftSidebar/NP/SongCard.vue
@@ -1,6 +1,6 @@
 <template>
  <Motion
-    :key="q.currenttrack?.filepath"
+    :key="q.currenttrack?.trackhash"
    :initial="{ opacity: 0, scale: 0.9 }"
    :animate="{
      opacity: 1,
@@ -9,66 +9,53 @@
    }"
    :exit="{ opacity: 0, scale: 0.9 }"
  >
-    <div class="sidebar-songcard rounded-sm" v-wave>
+    <div v-wave class="sidebar-songcard rounded-sm">
      <router-link
        :to="{
-          name: 'AlbumView',
+          name: Routes.nowPlaying,
          params: {
-            hash: q.currenttrack?.albumhash ? q.currenttrack.albumhash : ' ',
+            tab: 'home',
          },
        }"
      >
        <img
          :src="imguri + q.currenttrack?.image"
          alt=""
-          class="l-image rounded-sm force-lm"
+          class="l-image rounded-sm"
        />
      </router-link>
-      <div
-        id="bitrate"
-        v-if="q.currenttrack?.bitrate"
-        title="file type • bitrate"
-      >
-        {{ q.currenttrack.filetype }} • {{ q.currenttrack.bitrate }}
-      </div>
+      <Bitrate />
    </div>
  </Motion>
 </template>

 <script setup lang="ts">
-import useQueueStore from "@/stores/queue";
+import { Motion } from "motion/vue";
+import { Routes } from "@/router";

 import { paths } from "@/config";
+import useQueueStore from "@/stores/queue";
+
+import Bitrate from "./Bitrate.vue";

 const imguri = paths.images.thumb.large;
 const q = useQueueStore();
 </script>

 <style lang="scss">
+.l-image {
+  width: 100%;
+}
+
 .sidebar-songcard {
  width: 100%;
  position: relative;
  width: 13rem;
-  height: 13rem;

  img {
    cursor: pointer;
    width: 100%;
    height: auto;
-    aspect-ratio: 1;
-    object-fit: cover;
-  }
-
-  #bitrate {
-    position: absolute;
-    font-size: 0.75rem;
-    width: max-content;
-    padding: 0.2rem 0.35rem;
-    bottom: $medium;
-    left: $small;
-    background-color: $gray4;
-    border-radius: $smaller;
-    text-transform: uppercase;
  }
 }
 </style>
--- a/src/components/LeftSidebar/NavButtons.vue
+++ b/src/components/LeftSidebar/NavButtons.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="side-nav-container">
+    <router-link
+      v-for="(menu, index) in menus"
+      :key="index"
+      v-wave
+      :to="{
+        name: menu.route_name,
+        params: menu?.params,
+        query: menu.query && menu.query(),
+      }"
+      class="circular nav-item"
+      :class="{
+        separator: menu.separator,
+        active: $route.name === menu.route_name,
+      }"
+    >
+      <div v-if="!menu.separator">
+        <component :is="menu.icon" />
+        <span>{{ menu.name }}</span>
+      </div>
+    </router-link>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { menus } from "./navitems";
+</script>
+
+<style lang="scss">
+.side-nav-container {
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: column;
+  gap: $smaller;
+  overflow: hidden;
+
+  .nav-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: $small 0;
+    font-size: 14px;
+
+    & > div {
+      display: flex;
+      align-items: center;
+    }
+
+    &.active {
+      background-color: $gray5;
+    }
+
+    &:hover {
+      background-color: $gray;
+    }
+  }
+
+  .nav-item.separator {
+    height: 1px;
+    padding: 0;
+  }
+
+  @include allPhones {
+    justify-content: space-between;
+    flex-direction: row;
+
+    .nav-item {
+      justify-content: center;
+    }
+
+    .nav-item span {
+      display: none;
+    }
+
+    .separator {
+      display: none;
+    }
+  }
+
+  svg {
+    margin: 0 $small 0 $small;
+    border-radius: $small;
+    transform: scale(0.9);
+    opacity: 0.75;
+  }
+
+  svg.radiosvg {
+    transform: scale(0.7);
+  }
+}
+</style>
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}`