somethings I don't remember

src/assets/css/_variables.scss

@@ -4,7 +4,7 @@ $card-dark: #131313b2;
 $red: #df4646;
 $blue: #00a8ff;
 $green: rgb(67, 148, 67);
-$seperator: #ffffff46;
+$separator: #ffffff46;
 // sizes
 $small: .5em;
 $smaller: .25em;

src/assets/css/global.scss

@@ -1,5 +1,5 @@
 :root {
-  --seperator: #ffffff46;
+  --separator: #ffffff46;
   --green: #4ad168;
 }
 * {
@@ -35,8 +35,8 @@ a {
   color: #fff;
 }
 
-.seperator {
-  border-top: .1em $seperator solid;
+.separator {
+  border-top: .1em $separator solid;
   color: transparent;
   margin: $small 0 $small 0;
 }

src/components/AlbumsExplorer/AlbumList.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="albums-view rounded">
+    <div class="al-header rounded">
+      <div class="heading">ALL ALBUMS</div>
+      <div class="search" >
+        <input type="search" placeholder="Search albums">
+      </div>
+    </div>
+    <div class="all-albums"></div>
+  </div>
+</template>
+<script>
+export default {
+  setup() {
+    const albums = [
+      {
+        title: "Album 1",
+        artist: "Artist 1",
+      },
+      {
+        title: "Album 2",
+        artist: "Artist 2",
+      },
+      {
+        title: "Album 3",
+        artist: "Artist 3",
+      },
+    ];
+
+    return {
+      albums,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.albums-view {
+  height: calc(100% - 13rem);
+  padding: $small;
+  margin-top: $small;
+  overflow: hidden;
+  background-color: $card-dark;
+
+  .al-header {
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: rgb(48, 43, 43);
+    // border: solid;
+    height: 4em;
+    // padding: $small;
+
+    .search {
+      position: absolute;
+      right: 0;
+    }
+  }
+}
+</style>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="top-albums">
-    <h3 class="heading">TOP ALBUMS</h3>
+    <div class="heading">TOP ALBUMS</div>
     <div class="items">
       <div 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.artist }}</div>
-          <div class="seperator"></div>
+          <div class="separator"></div>
           <div class="top">
             <div class="play-icon"></div>
             <div class="text ellip">{{ album.top_track }}</div>
@@ -48,10 +48,9 @@ export default {
 
 <style lang="scss">
 .top-albums {
-  height: 13rem;
+  height: 12.5rem;
   border-radius: $small;
-  // background: linear-gradient(to bottom right, #5a1c11 60%, #110000);
-  background-color: rgb(12, 1, 1);
+  background-color: rgb(44, 42, 42);
   padding: $small;
 
   .heading {
@@ -66,7 +65,7 @@ export default {
     .item {
       height: 10rem;
       width: 100%;
-      background-color: rgb(122, 72, 5);
+      background-color: rgb(7, 6, 6);
       display: grid;
       align-items: center;
       grid-template-columns: 7.5rem 1fr;
@@ -74,11 +73,6 @@ export default {
       cursor: pointer;
       transition: all 0.2s ease-in-out;
 
-      &:hover {
-        background-color: rgba(214, 80, 39, 0.76);
-        transition: all 0.2s ease-in-out;
-      }
-
       .image {
         height: 7rem;
         width: 7rem;
@@ -97,7 +91,7 @@ export default {
 
       .info .top {
         height: 2.5rem;
-        background-color: rgb(53, 12, 12);
+        background-color: rgb(20, 46, 129);
         border-radius: $small;
         margin-left: auto;
         display: grid;
@@ -106,8 +100,6 @@ export default {
         transition: all 0.2s ease-in-out;
         user-select: none;
 
-       
-
         .play-icon {
           margin: 0 0 0 $small;
           height: 1.5rem;
@@ -124,7 +116,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgb(112, 29, 29);
+          background-color: rgb(31, 68, 150);
           transition: all 0.2s ease-in-out;
 
           .play-icon {
@@ -133,9 +125,9 @@ export default {
           }
         }
 
-         &:active {
+        &:active {
           transform: scale(0.95);
-          transition: all .1s ease-in-out;
+          transition: all 0.1s ease-in-out;
         }
       }
     }

src/components/FolderView/FolderList.vue

@@ -33,7 +33,7 @@ export default {
 #f-items {
   display: flex;
   flex-wrap: wrap;
-  border-top: 1px solid var(--seperator);
+  border-top: 1px solid var(--separator);
   gap: 1rem;
   padding-top: 1rem;
 }

src/components/FolderView/SearchBox.vue

@@ -19,7 +19,7 @@ export default {};
 .folder-top {
   padding-bottom: 1rem;
   margin-bottom: 1rem;
-  border-bottom: 1px solid var(--seperator);
+  border-bottom: 1px solid var(--separator);
 }
 
 .folder-top .fname {

src/components/LeftSidebar/Navigation.vue

@@ -86,7 +86,7 @@ export default {
 
 .side-nav-container {
   color: #fff;
-  border-top: 1px solid var(--seperator);
+  border-top: 1px solid var(--separator);
   margin-bottom: 10px;
   padding-top: 10px;
 }

src/components/LeftSidebar/PinnedStuff.vue

@@ -123,8 +123,8 @@ export default {
   color: transparent;
 }
 
-#pinned-container .seperator {
-  color: var(--seperator);
+#pinned-container .separator {
+  color: var(--separator);
 }
 
 #pinned-container {

src/components/PlaylistView/FeaturedArtists.vue

@@ -85,7 +85,7 @@ export default {
 <style lang="scss">
 .f-artists {
   position: relative;
-  height: 14em;
+  height: 12em;
   width: calc(100% - 1em);
   background-color: #1f1e1d;
   padding: $small;
@@ -98,7 +98,7 @@ export default {
   width: 5rem;
   height: 2rem;
   position: absolute;
-  top: 0.75rem;
+  top: 0.0rem;
   right: 0.5rem;
   display: flex;
   justify-content: space-between;

src/components/RightSideBar/UpNext.vue

@@ -127,7 +127,7 @@ export default {
 
 <style lang="scss">
 .up-next .hr {
-  border-top: 1px solid var(--seperator);
+  border-top: 1px solid var(--separator);
 }
 .up-next .v0 {
   max-height: 0em;

src/views/AlbumsExplorer.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="a-container">
     <TopAlbums />
+    <Albums />
   </div>
 </template>
 
 <script>
 import TopAlbums from "../components/AlbumsExplorer/TopAlbums.vue";
+import Albums from "../components/AlbumsExplorer/AlbumList.vue";
 
 export default {
   components: {
     TopAlbums,
+    Albums
   },
 };
 </script>
@@ -18,7 +21,7 @@ export default {
 .a-container {
   height: 100%;
   border-radius: $small;
-  background-color: $card-dark;
-  padding: $small;
+  // background-color: $card-dark;
+  // padding: $small;
 }
 </style>

src/views/PlaylistView.vue

@@ -40,7 +40,7 @@ export default {
 .p-bg .clip {
   height: calc(100% - 14em);
   padding-bottom: $small;
-  border-bottom: solid 1px $seperator;
+  border-bottom: solid 1px $separator;
 }
 
 .p-bg .scrollable {