diff --git a/capsule-prototype/create.zip b/capsule-prototype/create.zip
index 419e3d5aa51ceee98c96258c0207f7532b3a1482..4b2f2211e0693a3b02976ec59b92cf7ce0977b19 100644
Binary files a/capsule-prototype/create.zip and b/capsule-prototype/create.zip differ
diff --git a/capsule-prototype/css/online-theme.css b/capsule-prototype/css/online-theme.css
index 64ee7c2c8a2eac7b971e3b80c731f8658bc40100..98202ca93fb4f17746981c23ed43af1e0c9ef736 100644
--- a/capsule-prototype/css/online-theme.css
+++ b/capsule-prototype/css/online-theme.css
@@ -321,10 +321,13 @@ html, body {
 	margin:					2vh 0 1.5vh 0;
 }
 
-#popupMosaicMosaic {
+.mosaic_category {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
     grid-auto-rows: 150px;
+    border-radius: 3px;
+    padding: 1.0em 1vw;
+    margin: 2vh 0 1.5vh 0;
 }
 
 .mosaic_item img {
@@ -335,6 +338,7 @@ html, body {
     text-align: center;
     /* The width of the container also implies margin around the images. */
     width: 100px;
+    margin: 2vh 0 1.5vh 0;
 }
 .mosaic_item .caption {
     display:block;
diff --git a/capsule-prototype/js/online-script.js b/capsule-prototype/js/online-script.js
index 09ab90fda5c4d77d66d5199712107dc1a2d0948a..92d32bb9a00ee66d11d774feb0c840e559d42d43 100644
--- a/capsule-prototype/js/online-script.js
+++ b/capsule-prototype/js/online-script.js
@@ -819,11 +819,6 @@ function openMosaic() {
             let path = Utils.getPreviewPath(tagOrDoc);
             let name = tagOrDoc.getMetadata("Rekall->Name");
 	        let type = tagOrDoc.getMetadata("Rekall->Type");
-            let color = tagOrDoc.color;
-            console.log(name);
-            console.log(type);
-            console.log(color);
-            console.log(path);
         if (typeof path === 'undefined') {
             if (type =='rekall/link') {
                 url = "../shared/css/images/img-link.png";
@@ -833,7 +828,7 @@ function openMosaic() {
         } else {
             url = path;
         }
-        return '<div class="mosaic_item style="background:'+color+'"><img src="'+url+'"></img><span class="caption">'+name+'</span></div>';
+        return '<div class="mosaic_item "><img src="'+url+'"></img><span class="caption">'+name+'</span></div>';
         return '<div class="mosaic_item"><img src="../shared/css/images/img-'+type+'.png"></img><span class="caption">'+text+'</span></div>';
     }
 
@@ -841,9 +836,12 @@ function openMosaic() {
 	$("#popupMosaicSpace").show();  
     // TODO is there a better way to iterate over tags or documents ?
     for ( [k, v] of  Object.entries(rekall.sortings.colors.categories)) {
+        let color = v.color;
+        html += '<div class="mosaic_category" style="background:'+color+'">';
         for (let i in v.tags){
             html += getMosaicItemHtml(v.tags[i]);
         }
+        html += '</div>';
     }
     console.log(html);
     $('#popupMosaicMosaic').html(html);