diff --git a/package.json b/package.json
index 8f6f939c8..9cb6da8a3 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "uglifyjs-webpack-plugin": "^1.2.7",
     "vue-custom-element": "^3.2.3",
     "vue-loader": "^15.2.6",
+    "vue-masonry-css": "^1.0.2",
     "vue-template-compiler": "^2.5.17",
     "webpack": "^4.16.3",
     "webpack-cli": "^3.1.0",
diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js
index 8bb5ab0f8..38ff82899 100644
--- a/src/admin/js/theme-main.js
+++ b/src/admin/js/theme-main.js
@@ -33,6 +33,8 @@ import ItemsPage from '../pages/lists/items-page.vue';
 import ViewModeTable from '../../theme-helper/view-mode-table.vue';
 import ViewModeCards from '../../theme-helper/view-mode-cards.vue';
 import ViewModeRecords from '../../theme-helper/view-mode-records.vue';
+import ViewModeMasonry from '../../theme-helper/view-mode-masonry.vue';
+import VueMasonry from 'vue-masonry-css';
 
 // Remaining imports
 import HelpButton from '../components/other/help-button.vue';
@@ -46,6 +48,7 @@ import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin } from '
 Vue.use(Buefy);
 Vue.use(VTooltip);
 Vue.use(VueHammer);
+Vue.use(VueMasonry);
 Vue.use(I18NPlugin);
 Vue.use(UserPrefsPlugin);
 Vue.use(RouterHelperPlugin);
@@ -85,6 +88,7 @@ Vue.component('items-page', ItemsPage);
 Vue.component('view-mode-table', ViewModeTable);
 Vue.component('view-mode-cards', ViewModeCards);
 Vue.component('view-mode-records', ViewModeRecords);
+Vue.component('view-mode-masonry', ViewModeMasonry);
 
 Vue.use(eventBusSearch, { store: store, router: routerTheme});
 
diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss
new file mode 100644
index 000000000..d5637786f
--- /dev/null
+++ b/src/admin/scss/_view-mode-masonry.scss
@@ -0,0 +1,86 @@
+.tainacan-masonry-container {
+    min-height: 50vh;
+    padding: 0;
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    flex-shrink: 1;
+    justify-content: space-evenly;
+
+    .selected-masonry-item {
+        background-color: $turquoise1;
+    }
+
+    .tainacan-masonry-item {
+        animation-name: item-appear;
+        display: block;
+        animation-duration: 0.5s;
+        width: 100%;
+        flex-basis: 0;
+        margin-bottom: 30px;
+        text-align: center;
+
+        &:hover {
+            background-color: $gray1;
+        }
+
+        .grid-item-checkbox {
+            position: absolute;
+            margin-top: 9px;
+            margin-left: 1rem;
+        }
+        .actions-area {
+            position: relative;
+            float: right;
+            width: 100%;
+            display: flex;
+            justify-content: flex-end;
+            visibility: hidden;
+            opacity: 0;
+            padding: 8px;
+            transition: visibility 0.2s, opacity 0.2s;
+            margin-top: -43px;
+            background-color: $gray2;
+            border-bottom-left-radius: 2px;
+            border-bottom-right-radius: 2px;
+
+            a {
+                margin-left: 12px;
+            }
+        }
+        &:hover .actions-area { 
+            visibility: visible;
+            opacity: 1.0;
+        }
+        &.selected-grid-item {
+            .actions-area {
+                background-color: $turquoise1;
+            }
+        }
+
+        img {
+            width: 100%;
+            height: auto;
+            border-radius: 2px;
+            margin-bottom: -5px;
+        }
+
+        .metadata-title {
+            flex-shrink: 0;
+            margin: 6px 6px 6px 6px;
+            padding: 6px 1rem;
+            min-height: 30px;
+            cursor: pointer;
+
+            p { 
+                font-size: 0.875rem !important;
+                color: black !important; 
+                text-align: left !important;
+                margin-bottom: 0 !important;
+            }
+        } 
+    
+    }
+}
+
+
diff --git a/src/theme-helper/class-tainacan-theme-helper.php b/src/theme-helper/class-tainacan-theme-helper.php
index b560793fd..4248db7a4 100644
--- a/src/theme-helper/class-tainacan-theme-helper.php
+++ b/src/theme-helper/class-tainacan-theme-helper.php
@@ -56,19 +56,26 @@ class Theme_Helper {
 			'type' => 'component',
 		]);
 		$this->register_view_mode('cards', [
-			'label' => __('Cards view', 'tainacan'),
+			'label' => __('Cards', 'tainacan'),
 			'dynamic_metadata' => false,
 			'description' => 'A cards view, displaying title, description, author name and creation date.',
 			'icon' => '<span class="icon"><i class="mdi mdi-view-module mdi-24px"></i></span>',
 			'type' => 'component'
 		]);
 		$this->register_view_mode('records', [
-			'label' => __('Records view', 'tainacan'),
+			'label' => __('Records', 'tainacan'),
 			'dynamic_metadata' => true,
 			'description' => 'A records view, similiar to cards, but flexible for metadata',
 			'icon' => '<span class="icon"><i class="mdi mdi-view-column mdi-24px"></i></span>',
 			'type' => 'component'
 		]);
+		$this->register_view_mode('masonry', [
+			'label' => __('Masonry', 'tainacan'),
+			'dynamic_metadata' => false,
+			'description' => 'A masonry view, similar to pinterest, which will display images without cropping.',
+			'icon' => '<span class="icon"><i class="mdi mdi-view-dashboard mdi-24px"></i></span>',
+			'type' => 'component'
+		]);
 	}
 	
 	public function enqueue_scripts($force = false) {
diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue
new file mode 100644
index 000000000..b7b4a0be5
--- /dev/null
+++ b/src/theme-helper/view-mode-masonry.vue
@@ -0,0 +1,82 @@
+<template>
+    <div class="table-container">
+        <div class="table-wrapper">
+            <!-- RECORDS VIEW MODE -->
+            <masonry 
+                    :cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
+                    :gutter="30"
+                    class="tainacan-masonry-container">
+                <a 
+                        :key="index"
+                        v-for="(item, index) of items"
+                        class="tainacan-masonry-item"
+                        @click="goToItemPage(item)">
+
+                    <!-- Title -->
+                    <div class="metadata-title">
+                        <p>{{ item.title != undefined ? item.title : '' }}</p>                             
+                    </div>
+
+                    <!-- Thumbnail -->  
+                    <img 
+                            v-if="item.thumbnail != undefined"
+                            :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                </a>
+            </masonry>
+        </div> 
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'ViewModeMasonry',
+    props: {
+        collectionId: Number,
+        displayedMetadata: Array,
+        items: Array,
+        isLoading: false,
+    },
+    data () {
+        return {
+            thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
+        }
+    },
+    methods: {
+        goToItemPage(item) {
+            window.location.href = item.url;   
+        },
+        renderMetadata(itemMetadata, column) {
+
+            let metadata = itemMetadata[column.slug] != undefined ? itemMetadata[column.slug] : false;
+
+            if (!metadata) {
+                return '';
+            } else if (metadata.date_i18n) {
+                return metadata.date_i18n;
+            } else {
+                return metadata.value_as_html;
+            }
+        }
+    }
+}
+</script>
+
+<style  lang="scss" scoped>
+    $turquoise1: #e6f6f8;
+    $turquoise2: #d1e6e6;
+    $tainacan-input-color: #1d1d1d;
+    $gray1: #f2f2f2;
+    $gray2: #e5e5e5;
+    $gray4: #898d8f;
+    $gray3: #dcdcdc;
+
+    @import "../../src/admin/scss/_view-mode-masonry.scss";
+
+    .tainacan-masonry-container .tainacan-masonry-item .metadata-title {
+        padding: 0.75rem;
+        margin-bottom: 0px;
+    }
+</style>
+
+