diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index d1fc014924ae21f95a567bff81710956f23808cf..a1eeef556ddc68d4e77e23994a463b9c5021fa02 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -312,7 +312,6 @@ html, body {
 	
 	font-weight:			200;
 	font-size:				0.9em;      
-	cursor:					pointer;  
 	padding-bottom:			0;    
 	
 	line-height:			1.2em;  
@@ -324,13 +323,54 @@ html, body {
 }
 
 .mosaic_category {
+	padding: 1.0em 1vw;
+	margin: 2vh 0 1.5vh 0;
+	border-radius: 3px;
+	background:				rgba(0,0,0,.15); 
+}
+
+.mosaic_category_grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
-	background:				rgba(0,0,0,.15); 
 	grid-auto-rows: 150px;
-	border-radius: 3px;
+}
+
+.mosaic_filter {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
+}
+
+.mosaic_filter_item {
 	padding: 1.0em 1vw;
-	margin: 2vh 0 1.5vh 0;
+	margin: 2vh 0.5vw 1.5vh 0.5vw;
+	border-radius: 3px;
+    cursor:pointer;
+}
+.mosaic_filter_disabled {
+    opacity: 0.5;
+}
+.mosaic_filter_disabled>h2:after {
+    background-image: url('images/icn-menu-filter.png');
+}
+.mosaic_filter_item>h2, .mosaic_category h2 {
+    text-transform: capitalize;
+}
+
+.mosaic_filter_item:not(.mosaic_filter_disabled)>h2:after{
+    background-image: url('images/icn-menu-preview.png');
+}
+.mosaic_filter_item>h2:after{
+    display:inline-block;
+    height:20px;
+    width:20px;
+    content: " ";
+    background-size: 20px 20px;
+    margin-left: 5px;
+    padding-top: 3px;
+    background-repeat: no-repeat;
+}
+.mosaic_filter_item_all>h2:after {
+    background-image: url('images/icn-reload.png') !important;
 }
 
 .mosaic_item img {
@@ -342,6 +382,7 @@ html, body {
 	/* The width of the container also implies margin around the images. */
 	width: 100px;
 	margin: 2vh 0 1.5vh 0;
+    cursor:pointer;
 }
 .mosaic_item .caption {
 	display:block;
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index dd0c8a263aa2f9d54a841fcdca65c364d08615b7..dd64c9b1619e71190a0dce9b399fad9390e9357f 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -830,15 +830,50 @@ function openMosaic() {
         div.append($('<span/>').addClass('caption').text(name));
         return div;
     }
+    function getFilterElement(text, color, callback, css_class) {
+        return $('<div/>')
+            .addClass('mosaic_filter_item')
+            .addClass(css_class)
+            .on('click', callback)
+            .css('background', color)
+            .append($('<h2/>').text(text));
+    }
 
 	$("#popupMosaicSpace").show();  
     let container = $('#popupMosaicMosaic');
     container.html('');
+    let filterdiv = $('<div/>').addClass('mosaic_filter');
+    filterdiv.append(getFilterElement(
+        'Reset filters',
+        'rgb(100,100,100)',
+        function () {
+            $('.mosaic_filter_item').removeClass('mosaic_filter_disabled');
+            $('.mosaic_category').show();
+        },
+        'mosaic_filter_item_all'
+    ));
+    container.append(filterdiv);
     // TODO is there a better way to iterate over tags or documents ?
     for ( let [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
+        let categoryName = rekall.sortings.colors.getCategoryName(k)
         let category = $('<div/>').addClass('mosaic_category').css('background', getTagGradientColor(v));
+
+        let grid = $('<div/>').addClass('mosaic_category_grid');
+
+        category.append($('<h2/>').text(categoryName));
+        category.append(grid);
+
+        filterdiv.append(getFilterElement(
+            categoryName,
+            v.color,function() {
+                category.toggle();
+                $(this).toggleClass('mosaic_filter_disabled');
+            },
+            ''
+        ));
+
         for (let i in v.tags){
-            category.append(getMosaicItem(v.tags[i]));
+            grid.append(getMosaicItem(v.tags[i]));
         }
         container.append(category);
     }
diff --git a/capsule-prototype/js/rekall/Sorting.js b/capsule-prototype/js/rekall/Sorting.js
index 720a4893e0c6ec30ce36215da23caff638fea4ae..2e527cbd3c7d69d16763c5fcd1acbb6a9ef05394 100644
--- a/capsule-prototype/js/rekall/Sorting.js
+++ b/capsule-prototype/js/rekall/Sorting.js
@@ -335,4 +335,11 @@ Sorting.unmapPosition = function(x) {
 Sorting.prototype.getCategory = function(tag) {
 	var metadata = this.parseMeta(tag.getMetadata(this.metadataKey));
 	return this.categories[metadata];
-}
\ No newline at end of file
+}
+
+Sorting.prototype.getCategoryName = function(metadata) {
+    if ('_rekall/marker' === metadata) {
+        return 'note';
+    }
+    return metadata.split("/").pop().split('.').pop();
+}