diff --git a/index.js b/index.js
index c9f150e0..14e1839b 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,13 @@ const configDefaults = {
         "followedArtists": [],
         "favoriteItems": []
     },
+    "libraryPrefs": {
+        "songs": {
+            "sort": "name",
+            "sortOrder": "asc",
+            "size": "normal"
+        }
+    },
     "audio": {
         "quality": "990",
         "seamless_audio": true,
@@ -72,6 +79,7 @@ const configDefaults = {
     },
     "advanced": {
         "AudioContext": false,
+        "experiments": []
     }
 }
 
diff --git a/src/main/lastfm.js b/src/main/lastfm.js
index 0c453797..92f47817 100644
--- a/src/main/lastfm.js
+++ b/src/main/lastfm.js
@@ -61,7 +61,6 @@ const lfm = {
     },
 
     scrobbleSong: async function (attributes) {
-        console.log((app.cfg.get('lastfm.scrobble_after') / 100))
         await new Promise(resolve => setTimeout(resolve, Math.round(attributes.durationInMillis * (app.cfg.get('lastfm.scrobble_after') / 100))));
         const currentAttributes = app.media;
         
diff --git a/src/renderer/index.js b/src/renderer/index.js
index e7ca0999..bb67dc27 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -635,6 +635,11 @@ const app = new Vue({
                 this.$forceUpdate()
             }, 500)
         },
+        getAppClasses() {
+            if(this.cfg.advanced.experiments.includes('compactui')) {
+                return {compact: true}
+            }
+        },
         invokeDrawer(panel) {
             if (this.drawer.panel == panel && this.drawer.open) {
                 if (panel == "lyrics") {
@@ -1306,13 +1311,14 @@ const app = new Vue({
         },
         searchLibrarySongs() {
             let self = this
+            let prefs = this.cfg.libraryPrefs.songs
 
             function sortSongs() {
                 // sort this.library.songs.displayListing by song.attributes[self.library.songs.sorting] in descending or ascending order based on alphabetical order and numeric order
                 // check if song.attributes[self.library.songs.sorting] is a number and if so, sort by number if not, sort by alphabetical order ignoring case
                 self.library.songs.displayListing.sort((a, b) => {
-                    let aa = a.attributes[self.library.songs.sorting]
-                    let bb = b.attributes[self.library.songs.sorting]
+                    let aa = a.attributes[prefs.sort]
+                    let bb = b.attributes[prefs.sort]
                     if (self.library.songs.sorting == "genre") {
                         aa = a.attributes.genreNames[0]
                         bb = b.attributes.genreNames[0]
@@ -1323,13 +1329,13 @@ const app = new Vue({
                     if (bb == null) {
                         bb = ""
                     }
-                    if (self.library.songs.sortOrder == "asc") {
+                    if (prefs.sortOrder == "asc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return aa - bb
                         } else {
                             return aa.toString().toLowerCase().localeCompare(bb.toString().toLowerCase())
                         }
-                    } else if (self.library.songs.sortOrder == "desc") {
+                    } else if (prefs.sortOrder == "desc") {
                         if (aa.toString().match(/^\d+$/) && bb.toString().match(/^\d+$/)) {
                             return bb - aa
                         } else {
@@ -1551,7 +1557,6 @@ const app = new Vue({
             this.library.songs.downloadState = 1
             this.library.downloadNotification.show = true
             this.library.downloadNotification.message = "Updating library songs..."
-
             function downloadChunk() {
                 const params = {
                     "include[library-songs]": "catalog,artists,albums",
@@ -3077,6 +3082,41 @@ const app = new Vue({
     }
 })
 
+Vue.component('animated-number', {
+
+    template:"<div style='display: inline-block;'>{{ displayNumber }}</div>",
+    props: {'number': { default:0 }},
+
+    data () {
+        return {
+            displayNumber:0,
+            interval:false
+        }
+    },
+
+    ready () {
+        this.displayNumber = this.number ? this.number : 0;
+    },
+
+    watch: {
+        number () {
+            clearInterval(this.interval);
+
+            if(this.number == this.displayNumber) {
+                return;
+            }
+
+            this.interval = window.setInterval(() => {
+                if(this.displayNumber != this.number) {
+                    var change = (this.number - this.displayNumber) / 10;
+                    change = change >= 0 ? Math.ceil(change) : Math.floor(change);
+                    this.displayNumber = this.displayNumber + change;
+                }
+            }, 20);
+        }
+    }
+})
+
 Vue.component('sidebar-library-item', {
     template: '#sidebar-library-item',
     props: {
diff --git a/src/renderer/less/compact.less b/src/renderer/less/compact.less
new file mode 100644
index 00000000..23f5e47f
--- /dev/null
+++ b/src/renderer/less/compact.less
@@ -0,0 +1,59 @@
+#app.compact {
+  .content-inner {
+    zoom: 0.95;
+  }
+  .app-sidebar-content {
+    padding:0px;
+
+    .app-sidebar-header-text {
+      padding: 6px 10px;
+      margin: 0px;
+    }
+    .app-sidebar-item {
+      display: flex;
+      width: 100%;
+      padding: 8px 12px;
+      font-size: 13px;
+      margin: 0px;
+      border: 1px solid transparent;
+      border-radius: 0px;
+      transition: unset;
+      transform: unset;
+
+      &:active {
+        background: var(--selected-click);
+      }
+
+      &::after {
+        display: none;
+      }
+
+      &.active {
+        background: var(--keyColor-disabled);
+      }
+    }
+    .sidebar-icon {
+      width: 14px;
+      height: 16px;
+      margin-right: 8px;
+    }
+
+    .folder-body {
+      border-radius: 0px;
+      padding: 0px;
+    }
+  }
+
+  @media (max-width: 951px) {
+    .content-inner {
+      zoom: 0.8;
+    }
+  }
+}
+
+// if page width is less than 951px
+@media (max-width: 951px) {
+  .content-inner {
+    zoom: 0.8;
+  }
+}
\ No newline at end of file
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 1a278f0c..e838b37f 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -332,637 +332,663 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
   left: 0;
   padding: 32px;
   width: 100%;
+  transition: zoom 1s;
+  zoom: 1;
 }
 
 .content-inner.centered {
-  height: 100%;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  align-items: center;
+height: 100%;
+display: flex;
+flex-flow: column;
+justify-content: center;
+align-items: center;
 }
 
 .app-drawer {
-  width: 300px;
-  flex: 0 0 auto;
+width: 300px;
+flex: 0 0 auto;
+position: absolute;
+right: 16px;
+top: 3%;
+background: #1c1c1c8f;
+border-radius: 12px;
+z-index: 9;
+height: 94%;
+backdrop-filter: blur(40px) saturate(180%);
+box-shadow: var(--ciderShadow-Generic);
+overflow: hidden;
+
+.bgArtworkMaterial {
+  display: none;
   position: absolute;
-  right: 16px;
-  top: 3%;
-  background: #1c1c1c8f;
-  border-radius: 12px;
-  z-index: 9;
-  height: 94%;
-  backdrop-filter: blur(40px) saturate(180%);
-  box-shadow: var(--ciderShadow-Generic);
-  overflow: hidden;
+  width: 100%;
+  height: 100%;
 
-  .bgArtworkMaterial {
-    display: none;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    .bg-artwork-container .bg-artwork {
-      filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
-    }
+  .bg-artwork-container .bg-artwork {
+    filter: brightness(80%) blur(180px) saturate(180%) contrast(1);
   }
 }
+}
 
 .search-input-container {
-  position: relative;
+position: relative;
 }
 
 .search-input {
-  width: 100%;
-  padding: 6px;
-  border-radius: 6px;
-  border: 1px solid rgb(200 200 200 / 10%);
-  font-family: inherit;
-  font-size: 14px;
-  background: rgb(100 100 100 / 25%);
-  color: rgb(200 200 200);
-  font-weight: 500;
-  padding-left: 32px;
-  position: relative;
-  filter: contrast(0.1);
+width: 100%;
+padding: 6px;
+border-radius: 6px;
+border: 1px solid rgb(200 200 200 / 10%);
+font-family: inherit;
+font-size: 14px;
+background: rgb(100 100 100 / 25%);
+color: rgb(200 200 200);
+font-weight: 500;
+padding-left: 32px;
+position: relative;
+filter: contrast(0.1);
 }
 
 .search-input:focus {
-  outline: none;
-  border-bottom: 1px solid var(--keyColor);
+outline: none;
+border-bottom: 1px solid var(--keyColor);
 }
 
 .search-input--icon {
-  content: '';
-  width: 100%;
-  height: 100%;
-  display: block;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  background-image: url('assets/search.svg');
-  background-position: 10px;
-  background-repeat: no-repeat;
-  background-size: 12px;
-  pointer-events: none;
-  opacity: 0.55;
+content: '';
+width: 100%;
+height: 100%;
+display: block;
+position: absolute;
+top: 0px;
+left: 0px;
+background-image: url('assets/search.svg');
+background-position: 10px;
+background-repeat: no-repeat;
+background-size: 12px;
+pointer-events: none;
+opacity: 0.55;
 }
 
 .app-sidebar-header {
-  font-size: 14px;
-  padding: 11px;
-  font-weight: 600;
+font-size: 14px;
+padding: 11px;
+font-weight: 600;
 }
 
 .app-sidebar-header-text {
-  font-size: 11px;
-  margin: 6px 3px;
-  font-weight: 600;
-  opacity: 0.50;
+font-size: 11px;
+margin: 6px 3px;
+font-weight: 600;
+opacity: 0.50;
 }
 
 .app-sidebar-footer {
-  padding: 11px;
+padding: 11px;
+
+  .app-playback-controls {
+    .control-buttons {
+      display: flex;
+      justify-content: center;
+      align-content: center;
+    }
+    .volume {
+      display: flex;
+    }
+  }
 }
 
 .app-sidebar-button {
-  width: 100%;
-  padding: 0px;
-  font-family: inherit;
-  display: flex;
-  border-radius: 6px;
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(100 100 100 / 25%);
-  color: #eee;
-  font-weight: 500;
-  align-items: center;
+width: 100%;
+padding: 0px;
+font-family: inherit;
+display: flex;
+border-radius: 6px;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(100 100 100 / 25%);
+color: #eee;
+font-weight: 500;
+align-items: center;
 
-  &.active {
-    background: rgb(200 200 200 / 15%);
-    animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
-  }
+&.active {
+  background: rgb(200 200 200 / 15%);
+  animation: usermenuBtnClick .30s cubic-bezier(0.36, 0, 0.66, -0.56);
+}
 }
 
 @keyframes usermenuBtnClick {
-  0% {
-    transform: translateY(0px);
-  }
+0% {
+  transform: translateY(0px);
+}
 
-  50% {
-    transform: translateY(-6px);
-  }
+50% {
+  transform: translateY(-6px);
+}
 
-  100% {
-    transform: translateY(0px);
-  }
+100% {
+  transform: translateY(0px);
+}
 }
 
 .app-sidebar-button > .sidebar-user-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 100%;
-  background-image: var(--artwork);
-  margin: 10px;
-  flex: 0 0 auto;
-  box-shadow: var(--mediaItemShadow);
-  background-size: contain;
+width: 32px;
+height: 32px;
+border-radius: 100%;
+background-image: var(--artwork);
+margin: 10px;
+flex: 0 0 auto;
+box-shadow: var(--mediaItemShadow);
+background-size: contain;
 }
 
 .app-sidebar-button > .sidebar-user-text {
-  width: 100%;
-  display: flex;
-  font-size: 14px;
-  flex-direction: column;
+width: 100%;
+display: flex;
+font-size: 14px;
+flex-direction: column;
 }
 
 .app-sidebar-button > .sidebar-user-text .fullname {
-  text-align: left;
+text-align: left;
 }
 
 .app-sidebar-button > .sidebar-user-text .handle-text {
-  font-size: 12px;
-  opacity: 0.7;
-  text-align: left;
+font-size: 12px;
+opacity: 0.7;
+text-align: left;
 }
 
 .app-sidebar-notification {
-  text-align: center;
-  font-size: 12px;
-  min-height: 60px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-top: 1px solid rgb(200 200 200 / 15%);
-  background: rgb(0 0 0 / 15%);
-  flex-direction: column;
-  padding: 20px 0px;
+text-align: center;
+font-size: 12px;
+min-height: 60px;
+display: flex;
+justify-content: center;
+align-items: center;
+border-top: 1px solid rgb(200 200 200 / 15%);
+background: rgb(0 0 0 / 15%);
+flex-direction: column;
+padding: 20px 0px;
+
+&.libraryNotification {
+  flex-direction: row;
+  padding: 0px;
+  .message {
+    flex-grow: 1;
+  }
+  .spinner {
+    width: 46px;
+    height: 30px;
+    margin-left: 1em;
+  }
+}
 }
 
 .app-sidebar-content {
-  padding: 8px;
-  overflow-y: scroll;
-  overflow-y: overlay;
-  height: 100%;
+padding: 8px;
+overflow-y: scroll;
+overflow-y: overlay;
+height: 100%;
 }
 
 #cmenu() {
-  .container {
-    position: absolute;
-    width: 100%;
-    padding: 10px;
-    z-index: 1;
-  }
+.container {
+  position: absolute;
+  width: 100%;
+  padding: 10px;
+  z-index: 1;
+}
 
-  .body {
-    background: #242424;
-    padding: 6px;
-    border-radius: 6px;
-    width: 100%;
-    box-shadow: var(--ciderShadow-Generic);
-  }
+.body {
+  background: #242424;
+  padding: 6px;
+  border-radius: 6px;
+  width: 100%;
+  box-shadow: var(--ciderShadow-Generic);
+}
 
-  .item {
-    background: transparent;
-    display: block;
-    width: 100%;
-    text-align: left;
-    color: #eee;
-    font-family: inherit;
-    font-size: 15px;
-    padding: 8px 12px;
-    border: 0px;
-    appearance: none;
-    border-radius: 6px;
-    margin: 2px 0px;
+.item {
+  background: transparent;
+  display: block;
+  width: 100%;
+  text-align: left;
+  color: #eee;
+  font-family: inherit;
+  font-size: 15px;
+  padding: 8px 12px;
+  border: 0px;
+  appearance: none;
+  border-radius: 6px;
+  margin: 2px 0px;
 
-    &:hover {
-      background: var(--keyColor);
-    }
+  &:hover {
+    background: var(--keyColor);
   }
 }
+}
 
 .search-hints-container {
-  top: 44px;
-  #cmenu.container();
+top: 44px;
+#cmenu.container();
 
-  .search-hints {
-    #cmenu.body();
+.search-hints {
+  #cmenu.body();
 
-    .search-hint {
-      #cmenu.item();
-    }
+  .search-hint {
+    #cmenu.item();
   }
 }
+}
 
 .usermenu-container {
-  bottom: 66px;
-  #cmenu.container();
+bottom: 66px;
+#cmenu.container();
 
-  .usermenu-body {
-    #cmenu.body();
+.usermenu-body {
+  #cmenu.body();
 
-    .usermenu-item {
-      #cmenu.item();
-    }
+  .usermenu-item {
+    #cmenu.item();
   }
 }
+}
 
 .context-menu {
-  position: absolute;
-  top: 0;
-  left: 0;
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+background: rgba(0, 0, 0, 0.0);
+z-index: 100;
+
+.context-menu-item {
+  background: transparent;
+  display: flex;
   width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.0);
-  z-index: 100;
+  text-align: left;
+  color: #eee;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 6px 12px;
+  border: 0px;
+  appearance: none;
+  border-radius: 6px;
+  margin: 2px 0px;
 
-  .context-menu-item {
-    background: transparent;
-    display: flex;
-    width: 100%;
-    text-align: left;
-    color: #eee;
-    font-family: inherit;
-    font-size: 14px;
-    padding: 6px 12px;
-    border: 0px;
-    appearance: none;
-    border-radius: 6px;
-    margin: 2px 0px;
-
-    &:hover {
-      background: var(--selected);
-      cursor: pointer;
-    }
-
-    &:active {
-      background: var(--selected-click);
-    }
+  &:hover {
+    background: var(--selected);
+    cursor: pointer;
   }
 
-  .context-menu-body {
-    background: #242424;
-    padding: 6px;
-    border-radius: 6px;
-    box-shadow: var(--ciderShadow-Generic);
-
-    &.context-menu-open {
-      animation-duration: .10s;
-      animation-name: contextMenuIn;
-      animation-iteration-count: 1;
-      animation-easings: var(--appleEase);
-    }
-
-    &.context-menu-close {
-      animation-duration: .10s;
-      animation-name: contextMenuOut;
-      animation-iteration-count: 1;
-      animation-easings: var(--appleEase);
-    }
+  &:active {
+    background: var(--selected-click);
   }
 }
 
+.context-menu-body {
+  background: #242424;
+  padding: 6px;
+  border-radius: 6px;
+  box-shadow: var(--ciderShadow-Generic);
+
+  &.context-menu-open {
+    animation-duration: .10s;
+    animation-name: contextMenuIn;
+    animation-iteration-count: 1;
+    animation-easings: var(--appleEase);
+  }
+
+  &.context-menu-close {
+    animation-duration: .10s;
+    animation-name: contextMenuOut;
+    animation-iteration-count: 1;
+    animation-easings: var(--appleEase);
+  }
+}
+}
+
 @keyframes contextMenuIn {
-  0% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
+0% {
+  transform: scale(0.9);
+  opacity: 0;
+}
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
-  }
+100% {
+  transform: scale(1);
+  opacity: 1;
+}
 }
 
 @keyframes contextMenuOut {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-  }
+0% {
+  transform: scale(1);
+  opacity: 1;
+}
 
-  100% {
-    transform: scale(0.9);
-    opacity: 0;
-  }
+100% {
+  transform: scale(0.9);
+  opacity: 0;
+}
 }
 
 .hidden-opacity {
-  opacity: 0;
-  height: 0px;
-  width: 0px;
-  margin: 0px;
+opacity: 0;
+height: 0px;
+width: 0px;
+margin: 0px;
 }
 
 .spinner {
-  background-image: url("assets/spinner.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: contain;
-  width: 50px;
-  height: 50px;
-  display: inline-block;
+background-image: url("assets/spinner.svg");
+background-position: center;
+background-repeat: no-repeat;
+background-size: contain;
+width: 50px;
+height: 50px;
+display: inline-block;
 }
 
 .app-sidebar-content::-webkit-scrollbar {
-  display: none;
+display: none;
 }
 
 .app-sidebar-content:hover::-webkit-scrollbar {
-  display: initial;
+display: initial;
 }
 
 .app-sidebar-item {
-  display: flex;
-  width: 100%;
-  padding: 8px 12px;
-  font-weight: 400;
-  font-family: inherit;
-  font-size: 14px;
-  margin: 6px 0px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  background: transparent;
-  color: #eee;
-  transition: transform .1s;
-  text-align: left;
+display: flex;
+width: 100%;
+padding: 8px 12px;
+font-weight: 400;
+font-family: inherit;
+font-size: 14px;
+margin: 6px 0px;
+border: 1px solid transparent;
+border-radius: 6px;
+background: transparent;
+color: #eee;
+transition: transform .1s;
+text-align: left;
 
-  &.app-sidebar-item-playlist {
-    -webkit-user-drag: element;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+&.app-sidebar-item-playlist {
+  -webkit-user-drag: element;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 }
 
 .app-sidebar-item:hover {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
 }
 
 .app-sidebar-item:active {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
-  transform: scale(0.98);
-  transition: transform 0s;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
+transform: scale(0.98);
+transition: transform 0s;
 }
 
 .app-sidebar-item.active {
-  border: 1px solid rgb(200 200 200 / 5%);
-  background: rgb(200 200 200 / 15%);
-  transform: scale(1);
-  transition: transform 0s;
+border: 1px solid rgb(200 200 200 / 5%);
+background: rgb(200 200 200 / 15%);
+transform: scale(1);
+transition: transform 0s;
 }
 
 .app-sidebar-item.active::after {
-  content: '';
-  width: 4px;
-  height: 16px;
-  display: block;
-  position: absolute;
-  top: calc(100% - 72%);
-  border-radius: 10px;
-  left: 0px;
-  background: var(--keyColor);
+content: '';
+width: 4px;
+height: 16px;
+display: block;
+position: absolute;
+top: calc(100% - 72%);
+border-radius: 10px;
+left: 0px;
+background: var(--keyColor);
 }
 
 .app-chrome {
-  background: var(--color1);
-  width: 100%;
-  height: var(--chromeHeight);
-  display: flex;
-  flex-direction: row;
-  -webkit-app-region: drag;
+background: var(--color1);
+width: 100%;
+height: var(--chromeHeight);
+display: flex;
+flex-direction: row;
+-webkit-app-region: drag;
 }
 
 .mv-chrome {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: 90%;
-  height: 55px;
-  -webkit-app-region: drag;
+position: absolute;
+top: 0;
+right: 0;
+width: 90%;
+height: 55px;
+-webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome--left,
 .app-chrome .app-chrome--center,
 .app-chrome .app-chrome--right {
-  height: 100%;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+height: 100%;
+width: 100%;
+display: flex;
+justify-content: center;
+align-items: center;
 }
 
 .app-chrome .app-chrome--left {
-  width: 30%;
-  justify-content: left;
+width: 30%;
+justify-content: left;
 }
 
 .app-chrome .app-chrome--center {
-  width: 100%;
+width: 100%;
 }
 
 .app-chrome .app-chrome--right {
-  width: 30%;
-  justify-content: right;
+width: 30%;
+justify-content: right;
 }
 
 .app-chrome .app-chrome-item {
-  height: 100%;
-  width: auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  -webkit-app-region: no-drag;
-  height: auto;
+height: 100%;
+width: auto;
+display: flex;
+justify-content: center;
+align-items: center;
+-webkit-app-region: no-drag;
+height: auto;
 }
 
 .app-chrome .app-chrome-item.generic {
-  width: 50px;
-  opacity: 0.70;
+width: 50px;
+opacity: 0.70;
 }
 
 .app-chrome .app-chrome-item.volume {
-  width: 100px;
-  margin-right: 6px;
+width: 100px;
+margin-right: 6px;
 }
 
 .app-chrome-item.volume-icon {
-  opacity: 0.7;
-  background-image: url(http://localhost:9000/assets/volume-up.svg);
-  height: 15px;
-  width: 30px;
-  background-repeat: no-repeat;
+opacity: 0.7;
+background-image: url(http://localhost:9000/assets/volume-up.svg);
+height: 15px;
+width: 30px;
+background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-  transition: all var(--appleTransition);
+transition: all var(--appleTransition);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:hover {
-  background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
-  transform: scale(1.2);
+background-image: radial-gradient(var(--keyColor) 2px, transparent 3px, transparent 10px);
+transform: scale(1.2);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb:active {
-  background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
-  transform: scale(1);
+background-image: radial-gradient(var(--keyColor) 3px, transparent 4px, transparent 10px);
+transform: scale(1);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
-  width: 100%;
+width: 100%;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range] {
-  -webkit-appearance: none;
-  height: 4px;
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 5px;
-  background-size: 70% 100%;
-  background-repeat: no-repeat;
+-webkit-appearance: none;
+height: 4px;
+background: rgba(255, 255, 255, 0.4);
+border-radius: 5px;
+background-size: 70% 100%;
+background-repeat: no-repeat;
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  height: 14px;
-  width: 14px;
-  border-radius: 50%;
-  background: rgb(50 50 50);
-  cursor: default;
-  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+-webkit-appearance: none;
+height: 14px;
+width: 14px;
+border-radius: 50%;
+background: rgb(50 50 50);
+cursor: default;
+box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
 }
 
 .app-chrome .app-chrome-item.volume > input[type=range]::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-  box-shadow: none;
-  border: none;
-  background: transparent;
+-webkit-appearance: none;
+box-shadow: none;
+border: none;
+background: transparent;
 }
 
 .app-chrome .back-button {
-  height: 100%;
-  width: 60px;
+height: 100%;
+width: 60px;
 }
 
 .app-chrome .app-chrome-item.full-height {
-  height: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-title {
-  width: 100px;
-  font-size: 13px;
-  background: url("./logotmp.svg");
-  background-size: 90px;
-  background-repeat: no-repeat;
-  background-position: center;
-  height: 100%;
-  margin-right: 16px;
-  margin-left: 16px;
-  image-rendering: -webkit-optimize-contrast;
-  -webkit-app-region: drag;
+width: 100px;
+font-size: 13px;
+background: url("./logotmp.svg");
+background-size: 90px;
+background-repeat: no-repeat;
+background-position: center;
+height: 100%;
+margin-right: 16px;
+margin-left: 16px;
+image-rendering: -webkit-optimize-contrast;
+-webkit-app-region: drag;
 }
 
 .app-chrome .app-chrome-item > .window-controls {
-  width: 138px;
-  font-size: 13px;
-  height: 100%;
-  display: flex;
+width: 138px;
+font-size: 13px;
+height: 100%;
+display: flex;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div {
-  height: 100%;
-  width: 32px;
+height: 100%;
+width: 32px;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div:hover {
-  background: rgb(200 200 200 / 10%);
+background: rgb(200 200 200 / 10%);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.close {
-  width: 100%;
-  height: 100%;
-  background-image: var(--gfx-closeBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
+background-image: var(--gfx-closeBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
 
-  &:hover {
-    background-color: rgb(196, 43, 28)
-  }
+&:hover {
+  background-color: rgb(196, 43, 28)
+}
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax {
-  background-image: var(--gfx-maxBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
+background-image: var(--gfx-maxBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minmax.restore {
-  background-image: var(--gfx-restoreBtn);
+background-image: var(--gfx-restoreBtn);
 }
 
 .app-chrome .app-chrome-item > .window-controls > div.minimize {
-  background-image: var(--gfx-minBtn);
-  background-position: center;
-  background-repeat: no-repeat;
-  -webkit-app-region: no-drag;
-  width: 100%;
-  height: 100%;
+background-image: var(--gfx-minBtn);
+background-position: center;
+background-repeat: no-repeat;
+-webkit-app-region: no-drag;
+width: 100%;
+height: 100%;
 }
 
 .app-chrome .app-chrome-item.playback-controls {
-  width: 80%;
-  height: 90%;
-  display: flex;
-  max-width: 500px;
-  border-left: 1px solid rgb(200 200 200 / 8%);
-  border-right: 1px solid rgb(200 200 200 / 8%);
+width: 80%;
+height: 90%;
+display: flex;
+max-width: 500px;
+border-left: 1px solid rgb(200 200 200 / 8%);
+border-right: 1px solid rgb(200 200 200 / 8%);
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  width: 100%;
+display: flex;
+justify-content: center;
+align-content: center;
+width: 100%;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-name {
-  font-weight: 600;
-  text-align: center;
-  font-size: 13px;
-  height: 1.3em;
-  line-height: 1.3em;
-  overflow: hidden;
-  max-width: 360px;
+font-weight: 600;
+text-align: center;
+font-size: 13px;
+height: 1.3em;
+line-height: 1.3em;
+overflow: hidden;
+max-width: 360px;
 
-  .song-name-normal {
-    height: inherit;
-  }
+.song-name-normal {
+  height: inherit;
+}
 
-  &.song-artist-marquee {
-    > marquee {
-      //margin-bottom: -3px;
-    }
+&.song-artist-marquee {
+  > marquee {
+    //margin-bottom: -3px;
   }
 }
+}
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-duration p {
-  font-weight: 400;
-  font-size: 10px;
-  height: 1.2em;
-  line-height: 1.3em;
-  overflow: hidden;
-  margin: 0 0 0.5em;
+font-weight: 400;
+font-size: 10px;
+height: 1.2em;
+line-height: 1.3em;
+overflow: hidden;
+margin: 0 0 0.5em;
 }
 
 .app-chrome .app-chrome-item > .app-playback-controls .song-artist {
-  font-weight: 400;
-  font-size: 12px;
-  text-align: center;
-  /*height: 1.2em;
-  line-height: 1.2em;*/
+font-weight: 400;
+font-size: 12px;
+text-align: center;
+/*height: 1.2em;
+line-height: 1.2em;*/
   overflow: hidden;
   z-index: 1;
   max-width: 360px;
@@ -1843,24 +1869,30 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 }
 
 .md-select {
-  padding: 5px 10px;
-  font-size: 1em;
+  width: 100%;
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(200, 200, 200, 0.1);
   font-family: inherit;
-  border-radius: 4px;
-  border: 1px solid rgb(100 100 100 / 35%);
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.3), 0px 1px 1px rgba(0, 0, 0, 0.4);
-  background: #363636;
-  color: #eee;
-}
+  font-size: 14px;
+  background: rgba(100, 100, 100, 0.25);
+  color: #c8c8c8;
+  font-weight: 500;
 
-.md-select:focus {
-  outline: none;
-}
+  option {
+    font-size: 1em;
+    font-family: inherit;
+    padding: 8px 16px;
+    background: #404040;
+  }
 
-.md-select > option {
-  font-size: 1em;
-  font-family: inherit;
-  padding: 8px 16px;
+  optgroup {
+    background: #2c2c2c;
+  }
+
+  &:focus {
+    outline: solid 1px var(--selected);
+  }
 }
 
 .sidebar-playlist {
@@ -2238,6 +2270,27 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
+// Library - Songs page
+.library-page {
+  padding: 0px;
+  .library-header {
+    position: sticky;
+    top: 0;
+    left: 0;
+    border-bottom: 1px solid rgba(200, 200, 200, 0.05);
+    z-index: 6;
+    background: black;
+    padding: 0px 2em;
+    backdrop-filter: blur(32px);
+    background: rgba(24, 24, 24, 0.15);
+    top: var(--navigationBarHeight);
+  }
+
+  .well {
+    margin: 2em;
+  }
+}
+
 /* Album / Playlist Page */
 .playlist-page {
   --bgColor: transparent;
@@ -2835,11 +2888,11 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 
   .info-rect {
-    width: 100%;
     height: 100%;
     display: flex;
     flex-flow: column;
     justify-content: center;
+    flex-grow: 1;
   }
 
   .title {
@@ -2848,7 +2901,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
 
   .subtitle {
     width: 90%;
-    font-size: 12px;
+    font-size: .8em;
     opacity: 0.7;
   }
 
@@ -2870,21 +2923,18 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     justify-content: center;
   }
 
-  .content-rating {
-    text-transform: uppercase;
-    font-size: 10px;
-    border-radius: 3px;
-    background: rgb(200 200 200 / 15%);
-    width: 60px;
-    text-align: center;
-    padding: 5px;
-    margin-right: 12px;
-    flex: 0 0 auto;
-    font-weight: 500;
-    color: #ccc;
+  .explicit-icon {
+    background-image: url("./assets/explicit.svg");
+    height: 12px;
+    width: 36px;
+    filter: contrast(0);
+    background-repeat: no-repeat;
   }
 
   .isLibrary {
+    flex: 0 0 auto;
+    width: 40px;
+    text-align: center;
     button {
       appearance: none;
       border: 0px;
@@ -2913,6 +2963,19 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     box-shadow: var(--mediaItemShadow);
     color: #eee;
   }
+
+//  list item compact
+  &.compact {
+    height: 40px;
+    font-size: 13px;
+    .artwork {
+      display: none;
+    }
+
+    .info-rect {
+      padding-left: 1em;
+    }
+  }
 }
 
 /* mediaitem-hrect */
@@ -3648,7 +3711,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
       }
       
       .bg-artwork-container .bg-artwork {
-        filter: brightness(80%) saturate(69%) blur(180px) contrast(0.8) opacity(0.8);
+        filter: brightness(85%) saturate(95%) blur(180px) contrast(0.9) opacity(0.9);
       }
 
       .no-animation{
@@ -4314,4 +4377,6 @@ body.no-gpu {
   .drawertransition-leave-to {
     right: -300px;
   }
-}
\ No newline at end of file
+}
+
+@import url("less/compact.less");
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index bd6f27fb..c120bbfa 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -7,8 +7,9 @@
          :data-index="index"
          :data-guid="guid"
          :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
+         :key="item.attributes.playParams.id ?? item.id"
          class="cd-mediaitem-list-item"
-         :class="{'mediaitem-selected': app.select_hasMediaItem(guid)}">
+         :class="[{'mediaitem-selected': app.select_hasMediaItem(guid)}, addClasses]">
         <template v-if="isVisible">
             <div class="isLibrary" v-if="showLibraryStatus == true">
                 <button @click="addToLibrary()"
@@ -44,9 +45,7 @@
                     </template>
                 </div>
             </div>
-            <div class="content-rating" v-if="item.attributes.contentRating" @dblclick="app.routeView(item)">
-                {{ item.attributes.contentRating }}
-            </div>
+            <div class="explicit-icon" v-if="item.attributes && item.attributes.contentRating == 'explicit'"></div>
             <template v-if="showMetaData == true" @dblclick="app.routeView(item)">
                 <div class="metainfo">
                     {{ item.attributes.releaseDate ? new Date(item.attributes.releaseDate).toLocaleDateString()
@@ -72,7 +71,8 @@
                 addedToLibrary: false,
                 guid: this.uuidv4(),
                 app: this.$root,
-                displayDuration: true
+                displayDuration: true,
+                addClasses: {}
             }
         },
         props: {
@@ -84,14 +84,25 @@
             'show-meta-data': {type: Boolean, default: false},
             'show-duration': {type: Boolean, default: true},
             'contextExt': {type: Object, required: false},
+            'class-list': {type: String, required: false, default: ""},
         },
         mounted() {
             let duration = this.item.attributes.durationInMillis ?? 0
             if (duration == 0 || !this.showDuration) {
                 this.displayDuration = false
             }
+            this.getClasses()
         },
         methods: {
+            getClasses() {
+                if(this.classList) {
+                    this.addClasses = {}
+                    let classList = this.classList.split(' ')
+                    for(let i = 0; i < classList.length; i++) {
+                        this.addClasses[classList[i]] = true
+                    }
+                }
+            },
             dragStart(evt) {
                 evt.dataTransfer.setData('text/plain', JSON.stringify({
                     type: this.item.attributes.playParams.kind ?? this.item.type,
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index 8dc07f00..0017746b 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -30,7 +30,7 @@
 </head>
 
 <body oncontextmenu="return false;" loading="1" platform="<%= env.platform %>">
-<div id="app">
+<div id="app" :class="getAppClasses()">
     <transition name="fsModeSwitch">
         <div id="app-main" v-show="appMode == 'player'">
             <div class="mv-chrome" v-if="chrome.topChromeVisible == false"></div>
@@ -48,23 +48,23 @@
                     <div class="app-chrome-item full-height" v-else>
                         <div class="app-title"></div>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
                                 @click="mk.shuffleMode = 1"></button>
                         <button class="playback-button--small shuffle active" v-else
                                 @click="mk.shuffleMode = 0"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button previous" @click="prevButton()"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
                         <button class="playback-button play" @click="mk.play()" v-else></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button next" @click="mk.skipToNextItem()"></button>
                     </div>
-                    <div class="app-chrome-item">
+                    <div class="app-chrome-item display--large">
                         <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
                                 @click="mk.repeatMode = 1"></button>
                         <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
@@ -239,9 +239,43 @@
                         </div>
                     </transition>
                     <div class="app-sidebar-footer">
-                        <input type="range" class="web-slider display--small" step="0.01" min="0" max="1"
-                               v-model="mk.volume" @wheel="volumeWheel"
-                               v-if="typeof mk.volume != 'undefined'">
+
+                        <div class="app-playback-controls display--small"  v-if="mkReady()"
+                             @contextmenu="nowPlayingContextMenu">
+                            <div class="control-buttons">
+                                <div class="app-chrome-item">
+                                    <button class="playback-button--small shuffle" v-if="mk.shuffleMode == 0"
+                                            @click="mk.shuffleMode = 1"></button>
+                                    <button class="playback-button--small shuffle active" v-else
+                                            @click="mk.shuffleMode = 0"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button previous" @click="prevButton()"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"></button>
+                                    <button class="playback-button play" @click="mk.play()" v-else></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button next" @click="mk.skipToNextItem()"></button>
+                                </div>
+                                <div class="app-chrome-item">
+                                    <button class="playback-button--small repeat" v-if="mk.repeatMode == 0"
+                                            @click="mk.repeatMode = 1"></button>
+                                    <button class="playback-button--small repeat active" @click="mk.repeatMode = 2"
+                                            v-else-if="mk.repeatMode == 1"></button>
+                                    <button class="playback-button--small repeat repeatOne" @click="mk.repeatMode = 0"
+                                            v-else-if="mk.repeatMode == 2"></button>
+                                </div>
+                            </div>
+                            <div class="app-chrome-item volume">
+                                <div class="app-chrome-item volume-icon"></div>
+                                <div class="input-container">
+                                    <input type="range" class="" @wheel="volumeWheel" step="0.01" min="0" max="1" v-model="mk.volume"
+                                           v-if="typeof mk.volume != 'undefined'">
+                                </div>
+                            </div>
+                        </div>
                         <button class="app-sidebar-button" style="width:100%"
                                 :class="{active: chrome.menuOpened}"
                                 @blur="setTimeout(()=>{chrome.menuOpened = false}, 100)"
@@ -269,14 +303,8 @@
                             </div>
                         </button>
                     </div>
-                    <div class="app-sidebar-notification" v-if="library.downloadNotification.show">
-                        <div>{{ library.downloadNotification.message }}</div>
-                        <div>{{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }}
-                        </div>
-                        <div style="width: 100%">
-                            <progress style="width: 80%;" :value="library.downloadNotification.progress"
-                                      :max="library.downloadNotification.total"></progress>
-                        </div>
+                    <div class="app-sidebar-notification libraryNotification" v-if="library.downloadNotification.show">
+                        <div class="message">{{ library.downloadNotification.message }} ({{ library.downloadNotification.progress }} / {{ library.downloadNotification.total }})</div>
                     </div>
                 </div>
                 <div id="app-content">
@@ -427,7 +455,9 @@
                     </transition>
                     <!-- Library - Songs -->
                     <transition name="wpfade" v-on:enter="getLibrarySongsFull()">
-                        <%- include('pages/library-songs') %>
+                        <template v-if="page == 'library-songs'">
+                            <cider-library-songs :data="library.songs"></cider-library-songs>
+                        </template>
                     </transition>
                     <!-- Library - Albums -->
                     <transition name="wpfade" v-on:enter="getLibraryAlbumsFull(null, 1); searchLibraryAlbums(1);">
@@ -528,6 +558,9 @@
     </div>
 </div>
 
+<!-- Library - Songs -->
+<%- include('pages/library-songs') %>
+
 <!-- Media Item Artwork-->
 <%- include("components/mediaitem-artwork"); %>
 <!-- Browse -->
diff --git a/src/renderer/views/pages/library-songs.ejs b/src/renderer/views/pages/library-songs.ejs
index cb2501ab..76d891d2 100644
--- a/src/renderer/views/pages/library-songs.ejs
+++ b/src/renderer/views/pages/library-songs.ejs
@@ -1,46 +1,80 @@
-<template v-if="page == 'library-songs'">
-    <div class="content-inner">
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <h1 class="header-text">Songs</h1>
-            </div>
-            <div class="col-auto">
-                <button v-if="library.songs.downloadState == 2" @click="getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col" style="padding:0;">
-                <div class="search-input-container" style="width:100%;margin: 16px 0;">
-                    <div class="search-input--icon"></div>
-                    <input type="search"
-                           style="width:100%;"
-                           spellcheck="false"
-                           placeholder="Search..."
-                           @input="searchLibrarySongs"
-                           v-model="library.songs.search" class="search-input">
+
+
+<script type="text/x-template" id="cider-library-songs">
+    <div class="content-inner library-page">
+        <div class="library-header">
+            <div class="row">
+                <div class="col" style="padding:0;">
+                    <div class="search-input-container" style="width:100%;margin: 16px 0;">
+                        <div class="search-input--icon"></div>
+                        <input type="search"
+                               style="width:100%;"
+                               spellcheck="false"
+                               placeholder="Search..."
+                               @input="$root.searchLibrarySongs"
+                               v-model="library.songs.search" class="search-input">
+                    </div>
                 </div>
-            </div>
-            <div class="col-auto flex-center">
-                <div class="row">
-                    <div class="col">
-                        <select class="md-select" v-model="library.songs.sorting" @change="searchLibrarySongs()">
-                            <optgroup label="Sort By">
-                                <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
-                            </optgroup>
-                        </select>
-                    </div>
-                    <div class="col">
-                        <select class="md-select" v-model="library.songs.sortOrder" @change="searchLibrarySongs()">
-                            <optgroup label="Sort Order">
-                                <option value="asc">Ascending</option>
-                                <option value="desc">Descending</option>
-                            </optgroup>
-                        </select>
+                <div class="col-auto flex-center">
+                    <div class="row">
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.sort" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Sort By">
+                                    <option v-for="(sort, index) in library.songs.sortingOptions" :value="index">{{ sort }}</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.sortOrder" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Sort Order">
+                                    <option value="asc">Ascending</option>
+                                    <option value="desc">Descending</option>
+                                </optgroup>
+                            </select>
+                        </div>
+                        <div class="col">
+                            <select class="md-select" v-model="prefs.size" @change="$root.searchLibrarySongs()">
+                                <optgroup label="Size">
+                                    <option value="normal">Normal</option>
+                                    <option value="compact">Compact</option>
+                                </optgroup>
+                            </select>
+                        </div>
                     </div>
                 </div>
+                <div class="col-auto flex-center">
+                    <button v-if="library.songs.downloadState == 2" @click="$root.getLibrarySongsFull(true)" class="reload-btn"><%- include('../svg/redo.svg') %></button>
+                    <button v-else class="reload-btn" style="opacity: 0.8;pointer-events: none">
+                        <div class="spinner"></div>
+                    </button>
+                </div>
             </div>
         </div>
+
         <div v-if="library.songs.downloadState == 3">Library contains no songs.</div>
-        <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        <div class="well" :key="1" v-if="prefs.size == 'compact'">
+            <mediaitem-list-item class-list="compact" :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        </div>
+        <div class="well" :key="2" v-else>
+            <mediaitem-list-item :item="item" :parent="'librarysongs'" :index="index" :show-meta-data="true" :show-library-status="false" v-for="(item, index) in library.songs.displayListing"></mediaitem-list-item>
+        </div>
     </div>
-</template>
\ No newline at end of file
+</script>
+
+<script>
+    Vue.component('cider-library-songs', {
+        template: '#cider-library-songs',
+        data: function () {
+            return {
+                library: this.$root.library,
+                mediaItemSize: "compact",
+                prefs: this.$root.cfg.libraryPrefs.songs
+            }
+        },
+        methods: {
+            sayHello: function () {
+                alert('Hello world!');
+            }
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/src/renderer/views/pages/settings.ejs b/src/renderer/views/pages/settings.ejs
index 0b6d6e55..a99b19ea 100644
--- a/src/renderer/views/pages/settings.ejs
+++ b/src/renderer/views/pages/settings.ejs
@@ -465,77 +465,92 @@
                 </div>
             </div>
             <div class="md-option-header">
-                <span>Unfinished / Non Functional</span>
+                <span>Experimental</span>
             </div>
             <div class="md-option-line">
                 <div class="md-option-segment">
-                    Theme
+                    Compact UI
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value="0">Cider</option>
-                    </select>
+                <div class="md-option-segment md-option-segment_auto" >
+                    <button class="md-btn" :class="{'md-btn-primary': app.cfg.advanced.experiments.includes('compactui')}" @click="app.cfg.advanced.experiments.includes('compactui') ? removeExperiment('compactui') : addExperiment('compactui')">
+                        {{app.cfg.advanced.experiments.includes('compactui') ? 'Enabled' : 'Disabled'}}
+                    </button>
                 </div>
             </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Theme Options
+            <div style="opacity: 0.5; pointer-events: none">
+                <div class="md-option-header">
+                    <span>Unfinished / Non Functional</span>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <button class="btn">Theme Options</button>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Theme
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value="0">Cider</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Scrollbars
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Theme Options
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <button class="btn">Theme Options</button>
+                    </div>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value="0">Show on hover</option>
-                        <option value="1">Always show</option>
-                        <option value="2">Hidden</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Scrollbars
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value="0">Show on hover</option>
+                            <option value="1">Always show</option>
+                            <option value="2">Hidden</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Refresh Rate
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Refresh Rate
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Automatic</option>
+                            <option value='30'>30</option>
+                            <option value='60'>60</option>
+                            <option value='144'>144</option>
+                            <option value='175'>175</option>
+                            <option value='240'>240</option>
+                            <option value='360'>30</option>
+                        </select>
+                    </div>
                 </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Automatic</option>
-                        <option value='30'>30</option>
-                        <option value='60'>60</option>
-                        <option value='144'>144</option>
-                        <option value='175'>175</option>
-                        <option value='240'>240</option>
-                        <option value='360'>30</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Close Button Behavior
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Minimize to system tray</option>
+                            <option value='1'>Minimize to taskbar ? dock</option>
+                            <option value='2'>Quit Cider</option>
+                        </select>
+                    </div>
                 </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Close Button Behavior
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Minimize to system tray</option>
-                        <option value='1'>Minimize to taskbar ? dock</option>
-                        <option value='2'>Quit Cider</option>
-                    </select>
-                </div>
-            </div>
-            <div class="md-option-line">
-                <div class="md-option-segment">
-                    Open Cider on Startup
-                </div>
-                <div class="md-option-segment md-option-segment_auto">
-                    <select class="md-select">
-                        <option value='0'>Never</option>
-                        <option value='1'>Always</option>
-                        <option value='2'>Always, minimized</option>
-                        <option value='2'>Always, hidden in tray</option>
-                    </select>
+                <div class="md-option-line">
+                    <div class="md-option-segment">
+                        Open Cider on Startup
+                    </div>
+                    <div class="md-option-segment md-option-segment_auto">
+                        <select class="md-select">
+                            <option value='0'>Never</option>
+                            <option value='1'>Always</option>
+                            <option value='2'>Always, minimized</option>
+                            <option value='2'>Always, hidden in tray</option>
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>
@@ -561,6 +576,12 @@
             }
         },
         methods: {
+            addExperiment(flag) {
+                app.cfg.advanced.experiments.push(flag);
+            },
+            removeExperiment(flag) {
+                app.cfg.advanced.experiments.splice(app.cfg.advanced.experiments.indexOf(flag), 1);
+            },
             toggleAudioContext: function(){
                 if (app.cfg.advanced.AudioContext){
                     CiderAudio.init();
diff --git a/src/renderer/views/svg/in-library.svg b/src/renderer/views/svg/in-library.svg
new file mode 100644
index 00000000..d5806ea9
--- /dev/null
+++ b/src/renderer/views/svg/in-library.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 214 214" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-79.4309,9.53659)">
+        <path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146ZM235.163,83.646C235.163,64.228 219.398,48.463 199.98,48.463L129.614,48.463C110.196,48.463 94.431,64.228 94.431,83.646L94.431,154.012C94.431,173.43 110.196,189.195 129.614,189.195L199.98,189.195C219.398,189.195 235.163,173.43 235.163,154.012L235.163,83.646Z" style="fill:currentColor;"/>
+    </g>
+    <g transform="matrix(0.906286,0,0,0.906286,-20.9871,-22.3274)">
+        <path d="M250.163,76.146C250.163,52.589 231.037,33.463 207.48,33.463L122.114,33.463C98.556,33.463 79.431,52.589 79.431,76.146L79.431,161.512C79.431,185.07 98.556,204.195 122.114,204.195L207.48,204.195C231.037,204.195 250.163,185.07 250.163,161.512L250.163,76.146Z" style="fill:white;"/>
+    </g>
+    <g transform="matrix(0.333526,0,0,0.333526,43.0167,0)">
+        <path d="M511.8,130.7C511.8,115 510.5,99.3 506.7,84C500,56 484,34.7 460.2,19C448,11 434.5,6.1 420.1,3.5C409.1,1.5 397.9,0.6 386.8,0.3L384.1,0L127.6,0C124.4,0.3 121.1,0.4 117.9,0.6C102,1.5 86.2,3.2 71.1,9.2C42.7,20.4 22.1,40.1 10.1,68.4C5.9,78 3.8,88.2 2.3,98.5C1.1,106.8 0.4,115.3 0.1,123.7L-0.1,125.7L-0.1,386.4C0.1,389.4 0.2,392.4 0.4,395.4C1.5,412.8 3.7,430.1 11.1,446.1C24.9,476.4 48.2,496.3 80.1,505.8C89,508.6 98.3,509.8 107.7,510.6C119.5,511.8 131.4,511.9 143.2,511.9L378.5,511.9C389.7,511.9 400.8,511.2 412,509.7C429.6,507.5 446.1,502.3 461,492.5C478.9,480.7 492.4,465 501.1,445.4C505.1,436.4 507.3,426.8 509,417.2C511.4,402.8 511.9,388.2 511.9,373.6C511.8,292.6 511.9,211.6 511.8,130.6L511.8,130.7ZM374.8,93.4L374.8,337.6C374.8,346.5 373.6,355.3 369.6,363.3C363.4,375.9 353.4,383.8 340,387.6C332.6,389.8 324.9,390.9 317.2,391.3C297,392.3 279.4,378.6 275.8,358.6C272.7,342.1 280.6,323.9 298,315.4C304.8,312.1 312.2,310.1 319.7,308.6C327.8,306.9 335.9,305.3 343.9,303.4C349.8,302.1 353.6,298.5 354.8,292.4L355.2,288.3L355.2,172.1L354.6,168.2C353.8,165 351.4,163 348.1,163.2C344.7,163.4 341.4,163.9 338,164.6C321.7,167.8 305.5,171 289.3,174.3L210.4,190.2L209.3,190.5C203.4,192.2 201.3,194.8 201,201L201,203.7C200.9,259.2 201,314.7 200.9,370.2C200.9,379.2 199.9,388 196.3,396.4C190.4,410.1 179.9,418.7 165.7,422.7C158.2,424.9 150.5,426.1 142.7,426.4C122.3,427.2 105.3,413.6 101.8,393.5C98.8,376.2 106.7,357.5 126.4,349.2C134.1,346 142,344.3 150.1,342.6C156.2,341.4 162.4,340.1 168.4,338.9C176.6,337.2 180.8,332 181.2,323.7L181.2,131C181.2,128.3 181.5,125.7 182.1,123.1C183.6,117 187.9,113.5 193.8,112.1C199.2,110.7 204.8,109.7 210.3,108.5C226,105.3 241.5,102.2 257.2,99.1L305.6,89.3C319.9,86.5 334.2,83.6 348.5,80.7C353.2,79.8 357.9,78.8 362.7,78.4C369.3,77.8 373.9,82 374.5,88.7C374.7,90.3 374.8,91.9 374.8,93.4Z" style="fill:currentColor;fill-rule:nonzero;"/>
+    </g>
+</svg>