diff --git a/src/admin/views/dashboard.ejs b/src/admin/views/dashboard.ejs
index 6e57cd0..cfbf204 100644
--- a/src/admin/views/dashboard.ejs
+++ b/src/admin/views/dashboard.ejs
@@ -163,11 +163,11 @@
             </div>
             <div class="panel-container show">
                 <div class="panel-content">
-                    <div class="d-grid gap-2">
+                    <div class="d-flex flex-wrap gap-2">
                         <a href="/products" class="btn btn-primary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#plus"></use></svg> Add Product</a>
                         <a href="/users" class="btn btn-success"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#user-plus"></use></svg> Add User</a>
                         <a href="/catalog" class="btn btn-info text-white"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#list"></use></svg> View Catalog</a>
-                        <a href="/settings" class="btn btn-secondary"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
+                        <a href="/settings" class="btn btn-dark"><svg class="sa-icon me-2"><use href="/icons/sprite.svg#settings"></use></svg> Settings</a>
                     </div>
                 </div>
             </div>
diff --git a/src/admin/views/layout.ejs b/src/admin/views/layout.ejs
index 15141c7..dbe1ff5 100644
--- a/src/admin/views/layout.ejs
+++ b/src/admin/views/layout.ejs
@@ -39,6 +39,42 @@
         .main-content td form + form {
             margin-left: 0.5rem;
         }
+        /* Button icon visibility */
+        .btn svg.sa-icon {
+            fill: currentColor;
+            flex-shrink: 0;
+        }
+        /* Ensure icons are visible on all button variants */
+        .btn-primary svg.sa-icon,
+        .btn-success svg.sa-icon,
+        .btn-info svg.sa-icon,
+        .btn-danger svg.sa-icon,
+        .btn-warning svg.sa-icon,
+        .btn-dark svg.sa-icon {
+            fill: #fff;
+        }
+        /* Icon on light buttons */
+        .btn-outline-primary svg.sa-icon,
+        .btn-outline-secondary svg.sa-icon,
+        .btn-outline-success svg.sa-icon,
+        .btn-outline-info svg.sa-icon,
+        .btn-outline-warning svg.sa-icon,
+        .btn-outline-danger svg.sa-icon,
+        .btn-secondary svg.sa-icon,
+        .btn-light svg.sa-icon {
+            fill: currentColor;
+        }
+        /* Prevent text wrapping in icon buttons */
+        .btn {
+            white-space: nowrap;
+        }
+        /* Better alignment for icon+text buttons */
+        a.btn, button.btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.4rem;
+        }
     </style>
 </head>