diff --git a/package.json b/package.json
index 8f6f939c8..822607415 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "vue-router": "^3.0.1",
     "vue-the-mask": "^0.11.1",
     "vue2-hammer": "^1.0.7",
+    "vue-masonry-css": "^1.0.2",
     "vuedraggable": "^2.16.0",
     "vuex": "^3.0.1"
   },
diff --git a/src/admin/components/lists/items-list.vue b/src/admin/components/lists/items-list.vue
index 8e689e988..6657d718f 100644
--- a/src/admin/components/lists/items-list.vue
+++ b/src/admin/components/lists/items-list.vue
@@ -101,6 +101,71 @@
                 </div>
             </div>
 
+            <!-- MASONRY VIEW MODE -->
+            <masonry 
+                    v-if="viewMode == 'masonry'"
+                    :cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
+                    :gutter="30"
+                    class="tainacan-masonry-container">
+                <div
+                        :key="index"
+                        v-for="(item, index) of items"
+                        :class="{ 'selected-masonry-item': selectedItems[index] }"
+                        class="tainacan-masonry-item">
+
+                    <!-- Checkbox -->
+                    <div 
+                            :class="{ 'is-selecting': isSelectingItems }"
+                            class="masonry-item-checkbox">
+                        <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 -->
+                    <div 
+                            @click="goToItemPage(item)"
+                            class="metadata-title">
+                        <p>{{ item.title != undefined ? item.title : '' }}</p>                             
+                    </div>
+
+                    <!-- Thumbnail -->  
+                    <img 
+                            @click="goToItemPage(item)"
+                            v-if="item.thumbnail != undefined"
+                            :src="item['thumbnail'].medium_large ? item['thumbnail'].medium_large : thumbPlaceholderPath">  
+                    
+                    <!-- Actions -->
+                    <div 
+                            v-if="item.current_user_can_edit"
+                            class="actions-area"
+                            :label="$i18n.get('label_actions')">
+                        <a 
+                                id="button-edit"   
+                                :aria-label="$i18n.getFrom('items','edit_item')" 
+                                @click.prevent.stop="goToItemEditPage(item)">
+                            <b-icon
+                                    type="is-secondary" 
+                                    icon="pencil"/>
+                        </a>
+                        <a 
+                                id="button-delete" 
+                                :aria-label="$i18n.get('label_button_delete')" 
+                                @click.prevent.stop="deleteOneItem(item.id)">
+                            <b-icon 
+                                    type="is-secondary" 
+                                    :icon="!isOnTrash ? 'delete' : 'delete-forever'"/>
+                        </a>
+                    </div>
+                </div>
+            </masonry>
+
             <!-- CARDS VIEW MODE -->
             <div
                     class="tainacan-cards-container"
@@ -596,6 +661,7 @@ export default {
 <style lang="scss" scoped>
 
     @import "../../scss/_variables.scss";
+    @import "../../scss/_view-mode-masonry.scss";
     @import "../../scss/_view-mode-grid.scss";
     @import "../../scss/_view-mode-cards.scss";
     @import "../../scss/_view-mode-records.scss";
diff --git a/src/admin/components/other/processes-popup.vue b/src/admin/components/other/processes-popup.vue
index d8729e658..335c677d5 100644
--- a/src/admin/components/other/processes-popup.vue
+++ b/src/admin/components/other/processes-popup.vue
@@ -28,7 +28,7 @@
                             tag="a"
                             :to="$routerHelper.getProcessesPage()"
                             class="is-secondary">
-                        {{ $i18n.get('label_see_more') }}
+                        {{ $i18n.get('label_view_more') }}
                     </router-link>
                 </li>
                 <li     
@@ -44,6 +44,7 @@
                                         :class="{ 'mdi-menu-down': processesColapses[index], 'mdi-menu-right': !processesColapses[index] }" />
                             </span>  
                             <p>{{ bgProcess.name ? bgProcess.name : $i18n.get('label_unamed_process') }}</p>
+                            <span class="process-title-value">{{ (bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? '(' + bgProcesses[0].progress_value + '%)' : '' }}</span>
                         </div>
                         <!-- <span 
                                 v-if="bgProcess.done <= 0"
@@ -89,7 +90,7 @@
                     class="icon has-text-blue5"><i class="mdi mdi-18px mdi-autorenew"/></span>
             <p class="footer-title">    
                 {{ hasAnyProcessExecuting ? 
-                    (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value : '') : $i18n.get('label_no_details_of_process')): 
+                    (bgProcesses[0].progress_label ? bgProcesses[0].progress_label + ((bgProcesses[0].progress_value && bgProcesses[0].progress_value >= 0) ? ' - ' + bgProcesses[0].progress_value + '%' : '') : $i18n.get('label_no_details_of_process')): 
                     $i18n.get('info_no_process') 
                 }}
             </p>
@@ -279,6 +280,10 @@ export default {
                         position: relative;
                         top: -2px;
                     }
+                    span.process-title-value {
+                        font-style: italic;
+                        color: $gray3;
+                    }
                     
                     .mdi-menu-left, .mdi-menu-right {
                         color: $turquoise2;
diff --git a/src/admin/js/main.js b/src/admin/js/main.js
index d70c408ff..82afa9a03 100644
--- a/src/admin/js/main.js
+++ b/src/admin/js/main.js
@@ -7,6 +7,7 @@ import Vue from 'vue';
 import Buefy from 'buefy';
 import VTooltip from 'v-tooltip';
 import { VueHammer } from 'vue2-hammer';
+import VueMasonry from 'vue-masonry-css';
 
 // Custom elements
 import Text from '../../classes/metadata-types/text/Text.vue';
@@ -49,6 +50,7 @@ import VueTheMask from 'vue-the-mask';
 Vue.use(Buefy);
 Vue.use(VTooltip);
 Vue.use(VueHammer);
+Vue.use(VueMasonry);
 Vue.use(I18NPlugin);
 Vue.use(UserPrefsPlugin);
 Vue.use(RouterHelperPlugin);
diff --git a/src/admin/js/theme-main.js b/src/admin/js/theme-main.js
index 8bb5ab0f8..44d8d8f00 100644
--- a/src/admin/js/theme-main.js
+++ b/src/admin/js/theme-main.js
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import Buefy from 'buefy';
 import VTooltip from 'v-tooltip';
 import { VueHammer } from 'vue2-hammer';
+import VueMasonry from 'vue-masonry-css';
 
 // Custom elements
 import Text from '../../classes/metadata-types/text/Text.vue';
@@ -33,6 +34,7 @@ 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';
 
 // 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/pages/lists/items-page.vue b/src/admin/pages/lists/items-page.vue
index 935d15e56..55219e03f 100644
--- a/src/admin/pages/lists/items-page.vue
+++ b/src/admin/pages/lists/items-page.vue
@@ -307,7 +307,8 @@
                                                 :class="{'mdi-view-list' : ( adminViewMode == 'table' || adminViewMode == undefined),
                                                         'mdi-view-module' : adminViewMode == 'cards',
                                                         'mdi-apps' : adminViewMode == 'grid',
-                                                        'mdi-view-column' : adminViewMode == 'records'}"
+                                                        'mdi-view-column' : adminViewMode == 'records',
+                                                        'mdi-view-dashboard' : adminViewMode == 'masonry'}"
                                                 class="mdi"/>
                                     </span>
                                 </span>
@@ -346,6 +347,14 @@
                                         icon="view-column"/>
                                 {{ $i18n.get('label_records') }}
                             </b-dropdown-item>
+                            <b-dropdown-item 
+                                    :class="{ 'is-active': adminViewMode == 'masonry' }"
+                                    :value="'masonry'">
+                                <b-icon 
+                                        class="gray-icon" 
+                                        icon="view-dashboard"/>
+                                {{ $i18n.get('label_masonry') }}
+                            </b-dropdown-item>
                         </b-dropdown>
                     </b-field>
                 </div>
diff --git a/src/admin/scss/_checkboxes.scss b/src/admin/scss/_checkboxes.scss
index eaa10f554..e796bd16d 100644
--- a/src/admin/scss/_checkboxes.scss
+++ b/src/admin/scss/_checkboxes.scss
@@ -25,4 +25,4 @@
         background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23000' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E") no-repeat center center !important;
         border-color: $gray4 !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/admin/scss/_view-mode-cards.scss b/src/admin/scss/_view-mode-cards.scss
index 0392a4e22..a7aba8726 100644
--- a/src/admin/scss/_view-mode-cards.scss
+++ b/src/admin/scss/_view-mode-cards.scss
@@ -107,6 +107,7 @@
                     font-size: 0.6875rem !important;
                     overflow: hidden;
                     margin-bottom: 1.5rem;
+                    max-height: 152px;
                 }
 
                 .metadata-author-creation {
diff --git a/src/admin/scss/_view-mode-masonry.scss b/src/admin/scss/_view-mode-masonry.scss
new file mode 100644
index 000000000..847500af0
--- /dev/null
+++ b/src/admin/scss/_view-mode-masonry.scss
@@ -0,0 +1,90 @@
+.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;
+        }
+
+        .masonry-item-checkbox {
+            position: absolute;
+            margin-top: 8px;
+            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;
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        .metadata-title {
+            flex-shrink: 0;
+            margin: 0px 6px 0px 24px;
+            padding: 10px 1rem;
+            min-height: 41px;
+            cursor: pointer;
+
+            p { 
+                font-size: 0.875rem !important;
+                color: black !important; 
+                text-align: left !important;
+                margin-bottom: 0 !important;
+            }
+        } 
+    
+    }
+}
+
+
diff --git a/src/admin/tainacan-admin-i18n.php b/src/admin/tainacan-admin-i18n.php
index c8ce1481f..88c982a93 100644
--- a/src/admin/tainacan-admin-i18n.php
+++ b/src/admin/tainacan-admin-i18n.php
@@ -239,6 +239,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_table'                                    => __( 'Table', 'tainacan' ),
 	'label_cards'                                    => __( 'Cards', 'tainacan' ),
 	'label_records'                                  => __( 'Records', 'tainacan' ),
+	'label_masonry'                                  => __( 'Masonry', 'tainacan' ),
 	'label_visualization'                            => __( 'Visualization', 'tainacan' ),
 	'label_available_importers'                      => __( 'Available Importers', 'tainacan' ),
 	'label_target_collection'                        => __( 'Target Collection', 'tainacan' ),
@@ -275,6 +276,7 @@ return apply_filters( 'tainacan-admin-i18n', [
 	'label_import_collection'                      	 => __( 'Import collection', 'tainacan' ),
     'label_semantic_uri'                      	     => __( 'Semantic Uri', 'tainacan' ),
     'label_view_collection'                     	 => __( 'View collection', 'tainacan' ),
+    'label_view_more'		                     	 => __( 'View more', 'tainacan' ),
 
 	// Instructions. More complex sentences to guide user and placeholders
 	'instruction_delete_selected_collections'        => __( 'Delete selected collections', 'tainacan' ),
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/template-tags.php b/src/theme-helper/template-tags.php
index ec7179121..45bfde37f 100644
--- a/src/theme-helper/template-tags.php
+++ b/src/theme-helper/template-tags.php
@@ -62,19 +62,14 @@ function tainacan_the_metadata($args = array()) {
  * 
  * Return the item document as a HTML string to be used as output.
  *
- * @param  int|string|Tainacan\Entities\Metadatum $metadatum Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata
- * @param bool $hide_empty Wether to hide or not metadata the item has no value to
  * @return string        The HTML output
  */
 function tainacan_get_the_document() {
-	$post = get_post();
-	$theme_helper = \Tainacan\Theme_Helper::get_instance();
+	$item = tainacan_get_item();
 	
-	if (!$theme_helper->is_post_an_item($post))
+	if (!$item)
 		return;
 	
-	$item = new Entities\Item($post);
-	
 	return $item->get_document_html();
 	
 }
@@ -83,6 +78,25 @@ function tainacan_the_document() {
 	echo tainacan_get_the_document();
 }
 
+/**
+ * To be used inside The Loop
+ * 
+ * Check whether the current item has a document or not
+ *
+ * @return bool True if item has document, false if it does not
+ */
+function tainacan_has_document() {
+	$item = tainacan_get_item();
+	
+	if (!$item)
+		return;
+	
+	$document = $item->get_document();
+
+	return ! empty($document);
+	
+}
+
 /**
  * When visiting a collection archive or single, returns the current collection id
  *
diff --git a/src/theme-helper/view-mode-masonry.vue b/src/theme-helper/view-mode-masonry.vue
new file mode 100644
index 000000000..8cfb68ed6
--- /dev/null
+++ b/src/theme-helper/view-mode-masonry.vue
@@ -0,0 +1,81 @@
+<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 {
+        margin: 0px 6px;
+    }
+</style>
+
+