diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
index bd491ffbf2..63cd80c40c 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/css/index.css
@@ -1,10 +1,12 @@
 :root {
     --font-family: Arial, sans-serif;
+    --margin-tiny: 0.125;
     --margin-small: 0.625rem;
     --margin-medium: 1.25rem;
     --margin-large: 2.5rem;
-    --padding-small: 0.125rem;
+    --padding-small: 0.625rem;
     --padding-medium: 1rem;
+    --warning-padding: 0.125rem;
     --font-size-large: 1.2rem;
     --logo-height: 2.5rem;
     --nav-height: 2.5rem;
@@ -52,14 +54,6 @@ body {
     margin-bottom: var(--margin-medium);
 }
 
-.table-container {
-    margin-bottom: var(--margin-large);
-}
-
-.csv-table {
-    margin-top: var(--margin-small);
-}
-
 h3 {
     margin-top: 0;
 }
@@ -106,7 +100,7 @@ nav ul li a.active {
 .warning {
     color: var(--warning-color);
     margin-bottom: var(--margin-small);
-    padding: var(--padding-small);
+    padding: var(--warning-padding);
     display: none;
 }
 
@@ -146,7 +140,7 @@ nav ul li a.active {
 }
 
 .client {
-    padding: 10px;
+    padding: var(--margin-small);
     border-bottom: 1px solid var(--table-border-color);
     cursor: pointer;
 }
@@ -154,22 +148,22 @@ nav ul li a.active {
 .client-details {
     max-height: 0;
     overflow: hidden;
-    padding-left: 10px;
+    padding-left: var(--padding-small);
     transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
-    background-color: var(--bg-color);
-    margin-top: 5px;
+    background-color: var(--nav-bg-color);
+    margin-top: var(--margin-tiny);
     opacity: 0;
 }
 
 .client-details.show {
     max-height: none;
-    padding: 10px;
+    padding: var(--padding-small);
     opacity: 1;
 }
 
 .client-detail {
     border-bottom: 1px solid var(--table-border-color);
-    padding: 10px;
+    padding: var(--padding-small);
 }
 
 #show-connected-button {
@@ -179,10 +173,26 @@ nav ul li a.active {
     font-size: var(--base-font-size);
 }
 
-#show-connected-button:hover {
+#show-connected-button:hover,
+.scroll-button:hover {
     cursor: pointer;
 }
 
+.scroll-button {
+    font-size: var(--base-font-size);
+    margin-left: var(--margin-tiny);
+    margin-top: var(--margin-small);
+}
+
+
+.table-container {
+    margin-bottom: var(--margin-large);
+}
+
+.csv-table {
+    margin-top: var(--margin-small);
+}
+
 /* ------------ Overwriting Tabulator CSS rules ------------ */
 
 :root.light .tabulator-header,
diff --git a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
index 4896a1643c..78bd2c59b7 100644
--- a/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
+++ b/src/blenderbim/blenderbim/bim/data/webui/static/js/index.js
@@ -292,13 +292,13 @@ function toggleClientList() {
   $.each(connectedClients, function (id, client) {
     if (!client.shown) return;
 
-    const icon = $("<i>")
+    const dropdownIcon = $("<i>")
       .addClass("fas fa-chevron-down")
       .css("margin-left", "8px");
 
     const clientDiv = $("<div>").addClass("client").text(client.ifc_file);
 
-    clientDiv.append(icon);
+    clientDiv.append(dropdownIcon);
 
     const clientDetailsDiv = $("<div>").addClass("client-details");