diff --git a/server/app/albums.py b/server/app/albums.py
new file mode 100644
index 00000000..d29a333c
--- /dev/null
+++ b/server/app/albums.py
@@ -0,0 +1,44 @@
+from typing import List
+from app import models, instances, functions
+
+all_albums: List[models.Album] = []
+
+
+def create_all_albums() -> List[models.Album]:
+    """Creates album objects for all albums"""
+    albums: list[models.Album] = []
+
+    for album in instances.album_instance.get_all_albums():
+        albums.append(models.Album(album))
+
+    return albums
+
+
+def get_album_duration(album: List[models.Track]) -> int:
+    """
+    Gets the duration of an album.
+    """
+
+    album_duration = 0
+
+    for track in album:
+        try:
+            album_duration += track.length
+        except AttributeError:
+            album_duration += track["length"]
+
+    return album_duration
+
+
+def get_album_image(album: list) -> str:
+    """
+    Gets the image of an album.
+    """
+
+    for track in album:
+        img = functions.extract_thumb(track["filepath"])
+
+        if img is not None:
+            return img
+
+    return functions.use_defaults()
diff --git a/server/app/api.py b/server/app/api.py
index 1f72c315..c3d9cb90 100644
--- a/server/app/api.py
+++ b/server/app/api.py
@@ -11,9 +11,6 @@ bp = Blueprint("api", __name__, url_prefix="")
 
 home_dir = helpers.home_dir
 
-all_the_f_albums = helpers.create_all_albums()
-all_the_f_music = helpers.create_all_tracks()
-
 
 def initialize() -> None:
     """
@@ -26,6 +23,9 @@ def initialize() -> None:
 
 initialize()
 
+all_the_f_albums = helpers.create_all_albums()
+all_the_f_music = helpers.create_all_tracks()
+
 
 @bp.route("/")
 def say_hi():
diff --git a/server/app/functions.py b/server/app/functions.py
index 00fdf044..934dfc8b 100644
--- a/server/app/functions.py
+++ b/server/app/functions.py
@@ -8,6 +8,7 @@ from io import BytesIO
 import random
 import datetime
 import mutagen
+import urllib
 
 import requests
 from mutagen.flac import MutagenError
@@ -18,9 +19,7 @@ from PIL import Image
 
 from app import helpers
 from app import instances
-from app import api
-from app import models
-import urllib
+from app import api, settings
 
 
 def populate():
@@ -166,11 +165,11 @@ def extract_thumb(audio_file_path: str) -> str:
     """
     Extracts the thumbnail from an audio file. Returns the path to the thumbnail.
     """
-    webp_path = urllib.parse.quote_plus(audio_file_path.split("/")[-1] + ".webp")
+    webp_path = audio_file_path.split("/")[-1] + ".webp"
     img_path = os.path.join(helpers.app_dir, "images", "thumbnails", webp_path)
 
     if os.path.exists(img_path):
-        return webp_path
+        return urllib.parse.quote(webp_path)
 
     album_art = return_album_art(audio_file_path)
 
@@ -188,7 +187,7 @@ def extract_thumb(audio_file_path: str) -> str:
             except:
                 return None
 
-        return webp_path
+        return urllib.parse.quote(webp_path)
     else:
         return None
 
@@ -321,7 +320,7 @@ def get_album_bio(title: str, albumartist: str):
     Returns the album bio for a given album.
     """
     last_fm_url = "http://ws.audioscrobbler.com/2.0/?method=album.getinfo&api_key={}&artist={}&album={}&format=json".format(
-        helpers.LAST_FM_API_KEY, albumartist, title
+        settings.LAST_FM_API_KEY, albumartist, title
     )
 
     try:
diff --git a/server/app/helpers.py b/server/app/helpers.py
index 7ea82e9b..ed91cc21 100644
--- a/server/app/helpers.py
+++ b/server/app/helpers.py
@@ -16,11 +16,10 @@ from PIL import Image
 from app import instances
 from app import functions
 from app import watchdoge
-from app import models
+from app import models, settings
 
 home_dir = os.path.expanduser("~") + "/"
 app_dir = os.path.join(home_dir, ".musicx")
-LAST_FM_API_KEY = "762db7a44a9e6fb5585661f5f2bdf23a"
 
 
 def background(func):
@@ -43,7 +42,7 @@ def reindex_tracks():
     flag = False
 
     while flag is False:
-        # functions.populate()
+        functions.populate()
         functions.get_all_albums()
         # functions.populate_images()
         # functions.save_t_colors()
@@ -104,14 +103,14 @@ def remove_duplicates(tracklist: List[models.Track]) -> List[models.Track]:
     return tracklist
 
 
-def save_image(url: str, path: str) -> None:
-    """
-    Saves an image from an url to a path.
-    """
+# def save_image(url: str, path: str) -> None:
+#     """
+#     Saves an image from an url to a path.
+#     """
 
-    response = requests.get(url)
-    img = Image.open(BytesIO(response.content))
-    img.save(path, "JPEG")
+#     response = requests.get(url)
+#     img = Image.open(BytesIO(response.content))
+#     img.save(path, "JPEG")
 
 
 def is_valid_file(filename: str) -> bool:
@@ -125,62 +124,7 @@ def is_valid_file(filename: str) -> bool:
         return False
 
 
-def create_config_dir() -> None:
-    """
-    Creates the config directory if it doesn't exist.
-    """
-
-    _home_dir = os.path.expanduser("~")
-    config_folder = os.path.join(_home_dir, app_dir)
-
-    dirs = ["", "images", "images/defaults", "images/artists", "images/thumbnails"]
-
-    for _dir in dirs:
-        path = os.path.join(config_folder, _dir)
-
-        try:
-            os.makedirs(path)
-        except FileExistsError:
-            pass
-
-        os.chmod(path, 0o755)
-
-
-def create_all_tracks() -> List[models.Track]:
-    """
-    Gets all songs under the ~/ directory.
-    """
-    print("Getting all songs...")
-
-    tracks: list[models.Track] = []
-
-    for track in instances.songs_instance.get_all_songs():
-        try:
-            os.chmod(track["filepath"], 0o755)
-        except FileNotFoundError:
-            instances.songs_instance.remove_song_by_filepath(track["filepath"])
-
-        album = instances.album_instance.get_album_by_name(track['album', track['albumartist']])
-
-        if album is None:
-            track['albumid'] = album['albumid']
-            track['image'] = album['image']
-        tracks.append(models.Track(track))
-
-    return tracks
-
-
-def create_all_albums() -> List[models.Album]:
-    """Creates album objects for all albums"""
-    albums: list[models.Album] = []
-
-    for album in instances.album_instance.get_all_albums():
-        albums.append(models.Album(album))
-
-    return albums
-
-
-def extract_colors(image) -> list:
+def extract_image_colors(image) -> list:
     """Extracts 2 of the most dominant colors from an image."""
     try:
         colors = sorted(colorgram.extract(image, 2), key=lambda c: c.hsl.h)
@@ -194,33 +138,3 @@ def extract_colors(image) -> list:
         formatted_colors.append(color)
 
     return formatted_colors
-
-
-def get_album_duration(album: List[models.Track]) -> int:
-    """
-    Gets the duration of an album.
-    """
-
-    album_duration = 0
-
-    for track in album:
-        try:
-            album_duration += track.length
-        except AttributeError:
-            album_duration += track["length"]
-
-    return album_duration
-
-
-def get_album_image(album: list) -> str:
-    """
-    Gets the image of an album.
-    """
-
-    for track in album:
-        img = functions.extract_thumb(track["filepath"])
-
-        if img is not None:
-            return img
-
-    return functions.use_defaults()
diff --git a/server/app/models.py b/server/app/models.py
index e5f31ba7..1244519a 100644
--- a/server/app/models.py
+++ b/server/app/models.py
@@ -253,6 +253,7 @@ class Track:
 
     def __init__(self, tags):
         self.trackid = tags["_id"]["$oid"]
+        self.albumid = tags["albumid"]
         self.title = tags["title"]
         self.artists = tags["artists"].split(", ")
         self.albumartist = tags["albumartist"]
diff --git a/server/app/prep.py b/server/app/prep.py
new file mode 100644
index 00000000..ffea0136
--- /dev/null
+++ b/server/app/prep.py
@@ -0,0 +1,23 @@
+import os
+from app import settings
+
+
+def create_config_dir() -> None:
+    """
+    Creates the config directory if it doesn't exist.
+    """
+
+    _home_dir = os.path.expanduser("~")
+    config_folder = os.path.join(_home_dir, settings.CONFIG_FOLDER)
+
+    dirs = ["", "images", "images/artists", "images/thumbnails"]
+
+    for _dir in dirs:
+        path = os.path.join(config_folder, _dir)
+
+        try:
+            os.makedirs(path)
+        except FileExistsError:
+            pass
+
+        os.chmod(path, 0o755)
diff --git a/server/app/settings.py b/server/app/settings.py
new file mode 100644
index 00000000..53b0e8f4
--- /dev/null
+++ b/server/app/settings.py
@@ -0,0 +1,2 @@
+CONFIG_FOLDER = "alice"
+LAST_FM_API_KEY = "762db7a44a9e6fb5585661f5f2bdf23a"
diff --git a/server/app/tracks.py b/server/app/tracks.py
new file mode 100644
index 00000000..c68499d7
--- /dev/null
+++ b/server/app/tracks.py
@@ -0,0 +1,34 @@
+import os
+from typing import List
+from app import models, instances
+
+
+ALL_MUSIC: List[models.Track] = []
+
+
+def create_all_tracks() -> List[models.Track]:
+    """
+    Gets all songs under the ~/ directory.
+    """
+    print("Getting all songs...")
+
+    tracks: list[models.Track] = []
+
+    for track in instances.songs_instance.get_all_songs():
+        print(track)
+        try:
+            os.chmod(track["filepath"], 0o755)
+        except FileNotFoundError:
+            instances.songs_instance.remove_song_by_filepath(track["filepath"])
+
+        album = instances.album_instance.get_album_by_name(
+            track["album"], track["albumartist"]
+        )
+
+        track["albumid"] = album["_id"]["$oid"]
+        track["image"] = album["image"]
+
+        tracks.append(models.Track(track))
+
+    ALL_MUSIC.clear()
+    ALL_MUSIC.extend(tracks)
diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss
index e862a4c6..41ffb3ae 100644
--- a/src/assets/css/BottomBar/BottomBar.scss
+++ b/src/assets/css/BottomBar/BottomBar.scss
@@ -8,6 +8,18 @@
     height: 100%;
     padding-right: $small;
 
+    .ctrl-btn {
+      height: 2rem;
+      width: 2rem;
+      background-size: 1.5rem !important;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: $red;
+      }
+    }
+
     @include phone-only {
       grid-template-columns: 1fr 9.2rem;
     }
@@ -76,28 +88,15 @@
       align-items: center;
       gap: $small;
 
-      & > * {
-        height: 2rem;
-        width: 2rem;
-        background-size: 1.2rem !important;
-        background-position: 45% 50%;
-        cursor: pointer;
-        border-radius: 0.5rem;
-
-        &:hover {
-          background-color: rgb(170, 50, 50);
-        }
-      }
-
-      .heart {
+      #heart {
         background-image: url(../../icons/heart.svg);
       }
 
-      .add-to {
+      #add-to {
         background-image: url(../../icons/plus.svg);
       }
 
-      .repeat {
+      #repeat {
         background-image: url(../../icons/repeat.svg);
       }
     }
diff --git a/src/assets/icons/album.svg b/src/assets/icons/album.svg
index a3c051aa..345ba566 100644
--- a/src/assets/icons/album.svg
+++ b/src/assets/icons/album.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><linearGradient id="LHhUpK35B2wrWQe7tomNwa" x1="-12.522" x2="26.001" y1="2.892" y2="41.415" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9332bf"></stop><stop offset="1" stop-color="#912fbd"></stop></linearGradient><path fill="url(#LHhUpK35B2wrWQe7tomNwa)" d="M7,7h4v34H7c-1.105,0-2-0.895-2-2V9C5,7.895,5.895,7,7,7z"></path><linearGradient id="LHhUpK35B2wrWQe7tomNwb" x1="-4.108" x2="34.415" y1="-5.522" y2="33.001" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8521b0"></stop><stop offset="1" stop-color="#64129a"></stop></linearGradient><path fill="url(#LHhUpK35B2wrWQe7tomNwb)" d="M9,7h32c1.105,0,2,0.895,2,2v30c0,1.105-0.895,2-2,2H9V7z"></path><path d="M26,11c7.176,0,13,5.824,13,13c0,7.176-5.824,13-13,13s-13-5.824-13-13C13,16.824,18.824,11,26,11 M26,25.5 c0.825,0,1.5-0.675,1.5-1.5c0-0.825-0.675-1.5-1.5-1.5s-1.5,0.675-1.5,1.5C24.5,24.825,25.175,25.5,26,25.5 M26,10 c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14S33.72,10,26,10L26,10z M26,24.5c-0.271,0-0.5-0.229-0.5-0.5 s0.229-0.5,0.5-0.5s0.5,0.229,0.5,0.5S26.271,24.5,26,24.5L26,24.5z" opacity=".05"></path><path d="M26,11c7.176,0,13,5.824,13,13c0,7.176-5.824,13-13,13s-13-5.824-13-13C13,16.824,18.824,11,26,11 M26,25.5 c0.825,0,1.5-0.675,1.5-1.5c0-0.825-0.675-1.5-1.5-1.5s-1.5,0.675-1.5,1.5C24.5,24.825,25.175,25.5,26,25.5 M26,10.5 c-7.444,0-13.5,6.056-13.5,13.5S18.556,37.5,26,37.5S39.5,31.444,39.5,24S33.444,10.5,26,10.5L26,10.5z M26,25 c-0.551,0-1-0.449-1-1s0.449-1,1-1s1,0.449,1,1S26.551,25,26,25L26,25z" opacity=".07"></path><linearGradient id="LHhUpK35B2wrWQe7tomNwc" x1="13.402" x2="39.289" y1="11.402" y2="37.289" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c866e8"></stop><stop offset="1" stop-color="#ac4ad5"></stop></linearGradient><path fill="url(#LHhUpK35B2wrWQe7tomNwc)" d="M26,11c-7.176,0-13,5.824-13,13c0,7.176,5.824,13,13,13s13-5.824,13-13 C39,16.824,33.176,11,26,11z M26,25.5c-0.825,0-1.5-0.675-1.5-1.5c0-0.825,0.675-1.5,1.5-1.5s1.5,0.675,1.5,1.5 C27.5,24.825,26.825,25.5,26,25.5z"></path><linearGradient id="LHhUpK35B2wrWQe7tomNwd" x1="21.986" x2="29.812" y1="19.986" y2="27.812" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#9332bf"></stop><stop offset="1" stop-color="#912fbd"></stop></linearGradient><path fill="url(#LHhUpK35B2wrWQe7tomNwd)" d="M26,20c-2.207,0-4,1.793-4,4s1.793,4,4,4s4-1.793,4-4S28.207,20,26,20z M26,25.5	c-0.825,0-1.5-0.675-1.5-1.5c0-0.825,0.675-1.5,1.5-1.5s1.5,0.675,1.5,1.5C27.5,24.825,26.825,25.5,26,25.5z"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9912 22.7422C18.9746 22.7422 23.0879 18.6289 23.0879 13.6543C23.0879 8.67969 18.9658 4.56641 13.9824 4.56641C9.00781 4.56641 4.90332 8.67969 4.90332 13.6543C4.90332 18.6289 9.0166 22.7422 13.9912 22.7422ZM13.9912 20.9316C9.95703 20.9316 6.73145 17.6885 6.73145 13.6543C6.73145 9.62012 9.95703 6.38574 13.9824 6.38574C18.0166 6.38574 21.2598 9.62012 21.2686 13.6543C21.2773 17.6885 18.0254 20.9316 13.9912 20.9316ZM14 17.0996C15.9072 17.0996 17.4453 15.5615 17.4453 13.6455C17.4453 11.7471 15.9072 10.2002 14 10.2002C12.084 10.2002 10.5459 11.7471 10.5459 13.6455C10.5459 15.5615 12.084 17.0996 14 17.0996Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/artist.svg b/src/assets/icons/artist.svg
index 2b4b86f5..1ac9f0d9 100644
--- a/src/assets/icons/artist.svg
+++ b/src/assets/icons/artist.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><linearGradient id="9rDVZPMopGMXq396Jz69ra" x1="31.04" x2="42.006" y1="-.842" y2="29.286" gradientTransform="matrix(1.0668 -.0668 -.0668 1.0668 -5.426 5.426)" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#427fdb"></stop><stop offset=".397" stop-color="#2668cb"></stop><stop offset=".763" stop-color="#1358bf"></stop><stop offset="1" stop-color="#0c52bb"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69ra)" d="M40.299,22.747c3.905,3.905,4.916,9.226,2.259,11.884s-7.978,1.647-11.884-2.259	s-4.916-9.226-2.259-11.884S36.394,18.842,40.299,22.747z"></path><linearGradient id="9rDVZPMopGMXq396Jz69rb" x1="37.042" x2="39.569" y1="647.5" y2="647.5" gradientTransform="translate(0 -618)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c48f0c"></stop><stop offset=".251" stop-color="#d19b16"></stop><stop offset=".619" stop-color="#dca51f"></stop><stop offset="1" stop-color="#e0a922"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69rb)" d="M37.041,25h-1v9h1.3c1,0,1.8-0.7,2-1.7l0.7-3.8C40.341,26.7,38.941,25,37.041,25z"></path><linearGradient id="9rDVZPMopGMXq396Jz69rc" x1="-2989.041" x2="-2986.513" y1="647.5" y2="647.5" gradientTransform="matrix(-1 0 0 1 -2982 -618)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c48f0c"></stop><stop offset=".251" stop-color="#d19b16"></stop><stop offset=".619" stop-color="#dca51f"></stop><stop offset="1" stop-color="#e0a922"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69rc)" d="M7.041,25h1v9h-1.3c-1,0-1.8-0.7-2-1.7l-0.7-3.8C3.741,26.7,5.141,25,7.041,25z"></path><radialGradient id="9rDVZPMopGMXq396Jz69rd" cx="22.041" cy="643.5" r="17.396" gradientTransform="translate(0 -618)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffcf54"></stop><stop offset=".261" stop-color="#fdcb4d"></stop><stop offset=".639" stop-color="#f7c13a"></stop><stop offset="1" stop-color="#f0b421"></stop></radialGradient><path fill="url(#9rDVZPMopGMXq396Jz69rd)" d="M22.041,6c-7.4,0-15,3-15,19c0,1.3,0,5.9,0,7.3c0,5.7,9,12.7,15,12.7s15-7,15-12.7	c0-1.4,0-6,0-7.3C37.041,9,29.441,6,22.041,6z"></path><circle cx="28.541" cy="26.5" r="1.5" fill="#3b3b3b"></circle><circle cx="15.541" cy="26.5" r="1.5" fill="#3b3b3b"></circle><linearGradient id="9rDVZPMopGMXq396Jz69re" x1="36.541" x2="36.541" y1="28.679" y2="21.622" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26715"></stop><stop offset=".508" stop-color="#b85515"></stop><stop offset="1" stop-color="#ad3f16"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69re)" d="M37.041,29c0,0,0-4-2-7c1.5,0,3,0,3,0S38.041,26,37.041,29z"></path><linearGradient id="9rDVZPMopGMXq396Jz69rf" x1="7.541" x2="7.541" y1="28.679" y2="21.622" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26715"></stop><stop offset=".508" stop-color="#b85515"></stop><stop offset="1" stop-color="#ad3f16"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69rf)" d="M7.041,29c0,0,0-4,2-7c-1.5,0-3,0-3,0S6.041,26,7.041,29z"></path><linearGradient id="9rDVZPMopGMXq396Jz69rg" x1="16.622" x2="29.261" y1="3.108" y2="37.833" gradientUnits="userSpaceOnUse"><stop offset=".002" stop-color="#427fdb"></stop><stop offset=".397" stop-color="#2668cb"></stop><stop offset=".763" stop-color="#1358bf"></stop><stop offset="1" stop-color="#0c52bb"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69rg)" d="M38.511,20.647l-0.795-7.257C37.054,7.465,32.289,3,26.627,3h-9.173	C11.792,3,7.027,7.465,6.365,13.39L5.57,20.647C5.414,22.046,6.292,23,7.629,23h28.824C37.789,23,38.667,22.046,38.511,20.647z M21.404,21.029h-8.727c-0.904,0-1.636-0.678-1.636-1.515S11.773,18,12.677,18h8.727c0.904,0,1.636,0.678,1.636,1.515	S22.308,21.029,21.404,21.029z"></path><linearGradient id="9rDVZPMopGMXq396Jz69rh" x1="22.041" x2="22.041" y1="20.831" y2="34.049" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#6d6d6d"></stop><stop offset=".126" stop-color="#626262"></stop><stop offset=".886" stop-color="#464646"></stop><stop offset="1" stop-color="#454545"></stop></linearGradient><path fill="url(#9rDVZPMopGMXq396Jz69rh)" d="M33.041,25h-9h-1h-2h-1h-9c-0.552,0-1,0.448-1,1l0,0.785c0,2.611,2.4,4.943,5,5.191	c2.657,0.253,5.448-1.575,5.913-4.045C21.054,27.398,21.498,27,22.041,27h0c0.543,0,0.986,0.398,1.087,0.932	c0.466,2.47,3.256,4.298,5.913,4.045c2.6-0.248,5-2.58,5-5.191V26C34.041,25.448,33.593,25,33.041,25z"></path><radialGradient id="9rDVZPMopGMXq396Jz69ri" cx="21.997" cy="43.989" r="10.894" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c26715"></stop><stop offset=".508" stop-color="#b85515"></stop><stop offset="1" stop-color="#ad3f16"></stop></radialGradient><path fill="url(#9rDVZPMopGMXq396Jz69ri)" d="M26.851,43.85c-1.67,0.72-3.33,1.15-4.81,1.15s-3.14-0.43-4.81-1.15l0.15-0.9	c0.38-2.28,2.35-3.95,4.66-3.95s4.28,1.67,4.66,3.95L26.851,43.85z M21.791,35c-4.08,0-7.53,2.73-8.63,6.46	c0.57,0.43,1.16,0.82,1.76,1.19c0.63-3.22,3.47-5.65,6.87-5.65c3.49,0,6.39,2.57,6.91,5.92c0.62-0.36,1.23-0.74,1.81-1.16	C29.511,37.88,25.981,35,21.791,35z"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 13.8477C16.127 13.8477 17.8496 11.9668 17.8496 9.66406C17.8496 7.39648 16.127 5.59473 14 5.59473C11.8818 5.59473 10.1416 7.42285 10.1504 9.68164C10.1592 11.9756 11.873 13.8477 14 13.8477ZM14 12.3096C12.7871 12.3096 11.7588 11.1582 11.7588 9.68164C11.75 8.24023 12.7783 7.13281 14 7.13281C15.2305 7.13281 16.2412 8.22266 16.2412 9.66406C16.2412 11.1406 15.2217 12.3096 14 12.3096ZM8.51562 22.0215H19.4756C20.9961 22.0215 21.7256 21.5381 21.7256 20.501C21.7256 18.084 18.7109 14.8672 14 14.8672C9.28906 14.8672 6.26562 18.084 6.26562 20.501C6.26562 21.5381 6.99512 22.0215 8.51562 22.0215ZM8.24316 20.4834C8.03223 20.4834 7.95312 20.4131 7.95312 20.2549C7.95312 18.9102 10.124 16.4053 14 16.4053C17.8672 16.4053 20.0381 18.9102 20.0381 20.2549C20.0381 20.4131 19.959 20.4834 19.748 20.4834H8.24316Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg
index 556d1189..8827d6c4 100644
--- a/src/assets/icons/folder.svg
+++ b/src/assets/icons/folder.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="WQEfvoQAcpQgQgyjQQ4Hqa" x1="24" x2="24" y1="6.708" y2="14.977" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#eba600"/><stop offset="1" stop-color="#c28200"/></linearGradient><path fill="url(#WQEfvoQAcpQgQgyjQQ4Hqa)" d="M24.414,10.414l-2.536-2.536C21.316,7.316,20.553,7,19.757,7L5,7C3.895,7,3,7.895,3,9l0,30	c0,1.105,0.895,2,2,2l38,0c1.105,0,2-0.895,2-2V13c0-1.105-0.895-2-2-2l-17.172,0C25.298,11,24.789,10.789,24.414,10.414z"/><linearGradient id="WQEfvoQAcpQgQgyjQQ4Hqb" x1="24" x2="24" y1="10.854" y2="40.983" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffd869"/><stop offset="1" stop-color="#fec52b"/></linearGradient><path fill="url(#WQEfvoQAcpQgQgyjQQ4Hqb)" d="M21.586,14.414l3.268-3.268C24.947,11.053,25.074,11,25.207,11H43c1.105,0,2,0.895,2,2v26	c0,1.105-0.895,2-2,2H5c-1.105,0-2-0.895-2-2V15.5C3,15.224,3.224,15,3.5,15h16.672C20.702,15,21.211,14.789,21.586,14.414z"/></svg>
\ No newline at end of file
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.81055 21.7666H21.3916C23.0879 21.7666 24.0723 20.7822 24.0723 18.9014V9.85742C24.0723 7.97656 23.0791 6.99219 21.1807 6.99219H13.0332C12.4004 6.99219 12.0225 6.85156 11.5303 6.44727L11.0381 6.04297C10.4141 5.5332 9.95703 5.36621 9.03418 5.36621H6.54688C4.89453 5.36621 3.91895 6.33301 3.91895 8.1875V18.9014C3.91895 20.791 4.91211 21.7666 6.81055 21.7666ZM5.66797 8.33691C5.66797 7.53711 6.11621 7.11523 6.89844 7.11523H8.56836C9.19238 7.11523 9.56152 7.26465 10.0625 7.66895L10.5547 8.08203C11.1699 8.57422 11.6445 8.75 12.5674 8.75H21.0664C21.875 8.75 22.3232 9.17188 22.3232 10.0156V10.5342H5.66797V8.33691ZM6.9248 20.0176C6.11621 20.0176 5.66797 19.5957 5.66797 18.7432V12.0723H22.3232V18.752C22.3232 19.5957 21.875 20.0176 21.0664 20.0176H6.9248Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/heart.svg b/src/assets/icons/heart.svg
index d4668ca5..8d2427a5 100644
--- a/src/assets/icons/heart.svg
+++ b/src/assets/icons/heart.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 3C4.239 3 2 5.216 2 7.95C2 10.157 2.875 15.395 11.488 20.69C11.6423 20.7839 11.8194 20.8335 12 20.8335C12.1806 20.8335 12.3577 20.7839 12.512 20.69C21.125 15.395 22 10.157 22 7.95C22 5.216 19.761 3 17 3C14.239 3 12 6 12 6C12 6 9.761 3 7 3Z" stroke="#D94848" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" 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" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/home.svg b/src/assets/icons/home.svg
index eb92d766..d1186bb2 100644
--- a/src/assets/icons/home.svg
+++ b/src/assets/icons/home.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="jv689zNUBazMNK6AOyXtga" x1="6" x2="42" y1="41" y2="41" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#c8d3de"/><stop offset="1" stop-color="#c8d3de"/></linearGradient><path fill="url(#jv689zNUBazMNK6AOyXtga)" d="M42,39H6v2c0,1.105,0.895,2,2,2h32c1.105,0,2-0.895,2-2V39z"/><linearGradient id="jv689zNUBazMNK6AOyXtgb" x1="14.095" x2="31.385" y1="10.338" y2="43.787" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fcfcfc"/><stop offset=".495" stop-color="#f4f4f4"/><stop offset=".946" stop-color="#e8e8e8"/><stop offset="1" stop-color="#e8e8e8"/></linearGradient><path fill="url(#jv689zNUBazMNK6AOyXtgb)" d="M42,39H6V20L24,3l18,17V39z"/><path fill="#de490d" d="M13,25h10c0.552,0,1,0.448,1,1v17H12V26C12,25.448,12.448,25,13,25z"/><path d="M24,4c-0.474,0-0.948,0.168-1.326,0.503l-5.359,4.811L6,20v5.39L24,9.428L42,25.39V20L30.685,9.314	l-5.359-4.811C24.948,4.168,24.474,4,24,4z" opacity=".05"/><path d="M24,3c-0.474,0-0.948,0.167-1.326,0.5l-5.359,4.784L6,18.909v5.359L24,8.397l18,15.871v-5.359	L30.685,8.284L25.326,3.5C24.948,3.167,24.474,3,24,3z" opacity=".07"/><linearGradient id="jv689zNUBazMNK6AOyXtgc" x1="24" x2="24" y1="1.684" y2="23.696" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d43a02"/><stop offset="1" stop-color="#b9360c"/></linearGradient><path fill="url(#jv689zNUBazMNK6AOyXtgc)" d="M44.495,19.507L25.326,2.503C24.948,2.168,24.474,2,24,2s-0.948,0.168-1.326,0.503	L3.505,19.507c-0.42,0.374-0.449,1.02-0.064,1.43l1.636,1.745c0.369,0.394,0.984,0.424,1.39,0.067L24,7.428L41.533,22.75	c0.405,0.356,1.021,0.327,1.39-0.067l1.636-1.745C44.944,20.527,44.915,19.881,44.495,19.507z"/><linearGradient id="jv689zNUBazMNK6AOyXtgd" x1="28.05" x2="35.614" y1="25.05" y2="32.614" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#33bef0"/><stop offset="1" stop-color="#0a85d9"/></linearGradient><path fill="url(#jv689zNUBazMNK6AOyXtgd)" d="M29,25h6c0.552,0,1,0.448,1,1v6c0,0.552-0.448,1-1,1h-6c-0.552,0-1-0.448-1-1v-6	C28,25.448,28.448,25,29,25z"/></svg>
\ No newline at end of file
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.25098 13.2146C3.25098 13.6716 3.60254 14.0671 4.16504 14.0671C4.4375 14.0671 4.68359 13.9177 4.90332 13.7419L5.90527 12.8982V21.072C5.90527 22.3728 6.6875 23.1462 8.03223 23.1462H19.9238C21.2598 23.1462 22.0508 22.3728 22.0508 21.072V12.8542L23.1055 13.7419C23.3164 13.9177 23.5625 14.0671 23.835 14.0671C24.3535 14.0671 24.749 13.7419 24.749 13.2322C24.749 12.9333 24.6348 12.696 24.4062 12.5027L22.0508 10.5164V6.77222C22.0508 6.37671 21.7959 6.13062 21.4004 6.13062H20.1875C19.8008 6.13062 19.5371 6.37671 19.5371 6.77222V8.40698L15.2568 4.81226C14.4922 4.17065 13.5254 4.17065 12.7607 4.81226L3.60254 12.5027C3.36523 12.696 3.25098 12.9597 3.25098 13.2146ZM16.5312 15.6404C16.5312 15.2273 16.2676 14.9636 15.8545 14.9636H12.1631C11.75 14.9636 11.4775 15.2273 11.4775 15.6404V21.3972H8.49805C7.95312 21.3972 7.6543 21.0896 7.6543 20.5359V11.4304L13.6221 6.42065C13.8682 6.20972 14.1494 6.20972 14.3955 6.42065L20.293 11.3777V20.5359C20.293 21.0896 19.9941 21.3972 19.4492 21.3972H16.5312V15.6404Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/next.svg b/src/assets/icons/next.svg
index d96118d7..f1c9d486 100644
--- a/src/assets/icons/next.svg
+++ b/src/assets/icons/next.svg
@@ -1,4 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="209" y="44" width="39" height="212" rx="19.5" fill="white"/>
-<path d="M177.783 124.852C195.445 136.743 195.445 162.735 177.783 174.625L71.7533 246.003C51.8259 259.418 25 245.139 25 221.117V78.3604C25 54.3382 51.8259 40.0591 71.7533 53.4741L177.783 124.852Z" fill="white"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.19043 20.7383C8.57715 20.7383 8.91113 20.624 9.28906 20.4043L18.2979 15.1133C18.8164 14.8057 19.1416 14.4453 19.2471 14.0146V20.1143C19.2471 20.6592 19.6777 21.0723 20.2314 21.0723C20.7939 21.0723 21.2246 20.6592 21.2246 20.1143V7.21191C21.2246 6.66699 20.7939 6.25391 20.2314 6.25391C19.6777 6.25391 19.2471 6.66699 19.2471 7.21191V13.3027C19.1416 12.8721 18.8252 12.5293 18.2979 12.2129L9.28906 6.92188C8.90234 6.70215 8.57715 6.58789 8.18164 6.58789C7.4082 6.58789 6.7666 7.16797 6.7666 8.24023V19.0859C6.7666 20.1582 7.41699 20.7383 8.19043 20.7383ZM8.70898 18.708C8.59473 18.708 8.50684 18.6377 8.50684 18.4795V8.84668C8.50684 8.68848 8.59473 8.61816 8.70898 8.61816C8.76172 8.61816 8.82324 8.63574 8.90234 8.67969L16.9707 13.4521C17.0762 13.5049 17.1289 13.5576 17.1289 13.6631C17.1289 13.7598 17.0762 13.8213 16.9707 13.874L8.90234 18.6465C8.82324 18.6904 8.76172 18.708 8.70898 18.708Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/no-results.svg b/src/assets/icons/no-results.svg
deleted file mode 100644
index e7d4e406..00000000
--- a/src/assets/icons/no-results.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#199be2" d="M35.983,32.448l-3.536,3.536l7.87,7.87c0.195,0.195,0.512,0.195,0.707,0l2.828-2.828	c0.195-0.195,0.195-0.512,0-0.707L35.983,32.448z"></path><radialGradient id="eRNmcsAyqJzyQtK0oJ_Tda" cx="20.024" cy="233.904" r="19.604" gradientTransform="matrix(1 0 0 -1 0 254)" gradientUnits="userSpaceOnUse"><stop offset=".693" stop-color="#006185"></stop><stop offset=".921" stop-color="#35c1f1"></stop></radialGradient><polygon fill="url(#eRNmcsAyqJzyQtK0oJ_Tda)" points="31.601,28.065 28.065,31.601 32.448,35.983 35.983,32.448"></polygon><linearGradient id="eRNmcsAyqJzyQtK0oJ_Tdb" x1="8.911" x2="31.339" y1="245.089" y2="222.661" gradientTransform="matrix(1 0 0 -1 0 254)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#a3ffff"></stop><stop offset=".223" stop-color="#9dfbff"></stop><stop offset=".53" stop-color="#8bf1ff"></stop><stop offset=".885" stop-color="#6ee0ff"></stop><stop offset="1" stop-color="#63daff"></stop></linearGradient><circle cx="20" cy="20" r="16" fill="url(#eRNmcsAyqJzyQtK0oJ_Tdb)"></circle><path fill="#1b9de2" d="M12.5,26.75c0-0.414,3-3.75,7.5-3.75s7.5,3.336,7.5,3.75s-0.336,0.75-0.75,0.75	c-0.067,0-3.408-1.75-6.75-1.75c-3.338,0-6.677,1.75-6.75,1.75C12.836,27.5,12.5,27.164,12.5,26.75z M24.858,18.642	c1.144,1.144,2.998,1.144,4.142,0L24.858,14.5C23.714,15.644,23.714,17.498,24.858,18.642z M15.142,18.642	c1.144-1.144,1.144-2.998,0-4.142L11,18.642C12.144,19.786,13.998,19.786,15.142,18.642z"></path></svg>
diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg
index 19dce7a3..2b2b8d95 100644
--- a/src/assets/icons/pause.svg
+++ b/src/assets/icons/pause.svg
@@ -1,4 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="41" y="30" width="60" height="240" rx="30" fill="white"/>
-<rect x="173" y="30" width="60" height="240" rx="30" fill="white"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.63185 20.9668H11.6973C12.5322 20.9668 12.9629 20.5361 12.9629 19.7012V7.60742C12.9629 6.75488 12.5322 6.35059 11.6973 6.3418H9.63185C8.79688 6.3418 8.36622 6.77246 8.36622 7.60742V19.7012C8.35743 20.5361 8.7881 20.9668 9.63185 20.9668ZM16.3115 20.9668H18.3682C19.2031 20.9668 19.6338 20.5361 19.6338 19.7012V7.60742C19.6338 6.75488 19.2031 6.3418 18.3682 6.3418H16.3115C15.4678 6.3418 15.0459 6.77246 15.0459 7.60742V19.7012C15.0459 20.5361 15.4678 20.9668 16.3115 20.9668Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg
index 47fcf5b3..ba1a89ce 100644
--- a/src/assets/icons/play.svg
+++ b/src/assets/icons/play.svg
@@ -1,3 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M230 123.923C250 135.47 250 164.338 230 175.885L95 253.827C75 265.374 50 250.94 50 227.846V71.9615C50 48.8675 75 34.4338 95 45.9808L230 123.923Z" fill="white"/>
+<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>
diff --git a/src/assets/icons/playlist.svg b/src/assets/icons/playlist.svg
index b7bc2556..e29bd4d2 100644
--- a/src/assets/icons/playlist.svg
+++ b/src/assets/icons/playlist.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><linearGradient id="RZDECxFMuD7hl14~ax2Vta" x1="4" x2="37" y1="29" y2="29" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#42a3f2"></stop><stop offset="1" stop-color="#42a4eb"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vta)" d="M37,31H5c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h32V31z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vtb" x1="4" x2="37" y1="37" y2="37" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#42a3f2"></stop><stop offset="1" stop-color="#42a4eb"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vtb)" d="M37,39H5c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h32V39z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vtc" x1="4" x2="37" y1="21" y2="21" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#42a3f2"></stop><stop offset="1" stop-color="#42a4eb"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vtc)" d="M37,23H5c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h32V23z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vtd" x1="4" x2="37" y1="13" y2="13" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#42a3f2"></stop><stop offset="1" stop-color="#42a4eb"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vtd)" d="M37,15H5c-0.552,0-1-0.448-1-1v-2c0-0.552,0.448-1,1-1h32V15z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vte" x1="32.5" x2="32.5" y1="15" y2="67.594" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ed3675"></stop><stop offset="1" stop-color="#ca1b4d"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vte)" d="M32.5,29c-4.141,0-7.5,3.359-7.5,7.5s3.359,7.5,7.5,7.5s7.5-3.358,7.5-7.5S36.641,29,32.5,29z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vtf" x1="38.5" x2="46" y1="9.5" y2="9.5" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#bd1949"></stop><stop offset=".108" stop-color="#c31a4b"></stop><stop offset=".38" stop-color="#ca1b4d"></stop><stop offset="1" stop-color="#cc1b4e"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vtf)" d="M44.5,6h-6v1v5v1h6c0.828,0,1.5-0.672,1.5-1.5v-1v-2v-1C46,6.672,45.328,6,44.5,6z"></path><linearGradient id="RZDECxFMuD7hl14~ax2Vtg" x1="37.5" x2="37.5" y1="15" y2="67.594" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ed3675"></stop><stop offset="1" stop-color="#ca1b4d"></stop></linearGradient><path fill="url(#RZDECxFMuD7hl14~ax2Vtg)" d="M40,6h-2.333C36.193,6,35,7.18,35,8.637V36.5h5V6z"></path></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.16016 9.50586C6.85449 9.50586 7.4082 8.95215 7.4082 8.25781C7.4082 7.57227 6.85449 7.00977 6.16016 7.00977C5.47461 7.00977 4.91211 7.57227 4.91211 8.25781C4.91211 8.95215 5.47461 9.50586 6.16016 9.50586ZM10.291 9.10156H22.2266C22.7012 9.10156 23.0791 8.73242 23.0791 8.25781C23.0791 7.7832 22.71 7.41406 22.2266 7.41406H10.291C9.8252 7.41406 9.44727 7.7832 9.44727 8.25781C9.44727 8.73242 9.81641 9.10156 10.291 9.10156ZM6.16016 14.9111C6.85449 14.9111 7.4082 14.3574 7.4082 13.6631C7.4082 12.9775 6.85449 12.415 6.16016 12.415C5.47461 12.415 4.91211 12.9775 4.91211 13.6631C4.91211 14.3574 5.47461 14.9111 6.16016 14.9111ZM10.291 14.5068H22.2266C22.7012 14.5068 23.0791 14.1377 23.0791 13.6631C23.0791 13.1885 22.71 12.8193 22.2266 12.8193H10.291C9.8252 12.8193 9.44727 13.1885 9.44727 13.6631C9.44727 14.1377 9.81641 14.5068 10.291 14.5068ZM6.16016 20.3164C6.85449 20.3164 7.4082 19.7627 7.4082 19.0684C7.4082 18.3828 6.85449 17.8203 6.16016 17.8203C5.47461 17.8203 4.91211 18.3828 4.91211 19.0684C4.91211 19.7627 5.47461 20.3164 6.16016 20.3164ZM10.291 19.9121H22.2266C22.7012 19.9121 23.0791 19.543 23.0791 19.0684C23.0791 18.5938 22.71 18.2246 22.2266 18.2246H10.291C9.8252 18.2246 9.44727 18.5938 9.44727 19.0684C9.44727 19.543 9.81641 19.9121 10.291 19.9121Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/assets/icons/plus.svg b/src/assets/icons/plus.svg
index 71dca58d..412c6087 100644
--- a/src/assets/icons/plus.svg
+++ b/src/assets/icons/plus.svg
@@ -1,4 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 12H8M12 8V12V8ZM12 12V16V12ZM12 12H16H12Z" stroke="white" stroke-width="2" stroke-linecap="round"/>
-<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="white" stroke-width="2"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.63672 14.6562H12.998V20.0176C12.998 20.5625 13.4463 21.0195 14 21.0195C14.5537 21.0195 15.002 20.5625 15.002 20.0176V14.6562H20.3633C20.9082 14.6562 21.3652 14.208 21.3652 13.6543C21.3652 13.1006 20.9082 12.6523 20.3633 12.6523H15.002V7.29102C15.002 6.74609 14.5537 6.28906 14 6.28906C13.4463 6.28906 12.998 6.74609 12.998 7.29102V12.6523H7.63672C7.0918 12.6523 6.63477 13.1006 6.63477 13.6543C6.63477 14.208 7.0918 14.6562 7.63672 14.6562Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/previous.svg b/src/assets/icons/previous.svg
index faebdeb9..a63081c7 100644
--- a/src/assets/icons/previous.svg
+++ b/src/assets/icons/previous.svg
@@ -1,4 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="85" y="250.659" width="39" height="201.659" rx="19.5" transform="rotate(-180 85 250.659)" fill="white"/>
-<path d="M122.217 175.148C104.555 163.257 104.555 137.265 122.217 125.375L228.247 53.9966C248.174 40.5816 275 54.8607 275 78.8829V221.64C275 245.662 248.174 259.941 228.247 246.526L122.217 175.148Z" fill="white"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.75098 21.0723C8.30469 21.0723 8.73535 20.6592 8.73535 20.1143V14.0146C8.70898 13.9004 8.69141 13.7861 8.69141 13.6543C8.69141 13.5312 8.70898 13.417 8.73535 13.3027V7.21191C8.73535 6.66699 8.30469 6.25391 7.75098 6.25391C7.19727 6.25391 6.7666 6.66699 6.7666 7.21191V20.1143C6.7666 20.6592 7.19727 21.0723 7.75098 21.0723ZM19.8008 20.7383C20.5742 20.7383 21.2246 20.1582 21.2246 19.0859V8.24023C21.2246 7.16797 20.5742 6.58789 19.8008 6.58789C19.4141 6.58789 19.0801 6.70215 18.7021 6.92188L9.69336 12.2129C9.16602 12.5293 8.84961 12.8721 8.73535 13.3027V14.0146C8.84961 14.4453 9.16602 14.8057 9.69336 15.1133L18.7021 20.4043C19.0801 20.624 19.4141 20.7383 19.8008 20.7383ZM19.2822 18.708C19.2207 18.708 19.1592 18.6904 19.0889 18.6465L11.0117 13.874C10.915 13.8213 10.8535 13.7598 10.8535 13.6631C10.8535 13.5576 10.9062 13.5049 11.0117 13.4521L19.0889 8.67969C19.168 8.63574 19.2207 8.61816 19.2734 8.61816C19.3877 8.61816 19.4844 8.68848 19.4844 8.84668V18.4795C19.4844 18.6377 19.3877 18.708 19.2822 18.708Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/queue.svg b/src/assets/icons/queue.svg
index a0dd923e..e29bd4d2 100644
--- a/src/assets/icons/queue.svg
+++ b/src/assets/icons/queue.svg
@@ -1,6 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="25" y="65" width="250" height="44.8439" rx="22.4219" fill="white"/>
-<rect x="25" y="190.999" width="168.664" height="44.8439" rx="22.4219" fill="white"/>
-<rect x="230.156" y="190.999" width="44.8439" height="44.8439" rx="22.4219" fill="#055096"/>
-<rect x="25" y="127.999" width="211.511" height="44.8439" rx="22.4219" fill="#C43A3A"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.16016 9.50586C6.85449 9.50586 7.4082 8.95215 7.4082 8.25781C7.4082 7.57227 6.85449 7.00977 6.16016 7.00977C5.47461 7.00977 4.91211 7.57227 4.91211 8.25781C4.91211 8.95215 5.47461 9.50586 6.16016 9.50586ZM10.291 9.10156H22.2266C22.7012 9.10156 23.0791 8.73242 23.0791 8.25781C23.0791 7.7832 22.71 7.41406 22.2266 7.41406H10.291C9.8252 7.41406 9.44727 7.7832 9.44727 8.25781C9.44727 8.73242 9.81641 9.10156 10.291 9.10156ZM6.16016 14.9111C6.85449 14.9111 7.4082 14.3574 7.4082 13.6631C7.4082 12.9775 6.85449 12.415 6.16016 12.415C5.47461 12.415 4.91211 12.9775 4.91211 13.6631C4.91211 14.3574 5.47461 14.9111 6.16016 14.9111ZM10.291 14.5068H22.2266C22.7012 14.5068 23.0791 14.1377 23.0791 13.6631C23.0791 13.1885 22.71 12.8193 22.2266 12.8193H10.291C9.8252 12.8193 9.44727 13.1885 9.44727 13.6631C9.44727 14.1377 9.81641 14.5068 10.291 14.5068ZM6.16016 20.3164C6.85449 20.3164 7.4082 19.7627 7.4082 19.0684C7.4082 18.3828 6.85449 17.8203 6.16016 17.8203C5.47461 17.8203 4.91211 18.3828 4.91211 19.0684C4.91211 19.7627 5.47461 20.3164 6.16016 20.3164ZM10.291 19.9121H22.2266C22.7012 19.9121 23.0791 19.543 23.0791 19.0684C23.0791 18.5938 22.71 18.2246 22.2266 18.2246H10.291C9.8252 18.2246 9.44727 18.5938 9.44727 19.0684C9.44727 19.543 9.81641 19.9121 10.291 19.9121Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/repeat.svg b/src/assets/icons/repeat.svg
index 6b914822..94a6be78 100644
--- a/src/assets/icons/repeat.svg
+++ b/src/assets/icons/repeat.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 22L3 18L7 14V17H17V13H19V18C19 18.2652 18.8946 18.5196 18.7071 18.7071C18.5196 18.8946 18.2652 19 18 19H7V22ZM7 11H5V6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5H17V2L21 6L17 10V7H7V11Z" fill="white"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.12988 12.8984C4.12988 13.5049 4.62207 13.9971 5.22852 13.9971C5.84375 13.9971 6.32715 13.5049 6.32715 12.8984V12.3271C6.32715 10.8945 7.31152 9.97168 8.80566 9.97168H15.4062V11.8086C15.4062 12.3359 15.7402 12.6699 16.2764 12.6699C16.5137 12.6699 16.7334 12.582 16.9092 12.4414L20.3721 9.55859C20.8027 9.21582 20.7939 8.63574 20.3721 8.28418L16.9092 5.39258C16.7334 5.24316 16.5137 5.15527 16.2764 5.15527C15.7402 5.15527 15.4062 5.48926 15.4062 6.0166V7.80957H8.98145C6.00195 7.80957 4.12988 9.4707 4.12988 12.1162V12.8984ZM12.5938 15.3066C12.5938 14.7793 12.2598 14.4365 11.7324 14.4365C11.4951 14.4365 11.2666 14.5332 11.0908 14.6738L7.63672 17.5566C7.20605 17.8994 7.20605 18.4707 7.63672 18.8311L11.0908 21.7227C11.2666 21.8721 11.4951 21.96 11.7324 21.96C12.2598 21.96 12.5938 21.626 12.5938 21.0986V19.2969H19.0273C22.0068 19.2969 23.8701 17.627 23.8701 14.9902V14.208C23.8701 13.5928 23.3867 13.1006 22.7715 13.1006C22.165 13.1006 21.6729 13.5928 21.6729 14.208V14.7793C21.6729 16.2031 20.6973 17.1348 19.1943 17.1348H12.5938V15.3066Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg
index 079bb6a4..124fe83a 100644
--- a/src/assets/icons/search.svg
+++ b/src/assets/icons/search.svg
@@ -1,5 +1,3 @@
-<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="113.788" cy="121.788" r="88.7875" fill="#C4C4C4"/>
-<path d="M130.102 159.761L152.799 133.981L262.11 230.216C269.229 236.483 269.919 247.335 263.652 254.454V254.454C257.385 261.573 246.533 262.263 239.414 255.996L130.102 159.761Z" fill="#C4C4C4"/>
-<circle cx="113.959" cy="121.616" r="68.6944" fill="#055096"/>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5322 19.0332C13.9297 19.0332 15.2393 18.6113 16.3291 17.8906L20.1787 21.749C20.4336 21.9951 20.7588 22.1182 21.1104 22.1182C21.8398 22.1182 22.376 21.5469 22.376 20.8262C22.376 20.4922 22.2617 20.167 22.0156 19.9209L18.1924 16.0801C18.9834 14.9551 19.4492 13.5928 19.4492 12.1162C19.4492 8.31055 16.3379 5.19922 12.5322 5.19922C8.73535 5.19922 5.61523 8.31055 5.61523 12.1162C5.61523 15.9219 8.72656 19.0332 12.5322 19.0332ZM12.5322 17.1875C9.74609 17.1875 7.46094 14.9023 7.46094 12.1162C7.46094 9.33008 9.74609 7.04492 12.5322 7.04492C15.3184 7.04492 17.6035 9.33008 17.6035 12.1162C17.6035 14.9023 15.3184 17.1875 12.5322 17.1875Z" fill="#F2F2F2"/>
 </svg>
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
index 91ffeedf..5d7f6679 100644
--- a/src/assets/icons/settings.svg
+++ b/src/assets/icons/settings.svg
@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="L4rKfs~Qrm~k0Pk8MRsoza" x1="32.012" x2="15.881" y1="32.012" y2="15.881" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".242" stop-color="#f2f2f2"/><stop offset="1" stop-color="#ccc"/></linearGradient><circle cx="24" cy="24" r="11.5" fill="url(#L4rKfs~Qrm~k0Pk8MRsoza)"/><linearGradient id="L4rKfs~Qrm~k0Pk8MRsozb" x1="17.45" x2="28.94" y1="17.45" y2="28.94" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0d61a9"/><stop offset=".363" stop-color="#0e5fa4"/><stop offset=".78" stop-color="#135796"/><stop offset="1" stop-color="#16528c"/></linearGradient><circle cx="24" cy="24" r="7" fill="url(#L4rKfs~Qrm~k0Pk8MRsozb)"/><linearGradient id="L4rKfs~Qrm~k0Pk8MRsozc" x1="5.326" x2="38.082" y1="5.344" y2="38.099" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#889097"/><stop offset=".331" stop-color="#848c94"/><stop offset=".669" stop-color="#78828b"/><stop offset="1" stop-color="#64717c"/></linearGradient><path fill="url(#L4rKfs~Qrm~k0Pk8MRsozc)" d="M43.407,19.243c-2.389-0.029-4.702-1.274-5.983-3.493c-1.233-2.136-1.208-4.649-0.162-6.693 c-2.125-1.887-4.642-3.339-7.43-4.188C28.577,6.756,26.435,8,24,8s-4.577-1.244-5.831-3.131c-2.788,0.849-5.305,2.301-7.43,4.188 c1.046,2.044,1.071,4.557-0.162,6.693c-1.281,2.219-3.594,3.464-5.983,3.493C4.22,20.77,4,22.358,4,24 c0,1.284,0.133,2.535,0.364,3.752c2.469-0.051,4.891,1.208,6.213,3.498c1.368,2.37,1.187,5.204-0.22,7.345 c2.082,1.947,4.573,3.456,7.34,4.375C18.827,40.624,21.221,39,24,39s5.173,1.624,6.303,3.971c2.767-0.919,5.258-2.428,7.34-4.375 c-1.407-2.141-1.588-4.975-0.22-7.345c1.322-2.29,3.743-3.549,6.213-3.498C43.867,26.535,44,25.284,44,24 C44,22.358,43.78,20.77,43.407,19.243z M24,34.5c-5.799,0-10.5-4.701-10.5-10.5c0-5.799,4.701-10.5,10.5-10.5S34.5,18.201,34.5,24 C34.5,29.799,29.799,34.5,24,34.5z"/></svg>
\ No newline at end of file
+<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>
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index f3422064..18d483c0 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar ">
+  <div class="b-bar">
     <div class="grid rounded">
       <div class="controlsx rounded">
         <div class="controls controls-bottom">
@@ -13,9 +13,9 @@
           }}</span>
         </div>
         <div class="r-group">
-          <div class="heart image"></div>
-          <div class="add-to image"></div>
-          <div class="repeat image"></div>
+          <div id="heart" class="image ctrl-btn"></div>
+          <div id="add-to" class="image ctrl-btn"></div>
+          <div id="repeat" class="image ctrl-btn"></div>
         </div>
         <div class="controls controls-bottom"></div>
       </div>
@@ -32,7 +32,6 @@ import state from "../../composables/state";
 import perks from "../../composables/perks";
 import playAudio from "../../composables/playAudio";
 
-const current_pos = playAudio.current_time
+const current_pos = playAudio.current_time;
 const formatSeconds = perks.formatSeconds;
-
 </script>
diff --git a/src/components/RightSideBar/Tabs.vue b/src/components/RightSideBar/Tabs.vue
index 61265052..b6846c03 100644
--- a/src/components/RightSideBar/Tabs.vue
+++ b/src/components/RightSideBar/Tabs.vue
@@ -59,7 +59,7 @@ const tabs = useTabStore()
   }
 
   .home {
-    background-image: url("../../assets/icons/dashboard.svg");
+    background-image: url("../../assets/icons/home.svg");
   }
 }
 </style>
diff --git a/src/components/shared/HotKeys.vue b/src/components/shared/HotKeys.vue
index b0cf6a6a..6ea04781 100644
--- a/src/components/shared/HotKeys.vue
+++ b/src/components/shared/HotKeys.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="nav">
-    <div class="image" id="previous" @click="playPrev"></div>
+    <div class="image ctrl-btn" id="previous" @click="playPrev"></div>
     <div
-      class="image play-pause"
+      class="image ctrl-btn play-pause"
       @click="playPause"
       :class="{ isPlaying: isPlaying }"
     ></div>
-    <div class="image" id="next" @click="playNext"></div>
+    <div class="image ctrl-btn" id="next" @click="playNext"></div>
   </div>
 </template>
 
@@ -27,24 +27,12 @@ const isPlaying = playAudio.playing;
   width: 100%;
   gap: $small;
 
-  & * {
-    height: 2rem;
-    width: 2rem;
-    background-size: 1.2rem !important;
-    cursor: pointer;
-    border-radius: 0.5rem;
-
-    &:hover {
-      background-color: $pink;
-    }
-  }
-
   #previous {
     background-image: url(../../assets/icons/previous.svg);
   }
 
   .play-pause {
-    background-image: url(../../assets/icons/play.svg);
+    background-image: url(../../assets/icons/play.svg) !important;
   }
 
   .isPlaying {