diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index a669cf4..d4cf44a 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -302,7 +302,86 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
 // ============================================
-// 5. Layout Enhancements
+// 5. Form Input Enhancements
+// ============================================
+
+// Glass morphism for form inputs
+.glass-input {
+  .v-input__control {
+    background: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: $radius-xl;
+    transition: all $duration-base $ease-smooth;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+      border-color: rgba($monaco-red-600, 0.2);
+    }
+  }
+  
+  &.v-input--focused {
+    .v-input__control {
+      background: rgba(255, 255, 255, 0.9);
+      border-color: $monaco-red-600;
+      box-shadow: 0 0 0 3px rgba($monaco-red-600, 0.1);
+    }
+  }
+}
+
+// Floating label animation
+.floating-label {
+  .v-label {
+    transition: all $duration-base $ease-smooth;
+    transform-origin: left center;
+  }
+  
+  &.v-input--focused,
+  &.v-input--dirty {
+    .v-label {
+      transform: translateY(-150%) scale(0.85);
+      color: $monaco-red-600;
+    }
+  }
+}
+
+// Glass select dropdown
+.glass-select {
+  .v-select__control {
+    @include glass-effect(0.7, 10px);
+    border-radius: $radius-xl;
+    
+    &:hover {
+      background: rgba(255, 255, 255, 0.85);
+    }
+  }
+  
+  .v-menu__content {
+    @include glass-effect(0.95, 20px);
+    border-radius: $radius-xl;
+    margin-top: 4px;
+  }
+}
+
+// Glass checkbox and radio
+.glass-checkbox,
+.glass-radio {
+  .v-selection-control__wrapper {
+    @include glass-effect(0.6, 5px);
+    border-radius: $radius-md;
+    padding: 0.25rem;
+  }
+  
+  &.v-input--dirty {
+    .v-selection-control__input {
+      color: $monaco-red-600;
+    }
+  }
+}
+
+// ============================================
+// 6. Layout Enhancements
 // ============================================
 
 // Navigation Drawer Glass Effect
@@ -367,7 +446,100 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
 }
 
 // ============================================
-// 6. Animation Classes
+// 6. Dialog & Modal Enhancements
+// ============================================
+
+// Glass morphism dialogs
+.glass-dialog {
+  .v-card {
+    @include enhanced-glass(0.95, 30px);
+    border-radius: $radius-2xl !important;
+    
+    .v-card-title {
+      background: linear-gradient(135deg, rgba($monaco-red-600, 0.05) 0%, rgba($monaco-red-700, 0.05) 100%);
+      border-bottom: 1px solid rgba($monaco-red-600, 0.1);
+      padding: 1.25rem 1.5rem;
+      font-weight: 600;
+    }
+    
+    .v-card-text {
+      padding: 1.5rem;
+    }
+    
+    .v-card-actions {
+      background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
+      border-top: 1px solid rgba(255, 255, 255, 0.3);
+      padding: 1rem 1.5rem;
+    }
+  }
+}
+
+// Glass overlay
+.glass-overlay {
+  .v-overlay__scrim {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+  }
+}
+
+// Modal animations
+.modal-enter-active {
+  animation: modal-enter $duration-base $ease-out-back;
+}
+
+.modal-leave-active {
+  animation: modal-leave $duration-fast $ease-smooth;
+}
+
+@keyframes modal-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.9) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes modal-leave {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(10px);
+  }
+}
+
+// Alert/Snackbar glass effect
+.glass-snackbar {
+  .v-snackbar__wrapper {
+    @include glass-colored($monaco-red-600, 0.15, 20px);
+    
+    .v-snackbar__content {
+      color: $gray-900;
+      font-weight: 500;
+    }
+  }
+  
+  &.success {
+    .v-snackbar__wrapper {
+      @include glass-colored(#10b981, 0.15, 20px);
+    }
+  }
+  
+  &.error {
+    .v-snackbar__wrapper {
+      @include glass-colored(#ef4444, 0.15, 20px);
+    }
+  }
+}
+
+// ============================================
+// 7. Animation Classes
 // ============================================
 
 @keyframes fade-in {
@@ -397,6 +569,52 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   }
 }
 
+// Shimmer effect for logos and badges
+@keyframes shimmer {
+  0% {
+    background-position: -1000px 0;
+  }
+  100% {
+    background-position: 1000px 0;
+  }
+}
+
+// Pulse animation for notifications
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Float animation for dashboard elements
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+// Glow pulse for important elements
+@keyframes glow-pulse {
+  0%, 100% {
+    box-shadow: 0 0 20px rgba($monaco-red-600, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba($monaco-red-600, 0.5);
+  }
+}
+
 .animate-fade-in {
   animation: fade-in $duration-base $ease-smooth;
 }
@@ -409,8 +627,130 @@ $ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
   animation: scale-in $duration-base $ease-smooth;
 }
 
+.animate-shimmer {
+  background: linear-gradient(
+    90deg,
+    rgba(255,255,255,0) 0%,
+    rgba(255,255,255,0.4) 50%,
+    rgba(255,255,255,0) 100%
+  );
+  background-size: 1000px 100%;
+  animation: shimmer 2s infinite;
+}
+
+.animate-pulse {
+  animation: pulse 2s infinite;
+}
+
+.animate-float {
+  animation: float 3s ease-in-out infinite;
+}
+
+.animate-glow-pulse {
+  animation: glow-pulse 2s ease-in-out infinite;
+}
+
 // ============================================
-// 7. Utility Classes
+// 8. Enhanced Button Styles
+// ============================================
+
+// Override Vuetify button styles globally
+.v-btn {
+  text-transform: none !important;
+  font-weight: 600;
+  letter-spacing: 0.025em;
+  transition: all $duration-base $ease-smooth;
+  
+  // Primary gradient button
+  &.v-btn--elevated {
+    background: $gradient-monaco !important;
+    color: white !important;
+    box-shadow: $shadow-md;
+    
+    &:hover:not(:disabled) {
+      background: $gradient-monaco-dark !important;
+      box-shadow: $shadow-monaco;
+      transform: translateY(-2px);
+    }
+    
+    &:active:not(:disabled) {
+      transform: translateY(0);
+      box-shadow: $shadow-sm;
+    }
+  }
+  
+  // Outlined button with gradient border
+  &.v-btn--outlined {
+    position: relative;
+    border: 2px solid $monaco-red-600;
+    color: $monaco-red-600;
+    
+    &:hover:not(:disabled) {
+      background: rgba($monaco-red-600, 0.05);
+      transform: translateY(-1px);
+      box-shadow: $shadow-sm;
+    }
+  }
+  
+  // Text button with gradient text
+  &.v-btn--text {
+    background: transparent;
+    color: $monaco-red-600;
+    
+    &:hover:not(:disabled) {
+      background: rgba($monaco-red-600, 0.05);
+    }
+  }
+  
+  // Flat/tonal button with glass effect
+  &.v-btn--flat,
+  &.v-btn--tonal {
+    @include glass-effect(0.7, 10px);
+    
+    &:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.9);
+      transform: translateY(-1px);
+    }
+  }
+  
+  // Icon button with glass effect
+  &.v-btn--icon {
+    @include glass-effect(0.6, 8px);
+    
+    &:hover:not(:disabled) {
+      @include glass-colored($monaco-red-600, 0.1, 10px);
+      transform: rotate(5deg) scale(1.1);
+    }
+  }
+  
+  // Floating action button
+  &.v-btn--fab {
+    background: $gradient-monaco !important;
+    color: white !important;
+    box-shadow: $shadow-monaco;
+    
+    &:hover:not(:disabled) {
+      transform: translateY(-3px) rotate(5deg);
+      box-shadow: $shadow-monaco-intense;
+    }
+  }
+  
+  // Loading state
+  &.v-btn--loading {
+    .v-btn__loader {
+      color: white;
+    }
+  }
+  
+  // Disabled state
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+// ============================================
+// 9. Utility Classes
 // ============================================
 
 // Glass utilities
diff --git a/pages/member/dashboard/index.vue b/pages/member/dashboard/index.vue
index 87c45e6..6de08c7 100644
--- a/pages/member/dashboard/index.vue
+++ b/pages/member/dashboard/index.vue
@@ -1,45 +1,60 @@
 <template>
   <div class="member-dashboard">
-    <!-- Simple Header -->
-    <div class="dashboard-header">
-      <h1 class="dashboard-title">Welcome back, {{ firstName }}</h1>
-      <p class="dashboard-subtitle">Member Dashboard</p>
+    <!-- Enhanced Glass Header -->
+    <div class="dashboard-header glass-header mb-6">
+      <h1 class="dashboard-title text-gradient">
+        Welcome back, {{ firstName }}!
+      </h1>
+      <p class="dashboard-subtitle">
+        Member Dashboard
+      </p>
+      <div class="text-center">
+        <v-chip class="glass-badge mt-2">
+          <v-icon start>mdi-account-circle</v-icon>
+          Member
+        </v-chip>
+      </div>
     </div>
 
-    <!-- Simple Two-Column Layout -->
-    <v-row class="dashboard-content">
-      <!-- Left Column - Profile -->
-      <v-col cols="12" md="4">
-        <SimpleProfileCard 
-          :member="memberData"
-          :email-verified="emailVerified"
-          @edit-profile="navigateTo('/member/profile')"
-        />
-      </v-col>
+    <!-- Bento Grid Layout -->
+    <div class="bento-grid mb-6">
+      <!-- Profile Card -->
+      <div class="bento-item bento-item--medium">
+        <div class="glass-card animated-entrance">
+          <SimpleProfileCard 
+            :member="memberData"
+            :email-verified="emailVerified"
+            @edit-profile="navigateTo('/member/profile')"
+          />
+        </div>
+      </div>
 
-      <!-- Right Column - Events -->
-      <v-col cols="12" md="8">
-        <EventsCard 
-          :events="upcomingEvents"
-          @view-all="navigateTo('/member/events')"
-        />
-      </v-col>
-    </v-row>
+      <!-- Events Card -->
+      <div class="bento-item bento-item--xlarge">
+        <div class="glass-card animated-entrance" style="animation-delay: 0.1s;">
+          <EventsCard 
+            :events="upcomingEvents"
+            @view-all="navigateTo('/member/events')"
+          />
+        </div>
+      </div>
+    </div>
 
-    <!-- Activity Timeline -->
-    <v-row class="mt-6">
-      <v-col cols="12">
-        <div class="activity-section">
-          <div class="section-header">
-            <h2 class="section-title">Recent Activity</h2>
+    <!-- Activity Timeline with Glass Effect -->
+    <div class="bento-grid">
+      <div class="bento-item bento-item--full">
+        <div class="glass-card animated-entrance" style="animation-delay: 0.2s;">
+          <div class="card-header">
+            <v-icon class="mr-2" color="primary">mdi-history</v-icon>
+            <h2 class="card-title text-gradient">Recent Activity</h2>
           </div>
           <ActivityTimeline 
             :activities="filteredActivities"
             :max-items="10"
           />
         </div>
-      </v-col>
-    </v-row>
+      </div>
+    </div>
 
 
   </div>
@@ -175,38 +190,29 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .member-dashboard {
-  padding: 2rem;
+  padding: 1rem;
   min-height: 100vh;
   background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
-  
-  @media (max-width: 768px) {
-    padding: 1rem;
-  }
 }
 
+/* Enhanced Glass Header */
 .dashboard-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 2.5rem;
+  margin-bottom: 2rem;
   padding: 2rem;
-  background: linear-gradient(135deg, 
+  border-radius: 20px;
+  background: linear-gradient(
+    135deg,
     rgba(255, 255, 255, 0.95),
     rgba(255, 255, 255, 0.85)
   );
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 1.25rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
   box-shadow: 
-    0 20px 40px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
-  
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 1.5rem;
-    padding: 1.5rem;
-  }
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6);
+  animation: slide-up 0.6s ease-out;
+  text-align: center;
 }
 
 .header-content {
@@ -215,30 +221,29 @@ onMounted(async () => {
 
 .dashboard-title {
   font-size: 2.5rem;
-  font-weight: 800;
-  margin: 0 0 0.5rem 0;
-  line-height: 1.2;
-  
-  @media (max-width: 768px) {
-    font-size: 2rem;
-  }
-}
-
-.title-gradient {
-  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.title-name {
-  color: rgb(31, 41, 55);
+  margin-bottom: 0.5rem;
+  animation: fade-in 0.8s ease-out;
 }
 
 .dashboard-subtitle {
-  font-size: 1.125rem;
-  color: rgb(107, 114, 128);
-  margin: 0;
+  color: #71717a;
+  font-size: 1.1rem;
+}
+
+.glass-badge {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
+  color: white !important;
+  font-weight: 600;
+}
+
+.text-gradient {
+  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .header-actions {
@@ -255,39 +260,71 @@ onMounted(async () => {
   margin-bottom: 3rem;
 }
 
-// Glass card base styles
-.glass-card {
-  background: linear-gradient(135deg, 
-    rgba(255, 255, 255, 0.9),
-    rgba(255, 255, 255, 0.7)
-  );
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border-radius: 1rem;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  box-shadow: 
-    0 8px 32px rgba(0, 0, 0, 0.08),
-    inset 0 1px 0 rgba(255, 255, 255, 0.5);
-  padding: 1.5rem;
-  height: 100%;
+/* Bento Grid Layout */
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    border-radius: 20px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    &--small { grid-column: span 3; }
+    &--medium { grid-column: span 4; }
+    &--large { grid-column: span 6; }
+    &--xlarge { grid-column: span 8; }
+    &--full { grid-column: span 12; }
+    
+    &:hover {
+      transform: translateY(-4px);
+    }
+  }
 }
 
-.activity-card {
-  .card-header {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    margin-bottom: 1.25rem;
-  }
+/* Enhanced Glass Card */
+.glass-card {
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85),
+    rgba(255, 255, 255, 0.75)
+  ) !important;
+  backdrop-filter: blur(30px) saturate(180%);
+  -webkit-backdrop-filter: blur(30px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 
+    0 8px 32px 0 rgba(31, 38, 135, 0.15),
+    inset 0 1px 2px rgba(255, 255, 255, 0.6),
+    inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
+  border-radius: 20px !important;
+  padding: 1.5rem;
+  height: 100%;
   
-  .card-title {
-    font-size: 1.125rem;
-    font-weight: 600;
-    color: rgb(31, 41, 55);
-    margin: 0;
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 
+      0 12px 40px 0 rgba(31, 38, 135, 0.25),
+      inset 0 1px 2px rgba(255, 255, 255, 0.8),
+      inset 0 -1px 2px rgba(0, 0, 0, 0.05) !important;
   }
 }
 
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid rgba(220, 38, 38, 0.1);
+}
+
+.card-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+}
+
 .quick-actions-section {
   margin-top: 2rem;
 }
@@ -309,4 +346,67 @@ onMounted(async () => {
     gap: 1rem;
   }
 }
+
+/* Animated Entrance */
+.animated-entrance {
+  animation: slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* Button Enhancements */
+.v-btn {
+  text-transform: none !important;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 1280px) {
+  .bento-grid {
+    .bento-item--xlarge {
+      grid-column: span 12;
+    }
+    .bento-item--large {
+      grid-column: span 6;
+    }
+    .bento-item--medium {
+      grid-column: span 6;
+    }
+  }
+}
+
+@media (max-width: 960px) {
+  .bento-grid {
+    .bento-item--large {
+      grid-column: span 12;
+    }
+    .bento-item--medium {
+      grid-column: span 12;
+    }
+  }
+}
 </style>