diff --git a/frontend/src/components/manage/ManageHousehold.jsx b/frontend/src/components/manage/ManageHousehold.jsx
index 8fff2f0..f0db3fe 100644
--- a/frontend/src/components/manage/ManageHousehold.jsx
+++ b/frontend/src/components/manage/ManageHousehold.jsx
@@ -536,7 +536,7 @@ export default function ManageHousehold() {
                     <div className="member-actions">
                       <button
                         onClick={() => handleUpdateRole(member.id, member.role, member.username)}
-                        className="btn-secondary btn-small"
+                        className="btn-secondary btn-small member-role-action"
                       >
                         {member.role === "admin" ? "Make Member" : "Make Admin"}
                       </button>
diff --git a/frontend/src/styles/components/manage/ManageHousehold.css b/frontend/src/styles/components/manage/ManageHousehold.css
index cfb0d9f..4fdaf71 100644
--- a/frontend/src/styles/components/manage/ManageHousehold.css
+++ b/frontend/src/styles/components/manage/ManageHousehold.css
@@ -453,6 +453,32 @@ body.dark-mode .member-card:hover {
   margin-top: 0.4rem;
 }
 
+.member-role-action {
+  background: rgba(30, 144, 255, 0.14);
+  color: var(--primary-dark);
+  border-color: rgba(30, 144, 255, 0.34);
+}
+
+.member-role-action:hover:not(:disabled) {
+  background: rgba(30, 144, 255, 0.22);
+  border-color: rgba(30, 144, 255, 0.54);
+  color: var(--primary-dark);
+}
+
+[data-theme="dark"] .member-role-action,
+body.dark-mode .member-role-action {
+  background: rgba(30, 144, 255, 0.22);
+  color: #d8ecff;
+  border-color: rgba(95, 178, 255, 0.4);
+}
+
+[data-theme="dark"] .member-role-action:hover:not(:disabled),
+body.dark-mode .member-role-action:hover:not(:disabled) {
+  background: rgba(30, 144, 255, 0.32);
+  border-color: rgba(95, 178, 255, 0.6);
+  color: #f3f9ff;
+}
+
 /* Danger Zone */
 .danger-zone {
   border-color: color-mix(in srgb, var(--danger) 30%, transparent);