diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index f6b0f3bcb..248d2f805 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -119,10 +119,13 @@
                             {{ item.title != undefined ? item.title : '' }}
                         </p>                            
                     </div>
+                    
                     <!-- Thumbnail -->
                     <a
                             v-if="item.thumbnail != undefined"
-                            @click="onClickItem($event, item, index)">
+                            @click="onClickItem($event, item, index)"
+                            class="grid-item-thumbnail"
+                            :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }">
                         <img :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
                     </a>
 
@@ -326,11 +329,14 @@
                     <div    
                             class="media"
                             @click="onClickItem($event, item, index)">
-                      
-                        <img 
-                                v-if="item.thumbnail != undefined"
-                                :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
-                    
+                        <div 
+                                :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
+                                class="card-thumbnail">
+                            <img 
+                                    v-if="item.thumbnail != undefined"
+                                    :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">
+                        </div>
+
                         <div class="list-metadata media-body">
                             <!-- Description -->
                             <p 
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 7dae55ece..a8f8e728f 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -44,7 +44,10 @@
             .skeleton {
                 width: 130px !important;
                 height: 130px !important;
-                margin-left: -130px !important;
+            }
+            .card-thumbnail {
+                width: 130px !important;
+                height: 130px !important;
             }
         }
 
@@ -86,11 +89,20 @@
             width: 170px;
             height: 170px;
             border-radius: 0px;
+            visibility: hidden;
+        }
+        .card-thumbnail {
+            width: 170px;
+            height: 170px;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            margin: 0;
         }
         .skeleton {
             width: 170px;
             height: 170px;
-            margin-left: -170px;
+            position: absolute;
             z-index: -1;
             background-color: #e0e0e0;
         }
diff --git a/src/admin/scss/_view-mode-grid.scss b/src/admin/scss/_view-mode-grid.scss
index 299f76e9e..1eefd8511 100644
--- a/src/admin/scss/_view-mode-grid.scss
+++ b/src/admin/scss/_view-mode-grid.scss
@@ -40,7 +40,7 @@
             opacity: 0;
             padding: 3px 8px;
             transition: visibility 0.2s, opacity 0.2s;
-            margin-top: -31px;
+            margin-top: -29px;
             background-color: $gray2;
 
             a {
@@ -53,14 +53,35 @@
             background-color: $gray2 !important;
         }
 
-        img {
-            max-width: 255px;
-            max-height: 255px;
-            height: auto;
-            border-radius: 0px;
-            margin-bottom: -5px;
-        }
+        .grid-item-thumbnail {
+            width: 255px;
+            height: 255px;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            margin: 0;
+            display: block;
+            position: relative;
 
+            .skeleton {
+                width: 255px;
+                height: 255px;
+                position: absolute;
+                z-index: -1;
+                background-color: #e0e0e0;
+                bottom: 0;
+            }
+            
+            img {
+                width: 255px;
+                height: 255px;
+                height: auto;
+                border-radius: 0px;
+                margin-bottom: -5px;
+                visibility: hidden;
+            }
+        }
+        
         .metadata-title {
             flex-shrink: 0;
             margin-bottom: 6px;
diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss
index dde283cf1..53e5d3f79 100644
--- a/src/admin/scss/_view-mode-masonry.scss
+++ b/src/admin/scss/_view-mode-masonry.scss
@@ -73,9 +73,11 @@
             img {
                 width: 100%;
                 height: auto;    
-                // visibility: hidden;
                 transition: height 0.2s ease;
             }
+            img:not(.skeleton) {
+                visibility: hidden;
+            }
 
             // Masonry skeleton is white due to 
             // background-blend-mode
diff --git a/src/theme-helper/view-mode-cards.vue b/src/theme-helper/view-mode-cards.vue
index 897e06329..78967c4ac 100644
--- a/src/theme-helper/view-mode-cards.vue
+++ b/src/theme-helper/view-mode-cards.vue
@@ -50,10 +50,13 @@
                     </div>
                     <!-- Remaining metadata -->  
                     <div class="media">
-
-                        <img 
-                                v-if="item.thumbnail != undefined"
-                                :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">  
+                        <div 
+                                :style="{ backgroundImage: 'url(' + (item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)) + ')' }"
+                                class="card-thumbnail">
+                            <img 
+                                    v-if="item.thumbnail != undefined"
+                                    :src="item['thumbnail']['tainacan-medium'] ? item['thumbnail']['tainacan-medium'][0] : (item['thumbnail'].medium ? item['thumbnail'].medium[0] : thumbPlaceholderPath)">  
+                        </div>
                         <div class="skeleton"/>
                         
                         <div class="list-metadata media-body">
diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue
index c21d1c9d8..6458eebbb 100644
--- a/src/theme-helper/view-mode-masonry.vue
+++ b/src/theme-helper/view-mode-masonry.vue
@@ -75,7 +75,7 @@ export default {
         items: Array,
         isLoading: false,
         itemsPerPage: Number,
-        columnsCount: Number,
+        itemColumnWidth: Number,
         isFiltersMenuCompressed: Boolean
     },
     watch: {
@@ -116,23 +116,26 @@ export default {
         },
         getItemImageHeight(imageWidth, imageHeight) {  
             
-            if (this.$refs.masonryWrapper.clientWidth != this.containerWidth)
-                this.containerWidth = this.$refs.masonryWrapper.clientWidth;
+            if (this.$refs.masonryWrapper != undefined && 
+                this.$refs.masonryWrapper.children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+                this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
+                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
 
-            if (this.$refs.masonryWrapper.children[0].childElementCount != this.columnsCount)
-                this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
-            
-            let itemWidth = (this.containerWidth/this.columnsCount) - 22;
-
-            return (imageHeight*itemWidth)/imageWidth;
+            return (imageHeight*this.itemColumnWidth)/imageWidth;
         },
         recalculateItemsHeight: _.debounce( function() {
             this.$forceUpdate();
-        }, 800)
+        }, 500)
     },
     mounted() {
-        this.containerWidth = this.$refs.masonryWrapper.clientWidth;
-        this.columnsCount = this.$refs.masonryWrapper.children[0].childElementCount;
+        if (this.$refs.masonryWrapper != undefined && 
+            this.$refs.masonryWrapper.children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0] != undefined && 
+            this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined)
+                this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
+        else
+                this.itemColumnWidth = 202;
     },
     created() {
         window.addEventListener('resize', this.recalculateItemsHeight);