From 6cceac65fe6a24b76ffacc47c48d40918fa95282 Mon Sep 17 00:00:00 2001
From: 12975 <1297598740@qq.com>
Date: Sun, 1 Feb 2026 17:37:12 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E5=A4=9A=E4=B8=AA=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=92=8C=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E=E4=BA=86?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=96=87=E4=BB=B6=EF=BC=8C=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=BA=86=E7=8E=BB=E7=92=83=E6=95=88=E6=9E=9C=E5=92=8C=E7=8E=B0?=
 =?UTF-8?q?=E4=BB=A3UI=E8=AE=BE=E8=AE=A1=EF=BC=8C=E5=B9=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=BA=86=20PiggyBankCard=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .../account/AccountForm/AccountForm.css       | 263 +++++--
 .../AssetSummaryCard/AssetSummaryCard.css     | 159 ++--
 .../DraggableAccountList.css                  | 202 +++--
 .../budget/BudgetCard/BudgetCard.css          | 263 +++----
 .../budget/BudgetProgress/BudgetProgress.css  | 184 +++--
 .../budget/PiggyBankCard/PiggyBankCard.css    | 717 +++++++++---------
 .../budget/PiggyBankCard/PiggyBankCard.tsx    |  58 +-
 src/components/common/Layout/Layout.css       | 323 ++++----
 .../common/Navigation/Navigation.css          | 204 +++--
 .../DailyInsightCard/DailyInsightCard.css     |  42 +-
 .../RecurringTransactionForm.css              | 498 ++++++------
 .../TransactionForm/TransactionForm.css       | 252 ++++--
 src/index.css                                 |  74 +-
 src/pages/Accounts/Accounts.css               | 397 ++++++----
 src/pages/Login/Login.css                     | 215 ++++--
 src/pages/Transactions/Transactions.css       | 620 ++++++---------
 src/styles/animations.css                     |  55 +-
 18 files changed, 2427 insertions(+), 2101 deletions(-)

diff --git a/.env.development b/.env.development
index 2bf124d..3f6b173 100644
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_API_BASE_URL=/api/v1
+VITE_API_BASE_URL=https://bk.swalktech.top/api/v1
diff --git a/src/components/account/AccountForm/AccountForm.css b/src/components/account/AccountForm/AccountForm.css
index 7918661..ba782ff 100644
--- a/src/components/account/AccountForm/AccountForm.css
+++ b/src/components/account/AccountForm/AccountForm.css
@@ -8,24 +8,42 @@
   height: 100%;
   min-height: 0;
   padding: 0;
-  background-color: var(--color-bg);
-  border-radius: 20px;
+  /* Use glass background instead of solid color */
+  background: var(--glass-bg);
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  border-radius: 24px;
   max-width: 500px;
   margin: 0 auto;
   overflow: hidden;
   box-shadow:
-    0 20px 50px rgba(0, 0, 0, 0.1),
-    0 0 0 1px rgba(0, 0, 0, 0.05);
+    0 25px 60px -15px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+
+/* Subtle gradient overlay for extra polish */
+.account-form::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
+  pointer-events: none;
+  z-index: 1;
 }
 
 .account-form__content {
   flex: 1;
   overflow-y: auto;
-  padding: 1.75rem;
+  padding: 2rem;
   display: flex;
   flex-direction: column;
-  gap: 1.5rem;
+  gap: 1.75rem;
   -webkit-overflow-scrolling: touch;
+  position: relative;
+  z-index: 2;
 }
 
 /* Form actions */
@@ -33,21 +51,29 @@
   flex-shrink: 0;
   display: flex;
   gap: 1rem;
-  padding: 1.25rem 1.75rem;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  padding: 1.5rem 2rem;
+  background: rgba(255, 255, 255, 0.02);
+  /* Very subtle tint */
+  border-top: 1px solid var(--glass-border);
   backdrop-filter: blur(10px);
   z-index: 10;
+  position: relative;
 }
 
 .account-form__title {
   margin: 0 0 0.5rem 0;
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 700;
+  font-size: 1.75rem;
+  font-weight: 800;
+  /* Gradient text for title */
+  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
   color: var(--text-primary);
+  /* Fallback */
   text-align: center;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
 }
 
 /* Field styles */
@@ -70,59 +96,109 @@
   font-size: 0.9rem;
   font-weight: 600;
   color: var(--text-secondary);
-  margin-left: 2px;
+  margin-left: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .account-form__required {
-  color: #ef4444;
+  color: var(--color-error);
+  font-size: 1.2em;
+  line-height: 0.5;
 }
 
 .account-form__input {
-  padding: 0.85rem 1rem;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
   font-size: 1rem;
+  background-color: var(--bg-primary);
+  /* In dark mode, bg-primary is dark, in light mode it's light.
+     To make it glass-like, we use a transparent version if possible, 
+     or rely on the variable being correct. */
   background-color: rgba(255, 255, 255, 0.5);
   color: var(--text-primary);
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02);
 }
 
+/* Dark mode adjustment manually if needed, 
+   though variables should handle it. 
+   But for specific glass look on inputs: */
+[data-theme="dark"] .account-form__input {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+
 .account-form__input:focus {
   outline: none;
   border-color: var(--accent-primary);
-  background-color: #fff;
-  box-shadow: 0 0 0 3px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.15);
+  background-color: var(--bg-secondary);
+  box-shadow:
+    0 0 0 4px rgba(var(--accent-rgb), 0.15),
+    0 1px 2px rgba(0, 0, 0, 0.05);
+  transform: translateY(-1px);
 }
 
 .account-form__input--error {
-  border-color: #ef4444;
-  background-color: rgba(239, 68, 68, 0.02);
+  border-color: var(--color-error);
+  background-color: rgba(239, 68, 68, 0.05);
+  animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
+}
+
+@keyframes shake {
+
+  10%,
+  90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+
+  20%,
+  80% {
+    transform: translate3d(2px, 0, 0);
+  }
+
+  30%,
+  50%,
+  70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+
+  40%,
+  60% {
+    transform: translate3d(4px, 0, 0);
+  }
 }
 
 .account-form__input--number {
   flex: 1;
   font-family: 'Outfit', sans-serif;
   font-weight: 600;
+  letter-spacing: 0.02em;
 }
 
 .account-form__input:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: rgba(0, 0, 0, 0.05);
 }
 
 .account-form__error {
   font-size: 0.8rem;
-  color: #ef4444;
-  margin-left: 2px;
+  color: var(--color-error);
+  margin-left: 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
   animation: slideDownFade 0.2s ease-out;
 }
 
 .account-form__hint {
   font-size: 0.8rem;
   color: var(--text-tertiary);
-  margin-left: 2px;
+  margin-left: 0.25rem;
+  line-height: 1.4;
 }
 
 /* Input group for currency + amount */
@@ -132,22 +208,34 @@
 }
 
 .account-form__currency-select {
-  padding: 0.85rem;
-  border: 1px solid rgba(0, 0, 0, 0.08);
-  border-radius: 12px;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
   font-size: 0.95rem;
-  font-weight: 600;
+  font-weight: 700;
   background-color: rgba(255, 255, 255, 0.5);
   color: var(--text-primary);
   cursor: pointer;
-  min-width: 90px;
+  min-width: 100px;
   transition: all 0.2s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  padding-right: 2.5rem;
+}
+
+[data-theme="dark"] .account-form__currency-select {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: rgba(255, 255, 255, 0.1);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
 }
 
 .account-form__currency-select:focus {
   outline: none;
   border-color: var(--accent-primary);
-  background-color: #fff;
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
 }
 
 /* Account type grid */
@@ -161,54 +249,69 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 0.5rem;
-  padding: 1rem 0.5rem;
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  border-radius: 16px;
+  gap: 0.6rem;
+  padding: 1.25rem 0.5rem;
+  border: 1px solid var(--border-color);
+  border-radius: 18px;
   background-color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  position: relative;
+  overflow: hidden;
+}
+
+[data-theme="dark"] .account-form__type-btn {
+  background-color: rgba(255, 255, 255, 0.03);
 }
 
 .account-form__type-btn:hover {
   border-color: var(--accent-primary);
-  background-color: rgba(255, 255, 255, 0.8);
+  background-color: var(--bg-secondary);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
 }
 
 .account-form__type-btn--selected {
   border-color: var(--accent-primary);
-  background-color: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.08);
-  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
+  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
+}
+
+.account-form__type-btn--selected::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: var(--accent-primary);
 }
 
 .account-form__type-btn--selected .account-form__type-icon {
   transform: scale(1.1);
   color: var(--accent-primary);
+  filter: drop-shadow(0 4px 6px rgba(var(--accent-rgb), 0.3));
 }
 
 .account-form__type-btn--selected .account-form__type-label {
   color: var(--accent-primary);
-  font-weight: 600;
-}
-
-.account-form__type-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
+  font-weight: 700;
 }
 
 .account-form__type-icon {
-  font-size: 1.75rem;
-  color: var(--text-secondary);
-  transition: all 0.3s ease;
+  font-size: 2rem;
+  color: var(--text-muted);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .account-form__type-label {
   font-size: 0.8rem;
   color: var(--text-secondary);
   transition: all 0.2s ease;
+  text-align: center;
 }
 
 /* Icon grid */
@@ -216,34 +319,37 @@
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;
+  padding: 0.5rem;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 16px;
+  border: 1px solid var(--border-color);
 }
 
 .account-form__icon-btn {
-  width: 44px;
-  height: 44px;
+  width: 46px;
+  height: 46px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgba(0, 0, 0, 0.06);
+  border: 1px solid transparent;
   border-radius: 12px;
-  background-color: rgba(255, 255, 255, 0.4);
-  font-size: 1.4rem;
+  background-color: transparent;
+  font-size: 1.5rem;
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .account-form__icon-btn:hover {
-  border-color: var(--accent-primary);
-  transform: scale(1.1) rotate(5deg);
-  background-color: white;
+  transform: scale(1.15) rotate(5deg);
+  background-color: var(--bg-hover);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
 .account-form__icon-btn--selected {
   border-color: var(--accent-primary);
-  background-color: rgba(var(--accent-primary-rgb, 59, 130, 246), 0.1);
+  background-color: rgba(var(--accent-rgb), 0.1);
   transform: scale(1.1);
-  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.15);
+  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.2);
 }
 
 .account-form__btn {
@@ -252,33 +358,40 @@
   border: none;
   border-radius: 14px;
   font-size: 1rem;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease;
   letter-spacing: 0.01em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
 }
 
 .account-form__btn--cancel {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: transparent;
   color: var(--text-secondary);
-  border: 1px solid transparent;
+  border: 1px solid var(--border-color);
 }
 
 .account-form__btn--cancel:hover:not(:disabled) {
-  background-color: rgba(0, 0, 0, 0.08);
+  background-color: var(--bg-hover);
   color: var(--text-primary);
+  border-color: var(--text-secondary);
 }
 
 .account-form__btn--submit {
-  background: var(--accent-primary);
+  background: var(--gradient-primary);
+  /* Use theme gradient */
   color: #fff;
-  box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.3);
+  box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
 .account-form__btn--submit:hover:not(:disabled) {
   filter: brightness(1.1);
   transform: translateY(-2px);
-  box-shadow: 0 8px 20px rgba(var(--accent-primary-rgb, 59, 130, 246), 0.4);
+  box-shadow: 0 8px 25px rgba(var(--accent-rgb), 0.4);
 }
 
 .account-form__btn:disabled {
@@ -287,13 +400,25 @@
   box-shadow: none;
 }
 
+@keyframes slideDownFade {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 /* Responsive styles */
 @media (max-width: 480px) {
   .account-form {
-    padding: 0;
+    border-radius: 0;
     max-width: 100%;
     height: 100%;
-    border-radius: 0;
+    box-shadow: none;
   }
 
   .account-form__content {
diff --git a/src/components/account/AssetSummaryCard/AssetSummaryCard.css b/src/components/account/AssetSummaryCard/AssetSummaryCard.css
index b207b17..b102552 100644
--- a/src/components/account/AssetSummaryCard/AssetSummaryCard.css
+++ b/src/components/account/AssetSummaryCard/AssetSummaryCard.css
@@ -1,130 +1,159 @@
 /**
- * AssetSummaryCard Styles
- * Blue gradient background (#60A5FA → #3B82F6) with white text
+ * AssetSummaryCard Styles - Premium Glassmorphism
  */
 
 .asset-summary-card {
   position: relative;
-  padding: 32px 24px;
-  border-radius: 16px;
+  padding: 2rem;
+  border-radius: 24px;
   overflow: hidden;
-  min-height: 160px;
+  min-height: 180px;
   display: flex;
   align-items: center;
-  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  /* Premium Aurora Gradient Background */
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.8), rgba(99, 102, 241, 0.8));
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow:
+    0 20px 40px -10px rgba(59, 130, 246, 0.5),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  color: white;
 }
 
 .asset-summary-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.2);
+  transform: translateY(-4px) scale(1.02);
+  box-shadow:
+    0 30px 60px -12px rgba(59, 130, 246, 0.6),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  z-index: 10;
 }
 
-/* Blue gradient background */
+/* Internal Shimmer/Gradient Overlay */
 .asset-summary-card__gradient {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%);
+  background:
+    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
+    radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
   z-index: 0;
+  pointer-events: none;
 }
 
-/* Decorative icon */
+/* Shine Effect */
+.asset-summary-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0) 70%);
+  transform: translateX(-100%);
+  transition: transform 0.6s ease;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.asset-summary-card:hover::after {
+  transform: translateX(100%);
+}
+
+/* Decorative Icon */
 .asset-summary-card__decoration {
   position: absolute;
-  right: 20px;
-  top: 50%;
-  transform: translateY(-50%);
+  right: -10px;
+  bottom: -20px;
+  transform: rotate(-15deg);
   opacity: 0.15;
   z-index: 1;
   color: white;
+  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.2));
+  transition: all 0.5s ease;
 }
 
-/* Content container */
+.asset-summary-card:hover .asset-summary-card__decoration {
+  transform: rotate(0deg) scale(1.1) translate(-10px, -10px);
+  opacity: 0.2;
+}
+
+/* Content Container */
 .asset-summary-card__content {
   position: relative;
   z-index: 2;
-  color: white;
   width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
 /* Label */
 .asset-summary-card__label {
-  font-size: 14px;
-  font-weight: 500;
+  font-family: 'Outfit', sans-serif;
+  font-size: 0.9rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
   opacity: 0.9;
-  margin-bottom: 8px;
-  letter-spacing: 0.5px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-/* Amount container */
+/* Amount Container */
 .asset-summary-card__amount {
   display: flex;
   align-items: baseline;
-  gap: 8px;
+  gap: 6px;
 }
 
-/* Currency symbol */
+/* Currency Symbol */
 .asset-summary-card__currency {
-  font-size: 18px;
-  font-weight: 600;
-  opacity: 0.95;
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 500;
+  opacity: 0.9;
+  color: rgba(255, 255, 255, 0.95);
 }
 
-/* Amount value */
+/* Amount Value */
 .asset-summary-card__value {
-  font-size: 36px;
-  font-weight: 700;
-  line-height: 1.2;
-  letter-spacing: -0.5px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 3.5rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -1.5px;
+  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
-/* Responsive adjustments */
+/* Responsive */
 @media (max-width: 768px) {
   .asset-summary-card {
-    padding: 24px 20px;
-    min-height: 140px;
-  }
-
-  .asset-summary-card__decoration {
-    right: 16px;
-  }
-
-  .asset-summary-card__label {
-    font-size: 13px;
-  }
-
-  .asset-summary-card__currency {
-    font-size: 16px;
+    padding: 1.5rem;
+    min-height: 160px;
   }
 
   .asset-summary-card__value {
-    font-size: 32px;
+    font-size: 2.75rem;
   }
 }
 
 @media (max-width: 480px) {
   .asset-summary-card {
-    padding: 20px 16px;
-    min-height: 120px;
-  }
-
-  .asset-summary-card__decoration {
-    opacity: 0.1;
-    right: 12px;
-  }
-
-  .asset-summary-card__label {
-    font-size: 12px;
-  }
-
-  .asset-summary-card__currency {
-    font-size: 14px;
+    padding: 1.25rem;
+    min-height: 140px;
   }
 
   .asset-summary-card__value {
-    font-size: 28px;
+    font-size: 2.25rem;
   }
-}
+
+  .asset-summary-card__decoration {
+    right: -20px;
+    bottom: -30px;
+    opacity: 0.1;
+  }
+}
\ No newline at end of file
diff --git a/src/components/account/DraggableAccountList/DraggableAccountList.css b/src/components/account/DraggableAccountList/DraggableAccountList.css
index 8fb126e..0d311ad 100644
--- a/src/components/account/DraggableAccountList/DraggableAccountList.css
+++ b/src/components/account/DraggableAccountList/DraggableAccountList.css
@@ -1,58 +1,77 @@
 /**
- * DraggableAccountList Component Styles
+ * DraggableAccountList Component Styles - Premium Glass UI
  */
 
 .draggable-account-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
   width: 100%;
 }
 
 .draggable-account-list--empty {
-  min-height: 200px;
+  min-height: 250px;
   display: flex;
   align-items: center;
   justify-content: center;
+  background: var(--glass-panel-bg);
+  border: 1px dashed var(--border-color);
+  border-radius: 20px;
 }
 
 .draggable-account-list__empty-state {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 12px;
-  color: #9ca3af;
+  gap: 16px;
+  color: var(--text-secondary);
   text-align: center;
 }
 
 .draggable-account-list__empty-state p {
   margin: 0;
-  font-size: 14px;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 /* Draggable Account Item */
 .draggable-account-item {
   display: flex;
   align-items: center;
-  gap: 12px;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  padding: 16px;
-  transition: all 0.2s ease;
+  gap: 16px;
+  /* Glassmorphism base */
+  background: var(--glass-panel-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid var(--glass-border);
+  border-radius: 20px;
+  padding: 18px 24px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   cursor: default;
+  position: relative;
+  overflow: hidden;
 }
 
+/* Hover Effect */
 .draggable-account-item:hover {
-  border-color: #d1d5db;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px) scale(1.005);
+  background: var(--bg-elevated);
+  border-color: rgba(var(--accent-rgb), 0.3);
+  box-shadow:
+    0 10px 30px -10px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(var(--accent-rgb), 0.1);
 }
 
+/* Dragging State */
 .draggable-account-item--dragging {
-  opacity: 0.5;
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-  transform: scale(1.02);
+  opacity: 0.9;
+  background: var(--bg-secondary);
+  box-shadow:
+    0 20px 50px rgba(0, 0, 0, 0.2),
+    0 0 0 2px var(--accent-primary);
+  transform: scale(1.03);
   z-index: 1000;
+  border-color: var(--accent-primary);
 }
 
 /* Drag Handle */
@@ -60,58 +79,64 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color: #9ca3af;
+  color: var(--text-muted);
   cursor: grab;
-  padding: 4px;
-  border-radius: 4px;
+  padding: 8px;
+  border-radius: 8px;
   transition: all 0.2s ease;
   flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.draggable-account-item:hover .draggable-account-item__handle {
+  opacity: 1;
 }
 
 .draggable-account-item__handle:hover {
-  color: #6b7280;
-  background: #f3f4f6;
+  color: var(--accent-primary);
+  background: rgba(var(--accent-rgb), 0.1);
 }
 
 .draggable-account-item__handle:active {
   cursor: grabbing;
-  color: #3b82f6;
 }
 
 /* Account Content */
 .draggable-account-item__content {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 20px;
   flex: 1;
   min-width: 0;
   cursor: pointer;
 }
 
-.draggable-account-item__content:focus {
-  outline: 2px solid #3b82f6;
-  outline-offset: 2px;
-  border-radius: 8px;
-}
-
 /* Account Icon */
 .draggable-account-item__icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: 48px;
-  font-size: 24px;
-  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
-  border-radius: 12px;
+  width: 56px;
+  height: 56px;
+  font-size: 28px;
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-hover));
+  border-radius: 16px;
   flex-shrink: 0;
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
+  transition: transform 0.3s ease;
+}
+
+.draggable-account-item:hover .draggable-account-item__icon {
+  transform: scale(1.1) rotate(-5deg);
+  border-color: rgba(var(--accent-rgb), 0.2);
 }
 
 /* Account Info */
 .draggable-account-item__info {
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
   flex: 1;
   min-width: 0;
 }
@@ -119,16 +144,18 @@
 .draggable-account-item__header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
 }
 
 .draggable-account-item__name {
-  font-size: 16px;
-  font-weight: 600;
-  color: #111827;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: -0.01em;
 }
 
 /* Warning Badge */
@@ -136,37 +163,39 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
-  background: rgba(245, 158, 11, 0.15);
-  /* Amber-100 equivalent with opacity */
-  color: #D97706;
-  /* Amber-600 */
-  font-size: 11px;
-  /* Slightly smaller for better fit */
-  font-weight: 600;
-  border-radius: 6px;
+  padding: 4px 10px;
+  background: rgba(245, 158, 11, 0.1);
+  color: #f59e0b;
+  font-size: 0.75rem;
+  font-weight: 700;
+  border-radius: 20px;
   flex-shrink: 0;
-  line-height: 1.2;
+  border: 1px solid rgba(245, 158, 11, 0.2);
 }
 
 /* Account Meta */
 .draggable-account-item__meta {
   display: flex;
   align-items: center;
-  gap: 12px;
-  font-size: 12px;
-  color: #6b7280;
+  gap: 16px;
+  font-size: 0.85rem;
+  color: var(--text-secondary);
 }
 
 .draggable-account-item__code {
-  font-family: 'Courier New', monospace;
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
   font-weight: 500;
+  opacity: 0.8;
+  background: rgba(0, 0, 0, 0.03);
+  padding: 2px 6px;
+  border-radius: 4px;
 }
 
 .draggable-account-item__sync {
   display: flex;
   align-items: center;
   gap: 4px;
+  opacity: 0.7;
 }
 
 /* Account Balance */
@@ -175,38 +204,41 @@
   flex-direction: column;
   align-items: flex-end;
   flex-shrink: 0;
+  padding-left: 20px;
 }
 
 .draggable-account-item__amount {
-  font-size: 18px;
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.25rem;
   font-weight: 700;
-  color: #111827;
+  color: var(--text-primary);
   white-space: nowrap;
+  letter-spacing: -0.02em;
 }
 
 .draggable-account-item__amount--negative {
-  color: #ef4444;
+  color: var(--color-error);
 }
 
 /* Responsive Design */
 @media (max-width: 640px) {
   .draggable-account-item {
-    padding: 12px;
-    gap: 8px;
+    padding: 16px;
+    gap: 12px;
   }
 
   .draggable-account-item__icon {
-    width: 40px;
-    height: 40px;
-    font-size: 20px;
+    width: 48px;
+    height: 48px;
+    font-size: 24px;
   }
 
   .draggable-account-item__name {
-    font-size: 14px;
+    font-size: 1rem;
   }
 
   .draggable-account-item__amount {
-    font-size: 16px;
+    font-size: 1.1rem;
   }
 
   .draggable-account-item__meta {
@@ -216,44 +248,4 @@
   }
 }
 
-/* Dark Mode Support */
-@media (prefers-color-scheme: dark) {
-  .draggable-account-item {
-    background: #1f2937;
-    border-color: #374151;
-  }
-
-  .draggable-account-item:hover {
-    border-color: #4b5563;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-  }
-
-  .draggable-account-item__handle {
-    color: #6b7280;
-  }
-
-  .draggable-account-item__handle:hover {
-    color: #9ca3af;
-    background: #374151;
-  }
-
-  .draggable-account-item__icon {
-    background: linear-gradient(135deg, #374151, #4b5563);
-  }
-
-  .draggable-account-item__name {
-    color: #f9fafb;
-  }
-
-  .draggable-account-item__meta {
-    color: #9ca3af;
-  }
-
-  .draggable-account-item__amount {
-    color: #f9fafb;
-  }
-
-  .draggable-account-list__empty-state {
-    color: #6b7280;
-  }
-}
\ No newline at end of file
+/* Dark Mode Handled via Variables */
\ No newline at end of file
diff --git a/src/components/budget/BudgetCard/BudgetCard.css b/src/components/budget/BudgetCard/BudgetCard.css
index 32e2f26..8db547a 100644
--- a/src/components/budget/BudgetCard/BudgetCard.css
+++ b/src/components/budget/BudgetCard/BudgetCard.css
@@ -5,27 +5,35 @@
 .budget-card {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1.25rem;
   padding: 1.5rem;
   background: var(--glass-panel-bg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
+  border-radius: 24px;
   box-shadow: var(--shadow-sm);
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   position: relative;
   overflow: hidden;
 }
 
-.budget-card::before {
+/* Glass shine effect on hover */
+.budget-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
-  height: 4px;
-  background: var(--color-primary);
-  opacity: 0.8;
+  bottom: 0;
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%);
+  transform: translateX(-100%);
+  transition: transform 0.6s ease;
+  pointer-events: none;
+}
+
+.budget-card:hover::after {
+  transform: translateX(100%);
 }
 
 .budget-card--clickable {
@@ -33,13 +41,29 @@
 }
 
 .budget-card--clickable:hover {
-  transform: translateY(-4px);
-  box-shadow: var(--shadow-lg), 0 0 20px rgba(99, 102, 241, 0.1);
-  border-color: rgba(99, 102, 241, 0.3);
+  transform: translateY(-5px) scale(1.01);
+  box-shadow:
+    0 20px 40px -10px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.9);
 }
 
-.budget-card--clickable:active {
-  transform: translateY(-1px);
+[data-theme="dark"] .budget-card--clickable:hover {
+  background: rgba(40, 44, 52, 0.8);
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Top accent line */
+.budget-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light));
+  opacity: 0.8;
 }
 
 /* Header */
@@ -47,19 +71,24 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 1rem;
+  min-height: 48px;
 }
 
 .budget-card__title-section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
   flex: 1;
   min-width: 0;
+  padding-right: 1rem;
 }
 
 .budget-card__name {
-  margin: 0 0 0.5rem 0;
+  margin: 0;
+  font-family: 'Outfit', sans-serif;
   font-size: 1.25rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--text-primary);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -69,78 +98,61 @@
 .budget-card__meta {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
   flex-wrap: wrap;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
+}
+
+.budget-card__period {
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-tertiary);
+  background: rgba(0, 0, 0, 0.04);
+  padding: 2px 8px;
+  border-radius: 6px;
 }
 
 .budget-card__meta-item {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-}
-
-.budget-card__meta-icon {
-  color: var(--color-text-muted);
-}
-
-.budget-card__period {
-  font-weight: 600;
-  background: rgba(99, 102, 241, 0.1);
-  color: var(--color-primary);
-  padding: 2px 8px;
-  border-radius: var(--radius-full);
+  gap: 4px;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
 }
 
 .budget-card__separator {
   color: var(--glass-border);
+  font-size: 0.6rem;
 }
 
-.budget-card__category,
-.budget-card__account {
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-
-
-.budget-card__rolling-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 2px 8px;
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
-  color: white;
-  border-radius: var(--radius-full);
-  font-size: 0.625rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
-}
-
+/* Amount Section */
 .budget-card__amount-section {
+  text-align: right;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 0.25rem;
 }
 
 .budget-card__amount {
+  font-family: 'Outfit', sans-serif;
   font-size: 1.5rem;
   font-weight: 800;
-  color: var(--color-text);
-  font-family: 'Outfit', sans-serif;
+  color: var(--text-primary);
+  line-height: 1.1;
   letter-spacing: -0.02em;
 }
 
+/* Status Badges */
 .budget-card__status {
-  padding: 0.125rem 0.5rem;
-  border-radius: var(--radius-full);
-  font-size: 0.6875rem;
+  margin-top: 4px;
+  font-size: 0.7rem;
   font-weight: 700;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  padding: 2px 8px;
+  border-radius: 99px;
+  letter-spacing: 0.05em;
+  display: inline-block;
 }
 
 .budget-card__status--normal {
@@ -158,48 +170,40 @@
   color: var(--color-error);
 }
 
-/* Progress section */
-.budget-card__progress-section {
-  width: 100%;
-  padding: 0.25rem 0;
-}
-
-/* Footer */
+/* Footer Stats */
 .budget-card__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
+  margin-top: 0.25rem;
   padding-top: 1rem;
-  border-top: 1px solid var(--glass-border);
-  margin-top: 0.5rem;
+  border-top: 1px dashed var(--glass-border);
 }
 
 .budget-card__stats {
   display: flex;
-  gap: 1.5rem;
-  flex: 1;
+  gap: 2rem;
 }
 
 .budget-card__stat {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
 }
 
 .budget-card__stat-label {
-  font-size: 0.6875rem;
+  font-size: 0.7rem;
   font-weight: 600;
-  color: var(--color-text-secondary);
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  color: var(--text-tertiary);
+  letter-spacing: 0.05em;
+  margin-bottom: 2px;
 }
 
 .budget-card__stat-value {
-  font-size: 1.125rem;
-  font-weight: 700;
-  color: var(--color-text);
   font-family: 'Outfit', sans-serif;
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: var(--text-secondary);
 }
 
 .budget-card__stat-value--negative {
@@ -210,97 +214,70 @@
 .budget-card__actions {
   display: flex;
   gap: 0.5rem;
-  opacity: 0.8;
-  transition: opacity 0.2s;
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all 0.3s ease;
 }
 
 .budget-card:hover .budget-card__actions {
   opacity: 1;
+  transform: translateX(0);
 }
 
 .budget-card__action-btn {
-  background: var(--glass-bg);
-  border: 1px solid var(--glass-border);
-  padding: 0.5rem;
-  cursor: pointer;
-  border-radius: 50%;
-  font-size: 1rem;
-  transition: all 0.2s ease;
+  width: 32px;
+  height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--color-text-secondary);
-  width: 2rem;
-  height: 2rem;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  background: rgba(0, 0, 0, 0.04);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .budget-card__action-btn:hover {
   background: white;
-  transform: scale(1.1);
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
-  color: var(--color-primary);
-  border-color: var(--color-primary-light);
+  color: var(--text-primary);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
 }
 
 .budget-card__action-btn--delete:hover {
+  background: #fef2f2;
   color: var(--color-error);
-  border-color: rgba(239, 68, 68, 0.3);
-  background: rgba(254, 242, 242, 0.5);
+  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15);
+}
+
+/* Rolling Badge */
+.budget-card__rolling-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.65rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 99px;
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2);
 }
 
 /* Mobile */
-@media (max-width: 768px) {
+@media (max-width: 600px) {
   .budget-card {
     padding: 1.25rem;
   }
 
-  .budget-card__header {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-
-  .budget-card__amount-section {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 0.5rem;
-    border-bottom: 1px dashed var(--glass-border);
-    margin-bottom: 0.5rem;
-  }
-
-  .budget-card__name {
-    font-size: 1.125rem;
+  .budget-card__actions {
+    opacity: 1;
+    /* Always show actions on mobile */
+    transform: none;
   }
 
   .budget-card__amount {
     font-size: 1.25rem;
   }
-}
-
-@media (max-width: 480px) {
-  .budget-card {
-    gap: 0.75rem;
-  }
-
-  .budget-card__stats {
-    gap: 1rem;
-  }
-
-  .budget-card__stat-value {
-    font-size: 1rem;
-  }
-
-  .budget-card__footer {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 0.75rem;
-  }
-
-  .budget-card__actions {
-    justify-content: flex-end;
-    opacity: 1;
-    border-top: 1px dashed var(--glass-border);
-    padding-top: 0.75rem;
-  }
 }
\ No newline at end of file
diff --git a/src/components/budget/BudgetProgress/BudgetProgress.css b/src/components/budget/BudgetProgress/BudgetProgress.css
index ee69456..8ece141 100644
--- a/src/components/budget/BudgetProgress/BudgetProgress.css
+++ b/src/components/budget/BudgetProgress/BudgetProgress.css
@@ -1,29 +1,37 @@
 /**
- * BudgetProgress Component Styles
+ * BudgetProgress Component Styles - Premium Glow
  */
 
 .budget-progress {
   width: 100%;
+  position: relative;
 }
 
 /* Bar container */
 .budget-progress__bar-container {
   width: 100%;
-  height: 24px;
-  background-color: var(--color-bg-secondary);
-  border-radius: 12px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0.05);
+  /* Softer track */
+  border-radius: 99px;
+  /* Pill shape */
   overflow: hidden;
   position: relative;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0, 0, 0, 0.03);
+}
+
+[data-theme="dark"] .budget-progress__bar-container {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.05);
 }
 
 .budget-progress--small .budget-progress__bar-container {
-  height: 8px;
-  border-radius: 4px;
+  height: 6px;
 }
 
 .budget-progress--large .budget-progress__bar-container {
-  height: 32px;
-  border-radius: 16px;
+  height: 28px;
 }
 
 /* Progress bar */
@@ -31,94 +39,168 @@
   height: 100%;
   display: flex;
   align-items: center;
-  justify-content: center;
-  transition: width 0.3s ease, background-color 0.3s ease;
-  border-radius: inherit;
+  justify-content: flex-end;
+  /* Align text to end for movement */
+  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+  /* Bouncy spring */
+  border-radius: 99px;
   position: relative;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  padding-right: 8px;
+  /* Space for text inside bar */
+  min-width: 24px;
+  /* Ensure circle remains visible at low % */
 }
 
+/* Striped Animation overlay */
+.budget-progress__bar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: linear-gradient(45deg,
+      rgba(255, 255, 255, 0.15) 25%,
+      transparent 25%,
+      transparent 50%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.15) 75%,
+      transparent 75%,
+      transparent);
+  background-size: 20px 20px;
+  animation: moveStripes 1s linear infinite;
+  opacity: 0.5;
+  border-radius: 99px;
+  display: none;
+  /* Hidden by default, enable on hover or loading maybe? */
+}
+
+.budget-progress--over-budget .budget-progress__bar::before {
+  display: block;
+  /* Show warning stripes for over budget */
+  animation: moveStripes 0.5s linear infinite;
+  /* Faster danger stripes */
+}
+
+@keyframes moveStripes {
+  0% {
+    background-position: 0 0;
+  }
+
+  100% {
+    background-position: 20px 20px;
+  }
+}
+
+/* Gradients & Glows */
 .budget-progress--normal {
-  background: linear-gradient(90deg, #4caf50, #66bb6a);
+  background: linear-gradient(90deg, #10b981, #34d399);
+  /* Emerald */
+  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
 }
 
 .budget-progress--warning {
-  background: linear-gradient(90deg, #ff9800, #ffb74d);
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+  /* Amber */
+  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.3);
 }
 
 .budget-progress--over-budget {
-  background: linear-gradient(90deg, #f44336, #ef5350);
+  background: linear-gradient(90deg, #ef4444, #f87171);
+  /* Red */
+  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
 }
 
 /* Percentage text */
 .budget-progress__percentage {
-  font-size: 0.75rem;
-  font-weight: 600;
+  font-size: 0.65rem;
+  font-weight: 700;
   color: #fff;
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
+  white-space: nowrap;
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: 0.5px;
 }
 
 .budget-progress--large .budget-progress__percentage {
-  font-size: 0.875rem;
+  font-size: 0.8rem;
 }
 
-/* Info section */
+/* Info section (Bottom labels) */
 .budget-progress__info {
   display: flex;
   justify-content: space-between;
-  margin-top: 0.5rem;
+  margin-top: 6px;
+  font-family: 'Outfit', sans-serif;
   font-size: 0.75rem;
-  color: var(--color-text-secondary);
+  font-weight: 500;
+  color: var(--text-secondary);
 }
 
 .budget-progress--large .budget-progress__info {
-  font-size: 0.875rem;
-  margin-top: 0.75rem;
+  font-size: 0.85rem;
 }
 
 .budget-progress__spent {
-  font-weight: 500;
-}
-
-.budget-progress__total {
-  font-weight: 500;
-}
-
-/* Status badges */
-.budget-progress__status {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  margin-top: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  border-radius: 6px;
-  font-size: 0.75rem;
+  color: var(--text-primary);
   font-weight: 600;
 }
 
+/* Status Badges */
+.budget-progress__status {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: 6px;
+  padding: 2px 8px;
+  border-radius: 99px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  background: var(--bg-elevated);
+  border: 1px solid transparent;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
 .budget-progress__status--warning {
-  background-color: rgba(255, 152, 0, 0.1);
   color: var(--color-warning);
+  background: rgba(245, 158, 11, 0.1);
+  border-color: rgba(245, 158, 11, 0.2);
 }
 
 .budget-progress__status--over {
-  background-color: rgba(244, 67, 54, 0.1);
   color: var(--color-error);
+  background: rgba(239, 68, 68, 0.1);
+  border-color: rgba(239, 68, 68, 0.2);
+  animation: pulse 2s infinite;
 }
 
-/* Responsive styles */
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.02);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+/* Responsive */
 @media (max-width: 480px) {
   .budget-progress__bar-container {
-    height: 20px;
+    height: 16px;
+  }
+
+  .budget-progress--small .budget-progress__bar-container {
+    height: 4px;
   }
 
   .budget-progress__percentage {
-    font-size: 0.625rem;
+    display: none;
+    /* Hide internal text on very small screens if bar too small */
   }
-
-  .budget-progress__info {
-    font-size: 0.625rem;
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/budget/PiggyBankCard/PiggyBankCard.css b/src/components/budget/PiggyBankCard/PiggyBankCard.css
index d0fd7e4..dcdf55a 100644
--- a/src/components/budget/PiggyBankCard/PiggyBankCard.css
+++ b/src/components/budget/PiggyBankCard/PiggyBankCard.css
@@ -1,6 +1,6 @@
 /**
- * PiggyBankCard Component - Premium Glassmorphism Style
- * Enhanced with beautiful progress bar
+ * PiggyBankCard - Skeuomorphic "Clay" Style
+ * A tactile, physical feel with a liquid-filling pig visual
  */
 
 .piggy-bank-card {
@@ -8,47 +8,42 @@
   flex-direction: column;
   gap: 1.25rem;
   padding: 1.5rem;
-  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 250, 245, 0.9) 100%);
-  backdrop-filter: blur(12px);
-  border: 1px solid rgba(249, 115, 22, 0.15);
-  border-radius: 20px;
+  /* Pure Ceramic White - No Noise */
+  background: #fffbf7;
+  /* Subtle highlight gradient only */
+  background-image: radial-gradient(at 0% 0%, rgba(255, 255, 255, 0.9) 0%, transparent 60%);
+  border-radius: 28px;
+  /* Deep, soft shadows for 3D lift */
   box-shadow:
-    0 4px 20px rgba(249, 115, 22, 0.08),
-    0 2px 8px rgba(0, 0, 0, 0.04);
+    20px 20px 60px #d1ccc5,
+    -20px -20px 60px #ffffff,
+    inset 0 0 0 2px rgba(255, 255, 255, 0.5);
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   position: relative;
+  overflow: hidden;
+  border: none;
 }
 
-.piggy-bank-card::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 4px;
-  background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
-  border-radius: 20px 20px 0 0;
-}
-
-.piggy-bank-card--clickable {
-  cursor: pointer;
+/* Dark Mode - Dark Ceramic */
+.dark .piggy-bank-card {
+  background: #2a2d3a;
+  box-shadow:
+    15px 15px 30px #1c1e26,
+    -15px -15px 30px #383c4e;
+  background-image: none;
 }
 
 .piggy-bank-card--clickable:hover {
-  transform: translateY(-4px);
+  transform: translateY(-6px);
   box-shadow:
-    0 12px 40px rgba(249, 115, 22, 0.15),
-    0 4px 12px rgba(0, 0, 0, 0.08);
-  border-color: rgba(249, 115, 22, 0.3);
+    25px 25px 70px #d1ccc5,
+    -25px -25px 70px #ffffff;
 }
 
-.piggy-bank-card--completed {
-  background: linear-gradient(135deg, rgba(220, 252, 231, 0.9) 0%, rgba(240, 253, 244, 0.95) 100%);
-  border-color: rgba(34, 197, 94, 0.25);
-}
-
-.piggy-bank-card--completed::before {
-  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
+.dark .piggy-bank-card--clickable:hover {
+  box-shadow:
+    20px 20px 40px #1c1e26,
+    -20px -20px 40px #383c4e;
 }
 
 /* Header */
@@ -56,7 +51,7 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: 1rem;
+  z-index: 2;
 }
 
 .piggy-bank-card__title-section {
@@ -64,9 +59,9 @@
   align-items: flex-start;
   gap: 1rem;
   flex: 1;
-  min-width: 0;
 }
 
+/* 3D Icon Container with Floating Coin */
 .piggy-bank-card__icon {
   flex-shrink: 0;
   width: 3.5rem;
@@ -74,149 +69,264 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, rgba(251, 146, 60, 0.1) 100%);
-  border-radius: 16px;
-  color: #f97316;
-  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.15);
+  /* Embossed look */
+  background: #fffbf7;
+  border-radius: 50%;
+  box-shadow:
+    5px 5px 10px #e6e1da,
+    -5px -5px 10px #ffffff;
+  color: #ea580c;
+  /* Floating animation */
+  animation: float 6s ease-in-out infinite;
+  position: relative;
 }
 
-.piggy-bank-card--completed .piggy-bank-card__icon {
-  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
-  color: #22c55e;
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.15);
+/* Explicit Coin Box */
+.piggy-bank-card__coin {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 24px;
+  height: 24px;
+  background: linear-gradient(135deg, #fcd34d 0%, #d97706 100%);
+  border-radius: 50%;
+  border: 2px solid #fff5d1;
+  box-shadow: 0 4px 6px rgba(180, 83, 9, 0.3);
+  color: #78350f;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: coinBounce 3s ease-in-out infinite;
+  z-index: 5;
 }
 
-.piggy-bank-card__title-info {
+@keyframes coinBounce {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-6px) rotate(10deg);
+  }
+}
+
+.dark .piggy-bank-card__icon {
+  background: #2a2d3a;
+  box-shadow:
+    5px 5px 10px #1c1e26,
+    -5px -5px 10px #383c4e;
+  color: #fb923c;
+}
+
+.dark .piggy-bank-card__coin {
+  border-color: #451a03;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+}
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+/* Header Typography & Layout */
+.piggy-bank-card__title-group {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.125rem;
+  /* Tighter gap for better grouping */
   flex: 1;
-  min-width: 0;
-  padding-top: 0.25rem;
+  /* Take detailed width */
+  align-self: center;
 }
 
 .piggy-bank-card__name {
-  margin: 0 0 0.5rem 0;
+  margin: 0;
+  font-family: 'Outfit', sans-serif;
   font-size: 1.25rem;
-  font-weight: 700;
-  color: #1f2937;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  letter-spacing: -0.02em;
+  /* Refined size */
+  font-weight: 800;
+  color: #431407;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
 }
 
-.piggy-bank-card__meta {
+.dark .piggy-bank-card__name {
+  color: #fff7ed;
+}
+
+.piggy-bank-card__tags {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.6rem;
   flex-wrap: wrap;
-  font-size: 0.8125rem;
-  color: #6b7280;
-}
-
-.piggy-bank-card__meta-item {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-.piggy-bank-card__meta-icon {
-  color: #9ca3af;
 }
 
 .piggy-bank-card__type {
-  font-weight: 600;
-  padding: 3px 10px;
-  background: linear-gradient(135deg, rgba(249, 115, 22, 0.12) 0%, rgba(251, 146, 60, 0.08) 100%);
-  color: #ea580c;
-  border-radius: 20px;
+  display: inline-flex;
+  align-items: center;
+  font-weight: 700;
+  color: #c2410c;
+  text-transform: uppercase;
+  font-size: 0.65rem;
+  letter-spacing: 0.05em;
+  background: #ffedd5;
+  padding: 4px 8px;
+  /* Balanced padding */
+  border-radius: 6px;
+  line-height: 1;
+}
+
+.piggy-bank-card__account-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
   font-size: 0.75rem;
-}
-
-.piggy-bank-card__separator {
-  color: #d1d5db;
-}
-
-.piggy-bank-card__account {
-  color: #6b7280;
   font-weight: 500;
+  color: #a8a29e;
+  line-height: 1;
 }
 
-/* Progress Wrapper */
+/* Progress Section with "Liquid Gauge" Feel */
 .piggy-bank-card__progress-wrapper {
+  background: #fdfaf8;
+  /* Inner Clay Shadow */
+  box-shadow:
+    inset 2px 2px 5px rgba(168, 162, 158, 0.1),
+    inset -2px -2px 5px rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  padding: 1.25rem;
+  position: relative;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 1rem;
+  /* More breathing room */
+  border: 1px solid rgba(255, 255, 255, 0.6);
 }
 
-.piggy-bank-card__progress-header {
+.dark .piggy-bank-card__progress-wrapper {
+  background: #232632;
+  box-shadow:
+    inset 5px 5px 10px #181a21,
+    inset -5px -5px 10px #2e3243;
+  border: none;
+}
+
+/* Progress Info Layout */
+.piggy-bank-card__progress-info {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
+  /* Align bottom baselines */
+  position: relative;
+  z-index: 2;
 }
 
-.piggy-bank-card__progress-amounts {
+.piggy-bank-card__amount-group {
   display: flex;
-  align-items: baseline;
+  flex-direction: column;
   gap: 0.25rem;
 }
 
+.piggy-bank-card__label {
+  font-size: 0.75rem;
+  color: #a8a29e;
+  font-weight: 600;
+  line-height: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .piggy-bank-card__current-amount {
-  font-size: 1.5rem;
+  font-family: 'Outfit', sans-serif;
+  font-size: 2.25rem;
+  /* Larger and clearer */
   font-weight: 800;
-  color: #f97316;
-  font-family: 'Outfit', system-ui, sans-serif;
-  letter-spacing: -0.02em;
+  color: #ea580c;
+  line-height: 1;
+  /* Tight but not crashing */
+  letter-spacing: -0.04em;
+  /* Deep engraved effect */
+  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8), -1px -1px 0px rgba(0, 0, 0, 0.05);
 }
 
-.piggy-bank-card--completed .piggy-bank-card__current-amount {
-  color: #22c55e;
+.dark .piggy-bank-card__current-amount {
+  color: #fb923c;
+  text-shadow: none;
 }
 
-.piggy-bank-card__amount-separator {
-  font-size: 1rem;
-  color: #9ca3af;
-  margin: 0 0.25rem;
+.piggy-bank-card__target-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.35rem;
+  padding-bottom: 0.25rem;
+  /* Visual alignment fix with huge font on left */
+}
+
+.piggy-bank-card__target-row {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.piggy-bank-card__label-small {
+  font-size: 0.7rem;
+  color: #a8a29e;
+  font-weight: 500;
 }
 
 .piggy-bank-card__target-amount {
+  font-family: 'Outfit', sans-serif;
   font-size: 1rem;
   font-weight: 600;
-  color: #6b7280;
-  font-family: 'Outfit', system-ui, sans-serif;
+  color: #78716c;
+  line-height: 1;
 }
 
-.piggy-bank-card__progress-percentage {
-  font-size: 1rem;
+.piggy-bank-card__percentage-text {
+  font-family: 'Outfit', sans-serif;
+  font-size: 1.1rem;
+  font-weight: 800;
+  color: #d6d3d1;
+  line-height: 1;
+}
+
+.piggy-bank-card__completed-text {
+  font-size: 0.85rem;
   font-weight: 700;
-  color: #f97316;
-}
-
-.piggy-bank-card--completed .piggy-bank-card__progress-percentage {
   color: #22c55e;
+  background: #dcfce7;
+  padding: 2px 8px;
+  border-radius: 10px;
 }
 
-.piggy-bank-card__completed-badge {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  padding: 0.25rem 0.75rem;
-  background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(74, 222, 128, 0.1) 100%);
-  color: #16a34a;
-  border-radius: 20px;
-  font-size: 0.8125rem;
-  font-weight: 700;
-}
-
-/* Progress Track */
+/* Liquid Progress Bar / Coin Slot */
 .piggy-bank-card__progress-track {
-  position: relative;
-  height: 12px;
-  background: linear-gradient(90deg, rgba(249, 115, 22, 0.1) 0%, rgba(251, 146, 60, 0.05) 100%);
-  border-radius: 12px;
+  height: 18px;
+  /* Softer slot color */
+  background: #e5e5e5;
+  border-radius: 99px;
   overflow: hidden;
+  position: relative;
+  /* Soft inner shadow */
+  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.4);
 }
 
-.piggy-bank-card--completed .piggy-bank-card__progress-track {
-  background: linear-gradient(90deg, rgba(34, 197, 94, 0.1) 0%, rgba(74, 222, 128, 0.05) 100%);
+.dark .piggy-bank-card__progress-track {
+  background: #3e3a36;
+  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
 }
 
 .piggy-bank-card__progress-fill {
@@ -224,344 +334,267 @@
   top: 0;
   left: 0;
   height: 100%;
-  background: linear-gradient(90deg, #f97316 0%, #fb923c 50%, #fdba74 100%);
-  border-radius: 12px;
-  transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
-  box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
+  background: linear-gradient(90deg, #fb923c, #ea580c);
+  border-radius: 99px;
+  box-shadow: 0 0 10px rgba(234, 88, 12, 0.4);
+  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-.piggy-bank-card__progress-fill--completed {
-  background: linear-gradient(90deg, #22c55e 0%, #4ade80 50%, #86efac 100%);
-  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
-}
-
-.piggy-bank-card__progress-glow {
+/* Glassy Highlight on Liquid */
+.piggy-bank-card__progress-fill::before {
+  content: '';
   position: absolute;
-  top: 0;
-  right: 0;
-  width: 40px;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
-  animation: shimmer 2s infinite;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  height: 40%;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.1) 100%);
+  border-radius: 99px;
+  z-index: 1;
 }
 
-@keyframes shimmer {
-  0% {
-    opacity: 0;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0;
-  }
-}
-
-.piggy-bank-card__progress-milestones {
+/* Bubbles/Flow Animation */
+.piggy-bank-card__progress-fill::after {
+  content: '';
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
   bottom: 0;
-  pointer-events: none;
+  right: 0;
+  background-image:
+    radial-gradient(circle, rgba(255, 255, 255, 0.4) 10%, transparent 20%);
+  background-size: 12px 12px;
+  background-position: 0 4px;
+  animation: liquidFlow 3s linear infinite;
+  opacity: 0.5;
 }
 
-.piggy-bank-card__milestone {
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  width: 2px;
-  height: 6px;
-  background: rgba(255, 255, 255, 0.6);
-  border-radius: 1px;
+@keyframes liquidFlow {
+  0% {
+    background-position: 0 4px;
+  }
+
+  100% {
+    background-position: 24px 4px;
+  }
 }
 
-/* Stats Row */
+/* Stats Row - Skeuomorphic Cards (Inset Look) */
 .piggy-bank-card__stats-row {
-  display: flex;
-  align-items: center;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  padding: 1rem;
-  background: rgba(249, 115, 22, 0.03);
-  border-radius: 12px;
-}
-
-.piggy-bank-card--completed .piggy-bank-card__stats-row {
-  background: rgba(34, 197, 94, 0.03);
+  margin-top: 0.75rem;
 }
 
 .piggy-bank-card__stat-item {
+  /* Raised look for better contrast on white background */
+  background: #ffffff;
+  border-radius: 16px;
+  padding: 0.85rem 1rem;
   display: flex;
   align-items: center;
-  gap: 0.625rem;
-  flex: 1;
-  min-width: 0;
+  /* Center icon vertically */
+  gap: 0.85rem;
+  /* Soft float shadow */
+  box-shadow:
+    4px 4px 10px #e7e5e4,
+    -2px -2px 8px #ffffff;
+  border: 1px solid #f5f5f4;
 }
 
-.piggy-bank-card__stat-icon {
-  flex-shrink: 0;
-}
-
-.piggy-bank-card__stat-icon--saved {
-  color: #22c55e;
-}
-
-.piggy-bank-card__stat-icon--remaining {
-  color: #f97316;
-}
-
-.piggy-bank-card__stat-icon--days {
-  color: #6366f1;
-}
-
-.piggy-bank-card__stat-icon--overdue {
-  color: #ef4444;
+.dark .piggy-bank-card__stat-item {
+  background: #323645;
+  border-color: #3f4457;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
 
 .piggy-bank-card__stat-content {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   gap: 0.125rem;
-  min-width: 0;
 }
 
 .piggy-bank-card__stat-label {
-  font-size: 0.6875rem;
-  font-weight: 600;
-  color: #9ca3af;
+  font-size: 0.65rem;
+  font-weight: 700;
+  color: #a8a29e;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  line-height: 1;
+}
+
+.dark .piggy-bank-card__stat-label {
+  text-shadow: none;
 }
 
 .piggy-bank-card__stat-value {
-  font-size: 0.9375rem;
+  font-family: 'Outfit', sans-serif;
   font-weight: 700;
-  color: #374151;
-  font-family: 'Outfit', system-ui, sans-serif;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  color: #57534e;
+  font-size: 0.95rem;
+  line-height: 1.1;
 }
 
-.piggy-bank-card__stat-value--saved {
-  color: #16a34a;
-}
-
-.piggy-bank-card__stat-value--remaining {
-  color: #ea580c;
-}
-
-.piggy-bank-card__stat-value--positive {
-  color: #16a34a;
-}
-
-.piggy-bank-card__stat-value--negative {
-  color: #dc2626;
+.dark .piggy-bank-card__stat-value {
+  color: #d6d3d1;
 }
 
 .piggy-bank-card__stat-divider {
-  width: 1px;
-  height: 32px;
-  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.1), transparent);
-  flex-shrink: 0;
+  display: none;
 }
 
-/* Footer / Actions */
+/* 3D Action Buttons */
 .piggy-bank-card__footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  gap: 1rem;
-  padding-top: 0.75rem;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  margin-top: 1rem;
+  position: relative;
+  /* Context for absolute menu */
 }
 
 .piggy-bank-card__quick-actions {
   display: flex;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
 .piggy-bank-card__action-btn {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.625rem 1rem;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
-  font-size: 0.875rem;
-  font-weight: 600;
+  padding: 0.75rem 1.25rem;
+  border-radius: 14px;
+  border: none;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s ease;
-  color: #6b7280;
-}
-
-.piggy-bank-card__action-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  transition: all 0.1s ease;
+  font-size: 0.9rem;
 }
 
+/* Deposit - Soft Green Clay */
 .piggy-bank-card__action-btn--deposit {
-  color: #16a34a;
-  border-color: rgba(34, 197, 94, 0.3);
-  background: rgba(220, 252, 231, 0.5);
+  background: #ecfdf5;
+  color: #059669;
+  box-shadow:
+    4px 4px 10px #d1fae5,
+    -4px -4px 10px #ffffff;
+  border: 1px solid #a7f3d0;
 }
 
-.piggy-bank-card__action-btn--deposit:hover {
-  background: rgba(220, 252, 231, 0.8);
-  border-color: #22c55e;
+.piggy-bank-card__action-btn--deposit:active {
+  transform: translateY(2px);
+  box-shadow: inset 3px 3px 6px #d1fae5;
 }
 
+/* Withdraw - Soft Orange Clay */
 .piggy-bank-card__action-btn--withdraw {
+  background: #fff7ed;
   color: #ea580c;
-  border-color: rgba(249, 115, 22, 0.3);
-  background: rgba(255, 237, 213, 0.5);
+  box-shadow:
+    4px 4px 10px #ffedd5,
+    -4px -4px 10px #ffffff;
+  border: 1px solid #fed7aa;
 }
 
-.piggy-bank-card__action-btn--withdraw:hover {
-  background: rgba(255, 237, 213, 0.8);
-  border-color: #f97316;
-}
-
-/* Menu */
-.piggy-bank-card__menu {
-  position: relative;
+.piggy-bank-card__action-btn--withdraw:active {
+  transform: translateY(2px);
+  box-shadow: inset 3px 3px 6px #ffedd5;
 }
 
+/* Menu Button */
 .piggy-bank-card__menu-btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
   background: transparent;
   border: none;
-  padding: 0.5rem;
+  color: #a8a29e;
   cursor: pointer;
-  border-radius: 8px;
-  color: #9ca3af;
-  transition: all 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: all 0.2s;
 }
 
 .piggy-bank-card__menu-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: #374151;
+  background: #f5f5f4;
+  color: #57534e;
+  border-radius: 12px;
 }
 
+/* Beautiful Dropdown Menu */
 .piggy-bank-card__menu-dropdown {
   position: absolute;
   bottom: 100%;
   right: 0;
-  margin-bottom: 0.5rem;
-  background: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
-  z-index: 100;
+  margin-bottom: 8px;
+  background: #ffffff;
+  padding: 6px;
+  border-radius: 16px;
+  box-shadow:
+    0 10px 25px -5px rgba(0, 0, 0, 0.1),
+    0 4px 10px rgba(0, 0, 0, 0.05);
+  border: 1px solid #f5f5f4;
+  z-index: 50;
   min-width: 140px;
-  overflow: hidden;
-  animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-@keyframes slideUp {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: bottom right;
 }
 
 .piggy-bank-card__menu-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 10px;
   width: 100%;
-  padding: 0.75rem 1rem;
-  background: none;
+  padding: 10px 12px;
+  background: transparent;
   border: none;
+  border-radius: 12px;
   text-align: left;
   cursor: pointer;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #374151;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: #57534e;
   transition: background 0.15s ease;
 }
 
 .piggy-bank-card__menu-item:hover {
-  background: #f9fafb;
+  background: #fafaf9;
 }
 
 .piggy-bank-card__menu-item--danger {
-  color: #dc2626;
+  color: #ef4444;
 }
 
 .piggy-bank-card__menu-item--danger:hover {
   background: #fef2f2;
 }
 
-/* Mobile */
-@media (max-width: 768px) {
-  .piggy-bank-card {
-    padding: 1.25rem;
-    gap: 1rem;
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
   }
 
-  .piggy-bank-card__name {
-    font-size: 1.125rem;
-  }
-
-  .piggy-bank-card__current-amount {
-    font-size: 1.25rem;
-  }
-
-  .piggy-bank-card__icon {
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .piggy-bank-card__stats-row {
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    padding: 0.875rem;
-  }
-
-  .piggy-bank-card__stat-item {
-    flex: 1 1 calc(50% - 0.5rem);
-    min-width: 100px;
-  }
-
-  .piggy-bank-card__stat-divider {
-    display: none;
-  }
-
-  .piggy-bank-card__footer {
-    flex-wrap: wrap;
-  }
-
-  .piggy-bank-card__quick-actions {
-    flex: 1;
-  }
-
-  .piggy-bank-card__action-btn {
-    flex: 1;
-    justify-content: center;
-    padding: 0.5rem 0.75rem;
-    font-size: 0.8125rem;
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
-@media (max-width: 480px) {
-  .piggy-bank-card__stat-item {
-    flex: 1 1 100%;
+/* Mobile */
+@media (max-width: 600px) {
+  .piggy-bank-card {
+    padding: 1.25rem;
   }
 
-  .piggy-bank-card__progress-header {
-    flex-direction: column;
-    align-items: flex-start;
+  .piggy-bank-card__stats-row {
+    grid-template-columns: 1fr;
     gap: 0.5rem;
   }
 }
\ No newline at end of file
diff --git a/src/components/budget/PiggyBankCard/PiggyBankCard.tsx b/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
index 99242ec..032bd30 100644
--- a/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
+++ b/src/components/budget/PiggyBankCard/PiggyBankCard.tsx
@@ -96,25 +96,27 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
       <div className="piggy-bank-card__header">
         <div className="piggy-bank-card__title-section">
           <div className="piggy-bank-card__icon">
+            <div className="piggy-bank-card__coin">
+              <Icon icon="solar:dollar-minimalistic-linear" width="16" />
+            </div>
             {isCompleted ? (
-              <Icon icon="solar:cup-first-bold-duotone" width="28" />
+              <Icon icon="mdi:trophy" width="34" style={{ color: '#ea580c', zIndex: 1 }} />
             ) : (
-              <Icon icon="solar:pig-money-bold-duotone" width="28" />
+              <Icon icon="mdi:piggy-bank" width="34" style={{ color: '#ea580c', zIndex: 1 }} />
             )}
           </div>
           <div className="piggy-bank-card__title-info">
-            <h3 className="piggy-bank-card__name">{piggyBank.name}</h3>
-            <div className="piggy-bank-card__meta">
-              <span className="piggy-bank-card__type">{typeLabel}</span>
-              {accountName && (
-                <>
-                  <span className="piggy-bank-card__separator">•</span>
-                  <span className="piggy-bank-card__meta-item">
-                    <Icon icon="solar:wallet-bold-duotone" width="12" className="piggy-bank-card__meta-icon" />
-                    <span className="piggy-bank-card__account">{accountName}</span>
+            <div className="piggy-bank-card__title-group">
+              <h3 className="piggy-bank-card__name">{piggyBank.name}</h3>
+              <div className="piggy-bank-card__tags">
+                <span className="piggy-bank-card__type">{typeLabel}</span>
+                {accountName && (
+                  <span className="piggy-bank-card__account-tag">
+                    <Icon icon="solar:wallet-linear" width="12" />
+                    {accountName}
                   </span>
-                </>
-              )}
+                )}
+              </div>
             </div>
           </div>
         </div>
@@ -122,25 +124,27 @@ export const PiggyBankCard: React.FC<PiggyBankCardProps> = ({
 
       {/* Beautiful Progress Section */}
       <div className="piggy-bank-card__progress-wrapper">
-        <div className="piggy-bank-card__progress-header">
-          <div className="piggy-bank-card__progress-amounts">
+        <div className="piggy-bank-card__progress-info">
+          <div className="piggy-bank-card__amount-group">
+            <span className="piggy-bank-card__label">当前存入</span>
             <span className="piggy-bank-card__current-amount privacy-mask">
               {formatCurrency(piggyBank.currentAmount, 'CNY')}
             </span>
-            <span className="piggy-bank-card__amount-separator">/</span>
-            <span className="piggy-bank-card__target-amount privacy-mask">
-              {formatCurrency(piggyBank.targetAmount, 'CNY')}
-            </span>
           </div>
-          <div className="piggy-bank-card__progress-percentage">
-            {isCompleted ? (
-              <span className="piggy-bank-card__completed-badge">
-                <Icon icon="solar:verified-check-bold" width="14" />
-                达成目标
+          <div className="piggy-bank-card__target-group">
+            <div className="piggy-bank-card__target-row">
+              <span className="piggy-bank-card__label-small">目标金额</span>
+              <span className="piggy-bank-card__target-amount privacy-mask">
+                {formatCurrency(piggyBank.targetAmount, 'CNY')}
               </span>
-            ) : (
-              <span>{progress.toFixed(1)}%</span>
-            )}
+            </div>
+            <div className="piggy-bank-card__percentage-row">
+              {isCompleted ? (
+                <span className="piggy-bank-card__completed-text">已达成!</span>
+              ) : (
+                <span className="piggy-bank-card__percentage-text">{progress.toFixed(1)}%</span>
+              )}
+            </div>
           </div>
         </div>
 
diff --git a/src/components/common/Layout/Layout.css b/src/components/common/Layout/Layout.css
index 0f3d72f..5c06852 100644
--- a/src/components/common/Layout/Layout.css
+++ b/src/components/common/Layout/Layout.css
@@ -4,79 +4,83 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  /* Background is managed by the theme system */
+  /* Background is managed by global index.css body style */
   background: transparent;
   color: var(--color-text);
+  position: relative;
 }
 
-/* App Header Styles */
+/* App Header */
 .app-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 var(--spacing-xl);
-  /* Increased horizontal padding */
 
-  /* Glassmorphism Header */
-  background: var(--glass-bg);
-  backdrop-filter: blur(24px);
-  -webkit-backdrop-filter: blur(24px);
-  border-bottom: 1px solid var(--glass-border);
-  box-shadow: var(--shadow-sm);
+  /* Floating Glass Header */
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
 
   position: sticky;
   top: 0;
-  z-index: 100;
-  height: 70px;
-  /* Taller header */
+  z-index: 90;
+  height: 72px;
   box-sizing: border-box;
-  transition: all 0.3s ease;
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+/* Scrolled state could be added via JS class if needed, but sticky works well */
+
 /* Dark Mode Header */
 .dark .app-header {
-  background: rgba(30, 32, 45, 0.7);
-  border-bottom-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  background: rgba(30, 32, 45, 0.6);
+  border-bottom-color: rgba(255, 255, 255, 0.05);
 }
 
-/* Brand Section Wrapper */
+/* Brand Section */
 .brand-wrapper {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 1.25rem;
+  text-decoration: none;
+  cursor: pointer;
+  group: brand;
 }
 
-/* Brand Logo (Independent Icon) */
+/* Brand Logo (3D Flip Effect) */
 .brand-logo {
   flex-shrink: 0;
-  width: 42px;
-  height: 42px;
+  width: 44px;
+  height: 44px;
   perspective: 1000px;
 }
 
 .brand-logo-inner {
   width: 100%;
   height: 100%;
-  /* Dynamic Gradient based on accent color */
-  background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-secondary) 100%);
-  border-radius: 12px;
+  /* Dynamic Gradient */
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+  border-radius: 14px;
   position: relative;
-  /* Dynamic Shadow */
-  box-shadow: 0 4px 12px var(--shadow-color);
-  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / contain;
+  box-shadow: 0 8px 16px -4px rgba(var(--accent-rgb), 0.4);
+  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+  /* Icon Mask */
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / 60%;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-4.5a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5V10a.5.5 0 0 1 .5-.5h4.5a.5.5 0 0 0 .5-.5V5a2 2 0 0 0-2-2H5Zm10 12v3h3v-3h-3ZM9 7h6v2H9V7Zm0 4h3v6H9v-6Z'/%3E%3C/svg%3E") no-repeat center / 60%;
+  background-color: var(--accent-primary);
+  /* Fallback */
 }
 
-/* Hover Effect: 3D Rotation */
-.brand-logo:hover .brand-logo-inner {
-  transform: rotateY(180deg);
-  /* NEW HOVER SHADOW */
-  box-shadow: var(--shadow-glow-md);
+/* Hover Effect */
+.brand-wrapper:hover .brand-logo-inner {
+  transform: rotateY(180deg) scale(1.1);
+  box-shadow: 0 12px 24px -8px rgba(var(--accent-rgb), 0.6);
 }
 
-/* Brand Text Column */
+/* Brand Text */
 .brand-text {
   display: flex;
   flex-direction: column;
@@ -86,189 +90,159 @@
 
 .app-header h1 {
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 800;
   margin: 0;
-  line-height: 1.1;
-  /* NEW GRADIENT TEXT */
-  background: linear-gradient(135deg, var(--accent-primary-hover) 0%, var(--accent-primary) 50%, var(--accent-secondary) 100%);
+  line-height: 1;
+  /* Gradient Text */
+  background: linear-gradient(135deg, var(--text-primary) 30%, var(--accent-primary) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
-  color: var(--accent-primary);
   letter-spacing: -0.5px;
-  cursor: default;
+  transition: all 0.3s ease;
+}
+
+.brand-wrapper:hover h1 {
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
-/* Remove old pseudo-element logo */
 .app-header h1::before {
   display: none;
 }
 
 .brand-slogan {
   margin: 0;
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: var(--text-secondary);
-  letter-spacing: 0.2px;
-  white-space: nowrap;
-  opacity: 0.8;
-  font-family: 'Inter', system-ui, sans-serif;
-  transition: color 0.3s;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  opacity: 0;
+  transform: translateX(-10px);
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .brand-wrapper:hover .brand-slogan {
-  color: var(--accent-primary);
   opacity: 1;
+  transform: translateX(0);
+  color: var(--accent-primary);
 }
 
 @media (max-width: 768px) {
   .brand-slogan {
     display: none;
   }
+
+  .app-header {
+    padding: 0 var(--spacing-md);
+    height: 64px;
+  }
+
+  .brand-logo {
+    width: 36px;
+    height: 36px;
+  }
+
+  .app-header h1 {
+    font-size: 1.4rem;
+  }
 }
 
-
-
-
-/* Initial State for Actions (Right Side) */
+/* Header Actions */
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 1rem;
-  /* More space between buttons */
+  gap: 0.75rem;
 }
 
-/* Common Header Button Styles */
-/* Common Header Button Styles */
+/* Header Buttons */
 .theme-toggle,
 .header-profile-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
-  /* Larger targets */
   height: 44px;
   background: transparent;
-  /* Clean default state */
-  border: none;
-  border-radius: 12px;
-  /* Softer rounded corners */
+  border: 1px solid transparent;
+  /* Prepare for border */
+  border-radius: 14px;
   cursor: pointer;
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--text-tertiary);
-  /* Muted color by default */
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  color: var(--text-secondary);
   padding: 0;
 }
 
-.theme-toggle:hover {
-  background: rgba(99, 102, 241, 0.1);
-  /* Subtle primary tint on hover */
-  color: var(--primary-color);
-  transform: translateY(-1px);
-}
-
+.theme-toggle:hover,
 .header-profile-btn:hover {
-  transform: translateY(-1px);
+  background: var(--bg-elevated);
+  color: var(--accent-primary);
+  border-color: rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  /* Soft shadow */
 }
 
 .theme-toggle:active,
 .header-profile-btn:active {
-  transform: translateY(0) scale(0.95);
-}
-
-.notification-btn {
-  position: relative;
-}
-
-.notification-badge {
-  position: absolute;
-  top: -2px;
-  right: -2px;
-  background: #ef4444;
-  color: white;
-  font-size: 0.65rem;
-  font-weight: 700;
-  min-width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 99px;
-  padding: 0 4px;
-  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
-  border: 1.5px solid var(--bg-primary);
+  transform: scale(0.95);
 }
 
 /* Avatar Styles */
 .header-avatar-img {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  /* Soft square */
   object-fit: cover;
   border: 2px solid white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  transition: all 0.2s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
 }
 
 .header-profile-btn:hover .header-avatar-img {
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
-  border-color: var(--primary-light);
+  transform: scale(1.1);
+  box-shadow: 0 8px 16px rgba(var(--accent-rgb), 0.2);
+  border-color: var(--accent-primary);
 }
 
 .header-avatar-placeholder {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #e0e7ff 0%, #f3e8ff 100%);
+  width: 40px;
+  height: 40px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-elevated) 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--primary-color);
-  border: 2px solid white;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease;
+  color: var(--accent-primary);
+  font-weight: 800;
+  border: 2px solid rgba(255, 255, 255, 0.5);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
 }
 
 .header-profile-btn:hover .header-avatar-placeholder {
-  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
-  background: linear-gradient(135deg, #c7d2fe 0%, #e9d5ff 100%);
+  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+  color: white;
+  box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.3);
+  transform: scale(1.1) rotate(5deg);
 }
 
-.header-avatar-initial {
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-/* Theme Icons */
-.theme-icon {
-  transition: color 0.3s ease;
-}
-
-.theme-icon.sun {
-  color: #f59e0b;
-  /* Amber */
-}
-
-.theme-icon.moon {
-  color: #6366f1;
-  /* Indigo */
-}
-
-/* App Body - Flex container for nav and main */
+/* App Body */
 .app-body {
   display: flex;
   flex-direction: column;
   flex: 1;
   min-height: 0;
-  /* Allow flex children to scroll */
 }
 
 .app-main {
   flex: 1;
   overflow-y: auto;
   padding: var(--spacing-md);
-  padding-bottom: calc(80px + var(--spacing-md));
+  padding-bottom: calc(88px + var(--spacing-md));
   /* Space for mobile nav */
   width: 100%;
   box-sizing: border-box;
@@ -276,95 +250,68 @@
   margin: 0 auto;
 }
 
-/* Desktop/Tablet - Side by side layout */
+/* Desktop/Tablet Layout */
 @media (min-width: 768px) {
   .app-body {
     flex-direction: row;
-    height: calc(100vh - 70px);
+    height: calc(100vh - 72px);
     /* Full height minus header */
     overflow: hidden;
-    /* Prevent body scroll, force main to scroll */
   }
 
-  /* Zen Mode Overrides */
+  /* Zen Mode */
   .app-layout.zen-mode .app-body {
     height: 100vh;
   }
 
   .app-main {
     flex: 1;
-    padding: var(--spacing-lg);
-    padding-bottom: var(--spacing-lg);
+    padding: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
     overflow-y: auto;
-    /* Internal scrolling */
     height: 100%;
-    /* Ensure it takes full height of parent */
   }
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 1200px) {
   .app-main {
-    padding: var(--spacing-xl);
+    padding: 2.5rem;
+    max-width: 1400px;
+    /* Limit content width on very large screens */
   }
 }
 
-@media (min-width: 1440px) {
-  .app-main {
-    padding: var(--spacing-xl);
-  }
-}
-
-@media (min-width: 1920px) {
-  .app-main {
-    max-width: 1920px;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-/* Reduced motion */
-@media (prefers-reduced-motion: reduce) {
-
-  .app-main,
-  .theme-toggle,
-  .app-header {
-    transition: none;
-  }
-}
-
-/* Zen Mode Specific Styles */
+/* Zen Mode */
 .app-layout.zen-mode .app-main {
   max-width: 900px;
   margin: 0 auto;
-  padding-top: 4rem;
-  /* Give some breathing room */
+  padding-top: 5rem;
 }
 
 .zen-exit-btn {
   position: fixed;
-  top: 1rem;
-  right: 1.5rem;
+  top: 1.5rem;
+  right: 2rem;
   z-index: 200;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: var(--glass-bg);
+  padding: 0.75rem 1.25rem;
+  background: rgba(255, 255, 255, 0.8);
   backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
   border-radius: 99px;
   color: var(--text-secondary);
   font-size: 0.9rem;
-  font-weight: 500;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: var(--glass-shadow);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: var(--shadow-lg);
 }
 
 .zen-exit-btn:hover {
-  background: var(--bg-elevated);
-  transform: translateY(-1px);
-  color: var(--text-primary);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  background: white;
+  transform: translateY(-2px);
+  color: var(--color-primary);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/src/components/common/Navigation/Navigation.css b/src/components/common/Navigation/Navigation.css
index 6f0e8ab..d724fd8 100644
--- a/src/components/common/Navigation/Navigation.css
+++ b/src/components/common/Navigation/Navigation.css
@@ -4,37 +4,38 @@
 
 /* CSS Variables for navigation width */
 :root {
-  --nav-width: 240px;
-  --nav-width-collapsed: 80px;
-  --nav-transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-  /* Bouncy spring-like */
+  --nav-width: 260px;
+  /* Slightly wider for modern feel */
+  --nav-width-collapsed: 88px;
+  --nav-transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  /* Smoother bezier */
 }
 
-/* Hidden state for mobile scroll */
+/* Hidden state */
 .navigation--hidden {
   transform: translateY(100%);
 }
 
 .navigation {
-  background: rgba(255, 255, 255, 0.7);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(255, 255, 255, 0.65);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
   border-top: 1px solid rgba(255, 255, 255, 0.5);
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 100;
-  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05);
   padding-bottom: env(safe-area-inset-bottom);
   transition: transform 0.3s ease;
 }
 
 /* Dark Mode Mobile Nav */
 .dark .navigation {
-  background: rgba(30, 32, 45, 0.85);
-  border-top-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);
+  background: rgba(30, 32, 45, 0.7);
+  border-top-color: rgba(255, 255, 255, 0.05);
+  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
 }
 
 .navigation-toggle {
@@ -47,7 +48,7 @@
   align-items: center;
   list-style: none;
   margin: 0;
-  padding: 0.75rem 0;
+  padding: 0.75rem 0.5rem;
   max-width: 500px;
   margin: 0 auto;
 }
@@ -66,8 +67,8 @@
   padding: 0.5rem;
   text-decoration: none;
   color: var(--text-tertiary);
-  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
-  border-radius: 16px;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  border-radius: 20px;
   min-width: 64px;
   position: relative;
   gap: 4px;
@@ -79,31 +80,19 @@
 
 .navigation-link:hover {
   color: var(--text-primary);
-  background-color: rgba(255, 255, 255, 0.5);
-  transform: translateY(-2px);
-}
-
-.navigation-link:focus {
-  outline: none;
+  background-color: rgba(255, 255, 255, 0.4);
 }
 
 .navigation-link--active {
   color: var(--accent-primary);
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
 }
 
-.navigation-link--active::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 32px;
-  height: 4px;
-  background: var(--accent-primary);
-  border-radius: 0 0 4px 4px;
-  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.4);
-  display: none;
-  /* Only for desktop sidebar usually, but hiding here */
+.navigation-link--active .navigation-icon {
+  transform: translateY(-2px);
+  filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.2));
+  color: var(--accent-primary);
 }
 
 /* Icon Styles */
@@ -119,18 +108,14 @@
   height: 24px;
 }
 
-.navigation-link--active .navigation-icon {
-  transform: translateY(-2px);
-  filter: drop-shadow(0 4px 8px rgba(var(--accent-rgb), 0.3));
-}
-
 .navigation-label {
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 600;
   text-align: center;
   white-space: nowrap;
   letter-spacing: 0.02em;
   transition: opacity 0.2s;
+  font-family: 'Outfit', sans-serif;
 }
 
 /* Desktop/Tablet - Side Navigation */
@@ -144,25 +129,24 @@
     height: 100%;
     position: relative;
     border-right: 1px solid rgba(255, 255, 255, 0.4);
-    padding: 2.5rem 1.25rem;
+    padding: 2.5rem 1.5rem;
     transition: width var(--nav-transition), min-width var(--nav-transition);
-    background: rgba(255, 255, 255, 0.6);
-    /* Translucent sidebar */
+    background: rgba(255, 255, 255, 0.5);
+    /* More transparent sidebar */
     backdrop-filter: blur(24px);
     z-index: 50;
     overflow-y: auto;
-    box-shadow: 5px 0 30px -10px rgba(0, 0, 0, 0.05);
+    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.2);
+    /* Subtle divider instead of shadow */
     border-top: none;
   }
 
   /* Dark Mode Desktop Sidebar */
   .dark .navigation {
-    background: rgba(30, 32, 45, 0.6);
-    border-right-color: rgba(255, 255, 255, 0.08);
-    box-shadow: 5px 0 30px -10px rgba(0, 0, 0, 0.3);
+    background: rgba(30, 32, 45, 0.5);
+    border-right-color: rgba(255, 255, 255, 0.05);
   }
 
-  /* Reset hidden state for sidebar */
   .navigation--hidden {
     transform: none;
   }
@@ -172,15 +156,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     margin: 0 0 2rem auto;
-    /* Align right */
-    background: rgba(255, 255, 255, 0.5);
-    border: 1px solid rgba(255, 255, 255, 0.6);
-    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 12px;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s ease;
     flex-shrink: 0;
     color: var(--text-secondary);
   }
@@ -188,15 +171,16 @@
   .navigation-toggle:hover {
     background: white;
     color: var(--text-primary);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
     transform: scale(1.05);
   }
 
+  /* List Layout */
   .navigation-list {
     flex-direction: column;
     justify-content: flex-start;
     padding: 0;
-    gap: 0.75rem;
+    gap: 0.5rem;
     max-width: none;
     width: 100%;
   }
@@ -206,6 +190,7 @@
     justify-content: stretch;
   }
 
+  /* Link Styles - Premium Capsule */
   .navigation-link {
     flex-direction: row;
     justify-content: flex-start;
@@ -213,58 +198,50 @@
     padding: 1rem 1.25rem;
     min-width: auto;
     margin: 0;
-    border-radius: 16px;
+    border-radius: 18px;
     gap: 1rem;
     color: var(--text-secondary);
     font-weight: 600;
     background: transparent;
     transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border: 1px solid transparent;
   }
 
-  /* Hover State */
   .navigation-link:hover {
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.5);
     color: var(--text-primary);
     transform: translateX(4px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+    border-color: rgba(255, 255, 255, 0.3);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
   }
 
-  .dark .navigation-link:hover {
-    background: rgba(255, 255, 255, 0.08);
-    color: white;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  }
-
-  /* Active State - Premium Capsule Style */
+  /* Active State - Gradient & Glow */
   .navigation-link--active {
     background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
     color: white;
-    box-shadow: 0 8px 20px -4px rgba(var(--accent-rgb), 0.4);
-    border: none;
+    box-shadow: 0 8px 25px -5px rgba(var(--accent-rgb), 0.5);
+    border-color: transparent;
   }
 
   .navigation-link--active:hover {
     transform: translateX(4px) scale(1.02);
     background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
+    /* Maintain gradient */
     color: white;
-  }
-
-  .navigation-link--active::before {
-    display: none;
-  }
-
-  /* Icon Styles */
-  .navigation-icon {
-    width: 22px;
-    height: 22px;
-    margin: 0;
-    opacity: 0.8;
+    box-shadow: 0 12px 30px -8px rgba(var(--accent-rgb), 0.6);
   }
 
   .navigation-link--active .navigation-icon {
-    opacity: 1;
+    color: white;
+    /* Force white icon on active */
     transform: none;
-    filter: none;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+
+  /* Icon Size */
+  .navigation-icon {
+    width: 24px;
+    height: 24px;
   }
 
   .navigation-label {
@@ -272,6 +249,7 @@
     text-align: left;
     white-space: nowrap;
     opacity: 1;
+    font-weight: 600;
   }
 
   /* Collapsed state */
@@ -287,6 +265,10 @@
   .navigation--collapsed .navigation-link {
     justify-content: center;
     padding: 1rem 0;
+    width: 56px;
+    height: 56px;
+    margin: 0 auto;
+    border-radius: 16px;
   }
 
   .navigation--collapsed .navigation-label {
@@ -295,6 +277,11 @@
     overflow: hidden;
     position: absolute;
   }
+
+  .navigation--collapsed .navigation-link:hover {
+    transform: translateY(-2px);
+    /* Vertical hover for collapsed */
+  }
 }
 
 /* Mobile Visibility Utilities */
@@ -324,22 +311,20 @@
   position: fixed;
   bottom: 90px;
   right: 16px;
-  width: 200px;
-  background: rgba(255, 255, 255, 0.85);
+  width: 220px;
+  background: var(--glass-panel-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 24px;
-  box-shadow:
-    0 20px 40px -10px rgba(0, 0, 0, 0.15),
-    inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--glass-border);
+  border-radius: 28px;
+  box-shadow: var(--shadow-xl);
   opacity: 0;
   transform: translateY(20px) scale(0.9);
   pointer-events: none;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 101;
   transform-origin: bottom right;
-  padding: 0.5rem;
+  padding: 0.75rem;
 }
 
 .mobile-menu-popup--open {
@@ -354,49 +339,34 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(4px);
   z-index: 100;
   display: block;
 }
 
-.mobile-menu-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.mobile-menu-item {
-  margin-bottom: 2px;
-}
-
 .mobile-menu-link {
   display: flex;
   align-items: center;
-  padding: 12px 16px;
+  padding: 14px 16px;
   text-decoration: none;
   color: var(--text-primary);
-  border-radius: 16px;
+  border-radius: 20px;
   transition: all 0.2s;
-  font-size: 0.95rem;
-  font-weight: 500;
+  font-size: 1rem;
+  font-weight: 600;
   gap: 12px;
+  margin-bottom: 4px;
 }
 
 .mobile-menu-link:hover,
 .mobile-menu-link--active {
-  background: rgba(var(--accent-rgb), 0.1);
-  color: var(--accent-primary);
+  background: var(--accent-primary);
+  color: white;
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
 }
 
-.mobile-menu-icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-}
-
-/* Desktop/Tablet - Side Navigation Overrides */
+/* Desktop Overrides */
 @media (min-width: 768px) {
   .navigation-item--desktop-only {
     display: flex;
diff --git a/src/components/home/DailyInsightCard/DailyInsightCard.css b/src/components/home/DailyInsightCard/DailyInsightCard.css
index e2a5145..6049178 100644
--- a/src/components/home/DailyInsightCard/DailyInsightCard.css
+++ b/src/components/home/DailyInsightCard/DailyInsightCard.css
@@ -1,46 +1,54 @@
 /* Daily Insight Card - Bento Style */
 .daily-insight-card {
-    /* Inherits basis from .bento-card if applied, but defining specific overrides here */
     height: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
-    /* Specific styling for the Insight within Bento */
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
+    /* Super Premium Translucent Glass */
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow:
+        0 10px 30px -10px rgba(0, 0, 0, 0.05),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+    border-radius: 32px;
+    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 /* Dark Mode Override */
 .dark .daily-insight-card {
-    background: linear-gradient(135deg, rgba(30, 32, 45, 0.9), rgba(30, 30, 35, 0.7));
+    background: linear-gradient(135deg, rgba(30, 32, 45, 0.5), rgba(30, 30, 35, 0.3));
+    border-color: rgba(255, 255, 255, 0.05);
 }
 
 /* AI Variant Styling */
 .daily-insight-card--ai {
-    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(254, 252, 248, 0.9));
-    border-color: rgba(245, 158, 11, 0.3);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 252, 235, 0.4));
+    border-color: rgba(245, 158, 11, 0.2);
     box-shadow:
-        0 10px 40px -10px rgba(245, 158, 11, 0.1),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.8);
+        0 15px 40px -10px rgba(245, 158, 11, 0.15),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
 }
 
 .dark .daily-insight-card--ai {
-    background: linear-gradient(135deg, rgba(35, 40, 50, 0.9), rgba(30, 35, 40, 0.8));
-    border-color: rgba(245, 158, 11, 0.2);
-    box-shadow:
-        0 10px 40px -10px rgba(245, 158, 11, 0.1),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    background: linear-gradient(135deg, rgba(35, 40, 50, 0.6), rgba(40, 35, 30, 0.4));
+    border-color: rgba(245, 158, 11, 0.15);
 }
 
 .daily-insight-card--ai:hover {
-    border-color: rgba(245, 158, 11, 0.5);
+    transform: translateY(-4px) scale(1.01);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6), rgba(255, 250, 240, 0.5));
+    border-color: rgba(245, 158, 11, 0.4);
     box-shadow:
-        0 20px 50px -12px rgba(245, 158, 11, 0.15),
-        inset 0 0 0 1px rgba(255, 255, 255, 0.9);
+        0 25px 50px -12px rgba(245, 158, 11, 0.2),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
 }
 
 .dark .daily-insight-card--ai:hover {
+    background: linear-gradient(135deg, rgba(40, 45, 55, 0.7), rgba(45, 40, 35, 0.5));
     box-shadow:
-        0 20px 50px -12px rgba(245, 158, 11, 0.15),
+        0 25px 50px -12px rgba(245, 158, 11, 0.15),
         inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
 
diff --git a/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.css b/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.css
index f68a489..dd527b2 100644
--- a/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.css
+++ b/src/components/transaction/RecurringTransactionForm/RecurringTransactionForm.css
@@ -1,16 +1,19 @@
 /**
- * RecurringTransactionForm Component Styles
- * detailed glassmorphism design
+ * RecurringTransactionForm Component Styles - Premium Glass
  */
 
 .recurring-transaction-form {
   display: flex;
   flex-direction: column;
   height: 100%;
-  border-radius: var(--radius-xl);
+  border-radius: 20px;
   overflow: hidden;
-  box-shadow: var(--shadow-xl);
-  /* glass-panel class handles background and backdrop-filter */
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.25),
+    0 0 0 1px var(--glass-border);
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
 
 /* Header */
@@ -18,34 +21,36 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 1.5rem;
+  padding: 1.5rem 2rem;
   border-bottom: 1px solid var(--glass-border);
-  background: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .recurring-transaction-form__title-wrapper {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
 .recurring-transaction-form__icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 50%;
-  background: var(--color-primary-lighter);
-  color: var(--color-primary);
-  border: 1px solid rgba(217, 119, 6, 0.2);
+  width: 48px;
+  height: 48px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-elevated));
+  color: var(--accent-primary);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .recurring-transaction-form__title {
   margin: 0;
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--color-text);
+  font-size: 1.5rem;
+  font-weight: 800;
+  font-family: 'Outfit', sans-serif;
+  color: var(--text-primary);
   letter-spacing: -0.02em;
 }
 
@@ -53,60 +58,65 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: 36px;
+  height: 36px;
   padding: 0;
   border: none;
-  background: transparent;
-  color: var(--color-text-secondary);
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-secondary);
   cursor: pointer;
   border-radius: 50%;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .recurring-transaction-form__close-btn:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--color-text);
-  transform: rotate(90deg);
+  background: var(--color-error);
+  color: white;
+  transform: rotate(90deg) scale(1.1);
 }
 
 /* Body */
 .recurring-transaction-form__body {
   flex: 1;
   overflow-y: auto;
-  padding: 1.5rem;
-  /* Scrollbar styling is handled by custom-scrollbar class or browser default if not present */
+  padding: 2rem;
 }
 
 /* Section */
 .recurring-transaction-form__section {
-  margin-bottom: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 /* Field */
 .recurring-transaction-form__field {
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
 }
 
 .recurring-transaction-form__label {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  font-size: 0.875rem;
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
   font-weight: 600;
-  color: var(--color-text);
+  color: var(--text-secondary);
+  letter-spacing: 0.02em;
 }
 
 .recurring-transaction-form__label-icon {
   display: flex;
   align-items: center;
-  color: var(--color-text-secondary);
+  color: var(--accent-primary);
+  opacity: 0.8;
 }
 
 .recurring-transaction-form__required {
   color: var(--color-error);
   margin-left: 0.15rem;
+  font-size: 1.25rem;
+  line-height: 0;
+  position: relative;
+  top: 4px;
 }
 
 /* Type toggle */
@@ -114,302 +124,298 @@
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
-  background: rgba(255, 255, 255, 0.3);
-  padding: 0.25rem;
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--glass-border);
+  background: var(--bg-elevated);
+  padding: 0.5rem;
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
 }
 
 .recurring-transaction-form__type-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.625rem;
-  padding: 0.75rem;
+  gap: 0.75rem;
+  padding: 1rem;
   border: 1px solid transparent;
-  border-radius: var(--radius-md);
+  border-radius: 16px;
   background: transparent;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   position: relative;
   overflow: hidden;
 }
 
 .recurring-transaction-form__type-btn:hover {
-  background: rgba(255, 255, 255, 0.5);
+  background: rgba(0, 0, 0, 0.03);
 }
 
 .recurring-transaction-form__type-btn.active {
-  background: #fff;
-  box-shadow: var(--shadow-sm);
-  border-color: var(--glass-border);
+  background: var(--bg-primary);
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
+  border-color: transparent;
+  transform: scale(1.02);
 }
 
 .recurring-transaction-form__type-btn--expense.active {
-  color: var(--color-error);
-  border-color: rgba(220, 38, 38, 0.2);
-}
-
-.recurring-transaction-form__type-btn--expense.active .recurring-transaction-form__type-icon-wrapper {
-  background: var(--color-error-light);
-  color: var(--color-error);
+  background: #fef2f2;
 }
 
 .recurring-transaction-form__type-btn--income.active {
-  color: var(--color-success);
-  border-color: rgba(5, 150, 105, 0.2);
+  background: #f0fdf4;
 }
 
-.recurring-transaction-form__type-btn--income.active .recurring-transaction-form__type-icon-wrapper {
-  background: var(--color-success-light);
-  color: var(--color-success);
+/* Dark mode overrides for type toggle backgrounds */
+[data-theme="dark"] .recurring-transaction-form__type-btn--expense.active {
+  background: rgba(239, 68, 68, 0.1);
 }
 
+[data-theme="dark"] .recurring-transaction-form__type-btn--income.active {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+
 .recurring-transaction-form__type-icon-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2rem;
-  height: 2rem;
+  width: 2.25rem;
+  height: 2.25rem;
   border-radius: 50%;
   background: rgba(0, 0, 0, 0.05);
-  color: var(--color-text-secondary);
   transition: all 0.3s ease;
 }
 
 .recurring-transaction-form__type-label {
-  font-size: 0.9375rem;
-  font-weight: 600;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+}
+
+.recurring-transaction-form__type-btn.active .recurring-transaction-form__type-label {
+  color: var(--text-primary);
+}
+
+.recurring-transaction-form__type-btn--expense.active .recurring-transaction-form__type-label {
+  color: var(--color-error);
+}
+
+.recurring-transaction-form__type-btn--income.active .recurring-transaction-form__type-label {
+  color: var(--color-success);
 }
 
 .recurring-transaction-form__type-check {
   position: absolute;
-  top: 0.375rem;
-  right: 0.375rem;
+  top: 10px;
+  right: 10px;
   color: currentColor;
+  opacity: 0;
+  animation: fadeIn 0.3s forwards;
 }
 
 /* Amount row */
 .recurring-transaction-form__amount-row {
   display: flex;
-  gap: 0.75rem;
+  gap: 1rem;
   align-items: stretch;
 }
 
 .recurring-transaction-form__currency-select {
   flex-shrink: 0;
-  width: 5.5rem;
-  padding: 0 0.5rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  background: var(--glass-bg);
-  color: var(--color-text);
-  font-size: 0.875rem;
-  font-weight: 600;
+  width: 7rem;
+  padding: 0 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: 1rem;
+  font-weight: 700;
   cursor: pointer;
   transition: all 0.2s ease;
   text-align: center;
-}
-
-.recurring-transaction-form__currency-select:hover {
-  background: #fff;
-  border-color: var(--color-primary);
+  appearance: none;
 }
 
 .recurring-transaction-form__currency-select:focus {
   outline: none;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-lighter);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
 }
 
 .recurring-transaction-form__amount-input {
   flex: 1;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  background: var(--glass-bg);
-  color: var(--color-text);
-  font-size: 1.5rem;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: 1.75rem;
   font-weight: 700;
-  letter-spacing: -0.02em;
+  font-family: 'Outfit', sans-serif;
+  letter-spacing: -0.03em;
   transition: all 0.2s ease;
 }
 
-.recurring-transaction-form__amount-input:hover {
-  background: #fff;
-  border-color: var(--color-primary);
-}
-
 .recurring-transaction-form__amount-input:focus {
   outline: none;
-  background: #fff;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 4px var(--color-primary-lighter);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  box-shadow:
+    0 0 0 4px rgba(var(--accent-rgb), 0.15),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  transform: translateY(-2px);
 }
 
-/* Input & Select */
+/* Input & Select Generic */
 .recurring-transaction-form__input,
 .recurring-transaction-form__select {
   width: 100%;
-  padding: 0.625rem 0.875rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  background: var(--glass-bg);
-  color: var(--color-text);
-  font-size: 0.9375rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: 1rem;
   transition: all 0.2s ease;
 }
 
-.recurring-transaction-form__input:hover,
-.recurring-transaction-form__select:hover {
-  background: #fff;
-  border-color: var(--color-primary-dark);
-}
-
 .recurring-transaction-form__input:focus,
 .recurring-transaction-form__select:focus {
   outline: none;
-  background: #fff;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-lighter);
-}
-
-.recurring-transaction-form__select option,
-.recurring-transaction-form__currency-select option {
-  background-color: var(--bg-elevated);
-  color: var(--text-primary);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
 }
 
+/* Error States */
 .recurring-transaction-form__input--error,
 .recurring-transaction-form__select--error {
   border-color: var(--color-error);
-  background: var(--color-error-light);
+  background: #fef2f2;
 }
 
-.recurring-transaction-form__input--error:focus,
-.recurring-transaction-form__select--error:focus {
-  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+[data-theme="dark"] .recurring-transaction-form__input--error,
+[data-theme="dark"] .recurring-transaction-form__select--error {
+  background: rgba(239, 68, 68, 0.1);
 }
 
 /* Textarea */
 .recurring-transaction-form__textarea {
   width: 100%;
-  padding: 0.75rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  background: var(--glass-bg);
-  color: var(--color-text);
-  font-size: 0.9375rem;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 14px;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  font-size: 1rem;
   font-family: inherit;
   resize: vertical;
   transition: all 0.2s ease;
-  min-height: 5rem;
-}
-
-.recurring-transaction-form__textarea:hover {
-  background: #fff;
-  border-color: var(--color-primary);
+  min-height: 6rem;
 }
 
 .recurring-transaction-form__textarea:focus {
   outline: none;
-  background: #fff;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-lighter);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
 }
 
 /* Frequency grid */
 .recurring-transaction-form__frequency-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 0.75rem;
+  gap: 1rem;
 }
 
 .recurring-transaction-form__frequency-btn {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem;
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-lg);
-  background: var(--glass-bg);
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 16px;
+  background: var(--bg-elevated);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
   text-align: left;
 }
 
 .recurring-transaction-form__frequency-btn:hover {
-  background: #fff;
-  border-color: var(--color-primary);
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }
 
 .recurring-transaction-form__frequency-btn--selected {
-  background: #fff;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 2px var(--color-primary-lighter);
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
+  border-color: var(--accent-primary);
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
 }
 
 .recurring-transaction-form__frequency-btn--selected .recurring-transaction-form__frequency-icon {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
+  transform: scale(1.1);
 }
 
 .recurring-transaction-form__frequency-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: var(--radius-md);
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-secondary);
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 12px;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
   flex-shrink: 0;
-  transition: all 0.2s ease;
+  transition: all 0.3s ease;
+  font-size: 1.25rem;
 }
 
 .recurring-transaction-form__frequency-content {
   display: flex;
   flex-direction: column;
+  gap: 2px;
 }
 
 .recurring-transaction-form__frequency-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--color-text);
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
 .recurring-transaction-form__frequency-desc {
-  font-size: 0.75rem;
-  color: var(--color-text-secondary);
-  line-height: 1.2;
+  font-size: 0.8rem;
+  color: var(--text-secondary);
 }
 
 /* Row for dates */
 .recurring-transaction-form__row {
   display: flex;
-  gap: 1rem;
+  gap: 1.5rem;
 }
 
 .recurring-transaction-form__row>* {
   flex: 1;
 }
 
-/* Checkbox */
 /* Switch */
 .recurring-transaction-form__switch-row {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 0.5rem 0.25rem;
+  background: var(--bg-elevated);
+  border-radius: 16px;
+  padding: 1rem;
 }
 
 .recurring-transaction-form__switch {
   position: relative;
   display: inline-block;
-  width: 3.25rem;
-  height: 1.75rem;
+  width: 3.5rem;
+  height: 2rem;
 }
 
 .recurring-transaction-form__switch input {
@@ -425,19 +431,18 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--color-bg-tertiary);
+  background-color: var(--bg-secondary);
   transition: .4s;
   border-radius: 34px;
-  border: 1px solid var(--glass-border);
 }
 
 .recurring-transaction-form__slider:before {
   position: absolute;
   content: "";
-  height: 1.25rem;
-  width: 1.25rem;
+  height: 1.5rem;
+  width: 1.5rem;
   left: 0.25rem;
-  bottom: 0.1875rem;
+  bottom: 0.25rem;
   background-color: white;
   transition: .4s;
   border-radius: 50%;
@@ -445,12 +450,7 @@
 }
 
 input:checked+.recurring-transaction-form__slider {
-  background-color: var(--color-success);
-  border-color: var(--color-success);
-}
-
-input:focus+.recurring-transaction-form__slider {
-  box-shadow: 0 0 1px var(--color-success);
+  background-color: var(--accent-primary);
 }
 
 input:checked+.recurring-transaction-form__slider:before {
@@ -458,83 +458,67 @@ input:checked+.recurring-transaction-form__slider:before {
 }
 
 .recurring-transaction-form__switch-label {
-  font-weight: 500;
-  color: var(--color-text);
-  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  font-size: 1rem;
 }
 
 /* Error message */
 .recurring-transaction-form__error {
   display: flex;
   align-items: center;
-  margin-top: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: 500;
+  margin-top: 0.5rem;
+  font-size: 0.8rem;
+  font-weight: 600;
   color: var(--color-error);
-}
-
-/* Hint */
-.recurring-transaction-form__hint {
-  display: block;
-  margin-top: 0.375rem;
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-}
-
-/* Loading & Empty */
-.recurring-transaction-form__loading,
-.recurring-transaction-form__empty {
-  padding: 2rem;
-  text-align: center;
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  background: rgba(0, 0, 0, 0.02);
-  border-radius: var(--radius-lg);
-  border: 1px dashed var(--glass-border);
+  animation: slideDownFade 0.2s ease-out;
 }
 
 /* Preview */
 .recurring-transaction-form__preview {
   margin-top: 2rem;
-  padding: 1.25rem;
-  background: var(--glass-bg);
-  /* glass-card included in JSX */
+  padding: 1.5rem;
+  background: var(--bg-gradient);
+  border-radius: 20px;
+  border: 1px solid var(--border-color);
 }
 
 .recurring-transaction-form__preview-title {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  margin: 0 0 0.5rem 0;
-  font-size: 0.9375rem;
-  font-weight: 600;
-  color: var(--color-text);
+  gap: 0.75rem;
+  margin: 0 0 0.75rem 0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
 }
 
 .recurring-transaction-form__preview-desc {
   margin: 0 0 1rem 0;
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  color: var(--text-secondary);
 }
 
 .recurring-transaction-form__preview-list {
   margin: 0;
   padding: 0;
   list-style: none;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: var(--radius-md);
+  background: var(--bg-primary);
+  border-radius: 12px;
   overflow: hidden;
+  border: 1px solid var(--border-color);
 }
 
 .recurring-transaction-form__preview-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
-  font-size: 0.875rem;
-  color: var(--color-text);
-  font-family: monospace;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  font-size: 0.95rem;
+  color: var(--text-primary);
+  font-family: 'JetBrains Mono', 'Courier New', monospace;
+  font-weight: 500;
 }
 
 .recurring-transaction-form__preview-item:last-child {
@@ -542,20 +526,19 @@ input:checked+.recurring-transaction-form__slider:before {
 }
 
 .preview-dot {
-  width: 0.5rem;
-  height: 0.5rem;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background: var(--color-primary);
-  opacity: 0.7;
+  background: var(--accent-primary);
 }
 
 /* Actions */
 .recurring-transaction-form__actions {
   display: flex;
-  gap: 1rem;
-  padding: 1.5rem 1.5rem;
+  gap: 1.25rem;
+  padding: 1.5rem 2rem;
   border-top: 1px solid var(--glass-border);
-  background: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.05);
 }
 
 .recurring-transaction-form__btn {
@@ -563,49 +546,62 @@ input:checked+.recurring-transaction-form__slider:before {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem;
-  padding: 0.875rem 1.5rem;
+  gap: 0.625rem;
+  padding: 1rem 1.5rem;
   border: none;
-  border-radius: var(--radius-full);
-  font-size: 0.9375rem;
-  font-weight: 600;
+  border-radius: 16px;
+  font-size: 1rem;
+  font-weight: 700;
   cursor: pointer;
-  transition: all 0.3s ease;
-  box-shadow: var(--shadow-sm);
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  letter-spacing: 0.01em;
 }
 
 .recurring-transaction-form__btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
-  transform: none !important;
-  box-shadow: none !important;
 }
 
 .recurring-transaction-form__btn--primary {
   background: var(--gradient-primary);
   color: white;
-  box-shadow: 0 4px 6px rgba(217, 119, 6, 0.25);
+  box-shadow: 0 8px 20px -6px rgba(var(--accent-rgb), 0.5);
 }
 
 .recurring-transaction-form__btn--primary:hover:not(:disabled) {
-  background: var(--gradient-primary-hover);
-  transform: translateY(-2px);
-  box-shadow: 0 8px 12px rgba(217, 119, 6, 0.35);
-}
-
-.recurring-transaction-form__btn--primary:active:not(:disabled) {
-  transform: translateY(0);
+  filter: brightness(1.1);
+  transform: translateY(-3px);
+  box-shadow: 0 12px 28px -6px rgba(var(--accent-rgb), 0.6);
 }
 
 .recurring-transaction-form__btn--secondary {
-  background: #fff;
-  color: var(--color-text);
-  border: 1px solid var(--glass-border);
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
 }
 
 .recurring-transaction-form__btn--secondary:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
-  border-color: var(--color-text-muted);
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--text-primary);
+}
+
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideDownFade {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Responsive design */
diff --git a/src/components/transaction/TransactionForm/TransactionForm.css b/src/components/transaction/TransactionForm/TransactionForm.css
index 9d20e68..520b649 100644
--- a/src/components/transaction/TransactionForm/TransactionForm.css
+++ b/src/components/transaction/TransactionForm/TransactionForm.css
@@ -5,13 +5,13 @@
 .transaction-form {
   display: flex;
   flex-direction: column;
-  background: rgba(255, 255, 255, 0.75);
+  background: var(--glass-bg);
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+  border: 1px solid var(--glass-border);
   border-radius: 28px;
   width: 100%;
-  max-width: 460px;
+  max-width: 480px;
   margin: 0 auto;
   overflow: hidden;
   box-shadow:
@@ -37,12 +37,12 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem 2rem 0.75rem;
+  padding: 1.5rem 2rem 1rem;
 }
 
 .transaction-form__title {
   margin: 0;
-  font-size: 1.4rem;
+  font-size: 1.5rem;
   font-weight: 800;
   color: var(--text-primary);
   font-family: 'Outfit', sans-serif;
@@ -65,8 +65,8 @@
 }
 
 .transaction-form__close-btn:hover {
-  background: rgba(0, 0, 0, 0.08);
-  color: var(--text-primary);
+  background: var(--color-error);
+  color: white;
   transform: rotate(90deg);
 }
 
@@ -94,19 +94,19 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
   color: var(--text-tertiary);
   font-size: 0.9rem;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid rgba(0, 0, 0, 0.08);
   transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
 .transaction-form__step-label {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   color: var(--text-tertiary);
   font-weight: 600;
   transition: all 0.3s ease;
@@ -115,15 +115,15 @@
 
 /* Active Step */
 .transaction-form__step--active .transaction-form__step-number {
-  background: var(--color-primary);
+  background: var(--accent-primary);
   color: white;
-  border-color: var(--color-primary);
-  box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.3);
+  border-color: var(--accent-primary);
+  box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3);
   transform: scale(1.1);
 }
 
 .transaction-form__step--active .transaction-form__step-label {
-  color: var(--color-primary);
+  color: var(--accent-primary);
   font-weight: 700;
 }
 
@@ -140,9 +140,12 @@
 }
 
 /* Body */
+/* Added scroll behavior if content overflows */
 .transaction-form__body {
   padding: 0 2rem 2rem;
   min-height: 360px;
+  max-height: 60vh;
+  overflow-y: auto;
 }
 
 .transaction-form__step-content {
@@ -152,6 +155,14 @@
   animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
+.transaction-form__step-title {
+  margin: 0;
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  text-align: center;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;
@@ -164,13 +175,14 @@
   }
 }
 
-/* Type Toggle */
+/* Type Toggle (Step 1) */
 .transaction-form__type-toggle {
   display: flex;
-  background: rgba(0, 0, 0, 0.04);
+  background: var(--bg-elevated);
   padding: 6px;
   border-radius: 20px;
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid var(--border-color);
 }
 
 .transaction-form__type-btn {
@@ -190,67 +202,108 @@
 }
 
 .transaction-form__type-btn:hover {
+  background: rgba(0, 0, 0, 0.03);
   color: var(--text-primary);
-  background: rgba(255, 255, 255, 0.4);
 }
 
-/* Active States */
-.transaction-form__type-btn.transaction-form__type-btn--expense {
-  background: white;
+.transaction-form__type-btn--expense.transaction-form__type-btn--active,
+.transaction-form__type-btn.transaction-form__type-btn--expense:focus-within {
+  /* Handled by React state usually, checking class logic */
+}
+
+/* We need to rely on the active class applied by React */
+.transaction-form__type-btn--expense:has(.active),
+/* Assuming some way to detect active state if class is applied. React code uses string interpolation */
+.transaction-form__type-btn[class*="--expense"]:active {
+  /* CSS logic is limited here without active class on element itself in a simple way if naming is complex */
+}
+
+/* Specific button overrides based on component classes */
+button.transaction-form__type-btn--expense {
+  background: #fef2f2;
   color: var(--color-error);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
-.transaction-form__type-btn.transaction-form__type-btn--income {
-  background: white;
+[data-theme="dark"] button.transaction-form__type-btn--expense {
+  background: rgba(239, 68, 68, 0.1);
+}
+
+button.transaction-form__type-btn--income {
+  background: #f0fdf4;
   color: var(--color-success);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
+[data-theme="dark"] button.transaction-form__type-btn--income {
+  background: rgba(16, 185, 129, 0.1);
+}
+
+button.transaction-form__type-btn--transfer {
+  background: #eff6ff;
+  color: var(--accent-primary);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+[data-theme="dark"] button.transaction-form__type-btn--transfer {
+  background: rgba(59, 130, 246, 0.1);
+}
+
 /* Amount Input - Big & Bold */
 .transaction-form__amount-container {
   display: flex;
   align-items: baseline;
   justify-content: center;
-  gap: 6px;
+  gap: 8px;
   margin: 1.5rem 0 2.5rem;
   position: relative;
 }
 
+.transaction-form__currency-selector {
+  position: relative;
+}
+
 .transaction-form__currency-select {
   appearance: none;
   border: none;
   background: transparent;
-  font-size: 1.75rem;
+  font-size: 2rem;
   font-weight: 700;
   color: var(--text-secondary);
   cursor: pointer;
   padding: 0 0.5rem;
   outline: none;
   transition: color 0.2s;
+  font-family: 'Outfit', sans-serif;
 }
 
 .transaction-form__currency-select:hover {
-  color: var(--text-primary);
+  color: var(--accent-primary);
 }
 
 .transaction-form__amount-input {
   width: 100%;
   border: none;
   background: transparent;
-  font-size: 4rem;
+  font-size: 4.5rem;
   font-weight: 800;
   text-align: center;
   color: var(--text-primary);
   font-family: 'Outfit', sans-serif;
   outline: none;
   padding: 0;
-  caret-color: var(--color-primary);
-  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+  caret-color: var(--accent-primary);
+  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+  letter-spacing: -2px;
 }
 
 .transaction-form__amount-input::placeholder {
   color: rgba(0, 0, 0, 0.1);
+  font-weight: 600;
+}
+
+.transaction-form__amount-input--error {
+  color: var(--color-error);
 }
 
 .transaction-form__error {
@@ -259,14 +312,15 @@
   font-size: 0.9rem;
   font-weight: 600;
   margin-top: -1.5rem;
-  background: rgba(239, 68, 68, 0.1);
+  background: #fef2f2;
   display: inline-block;
-  padding: 4px 12px;
-  border-radius: 8px;
+  padding: 6px 16px;
+  border-radius: 12px;
   align-self: center;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
-/* Account Grid */
+/* Account Grid (Step 2) */
 .transaction-form__account-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -277,36 +331,37 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  border-radius: 18px;
-  background: rgba(255, 255, 255, 0.5);
+  padding: 16px;
+  border: 1px solid var(--border-color);
+  border-radius: 20px;
+  background: var(--bg-elevated);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
   text-align: left;
 }
 
 .transaction-form__account-btn:hover {
-  background: white;
-  transform: translateY(-2px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
+  background: var(--bg-primary);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
+  border-color: var(--accent-primary);
 }
 
 .transaction-form__account-btn--selected {
-  border-color: var(--color-primary);
-  background: rgba(var(--primary-rgb), 0.04);
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1);
+  border-color: var(--accent-primary);
+  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
+  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
 }
 
 .transaction-form__account-icon {
-  width: 40px;
-  height: 40px;
+  width: 44px;
+  height: 44px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: white;
-  border-radius: 12px;
-  font-size: 1.4rem;
+  background: var(--bg-secondary);
+  border-radius: 14px;
+  font-size: 1.5rem;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
 }
 
@@ -316,74 +371,105 @@
 }
 
 .transaction-form__account-name {
-  font-size: 0.95rem;
+  font-size: 1rem;
   font-weight: 700;
   color: var(--text-primary);
 }
 
 .transaction-form__account-balance {
-  font-size: 0.8rem;
+  font-size: 0.85rem;
   color: var(--text-secondary);
+  font-family: 'Outfit', sans-serif;
+  font-weight: 500;
 }
 
-/* Summary Card */
+/* Summary Box (Step 3) */
 .transaction-form__summary {
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
   border-radius: 20px;
   padding: 1.5rem;
+}
+
+.transaction-form__summary-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  backdrop-filter: blur(10px);
+  padding-bottom: 12px;
+  border-bottom: 1px dashed var(--border-color);
 }
 
-.transaction-form__summary-amount {
-  font-size: 1.75rem;
-  font-weight: 800;
-  font-family: 'Outfit', sans-serif;
+.transaction-form__summary-row:last-child {
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+.transaction-form__summary-label {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.transaction-form__summary-value {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  display: flex;
+  align-items: center;
 }
 
 .transaction-form__summary-value--expense {
   color: var(--color-error);
+  font-size: 1.25rem;
+  font-family: 'Outfit', sans-serif;
 }
 
 .transaction-form__summary-value--income {
   color: var(--color-success);
+  font-size: 1.25rem;
+  font-family: 'Outfit', sans-serif;
 }
 
-/* Inputs in Step 3 */
+/* Form Fields */
 .transaction-form__field {
-  margin-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
 }
 
 .transaction-form__label {
   display: block;
-  font-size: 0.9rem;
-  font-weight: 600;
-  color: var(--text-secondary);
-  margin-bottom: 0.6rem;
+  font-size: 0.95rem;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 0.75rem;
+}
+
+.transaction-form__required {
+  color: var(--color-error);
   margin-left: 4px;
 }
 
 .transaction-form__input,
 .transaction-form__textarea {
   width: 100%;
-  padding: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 1rem;
+  border: 1px solid var(--border-color);
   border-radius: 16px;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--bg-elevated);
   color: var(--text-primary);
   font-size: 1rem;
   transition: all 0.2s;
   font-family: inherit;
+  resize: none;
 }
 
 .transaction-form__input:focus,
 .transaction-form__textarea:focus {
-  background: white;
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.1);
   outline: none;
 }
 
@@ -392,9 +478,8 @@
   padding: 1.5rem 2rem;
   display: flex;
   gap: 1rem;
-  background: rgba(255, 255, 255, 0.4);
-  border-top: 1px solid rgba(0, 0, 0, 0.03);
-  backdrop-filter: blur(10px);
+  background: rgba(255, 255, 255, 0.05);
+  border-top: 1px solid var(--border-color);
 }
 
 .transaction-form__btn {
@@ -406,30 +491,31 @@
   cursor: pointer;
   border: none;
   transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  letter-spacing: 0.01em;
 }
 
 .transaction-form__btn--secondary {
-  background: rgba(255, 255, 255, 0.6);
+  background: transparent;
   color: var(--text-secondary);
-  border: 1px solid rgba(0, 0, 0, 0.03);
+  border: 1px solid var(--border-color);
 }
 
 .transaction-form__btn--secondary:hover {
-  background: white;
+  background: var(--bg-secondary);
   color: var(--text-primary);
+  border-color: var(--text-primary);
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .transaction-form__btn--primary {
-  background: var(--color-primary);
+  background: var(--gradient-primary);
   color: white;
-  box-shadow: 0 8px 20px -4px rgba(var(--primary-rgb), 0.4);
+  box-shadow: 0 8px 20px -4px rgba(var(--accent-rgb), 0.4);
 }
 
 .transaction-form__btn--primary:hover {
-  transform: translateY(-2px) scale(1.02);
-  box-shadow: 0 12px 24px -6px rgba(var(--primary-rgb), 0.5);
+  transform: translateY(-3px) scale(1.02);
+  box-shadow: 0 12px 28px -6px rgba(var(--accent-rgb), 0.5);
   filter: brightness(1.1);
 }
 
@@ -439,5 +525,7 @@
   text-align: center;
   padding: 3rem;
   color: var(--text-tertiary);
-  font-weight: 500;
+  background: var(--bg-elevated);
+  border-radius: 20px;
+  border: 1px dashed var(--border-color);
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 9acea11..2227667 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-/* Global styles */
+/* Global styles - Ultra Premium */
 @import './styles/variables.css';
 @import './styles/themes.css';
 @import './styles/animations.css';
@@ -22,7 +22,6 @@ html {
 @media (max-width: 600px) {
   html {
     font-size: 14.5px;
-    /* Scale down UI slightly for mobile */
   }
 }
 
@@ -32,23 +31,60 @@ body {
   font-family: var(--font-sans);
   line-height: var(--leading-normal);
   background-color: var(--bg-primary);
-  /* Global Subtle Mesh Gradient */
-  /* Global Subtle Mesh Gradient (Premium Warmth) */
+
+  /* Ultra Premium Aurora Background - Animated */
   background-image:
-    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.15) 0px, transparent 50%),
-    radial-gradient(at 100% 0%, rgba(30, 41, 59, 0.1) 0px, transparent 50%),
-    radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.1) 0px, transparent 50%),
-    radial-gradient(at 0% 100%, rgba(251, 191, 36, 0.12) 0px, transparent 50%);
+    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.18) 0px, transparent 50%),
+    radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
+    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.18) 0px, transparent 50%),
+    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.12) 0px, transparent 50%),
+    radial-gradient(at 50% 50%, rgba(255, 255, 255, 0.5) 0px, transparent 70%);
   background-attachment: fixed;
+  background-size: 120% 120%;
+  /* Larger to allow movement */
+  animation: aurora-gradient 20s ease-in-out infinite alternate;
+
   color: var(--text-primary);
   transition: background-color var(--duration-normal) var(--ease-in-out),
     color var(--duration-fast) var(--ease-in-out);
+
+  /* Subtle Grain Texture for reduced banding and analog feel */
+  position: relative;
 }
 
-/* Custom Scrollbar */
+/* Noise overlay */
+body::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  opacity: 0.03;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
+[data-theme="dark"] body {
+  background-image:
+    radial-gradient(at 0% 0%, rgba(217, 119, 6, 0.2) 0px, transparent 60%),
+    radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.2) 0px, transparent 60%),
+    radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.2) 0px, transparent 60%),
+    radial-gradient(at 0% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 60%);
+  animation: aurora-gradient 25s ease-in-out infinite alternate;
+}
+
+[data-theme="dark"] body::after {
+  opacity: 0.05;
+  filter: invert(1);
+}
+
+/* Hidden Scrollbar (Clean UI) */
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 0px;
+  height: 0px;
+  background: transparent;
 }
 
 ::-webkit-scrollbar-track {
@@ -56,12 +92,16 @@ body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: rgba(156, 163, 175, 0.3);
-  border-radius: 4px;
+  background: transparent;
+  display: none;
 }
 
-::-webkit-scrollbar-thumb:hover {
-  background: rgba(156, 163, 175, 0.5);
+/* Firefox Scrollbar */
+* {
+  scrollbar-width: none;
+  /* Hide scrollbar in Firefox */
+  -ms-overflow-style: none;
+  /* Hide scrollbar in IE/Edge */
 }
 
 /* Reset default styles */
@@ -73,7 +113,7 @@ h5,
 h6 {
   margin: 0;
   font-family: 'Outfit', sans-serif;
-  /* Headings use Outfit */
+  letter-spacing: -0.02em;
 }
 
 p {
@@ -115,7 +155,7 @@ button {
   outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
   box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2);
-  border-radius: 4px;
+  border-radius: 6px;
 }
 
 /* Reduced Motion */
diff --git a/src/pages/Accounts/Accounts.css b/src/pages/Accounts/Accounts.css
index d48a897..8f24c04 100644
--- a/src/pages/Accounts/Accounts.css
+++ b/src/pages/Accounts/Accounts.css
@@ -7,8 +7,8 @@
   flex-direction: column;
   gap: var(--spacing-xl);
   width: 100%;
-  animation: fadeIn 0.5s ease-out;
-  padding-bottom: 2rem;
+  animation: fadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+  padding-bottom: 3rem;
 }
 
 /* Page Header */
@@ -18,199 +18,270 @@
   align-items: flex-end;
   flex-wrap: wrap;
   gap: var(--spacing-md);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-md);
+  position: relative;
+  z-index: 2;
 }
 
 .accounts-page__title {
   margin: 0;
   font-family: 'Outfit', sans-serif;
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-weight: 800;
-  color: var(--color-text);
-  letter-spacing: -1px;
+  color: var(--text-primary);
+  letter-spacing: -1.5px;
   line-height: 1.1;
+  background: linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .accounts-page__subtitle {
   margin: 0;
-  color: var(--color-text-secondary);
-  font-size: 1rem;
-  margin-top: 0.25rem;
+  color: var(--text-secondary);
+  font-size: 1.1rem;
+  margin-top: 0.5rem;
+  font-weight: 500;
+  opacity: 0.8;
 }
 
 .accounts-page__actions {
   display: flex;
-  gap: var(--spacing-sm);
+  gap: 1rem;
 }
 
 .accounts-page__btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-sm);
-  padding: 0.6rem 1.25rem;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
   border: none;
-  border-radius: var(--radius-full);
-  font-size: 0.875rem;
+  border-radius: 16px;
+  font-size: 0.95rem;
   font-weight: 600;
   cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 100px;
+  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  min-width: 110px;
+  position: relative;
+  overflow: hidden;
 }
 
 .accounts-page__btn:disabled {
-  opacity: 0.5;
+  opacity: 0.6;
   cursor: not-allowed;
+  filter: grayscale(0.8);
 }
 
 .accounts-page__btn--create {
   background: var(--accent-primary);
-  color: var(--text-inverse);
-  box-shadow: var(--shadow-glow-sm);
+  color: #fff;
+  box-shadow: 0 8px 20px -4px rgba(var(--accent-rgb), 0.4);
 }
 
 .accounts-page__btn--create:hover:not(:disabled) {
-  transform: translateY(-2px);
+  transform: translateY(-3px);
   background: var(--accent-primary-hover);
-  box-shadow: var(--shadow-glow-md);
+  box-shadow: 0 12px 28px -4px rgba(var(--accent-rgb), 0.5);
 }
 
 .accounts-page__btn--transfer {
   background: var(--bg-secondary);
   color: var(--text-primary);
   border: 1px solid var(--border-color);
+  backdrop-filter: blur(10px);
 }
 
 .accounts-page__btn--transfer:hover:not(:disabled) {
   background: var(--bg-hover);
   border-color: var(--accent-primary);
   color: var(--accent-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .accounts-page__btn--graph {
   background: linear-gradient(135deg, #8B5CF6, #6366F1);
   color: white;
-  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.2);
+  box-shadow: 0 8px 16px rgba(139, 92, 246, 0.25);
 }
 
 .accounts-page__btn--graph:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.3);
+  transform: translateY(-3px);
+  box-shadow: 0 12px 24px rgba(139, 92, 246, 0.4);
   filter: brightness(1.1);
 }
 
-
 .accounts-page__btn--delete {
   background: var(--color-error);
   color: white;
-  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
+  box-shadow: 0 4px 10px rgba(239, 68, 68, 0.25);
 }
 
 .accounts-page__btn--delete:hover:not(:disabled) {
-  background: #dc2626;
+  background: #ef4444;
   transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.3);
+  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.35);
 }
 
 /* Dashboard Grid Layout */
 .accounts-page__dashboard {
   display: grid;
-  grid-template-columns: 1.5fr 1fr 1fr;
-  gap: var(--spacing-lg);
-  margin-bottom: var(--spacing-md);
+  grid-template-columns: 1.6fr 1fr 1fr;
+  /* Slightly wider hero */
+  gap: 1.5rem;
+  margin-bottom: 2rem;
 }
 
 /* Net Worth Card (Hero) */
 .accounts-page__net-worth-card {
-  background: linear-gradient(135deg, var(--color-primary), #4f46e5);
-  /* Modern Indigo */
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-xl);
+  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 24px;
+  padding: 2rem;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   overflow: hidden;
-  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.3);
-  min-height: 140px;
+  box-shadow:
+    0 20px 40px -10px rgba(var(--accent-rgb), 0.4),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  min-height: 180px;
+  transition: transform 0.3s ease;
 }
 
-.accounts-page__net-worth-card::after {
+.accounts-page__net-worth-card:hover {
+  transform: translateY(-2px);
+}
+
+/* Decorative background elements */
+.accounts-page__net-worth-card::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -20%;
   width: 300px;
   height: 300px;
-  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
   border-radius: 50%;
+  filter: blur(20px);
+}
+
+.accounts-page__net-worth-card::after {
+  content: '';
+  position: absolute;
+  bottom: -40%;
+  left: -10%;
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
+  border-radius: 50%;
+  filter: blur(30px);
 }
 
 .accounts-page__main-value {
   font-family: 'Outfit', sans-serif;
-  font-size: 3.5rem;
-  font-weight: 700;
+  font-size: 4rem;
+  font-weight: 800;
   line-height: 1;
-  margin: var(--spacing-sm) 0;
+  margin: 0.5rem 0;
   letter-spacing: -2px;
   display: flex;
   align-items: flex-start;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  position: relative;
+  z-index: 2;
 }
 
 .accounts-page__main-value .currency-symbol {
-  font-size: 1.5rem;
-  margin-top: 0.5rem;
-  margin-right: 0.25rem;
-  opacity: 0.8;
-  font-weight: 500;
+  font-size: 1.75rem;
+  margin-top: 0.75rem;
+  margin-right: 0.5rem;
+  opacity: 0.9;
+  font-weight: 600;
 }
 
 .accounts-page__trend-indicator {
-  font-size: 0.875rem;
-  opacity: 0.9;
+  font-size: 0.9rem;
+  opacity: 0.95;
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  font-weight: 500;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 4px 12px;
+  border-radius: 20px;
+  width: fit-content;
+  backdrop-filter: blur(4px);
 }
 
 /* Stat Cards (Assets & Liabilities) */
 .accounts-page__stat-card {
-  background: var(--glass-panel-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-lg);
+  background: rgba(255, 255, 255, 0.45);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 24px;
+  padding: 1.75rem;
   display: flex;
-  align-items: center;
-  gap: var(--spacing-md);
-  box-shadow: var(--shadow-sm);
-  transition: transform 0.2s ease;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1.25rem;
+  box-shadow:
+    0 4px 24px -1px rgba(0, 0, 0, 0.05),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.dark .accounts-page__stat-card {
+  background: rgba(30, 32, 45, 0.5);
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 .accounts-page__stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-6px) scale(1.02);
+  background: rgba(255, 255, 255, 0.65);
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow:
+    0 20px 40px -10px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.4);
+  z-index: 5;
+}
+
+.dark .accounts-page__stat-card:hover {
+  background: rgba(40, 42, 55, 0.7);
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.4);
 }
 
 .stat-card__icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
-  font-weight: bold;
+  font-size: 1.75rem;
+  margin-bottom: 0.5rem;
+  transition: transform 0.3s ease;
+}
+
+.accounts-page__stat-card:hover .stat-card__icon {
+  transform: scale(1.1) rotate(5deg);
 }
 
 .accounts-page__stat-card--assets .stat-card__icon {
   background: rgba(16, 185, 129, 0.1);
-  color: var(--color-success);
+  color: #10b981;
+  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
 }
 
 .accounts-page__stat-card--liabilities .stat-card__icon {
   background: rgba(239, 68, 68, 0.1);
-  color: var(--color-error);
+  color: #ef4444;
+  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
 }
 
 .stat-card__content {
@@ -219,12 +290,12 @@
 }
 
 .accounts-page__label {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 600;
-  opacity: 0.7;
-  margin-bottom: 0.25rem;
+  letter-spacing: 0.1em;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
 }
 
 .accounts-page__net-worth-card .accounts-page__label {
@@ -233,9 +304,9 @@
 
 .accounts-page__sub-value {
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
+  font-size: 2rem;
   font-weight: 700;
-  color: var(--color-text);
+  color: var(--text-primary);
   letter-spacing: -0.5px;
 }
 
@@ -244,31 +315,26 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: var(--spacing-md);
+  padding: 1rem 1.5rem;
   background: rgba(239, 68, 68, 0.1);
   border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: var(--radius-lg);
+  border-radius: 16px;
   color: var(--color-error);
-  -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
+  margin-bottom: 1rem;
+  animation: slideDown 0.3s ease-out;
 }
 
-.accounts-page__error button {
-  background: rgba(255, 255, 255, 0.2);
-  border: none;
-  color: var(--color-error);
-  cursor: pointer;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  transition: background 0.2s ease;
-}
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
 
-.accounts-page__error button:hover {
-  background: rgba(255, 255, 255, 0.4);
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 /* Modal Overlay */
@@ -278,27 +344,29 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.7);
+  /* Darker overlay */
+  backdrop-filter: blur(8px);
+  /* Stronger blur */
+  -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md);
+  padding: 1.5rem;
   z-index: 1000;
-  animation: fadeIn 0.2s ease;
+  animation: fadeIn 0.3s ease;
 }
 
 .accounts-page__modal {
-  background: var(--color-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  max-width: 500px;
+  /* Completely transparent container as requested */
+  background: transparent;
+  box-shadow: none;
+  border-radius: 24px;
+  max-width: 520px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .accounts-page__modal--fixed {
@@ -310,45 +378,40 @@
 
 /* Delete Confirmation */
 .accounts-page__delete-confirm {
-  padding: var(--spacing-xl);
+  /* Needs its own glass style since modal container is transparent */
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: 24px;
+  padding: 2.5rem;
   text-align: center;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
 
 .accounts-page__delete-confirm h2 {
-  margin: 0 0 var(--spacing-md) 0;
+  margin: 0 0 1rem 0;
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text);
-}
-
-.accounts-page__delete-confirm p {
-  margin: 0 0 var(--spacing-sm) 0;
-  color: var(--color-text-secondary);
-  font-size: 1rem;
-}
-
-.accounts-page__delete-confirm strong {
-  color: var(--color-text);
-  font-weight: 700;
+  font-size: 1.75rem;
+  font-weight: 800;
+  color: var(--text-primary);
 }
 
 .accounts-page__delete-warning {
-  font-size: 0.9rem;
-  color: var(--color-warning);
-  background: rgba(245, 158, 11, 0.1);
-  padding: var(--spacing-md);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--spacing-lg) !important;
+  font-size: 0.95rem;
+  color: #b45309;
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  padding: 1rem;
+  border-radius: 12px;
+  margin: 1.5rem 0 !important;
   display: inline-block;
   width: 100%;
+  text-align: left;
 }
 
-.accounts-page__delete-actions {
-  display: flex;
-  gap: var(--spacing-md);
-  justify-content: center;
-  margin-top: var(--spacing-lg);
+[data-theme="dark"] .accounts-page__delete-warning {
+  background: rgba(180, 83, 9, 0.1);
+  color: #fbbf24;
+  border-color: rgba(251, 191, 36, 0.2);
 }
 
 /* Responsive Breakpoints */
@@ -362,31 +425,25 @@
   }
 }
 
-/* Account List Section */
-.accounts-page__account-list-section {
-  margin-top: var(--spacing-lg);
-}
-
+/* Account List Section title */
 .accounts-page__section-title {
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
+  font-size: 1.75rem;
   font-weight: 700;
-  color: var(--color-text);
-  margin: 0 0 var(--spacing-md) 0;
+  color: var(--text-primary);
+  margin: 2rem 0 1rem 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.accounts-page__loading {
-  text-align: center;
-  padding: var(--spacing-xl);
-  color: var(--color-text-secondary);
-}
-
-.accounts-page__draggable-list {
-  margin-top: var(--spacing-md);
-}
-
-.accounts-page__asset-summary {
-  grid-column: span 1;
+.accounts-page__section-title::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 24px;
+  background: var(--accent-primary);
+  border-radius: 2px;
 }
 
 @media (max-width: 600px) {
@@ -396,16 +453,19 @@
   }
 
   .accounts-page__title {
-    font-size: 2rem;
+    font-size: 2.5rem;
   }
 
   .accounts-page__actions {
     justify-content: stretch;
     margin-top: 1rem;
+    overflow-x: auto;
+    padding-bottom: 4px;
   }
 
-  .accounts-page__actions .accounts-page__btn {
+  .accounts-page__btn {
     flex: 1;
+    white-space: nowrap;
   }
 
   .accounts-page__dashboard {
@@ -415,14 +475,39 @@
   .accounts-page__net-worth-card {
     grid-column: span 1;
   }
+}
 
-  .accounts-page__delete-actions {
-    flex-direction: column-reverse;
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
   }
 }
 
-@media (min-width: 1024px) {
-  .accounts-page__modal {
-    max-width: 600px;
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0);
+    opacity: 1;
   }
 }
\ No newline at end of file
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css
index d6ca55d..81aae0d 100644
--- a/src/pages/Login/Login.css
+++ b/src/pages/Login/Login.css
@@ -1,10 +1,10 @@
-/* Login.css - Premium Glassmorphism & Sliding Animation */
+/* Login.css - Ultra Premium Glassmorphism */
 
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
 
 .login-page {
-    /* Background handled by specific container or body if needed, but here we assume app background or own */
-    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+    /* Rich dark background foundation with subtle gradient */
+    background: radial-gradient(circle at top left, #1e1e2e, #0f0f16);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -16,58 +16,75 @@
     position: relative;
 }
 
+/* Enhancing typography */
 .login-page h1 {
     font-weight: 800;
     margin: 0 0 1rem 0;
-    color: #f8fafc;
-    letter-spacing: -0.5px;
+    /* Gradient text for title */
+    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    letter-spacing: -0.02em;
+    font-size: 2.25rem;
 }
 
 .login-page p {
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: 0.5px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    line-height: 1.6;
+    letter-spacing: 0.02em;
     margin: 20px 0 30px;
-    color: #cbd5e1;
+    color: rgba(255, 255, 255, 0.7);
 }
 
 .login-page span {
-    font-size: 12px;
-    color: #94a3b8;
-    margin-bottom: 1rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.5);
+    margin-bottom: 1.25rem;
+    font-weight: 500;
 }
 
 .login-page a {
     color: #38bdf8;
     text-decoration: none;
     margin: 15px 0;
-    font-size: 14px;
-    transition: color 0.3s;
+    font-size: 0.9rem;
+    transition: all 0.3s ease;
+    font-weight: 600;
 }
 
 .login-page a:hover {
     color: #7dd3fc;
+    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
 }
 
+/* Glassmorphism Container */
 .container {
-    background: rgba(30, 41, 59, 0.6);
-    backdrop-filter: blur(20px);
-    border-radius: 20px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+    background: rgba(30, 41, 59, 0.4);
+    /* Darker semi-transparent base */
+    backdrop-filter: blur(24px);
+    -webkit-backdrop-filter: blur(24px);
+    border-radius: 32px;
+    /* Premium Border */
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow:
+        0 25px 50px -12px rgba(0, 0, 0, 0.5),
+        inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     position: relative;
     overflow: hidden;
-    width: 850px;
-    max-width: 100%;
-    min-height: 550px;
+    width: 900px;
+    max-width: 95%;
+    min-height: 600px;
     z-index: 10;
 }
 
+/* Form Container */
 .form-container {
     position: absolute;
     top: 0;
     height: 100%;
-    transition: all 0.6s ease-in-out;
+    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .sign-in-container {
@@ -78,6 +95,8 @@
 
 .container.right-panel-active .sign-in-container {
     transform: translateX(100%);
+    opacity: 0;
+    /* Fade out for smoother transition */
 }
 
 .sign-up-container {
@@ -91,7 +110,7 @@
     transform: translateX(100%);
     opacity: 1;
     z-index: 5;
-    animation: show 0.6s;
+    animation: show 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 @keyframes show {
@@ -109,6 +128,7 @@
     }
 }
 
+/* Overlay (Sliding Panel) */
 .overlay-container {
     position: absolute;
     top: 0;
@@ -116,8 +136,10 @@
     width: 50%;
     height: 100%;
     overflow: hidden;
-    transition: transform 0.6s ease-in-out;
+    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
     z-index: 100;
+    border-radius: 32px;
+    /* Match container generally, clipped by overflow */
 }
 
 .container.right-panel-active .overlay-container {
@@ -125,8 +147,8 @@
 }
 
 .overlay {
+    /* Vibrant Gradient */
     background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
-    /* Blue to Purple gradient */
     background-repeat: no-repeat;
     background-size: cover;
     background-position: 0 0;
@@ -136,7 +158,18 @@
     height: 100%;
     width: 200%;
     transform: translateX(0);
-    transition: transform 0.6s ease-in-out;
+    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+/* Add texture to overlay */
+.overlay::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
 }
 
 .container.right-panel-active .overlay {
@@ -155,7 +188,7 @@
     height: 100%;
     width: 50%;
     transform: translateX(0);
-    transition: transform 0.6s ease-in-out;
+    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .overlay-left {
@@ -175,29 +208,39 @@
     transform: translateX(20%);
 }
 
+/* Social Buttons */
 .social-container {
     margin: 20px 0;
+    display: flex;
+    gap: 12px;
 }
 
 .social-container a {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 50%;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 12px;
+    /* Smoother radius */
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    margin: 0 5px;
-    height: 40px;
-    width: 40px;
+    margin: 0;
+    /* Handled by gap */
+    height: 48px;
+    width: 48px;
     color: white;
     background: rgba(255, 255, 255, 0.05);
-    transition: all 0.3s ease;
+    /* Very subtle fill */
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+    backdrop-filter: blur(4px);
 }
 
 .social-container a:hover {
     background: rgba(255, 255, 255, 0.2);
-    transform: scale(1.1);
+    transform: translateY(-3px);
+    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+    border-color: rgba(255, 255, 255, 0.3);
 }
 
+/* Inputs */
 .login-field {
     position: relative;
     width: 100%;
@@ -205,23 +248,29 @@
 }
 
 .login-input {
-    background-color: rgba(15, 23, 42, 0.6);
+    background-color: rgba(0, 0, 0, 0.2);
     border: 1px solid rgba(255, 255, 255, 0.1);
     color: white;
-    padding: 12px 15px;
+    padding: 14px 18px;
     margin: 0;
     width: 100%;
-    border-radius: 8px;
-    transition: all 0.3s;
+    border-radius: 14px;
+    transition: all 0.3s ease;
     box-sizing: border-box;
-    /* Important for padding */
+    font-size: 0.95rem;
+    font-family: 'Outfit', sans-serif;
+}
+
+.login-input::placeholder {
+    color: rgba(255, 255, 255, 0.3);
 }
 
 .login-input:focus {
     outline: none;
     border-color: #38bdf8;
-    background-color: rgba(15, 23, 42, 0.8);
-    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.2);
+    background-color: rgba(0, 0, 0, 0.4);
+    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
+    transform: translateY(-1px);
 }
 
 .login-page form {
@@ -235,30 +284,40 @@
     text-align: center;
 }
 
+/* Buttons */
 .login-button {
-    border-radius: 25px;
+    border-radius: 99px;
+    /* Pill shape */
     border: none;
-    background: linear-gradient(90deg, #38bdf8 0%, #2563eb 100%);
+    background: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
     color: #ffffff;
-    font-size: 14px;
+    font-size: 1rem;
     font-weight: 700;
-    padding: 12px 45px;
-    letter-spacing: 1px;
+    padding: 14px 50px;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
-    transition: transform 80ms ease-in, box-shadow 0.3s ease;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
     cursor: pointer;
-    margin-top: 1rem;
-    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
+    margin-top: 1.5rem;
+    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.5);
+    position: relative;
+    overflow: hidden;
 }
 
 .login-button:hover:not(:disabled) {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
+    transform: translateY(-2px) scale(1.02);
+    box-shadow: 0 12px 25px -4px rgba(37, 99, 235, 0.6);
+    filter: brightness(1.1);
+}
+
+.login-button:active {
+    transform: translateY(0);
 }
 
 .login-button:disabled {
     opacity: 0.7;
     cursor: not-allowed;
+    filter: grayscale(0.5);
 }
 
 button.ghost {
@@ -266,29 +325,32 @@ button.ghost {
     border-color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.3);
     color: white;
-    border-radius: 25px;
+    border-radius: 99px;
     padding: 12px 45px;
-    font-size: 14px;
+    font-size: 0.9rem;
     font-weight: 700;
-    letter-spacing: 1px;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
     cursor: pointer;
-    transition: all 0.3s;
+    transition: all 0.3s ease;
 }
 
 button.ghost:hover {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgba(255, 255, 255, 0.15);
     border-color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
 }
 
 /* Mobile Toggle - Hidden on desktop */
 .mobile-toggle {
     display: none;
-    margin-top: 20px;
-    font-size: 14px;
-    color: #cbd5e1;
+    margin-top: 25px;
+    font-size: 0.9rem;
+    color: rgba(255, 255, 255, 0.7);
     cursor: pointer;
-    text-decoration: underline;
+    text-decoration: none;
+    padding: 10px;
 }
 
 /* Responsive Styles */
@@ -296,16 +358,16 @@ button.ghost:hover {
     .container {
         width: 100%;
         min-height: 100vh;
-        /* Full screen on mobile */
         border-radius: 0;
         box-shadow: none;
+        background: transparent;
+        border: none;
     }
 
     .form-container {
         width: 100%;
         height: 100%;
         position: relative;
-        /* Changing from absolute for easier stacking if needed, but keeping transitions */
         top: 0;
         left: 0;
     }
@@ -314,8 +376,7 @@ button.ghost:hover {
     .sign-up-container {
         width: 100%;
         position: absolute;
-        /* Keep absolute to overlap */
-        padding: 20px;
+        padding: 40px 20px;
         box-sizing: border-box;
     }
 
@@ -324,33 +385,29 @@ button.ghost:hover {
         display: none;
     }
 
-    /* Since overlay is gone, we need a way to switch. We'll use visibility toggling */
     .sign-in-container {
         z-index: 2;
         opacity: 1;
-        transition: opacity 0.3s ease;
+        transition: opacity 0.4s ease, transform 0.4s ease;
     }
 
     .sign-up-container {
         z-index: 1;
         opacity: 0;
-        transition: opacity 0.3s ease;
-        transform: none !important;
-        /* Reset slide transform */
+        transition: opacity 0.4s ease, transform 0.4s ease;
+        transform: translateY(20px);
     }
 
     /* When panel active (SignUp mode) */
     .container.right-panel-active .sign-in-container {
-        transform: none;
-        /* Reset slide transform */
+        transform: translateY(-20px);
         opacity: 0;
         z-index: 1;
         pointer-events: none;
     }
 
     .container.right-panel-active .sign-up-container {
-        transform: none;
-        /* Reset slide transform */
+        transform: translateY(0);
         opacity: 1;
         z-index: 2;
         pointer-events: all;
@@ -361,6 +418,14 @@ button.ghost:hover {
     }
 
     .login-page form {
-        padding: 0 20px;
+        padding: 0 10px;
+        /* Add glass background to mobile form container for readability over particles */
+        background: rgba(30, 41, 59, 0.5);
+        backdrop-filter: blur(12px);
+        border-radius: 24px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        margin: 20px;
+        height: auto;
+        padding: 40px 20px;
     }
 }
\ No newline at end of file
diff --git a/src/pages/Transactions/Transactions.css b/src/pages/Transactions/Transactions.css
index b1f8e00..2e281d9 100644
--- a/src/pages/Transactions/Transactions.css
+++ b/src/pages/Transactions/Transactions.css
@@ -1,225 +1,237 @@
 /**
- * Transactions Page - Premium Glassmorphism Style
+ * Transactions Page - Ultra Premium Glassmorphism Style
  */
 
 .transactions-page {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xl);
+  gap: 2rem;
   width: 100%;
-  animation: fadeIn 0.5s ease-out;
+  animation: fadeIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
+  padding-bottom: 3rem;
 }
 
 /* Page Header */
 .transactions-page__header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-end;
   flex-wrap: wrap;
-  gap: var(--spacing-md);
-  margin-bottom: var(--spacing-sm);
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  padding: 1rem 0;
+  background: linear-gradient(180deg, var(--bg-primary) 0%, rgba(var(--bg-primary-rgb), 0) 100%);
+  backdrop-filter: blur(8px);
+  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
+  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
 }
 
 .transactions-page__title {
   margin: 0;
   font-family: 'Outfit', sans-serif;
-  font-size: var(--font-3xl);
+  font-size: 3rem;
   font-weight: 800;
-  background: var(--gradient-primary);
+  color: var(--text-primary);
+  letter-spacing: -1.5px;
+  line-height: 1.1;
+  background: linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);
   -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
   background-clip: text;
-  color: var(--color-primary);
-  letter-spacing: -0.5px;
+  -webkit-text-fill-color: transparent;
 }
 
 .transactions-page__actions {
   display: flex;
-  gap: var(--spacing-sm);
+  gap: 1rem;
+  align-items: center;
 }
 
-/* Summary Dashboard */
+/* Summary Dashboard (Cards) */
 .transactions-page__dashboard {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-lg);
-  margin-bottom: var(--spacing-sm);
+  gap: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .summary-card {
   position: relative;
   background: var(--glass-panel-bg);
-  backdrop-filter: blur(12px);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
   border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-lg);
+  border-radius: 24px;
+  padding: 1.75rem;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--spacing-sm);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  gap: 1.25rem;
+  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   overflow: hidden;
+  box-shadow: var(--glass-shadow);
 }
 
 .summary-card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
+  transform: translateY(-5px) scale(1.02);
+  box-shadow:
+    0 20px 40px -10px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.3);
+  z-index: 1;
 }
 
 /* Vibrant Gradient Backgrounds */
 .summary-card::before {
   content: '';
   position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0.1;
-  transition: opacity 0.3s ease;
-  z-index: 0;
+  top: -50%;
+  right: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.summary-card:hover::before {
+  opacity: 1;
 }
 
 .summary-card.income {
-  background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(5, 150, 105, 0.1));
+  background: linear-gradient(145deg, rgba(16, 185, 129, 0.05), rgba(6, 78, 59, 0.02));
+}
+
+.summary-card.income:hover {
+  background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.05));
   border-color: rgba(16, 185, 129, 0.2);
 }
 
-.summary-card.income::before {
-  background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.4), transparent 70%);
+.summary-card.expense {
+  background: linear-gradient(145deg, rgba(239, 68, 68, 0.05), rgba(127, 29, 29, 0.02));
 }
 
-.summary-card.expense {
-  background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.1));
+.summary-card.expense:hover {
+  background: linear-gradient(145deg, rgba(239, 68, 68, 0.1), rgba(127, 29, 29, 0.05));
   border-color: rgba(239, 68, 68, 0.2);
 }
 
-.summary-card.expense::before {
-  background: radial-gradient(circle at top right, rgba(239, 68, 68, 0.4), transparent 70%);
-}
-
 .summary-card.balance {
-  background: linear-gradient(135deg, rgba(79, 70, 229, 0.05), rgba(67, 56, 202, 0.1));
-  border-color: rgba(79, 70, 229, 0.2);
+  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.05), rgba(var(--accent-rgb), 0.02));
 }
 
-.summary-card.balance::before {
-  background: radial-gradient(circle at top right, rgba(79, 70, 229, 0.4), transparent 70%);
+.summary-card.balance:hover {
+  background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
+  border-color: rgba(var(--accent-rgb), 0.3);
 }
 
 /* Icon Styles */
 .summary-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+  width: 54px;
+  height: 54px;
+  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--spacing-xs);
-  z-index: 1;
-  background: white;
-  /* Glassy white base */
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-bottom: 0.5rem;
+  z-index: 2;
+  background: var(--bg-elevated);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04);
+  font-size: 1.75rem;
+  transition: transform 0.3s ease;
+}
+
+.summary-card:hover .summary-icon {
+  transform: scale(1.1) rotate(5deg);
 }
 
 .summary-card.income .summary-icon {
-  color: var(--color-success);
+  color: #10b981;
+  background: rgba(16, 185, 129, 0.1);
 }
 
 .summary-card.expense .summary-icon {
-  color: var(--color-error);
+  color: #ef4444;
+  background: rgba(239, 68, 68, 0.1);
 }
 
 .summary-card.balance .summary-icon {
-  color: var(--color-primary);
+  color: var(--accent-primary);
+  background: rgba(var(--accent-rgb), 0.1);
 }
 
 .summary-content {
   display: flex;
   flex-direction: column;
-  z-index: 1;
+  z-index: 2;
   width: 100%;
 }
 
 .summary-label {
-  font-size: 0.8125rem;
-  font-weight: 600;
+  font-size: 0.85rem;
+  font-weight: 700;
   text-transform: uppercase;
-  color: var(--color-text-secondary);
-  letter-spacing: 0.5px;
-  margin-bottom: 4px;
+  color: var(--text-secondary);
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
 }
 
 .summary-value {
   font-family: 'Outfit', sans-serif;
-  font-size: 1.75rem;
+  font-size: 2.25rem;
   font-weight: 800;
-  color: var(--color-text);
-  letter-spacing: -1px;
-  line-height: 1.1;
+  color: var(--text-primary);
+  letter-spacing: -0.03em;
+  line-height: 1;
 }
 
 .summary-value.income {
-  color: var(--color-success);
+  color: #10b981;
 }
 
 .summary-value.expense {
-  color: var(--color-error);
+  color: #ef4444;
 }
 
-/* Dark Mode Adaptation */
-@media (prefers-color-scheme: dark) {
-  .summary-icon {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .summary-card.income {
-    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(6, 78, 59, 0.2));
-  }
-
-  .summary-card.expense {
-    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(127, 29, 29, 0.2));
-  }
-
-  .summary-card.balance {
-    background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(49, 46, 129, 0.2));
-  }
-
-  .summary-value {
-    color: white;
-  }
+.summary-value.negative {
+  color: #ef4444;
 }
 
-/* Error Message */
-.transactions-page__error {
+/* Filter Section */
+.transactions-page__filter {
+  margin-bottom: 1.5rem;
+}
+
+/* Add Transaction Button */
+.transactions-page__add-btn {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  padding: var(--spacing-md);
-  background: rgba(239, 68, 68, 0.1);
-  border: 1px solid rgba(239, 68, 68, 0.2);
-  border-radius: var(--radius-lg);
-  color: var(--color-error);
-  font-size: 0.9rem;
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
-}
-
-.transactions-page__error button {
-  background: rgba(255, 255, 255, 0.2);
+  gap: 0.75rem;
+  padding: 0.875rem 1.5rem;
+  background: var(--accent-primary);
+  color: white;
   border: none;
-  color: var(--color-error);
+  border-radius: 20px;
+  font-size: 1rem;
+  font-weight: 700;
   cursor: pointer;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background 0.2s ease;
+  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  box-shadow: 0 8px 20px -6px rgba(var(--accent-rgb), 0.5);
+  position: relative;
+  overflow: hidden;
 }
 
-.transactions-page__error button:hover {
-  background: rgba(255, 255, 255, 0.4);
+.transactions-page__add-btn:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 15px 30px -10px rgba(var(--accent-rgb), 0.6);
+  background: var(--accent-primary-hover);
+}
+
+.transactions-page__add-btn:active {
+  transform: translateY(-1px);
 }
 
 /* Pagination */
@@ -227,126 +239,51 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: var(--spacing-md);
-}
-
-/* Transaction List */
-.transactions-page__list {
-  background: var(--glass-panel-bg);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  padding: var(--spacing-lg);
-  min-height: 400px;
-}
-
-.transaction-list-item {
-  display: flex;
-  align-items: center;
-  padding: var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border);
-  transition: background-color 0.2s ease;
-  cursor: pointer;
-}
-
-.transaction-list-item:last-child {
-  border-bottom: none;
-}
-
-.transaction-list-item:hover {
-  background-color: rgba(0, 0, 0, 0.02);
-}
-
-.transaction-list-item__icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: var(--spacing-md);
-  font-size: 1.25rem;
-}
-
-.transaction-list-item__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.transaction-list-item__title {
-  font-weight: 600;
-  color: var(--color-text);
-  font-size: 0.9375rem;
-}
-
-.transaction-list-item__subtitle {
-  font-size: 0.8125rem;
-  color: var(--color-text-secondary);
-  margin-top: 2px;
-}
-
-.transaction-list-item__amount {
-  font-family: 'Outfit', sans-serif;
-  font-weight: 700;
-  font-size: 1rem;
-}
-
-.transaction-list-item__amount--income {
-  color: var(--color-success);
-}
-
-.transaction-list-item__amount--expense {
-  color: var(--color-text);
-}
-
-.transaction-list-item__date {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  margin-top: 2px;
-  text-align: right;
+  gap: 1.5rem;
+  margin-top: 2rem;
 }
 
 .transactions-page__pagination-btn {
-  padding: var(--spacing-xs) var(--spacing-lg);
-  background: var(--glass-bg);
-  color: var(--color-text);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-full);
-  font-size: var(--font-sm);
+  padding: 0.5rem 1.25rem;
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 99px;
+  font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s ease;
 }
 
 .transactions-page__pagination-btn:hover:not(:disabled) {
-  background: var(--color-primary-light);
-  color: var(--color-primary);
-  border-color: var(--color-primary-light);
-  transform: translateY(-1px);
+  background: var(--bg-primary);
+  border-color: var(--accent-primary);
+  color: var(--accent-primary);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
 .transactions-page__pagination-btn:disabled {
-  opacity: 0.4;
+  opacity: 0.5;
   cursor: not-allowed;
 }
 
 .transactions-page__pagination-info {
   font-family: 'Outfit', sans-serif;
-  font-size: var(--font-sm);
+  font-size: 0.95rem;
   font-weight: 600;
-  color: var(--color-text-secondary);
-  padding: 0 var(--spacing-md);
+  color: var(--text-secondary);
 }
 
 .transactions-page__total {
   text-align: center;
-  font-size: var(--font-xs);
-  font-weight: 600;
-  color: var(--color-text-muted);
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: var(--text-tertiary);
   text-transform: uppercase;
-  letter-spacing: 1px;
-  margin-top: -10px;
+  letter-spacing: 0.1em;
+  margin-top: 1rem;
+  opacity: 0.7;
 }
 
 /* Modal Overlay */
@@ -356,241 +293,138 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
-  -webkit-backdrop-filter: blur(4px);
-  backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md);
+  padding: 1.5rem;
   z-index: 1000;
-  animation: fadeIn 0.2s ease;
+  animation: fadeIn 0.3s ease;
 }
 
+/* Modal Container */
 .transactions-page__modal {
-  background: var(--color-bg);
-  border: 1px solid var(--glass-border);
-  border-radius: var(--radius-xl);
-  max-width: 500px;
+  /* For form modal, we remove default styles as the form has its own */
+  background: transparent;
   width: 100%;
-  max-height: 90vh;
-  overflow-y: auto;
-  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
-  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+  max-width: 500px;
+  display: flex;
+  justify-content: center;
+  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Delete Confirmation */
+.transactions-page__modal:not(.transactions-page__modal--form) {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-color);
+  border-radius: 28px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+/* Delete Modal Specifics */
 .transactions-page__delete-confirm {
-  padding: var(--spacing-xl);
+  padding: 2.5rem;
   text-align: center;
+  background: var(--bg-elevated);
+  border-radius: 28px;
+  width: 100%;
 }
 
 .transactions-page__delete-confirm h2 {
-  margin: 0 0 var(--spacing-md) 0;
   font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--color-text);
-}
-
-.transactions-page__delete-confirm p {
-  margin: 0 0 var(--spacing-sm) 0;
-  color: var(--color-text-secondary);
-  font-size: 1rem;
-}
-
-.transactions-page__delete-confirm strong {
-  color: var(--color-text);
-  font-weight: 700;
+  font-size: 2rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin-bottom: 1rem;
 }
 
 .transactions-page__delete-amount {
-  font-family: 'Outfit', sans-serif;
-  font-size: 1.5rem;
+  font-size: 2rem !important;
+  color: var(--color-error) !important;
+  margin: 1.5rem 0 !important;
   font-weight: 800;
-  color: var(--color-text);
-  margin: var(--spacing-md) 0 !important;
 }
 
 .transactions-page__delete-warning {
-  font-size: 0.9rem;
-  color: var(--color-warning);
+  background: #fffbeb;
+  border: 1px solid #fcd34d;
+  color: #b45309;
+  padding: 1rem;
+  border-radius: 16px;
+  font-size: 0.95rem;
+  font-weight: 500;
+}
+
+[data-theme="dark"] .transactions-page__delete-warning {
   background: rgba(245, 158, 11, 0.1);
-  padding: var(--spacing-md);
-  border-radius: var(--radius-lg);
-  margin-bottom: var(--spacing-lg) !important;
-  display: inline-block;
-  width: 100%;
+  border-color: rgba(245, 158, 11, 0.2);
+  color: #fbbf24;
 }
 
 .transactions-page__delete-actions {
   display: flex;
-  gap: var(--spacing-md);
+  gap: 1rem;
   justify-content: center;
-  margin-top: var(--spacing-lg);
+  margin-top: 2rem;
 }
 
-.transactions-page__btn {
-  padding: var(--spacing-sm) var(--spacing-xl);
-  border: none;
-  border-radius: var(--radius-full);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  min-width: 120px;
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
-.transactions-page__btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
-.transactions-page__btn--cancel {
-  background: var(--color-bg-secondary);
-  color: var(--color-text);
-  border: 1px solid transparent;
-}
-
-.transactions-page__btn--cancel:hover:not(:disabled) {
-  background: var(--color-bg-tertiary);
-}
-
-.transactions-page__btn--delete {
-  background: var(--color-error);
-  color: white;
-  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
-}
-
-.transactions-page__btn--delete:hover:not(:disabled) {
-  background: #dc2626;
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
-}
-
-/* Mobile */
-@media (max-width: 768px) {
+/* Responsive */
+@media (max-width: 900px) {
   .transactions-page__dashboard {
-    /* Switch to Horizontal Scroll */
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    gap: var(--spacing-md);
-    padding-bottom: var(--spacing-sm);
-    padding-right: var(--spacing-md);
-    /* End padding */
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
+    grid-template-columns: 1fr;
+    gap: 1rem;
   }
+}
 
-  .transactions-page__dashboard::-webkit-scrollbar {
-    display: none;
-  }
-
-  .summary-card {
-    min-width: 85%;
-    /* Reveal next card */
-    flex: 0 0 auto;
-    scroll-snap-align: center;
-    padding: var(--spacing-md);
-    margin: 0;
-  }
-
-  /* Center the first card initially if needed, or use start padding */
-  .transactions-page__dashboard::after {
-    content: '';
-    min-width: 1px;
-    height: 1px;
+@media (max-width: 640px) {
+  .transactions-page__header {
+    flex-direction: column;
+    align-items: flex-start;
   }
 
   .transactions-page__title {
-    font-size: var(--font-2xl);
+    font-size: 2.25rem;
   }
 
-  /* Optimize list item spacing for mobile */
-  .transaction-list-item {
-    padding: var(--spacing-md) var(--spacing-sm);
-    /* More vertical padding for touch */
+  .transactions-page__actions {
+    width: 100%;
   }
 
-  .transaction-list-item__icon {
-    width: 40px;
-    height: 40px;
-    font-size: 1.2rem;
-    margin-right: var(--spacing-sm);
-  }
-}
-
-/* Tablet */
-@media (min-width: 768px) {
-  .transactions-page__title {
-    font-size: var(--font-3xl);
-  }
-}
-
-
-/* Add Transaction Button */
-.transactions-page__add-btn {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-sm) var(--spacing-lg);
-  background: var(--gradient-primary);
-  color: white;
-  border: none;
-  border-radius: var(--radius-full);
-  font-size: 0.9375rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
-}
-
-.transactions-page__add-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
-}
-
-.transactions-page__add-btn:active {
-  transform: translateY(0);
-}
-
-/* Transaction Form Modal */
-.transactions-page__modal--form {
-  max-width: 480px;
-  padding: 0;
-  overflow: hidden;
-}
-
-.transactions-page__modal--form .transaction-form {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-/* Mobile Floating Add Button */
-@media (max-width: 768px) {
   .transactions-page__add-btn {
-    position: fixed;
-    bottom: calc(var(--nav-height, 60px) + var(--spacing-lg));
-    right: var(--spacing-md);
-    width: 56px;
-    height: 56px;
-    padding: 0;
-    border-radius: 50%;
+    flex: 1;
     justify-content: center;
-    z-index: 100;
-    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4);
   }
 
-  .transactions-page__add-btn span {
-    display: none;
+  .summary-label {
+    font-size: 0.75rem;
   }
 
-  .transactions-page__modal--form {
-    max-width: 100%;
-    max-height: 100%;
-    height: 100%;
-    border-radius: 0;
+  .summary-value {
+    font-size: 1.75rem;
   }
 }
\ No newline at end of file
diff --git a/src/styles/animations.css b/src/styles/animations.css
index dd0d2d8..478780b 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -519,6 +519,57 @@
   animation-delay: 200ms;
 }
 
-.delay-300 {
-  animation-delay: 300ms;
+
+/* ========================================
+ * Aurora Background Animation - Optimized Breathing
+ * ======================================== */
+@keyframes aurora-gradient {
+  0% {
+    background-position:
+      0% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%,
+      50% 50%;
+  }
+
+  25% {
+    background-position:
+      10% 10%,
+      /* Move inward */
+      90% 10%,
+      90% 90%,
+      10% 90%,
+      52% 48%;
+    /* Center drift */
+  }
+
+  50% {
+    background-position:
+      0% 20%,
+      /* Drift down */
+      100% 20%,
+      100% 80%,
+      0% 80%,
+      50% 55%;
+  }
+
+  75% {
+    background-position:
+      -5% 10%,
+      /* Expand out */
+      105% 10%,
+      105% 90%,
+      -5% 90%,
+      48% 52%;
+  }
+
+  100% {
+    background-position:
+      0% 0%,
+      100% 0%,
+      100% 100%,
+      0% 100%,
+      50% 50%;
+  }
 }
\ No newline at end of file