diff --git a/frontend/src/styles/ConfirmBuyModal.css b/frontend/src/styles/ConfirmBuyModal.css
index 7db66ea..6a64977 100644
--- a/frontend/src/styles/ConfirmBuyModal.css
+++ b/frontend/src/styles/ConfirmBuyModal.css
@@ -181,12 +181,14 @@
 }
 
 .confirm-buy-cancel {
-  background: var(--color-gray-200);
-  color: var(--color-text-primary);
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border: 1px solid var(--button-secondary-border);
 }
 
 .confirm-buy-cancel:hover {
-  background: var(--color-gray-300);
+  background: var(--button-secondary-hover-bg);
+  border-color: var(--button-secondary-border-hover);
 }
 
 .confirm-buy-confirm {
diff --git a/frontend/src/styles/ImageUploadModal.css b/frontend/src/styles/ImageUploadModal.css
index 76c6407..c88a1f7 100644
--- a/frontend/src/styles/ImageUploadModal.css
+++ b/frontend/src/styles/ImageUploadModal.css
@@ -52,9 +52,9 @@
 
 .image-upload-option-btn {
   padding: 1.2em;
-  border: 2px solid #ddd;
+  border: 2px solid var(--button-secondary-border);
   border-radius: 8px;
-  background: white;
+  background: var(--button-ghost-bg);
   font-size: 1.1em;
   cursor: pointer;
   transition: all 0.2s;
@@ -65,8 +65,8 @@
 }
 
 .image-upload-option-btn:hover {
-  border-color: #007bff;
-  background: #f8f9fa;
+  border-color: var(--button-secondary-border-hover);
+  background: var(--button-secondary-hover-bg);
   transform: translateY(-2px);
   box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
 }
@@ -160,12 +160,13 @@
 }
 
 .image-upload-skip {
-  background: #f0f0f0;
-  color: #333;
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border: 1px solid var(--button-secondary-border);
 }
 
 .image-upload-skip:hover {
-  background: #e0e0e0;
+  background: var(--button-secondary-hover-bg);
 }
 
 .image-upload-confirm {
diff --git a/frontend/src/styles/ItemClassificationModal.css b/frontend/src/styles/ItemClassificationModal.css
index e7f4f85..99f9b8a 100644
--- a/frontend/src/styles/ItemClassificationModal.css
+++ b/frontend/src/styles/ItemClassificationModal.css
@@ -84,12 +84,14 @@
 }
 
 .classification-modal-btn-skip {
-  background: #6c757d;
-  color: white;
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border: 1px solid var(--button-secondary-border);
 }
 
 .classification-modal-btn-skip:hover {
-  background: #5a6268;
+  background: var(--button-secondary-hover-bg);
+  border-color: var(--button-secondary-border-hover);
 }
 
 .classification-modal-btn-confirm {
diff --git a/frontend/src/styles/components/HouseholdSwitcher.css b/frontend/src/styles/components/HouseholdSwitcher.css
index 5c94fca..468b9fd 100644
--- a/frontend/src/styles/components/HouseholdSwitcher.css
+++ b/frontend/src/styles/components/HouseholdSwitcher.css
@@ -11,7 +11,7 @@
   gap: 0.5rem;
   width: 100%;
   padding: 0.5rem 1rem;
-  background: var(--card-bg);
+  background: var(--button-ghost-bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text-primary);
@@ -21,8 +21,8 @@
 }
 
 .household-switcher-toggle:hover {
-  background: var(--card-hover);
-  border-color: var(--primary);
+  background: var(--button-ghost-hover-bg);
+  border-color: var(--button-ghost-border-hover);
 }
 
 .household-switcher-toggle:disabled {
@@ -101,7 +101,7 @@
 }
 
 .household-option:hover {
-  background: var(--card-hover);
+  background: var(--button-secondary-bg);
   border-color: var(--primary);
 }
 
diff --git a/frontend/src/styles/components/ImageUploadSection.css b/frontend/src/styles/components/ImageUploadSection.css
index fd30b43..e057422 100644
--- a/frontend/src/styles/components/ImageUploadSection.css
+++ b/frontend/src/styles/components/ImageUploadSection.css
@@ -54,12 +54,14 @@
 }
 
 .image-upload-btn.gallery {
-  background: #6c757d;
-  color: white;
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border: 1px solid var(--button-secondary-border);
 }
 
 .image-upload-btn.gallery:hover {
-  background: #545b62;
+  background: var(--button-secondary-hover-bg);
+  border-color: var(--button-secondary-border-hover);
 }
 
 .image-upload-preview {
diff --git a/frontend/src/styles/components/Navbar.css b/frontend/src/styles/components/Navbar.css
index 33a39d8..579478e 100644
--- a/frontend/src/styles/components/Navbar.css
+++ b/frontend/src/styles/components/Navbar.css
@@ -66,8 +66,8 @@
   justify-content: center;
   text-decoration: none;
   color: #ffffff;
-  background: #495057;
-  border: 1px solid #5a6268;
+  background: rgba(30, 144, 255, 0.18);
+  border: 1px solid rgba(95, 178, 255, 0.32);
   border-radius: 0;
   font-size: 1.2rem;
   line-height: 1;
@@ -75,7 +75,7 @@
 }
 
 .navbar-icon-link:hover {
-  background: #5a6268;
+  background: rgba(30, 144, 255, 0.3);
 }
 
 .navbar-icon-link:focus-visible {
@@ -103,9 +103,9 @@
 
 /* User Button */
 .navbar-user-btn {
-  background: #495057;
+  background: rgba(30, 144, 255, 0.18);
   color: white;
-  border: none;
+  border: 1px solid rgba(95, 178, 255, 0.32);
   padding: 0.5rem 1rem;
   border-radius: 4px;
   cursor: pointer;
@@ -119,7 +119,7 @@
 }
 
 .navbar-user-btn:hover {
-  background: #5a6268;
+  background: rgba(30, 144, 255, 0.3);
 }
 
 .navbar-user-icon {
diff --git a/frontend/src/styles/components/ToggleButtonGroup.css b/frontend/src/styles/components/ToggleButtonGroup.css
index dc0cb26..73085d5 100644
--- a/frontend/src/styles/components/ToggleButtonGroup.css
+++ b/frontend/src/styles/components/ToggleButtonGroup.css
@@ -69,11 +69,11 @@
 
 .tbg-button.is-inactive:hover:not(:disabled) {
   color: var(--text-primary);
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--button-secondary-bg);
 }
 
 [data-theme="dark"] .tbg-button.is-inactive:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.08);
+  background: var(--button-secondary-bg);
 }
 
 .tbg-button:focus-visible {
diff --git a/frontend/src/styles/components/UploadToaster.css b/frontend/src/styles/components/UploadToaster.css
index a62b22a..3497023 100644
--- a/frontend/src/styles/components/UploadToaster.css
+++ b/frontend/src/styles/components/UploadToaster.css
@@ -55,9 +55,9 @@
 }
 
 .upload-toast-actions button {
-  border: 1px solid var(--color-border-light);
-  background: var(--color-bg-surface);
-  color: var(--color-text-primary);
+  border: 1px solid var(--button-secondary-border);
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
   border-radius: 6px;
   padding: 0.3rem 0.55rem;
   font-size: 0.8rem;
@@ -65,8 +65,9 @@
 }
 
 .upload-toast-actions button:hover {
-  border-color: var(--color-primary);
-  color: var(--color-primary);
+  background: var(--button-secondary-hover-bg);
+  border-color: var(--button-secondary-border-hover);
+  color: var(--button-secondary-text);
 }
 
 .upload-toast-success .upload-toast-progress-fill {
diff --git a/frontend/src/styles/components/manage/CreateJoinHousehold.css b/frontend/src/styles/components/manage/CreateJoinHousehold.css
index 5103595..18a50fe 100644
--- a/frontend/src/styles/components/manage/CreateJoinHousehold.css
+++ b/frontend/src/styles/components/manage/CreateJoinHousehold.css
@@ -55,7 +55,7 @@
 }
 
 .close-btn:hover {
-  background: var(--card-hover);
+  background: var(--button-ghost-bg);
   color: var(--text-primary);
 }
 
@@ -80,7 +80,7 @@
 
 .mode-tab:hover {
   color: var(--text-primary);
-  background: var(--card-hover);
+  background: var(--button-secondary-bg);
 }
 
 .mode-tab.active {
diff --git a/frontend/src/styles/pages/AdminPanel.css b/frontend/src/styles/pages/AdminPanel.css
index 0d3caf4..237b9a6 100644
--- a/frontend/src/styles/pages/AdminPanel.css
+++ b/frontend/src/styles/pages/AdminPanel.css
@@ -44,7 +44,7 @@
 
 .admin-tab:hover {
   color: var(--text-primary);
-  background: var(--card-hover);
+  background: var(--button-secondary-bg);
 }
 
 .admin-tab.active {
diff --git a/frontend/src/styles/pages/InviteLink.css b/frontend/src/styles/pages/InviteLink.css
index a8fff52..db27080 100644
--- a/frontend/src/styles/pages/InviteLink.css
+++ b/frontend/src/styles/pages/InviteLink.css
@@ -61,8 +61,9 @@
 }
 
 .invite-btn-secondary {
-  background: var(--card-hover);
-  color: var(--text-primary);
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border: 1px solid var(--button-secondary-border);
 }
 
 @media (max-width: 640px) {
diff --git a/frontend/src/styles/pages/Login.css b/frontend/src/styles/pages/Login.css
index 92aa35a..c044589 100644
--- a/frontend/src/styles/pages/Login.css
+++ b/frontend/src/styles/pages/Login.css
@@ -14,8 +14,8 @@
 }
 
 .login-password-toggle {
-  background: #f0f0f0;
-  border: 1px solid #ccc;
+  background: var(--button-ghost-bg);
+  border: 1px solid var(--button-ghost-border);
   border-radius: 4px;
   cursor: pointer;
   font-size: 1.2em;
@@ -31,6 +31,6 @@
 
 .login-password-toggle:hover {
   opacity: 1;
-  background: #e8e8e8;
+  background: var(--button-ghost-hover-bg);
 }
 
diff --git a/frontend/src/styles/pages/Manage.css b/frontend/src/styles/pages/Manage.css
index ebf742b..db15ade 100644
--- a/frontend/src/styles/pages/Manage.css
+++ b/frontend/src/styles/pages/Manage.css
@@ -44,7 +44,7 @@
 
 .manage-tab:hover {
   color: var(--text-primary);
-  background: var(--card-hover);
+  background: var(--button-secondary-bg);
 }
 
 .manage-tab.active {
diff --git a/frontend/src/styles/pages/Settings.css b/frontend/src/styles/pages/Settings.css
index 4d993b3..d2f2d7b 100644
--- a/frontend/src/styles/pages/Settings.css
+++ b/frontend/src/styles/pages/Settings.css
@@ -83,7 +83,7 @@
 
 .settings-tab:hover {
   color: var(--color-primary);
-  background: var(--color-bg-hover);
+  background: var(--button-secondary-bg);
 }
 
 .settings-tab.active {
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 78b958a..94e08ab 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -182,6 +182,18 @@
   --card-border-radius: var(--border-radius-lg);
   --card-shadow: var(--shadow-card);
 
+  --button-secondary-bg: rgba(30, 144, 255, 0.12);
+  --button-secondary-hover-bg: rgba(30, 144, 255, 0.2);
+  --button-secondary-border: rgba(30, 144, 255, 0.26);
+  --button-secondary-border-hover: rgba(30, 144, 255, 0.42);
+  --button-secondary-text: var(--color-primary-dark);
+
+  --button-ghost-bg: rgba(30, 144, 255, 0.08);
+  --button-ghost-hover-bg: rgba(30, 144, 255, 0.16);
+  --button-ghost-border: rgba(30, 144, 255, 0.22);
+  --button-ghost-border-hover: rgba(30, 144, 255, 0.38);
+  --button-ghost-text: var(--color-primary-dark);
+
   --modal-backdrop-bg: rgba(15, 23, 42, 0.48);
   --modal-bg: var(--color-bg-elevated);
   --modal-border-radius: var(--border-radius-lg);
@@ -272,6 +284,18 @@
   --modal-bg: var(--color-bg-elevated);
   --input-focus-shadow: 0 0 0 4px rgba(45, 212, 191, 0.18);
   --card-bg: var(--color-bg-surface);
+
+  --button-secondary-bg: rgba(95, 178, 255, 0.18);
+  --button-secondary-hover-bg: rgba(95, 178, 255, 0.28);
+  --button-secondary-border: rgba(95, 178, 255, 0.3);
+  --button-secondary-border-hover: rgba(131, 196, 255, 0.5);
+  --button-secondary-text: #d8ecff;
+
+  --button-ghost-bg: rgba(95, 178, 255, 0.12);
+  --button-ghost-hover-bg: rgba(95, 178, 255, 0.22);
+  --button-ghost-border: rgba(95, 178, 255, 0.24);
+  --button-ghost-border-hover: rgba(131, 196, 255, 0.4);
+  --button-ghost-text: #d8ecff;
 }
 
 @media (prefers-color-scheme: dark) {
diff --git a/frontend/src/styles/utilities.css b/frontend/src/styles/utilities.css
index 226db6e..91d8608 100644
--- a/frontend/src/styles/utilities.css
+++ b/frontend/src/styles/utilities.css
@@ -108,23 +108,23 @@
 .btn-primary {
   background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
   color: var(--color-text-inverse);
-  box-shadow: 0 14px 30px rgba(15, 118, 110, 0.18);
+  box-shadow: 0 14px 30px rgba(30, 144, 255, 0.22);
 }
 
 .btn-primary:hover:not(:disabled) {
   transform: translateY(-2px);
-  box-shadow: 0 18px 34px rgba(15, 118, 110, 0.24);
+  box-shadow: 0 18px 34px rgba(30, 144, 255, 0.28);
 }
 
 .btn-secondary {
-  background: rgba(255, 255, 255, 0.72);
-  color: var(--color-text-primary);
-  border-color: var(--color-border-light);
+  background: var(--button-secondary-bg);
+  color: var(--button-secondary-text);
+  border-color: var(--button-secondary-border);
 }
 
 .btn-secondary:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-border-medium);
+  background: var(--button-secondary-hover-bg);
+  border-color: var(--button-secondary-border-hover);
   transform: translateY(-1px);
 }
 
@@ -149,25 +149,25 @@
 }
 
 .btn-outline {
-  background: rgba(255, 255, 255, 0.28);
-  color: var(--color-primary);
+  background: var(--button-ghost-bg);
+  color: var(--button-ghost-text);
   border: var(--border-width-thin) solid var(--color-primary);
 }
 
 .btn-outline:hover:not(:disabled) {
-  background: var(--color-primary-light);
+  background: var(--button-ghost-hover-bg);
   transform: translateY(-1px);
 }
 
 .btn-ghost {
-  background: rgba(255, 255, 255, 0.62);
-  color: var(--color-text-primary);
-  border: var(--border-width-thin) solid var(--color-border-medium);
+  background: var(--button-ghost-bg);
+  color: var(--button-ghost-text);
+  border: var(--border-width-thin) solid var(--button-ghost-border);
 }
 
 .btn-ghost:hover:not(:disabled) {
-  background: var(--color-bg-hover);
-  border-color: var(--color-border-dark);
+  background: var(--button-ghost-hover-bg);
+  border-color: var(--button-ghost-border-hover);
 }
 
 .btn-sm {