diff --git a/src/App.vue b/src/App.vue
index bd948671..0d251766 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,33 +12,36 @@
       <PinnedStuff :collapsed="collapsed" />
       <div id="settings-button">
         <div class="in">
-          <div class="nav-icon" id="settings-icon"></div>
+          <div class="nav-icon image" id="settings-icon"></div>
           <span id="text">Settings</span>
         </div>
       </div>
     </div>
-    <div class="nav">
-      <div id="nav"></div>
-    </div>
     <div class="content">
       <router-view />
     </div>
-    <div class="r-sidebar"></div>
+    <div class="r-sidebar">
+      <Search/>
+    </div>
   </div>
 </template>
 
 <script>
 import { ref } from "@vue/reactivity";
+
 import Navigation from "./components/LeftSidebar/Navigation.vue";
 import PinnedStuff from "./components/LeftSidebar/PinnedStuff.vue";
 
+import Search from "./components/RightSideBar/Search.vue"
+
 export default {
   components: {
     Navigation,
     PinnedStuff,
+    Search
   },
   setup() {
-    const collapsed = ref(false);
+    const collapsed = ref(true);
 
     const logo = ref(null);
 
@@ -52,9 +55,9 @@ export default {
 
 <style>
 .logo {
-  height: 30px;
-  width: 150px;
-  margin-left: 35px;
+  height: 2em;
+  width: 9em;
+  margin-left: 2.25em;
   background: url(./assets/logo.svg);
   background-size: contain;
   background-repeat: no-repeat;
@@ -73,32 +76,28 @@ export default {
 }
 
 #logo-container {
-  height: 60px;
-  margin-left: 20px;
+  height: 3.60em;
+  margin-left: 1em;
   display: flex;
   align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: .5em;
 }
 
 .l-sidebar {
   position: relative;
 }
 
-.l-container .seperator {
-  margin-left: -2em;
-}
-
 .l-container #toggle {
   position: fixed;
-  top: 7px;
-  width: 30px;
-  height: 60px;
+  top: 1em;
+  width: 1.75em;
+  height: 3.75em;
   background: url(./assets/icons/menu.svg);
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   cursor: pointer;
-  margin-right: 5px;
+  margin-left: .25em;
 }
 
 .l-container #settings-button {
@@ -108,7 +107,7 @@ export default {
   color: #fff;
   height: 50px;
   width: 100%;
-  border-top: 1px solid #ffffff27;
+  border-top: 1px solid var(--seperator);
 }
 
 #settings-button .in {
@@ -123,14 +122,14 @@ export default {
 }
 
 .l-container #settings-button #settings-icon {
-  margin-left: 23px;
-  margin-right: 5px;
-  width: 24px;
-  height: 24px;
+  margin-left: 1em;
+  margin-right: .25em;
+  width: 1.5em;
+  height: 1.5em;
   background-image: url(./assets/icons/settings.svg);
-  background-size: contain;
+  /* background-size: contain;
   background-repeat: no-repeat;
-  background-position: center;
+  background-position: center; */
 }
 
 .collapsed #settings-button #settings-icon {
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 7af37ced..3d41b41b 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -1,133 +1,141 @@
 :root {
-  --seperator: #ffffff48;
-  --green: #4AD168;
+    --seperator: #ffffff46;
+    --green: #4AD168;
 }
 
 body {
-  margin: 0;
-  background: #0d0e0e;
-  color: #fff;
-  font-family: 'Helvetica Neue', sans-serif;
+    margin: 0;
+    background: #0d0e0e;
+    color: #fff;
+    font-family: 'Helvetica Neue', sans-serif;
 }
 
-/* #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-} */
-
 a {
-  text-decoration: none;
-  color: #fff;
+    text-decoration: none;
+    color: #fff;
 }
 
 .seperator {
-  border: 1px solid;
-  color: transparent;
-  margin: 0em;
+    border: 1px solid;
+    color: transparent;
+    margin: 0em;
 }
 
 .hidden {
-  display: none;
+    display: none;
 }
 
 .l-container {
-  display: grid;
-  grid-template-columns: min-content 4fr 1.5fr;
-  grid-template-rows: 78px 1fr 1fr;
-  grid-auto-flow: row;
-  grid-template-areas:
-    "l-sidebar nav nav"
-    "l-sidebar content r-sidebar"
-    "l-sidebar content r-sidebar";
-  width: 100vw;
-  height: 100vh;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-  background: rgba(0, 0, 0, 0.575);
-  backdrop-filter: blur(40px);
-  -webkit-backdrop-filter: blur(40px);
-  -moz-backdrop-filter: blur(40px)
+    display: grid;
+    grid-template-columns: min-content 4fr 30em;
+    grid-template-rows: 4em 1fr 1fr;
+    grid-auto-flow: row;
+    grid-template-areas: "l-sidebar content r-sidebar" "l-sidebar content r-sidebar" "l-sidebar content r-sidebar";
+    width: 100vw;
+    height: 100vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    background: rgba(0, 0, 0, 0.575);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+    -moz-backdrop-filter: blur(40px);
 }
 
 #bg-blur {
-  position: absolute;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(27, 27, 27, 0.548);
-  background-image: url(../images/dark-bg.jpg);
-  z-index: -1;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(27, 27, 27, 0.548);
+    background-image: url(../images/dark-bg.jpg);
+    z-index: -1;
 }
 
 .collapsed .l-sidebar {
-  width: 70px;
-  transition-timing-function: ease-in-out;
-  transition-duration: 0.3s;
-  transition-property: width;
+    width: 70px;
+    transition-timing-function: ease-in-out;
+    transition-duration: 0.3s;
+    transition-property: width;
 }
 
 .l-sidebar {
-  width: 250px;
-  grid-area: l-sidebar;
-  padding-top: 0.5em;
-  background-color: #131313b2;
-  transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
-  transition-duration: 0.3s;
-  transition-property: width;
+    width: 250px;
+    grid-area: l-sidebar;
+    padding-top: 0.5em;
+    margin: .5em 0 .5em .5em;
+    border-radius: .5em;
+    background-color: #131313b2;
+    transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition-duration: 0.3s;
+    transition-property: width;
 }
+
 .rounded {
-  border-radius: 10px;
+    border-radius: 10px;
 }
 
 .circular {
-  border-radius: 20px;
+    border-radius: 20px;
 }
 
 .flex {
-  display: flex;
-}
-
-.nav {
-  grid-area: nav;
-  border: 1px solid;
+    display: flex;
 }
 
 .content {
-  grid-area: content;
-  border-radius: .25em;
-  padding: .5em;
-  overflow: hidden;
+    grid-area: content;
+    border-radius: .25em;
+    padding: .5em;
+    overflow: hidden;
 }
 
 .r-sidebar {
-  grid-area: r-sidebar;
-  border: 1px solid rgb(109, 109, 109);
-  border-radius: 5px;
+    grid-area: r-sidebar;
+    border-radius: 5px;
+    margin-right: .5em;
+}
+
+.image {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 
 /* scrollbars */
 
+
 /* width */
+
 ::-webkit-scrollbar {
-  width: .5em;
+    width: .5em;
 }
 
+
 /* Track */
+
 ::-webkit-scrollbar-track {
-  background: rgba(51, 51, 51, 0.459);
-  border-radius: 1em;
+    background: rgba(51, 51, 51, 0.459);
+    border-radius: 1em;
 }
 
+
 /* Handle */
+
 ::-webkit-scrollbar-thumb {
-  background: grey;
-  border-radius: 1em;
+    background: grey;
+    border-radius: 1em;
 }
 
+
 /* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: rgb(163, 163, 163);
-}
 
+::-webkit-scrollbar-thumb:hover {
+    background: rgb(163, 163, 163);
+}
\ No newline at end of file
diff --git a/src/assets/images/thriller.jpg b/src/assets/images/thriller.jpg
new file mode 100644
index 00000000..4191ade2
Binary files /dev/null and b/src/assets/images/thriller.jpg differ
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index 940b1102..00e603fe 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@@ -5,7 +5,7 @@
     </div>
     <div class="fsearch">
       <div>
-        <input type="search" placeholder="Search here" />
+        <input type="search" placeholder="Search this directory" />
       </div>
     </div>
   </div>
@@ -44,7 +44,7 @@ export default {};
 .folder-top .fsearch input {
   width: 30em;
   border: none;
-  border-radius: 2em;
+  border-radius: .5em;
   padding-left: 1em;
   background-color: #4645456c;
   color: rgba(255, 255, 255, 0.521);
@@ -63,6 +63,6 @@ export default {};
 
 .folder-top .fsearch input:focus {
   color: rgb(255, 255, 255);
-  outline: 0.1em solid #fafafa;
+  outline: 0.1em solid #fafafa52;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 9df9193e..42ed444f 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -10,9 +10,9 @@
         </tr>
         <tr v-for="song in songs" :key="song">
           <td :style="{ width: songTitleWidth + 'px' }" class="flex">
-            <div class="album-art rounded"></div>
+            <div class="album-art rounded image"></div>
             <div>
-              <span>{{ song.title }}</span>
+              <span class="ellipsis">{{ song.title }}</span>
             </div>
           </td>
           <td :style="{ width: songTitleWidth + 'px' }">
@@ -92,9 +92,6 @@ export default {
   margin-right: 1em;
   background-color: #ccc;
   background-image: url(../../assets/images/Jim_Reeves.png);
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
 }
 
 .folder .table .flex {
@@ -106,9 +103,6 @@ export default {
   position: absolute;
   bottom: 1.5em;
   width: calc(100% - 6em);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 td,
diff --git a/src/components/LeftSidebar/Navigation.vue b/src/components/LeftSidebar/Navigation.vue
index 1f7cb43d..37fc4e9b 100644
--- a/src/components/LeftSidebar/Navigation.vue
+++ b/src/components/LeftSidebar/Navigation.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="nav-container" :class="{ collapsed: collapsed }">
+  <div class="side-nav-container" :class="{ collapsed: collapsed }">
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="home-button">
         <div class="in">
-          <div class="nav-icon" id="home-icon"></div>
+          <div class="nav-icon image" id="home-icon"></div>
           <span id="text">Home</span>
         </div>
       </div>
@@ -12,7 +12,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="album-button">
         <div class="in">
-          <div class="nav-icon" id="album-icon"></div>
+          <div class="nav-icon image" id="album-icon"></div>
           <span id="text">Albums</span>
         </div>
       </div>
@@ -21,7 +21,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="artists-button">
         <div class="in">
-          <div class="nav-icon" id="artists-icon"></div>
+          <div class="nav-icon image" id="artists-icon"></div>
           <span id="text">Artists</span>
         </div>
       </div>
@@ -30,7 +30,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="playlists-button">
         <div class="in">
-          <div class="nav-icon" id="playlists-icon"></div>
+          <div class="nav-icon image" id="playlists-icon"></div>
           <span id="text">Playlist</span>
         </div>
       </div>
@@ -39,7 +39,7 @@
     <router-link :to="{ name: 'Home' }">
       <div class="nav-button" id="mixes-button">
         <div class="in">
-          <div class="nav-icon" id="mixes-icon"></div>
+          <div class="nav-icon image" id="mixes-icon"></div>
           <span id="text">Mixes</span>
         </div>
       </div>
@@ -48,7 +48,7 @@
     <router-link :to="{ name: 'FolderView' }">
       <div class="nav-button" id="folders-button">
         <div class="in">
-          <div class="nav-icon" id="folders-icon"></div>
+          <div class="nav-icon image" id="folders-icon"></div>
           <span id="text">Folders</span>
         </div>
       </div>
@@ -66,7 +66,7 @@ export default {
 
 
 <style>
-.nav-container .in {
+.side-nav-container .in {
   display: flex;
   align-items: center;
 }
@@ -75,14 +75,14 @@ export default {
   flex-direction: column;
 }
 
-.nav-container {
+.side-nav-container {
   color: #fff;
-  border-top: 1px solid rgba(255, 255, 255, 0.158);
+  border-top: 1px solid var(--seperator);
   margin-bottom: 10px;
   padding-top: 10px;
 }
 
-.nav-container .nav-button {
+.side-nav-container .nav-button {
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
@@ -97,53 +97,50 @@ export default {
   margin-top: 5px;
 }
 
-.nav-container .nav-button:hover {
+.side-nav-container .nav-button:hover {
   background-color: rgba(220, 20, 60, 0.5);
 }
 
-.nav-container .nav-button .nav-icon {
+.side-nav-container .nav-button .nav-icon {
   height: 24px;
   width: 24px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
   margin-right: 0.5em;
   margin-left: 10px;
 }
 
-.nav-container #home-button #home-icon {
+.side-nav-container #home-button #home-icon {
   background-image: url(../../assets/icons/home.svg);
 }
 
-.nav-container #album-button #album-icon {
+.side-nav-container #album-button #album-icon {
   background-image: url(../../assets/icons/album.svg);
 }
 
-.nav-container #home-button #text {
+.side-nav-container #home-button #text {
   margin-top: 5px;
 }
 
-.nav-container #artists-button #artists-icon {
+.side-nav-container #artists-button #artists-icon {
   background-image: url(../../assets/icons/artist.svg);
 }
 
-.nav-container #playlists-button #playlists-icon {
+.side-nav-container #playlists-button #playlists-icon {
   background-image: url(../../assets/icons/playlist.svg);
 }
 
-.nav-container #mixes-button #mixes-icon {
+.side-nav-container #mixes-button #mixes-icon {
   background-image: url(../../assets/icons/mix.svg);
 }
 
-.nav-container #folders-button #folders-icon {
+.side-nav-container #folders-button #folders-icon {
   background-image: url(../../assets/icons/folder.svg);
 }
 
-.nav-container #folders-button #text {
+.side-nav-container #folders-button #text {
   margin-top: 5px;
 }
 
-.nav-container hr {
+.side-nav-container hr {
   display: none;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/LeftSidebar/PinnedStuff.vue b/src/components/LeftSidebar/PinnedStuff.vue
index 54884a08..c3f0b2d4 100644
--- a/src/components/LeftSidebar/PinnedStuff.vue
+++ b/src/components/LeftSidebar/PinnedStuff.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="nav-container"
+    class="side-nav-container"
     :class="{ hidden: collapsed }"
     id="pinned-container"
   >
diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
new file mode 100644
index 00000000..573b77d0
--- /dev/null
+++ b/src/components/RightSideBar/Search.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="right-search">
+    <input type="search" id="search" placeholder="Michael Jackson" />
+    <div class="scrollable">
+      <h3 class="heading">TRACKS <span class="more">MORE</span></h3>
+
+      <div class="tracks-results">
+        <div class="result-item" v-for="song in songs" :key="song">
+          <div class="album-art image"></div>
+          <div class="tags">
+            <span class="title">{{ song.title }}</span>
+            <hr />
+            <span class="artist">{{ song.artist }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="albums-results">
+        <h3 class="heading">ALBUMS <span class="more">MORE</span></h3>
+        <div class="grid">
+          <div class="result-item result-item3" v-for="album in albums" :key="album">
+            <div class="album-art image"></div>
+            <div class="title ellipsis">{{ album }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="artists-results">
+        <h3 class="heading">ARTISTS <span class="more">MORE</span></h3>
+        <div class="grid">
+          <div class="result-item result-item3" v-for="album in albums" :key="album">
+            <div class="image"></div>
+            <div class="name ellipsis">{{ album }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    const songs = [
+      {
+        title: "Thriller",
+        artist: "Michael jackson",
+      },
+      {
+        title: "We are the world",
+        artist: "Michael jackson",
+      },
+    ];
+
+    const albums = [
+      "Smooth Criminal like wtf ... and im serious",
+      "Xscape",
+      "USA for Africa",
+    ];
+
+    return { songs, albums };
+  },
+};
+</script>
+
+<style>
+.right-search {
+  position: relative;
+  height: 30em;
+  border-radius: 1em;
+  margin: 0.5em 0 0 0;
+  padding: 0.75em;
+  background-color: rgba(32, 31, 31, 0.5);
+  overflow: hidden;
+}
+
+.right-search .scrollable {
+  height: calc(100% - 4em);
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+
+.right-search .scrollable::-webkit-scrollbar {
+  display: none;
+}
+
+.right-search .heading {
+  font-size: small;
+  position: relative;
+}
+
+.right-search .heading .more {
+  position: absolute;
+  right: 0;
+  border-radius: 0.5em;
+  cursor: pointer;
+}
+
+.right-search input {
+  width: 100%;
+  border: 0.1em solid;
+  border-radius: 0.5em;
+  padding-left: 1em;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.479);
+  font-size: 1em;
+  line-height: 3em;
+  outline: none;
+  margin-bottom: 1em;
+}
+
+.right-search input::-webkit-search-cancel-button {
+  position: relative;
+  right: 1em;
+  cursor: pointer;
+}
+
+.right-search input:focus {
+  color: rgb(255, 255, 255);
+}
+
+.right-search .tracks-results {
+  border-radius: 0.5em;
+  overflow: hidden;
+}
+
+.right-search .tracks-results .result-item {
+  display: flex;
+  align-items: center;
+  height: 5em;
+  background-color: rgba(20, 20, 20, 0.733);
+}
+
+.right-search .tracks-results .result-item:nth-child(odd) {
+  background-color: rgba(90, 90, 90, 0.233);
+}
+.right-search .tracks-results .result-item .album-art {
+  width: 4em;
+  height: 4em;
+  background-color: rgb(27, 150, 74);
+  border-radius: 0.5em;
+  margin: 0 0.5em 0 0.25em;
+  background-image: url(../../assets/images/thriller.jpg);
+}
+
+.right-search hr {
+  margin: 0.1em;
+  border: none;
+}
+
+.right-search .tracks-results .result-item .tags .artist {
+  font-size: small;
+  color: rgba(255, 255, 255, 0.63);
+}
+
+.right-search .albums-results {
+  border-radius: 0.5em;
+  background-color: rgba(8, 3, 1, 0.274);
+  margin-top: 1em;
+}
+.right-search .albums-results .grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.right-search .result-item3 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.right-search .albums-results .result-item .album-art {
+  height: 7em;
+  width: 7em;
+  background-color: rgba(26, 26, 26, 0.452);
+  border-radius: 0.5em;
+  margin-bottom: 0.5em;
+  background-image: url(../../assets/images/thriller.jpg);
+}
+
+.right-search .albums-results .result-item .title {
+  width: 7em;
+  text-align: center;
+}
+
+.right-search .artists-results {
+  border-radius: 0.5em;
+  background-color: rgba(8, 3, 1, 0.274);
+}
+
+.right-search  h3 {
+  padding: 1em 1em 0 1em;
+}
+
+.right-search .artists-results .grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.right-search .artists-results .result-item .image {
+  height: 7em;
+  width: 7em;
+  border-radius: 50%;
+  background-color: rgba(26, 26, 26, 0.452);
+  margin-bottom: 0.5em;
+  background-image: url(../../assets/images/thriller.jpg);
+}
+
+.right-search .artists-results .result-item .name {
+  width: 7em;
+  text-align: center;
+}
+
+</style>
\ No newline at end of file