frontend/src/components/manage/ManageHousehold.jsx

@@ -545,6 +545,7 @@ export default function ManageHousehold() {
 
               return (
                 <div key={member.id} className="member-card">
+                  <div className="member-main">
                     <div className="member-avatar" aria-hidden="true">{roleMeta.icon}</div>
                     <div className="member-info">
                       <div className="member-topline">
@@ -556,6 +557,7 @@ export default function ManageHousehold() {
                       <span className="member-name">{member.username}</span>
                       <span className="member-meta">ID #{member.id}</span>
                     </div>
+                  </div>
                   {isManager && !isSelf && member.role !== "owner" && (
                     <div className="member-actions">
                       <button

frontend/src/styles/components/manage/ManageHousehold.css

@@ -381,10 +381,9 @@ body.dark-mode .invite-status-badge.is-used {
 }
 
 .member-card {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0.85rem;
-  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
   padding: 0.95rem 1rem;
   background: rgba(255, 255, 255, 1);
   border: 1px solid var(--border);
@@ -420,6 +419,13 @@ body.dark-mode .member-card:hover {
   font-size: 1.15rem;
 }
 
+.member-main {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.85rem;
+  align-items: flex-start;
+}
+
 .member-info {
   display: flex;
   flex-direction: column;
@@ -489,7 +495,10 @@ body.dark-mode .member-card:hover {
   display: flex;
   gap: 0.55rem;
   flex-wrap: wrap;
-  margin-top: 0.4rem;
+  justify-content: flex-end;
+  align-items: center;
+  padding-top: 0.75rem;
+  border-top: 1px solid color-mix(in srgb, var(--color-border-light) 82%, transparent);
 }
 
 .member-role-action {
@@ -518,6 +527,11 @@ body.dark-mode .member-role-action:hover:not(:disabled) {
   color: #f3f9ff;
 }
 
+[data-theme="dark"] .member-actions,
+body.dark-mode .member-actions {
+  border-top-color: color-mix(in srgb, var(--color-border-medium) 88%, transparent);
+}
+
 /* Danger Zone */
 .danger-zone {
   border-color: color-mix(in srgb, var(--danger) 30%, transparent);
@@ -623,12 +637,9 @@ body.dark-mode .danger-zone {
     grid-template-columns: 1fr;
   }
 
-  .member-card {
-    grid-template-columns: auto 1fr;
-  }
-
   .member-actions {
     width: 100%;
+    justify-content: flex-start;
   }
 
   .member-actions button,