diff --git a/plugins/Sidebar/SidebarPlugin.py b/plugins/Sidebar/SidebarPlugin.py
index 98f7910a..76effe84 100644
--- a/plugins/Sidebar/SidebarPlugin.py
+++ b/plugins/Sidebar/SidebarPlugin.py
@@ -119,14 +119,17 @@ class UiWebsocketPlugin(object):
             ("css", "orange"),
             ("js", "purple"),
             ("image", "green"),
-            ("json", "blue"),
+            ("json", "darkblue"),
+            ("user data", "blue"),
             ("other", "white"),
             ("total", "black")
         )
         # Collect stats
         size_filetypes = {}
         size_total = 0
-        for key, content in site.content_manager.contents.iteritems():
+        contents = site.content_manager.listContents()  # Without user files
+        for inner_path in contents:
+            content = site.content_manager.contents[inner_path]
             if "files" not in content:
                 continue
             for file_name, file_details in content["files"].items():
@@ -134,9 +137,19 @@ class UiWebsocketPlugin(object):
                 ext = file_name.split(".")[-1]
                 size_filetypes[ext] = size_filetypes.get(ext, 0) + file_details["size"]
 
+        # Get user file sizes
+        size_user_content = site.content_manager.contents.execute(
+            "SELECT SUM(size) + SUM(size_files) AS size FROM content WHERE ?",
+            {"not__inner_path": contents}
+        ).fetchone()["size"]
+        if not size_user_content:
+            size_user_content = 0
+        size_filetypes["user data"] = size_user_content
+        size_total += size_user_content
+
         # The missing difference is content.json sizes
         if "json" in size_filetypes:
-            size_filetypes["json"] += site.settings["size"] - size_total
+            size_filetypes["json"] += max(0, site.settings["size"] - size_total)
         size_total = size_other = site.settings["size"]
 
         # Bar
@@ -144,7 +157,7 @@ class UiWebsocketPlugin(object):
             if extension == "total":
                 continue
             if extension == "other":
-                size = size_other
+                size = max(0, size_other)
             elif extension == "image":
                 size = size_filetypes.get("jpg", 0) + size_filetypes.get("png", 0) + size_filetypes.get("gif", 0)
                 size_other -= size
@@ -165,7 +178,7 @@ class UiWebsocketPlugin(object):
         body.append("</ul><ul class='graph-legend'>")
         for extension, color in extensions:
             if extension == "other":
-                size = size_other
+                size = max(0, size_other)
             elif extension == "image":
                 size = size_filetypes.get("jpg", 0) + size_filetypes.get("png", 0) + size_filetypes.get("gif", 0)
             elif extension == "total":
@@ -220,9 +233,10 @@ class UiWebsocketPlugin(object):
     def sidebarRenderOptionalFileStats(self, body, site):
         size_total = 0.0
         size_downloaded = 0.0
-        for content in site.content_manager.contents.values():
-            if "files_optional" not in content:
-                continue
+        res = site.content_manager.contents.execute("SELECT inner_path FROM content WHERE size_files_optional > 0 AND site_id = :site_id")
+        for row in res:
+            inner_path = row["inner_path"]
+            content = site.content_manager.contents[inner_path]
             for file_name, file_details in content["files_optional"].items():
                 size_total += file_details["size"]
                 if site.content_manager.hashfield.hasHash(file_details["sha512"]):
diff --git a/plugins/Sidebar/media/Sidebar.css b/plugins/Sidebar/media/Sidebar.css
index f30cba67..1237669d 100644
--- a/plugins/Sidebar/media/Sidebar.css
+++ b/plugins/Sidebar/media/Sidebar.css
@@ -11,7 +11,8 @@
 
 .sidebar-container { width: 100%; height: 100%; overflow: hidden; position: fixed; }
 .sidebar { background-color: #212121; position: fixed; backface-visibility: hidden; right: -1200px; height: 100%; width: 1200px; } /*box-shadow: inset 0px 0px 10px #000*/
-.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200 }
+.sidebar .content { margin: 30px; font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue"; color: white; width: 375px; height: 300px; font-weight: 200; transition: all 1s; opacity: 0 }
+.sidebar-container.loaded .content { opacity: 1; transform: none }
 .sidebar h1, .sidebar h2 { font-weight: lighter; }
 .sidebar .button { margin: 0px; display: inline-block; transition: all 0.3s; box-sizing: border-box; max-width: 160px }
 .sidebar .button.hidden { padding: 0px; max-width: 0px; opacity: 0; pointer-events: none }
@@ -56,9 +57,10 @@
 
 /* GRAPH */
 
-.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative;}
+.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; border-radius: 8px; overflow: hidden; position: relative; font-size: 0 }
 .graph li { height: 100%; position: absolute; transition: all 0.3s; }
-.graph-stacked li { position: static; float: left; }
+.graph-stacked { white-space: nowrap; }
+.graph-stacked li { position: static; display: inline-block; height: 20px }
 
 .graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
 .sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
@@ -77,8 +79,8 @@
 .color-green:before { color: #2ECC71 }
 .back-blue { background-color: #3BAFDA }
 .color-blue:before { color: #3BAFDA }
-.back-darkblue { background-color: #2196F3 }
-.color-darkblue:before { color: #2196F3 }
+.back-darkblue { background-color: #156fb7 }
+.color-darkblue:before { color: #156fb7 }
 .back-purple { background-color: #B10DC9 }
 .color-purple:before { color: #B10DC9 }
 .back-yellow { background-color: #FFDC00 }
@@ -89,8 +91,14 @@
 .color-gray:before { color: #ECF0F1 }
 .back-black { background-color: #34495E }
 .color-black:before { color: #34495E }
+.back-red { background-color: #5E4934 }
+.color-red:before { color: #5E4934 }
+.back-gray { background-color: #9e9e9e }
+.color-gray:before { color: #9e9e9e }
 .back-white { background-color: #EEE }
 .color-white:before { color: #EEE }
+.back-red { background-color: #E91E63 }
+.color-red:before { color: #E91E63 }
 
 
 /* Settings owned */
diff --git a/plugins/Sidebar/media/all.css b/plugins/Sidebar/media/all.css
index 0827b393..050796bf 100644
--- a/plugins/Sidebar/media/all.css
+++ b/plugins/Sidebar/media/all.css
@@ -111,9 +111,10 @@
 
 /* GRAPH */
 
-.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative;}
+.graph { padding: 0px; list-style-type: none; width: 351px; background-color: black; height: 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px ; overflow: hidden; position: relative; font-size: 0 }
 .graph li { height: 100%; position: absolute; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s ; }
-.graph-stacked li { position: static; float: left; }
+.graph-stacked { white-space: nowrap; }
+.graph-stacked li { position: static; display: inline-block; height: 20px }
 
 .graph-legend { padding: 0px; list-style-type: none; margin-top: 13px; font-family: Consolas, "Andale Mono", monospace; font-size: 13px; text-transform: capitalize; }
 .sidebar .graph-legend li { margin: 0px; margin-top: 5px; margin-left: 0px; width: 160px; float: left; position: relative; }
@@ -132,8 +133,8 @@
 .color-green:before { color: #2ECC71 }
 .back-blue { background-color: #3BAFDA }
 .color-blue:before { color: #3BAFDA }
-.back-darkblue { background-color: #2196F3 }
-.color-darkblue:before { color: #2196F3 }
+.back-darkblue { background-color: #156fb7 }
+.color-darkblue:before { color: #156fb7 }
 .back-purple { background-color: #B10DC9 }
 .color-purple:before { color: #B10DC9 }
 .back-yellow { background-color: #FFDC00 }
@@ -144,8 +145,14 @@
 .color-gray:before { color: #ECF0F1 }
 .back-black { background-color: #34495E }
 .color-black:before { color: #34495E }
+.back-red { background-color: #5E4934 }
+.color-red:before { color: #5E4934 }
+.back-gray { background-color: #9e9e9e }
+.color-gray:before { color: #9e9e9e }
 .back-white { background-color: #EEE }
 .color-white:before { color: #EEE }
+.back-red { background-color: #E91E63 }
+.color-red:before { color: #E91E63 }
 
 
 /* Settings owned */
diff --git a/plugins/Sidebar/media/all.js b/plugins/Sidebar/media/all.js
index 24121661..ff95c022 100644
--- a/plugins/Sidebar/media/all.js
+++ b/plugins/Sidebar/media/all.js
@@ -199,6 +199,7 @@ window.initScrollable = function () {
       this.displayGlobe = __bind(this.displayGlobe, this);
       this.loadGlobe = __bind(this.loadGlobe, this);
       this.animDrag = __bind(this.animDrag, this);
+      this.setHtmlTag = __bind(this.setHtmlTag, this);
       this.waitMove = __bind(this.waitMove, this);
       this.resized = __bind(this.resized, this);
       this.tag = null;
@@ -214,6 +215,7 @@ window.initScrollable = function () {
       this.initFixbutton();
       this.dragStarted = 0;
       this.globe = null;
+      this.preload_html = null;
       this.original_set_site_info = wrapper.setSiteInfo;
       if (false) {
         this.startDrag();
@@ -224,6 +226,15 @@ window.initScrollable = function () {
     }
 
     Sidebar.prototype.initFixbutton = function() {
+
+      /*
+      		@fixbutton.on "mousedown touchstart", (e) =>
+      			if not @opened
+      				@logStart("Preloading")
+      				wrapper.ws.cmd "sidebarGetHtmlTag", {}, (res) =>
+      					@logEnd("Preloading")
+      					@preload_html = res
+       */
       this.fixbutton.on("mousedown touchstart", (function(_this) {
         return function(e) {
           e.preventDefault();
@@ -347,26 +358,32 @@ window.initScrollable = function () {
     };
 
     Sidebar.prototype.updateHtmlTag = function() {
-      return wrapper.ws.cmd("sidebarGetHtmlTag", {}, (function(_this) {
-        return function(res) {
-          if (_this.tag.find(".content").children().length === 0) {
-            _this.log("Creating content");
-            morphdom(_this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
-            return _this.when_loaded.resolve();
-          } else {
-            _this.log("Patching content");
-            return morphdom(_this.tag.find(".content")[0], '<div class="content">' + res + '</div>', {
-              onBeforeMorphEl: function(from_el, to_el) {
-                if (from_el.className === "globe" || from_el.className.indexOf("noupdate") >= 0) {
-                  return false;
-                } else {
-                  return true;
-                }
-              }
-            });
+      if (this.preload_html) {
+        this.setHtmlTag(this.preload_html);
+        return this.preload_html = null;
+      } else {
+        return wrapper.ws.cmd("sidebarGetHtmlTag", {}, this.setHtmlTag);
+      }
+    };
+
+    Sidebar.prototype.setHtmlTag = function(res) {
+      if (this.tag.find(".content").children().length === 0) {
+        this.log("Creating content");
+        this.container.addClass("loaded");
+        morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>');
+        return this.when_loaded.resolve();
+      } else {
+        this.log("Patching content");
+        return morphdom(this.tag.find(".content")[0], '<div class="content">' + res + '</div>', {
+          onBeforeMorphEl: function(from_el, to_el) {
+            if (from_el.className === "globe" || from_el.className.indexOf("noupdate") >= 0) {
+              return false;
+            } else {
+              return true;
+            }
           }
-        };
-      })(this));
+        });
+      }
     };
 
     Sidebar.prototype.animDrag = function(e) {