diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 1b8026f7..403e38e0 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -984,11 +984,11 @@
 
 /* mediaitem-square */
 .cd-mediaitem-square {
-  --transitionDuration: .25s;
+  --transitionDuration: .5s;
   --scaleRate: 1.25;
   --scaleRateArtwork: 1;
-  width: 200px;
-  height: 200px;
+  width: calc(160px * var(--windowRelativeScale));
+  height: calc(200px * var(--windowRelativeScale));
   display: inline-flex;
   flex: 0 0 auto;
   flex-direction: column;
@@ -996,14 +996,13 @@
   justify-content: center;
   align-items: center;
   border-radius: 6px;
-  transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
   .artwork-container {
     position: relative;
 
     .artwork {
-      height: 150px;
-      width: 150px;
+      height: calc(140px * var(--windowRelativeScale));
+      width: calc(140px * var(--windowRelativeScale));
       background: blue;
       border-radius: var(--mediaItemRadius);
       background: var(--artwork);
@@ -1011,7 +1010,6 @@
       flex: 0 0 auto;
       margin: 6px;
       cursor: pointer;
-      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
       .mediaitem-artwork {
         box-shadow: unset;
@@ -1085,31 +1083,31 @@
     }
   }
 
-  &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
-    @media (min-width: 1460px) {
-      --scaleRate: 1.1;
-      --scaleRateArtwork: 0.9;
-      width: calc(200px * var(--scaleRate));
-      height: calc(200px * var(--scaleRate));
+  // &:not(.mediaitem-card):not(.mediaitem-brick):not(.mediaitem-video):not(.noscale) {
+  //   @media (min-width: 1460px) {
+  //     --scaleRate: 1.1;
+  //     --scaleRateArtwork: 0.9;
+  //     width: calc(200px * var(--scaleRate));
+  //     height: calc(200px * var(--scaleRate));
 
-      .artwork-container > .artwork {
-        width: calc(190px * var(--scaleRateArtwork));
-        height: calc(190px * var(--scaleRateArtwork));
-      }
-    }
+  //     .artwork-container > .artwork {
+  //       width: calc(190px * var(--scaleRateArtwork));
+  //       height: calc(190px * var(--scaleRateArtwork));
+  //     }
+  //   }
 
-    @media (min-width: 1550px) {
-      --scaleRate: 1.25;
-      --scaleRateArtwork: 1;
-      width: calc(200px * var(--scaleRate));
-      height: calc(200px * var(--scaleRate));
+  //   @media (min-width: 1550px) {
+  //     --scaleRate: 1.25;
+  //     --scaleRateArtwork: 1;
+  //     width: calc(200px * var(--scaleRate));
+  //     height: calc(200px * var(--scaleRate));
 
-      .artwork-container > .artwork {
-        width: calc(190px * var(--scaleRateArtwork));
-        height: calc(190px * var(--scaleRateArtwork));
-      }
-    }
-  }
+  //     .artwork-container > .artwork {
+  //       width: calc(190px * var(--scaleRateArtwork));
+  //       height: calc(190px * var(--scaleRateArtwork));
+  //     }
+  //   }
+  // }
 
 
   .info-rect {
@@ -1161,10 +1159,12 @@
   &.mediaitem-video {
     height: 200px;
     width: 240px;
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
       height: 120px;
       width: 212px;
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
     &:not(.noscale) {
@@ -1195,48 +1195,52 @@
   }
 
   &.mediaitem-brick {
-    height: 200px;
-    width: 240px;
+    height: calc(200px, var(--windowRelativeScale));
+    width: calc(240px, var(--windowRelativeScale));
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: 123px;
-      width: 220px;
+      height: calc(123px, var(--windowRelativeScale));
+      width: calc(220px, var(--windowRelativeScale));
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
 
-    &:not(.noscale) {
-      @media (min-width: 1460px) {
-        --scaleRate: 1.1;
-        --scaleRateArtwork: 1.1;
-        width: calc(240px * var(--scaleRate));
-        height: calc(200px * var(--scaleRate));
+    // &:not(.noscale) {
+    //   @media (min-width: 1460px) {
+    //     --scaleRate: 1.1;
+    //     --scaleRateArtwork: 1.1;
+    //     width: calc(240px * var(--scaleRate));
+    //     height: calc(200px * var(--scaleRate));
   
-        .artwork-container > .artwork {
-          width: calc(220px * var(--scaleRateArtwork));
-          height: calc(123px * var(--scaleRateArtwork));
-        }
-      }
+    //     .artwork-container > .artwork {
+    //       width: calc(220px * var(--scaleRateArtwork));
+    //       height: calc(123px * var(--scaleRateArtwork));
+    //     }
+    //   }
   
-      @media (min-width: 1550px) {
-        --scaleRate: 1.25;
-        --scaleRateArtwork: 1.25;
-        width: calc(240px * var(--scaleRate));
-        height: calc(200px * var(--scaleRate));
+    //   @media (min-width: 1550px) {
+    //     --scaleRate: 1.25;
+    //     --scaleRateArtwork: 1.25;
+    //     width: calc(240px * var(--scaleRate));
+    //     height: calc(200px * var(--scaleRate));
   
-        .artwork-container > .artwork {
-          width: calc(220px * var(--scaleRateArtwork));
-          height: calc(123px * var(--scaleRateArtwork));
-        }
-      }
-    }
+    //     .artwork-container > .artwork {
+    //       width: calc(220px * var(--scaleRateArtwork));
+    //       height: calc(123px * var(--scaleRateArtwork));
+    //     }
+    //   }
+    // }
   }
 
   &.mediaitem-small {
-    width: 140px;
-    height: 180px;
+    width: calc(140px, var(--windowRelativeScale));
+    height: calc(180px, var(--windowRelativeScale));
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
-      height: 128px;
-      width: 128px;
+      height: calc(128px, var(--windowRelativeScale));
+      width: calc(128px, var(--windowRelativeScale));
+      transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
     }
   }
 
@@ -1249,6 +1253,7 @@
     position: relative;
     border-radius: calc(var(--mediaItemRadius) * 2);
     box-shadow: var(--mediaItemShadow-ShadowSubtle);
+    transition: width var(--transitionDuration) linear, height var(--transitionDuration) linear;
 
     .artwork {
       width: 230px;
@@ -1341,7 +1346,7 @@
     }
 
     &:not(.noscale) {
-      @media (min-width: 1460px) {
+      @media (min-width: 1200px) {
         width: calc(230px * 1.1);
         height: calc(298px * 1.1);
         .artwork-container > .artwork {
@@ -1350,7 +1355,7 @@
         }
       }
 
-      @media (min-width: 1550px) {
+      @media (min-width: 1400px) {
         width: calc(230px * 1.25);
         height: calc(298px * 1.25);
         .artwork-container > .artwork {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index a975a90d..1edc9418 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -706,6 +706,9 @@ const app = new Vue({
             } catch (err) {
             }
 
+            // Used to get a scale factor for the window for CSS scaling
+            window.addEventListener("resize", e =>  this.setWindowScaleFactor())
+            this.setWindowScaleFactor()
             this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
             this.mk._bag.features["broadcast-radio"] = true
             this.mk._services.apiManager.store.storekit._restrictedEnabled = false
@@ -1092,6 +1095,17 @@ const app = new Vue({
 
             ipcRenderer.invoke("scanLibrary")
         },
+        setWindowScaleFactor() {
+            let scale = window.devicePixelRatio * window.innerWidth / 1280 * window.innerHeight / 720
+
+            if(scale <= 1) {
+                scale = 1
+            }else if(scale >= 1.4) {
+                scale = 1.4
+            }
+            document.documentElement.style
+                    .setProperty('--windowRelativeScale', scale);
+        },
         showFoo(querySelector, time) {
             clearTimeout(this.idleTimer);
             if (this.idleState == true) {
diff --git a/src/renderer/style.less b/src/renderer/style.less
index a4592068..60619f5b 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -14,6 +14,7 @@
 @import url("less/pages.less");
 
 :root {
+  --windowRelativeScale: 1;
   --appleEase: cubic-bezier(0.42, 0, 0.58, 1);
   --borderColor: rgb(200 200 200 / 16%);
   --mediaItemShadow: inset 0px 0px 0px 1px rgb(200 200 200 / 16%);
diff --git a/src/renderer/views/pages/library-recentlyadded.ejs b/src/renderer/views/pages/library-recentlyadded.ejs
index 9f5b2151..b65150c9 100644
--- a/src/renderer/views/pages/library-recentlyadded.ejs
+++ b/src/renderer/views/pages/library-recentlyadded.ejs
@@ -1,13 +1,13 @@
 <script type="text/x-template" id="cider-recentlyadded">
     <div class="content-inner">
         <h1 class="header-text">{{$root.getLz('term.recentlyAdded')}}</h1>
-        <div class="well itemContainer" v-if="itemSize == 'normal'">
+        <div class="well itemContainer collection-list-square" v-if="itemSize == 'normal'">
             <mediaitem-square v-for="item in items" :item="item"></mediaitem-square>
         </div>
-        <div class="well itemContainer" v-else="itemSize == 'compact'">
+        <div class="well itemContainer collection-list-square" v-else="itemSize == 'compact'">
             <mediaitem-list-item :show-meta-data="true" :show-library-status="false" v-for="item in items" :item="item"></mediaitem-list-item>
         </div>
-        <div class="well itemContainer" v-show="loading">
+        <div class="well itemContainer collection-list-square" v-show="loading">
             <div class="spinner"></div>
         </div>
         <button v-if="nextUrl && !loading" style="opacity:0;height: 32px;" v-observe-visibility="{callback: visibilityChanged}">{{$root.getLz('term.showMore')}}