diff --git a/peach-web/src/context/dns.rs b/peach-web/src/context/dns.rs
index 9d74ced..7a86646 100644
--- a/peach-web/src/context/dns.rs
+++ b/peach-web/src/context/dns.rs
@@ -11,6 +11,7 @@ pub struct ConfigureDNSContext {
     pub title: Option<String>,
     pub flash_name: Option<String>,
     pub flash_msg: Option<String>,
+    pub theme: Option<String>,
 }
 
 impl ConfigureDNSContext {
@@ -31,6 +32,7 @@ impl ConfigureDNSContext {
             title: None,
             flash_name: None,
             flash_msg: None,
+            theme: None,
         }
     }
 }
diff --git a/peach-web/templates/help.html.tera b/peach-web/templates/help.html.tera
index 4baa227..0109d1e 100644
--- a/peach-web/templates/help.html.tera
+++ b/peach-web/templates/help.html.tera
@@ -2,16 +2,9 @@
 {%- block card %}
       <!-- HELP MENU -->
       <div class="card center">
-        <div class="card-container">
+        <div class="capsule capsule-container border-info">
           <!-- FLASH MESSAGE -->
-          <!-- check for flash message and display accordingly -->
-          {%- if flash_msg and flash_name == "success" %}
-          <!-- display success message -->
-          <div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- elif flash_msg and flash_name == "error" %}
-          <!-- display error message -->
-          <div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
-          {%- endif %}
+          {% include "snippets/flash_message" %}
         </div>
       </div>
 {%- endblock card -%}
diff --git a/peach-web/templates/home.html.tera b/peach-web/templates/home.html.tera
index ecce8c2..9013c7c 100644
--- a/peach-web/templates/home.html.tera
+++ b/peach-web/templates/home.html.tera
@@ -5,27 +5,39 @@
         <!-- top-left -->
         <!-- PEERS LINK AND ICON -->
         <a class="top-left" href="/scuttlebutt/peers" title="Scuttlebutt Peers">
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small border-ssb">
             <img class="icon-medium" src="/icons/users.svg">
           </div>
         </a>
         <!-- top-middle -->
         <!-- CURRENT USER LINK AND ICON -->
         <a class="top-middle" href="/scuttlebutt/profile" title="Profile">
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small border-ssb">
             <img class="icon-medium" src="/icons/user.svg">
           </div>
         </a>
         <!-- top-right -->
         <!-- MESSAGES LINK AND ICON -->
         <a class="top-right" href="/scuttlebutt/private" title="Private Messages">
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small border-ssb">
             <img class="icon-medium" src="/icons/envelope.svg">
           </div>
         </a>
         <!-- middle -->
         <a class="middle">
-          <div class="circle circle-large {% if sbot_status.state == "active" %}circle-success{% else %}circle-error{% endif %}"></div>
+        {% if sbot_status.state == "active" %}
+          <div class="circle circle-large circle-success">
+            <p style="font-size: 4rem; color: var(--near-black);">^_^</p>
+          </div>
+        {% elif sbot_status.state == "inactive" %}
+          <div class="circle circle-large circle-warning">
+            <p style="font-size: 4rem; color: var(--near-black);">z_z</p>
+          </div>
+        {% else %}
+          <div class="circle circle-large circle-error">
+            <p style="font-size: 4rem; color: var(--near-black);">x_x</p>
+          </div>
+        {% endif %}
         </a>
         <!-- bottom-left -->
         <!-- SYSTEM STATUS LINK AND ICON -->
@@ -34,21 +46,21 @@
         {% else -%}
         <a class="bottom-left" href="/status" title="Status">
         {%- endif -%}
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small {% if sbot_status.state == "active" %}border-success{% elif sbot_status.state == "inactive" %}border-warning{% else %}border-danger{% endif %}">
             <img class="icon-medium" src="/icons/heart-pulse.svg">
           </div>
         </a>
         <!-- bottom-middle -->
         <!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->
         <a class="bottom-middle" href="/help" title="Help Menu">
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small border-info">
             <img class="icon-medium" src="/icons/book.svg">
           </div>
         </a>
         <!-- bottom-right -->
         <!-- SYSTEM SETTINGS LINK AND ICON -->
         <a class="bottom-right" href="/settings" title="Settings Menu">
-          <div class="circle circle-small">
+          <div class="circle circle-small border-circle-small border-settings">
             <img class="icon-medium" src="/icons/cog.svg">
           </div>
         </a>
diff --git a/peach-web/templates/login.html.tera b/peach-web/templates/login.html.tera
index 504b242..31d7ccf 100644
--- a/peach-web/templates/login.html.tera
+++ b/peach-web/templates/login.html.tera
@@ -3,7 +3,7 @@
       <!-- LOGIN FORM -->
       <div class="card center">
         <div class="card-container">
-          <form id="login_form" action="/login" method="post">
+          <form id="login_form" class="center" action="/login" method="post">
             <!-- input for username -->
             <input id="username" name="username" class="center input" type="text" placeholder="Username" title="Username for authentication" autofocus/>
             <!-- input for password -->
@@ -12,12 +12,10 @@
               <input id="loginUser" class="button button-primary center" title="Login" type="submit" value="Login">
             </div>
           </form>
-
           <!-- FLASH MESSAGE -->
           {% include "snippets/flash_message" %}
-
-         <div class="center-text" style="margin-top: 25px;">
-             <a href="/settings/admin/forgot_password" class="label-small link">Forgot Password?</a>
+          <div class="center-text" style="margin-top: 25px;">
+            <a href="/settings/admin/forgot_password" class="label-small link font-gray">Forgot Password?</a>
           </div>
         </div>
       </div>
diff --git a/peach-web/templates/nav.html.tera b/peach-web/templates/nav.html.tera
index e89e50a..7e31734 100644
--- a/peach-web/templates/nav.html.tera
+++ b/peach-web/templates/nav.html.tera
@@ -17,13 +17,25 @@
     <!-- Bottom nav bar -->
     <nav class="nav-bar">
       <a class="nav-item" href="https://scuttlebutt.nz/">
-        <img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies.png" alt="Secure Scuttlebutt">
+        <img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies_hex{% if theme and theme == "dark" %}_light{% endif %}.svg" alt="Secure Scuttlebutt">
       </a>
       <a class="nav-item" href="/">
         <img class="icon nav-icon-left" src="/icons/peach-icon.png" alt="PeachCloud" title="Home">
       </a>
-      <a class="nav-item" href="/power">
-        <img class="icon-medium nav-icon-right icon-active" title="Shutdown" src="/icons/power.svg" alt="Power switch">
+      {# only render a theme-switcher icon if the `theme` variable has been set #}
+      {% if theme and theme == "light" %}
+      <a class="nav-item" href="/theme?theme=dark">
+        <img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/moon.png" alt="Moon">
       </a>
+      {% elif theme and theme == "dark" %}
+      <a class="nav-item" href="/theme?theme=light">
+        <img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
+      </a>
+      {% else %}
+      {# render hidden element to maintain correctly alignment of other bottom nav icons #}
+      <a class="nav-item" style="visibility: hidden;" href="/theme?theme=light">
+        <img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
+      </a>
+    {% endif %}
     </nav>
 {%- endblock nav -%}
diff --git a/peach-web/templates/scuttlebutt/messages.html.tera b/peach-web/templates/scuttlebutt/messages.html.tera
index 979a68c..d3da0af 100644
--- a/peach-web/templates/scuttlebutt/messages.html.tera
+++ b/peach-web/templates/scuttlebutt/messages.html.tera
@@ -2,7 +2,7 @@
 {%- block card %}
       <!-- SCUTTLEBUTT MESSAGES -->
       <div class="card center">
-        <div class="card-container">
+        <div class="capsule capsule-container border-ssb">
           <!-- FLASH MESSAGE -->
           {% include "snippets/flash_message" %}
         </div>
diff --git a/peach-web/templates/scuttlebutt/profile.html.tera b/peach-web/templates/scuttlebutt/profile.html.tera
index a34a37a..74b1c31 100644
--- a/peach-web/templates/scuttlebutt/profile.html.tera
+++ b/peach-web/templates/scuttlebutt/profile.html.tera
@@ -5,7 +5,7 @@
         <!-- PROFILE INFO BOX -->
         <div class="capsule capsule-profile" title="Scuttlebutt account profile information">
           <!-- edit profile button -->
-          <img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
+          <img id="editProfile" class="icon-small icon-active nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
           <!-- PROFILE BIO -->
           <!-- profile picture -->
           <img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
@@ -15,14 +15,14 @@
           <p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
         </div>
         <!-- PUBLIC POST FORM -->
-        <form id="postForm" action="/scuttlebutt/post" method="post">
+        <form id="postForm" class="center" action="/scuttlebutt/post" method="post">
           <!-- input for message contents -->
           <textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
           <input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
         </form>
         <!-- BUTTONS -->
         <!-- TODO: each of these buttons needs to be a form with a public key -->
-        <div id="buttons">
+        <div id="buttons" style="margin-top: 2rem;">
           <a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
           <a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
           <a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>
diff --git a/peach-web/templates/settings/admin/change_password.html.tera b/peach-web/templates/settings/admin/change_password.html.tera
index 604fe46..b3b0749 100644
--- a/peach-web/templates/settings/admin/change_password.html.tera
+++ b/peach-web/templates/settings/admin/change_password.html.tera
@@ -2,7 +2,7 @@
 {%- block card %}
       <!-- CHANGE PASSWORD FORM -->
       <div class="card center">
-        <form id="changePassword" action="/settings/admin/change_password" method="post">
+        <form id="changePassword" class="center" action="/settings/admin/change_password" method="post">
           <!-- input for current password -->
           <input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
           <!-- input for new password -->
diff --git a/peach-web/templates/settings/admin/configure_admin.html.tera b/peach-web/templates/settings/admin/configure_admin.html.tera
index f19cead..0127e1b 100644
--- a/peach-web/templates/settings/admin/configure_admin.html.tera
+++ b/peach-web/templates/settings/admin/configure_admin.html.tera
@@ -3,9 +3,9 @@
       <!-- CONFIGURE ADMIN PAGE -->
       <div class="card center">
         <div class="text-container">
-          <h4> Current Admins </h4>
+          <h4 class="font-normal">Current Admins</h4>
           {% if not ssb_admin_ids %}
-            <div>
+            <div class="card-text">
               There are no currently configured admins.
             </div>
           {% else %}
diff --git a/peach-web/templates/settings/scuttlebutt/configure_sbot.html.tera b/peach-web/templates/settings/scuttlebutt/configure_sbot.html.tera
index a791519..3b74880 100644
--- a/peach-web/templates/settings/scuttlebutt/configure_sbot.html.tera
+++ b/peach-web/templates/settings/scuttlebutt/configure_sbot.html.tera
@@ -15,57 +15,59 @@
       <!-- SBOT CONFIGURATION FORM -->
       <div class="card center">
         <form id="sbotConfig" class="center" action="/settings/scuttlebutt/configure" method="post">
-          <div class="center" style="display: flex; flex-direction: column;" title="Number of hops to replicate">
-            <label for="hops" class="label-small">HOPS</label>
+          <div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Number of hops to replicate">
+            <label for="hops" class="label-small font-gray">HOPS</label>
             <div id="hops" style="display: flex; justify-content: space-evenly;">
-              <input type="radio" id="hops_0" name="hops" value="0"{% if hops == 0 %} checked{% endif %}>
-              <label for="hops_0">0</label>
-              <input type="radio" id="hops_1" name="hops" value="1"{% if hops == 1 %} checked{% endif %}>
-              <label for="hops_1">1</label>
-              <input type="radio" id="hops_2" name="hops" value="2"{% if hops == 2 %} checked{% endif %}>
-              <label for="hops_2">2</label>
-              <input type="radio" id="hops_3" name="hops" value="3"{% if hops == 3 %} checked{% endif %}>
-              <label for="hops_3">3</label>
-              <input type="radio" id="hops_4" name="hops" value="4"{% if hops == 4 %} checked{% endif %}>
-              <label for="hops_4">4</label><br>
+              <div>
+                <input type="radio" id="hops_0" name="hops" value="0"{% if hops == 0 %} checked{% endif %}>
+                <label class="font-normal" for="hops_0">0</label>
+              </div>
+              <div>
+                <input type="radio" id="hops_1" name="hops" value="1"{% if hops == 1 %} checked{% endif %}>
+                <label class="font-normal" for="hops_1">1</label>
+              </div>
+              <div>
+                <input type="radio" id="hops_2" name="hops" value="2"{% if hops == 2 %} checked{% endif %}>
+                <label class="font-normal" for="hops_2">2</label>
+              </div>
+              <div>
+                <input type="radio" id="hops_3" name="hops" value="3"{% if hops == 3 %} checked{% endif %}>
+                <label class="font-normal" for="hops_3">3</label>
+              </div>
+              <div>
+                <input type="radio" id="hops_4" name="hops" value="4"{% if hops == 4 %} checked{% endif %}>
+                <label class="font-normal" for="hops_4">4</label>
+              </div>
             </div>
           </div>
-          <br>
           <div class="center" style="display: flex; justify-content: space-between;">
-            <div style="display: flex; flex-direction: column; width: 60%;" title="IP address on which the sbot runs">
-              <label for="ip" class="label-small">IP ADDRESS</label>
+            <div style="display: flex; flex-direction: column; width: 60%; margin-bottom: 2rem;" title="IP address on which the sbot runs">
+              <label for="ip" class="label-small font-gray">IP ADDRESS</label>
               <input type="text" id="ip" name="lis_ip" value="{{ listen_addr.0 }}">
             </div>
-            <div style="display: flex; flex-direction: column; width: 20%;" title="Port on which the sbot runs">
-              <label for="port" class="label-small">PORT</label>
+            <div style="display: flex; flex-direction: column; width: 20%; margin-bottom: 2rem;" title="Port on which the sbot runs">
+              <label for="port" class="label-small font-gray">PORT</label>
               <input type="text" id="port" name="lis_port" value="{{ listen_addr.1 }}">
             </div>
           </div>
-          <br>
-          <div class="center" style="display: flex; flex-direction: column;" title="Network key (aka 'caps key') to define the Scuttleverse in which the sbot operates in">
-            <label for="network_key" class="label-small">NETWORK KEY</label>
+          <div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Network key (aka 'caps key') to define the Scuttleverse in which the sbot operates in">
+            <label for="network_key" class="label-small font-gray">NETWORK KEY</label>
             <input type="text" id="network_key" name="shscap" value="{{ sbot_config.shscap }}">
           </div>
-          <br>
-          <div class="center" style="display: flex; flex-direction: column;" title="Directory in which the sbot database is saved">
-            <label for="database_dir" class="label-small">DATABASE DIRECTORY</label>
+          <div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Directory in which the sbot database is saved">
+            <label for="database_dir" class="label-small font-gray">DATABASE DIRECTORY</label>
             <input type="text" id="database_dir" name="repo" value="{{ sbot_config.repo }}">
           </div>
-          <br>
           <div class="center"> 
-            <input type="checkbox" id="lanBroadcast" name="localadv"{% if sbot_config.localadv == true %} checked{% endif %}>
-            <label for="lanBroadcast" title="Broadcast the IP and port of this sbot instance so that local peers can discovery it and attempt to connect">Enable LAN Broadcasting</label><br>
-            <br>
-            <input type="checkbox" id="lanDiscovery" name="localdiscov"{% if sbot_config.localdiscov == true %} checked{% endif %}>
-            <label for="lanDiscovery" title="Listen for the presence of local peers and attempt to connect if found">Enable LAN Discovery</label><br>
-            <br>
-            <input type="checkbox" id="startup" name="startup"{% if run_on_startup == "enabled" %} checked{% endif %}>
-            <label for="startup" title="Run the pub automatically on system startup">Run pub on system startup</label><br>
-            <br>
+            <input type="checkbox" id="lanBroadcast" style="margin-bottom: 1rem;" name="localadv"{% if sbot_config.localadv == true %} checked{% endif %}>
+            <label class="font-normal" for="lanBroadcast" title="Broadcast the IP and port of this sbot instance so that local peers can discovery it and attempt to connect">Enable LAN Broadcasting</label><br>
+            <input type="checkbox" id="lanDiscovery" style="margin-bottom: 1rem;" name="localdiscov"{% if sbot_config.localdiscov == true %} checked{% endif %}>
+            <label class="font-normal" for="lanDiscovery" title="Listen for the presence of local peers and attempt to connect if found">Enable LAN Discovery</label><br>
+            <input type="checkbox" id="startup" style="margin-bottom: 1rem;" name="startup"{% if run_on_startup == "enabled" %} checked{% endif %}>
+            <label class="font-normal" for="startup" title="Run the pub automatically on system startup">Run pub when computer starts</label><br>
             <input type="checkbox" id="repair" name="repair"{% if sbot_config.repair == true %} checked{% endif %}>
-            <label for="repair" title="Attempt to repair the filesystem before starting the pub">Attempt filesystem repair when pub starts</label><br>
+            <label class="font-normal" for="repair" title="Attempt to repair the filesystem when starting the pub">Attempt filesystem repair when pub starts</label>
           </div>
-          <br>
           <!-- hidden input elements for all other config variables -->
           <input type="hidden" id="debugdir" name="debugdir" value="{{ sbot_config.debugdir }}">
           <input type="hidden" id="hmac" name="hmac" value="{{ sbot_config.hmac }}">
@@ -75,7 +77,7 @@
           <input type="hidden" id="promisc" name="promisc" value="{{ sbot_config.promisc }}">
           <input type="hidden" id="nounixsock" name="nounixsock" value="{{ sbot_config.nounixsock }}">
           <!-- BUTTONS -->
-          <input id="saveConfig" class="button button-primary center" type="submit" title="Save configuration parameters to file" value="Save">
+          <input id="saveConfig" class="button button-primary center" style="margin-top: 2rem;" type="submit" title="Save configuration parameters to file" value="Save">
           <input id="saveRestartConfig" class="button button-primary center" type="submit" title="Save configuration parameters to file and then (re)start the pub" value="Save & Restart" formaction="/settings/scuttlebutt/configure?restart=true">
           <a id="restoreDefaults" class="button button-warning center" href="/settings/scuttlebutt/configure/default" title="Restore default configuration parameters and save them to file">Restore Defaults</a>
         </form>
diff --git a/peach-web/templates/snippets/flash_message.html.tera b/peach-web/templates/snippets/flash_message.html.tera
index 0c967ce..0b7fc3b 100644
--- a/peach-web/templates/snippets/flash_message.html.tera
+++ b/peach-web/templates/snippets/flash_message.html.tera
@@ -1,11 +1,11 @@
 <!-- check for flash message and display accordingly -->
 {% if flash_msg and flash_name == "success" %}
 <!-- display success message -->
-<div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
+<div class="capsule center-text flash-message font-normal border-success">{{ flash_msg }}.</div>
 {%- elif flash_msg and flash_name == "info" %}
 <!-- display info message -->
-<div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
+<div class="capsule center-text flash-message font-normal border-info">{{ flash_msg }}.</div>
 {%- elif flash_msg and flash_name == "error" %}
 <!-- display error message -->
-<div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
-{%- endif -%}
\ No newline at end of file
+<div class="capsule center-text flash-message font-normal border-danger">{{ flash_msg }}.</div>
+{%- endif -%}
diff --git a/peach-web/templates/status/scuttlebutt.html.tera b/peach-web/templates/status/scuttlebutt.html.tera
index d147bbf..32d04bc 100644
--- a/peach-web/templates/status/scuttlebutt.html.tera
+++ b/peach-web/templates/status/scuttlebutt.html.tera
@@ -6,21 +6,26 @@
     {% set mem = sbot_status.memory / 1024 / 1024 | round -%}
     {%- else -%}
     {% set mem = "X" -%}
+    {%- endif -%}
+    {%- if sbot_status.blobstore -%}
+    {% set blobs = sbot_status.blobstore / 1024 / 1024 | round -%}
+    {%- else -%}
+    {% set blobs = "X" -%}
     {%- endif -%}
       <!-- SCUTTLEBUTT STATUS -->
       <div class="card center">
         <!-- SBOT INFO BOX -->
-        <div class="capsule capsule-container {% if sbot_status.state == "active" %}success-border{% else %}warning-border{% endif %}">
+        <div class="capsule capsule-container {% if sbot_status.state == "active" %}border-success{% elif sbot_status.state == "inactive" %}border-warning{% else %}border-danger{% endif %}">
           <!-- SBOT STATUS GRID -->
           <div class="two-grid" title="go-sbot process state">
             <!-- top-right config icon -->
             <a class="link two-grid-top-right" href="/settings/scuttlebutt" title="Configure Scuttlebutt settings">
-              <img id="configureNetworking" class="icon-small" src="/icons/cog.svg" alt="Configure">
+              <img id="configureNetworking" class="icon-small icon-active" src="/icons/cog.svg" alt="Configure">
             </a>
             <!-- left column -->
             <!-- go-sbot state icon with label -->
             <div class="grid-column-1">
-              <img id="sbotStateIcon" class="center icon {% if sbot_status.state == "inactive" %}icon-inactive{% endif %}" src="/icons/hermies.svg" alt="Hermies">
+              <img id="sbotStateIcon" class="center icon {% if sbot_status.state == "active" %}icon-active{% else %}icon-inactive{% endif %}" src="/icons/hermies.svg" alt="Hermies">
               <label id="sbotStateLabel" for="sbotStateIcon" class="center label-small font-gray" style="margin-top: 0.5rem;" title="Sbot state">{{ sbot_status.state | upper }}</label>
             </div>
             <!-- right column -->
@@ -78,25 +83,25 @@
           <!-- THREE-ACROSS STACK -->
           <div class="three-grid card-container" style="margin-top: 1rem;">
             <div class="stack">
-              <img class="icon" title="Hops" src="/icons/orbits.png">
+              <img class="icon icon-active" title="Hops" src="/icons/orbits.png">
               <div class="flex-grid" style="padding-top: 0.5rem;">
                 <label class="label-medium" style="padding-right: 3px;" title="Replication hops">{{ sbot_config.hops }}</label>
               </div>
               <label class="label-small font-gray">HOPS</label>
             </div>
             <div class="stack">
-              <img class="icon" title="Blobs" src="/icons/image-file.png">
+              <img class="icon icon-active" title="Blobs" src="/icons/image-file.png">
               <div class="flex-grid" style="padding-top: 0.5rem;">
-                <label class="label-medium" style="padding-right: 3px;" title="Blobstore size in MB">163</label>
-                <label class="label-small font-near-black">MB</label>
+                <label class="label-medium{% if sbot_status.state == "inactive" %} font-gray{% endif %}" style="padding-right: 3px;" title="Blobstore size in MB">{{ blobs }}</label>
+                <label class="label-small{% if sbot_status.state == "inactive" %} font-gray{% else %} font-normal{% endif %}">MB</label>
               </div>
               <label class="label-small font-gray">BLOBSTORE</label>
             </div>
             <div class="stack">
-              <img class="icon{% if not sbot_status.memory %} icon-inactive{% endif %}" title="Memory" src="/icons/ram.png">
+              <img class="icon{% if sbot_status.memory %} icon-active{% else %} icon-inactive{% endif %}" title="Memory" src="/icons/ram.png">
               <div class="flex-grid" style="padding-top: 0.5rem;">
                 <label class="label-medium{% if sbot_status.state == "inactive" %} font-gray{% endif %}" style="padding-right: 3px;" title="Memory usage of the go-sbot process in MB">{{ mem }}</label>
-                <label class="label-small {% if sbot_status.state == "inactive" %}font-gray{% else %}font-near-black{% endif %}">MB</label>
+                <label class="label-small{% if sbot_status.state == "inactive" %} font-gray{% else %} font-normal{% endif %}">MB</label>
               </div>
               <label class="label-small font-gray">MEMORY</label>
             </div>