diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index ad412c7b8..aab07b94d 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -271,7 +271,9 @@
             </div>
 
             <!-- RECORDS VIEW MODE -->
-            <div
+            <masonry 
+                    :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
+                    :gutter="42"
                     class="tainacan-records-container"
                     v-if="viewMode == 'records'">
                 <div 
@@ -284,9 +286,15 @@
                     <div 
                             :class="{ 'is-selecting': isSelectingItems }"
                             class="record-checkbox">
-                        <b-checkbox 
-                                size="is-small"
-                                v-model="selectedItems[index]"/> 
+                        <label 
+                                tabindex="0" 
+                                class="b-checkbox checkbox is-small">
+                            <input 
+                                    type="checkbox"
+                                    v-model="selectedItems[index]"> 
+                                <span class="check" /> 
+                                <span class="control-label" />
+                        </label>
                     </div>
                     
                     <!-- Title -->
@@ -343,12 +351,12 @@
                     <div    
                             class="media"
                             @click="goToItemPage(item)">
-                    
-                        <img 
-                                v-if="item.thumbnail != undefined"
-                                :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
-                        
                         <div class="list-metadata media-body">
+                            <div class="thumbnail">
+                                <img 
+                                        v-if="item.thumbnail != undefined"
+                                        :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath"> 
+                            </div>
                             <span 
                                     v-for="(column, index) in tableMetadata"
                                     :key="index"
@@ -397,7 +405,7 @@
                     </div>
                
                 </div>
-            </div>
+            </masonry>
             
             <!-- TABLE VIEW MODE -->
             <table 
diff --git a/src/admin/scss/_view-mode-records.scss b/src/admin/scss/_view-mode-records.scss
index b1581e576..a5953fd1e 100644
--- a/src/admin/scss/_view-mode-records.scss
+++ b/src/admin/scss/_view-mode-records.scss
@@ -19,11 +19,12 @@
     .tainacan-record {
         padding: 0px;
         flex-basis: 0;
-        margin: 0.75rem;
-        max-width: 410px;
-        min-width: 410px;
-        min-height: 218px;
+        margin-bottom: 42px;
+        width: 100%;
+        min-height: 200px;
         cursor: pointer;
+        text-decoration: none;
+        display: block;
 
         @media screen and (max-width: 768px) {
             max-width: 100%;
@@ -64,8 +65,12 @@
             opacity: 0;
             visibility: hidden;
         }
+        .thumbnail {
+            float: right;
+            margin: 0 0 1.5rem 1.5rem;
+        }
         img {
-            width: 172px;
+            width: 120px;
             height: auto;
             border-radius: 2px;
         }
@@ -81,6 +86,8 @@
             text-overflow: ellipsis;
             white-space: nowrap;
             overflow: hidden;
+            color: black;
+
             p {
                 font-size: 0.875rem !important; 
                 text-overflow: ellipsis;
@@ -106,18 +113,13 @@
                 .metadata-label {
                     font-size: 0.75rem;
                     margin-bottom: 0.2rem;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    font-weight: 500;
-                    color: $gray4;
+                    font-weight: 700;
+                    color: #454647;
                 }
 
                 .metadata-value {
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    overflow: hidden;
                     margin-bottom: 1rem;
+                    color: $gray4;
                 }
    
             }
diff --git a/src/theme-helper/view-mode-records.vue b/src/theme-helper/view-mode-records.vue
index 24419c55a..e69de2057 100644
--- a/src/theme-helper/view-mode-records.vue
+++ b/src/theme-helper/view-mode-records.vue
@@ -15,8 +15,12 @@
                 </div>
             </section>
             <!-- RECORDS VIEW MODE -->
-            <div class="tainacan-records-container">
-                <div 
+            <masonry 
+                    :cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
+                    :gutter="42"
+                    class="tainacan-records-container">
+                <a 
+                        href="www.google.com"
                         :key="index"
                         v-for="(item, index) of items"
                         class="tainacan-record">
@@ -52,32 +56,20 @@
                         <div    
                                 class="media"
                                 @click="goToItemPage(item)">
-                            <a 
-                                    v-if="item.thumbnail != undefined"
-                                    @click="goToItemPage(item)">
-                                <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
-                            </a>
 
                             <div class="list-metadata media-body">
+                                <a 
+                                        class="thumbnail"
+                                        v-if="item.thumbnail != undefined"
+                                        @click="goToItemPage(item)">
+                                    <img :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                                </a>
                                 <span 
                                         v-for="(column, index) in tableMetadata"
                                         :key="index"
                                         v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
-                                    <h3 
-                                            v-tooltip="{
-                                                content: $i18n.get('label_description'),
-                                                html: false,
-                                                autoHide: false,
-                                                placement: 'auto-start'
-                                            }"
-                                            class="metadata-label">{{ $i18n.get('label_description') }}</h3>
+                                    <h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
                                     <p 
-                                            v-tooltip="{
-                                                content: item.description != undefined ? item.description : '',
-                                                html: true,
-                                                autoHide: false,
-                                                placement: 'auto-start'
-                                            }"
                                             v-html="item.description != undefined ? item.description : ''"
                                             class="metadata-value"/>
                                 </span>
@@ -85,29 +77,16 @@
                                         v-for="(column, index) in displayedMetadata"
                                         :key="index"
                                         v-if="column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
-                                    <h3 
-                                            v-tooltip="{
-                                                content: column.name,
-                                                html: false,
-                                                autoHide: false,
-                                                placement: 'auto-start'
-                                            }"
-                                            class="metadata-label">{{ column.name }}</h3>
-                                    <p 
-                                            v-tooltip="{
-                                                content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
-                                                html: true,
-                                                autoHide: false,
-                                                placement: 'auto-start'
-                                            }"
+                                    <h3 class="metadata-label">{{ column.name }}</h3>
+                                    <p      
                                             v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''"
                                             class="metadata-value"/>
                                 </span>
                             </div>
                         </div>
-                    <!-- </a> -->
-                </div>
-            </div>
+                    </a>
+                <!-- </div> -->
+            </masonry>
         </div> 
     </div>
 </template>