diff --git a/static/md3.css b/static/md3.css
index b7e51c2..ab8d3ca 100644
--- a/static/md3.css
+++ b/static/md3.css
@@ -12,6 +12,7 @@
   --border: rgba(255, 255, 255, 0.1);
   --accent: #a855f7;
   --accent-secondary: #ec4899;
+  --danger: #ef4444;
   
   --header-gradient: linear-gradient(90deg, #8b5cf6 0%, #ec4899 100%);
   --widget-gradient: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%);
@@ -201,9 +202,11 @@ svg { width: 100%; height: 100%; display: block; max-width: 100%; max-height: 10
 .page-wrap { max-width: 1000px; margin: 3rem auto; padding: 0 2rem; }
 .card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem; box-shadow: var(--shadow-lg); }
 
-.md-input { width: 100%; background: var(--bg-widget); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; transition: border-color 0.2s; }
+.md-input { width: 100%; background: var(--bg-widget); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; color: var(--text-primary); caret-color: var(--text-primary); font-size: 1.1rem; margin-bottom: 1.5rem; transition: border-color 0.2s; }
+.md-input::placeholder { color: var(--text-secondary); opacity: 1; }
 .md-input:focus { border-color: var(--accent); outline: none; }
 .md-button { display: inline-flex; align-items: center; justify-content: center; width: 100%; background: var(--header-gradient); border: none; border-radius: 16px; padding: 1.25rem; color: #fff; font-weight: 800; font-size: 1.1rem; cursor: pointer; transition: all 0.2s; }
+.md-button--compact { width: auto; padding: 0.75rem 2rem; }
 .md-button:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.4); }
 
 .status-pill--active { color: #4ade80; background: rgba(74, 222, 128, 0.1); }
@@ -252,11 +255,15 @@ svg { width: 100%; height: 100%; display: block; max-width: 100%; max-height: 10
 .auth-icon { width: 40px; height: 40px; }
 .auth-client-info { background: var(--bg-widget); border-radius: 16px; padding: 1.5rem; text-align: left; border: 1px solid var(--border); }
 
-.u-ghost-button { background: var(--bg-widget) !important; color: var(--text-secondary) !important; }
+.accent-text { color: var(--accent); }
+.accent-checkbox { accent-color: var(--accent); }
+.u-danger-button { background: var(--danger); color: #fff; border: none; }
+.u-ghost-button { background: var(--bg-widget) !important; border: 1px solid var(--border) !important; color: var(--text-secondary) !important; }
 .u-margin-left-auto { margin-left: auto; }
 .u-padding-top-2 { padding-top: 2rem; }
 .u-border-top { border-top: 1px solid var(--border); }
 .u-margin-bottom-05 { margin-bottom: 0.5rem; }
+.u-opacity-6 { opacity: 0.6; }
 .u-font-weight-900 { font-weight: 900; }
 .u-font-size-lg { font-size: 1.5rem; }
 .u-font-size-sm { font-size: 0.8rem; }
diff --git a/templates/device_status.html b/templates/device_status.html
index 49dbd3a..758be33 100644
--- a/templates/device_status.html
+++ b/templates/device_status.html
@@ -3,7 +3,7 @@
 {% block content %}
 <div class="dash-container">
     <!-- Header Section -->
-    <section class="summary-box summary-box--full">
+    <section class="summary-box span-full">
         <div class="dash-header-inline">
             <div>
                 <a href="{{ url_for('routes.devices') }}" class="accent-text flex-row u-margin-bottom-1">
diff --git a/templates/devices.html b/templates/devices.html
index f9be8d9..24834ff 100644
--- a/templates/devices.html
+++ b/templates/devices.html
@@ -64,6 +64,10 @@ <h3 class="u-margin-bottom-1">No devices found</h3>
                 </tbody>
             </table>
         </div>
+
+        <div class="flex-row u-margin-top-2">
+            <a href="{{ url_for('routes.index') }}" class="md-button md-button--compact u-ghost-button">Back to Dashboard</a>
+        </div>
     </section>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/icons.svg b/templates/icons.svg
index a1da916..7ca10c4 100644
--- a/templates/icons.svg
+++ b/templates/icons.svg
@@ -26,6 +26,9 @@
   <symbol id="icon-home" viewBox="0 0 24 24">
     <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
   </symbol>
+  <symbol id="icon-wifi" viewBox="0 0 24 24">
+    <path fill="currentColor" d="M12 20c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-4c-2.76 0-5.26-1.12-7.07-2.93l1.41-1.41C7.69 13.79 9.76 14.5 12 14.5s4.31-.71 5.66-1.84l1.41 1.41C17.26 14.88 14.76 16 12 16zm0-4c-1.86 0-3.64-.64-5.07-1.71L8.34 8.93C9.37 9.62 10.64 10 12 10s2.63-.38 3.66-1.07l1.41 1.36C15.64 11.36 13.86 12 12 12zM12 6c-3.18 0-6.08 1.22-8.24 3.2l1.42 1.42C6.47 8.29 9.07 7 12 7s5.53 1.29 6.82 3.62l1.42-1.42C18.08 7.22 15.18 6 12 6z"/>
+  </symbol>
   <symbol id="icon-devices" viewBox="0 0 24 24">
     <path fill="currentColor" d="M4 6h18V4H4c-1.1 0-2 .9-2 2v11H0v3h14v-3H4V6zm19 2h-6c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h6c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-1 9h-4v-7h4v7z"/>
   </symbol>
diff --git a/templates/index.html b/templates/index.html
index 7ed1b3a..d2fe24d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -110,9 +110,10 @@ <h3 class="text-center">Power Usage</h3>
                 <div class="toggle-switch toggle-switch--on"></div>
             </div>
             <div style="display: flex; flex-direction: column; align-items: center; gap: 1rem;">
-            <div class="flex-column items-center">
-                <svg class="u-icon-hero color-light"><use xlink:href="#icon-bulb"></use></svg>
-                <span class="font-bold">Main Studio</span>
+                <div class="flex-column items-center">
+                    <svg class="u-icon-hero color-light"><use xlink:href="#icon-bulb"></use></svg>
+                    <span class="font-bold">Main Studio</span>
+                </div>
             </div>
         </div>
 
diff --git a/templates/mqtt_log.html b/templates/mqtt_log.html
index c349ec6..b908dfa 100644
--- a/templates/mqtt_log.html
+++ b/templates/mqtt_log.html
@@ -67,8 +67,8 @@ <h1>MQTT Monitor</h1>
         </div>
         
         <div class="flex-row u-margin-top-2">
-            <button class="md-button" style="width: auto; padding: 0.75rem 2rem; background: var(--bg-widget);" onclick="location.reload()">Refresh Log</button>
-            <a href="{{ url_for('routes.index') }}" class="md-button" style="width: auto; padding: 0.75rem 2rem; background: transparent; border: 1px solid var(--border);">Back to Dashboard</a>
+            <button class="md-button md-button--compact u-ghost-button" onclick="location.reload()">Refresh Log</button>
+            <a href="{{ url_for('routes.index') }}" class="md-button md-button--compact u-ghost-button">Back to Dashboard</a>
         </div>
     </section>
 </div>