diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..50cb0ec 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
deleted file mode 100644
index b02aa64..0000000
Binary files a/public/img/icons/android-chrome-192x192.png and /dev/null differ
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
deleted file mode 100644
index 06088b0..0000000
Binary files a/public/img/icons/android-chrome-512x512.png and /dev/null differ
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
deleted file mode 100644
index 791e9c8..0000000
Binary files a/public/img/icons/android-chrome-maskable-192x192.png and /dev/null differ
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
deleted file mode 100644
index 5f2098e..0000000
Binary files a/public/img/icons/android-chrome-maskable-512x512.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon-120x120.png b/public/img/icons/apple-touch-icon-120x120.png
deleted file mode 100644
index 1427cf6..0000000
Binary files a/public/img/icons/apple-touch-icon-120x120.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
deleted file mode 100644
index f24d454..0000000
Binary files a/public/img/icons/apple-touch-icon-152x152.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon-180x180.png b/public/img/icons/apple-touch-icon-180x180.png
deleted file mode 100644
index 404e192..0000000
Binary files a/public/img/icons/apple-touch-icon-180x180.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon-60x60.png b/public/img/icons/apple-touch-icon-60x60.png
deleted file mode 100644
index cf10a56..0000000
Binary files a/public/img/icons/apple-touch-icon-60x60.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon-76x76.png b/public/img/icons/apple-touch-icon-76x76.png
deleted file mode 100644
index c500769..0000000
Binary files a/public/img/icons/apple-touch-icon-76x76.png and /dev/null differ
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
deleted file mode 100644
index 03c0c5d..0000000
Binary files a/public/img/icons/apple-touch-icon.png and /dev/null differ
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
deleted file mode 100644
index 42af009..0000000
Binary files a/public/img/icons/favicon-16x16.png and /dev/null differ
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
deleted file mode 100644
index 46ca04d..0000000
Binary files a/public/img/icons/favicon-32x32.png and /dev/null differ
diff --git a/public/img/icons/msapplication-icon-144x144.png b/public/img/icons/msapplication-icon-144x144.png
deleted file mode 100644
index 7808237..0000000
Binary files a/public/img/icons/msapplication-icon-144x144.png and /dev/null differ
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
deleted file mode 100644
index 3b37a43..0000000
Binary files a/public/img/icons/mstile-150x150.png and /dev/null differ
diff --git a/public/img/icons/safari-pinned-tab.svg b/public/img/icons/safari-pinned-tab.svg
deleted file mode 100644
index e44c0d5..0000000
--- a/public/img/icons/safari-pinned-tab.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
-</svg>
diff --git a/public/index.html b/public/index.html
index af30bd2..0d81677 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="./favicon.ico">
     <title>MusicX</title>
   </head>
   <body>
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index 02bdb95..9836bc6 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -47,6 +47,7 @@ a {
   background: rgba(0, 0, 0, 0.575);
   backdrop-filter: blur(40px);
   -webkit-backdrop-filter: blur(40px);
+  -moz-backdrop-filter: blur(40px)
 }
 
 #bg-blur {
@@ -96,7 +97,6 @@ a {
   border-radius: 5px;
   padding: 10px;
   overflow: hidden;
-  height: 100%;
 }
 
 .r-sidebar {
@@ -104,3 +104,35 @@ a {
   border: 1px solid rgb(109, 109, 109);
   border-radius: 5px;
 }
+
+
+/* scrollbars */
+
+/* width */
+::-webkit-scrollbar {
+  width: .5em;
+  display: none;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: var(--green);
+  border-radius: 1em;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #21a13d;
+}
+
+
+:root {
+  scrollbar-color: transparent transparent !important;
+  scrollbar-width: none !important;
+}
+
diff --git a/src/components/FolderView/FolderList.vue b/src/components/FolderView/FolderList.vue
index f570d48..c3b4740 100644
--- a/src/components/FolderView/FolderList.vue
+++ b/src/components/FolderView/FolderList.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="f-container" v-for="folder in folders" :key="folder">
-    <router-link :to="{ path: '/' }">
+  <div class="f-container">
+    <h3>folders in this directory</h3>
+    <router-link :to="{ path: '/' }" v-for="folder in folders" :key="folder">
       <div class="f-item circular">
-        <div class="f-item-bg"></div>
         <span class="f-item-text">{{ folder.name }}</span>
       </div>
     </router-link>
@@ -22,24 +22,42 @@ export default {
 </script>
 
 <style>
-.f-item {
-  width: 10em;
-  height: 10em;
-  background-color: var(--green);
+.f-container {
+  margin-bottom: 20em;
+}
+.f-container h3 {
+  text-transform: uppercase;
+  font-weight: normal;
+  color: rgba(255, 255, 255, 0.438);
+  margin-bottom: 0em;
+}
+.f-container .f-item {
+  float: left;
+  width: 9em;
+  height: 8em;
+  /* background-color: #9d020781; */
   display: flex;
   justify-content: center;
   position: relative;
   background-image: url(../../assets/icons/folder.svg);
   background-repeat: no-repeat;
   background-position: center;
-  background-size: 50%;
+  background-size: 30%;
+  margin: 2em 2em 0em 0;
+  padding: 1em;
+  /* border: .1em solid var(--seperator); */
+  background-color: rgba(80, 80, 80, 0.247);
 }
 
-.f-item-text {
+.f-container .f-item:hover {
+  background-color: rgba(0, 0, 0, 0.527);
+}
+
+.f-container .f-item-text {
   width: calc(100% - 10%);
   line-height-step: 2;
   position: absolute;
-  bottom: -3em;
+  bottom: 0.5em;
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -48,10 +66,4 @@ export default {
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-
-.f-item-bg {
-  height: 100px;
-  width: 100%;
-  color: red;
-}
 </style>
\ No newline at end of file
diff --git a/src/components/FolderView/SearchBox.vue b/src/components/FolderView/SearchBox.vue
index 1675ad7..ca0da58 100644
--- a/src/components/FolderView/SearchBox.vue
+++ b/src/components/FolderView/SearchBox.vue
@@ -62,7 +62,7 @@ export default {};
 }
 
 .folder-top .fsearch input:focus {
-  color: rgb(75, 74, 74);
-  outline: 0.1em solid var(--green);
+  color: rgb(255, 255, 255);
+  outline: 0.1em solid #9d0208;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index b6dde92..6f37389 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -115,7 +115,6 @@ tr {
 
 .folder {
   padding-bottom: 1em;
-  margin-bottom: 1em;
 }
 
 td .artist {
diff --git a/src/data/folders.js b/src/data/folders.js
index 8ef107f..862f22d 100644
--- a/src/data/folders.js
+++ b/src/data/folders.js
@@ -14,6 +14,74 @@ const folders = [
   {
     name: "Flashback party",
   },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
+  {
+    name: "HiFi Gold by Elton John",
+  },  {
+    name: "Jim Reeves - 14 number 1s",
+  },
+  {
+    name: "Nadina",
+  },
+  {
+    name: "Lil Peep - Carlifornia girls",
+  },
+  {
+    name: "Legends never die",
+  },
+  {
+    name: "Flashback party",
+  },
   {
     name: "HiFi Gold by Elton John",
   },
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 56d012a..11c26ed 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="f-view-parent" class="rounded">
-    <SearchBox />
+    <div class="fixed">
+      <SearchBox />
+    </div>
     <div id="scrollable">
       <SongList />
       <FolderList />
@@ -29,17 +31,19 @@ export default {
 
 <style>
 #f-view-parent {
-  height: 100%;
+  height: 99%;
   background-color: rgba(0, 0, 0, 0.24);
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 1em;
-  overflow: hidden;
-  /* border: solid; */
 }
 
+#f-view-parent .fixed {
+  height: min-content;
+}
 #scrollable {
-  overflow: scroll;
-  
+  overflow-y: auto;
+  height: 90%;
+  margin-bottom: 2em;
 }
 </style>
\ No newline at end of file