diff --git a/assets/scss/_design-tokens.scss b/assets/scss/_design-tokens.scss
new file mode 100644
index 0000000..d344b18
--- /dev/null
+++ b/assets/scss/_design-tokens.scss
@@ -0,0 +1,193 @@
+// Design Tokens for Bolt.ai Style System
+// Based on consensus from multiple AI models for optimal UI transformation
+
+// ============================================
+// Color Palette
+// ============================================
+:root {
+  // Primary Colors - Subtle, professional tones
+  --color-primary: #dc2626;  // Monaco red for branding
+  --color-primary-light: #fef2f2;  // Very light red for backgrounds
+  --color-primary-soft: rgba(220, 38, 38, 0.1);  // Soft red for hover states
+  
+  // Background Colors
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8f9fa;
+  --color-bg-gradient: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  
+  // Glass Effects - Subtle transparency
+  --color-glass-white: rgba(255, 255, 255, 0.6);
+  --color-glass-light: rgba(255, 255, 255, 0.8);
+  --color-glass-dark: rgba(0, 0, 0, 0.05);
+  
+  // Text Colors
+  --color-text-primary: #27272a;
+  --color-text-secondary: #6b7280;
+  --color-text-muted: #9ca3af;
+  --color-text-white: #ffffff;
+  
+  // Status Colors
+  --color-success: #10b981;
+  --color-warning: #f59e0b;
+  --color-error: #ef4444;
+  --color-info: #3b82f6;
+  
+  // Border Colors
+  --color-border-light: rgba(0, 0, 0, 0.05);
+  --color-border-medium: rgba(0, 0, 0, 0.1);
+  --color-border-white: rgba(255, 255, 255, 0.2);
+}
+
+// ============================================
+// Spacing System (8-point grid)
+// ============================================
+$spacing-unit: 8px;
+
+$space-0: 0;
+$space-1: $spacing-unit;        // 8px
+$space-2: $spacing-unit * 2;    // 16px
+$space-3: $spacing-unit * 3;    // 24px
+$space-4: $spacing-unit * 4;    // 32px
+$space-5: $spacing-unit * 5;    // 40px
+$space-6: $spacing-unit * 6;    // 48px
+$space-7: $spacing-unit * 7;    // 56px
+$space-8: $spacing-unit * 8;    // 64px
+$space-10: $spacing-unit * 10;  // 80px
+$space-12: $spacing-unit * 12;  // 96px
+
+// ============================================
+// Typography Scale
+// ============================================
+:root {
+  // Font Families
+  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
+  
+  // Font Sizes
+  --text-xs: 0.75rem;     // 12px
+  --text-sm: 0.875rem;    // 14px
+  --text-base: 1rem;      // 16px
+  --text-lg: 1.125rem;    // 18px
+  --text-xl: 1.25rem;     // 20px
+  --text-2xl: 1.5rem;     // 24px
+  --text-3xl: 1.875rem;   // 30px
+  --text-4xl: 2.25rem;    // 36px
+  --text-5xl: 3rem;       // 48px
+  
+  // Font Weights
+  --font-normal: 400;
+  --font-medium: 500;
+  --font-semibold: 600;
+  --font-bold: 700;
+  --font-extrabold: 800;
+  
+  // Line Heights
+  --leading-tight: 1.25;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.75;
+  
+  // Letter Spacing
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.05em;
+}
+
+// ============================================
+// Border Radius
+// ============================================
+:root {
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-full: 9999px;
+}
+
+// ============================================
+// Shadows (Subtle, layered approach)
+// ============================================
+:root {
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.08);
+  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12);
+  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.1);
+  --shadow-monaco: 0 8px 24px rgba(220, 38, 38, 0.15);
+}
+
+// ============================================
+// Glass Effects (Reduced blur for performance)
+// ============================================
+:root {
+  --blur-none: 0;
+  --blur-sm: 2px;
+  --blur-md: 4px;
+  --blur-lg: 8px;  // Maximum blur, use sparingly
+}
+
+// ============================================
+// Transitions (Consistent timing)
+// ============================================
+:root {
+  --transition-fast: 150ms ease;
+  --transition-base: 200ms ease;
+  --transition-slow: 300ms ease;
+  --transition-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+}
+
+// ============================================
+// Z-Index Scale
+// ============================================
+:root {
+  --z-base: 0;
+  --z-dropdown: 10;
+  --z-sticky: 20;
+  --z-overlay: 30;
+  --z-modal: 40;
+  --z-popover: 50;
+  --z-tooltip: 60;
+  --z-max: 9999;
+}
+
+// ============================================
+// Breakpoints
+// ============================================
+$breakpoint-sm: 640px;
+$breakpoint-md: 768px;
+$breakpoint-lg: 1024px;
+$breakpoint-xl: 1280px;
+$breakpoint-2xl: 1536px;
+
+// ============================================
+// Utility Mixins
+// ============================================
+@mixin glass-effect($blur: var(--blur-sm), $bg: var(--color-glass-white)) {
+  background: $bg;
+  backdrop-filter: blur($blur);
+  -webkit-backdrop-filter: blur($blur);
+  border: 1px solid var(--color-border-white);
+}
+
+@mixin hover-lift() {
+  transition: transform var(--transition-base), box-shadow var(--transition-base);
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+@mixin text-gradient() {
+  background: var(--color-bg-gradient);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@mixin focus-ring() {
+  &:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+}
\ No newline at end of file
diff --git a/assets/scss/glass-bolt-style.scss b/assets/scss/glass-bolt-style.scss
new file mode 100644
index 0000000..84c406d
--- /dev/null
+++ b/assets/scss/glass-bolt-style.scss
@@ -0,0 +1,269 @@
+// Bolt.ai Glass Style Overrides
+// Ensures all glass components use the subtle bolt.ai design system
+
+// Import design tokens
+@import 'design-tokens';
+
+// ============================================
+// GLOBAL GLASS STYLES - Bolt.ai Pattern
+// ============================================
+
+// All glass elements get the subtle treatment
+.glass,
+.glass-light,
+.glass-ultra,
+.glass-card,
+.glass-stat-card,
+.glass-dues-card,
+.glass-navbar,
+.glass-sidebar,
+.glass-app-bar,
+.glass-card-bright {
+  // Subtle glass effect like bolt.ai
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+  
+  // Hover state
+  &:hover {
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-2px);
+  }
+}
+
+// Ultra glass variant (slightly more opaque)
+.glass-ultra {
+  background: rgba(255, 255, 255, 0.8) !important;
+  backdrop-filter: blur(2px) !important;
+  -webkit-backdrop-filter: blur(2px) !important;
+}
+
+// Glass Monaco soft colors
+.bg-glass-monaco-soft,
+.glass-monaco-soft {
+  background: rgba(254, 242, 242, 0.6) !important;
+  
+  &:hover {
+    background: rgba(254, 242, 242, 0.8) !important;
+  }
+}
+
+// Border radius consistency
+.rounded-glass {
+  border-radius: 20px !important;
+}
+
+// ============================================
+// TEXT COLORS - Dark on Light
+// ============================================
+
+// Ensure text is always readable on light backgrounds
+.glass,
+.glass-light,
+.glass-ultra,
+.glass-card,
+.glass-stat-card,
+.glass-dues-card,
+.glass-navbar,
+.glass-sidebar,
+.glass-card-bright {
+  color: var(--color-text-primary, #27272a) !important;
+  
+  h1, h2, h3, h4, h5, h6 {
+    color: var(--color-text-primary, #27272a) !important;
+  }
+  
+  p {
+    color: var(--color-text-secondary, #6b7280) !important;
+  }
+  
+  .text-gray-500 {
+    color: var(--color-text-muted, #9ca3af) !important;
+  }
+}
+
+// ============================================
+// GRADIENT OVERRIDES - Subtle Bolt.ai Style
+// ============================================
+
+// Hero gradients
+.hero-gradient,
+.bg-gradient-monaco,
+.gradient-monaco,
+.text-gradient-monaco {
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%) !important;
+}
+
+// Monaco gradient for text
+.text-gradient-monaco {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+}
+
+// ============================================
+// BUTTON STYLES - Bolt.ai Pattern
+// ============================================
+
+.btn-glass,
+.btn-glass-primary,
+.btn-glass-secondary {
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+  border: 1px solid rgba(0, 0, 0, 0.05) !important;
+  color: var(--color-text-primary, #27272a) !important;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.8) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
+    transform: translateY(-1px);
+  }
+}
+
+.btn-glass-primary {
+  border-color: rgba(220, 38, 38, 0.1) !important;
+  color: #dc2626 !important;
+  
+  &:hover {
+    background: rgba(254, 242, 242, 0.8) !important;
+    border-color: rgba(220, 38, 38, 0.2) !important;
+  }
+}
+
+// ============================================
+// ANIMATION OVERRIDES - Simple and Subtle
+// ============================================
+
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out !important;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Remove complex animations
+.animate-float,
+.animate-bounce,
+.animate-pulse-glow,
+.animate-shimmer-slow {
+  animation: none !important;
+}
+
+// ============================================
+// SHADOW OVERRIDES - Subtle Shadows
+// ============================================
+
+.shadow-glass,
+.shadow-glass-hover,
+.shadow-glass-lg,
+.shadow-monaco,
+.shadow-monaco-sm,
+.shadow-monaco-intense {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+.shadow-glass-hover:hover,
+.shadow-glass-lg:hover {
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
+}
+
+// ============================================
+// SIDEBAR SPECIFIC
+// ============================================
+
+.glass-sidebar {
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08) !important;
+  
+  .bg-glass-light {
+    background: rgba(255, 255, 255, 0.4) !important;
+    backdrop-filter: blur(2px) !important;
+  }
+}
+
+// ============================================
+// GLOBAL BLUR REDUCTION
+// ============================================
+
+// Override any high blur values
+* {
+  &[style*="blur(60px)"],
+  &[style*="blur(50px)"],
+  &[style*="blur(40px)"],
+  &[style*="blur(30px)"],
+  &[style*="blur(20px)"],
+  &[style*="blur(10px)"] {
+    backdrop-filter: blur(4px) !important;
+    -webkit-backdrop-filter: blur(4px) !important;
+  }
+}
+
+// Ensure maximum blur is 8px
+.backdrop-blur-3xl,
+.backdrop-blur-2xl,
+.backdrop-blur-xl,
+.backdrop-blur-lg {
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+}
+
+.backdrop-blur-md {
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+}
+
+.backdrop-blur-sm {
+  backdrop-filter: blur(2px) !important;
+  -webkit-backdrop-filter: blur(2px) !important;
+}
+
+// ============================================
+// RESPONSIVE ADJUSTMENTS
+// ============================================
+
+@media (max-width: 768px) {
+  .glass,
+  .glass-light,
+  .glass-ultra,
+  .glass-card {
+    backdrop-filter: blur(2px) !important;
+    -webkit-backdrop-filter: blur(2px) !important;
+  }
+}
+
+// ============================================
+// PERFORMANCE OPTIMIZATIONS
+// ============================================
+
+// Reduce motion for better performance
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// GPU acceleration for transforms
+.glass,
+.glass-card,
+.glass-stat-card {
+  will-change: transform;
+  transform: translateZ(0);
+}
\ No newline at end of file
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 83ea510..af396e7 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,6 +1,12 @@
 // MonacoUSA Portal - Main Stylesheet
 // Based on design-system.md specifications
 
+// Import design tokens for bolt.ai style
+@import 'design-tokens';
+
+// Import bolt.ai glass style overrides
+@import 'glass-bolt-style';
+
 // Import component styles
 @import 'components/dashboards';
 
diff --git a/components/GlassSidebar.vue b/components/GlassSidebar.vue
index 340b5c8..eb66682 100644
--- a/components/GlassSidebar.vue
+++ b/components/GlassSidebar.vue
@@ -249,6 +249,29 @@ const settingsItems = [
 </script>
 
 <style scoped>
+/* Glass Sidebar Styles - Bolt.ai Style */
+.glass-sidebar {
+  background: rgba(255, 255, 255, 0.6) !important;
+  backdrop-filter: blur(4px) !important;
+  -webkit-backdrop-filter: blur(4px) !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.08);
+}
+
+/* Glass effects for internal elements */
+.bg-glass-light {
+  background: rgba(255, 255, 255, 0.4) !important;
+  backdrop-filter: blur(2px) !important;
+}
+
+.bg-glass-monaco-soft {
+  background: rgba(254, 242, 242, 0.6) !important;
+}
+
+.hover\:bg-glass-monaco-soft:hover {
+  background: rgba(254, 242, 242, 0.8) !important;
+}
+
 /* Fade transition for collapsing elements */
 .fade-enter-active,
 .fade-leave-active {
@@ -266,12 +289,24 @@ const settingsItems = [
 }
 
 .scrollbar-thin::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.05);
+  background: rgba(0, 0, 0, 0.03);
   border-radius: 9999px;
 }
 
 .scrollbar-thin::-webkit-scrollbar-thumb {
-  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  background: rgba(220, 38, 38, 0.2);
   border-radius: 9999px;
 }
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(220, 38, 38, 0.3);
+}
+
+/* Text gradient for branding */
+.text-gradient-monaco {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
 </style>
\ No newline at end of file
diff --git a/components/ui/GlassCard.vue b/components/ui/GlassCard.vue
index a87559b..a53e878 100644
--- a/components/ui/GlassCard.vue
+++ b/components/ui/GlassCard.vue
@@ -91,58 +91,34 @@ const animationConfig = {
   overflow: hidden;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   
-  // Glass effect base
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    padding: 1px;
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.3) 0%, 
-      rgba(255, 255, 255, 0.1) 100%);
-    -webkit-mask: 
-      linear-gradient(#fff 0 0) content-box, 
-      linear-gradient(#fff 0 0);
-    -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    pointer-events: none;
-  }
-  
-  // Variants
+  // Variants - Updated to bolt.ai style with reduced blur
   &--light {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     color: #27272a;
   }
   
   &--dark {
-    background: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    color: #ffffff;
+    background: rgba(0, 0, 0, 0.05);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: #27272a;
   }
   
   &--colored {
-    background: linear-gradient(135deg, 
-      rgba(220, 38, 38, 0.1) 0%, 
-      rgba(185, 28, 28, 0.05) 100%);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid rgba(220, 38, 38, 0.2);
+    background: rgba(254, 242, 242, 0.6);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    border: 1px solid rgba(220, 38, 38, 0.1);
     color: #27272a;
   }
   
   &--gradient {
-    background: linear-gradient(135deg, 
-      rgba(255, 255, 255, 0.8) 0%, 
-      rgba(255, 255, 255, 0.4) 100%);
-    backdrop-filter: blur(20px) saturate(180%);
-    -webkit-backdrop-filter: blur(20px) saturate(180%);
-    border: 1px solid rgba(255, 255, 255, 0.4);
+    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+    border: 1px solid rgba(0, 0, 0, 0.05);
     color: #27272a;
   }
   
@@ -205,16 +181,10 @@ const animationConfig = {
   }
   
   &--elevated {
-    box-shadow: 
-      0 10px 40px rgba(0, 0, 0, 0.1),
-      0 2px 10px rgba(0, 0, 0, 0.05),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
     
     &:hover {
-      box-shadow: 
-        0 20px 60px rgba(0, 0, 0, 0.15),
-        0 4px 15px rgba(0, 0, 0, 0.08),
-        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
     }
   }
   
@@ -231,7 +201,7 @@ const animationConfig = {
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0;
-    color: #dc2626;
+    color: #27272a;
   }
   
   &__subtitle {
diff --git a/components/ui/MonacoButton.vue b/components/ui/MonacoButton.vue
index 7485fdd..e5a5f07 100644
--- a/components/ui/MonacoButton.vue
+++ b/components/ui/MonacoButton.vue
@@ -149,33 +149,30 @@ defineEmits<{
   }
   
   &--glass {
-    background: rgba(255, 255, 255, 0.7);
-    backdrop-filter: blur(20px);
-    -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.3);
-    color: #dc2626;
-    box-shadow: 
-      0 8px 32px rgba(0, 0, 0, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    background: rgba(255, 255, 255, 0.6);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    color: #27272a;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     
     &:hover:not(:disabled) {
       background: rgba(255, 255, 255, 0.8);
-      border-color: rgba(220, 38, 38, 0.2);
-      box-shadow: 
-        0 12px 40px rgba(0, 0, 0, 0.15),
-        inset 0 1px 0 rgba(255, 255, 255, 0.6);
+      border-color: rgba(220, 38, 38, 0.1);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
       transform: translateY(-2px);
     }
   }
   
   &--gradient {
-    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
-    color: white;
-    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
+    background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+    color: #dc2626;
+    border: 1px solid rgba(220, 38, 38, 0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     
     &:hover:not(:disabled) {
-      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-      box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
+      background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
       transform: translateY(-2px);
     }
   }
diff --git a/pages/board/dashboard/glass.vue b/pages/board/dashboard/glass.vue
index bc91c7d..a2b6a8d 100644
--- a/pages/board/dashboard/glass.vue
+++ b/pages/board/dashboard/glass.vue
@@ -228,31 +228,10 @@ const visibleDuesMembers = ref([
 </script>
 
 <style scoped>
-/* Animations */
-@keyframes float {
-  0%, 100% { transform: translateY(0) rotate(0deg); }
-  50% { transform: translateY(-20px) rotate(10deg); }
-}
-
-@keyframes pulse-slow {
-  0%, 100% { opacity: 0.3; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(1.1); }
-}
-
-@keyframes bounce-slow {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-10px); }
-}
-
-@keyframes gradient {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
-}
-
-@keyframes slide-in {
-  from { opacity: 0; transform: translateX(-20px); }
-  to { opacity: 1; transform: translateX(0); }
+/* Simplified Animations */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 @keyframes slide-up {
@@ -260,10 +239,15 @@ const visibleDuesMembers = ref([
   to { opacity: 1; transform: translateY(0); }
 }
 
+@keyframes slide-in {
+  from { opacity: 0; transform: translateX(-20px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
 /* Base Styles */
 .glass-dashboard {
   min-height: 100vh;
-  background: #f8f9fa;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
 }
 
 /* Hero Header */
@@ -276,7 +260,7 @@ const visibleDuesMembers = ref([
 .hero-gradient {
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg, #dc2626 0%, #991b1b 50%, #7f1d1d 100%);
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
 }
 
 .hero-overlay {
@@ -289,34 +273,32 @@ const visibleDuesMembers = ref([
 .floating-orb {
   position: absolute;
   border-radius: 50%;
-  filter: blur(60px);
-  animation: float 8s ease-in-out infinite;
+  opacity: 0.3;
+  filter: blur(20px);
 }
 
 .orb-1 {
   top: 40px;
   right: 80px;
-  width: 256px;
-  height: 256px;
-  background: rgba(255, 255, 255, 0.05);
+  width: 200px;
+  height: 200px;
+  background: rgba(220, 38, 38, 0.05);
 }
 
 .orb-2 {
   bottom: 40px;
   left: 80px;
-  width: 192px;
-  height: 192px;
-  background: rgba(239, 68, 68, 0.1);
-  animation: pulse-slow 4s ease-in-out infinite;
+  width: 150px;
+  height: 150px;
+  background: rgba(220, 38, 38, 0.03);
 }
 
 .orb-3 {
   top: 50%;
   left: 50%;
-  width: 128px;
-  height: 128px;
-  background: rgba(255, 255, 255, 0.1);
-  animation: bounce-slow 3s ease-in-out infinite;
+  width: 100px;
+  height: 100px;
+  background: rgba(220, 38, 38, 0.02);
 }
 
 .mesh-overlay {
@@ -352,7 +334,7 @@ const visibleDuesMembers = ref([
   display: flex;
   align-items: center;
   gap: 1.5rem;
-  animation: slide-in 0.6s ease-out;
+  animation: fade-in 0.3s ease-out;
 }
 
 .avatar-wrapper {
@@ -362,15 +344,15 @@ const visibleDuesMembers = ref([
 
 .avatar-glow {
   position: absolute;
-  inset: -8px;
-  background: linear-gradient(135deg, rgba(255,255,255,0.3), rgba(254,202,202,0.3));
+  inset: -4px;
+  background: rgba(220, 38, 38, 0.1);
   border-radius: 50%;
-  filter: blur(12px);
-  transition: filter 0.3s;
+  opacity: 0.5;
+  transition: opacity 0.3s;
 }
 
 .avatar-wrapper:hover .avatar-glow {
-  filter: blur(16px);
+  opacity: 0.8;
 }
 
 .avatar-container {
@@ -446,22 +428,18 @@ const visibleDuesMembers = ref([
 }
 
 .welcome-title {
-  font-size: 3rem;
-  font-weight: 900;
-  color: white;
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #27272a;
   margin-bottom: 0.5rem;
-  line-height: 1.1;
+  line-height: 1.2;
   letter-spacing: -0.02em;
 }
 
 .name-gradient {
   display: block;
-  background: linear-gradient(90deg, #fff, #fee2e2, #fff);
-  background-size: 300% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: gradient 3s ease infinite;
+  color: #dc2626;
+  font-weight: 800;
 }
 
 .user-meta {
@@ -471,12 +449,12 @@ const visibleDuesMembers = ref([
 }
 
 .role-badge {
-  background: rgba(255,255,255,0.2);
-  backdrop-filter: blur(10px);
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(4px);
   border-radius: 9999px;
   padding: 0.75rem 1.5rem;
-  border: 1px solid rgba(255,255,255,0.3);
-  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
+  border: 1px solid rgba(255,255,255,0.2);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -487,8 +465,8 @@ const visibleDuesMembers = ref([
 }
 
 .role-text {
-  color: white;
-  font-weight: bold;
+  color: #27272a;
+  font-weight: 600;
 }
 
 .divider {
@@ -498,30 +476,32 @@ const visibleDuesMembers = ref([
 }
 
 .org-name {
-  color: #fecaca;
+  color: #6b7280;
   font-weight: 500;
 }
 
 /* Actions Section */
 .actions-section {
-  animation: slide-up 0.6s ease-out;
-  animation-delay: 200ms;
+  animation: fade-in 0.3s ease-out;
+  animation-delay: 100ms;
   animation-fill-mode: both;
 }
 
 .date-card {
-  background: rgba(255,255,255,0.1);
-  backdrop-filter: blur(10px);
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(2px);
   border-radius: 1rem;
   padding: 1.5rem;
-  border: 1px solid rgba(255,255,255,0.2);
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
-  transition: background 0.3s;
+  border: 1px solid rgba(0,0,0,0.05);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  transition: all 0.3s;
   margin-bottom: 1rem;
 }
 
 .date-card:hover {
-  background: rgba(255,255,255,0.15);
+  background: rgba(255,255,255,0.8);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
 }
 
 .date-header {
@@ -536,14 +516,14 @@ const visibleDuesMembers = ref([
 }
 
 .date-label {
-  color: #fecaca;
+  color: #6b7280;
   font-weight: 600;
 }
 
 .date-text {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: white;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #27272a;
   line-height: 1.2;
 }
 
@@ -582,25 +562,27 @@ const visibleDuesMembers = ref([
 }
 
 .action-alerts {
-  background: rgba(255,255,255,0.1);
-  backdrop-filter: blur(10px);
-  color: white;
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(2px);
+  color: #27272a;
+  border: 1px solid rgba(0,0,0,0.05);
 }
 
 .action-alerts:hover {
-  background: rgba(255,255,255,0.2);
-  transform: scale(1.05);
+  background: rgba(255,255,255,0.8);
+  transform: translateY(-2px);
 }
 
 .action-primary {
-  background: white;
-  color: #dc2626;
-  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+  background: #dc2626;
+  color: white;
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
 }
 
 .action-primary:hover {
-  background: #fee2e2;
-  transform: scale(1.05);
+  background: #b91c1c;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
 }
 
 .action-icon {
@@ -631,30 +613,32 @@ const visibleDuesMembers = ref([
 }
 
 .stat-card {
-  background: white;
-  border-radius: 1.5rem;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 1rem;
   padding: 1.5rem;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   border: 1px solid rgba(0,0,0,0.05);
-  transition: all 0.3s;
+  transition: all 0.2s;
   display: flex;
   align-items: flex-start;
   gap: 1rem;
 }
 
 .stat-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .stat-icon {
-  font-size: 2rem;
-  width: 48px;
-  height: 48px;
+  font-size: 1.5rem;
+  width: 40px;
+  height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  border: 1px solid rgba(220, 38, 38, 0.1);
   border-radius: 0.75rem;
 }
 
@@ -706,16 +690,18 @@ const visibleDuesMembers = ref([
 }
 
 .dues-card {
-  background: white;
-  border-radius: 1.5rem;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 1rem;
   padding: 1.5rem;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
   border: 1px solid rgba(0,0,0,0.05);
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .dues-card:hover {
-  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+  background: rgba(255, 255, 255, 0.95);
 }
 
 .member-header {
@@ -776,20 +762,20 @@ const visibleDuesMembers = ref([
 .btn-pay {
   width: 100%;
   padding: 0.75rem;
-  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  background: rgba(255, 255, 255, 0.6);
   color: #dc2626;
   font-weight: 600;
-  border: 1px solid #fecaca;
+  border: 1px solid rgba(220, 38, 38, 0.2);
   border-radius: 0.75rem;
   cursor: pointer;
-  transition: all 0.3s;
+  transition: all 0.2s;
 }
 
 .btn-pay:hover {
-  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  background: #dc2626;
   color: white;
   transform: translateY(-2px);
-  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3);
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
 }
 
 .view-all-container {