diff --git a/src/App.vue b/src/App.vue
index 681ea89..92b70bb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,9 +19,6 @@
     <SearchInput />
     <RightSideBar />
     <Tabs />
-    <div class="bottom-bar">
-      <BottomBar :collapsed="collapsed" />
-    </div>
   </div>
 </template>
 
diff --git a/src/assets/css/BottomBar/BottomBar.scss b/src/assets/css/BottomBar/BottomBar.scss
index b11d841..d0d72c0 100644
--- a/src/assets/css/BottomBar/BottomBar.scss
+++ b/src/assets/css/BottomBar/BottomBar.scss
@@ -8,17 +8,7 @@
     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;
diff --git a/src/assets/css/_variables.scss b/src/assets/css/_variables.scss
index 3161839..b6aae3f 100644
--- a/src/assets/css/_variables.scss
+++ b/src/assets/css/_variables.scss
@@ -1,6 +1,6 @@
 // colors
 
-$card-dark: #000000;
+$body: #0f1218;
 $separator: #ffffff2f;
 $highlight-blue: #006eff;
 $bbb: #161616; //bottom controls background
@@ -14,7 +14,7 @@ $large: 1.5rem;
 $larger: 2rem;
 
 // apple human design guideline colors
-$black: #000000;
+$black: #181a1c;
 $white: #ffffffde;
 
 $gray: #1c1c1e;
@@ -24,8 +24,8 @@ $gray3: rgb(72, 72, 74);
 $gray4: rgb(58, 58, 60);
 $gray5: rgb(44, 44, 46);
 
-$red: rgb(255, 69, 58);
-$blue: #234ece;
+$red: #fa4f55;
+$blue: #0960ef;
 $green: rgb(20, 160, 55);
 $yellow: rgb(255, 214, 10);
 $orange: rgb(255, 159, 10);
diff --git a/src/assets/css/global.scss b/src/assets/css/global.scss
index c001080..2f53f18 100644
--- a/src/assets/css/global.scss
+++ b/src/assets/css/global.scss
@@ -11,8 +11,7 @@
 
 body {
   margin: 0;
-  background-color: #0f1218;
-  
+  background-color: $body;
   color: #fff;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
     Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -91,7 +90,7 @@ button {
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
-    "l-sidebar bottom-bar tabs";
+    "l-sidebar content tabs";
   width: 100vw;
   height: 100vh;
 }
diff --git a/src/assets/icons/4dots.svg b/src/assets/icons/4dots.svg
new file mode 100644
index 0000000..6a16cf0
--- /dev/null
+++ b/src/assets/icons/4dots.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 10.8945C16.1182 10.8945 17.8496 9.1543 17.8496 7.03613C17.8496 4.92676 16.1182 3.18652 14 3.18652C11.8643 3.18652 10.1328 4.92676 10.1328 7.03613C10.1328 9.1543 11.8643 10.8945 14 10.8945ZM14 9.26855C12.7344 9.26855 11.7588 8.29297 11.7588 7.03613C11.7588 5.78809 12.7344 4.77734 14 4.77734C15.248 4.77734 16.2324 5.78809 16.2324 7.03613C16.2324 8.29297 15.248 9.26855 14 9.26855ZM7.61035 17.5039C9.71973 17.5039 11.46 15.7637 11.46 13.6455C11.46 11.5361 9.71973 9.7959 7.61035 9.7959C5.47461 9.7959 3.74316 11.5361 3.74316 13.6455C3.74316 15.7637 5.47461 17.5039 7.61035 17.5039ZM20.4072 17.5039C22.5166 17.5039 24.2568 15.7637 24.2568 13.6455C24.2568 11.5361 22.5166 9.7959 20.4072 9.7959C18.2715 9.7959 16.54 11.5361 16.54 13.6455C16.54 15.7637 18.2715 17.5039 20.4072 17.5039ZM7.60156 15.8779C6.34473 15.8779 5.36035 14.9023 5.36035 13.6455C5.36035 12.3975 6.34473 11.3867 7.60156 11.3867C8.8584 11.3867 9.84277 12.3975 9.84277 13.6455C9.84277 14.9023 8.8584 15.8779 7.60156 15.8779ZM20.3984 15.8779C19.1416 15.8779 18.1572 14.9023 18.1572 13.6455C18.1572 12.3975 19.1416 11.3867 20.3984 11.3867C21.6553 11.3867 22.6396 12.3975 22.6396 13.6455C22.6396 14.9023 21.6553 15.8779 20.3984 15.8779ZM14 24.1133C16.1182 24.1133 17.8496 22.3643 17.8496 20.2549C17.8496 18.1455 16.1182 16.4053 14 16.4053C11.8643 16.4053 10.1328 18.1455 10.1328 20.2549C10.1328 22.3643 11.8643 24.1133 14 24.1133ZM14 22.4873C12.7344 22.4873 11.7588 21.5117 11.7588 20.2549C11.7588 19.0068 12.7344 17.9961 14 17.9961C15.248 17.9961 16.2324 19.0068 16.2324 20.2549C16.2324 21.5117 15.248 22.4873 14 22.4873Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/components/AlbumView/Header.vue b/src/components/AlbumView/Header.vue
index 92b7362..9669474 100644
--- a/src/components/AlbumView/Header.vue
+++ b/src/components/AlbumView/Header.vue
@@ -110,7 +110,7 @@ function playAlbum() {
       position: relative;
 
       .stats {
-        background-color: $gray;
+        background-color: $red;
         padding: $small;
         border-radius: $small;
         position: absolute;
diff --git a/src/components/LeftSidebar/AlbumArt.vue b/src/components/LeftSidebar/AlbumArt.vue
index 0a8cf0d..b5e2181 100644
--- a/src/components/LeftSidebar/AlbumArt.vue
+++ b/src/components/LeftSidebar/AlbumArt.vue
@@ -1,13 +1,22 @@
 <template>
   <div class="l_ rounded" v-if="!props.collapsed">
-    <div
-      class="l-image image rounded"
-      :style="{
-        backgroundImage: `url(&quot;${current.image}&quot;)`,
-      }"
-    ></div>
+    <div class="headin">Now Playing</div>
+    <div class="menu image rounded"></div>
     <div class="separator no-border"></div>
-    <SongCard />
+    <div>
+      <div class="art">
+        <div
+          class="l-image image rounded"
+          :style="{
+            backgroundImage: `url(&quot;${current.image}&quot;)`,
+          }"
+        ></div>
+      </div>
+      <div class="separator no-border"></div>
+      <SongCard />
+      <Progress />
+      <HotKeys />
+    </div>
   </div>
 </template>
 
@@ -15,6 +24,8 @@
 import { ref } from "vue";
 import state from "../../composables/state";
 import SongCard from "./SongCard.vue";
+import HotKeys from "../shared/HotKeys.vue";
+import Progress from "../shared/Progress.vue";
 
 const current = ref(state.current);
 const props = defineProps({
@@ -26,13 +37,52 @@ const props = defineProps({
 </script>
 <style lang="scss">
 .l_ {
-  padding: $small;
+  padding: 1rem;
   background-color: $primary;
   margin: $small;
+  text-align: center;
+  width: 14rem;
+  display: grid;
+  position: relative;
+  text-transform: capitalize;
 
-  .l-image {
-    height: 13rem;
-    width: 13rem;
+  .headin {
+    font-weight: bold;
+    font-size: 0.9rem;
+  }
+
+  .menu {
+    height: 2rem;
+    width: 2rem;
+    right: $small;
+    top: $small;
+    position: absolute;
+    background-image: url("../../assets/icons/right-arrow.svg");
+    background-size: 1.5rem;
+    transform: rotate(90deg);
+
+    &:hover {
+      background-color: $gray2;
+    }
+  }
+
+  br {
+    height: 0rem;
+  }
+
+  .art {
+    width: 100%;
+    display: grid;
+    place-items: center;
+
+    .l-image {
+      height: 12rem;
+      width: 12rem;
+    }
+  }
+
+  .title {
+    font-weight: 900;
   }
 
   .artists {
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index 4ca8965..de8d027 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -1,27 +1,32 @@
 <template>
-  <div class="f-artists border">
-    <div class="xcontrols">
-      <div class="prev" @click="scrollLeft"></div>
-      <div class="next" @click="scrollRight"></div>
-    </div>
-    <div class="artists" ref="artists_dom">
-      <div class="xartist c1 image">
-        <div class="blur"></div>
-        <div class="s2"></div>
-        <p>Featured Artists</p>
+  <div class="f-artists">
+    <div class="header">
+      <div class="headin">Featured Artists</div>
+      <div class="xcontrols">
+        <div class="prev" @click="scrollLeft"></div>
+        <div class="next" @click="scrollRight"></div>
       </div>
-      <ArtistCard v-for="artist in artists" :key="artist" :artist="artist"         :color="232452" />
+    </div>
+    <div class="separator no-border"></div>
+    <div class="artists" ref="artists_dom">
+      <ArtistCard
+        v-for="artist in artists"
+        :key="artist"
+        :artist="artist"
+        :color="232452"
+      />
     </div>
   </div>
 </template>
 <script>
 import { ref } from "@vue/reactivity";
 import ArtistCard from "@/components/shared/ArtistCard.vue";
+import { computed, reactive } from "vue";
 
 export default {
   props: ["artists"],
   components: {
-    ArtistCard
+    ArtistCard,
   },
   setup() {
     const artists_dom = ref(null);
@@ -53,12 +58,26 @@ export default {
 
 <style lang="scss">
 .f-artists {
-  position: relative;
-  height: 15em;
+  height: 15.5em;
   width: calc(100%);
   padding: $small;
   border-radius: $small;
   user-select: none;
+  background: linear-gradient(58deg, $gray 0%, rgba(5, 0, 7, 0.5) 100%);
+  position: relative;
+
+  .header {
+    display: flex;
+    height: 2.5rem;
+    align-items: center;
+    position: relative;
+
+    .headin {
+      font-size: 1.5rem;
+      font-weight: 900;
+      display: flex;
+    }
+  }
 }
 
 .f-artists .xcontrols {
@@ -66,8 +85,8 @@ export default {
   width: 5rem;
   height: 2rem;
   position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
+  top: 0;
+  right: 0;
   display: flex;
   justify-content: space-between;
 
@@ -100,11 +119,7 @@ export default {
   }
 }
 
-.f-artists .artists {
-  position: absolute;
-  bottom: 1em;
-  width: calc(100% - 1em);
-  height: 13em;
+.f-artists > .artists {
   display: flex;
   align-items: flex-end;
   flex-wrap: nowrap;
@@ -116,30 +131,4 @@ export default {
     display: none;
   }
 }
-
-.f-artists .c1 {
-  position: relative;
-  background-size: 400px 11rem;
-  background-position: 100%;
-  width: 8.25rem;
-  background-image: linear-gradient(
-    320deg,
-    #b63939 13%,
-    #232452 50%,
-    #232452 100%
-  );
-
-  transition: all 0.5s ease-in-out;
-
-  &:hover {
-    background-position: 0;
-  }
-
-  p {
-    margin-left: 1rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    text-shadow: 0 0 80px rgb(0, 0, 0);
-  }
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PlaylistView/Header.vue b/src/components/PlaylistView/Header.vue
index b16ea1c..91119c3 100644
--- a/src/components/PlaylistView/Header.vue
+++ b/src/components/PlaylistView/Header.vue
@@ -37,7 +37,7 @@
     bottom: $small;
     right: $small;
     padding: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.699);
+    background-color: $body;
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
     border-radius: $smaller;
@@ -70,7 +70,7 @@
     padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
     border-radius: .75rem;
-    background-color: $black;
+    background-color: $body;
 
     @include phone-only {
       width: calc(100% - 1rem);
diff --git a/src/components/RightSideBar/Tabs.vue b/src/components/RightSideBar/Tabs.vue
index e40cda1..d5ec1df 100644
--- a/src/components/RightSideBar/Tabs.vue
+++ b/src/components/RightSideBar/Tabs.vue
@@ -23,6 +23,7 @@ const tabs = useTabStore();
 <style lang="scss">
 .tabs {
   padding: $small;
+  height: 4rem;
 
   .cont {
     background-color: $primary;
diff --git a/src/components/nav/NavBar.vue b/src/components/nav/NavBar.vue
index 5058ec9..fa8cc35 100644
--- a/src/components/nav/NavBar.vue
+++ b/src/components/nav/NavBar.vue
@@ -5,7 +5,7 @@
         <PlayBtn />
       </div>
       <div class="info">
-        <div class="title">beerbongs & bentleys</div>
+        <div class="title">Alice</div>
       </div>
     </div>
     <div class="center rounded"></div>
diff --git a/src/components/shared/HotKeys.vue b/src/components/shared/HotKeys.vue
index 52fa2f4..30fc75b 100644
--- a/src/components/shared/HotKeys.vue
+++ b/src/components/shared/HotKeys.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="nav">
+  <div class="hotkeys">
     <div class="image ctrl-btn" id="previous" @click="playPrev"></div>
     <div
       class="image ctrl-btn play-pause"
@@ -21,11 +21,26 @@ const isPlaying = playAudio.playing;
 </script>
 
 <style lang="scss">
-.nav {
+.hotkeys {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   width: 100%;
   gap: $small;
+  height: 3rem;
+  align-items: center;
+  place-content: flex-end;
+
+  .ctrl-btn {
+      height: 2.5rem;
+        width: 100%;
+      background-size: 1.5rem !important;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: $red;
+      }
+    }
 
   #previous {
     background-image: url(../../assets/icons/previous.svg);