diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index a760b0d..a51fbf3 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -29,7 +29,8 @@
       "Bash(New-Item -Path \"Z:\\Repos\\monacousa-portal\\pages\\admin\\dashboard\\index.vue\" -ItemType File -Force)",
       "Bash(grep:*)",
       "Bash(findstr:*)",
-      "mcp__playwright__browser_close"
+      "mcp__playwright__browser_close",
+      "Bash(dir:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/.playwright-mcp/dashboard-current-state.png b/.playwright-mcp/dashboard-current-state.png
new file mode 100644
index 0000000..f70a038
Binary files /dev/null and b/.playwright-mcp/dashboard-current-state.png differ
diff --git a/Design/design-system.md b/Design/design-system.md
index e12570f..e50223c 100644
--- a/Design/design-system.md
+++ b/Design/design-system.md
@@ -1,4 +1,31 @@
-# MonacoUSA Portal Design System
+# MonacoUSA Portal Design System v2.0
+
+## Overview
+The MonacoUSA Portal design system represents a premium, modern approach to web application interfaces, combining cutting-edge UI patterns with sophisticated animations and interactions. This system prioritizes beauty, functionality, and user engagement through carefully crafted visual experiences.
+
+## Design Philosophy
+
+### Core Principles
+
+#### 1. **Visual Elegance**
+- Premium aesthetics that reflect Monaco's luxury and sophistication
+- Beautiful, engaging interfaces that delight users
+- Attention to detail in every interaction
+
+#### 2. **Motion & Life**
+- Smooth, purposeful animations that guide user attention
+- Micro-interactions that provide feedback and enhance usability
+- Transitions that create seamless navigation experiences
+
+#### 3. **Modern Architecture**
+- Bento grid layouts for flexible content organization
+- Component-based design for consistency and maintainability
+- Responsive patterns that adapt beautifully across devices
+
+#### 4. **Interactive Engagement**
+- Customizable interfaces that users can personalize
+- Draggable and reorderable components
+- Real-time updates with smooth animations
 
 ## 🎨 Visual Identity
 
@@ -748,6 +775,362 @@ $screen-2xl: 1536px; // 2X Extra large devices
 .text-justify { text-align: justify; }
 ```
 
+## 🎯 Dashboard Patterns
+
+### Bento Grid Layout
+Modern dashboard layout using CSS Grid with flexible item placement:
+
+```scss
+.bento-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 1.5rem;
+  
+  .bento-item {
+    @include glass-premium;
+    border-radius: $radius-2xl;
+    padding: $space-6;
+    transition: all $duration-base $ease-in-out-smooth;
+    
+    &--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; }
+    
+    &--tall { grid-row: span 2; }
+    
+    &:hover {
+      transform: translateY(-4px);
+      box-shadow: $shadow-glass-hover;
+    }
+  }
+}
+```
+
+### Widget Components
+
+#### Statistics Card
+```scss
+.stat-card {
+  @include glass-premium(0.8, 25px);
+  position: relative;
+  overflow: hidden;
+  
+  .stat-value {
+    font-size: $text-4xl;
+    font-weight: $font-bold;
+    background: $gradient-monaco;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  .stat-change {
+    display: inline-flex;
+    align-items: center;
+    padding: $space-1 $space-2;
+    border-radius: $radius-full;
+    font-size: $text-sm;
+    font-weight: $font-semibold;
+    
+    &--positive {
+      background: rgba($success-500, 0.1);
+      color: $success-600;
+    }
+    
+    &--negative {
+      background: rgba($monaco-red-500, 0.1);
+      color: $monaco-red-600;
+    }
+  }
+  
+  .stat-chart {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    opacity: 0.2;
+  }
+}
+```
+
+#### Activity Timeline
+```scss
+.timeline {
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: $gradient-monaco;
+    opacity: 0.2;
+  }
+  
+  .timeline-item {
+    position: relative;
+    padding-left: 50px;
+    margin-bottom: $space-6;
+    animation: slide-up $duration-base $ease-in-out-smooth;
+    animation-fill-mode: both;
+    
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 50}ms;
+      }
+    }
+    
+    .timeline-marker {
+      position: absolute;
+      left: 10px;
+      top: 0;
+      width: 20px;
+      height: 20px;
+      border-radius: $radius-full;
+      background: white;
+      border: 3px solid $monaco-red-600;
+      z-index: 1;
+      
+      &.pulse {
+        &::after {
+          content: '';
+          position: absolute;
+          inset: -5px;
+          border-radius: $radius-full;
+          border: 2px solid $monaco-red-600;
+          animation: pulse-ring 2s infinite;
+        }
+      }
+    }
+  }
+}
+```
+
+#### Draggable Dashboard
+```scss
+.draggable-grid {
+  .drag-handle {
+    position: absolute;
+    top: $space-4;
+    right: $space-4;
+    cursor: grab;
+    opacity: 0;
+    transition: opacity $duration-base;
+    
+    &:active {
+      cursor: grabbing;
+    }
+  }
+  
+  .draggable-item {
+    &:hover .drag-handle {
+      opacity: 0.5;
+    }
+    
+    &.dragging {
+      opacity: 0.5;
+      transform: scale(1.05);
+      z-index: 1000;
+    }
+    
+    &.drag-over {
+      background: rgba($monaco-red-600, 0.05);
+      border: 2px dashed $monaco-red-600;
+    }
+  }
+}
+```
+
+### Enhanced Glass Effects
+
+```scss
+@mixin glass-premium($opacity: 0.7, $blur: 30px) {
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, $opacity),
+    rgba(255, 255, 255, $opacity * 0.6)
+  );
+  backdrop-filter: blur($blur) saturate(180%);
+  -webkit-backdrop-filter: blur($blur) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 8px 32px rgba(0, 0, 0, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5),
+    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
+}
+
+@mixin glass-frosted($color: white, $opacity: 0.1) {
+  background: rgba($color, $opacity);
+  backdrop-filter: blur(40px) saturate(200%) contrast(120%);
+  -webkit-backdrop-filter: blur(40px) saturate(200%) contrast(120%);
+  border: 1px solid rgba($color, 0.2);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+}
+```
+
+### Animation Patterns for Dashboard
+
+#### Number Counter Animation
+```scss
+@keyframes count-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.counter {
+  display: inline-block;
+  animation: count-up $duration-slow $ease-out-back;
+  
+  .digit {
+    display: inline-block;
+    animation: count-up $duration-slow $ease-out-back;
+    animation-fill-mode: both;
+    
+    @for $i from 1 through 10 {
+      &:nth-child(#{$i}) {
+        animation-delay: #{$i * 50}ms;
+      }
+    }
+  }
+}
+```
+
+#### Progress Ring
+```scss
+.progress-ring {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  
+  svg {
+    transform: rotate(-90deg);
+  }
+  
+  .progress-ring-circle {
+    fill: none;
+    stroke-width: 8;
+    
+    &--bg {
+      stroke: rgba($gray-300, 0.3);
+    }
+    
+    &--fill {
+      stroke: url(#gradient-monaco);
+      stroke-linecap: round;
+      transition: stroke-dashoffset $duration-slow $ease-in-out-smooth;
+    }
+  }
+  
+  .progress-value {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: $text-2xl;
+    font-weight: $font-bold;
+  }
+}
+```
+
+### VueUse Motion Integration
+
+#### Configuration
+```javascript
+// Motion variants for dashboard components
+export const dashboardMotions = {
+  // Card entrance
+  cardEnter: {
+    initial: { opacity: 0, scale: 0.9 },
+    enter: { 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }
+    }
+  },
+  
+  // Statistics counter
+  statCounter: {
+    initial: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: {
+        duration: 600,
+        ease: 'easeOut'
+      }
+    }
+  },
+  
+  // Timeline item
+  timelineItem: {
+    initial: { opacity: 0, x: -20 },
+    visibleOnce: {
+      opacity: 1,
+      x: 0,
+      transition: {
+        duration: 500,
+        delay: 100
+      }
+    }
+  },
+  
+  // Hover lift
+  hoverLift: {
+    initial: { scale: 1 },
+    hovered: {
+      scale: 1.02,
+      y: -4,
+      transition: {
+        type: 'spring',
+        stiffness: 400,
+        damping: 10
+      }
+    }
+  }
+}
+```
+
+#### Usage Example
+```vue
+<template>
+  <div class="bento-grid">
+    <div 
+      v-motion="'statsCard'"
+      :initial="{ opacity: 0, y: 20 }"
+      :enter="{ 
+        opacity: 1, 
+        y: 0,
+        transition: {
+          delay: index * 100,
+          duration: 500
+        }
+      }"
+      :hovered="{
+        scale: 1.02,
+        y: -4
+      }"
+      class="bento-item bento-item--medium stat-card"
+    >
+      <!-- Card content -->
+    </div>
+  </div>
+</template>
+```
+
 ---
 
-*This design system provides the foundation for creating consistent, beautiful, and performant user interfaces across the MonacoUSA Portal.*
\ No newline at end of file
+*MonacoUSA Portal Design System v2.0 - Premium Design for Premium Experiences*
\ No newline at end of file
diff --git a/components/dashboard/ActivityTimeline.vue b/components/dashboard/ActivityTimeline.vue
new file mode 100644
index 0000000..c9acc33
--- /dev/null
+++ b/components/dashboard/ActivityTimeline.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="activity-timeline">
+    <div
+      v-for="(item, index) in activities"
+      :key="item.id"
+      v-motion
+      :initial="{ opacity: 0, x: -20 }"
+      :visibleOnce="{
+        opacity: 1,
+        x: 0,
+        transition: {
+          delay: index * 100,
+          duration: 500,
+          type: 'spring',
+          stiffness: 200
+        }
+      }"
+      class="timeline-item"
+      :class="{ 'timeline-item--last': index === activities.length - 1 }"
+    >
+      <!-- Timeline Marker -->
+      <div 
+        class="timeline-marker"
+        :class="[
+          `timeline-marker--${item.type}`,
+          { 'timeline-marker--pulse': item.isNew }
+        ]"
+      >
+        <v-icon 
+          :color="getIconColor(item.type)" 
+          size="16"
+        >
+          {{ item.icon }}
+        </v-icon>
+      </div>
+
+      <!-- Timeline Content -->
+      <div class="timeline-content">
+        <div class="timeline-header">
+          <h4 class="timeline-title">{{ item.title }}</h4>
+          <span class="timeline-time">{{ formatTime(item.timestamp) }}</span>
+        </div>
+        <p class="timeline-description">{{ item.description }}</p>
+        
+        <!-- Optional metadata -->
+        <div v-if="item.metadata" class="timeline-metadata">
+          <v-chip
+            v-for="(meta, key) in item.metadata"
+            :key="key"
+            size="x-small"
+            variant="tonal"
+            :color="getMetaColor(key)"
+            class="mr-1"
+          >
+            {{ meta }}
+          </v-chip>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface TimelineActivity {
+  id: string | number;
+  type: 'event' | 'payment' | 'achievement' | 'profile' | 'system';
+  title: string;
+  description: string;
+  timestamp: string | Date;
+  icon: string;
+  isNew?: boolean;
+  metadata?: Record<string, any>;
+}
+
+interface Props {
+  activities: TimelineActivity[];
+  maxItems?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  maxItems: 10
+});
+
+// Compute visible activities
+const visibleActivities = computed(() => {
+  return props.activities.slice(0, props.maxItems);
+});
+
+// Get icon color based on activity type
+const getIconColor = (type: string) => {
+  const colors: Record<string, string> = {
+    event: 'error',
+    payment: 'success',
+    achievement: 'warning',
+    profile: 'info',
+    system: 'grey'
+  };
+  return colors[type] || 'grey';
+};
+
+// Get metadata chip color
+const getMetaColor = (key: string) => {
+  const colors: Record<string, string> = {
+    status: 'success',
+    category: 'primary',
+    amount: 'warning',
+    level: 'info'
+  };
+  return colors[key] || 'grey';
+};
+
+// Format timestamp
+const formatTime = (timestamp: string | Date) => {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? 's' : ''} ago`;
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  
+  return date.toLocaleDateString('en-US', { 
+    month: 'short', 
+    day: 'numeric',
+    year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.activity-timeline {
+  position: relative;
+  padding-left: 2rem;
+
+  // Vertical line
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0.75rem;
+    top: 0.5rem;
+    bottom: 1rem;
+    width: 2px;
+    background: linear-gradient(
+      to bottom,
+      rgba(220, 38, 38, 0.3),
+      rgba(220, 38, 38, 0.1),
+      transparent
+    );
+  }
+}
+
+.timeline-item {
+  position: relative;
+  padding-bottom: 1.5rem;
+  
+  &--last {
+    padding-bottom: 0;
+  }
+}
+
+.timeline-marker {
+  position: absolute;
+  left: -1.25rem;
+  top: 0.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  border: 2px solid;
+  z-index: 1;
+  transition: all 0.3s ease;
+
+  &--event {
+    border-color: rgb(220, 38, 38);
+    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05));
+  }
+
+  &--payment {
+    border-color: rgb(34, 197, 94);
+    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05));
+  }
+
+  &--achievement {
+    border-color: rgb(245, 158, 11);
+    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05));
+  }
+
+  &--profile {
+    border-color: rgb(59, 130, 246);
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
+  }
+
+  &--system {
+    border-color: rgb(156, 163, 175);
+    background: linear-gradient(135deg, rgba(156, 163, 175, 0.1), rgba(156, 163, 175, 0.05));
+  }
+
+  &--pulse {
+    &::after {
+      content: '';
+      position: absolute;
+      inset: -6px;
+      border-radius: 50%;
+      border: 2px solid currentColor;
+      opacity: 0;
+      animation: pulse-ring 2s infinite;
+    }
+  }
+}
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.8);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.2);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+}
+
+.timeline-content {
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.6)
+  );
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateX(4px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+  }
+}
+
+.timeline-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 0.5rem;
+}
+
+.timeline-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.timeline-time {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  white-space: nowrap;
+}
+
+.timeline-description {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.5rem 0;
+  line-height: 1.5;
+}
+
+.timeline-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+@media (max-width: 640px) {
+  .activity-timeline {
+    padding-left: 1.5rem;
+  }
+
+  .timeline-marker {
+    left: -1rem;
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .timeline-content {
+    padding: 0.75rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/BentoGrid.vue b/components/dashboard/BentoGrid.vue
new file mode 100644
index 0000000..f0b0ceb
--- /dev/null
+++ b/components/dashboard/BentoGrid.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="bento-grid" :class="gridClass">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  columns?: number;
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  responsive?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  columns: 12,
+  gap: 'md',
+  responsive: true
+});
+
+const gridClass = computed(() => {
+  return {
+    [`bento-grid--cols-${props.columns}`]: true,
+    [`bento-grid--gap-${props.gap}`]: true,
+    'bento-grid--responsive': props.responsive
+  };
+});
+</script>
+
+<style scoped lang="scss">
+.bento-grid {
+  display: grid;
+  width: 100%;
+  
+  // Column configurations
+  &--cols-12 {
+    grid-template-columns: repeat(12, 1fr);
+  }
+  
+  &--cols-6 {
+    grid-template-columns: repeat(6, 1fr);
+  }
+  
+  &--cols-4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  
+  &--cols-3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  // Gap sizes
+  &--gap-sm {
+    gap: 0.75rem;
+  }
+  
+  &--gap-md {
+    gap: 1.25rem;
+  }
+  
+  &--gap-lg {
+    gap: 1.75rem;
+  }
+  
+  &--gap-xl {
+    gap: 2.25rem;
+  }
+  
+  // Responsive behavior
+  &--responsive {
+    @media (max-width: 640px) {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+    
+    @media (min-width: 641px) and (max-width: 768px) {
+      grid-template-columns: repeat(6, 1fr);
+    }
+    
+    @media (min-width: 769px) and (max-width: 1024px) {
+      grid-template-columns: repeat(8, 1fr);
+    }
+  }
+}
+
+// Global Bento Item Classes
+:deep(.bento-item) {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  // Size variants
+  &--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;
+  }
+  
+  // Height variants
+  &--tall {
+    grid-row: span 2;
+  }
+  
+  &--xtall {
+    grid-row: span 3;
+  }
+  
+  // Responsive overrides
+  @media (max-width: 640px) {
+    &--small,
+    &--medium,
+    &--large,
+    &--xlarge {
+      grid-column: span 12;
+    }
+  }
+  
+  @media (min-width: 641px) and (max-width: 768px) {
+    &--small {
+      grid-column: span 3;
+    }
+    
+    &--medium,
+    &--large {
+      grid-column: span 6;
+    }
+    
+    &--xlarge {
+      grid-column: span 6;
+    }
+  }
+  
+  @media (min-width: 769px) and (max-width: 1024px) {
+    &--small {
+      grid-column: span 3;
+    }
+    
+    &--medium {
+      grid-column: span 4;
+    }
+    
+    &--large {
+      grid-column: span 6;
+    }
+    
+    &--xlarge {
+      grid-column: span 8;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/EventsCard.vue b/components/dashboard/EventsCard.vue
new file mode 100644
index 0000000..7ca5faa
--- /dev/null
+++ b/components/dashboard/EventsCard.vue
@@ -0,0 +1,315 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: 400,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="events-card"
+  >
+    <div class="events-header">
+      <div class="header-left">
+        <v-icon color="error" size="20">mdi-calendar</v-icon>
+        <h3 class="events-title">Upcoming Events</h3>
+      </div>
+      <v-btn
+        variant="text"
+        color="error"
+        size="small"
+        @click="$emit('view-all')"
+      >
+        View All
+        <v-icon end size="16">mdi-arrow-right</v-icon>
+      </v-btn>
+    </div>
+
+    <div class="events-list">
+      <div
+        v-for="(event, index) in events"
+        :key="event.id"
+        v-motion
+        :initial="{ opacity: 0, x: -20 }"
+        :enter="{
+          opacity: 1,
+          x: 0,
+          transition: {
+            delay: 500 + (index * 100),
+            duration: 500,
+            type: 'spring'
+          }
+        }"
+        class="event-item"
+        :class="{ 'event-item--pending': event.status === 'pending' }"
+      >
+        <div class="event-date">
+          <div class="date-month">{{ formatMonth(event.date) }}</div>
+          <div class="date-day">{{ formatDay(event.date) }}</div>
+        </div>
+        
+        <div class="event-details">
+          <h4 class="event-name">{{ event.title }}</h4>
+          <div class="event-meta">
+            <span class="event-time">
+              <v-icon size="14" color="grey">mdi-clock-outline</v-icon>
+              {{ event.time }}
+            </span>
+            <span class="event-location">
+              <v-icon size="14" color="grey">mdi-map-marker</v-icon>
+              {{ event.location }}
+            </span>
+          </div>
+        </div>
+
+        <div class="event-status">
+          <v-chip
+            :color="event.status === 'confirmed' ? 'success' : 'warning'"
+            size="x-small"
+            variant="tonal"
+          >
+            {{ event.status }}
+          </v-chip>
+        </div>
+      </div>
+    </div>
+
+    <div class="events-footer">
+      <div class="footer-stats">
+        <span class="stat-item">
+          <v-icon size="16" color="error">mdi-check-circle</v-icon>
+          {{ confirmedCount }} confirmed
+        </span>
+        <span class="stat-item">
+          <v-icon size="16" color="warning">mdi-clock</v-icon>
+          {{ pendingCount }} pending
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Event {
+  id: string;
+  title: string;
+  date: string;
+  time: string;
+  location: string;
+  status: 'confirmed' | 'pending';
+}
+
+interface Props {
+  events: Event[];
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'view-all': [];
+}>();
+
+// Computed stats
+const confirmedCount = computed(() => 
+  props.events.filter(e => e.status === 'confirmed').length
+);
+
+const pendingCount = computed(() => 
+  props.events.filter(e => e.status === 'pending').length
+);
+
+// Date formatting
+const formatMonth = (dateString: string) => {
+  return new Date(dateString).toLocaleDateString('en-US', { month: 'short' }).toUpperCase();
+};
+
+const formatDay = (dateString: string) => {
+  return new Date(dateString).getDate();
+};
+</script>
+
+<style scoped lang="scss">
+.events-card {
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.events-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.events-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.events-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  overflow-y: auto;
+  padding-right: 0.5rem;
+  
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: rgba(220, 38, 38, 0.05);
+    border-radius: 2px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: rgba(220, 38, 38, 0.2);
+    border-radius: 2px;
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.3);
+    }
+  }
+}
+
+.event-item {
+  display: flex;
+  gap: 1rem;
+  padding: 1rem;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.8),
+    rgba(255, 255, 255, 0.6)
+  );
+  border-radius: 0.75rem;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  transition: all 0.3s ease;
+  cursor: pointer;
+  
+  &:hover {
+    transform: translateX(4px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+  
+  &--pending {
+    opacity: 0.8;
+    border-style: dashed;
+  }
+}
+
+.event-date {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
+}
+
+.date-month {
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+}
+
+.date-day {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.event-details {
+  flex: 1;
+  min-width: 0;
+}
+
+.event-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.25rem 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.event-meta {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.75rem;
+  color: rgb(107, 114, 128);
+  
+  span {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+}
+
+.event-status {
+  flex-shrink: 0;
+  align-self: center;
+}
+
+.events-footer {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(220, 38, 38, 0.1);
+}
+
+.footer-stats {
+  display: flex;
+  gap: 1.5rem;
+  justify-content: center;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  font-weight: 500;
+}
+
+@media (max-width: 640px) {
+  .event-meta {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/PaymentCard.vue b/components/dashboard/PaymentCard.vue
new file mode 100644
index 0000000..1c84ac3
--- /dev/null
+++ b/components/dashboard/PaymentCard.vue
@@ -0,0 +1,348 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :enter="{
+      opacity: 1,
+      scale: 1,
+      transition: {
+        delay: 600,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="payment-card"
+  >
+    <!-- Card Header -->
+    <div class="payment-header">
+      <div class="header-left">
+        <v-icon color="success" size="20">mdi-credit-card</v-icon>
+        <h3 class="payment-title">Payment Status</h3>
+      </div>
+      <v-chip
+        color="success"
+        variant="tonal"
+        size="small"
+      >
+        <v-icon start size="14">mdi-check-circle</v-icon>
+        Active
+      </v-chip>
+    </div>
+
+    <!-- Membership Info -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{
+        opacity: 1,
+        transition: {
+          delay: 700,
+          duration: 500
+        }
+      }"
+      class="membership-info"
+    >
+      <div class="info-row">
+        <span class="info-label">Membership Type</span>
+        <span class="info-value">{{ membershipType }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">Next Payment</span>
+        <span class="info-value">{{ nextPaymentDate }}</span>
+      </div>
+      <div class="info-row">
+        <span class="info-label">Amount</span>
+        <span class="info-value amount">${{ membershipAmount }}</span>
+      </div>
+    </div>
+
+    <!-- Payment Method -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 10 }"
+      :enter="{
+        opacity: 1,
+        y: 0,
+        transition: {
+          delay: 800,
+          duration: 500
+        }
+      }"
+      class="payment-method"
+    >
+      <div class="method-header">
+        <span class="method-label">Payment Method</span>
+        <v-btn
+          variant="text"
+          color="error"
+          size="x-small"
+          @click="$emit('update-payment')"
+        >
+          Update
+        </v-btn>
+      </div>
+      <div class="method-card">
+        <v-icon color="primary" size="20">mdi-credit-card</v-icon>
+        <span class="card-number">•••• •••• •••• 4242</span>
+        <span class="card-exp">12/25</span>
+      </div>
+    </div>
+
+    <!-- Recent Payments -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{
+        opacity: 1,
+        transition: {
+          delay: 900,
+          duration: 500
+        }
+      }"
+      class="recent-payments"
+    >
+      <h4 class="payments-title">Recent Payments</h4>
+      <div class="payments-list">
+        <div
+          v-for="(payment, index) in paymentHistory"
+          :key="payment.id"
+          v-motion
+          :initial="{ opacity: 0, x: -10 }"
+          :visibleOnce="{
+            opacity: 1,
+            x: 0,
+            transition: {
+              delay: 1000 + (index * 50),
+              duration: 400
+            }
+          }"
+          class="payment-item"
+        >
+          <v-icon 
+            size="16" 
+            :color="index === 0 ? 'success' : 'grey'"
+          >
+            mdi-check-circle
+          </v-icon>
+          <span class="payment-date">{{ payment.date }}</span>
+          <span class="payment-amount">${{ payment.amount }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action Button -->
+    <v-btn
+      color="error"
+      variant="outlined"
+      block
+      class="mt-4"
+      prepend-icon="mdi-history"
+      @click="$emit('update-payment')"
+    >
+      View Payment History
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Payment {
+  id: number;
+  date: string;
+  amount: string;
+}
+
+interface Props {
+  membershipType: string;
+  nextPaymentDate: string;
+  membershipAmount: string;
+  paymentHistory: Payment[];
+}
+
+defineProps<Props>();
+
+defineEmits<{
+  'update-payment': [];
+}>();
+</script>
+
+<style scoped lang="scss">
+.payment-card {
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.payment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.payment-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+}
+
+.membership-info {
+  background: linear-gradient(135deg, 
+    rgba(34, 197, 94, 0.05),
+    rgba(34, 197, 94, 0.02)
+  );
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid rgba(34, 197, 94, 0.1);
+}
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.375rem 0;
+  
+  &:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  }
+}
+
+.info-label {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  font-weight: 500;
+}
+
+.info-value {
+  font-size: 0.875rem;
+  color: rgb(31, 41, 55);
+  font-weight: 600;
+  
+  &.amount {
+    font-size: 1.125rem;
+    background: linear-gradient(135deg, #22c55e, #16a34a);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+}
+
+.payment-method {
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0.75rem;
+  padding: 1rem;
+  margin-bottom: 1.25rem;
+}
+
+.method-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+
+.method-label {
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.method-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.9),
+    rgba(255, 255, 255, 0.7)
+  );
+  border-radius: 0.5rem;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.card-number {
+  flex: 1;
+  font-family: 'Courier New', monospace;
+  font-size: 0.875rem;
+  color: rgb(31, 41, 55);
+  letter-spacing: 0.05em;
+}
+
+.card-exp {
+  font-size: 0.75rem;
+  color: rgb(107, 114, 128);
+}
+
+.recent-payments {
+  flex: 1;
+  margin-bottom: 1rem;
+}
+
+.payments-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.75rem 0;
+}
+
+.payments-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.payment-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 0.5rem;
+  transition: all 0.2s ease;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.5);
+    transform: translateX(2px);
+  }
+}
+
+.payment-date {
+  flex: 1;
+  font-size: 0.8125rem;
+  color: rgb(107, 114, 128);
+}
+
+.payment-amount {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+}
+
+@media (max-width: 640px) {
+  .payment-card {
+    padding: 1rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/ProfileCard.vue b/components/dashboard/ProfileCard.vue
new file mode 100644
index 0000000..fb56e78
--- /dev/null
+++ b/components/dashboard/ProfileCard.vue
@@ -0,0 +1,443 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, scale: 0.95 }"
+    :enter="{ 
+      opacity: 1, 
+      scale: 1,
+      transition: {
+        duration: 600,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    class="profile-card"
+  >
+    <!-- Background Gradient -->
+    <div class="profile-background">
+      <div class="profile-gradient"></div>
+      <div class="profile-pattern"></div>
+    </div>
+
+    <!-- Content -->
+    <div class="profile-content">
+      <!-- Header Section -->
+      <div class="profile-header">
+        <div class="profile-avatar-wrapper">
+          <div 
+            v-motion
+            :initial="{ scale: 0 }"
+            :enter="{ 
+              scale: 1,
+              transition: {
+                delay: 200,
+                type: 'spring',
+                stiffness: 200
+              }
+            }"
+            class="profile-avatar"
+          >
+            <ProfileAvatar
+              v-if="member"
+              :member-id="member.member_id"
+              :first-name="member.first_name"
+              :last-name="member.last_name"
+              size="x-large"
+              :show-badge="false"
+            />
+          </div>
+          <div class="profile-level-badge">
+            <v-icon size="16" color="white">mdi-star</v-icon>
+            <span>{{ memberLevel }}</span>
+          </div>
+        </div>
+
+        <div class="profile-info">
+          <h2 
+            v-motion
+            :initial="{ opacity: 0, y: 10 }"
+            :enter="{ 
+              opacity: 1, 
+              y: 0,
+              transition: {
+                delay: 300,
+                duration: 500
+              }
+            }"
+            class="profile-name"
+          >
+            {{ fullName }}
+          </h2>
+          <p class="profile-email">{{ email }}</p>
+          <div class="profile-badges">
+            <v-chip
+              color="error"
+              variant="tonal"
+              size="small"
+              class="profile-badge"
+            >
+              <v-icon start size="14">mdi-crown</v-icon>
+              {{ membershipType }}
+            </v-chip>
+            <v-chip
+              variant="outlined"
+              color="error"
+              size="small"
+              class="profile-badge"
+            >
+              <v-icon start size="14">mdi-calendar</v-icon>
+              Since {{ memberSince }}
+            </v-chip>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats Section -->
+      <div class="profile-stats">
+        <div 
+          v-for="(stat, index) in stats"
+          :key="stat.label"
+          v-motion
+          :initial="{ opacity: 0, y: 20 }"
+          :enter="{ 
+            opacity: 1, 
+            y: 0,
+            transition: {
+              delay: 400 + (index * 100),
+              duration: 500
+            }
+          }"
+          class="stat-item"
+        >
+          <div class="stat-value">{{ stat.value }}</div>
+          <div class="stat-label">{{ stat.label }}</div>
+        </div>
+      </div>
+
+      <!-- Progress Section -->
+      <div 
+        v-motion
+        :initial="{ opacity: 0 }"
+        :enter="{ 
+          opacity: 1,
+          transition: {
+            delay: 700,
+            duration: 500
+          }
+        }"
+        class="profile-progress"
+      >
+        <div class="progress-header">
+          <span class="progress-title">Level Progress</span>
+          <span class="progress-percentage">{{ levelProgress }}%</span>
+        </div>
+        <div class="progress-bar">
+          <div 
+            class="progress-fill"
+            :style="{ width: `${levelProgress}%` }"
+          ></div>
+        </div>
+        <p class="progress-subtitle">
+          {{ pointsToNext }} points to {{ nextLevel }}
+        </p>
+      </div>
+
+      <!-- Action Button -->
+      <v-btn
+        color="error"
+        variant="flat"
+        block
+        class="profile-action mt-4"
+        prepend-icon="mdi-account-edit"
+        @click="$emit('edit-profile')"
+      >
+        Edit Profile
+      </v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Member } from '~/utils/types';
+
+interface Props {
+  member: Member | null;
+  memberPoints?: number;
+  eventsAttended?: number;
+  connections?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  memberPoints: 2450,
+  eventsAttended: 12,
+  connections: 48
+});
+
+const emit = defineEmits<{
+  'edit-profile': [];
+}>();
+
+// Computed properties
+const fullName = computed(() => {
+  if (props.member) {
+    return `${props.member.first_name} ${props.member.last_name}`;
+  }
+  return 'Member';
+});
+
+const email = computed(() => props.member?.email || '');
+
+const membershipType = computed(() => 'Premium');
+const memberLevel = computed(() => 'Gold');
+
+const memberSince = computed(() => {
+  if (props.member?.join_date) {
+    return new Date(props.member.join_date).getFullYear();
+  }
+  return new Date().getFullYear();
+});
+
+// Stats data
+const stats = computed(() => [
+  { label: 'Points', value: props.memberPoints.toLocaleString() },
+  { label: 'Events', value: props.eventsAttended },
+  { label: 'Connections', value: props.connections }
+]);
+
+// Level progress calculation
+const levelProgress = computed(() => {
+  // Calculate progress to next level (mock calculation)
+  const currentLevelMin = 2000;
+  const nextLevelMin = 3000;
+  const progress = ((props.memberPoints - currentLevelMin) / (nextLevelMin - currentLevelMin)) * 100;
+  return Math.min(Math.max(progress, 0), 100).toFixed(0);
+});
+
+const pointsToNext = computed(() => {
+  const nextLevelMin = 3000;
+  return nextLevelMin - props.memberPoints;
+});
+
+const nextLevel = computed(() => 'Platinum');
+</script>
+
+<style scoped lang="scss">
+.profile-card {
+  position: relative;
+  height: 100%;
+  background: linear-gradient(135deg, 
+    rgba(255, 255, 255, 0.95),
+    rgba(255, 255, 255, 0.85)
+  );
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+  border-radius: 1.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  overflow: hidden;
+}
+
+.profile-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  overflow: hidden;
+}
+
+.profile-gradient {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.9),
+    rgba(185, 28, 28, 0.9)
+  );
+}
+
+.profile-pattern {
+  position: absolute;
+  inset: 0;
+  opacity: 0.1;
+  background-image: 
+    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
+}
+
+.profile-content {
+  position: relative;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.profile-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.profile-avatar-wrapper {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.profile-avatar {
+  width: 80px;
+  height: 80px;
+  border-radius: 1rem;
+  overflow: hidden;
+  border: 4px solid white;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+}
+
+.profile-level-badge {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+  background: linear-gradient(135deg, #f59e0b, #d97706);
+  color: white;
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.5rem;
+  font-size: 0.625rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
+}
+
+.profile-info {
+  flex: 1;
+  padding-top: 0.5rem;
+}
+
+.profile-name {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: rgb(31, 41, 55);
+  margin: 0 0 0.25rem 0;
+}
+
+.profile-email {
+  font-size: 0.875rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.75rem 0;
+}
+
+.profile-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.profile-badge {
+  font-weight: 500;
+}
+
+.profile-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  padding: 1.25rem;
+  background: linear-gradient(135deg, 
+    rgba(220, 38, 38, 0.03),
+    rgba(220, 38, 38, 0.01)
+  );
+  border-radius: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+.stat-item {
+  text-align: center;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1;
+  margin-bottom: 0.25rem;
+}
+
+.stat-label {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.profile-progress {
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.progress-title {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+}
+
+.progress-percentage {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: rgb(220, 38, 38);
+}
+
+.progress-bar {
+  height: 8px;
+  background: rgba(220, 38, 38, 0.1);
+  border-radius: 9999px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, #dc2626, #ef4444);
+  border-radius: 9999px;
+  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
+}
+
+.progress-subtitle {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  margin: 0;
+}
+
+.profile-action {
+  margin-top: auto;
+  font-weight: 600;
+  text-transform: none;
+  letter-spacing: 0;
+}
+
+@media (max-width: 768px) {
+  .profile-header {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .profile-badges {
+    justify-content: center;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/QuickActionCard.vue b/components/dashboard/QuickActionCard.vue
new file mode 100644
index 0000000..63d51b1
--- /dev/null
+++ b/components/dashboard/QuickActionCard.vue
@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-motion
+    :initial="{ opacity: 0, y: 20, scale: 0.9 }"
+    :enter="{
+      opacity: 1,
+      y: 0,
+      scale: 1,
+      transition: {
+        delay: delay,
+        duration: 500,
+        type: 'spring',
+        stiffness: 200
+      }
+    }"
+    :hovered="{
+      scale: 1.05,
+      y: -5,
+      transition: {
+        duration: 200
+      }
+    }"
+    class="quick-action-card"
+    @click="$emit('click')"
+  >
+    <div class="action-icon" :style="{ background: iconBackground }">
+      <v-icon :color="color" size="28">{{ icon }}</v-icon>
+    </div>
+    <h4 class="action-title">{{ title }}</h4>
+    <v-icon class="action-arrow" color="grey" size="16">mdi-arrow-right</v-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon: string;
+  title: string;
+  color?: string;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  color: 'error',
+  delay: 0
+});
+
+defineEmits<{
+  click: [];
+}>();
+
+// Compute icon background based on color
+const iconBackground = computed(() => {
+  const colors: Record<string, string> = {
+    error: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
+    primary: 'linear-gradient(135deg, rgba(33, 150, 243, 0.1), rgba(33, 150, 243, 0.05))',
+    success: 'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))',
+    warning: 'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))',
+    info: 'linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05))'
+  };
+  return colors[props.color] || colors.error;
+});
+</script>
+
+<style scoped lang="scss">
+.quick-action-card {
+  position: relative;
+  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: 1rem;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 
+    0 8px 24px rgba(0, 0, 0, 0.06),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  padding: 1.5rem;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(90deg, 
+      rgba(220, 38, 38, 0.3),
+      rgba(220, 38, 38, 0.1),
+      transparent
+    );
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+  }
+  
+  &:hover {
+    border-color: rgba(220, 38, 38, 0.2);
+    box-shadow: 
+      0 12px 32px rgba(0, 0, 0, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+    
+    &::before {
+      transform: translateX(0);
+    }
+    
+    .action-arrow {
+      transform: translateX(4px);
+      color: rgb(220, 38, 38) !important;
+    }
+    
+    .action-icon {
+      transform: rotate(-5deg) scale(1.1);
+    }
+  }
+}
+
+.action-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.action-title {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: rgb(31, 41, 55);
+  margin: 0;
+  line-height: 1.4;
+}
+
+.action-arrow {
+  position: absolute;
+  top: 1.5rem;
+  right: 1.5rem;
+  transition: all 0.3s ease;
+}
+
+@media (max-width: 640px) {
+  .quick-action-card {
+    padding: 1rem;
+  }
+  
+  .action-icon {
+    width: 48px;
+    height: 48px;
+  }
+  
+  .action-title {
+    font-size: 0.875rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/dashboard/StatsCard.vue b/components/dashboard/StatsCard.vue
new file mode 100644
index 0000000..1497efb
--- /dev/null
+++ b/components/dashboard/StatsCard.vue
@@ -0,0 +1,332 @@
+<template>
+  <div 
+    v-motion
+    :initial="{ opacity: 0, y: 20, scale: 0.95 }"
+    :enter="{ 
+      opacity: 1, 
+      y: 0,
+      scale: 1,
+      transition: {
+        delay: delay,
+        duration: 600,
+        type: 'spring',
+        stiffness: 200,
+        damping: 20
+      }
+    }"
+    :hovered="{
+      scale: 1.02,
+      y: -2,
+      transition: {
+        duration: 200
+      }
+    }"
+    class="stats-card"
+  >
+    <div class="stats-card-inner">
+      <!-- Icon Section -->
+      <div class="stats-icon" :style="{ background: iconBackground }">
+        <v-icon :color="iconColor" size="24">{{ icon }}</v-icon>
+      </div>
+
+      <!-- Content Section -->
+      <div class="stats-content">
+        <p class="stats-label">{{ label }}</p>
+        <div class="stats-value-wrapper">
+          <h3 
+            class="stats-value"
+            v-motion
+            :initial="{ opacity: 0 }"
+            :visible="{
+              opacity: 1,
+              transition: {
+                delay: delay + 200,
+                duration: 800
+              }
+            }"
+          >
+            <span v-if="prefix">{{ prefix }}</span>
+            <AnimatedNumber :value="value" :duration="1500" :format="formatNumber" />
+            <span v-if="suffix">{{ suffix }}</span>
+          </h3>
+          <div 
+            v-if="change !== undefined"
+            class="stats-change"
+            :class="changeClass"
+            v-motion
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :visible="{
+              opacity: 1,
+              scale: 1,
+              transition: {
+                delay: delay + 400,
+                duration: 500,
+                type: 'spring'
+              }
+            }"
+          >
+            <v-icon size="16">
+              {{ change >= 0 ? 'mdi-trending-up' : 'mdi-trending-down' }}
+            </v-icon>
+            <span>{{ Math.abs(change) }}%</span>
+          </div>
+        </div>
+        <p v-if="subtitle" class="stats-subtitle">{{ subtitle }}</p>
+      </div>
+
+      <!-- Background Decoration -->
+      <div class="stats-decoration">
+        <svg viewBox="0 0 200 100" class="stats-chart">
+          <path
+            :d="sparklinePath"
+            fill="none"
+            :stroke="decorationColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            opacity="0.2"
+          />
+          <path
+            :d="sparklinePath"
+            fill="url(#gradient)"
+            opacity="0.1"
+          />
+          <defs>
+            <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" :stop-color="decorationColor" stop-opacity="0.3" />
+              <stop offset="100%" :stop-color="decorationColor" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
+
+interface Props {
+  label: string;
+  value: number;
+  icon: string;
+  iconColor?: string;
+  iconBackground?: string;
+  change?: number;
+  prefix?: string;
+  suffix?: string;
+  subtitle?: string;
+  delay?: number;
+  decorationColor?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  iconColor: 'error',
+  iconBackground: 'linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(220, 38, 38, 0.05))',
+  delay: 0,
+  decorationColor: '#dc2626'
+});
+
+// Animated number component
+const AnimatedNumber = {
+  props: {
+    value: Number,
+    duration: { type: Number, default: 1000 },
+    format: Function
+  },
+  setup(props: any) {
+    const displayValue = ref(0);
+    
+    onMounted(() => {
+      const startTime = Date.now();
+      const startValue = 0;
+      const endValue = props.value;
+      
+      const updateValue = () => {
+        const now = Date.now();
+        const progress = Math.min((now - startTime) / props.duration, 1);
+        
+        // Easing function for smooth animation
+        const easeOutQuart = 1 - Math.pow(1 - progress, 4);
+        displayValue.value = startValue + (endValue - startValue) * easeOutQuart;
+        
+        if (progress < 1) {
+          requestAnimationFrame(updateValue);
+        } else {
+          displayValue.value = endValue;
+        }
+      };
+      
+      updateValue();
+    });
+    
+    const formattedValue = computed(() => {
+      if (props.format) {
+        return props.format(displayValue.value);
+      }
+      return Math.round(displayValue.value).toLocaleString();
+    });
+    
+    return () => formattedValue.value;
+  }
+};
+
+// Compute change indicator class
+const changeClass = computed(() => {
+  if (props.change === undefined) return '';
+  return props.change >= 0 ? 'stats-change--positive' : 'stats-change--negative';
+});
+
+// Format number function
+const formatNumber = (num: number) => {
+  if (num >= 1000000) {
+    return (num / 1000000).toFixed(1) + 'M';
+  } else if (num >= 1000) {
+    return (num / 1000).toFixed(1) + 'K';
+  }
+  return Math.round(num).toLocaleString();
+};
+
+// Generate random sparkline path
+const sparklinePath = computed(() => {
+  const points = 10;
+  const width = 200;
+  const height = 100;
+  const values = Array.from({ length: points }, () => Math.random() * 0.6 + 0.2);
+  
+  const path = values.map((value, index) => {
+    const x = (index / (points - 1)) * width;
+    const y = height - (value * height);
+    return `${index === 0 ? 'M' : 'L'} ${x} ${y}`;
+  }).join(' ');
+  
+  return `${path} L ${width} ${height} L 0 ${height} Z`;
+});
+</script>
+
+<style scoped lang="scss">
+.stats-card {
+  position: relative;
+  height: 100%;
+  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);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 
+      0 12px 40px rgba(0, 0, 0, 0.12),
+      inset 0 1px 0 rgba(255, 255, 255, 0.7);
+  }
+}
+
+.stats-card-inner {
+  position: relative;
+  padding: 1.5rem;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.stats-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 1rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.stats-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.stats-label {
+  font-size: 0.875rem;
+  color: rgb(107, 114, 128);
+  margin: 0 0 0.5rem 0;
+  font-weight: 500;
+}
+
+.stats-value-wrapper {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+  margin-bottom: 0.25rem;
+}
+
+.stats-value {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(135deg, #dc2626, #b91c1c);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  line-height: 1.2;
+}
+
+.stats-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+
+  &--positive {
+    background: rgba(34, 197, 94, 0.1);
+    color: rgb(34, 197, 94);
+  }
+
+  &--negative {
+    background: rgba(239, 68, 68, 0.1);
+    color: rgb(239, 68, 68);
+  }
+}
+
+.stats-subtitle {
+  font-size: 0.75rem;
+  color: rgb(156, 163, 175);
+  margin: 0.25rem 0 0 0;
+}
+
+.stats-decoration {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 60%;
+  height: 50%;
+  pointer-events: none;
+}
+
+.stats-chart {
+  width: 100%;
+  height: 100%;
+}
+
+@media (max-width: 640px) {
+  .stats-value {
+    font-size: 1.5rem;
+  }
+  
+  .stats-card-inner {
+    padding: 1rem;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f8c7c01..7507cdc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@types/jsonwebtoken": "^9.0.10",
         "@types/nodemailer": "^6.4.17",
         "@vite-pwa/nuxt": "^0.10.8",
+        "@vueuse/core": "^13.8.0",
         "@vueuse/motion": "^3.0.3",
         "cookie": "^0.6.0",
         "formidable": "^3.5.4",
diff --git a/package.json b/package.json
index 4b6b7b2..e70a805 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "@types/jsonwebtoken": "^9.0.10",
     "@types/nodemailer": "^6.4.17",
     "@vite-pwa/nuxt": "^0.10.8",
+    "@vueuse/core": "^13.8.0",
     "@vueuse/motion": "^3.0.3",
     "cookie": "^0.6.0",
     "formidable": "^3.5.4",
diff --git a/pages/member/dashboard/index.vue b/pages/member/dashboard/index.vue
index 2202771..207295f 100644
--- a/pages/member/dashboard/index.vue
+++ b/pages/member/dashboard/index.vue
@@ -1,315 +1,182 @@
 <template>
-  <div>
-    <!-- Header -->
-    <div class="d-flex justify-space-between align-center mb-6">
-      <div>
-        <h1 class="text-h4 font-weight-bold">Member Dashboard</h1>
-        <p class="text-body-1 text-medium-emphasis">Welcome back, {{ firstName }}</p>
+  <div class="member-dashboard">
+    <!-- Animated Header -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: -20 }"
+      :enter="{ 
+        opacity: 1, 
+        y: 0,
+        transition: {
+          duration: 600,
+          type: 'spring'
+        }
+      }"
+      class="dashboard-header"
+    >
+      <div class="header-content">
+        <h1 class="dashboard-title">
+          <span class="title-gradient">Welcome back,</span>
+          <span class="title-name">{{ firstName }}</span>
+        </h1>
+        <p class="dashboard-subtitle">Here's what's happening with your account today</p>
+      </div>
+      <div class="header-actions">
+        <v-btn
+          color="white"
+          variant="outlined"
+          prepend-icon="mdi-bell"
+          class="notification-btn"
+        >
+          <v-badge
+            color="error"
+            dot
+            offset-x="-8"
+            offset-y="-8"
+          >
+            Notifications
+          </v-badge>
+        </v-btn>
       </div>
-      <v-btn
-        color="error"
-        variant="flat"
-        prepend-icon="mdi-account-edit"
-        @click="navigateTo('/member/profile')"
-      >
-        Edit Profile
-      </v-btn>
     </div>
 
-    <!-- Profile Info Card -->
-    <v-card class="mb-6" elevation="2">
-      <v-card-title class="d-flex align-center">
-        <v-icon color="error" class="mr-2">mdi-account</v-icon>
-        Profile Information
-      </v-card-title>
-      <v-card-text>
-        <v-row>
-          <v-col cols="auto">
-            <ProfileAvatar
-              :member-id="memberData?.member_id"
-              :first-name="memberData?.first_name"
-              :last-name="memberData?.last_name"
-              size="large"
-              :show-badge="false"
-            />
-          </v-col>
-          <v-col>
-            <div class="d-flex justify-space-between align-start mb-3">
-              <div>
-                <h3 class="text-h6 font-weight-bold">{{ fullName }}</h3>
-                <p class="text-body-2 text-medium-emphasis">{{ email }}</p>
-              </div>
-              <div class="d-flex gap-2">
-                <v-chip
-                  color="error"
-                  variant="tonal"
-                  size="small"
-                >
-                  {{ membershipType }}
-                </v-chip>
-                <v-chip
-                  variant="outlined"
-                  color="error"
-                  size="small"
-                  prepend-icon="mdi-star"
-                >
-                  {{ memberLevel }}
-                </v-chip>
-              </div>
-            </div>
-            
-            <v-row class="mt-4">
-              <v-col cols="12" md="4">
-                <div class="text-caption text-medium-emphasis">Member Since</div>
-                <div class="font-weight-medium">{{ memberSince }}</div>
-              </v-col>
-              <v-col cols="12" md="4">
-                <div class="text-caption text-medium-emphasis">Points</div>
-                <div class="font-weight-medium">{{ memberPoints.toLocaleString() }}</div>
-              </v-col>
-              <v-col cols="12" md="4">
-                <div class="text-caption text-medium-emphasis">Status</div>
-                <div class="font-weight-medium text-success">Active</div>
-              </v-col>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
+    <!-- Bento Grid Dashboard -->
+    <BentoGrid gap="lg" class="dashboard-grid">
+      <!-- Profile Card -->
+      <div class="bento-item bento-item--medium bento-item--tall">
+        <ProfileCard 
+          :member="memberData"
+          :member-points="memberPoints"
+          :events-attended="12"
+          :connections="48"
+          @edit-profile="navigateTo('/member/profile')"
+        />
+      </div>
 
-    <v-row>
-      <!-- Upcoming Events -->
-      <v-col cols="12" lg="6">
-        <v-card elevation="2" class="h-100">
-          <v-card-title class="d-flex align-center">
-            <v-icon color="error" class="mr-2">mdi-calendar</v-icon>
-            Upcoming Events
-          </v-card-title>
-          <v-card-subtitle>Your registered events and activities</v-card-subtitle>
-          <v-card-text>
-            <v-list lines="three" class="pa-0">
-              <template v-for="(event, index) in upcomingEvents" :key="event.id">
-                <v-list-item class="px-0">
-                  <v-card variant="outlined" class="w-100">
-                    <v-card-text>
-                      <div class="d-flex justify-space-between align-start mb-2">
-                        <h4 class="text-body-1 font-weight-medium">{{ event.title }}</h4>
-                        <v-chip
-                          :color="event.status === 'confirmed' ? 'success' : 'warning'"
-                          size="x-small"
-                          variant="tonal"
-                        >
-                          <v-icon start size="x-small">
-                            {{ event.status === 'confirmed' ? 'mdi-check-circle' : 'mdi-alert-circle' }}
-                          </v-icon>
-                          {{ event.status }}
-                        </v-chip>
-                      </div>
-                      <div class="d-flex flex-wrap gap-3 text-caption text-medium-emphasis">
-                        <div class="d-flex align-center">
-                          <v-icon size="x-small" class="mr-1">mdi-calendar</v-icon>
-                          {{ formatDate(event.date) }}
-                        </div>
-                        <div class="d-flex align-center">
-                          <v-icon size="x-small" class="mr-1">mdi-clock-outline</v-icon>
-                          {{ event.time }}
-                        </div>
-                        <div class="d-flex align-center">
-                          <v-icon size="x-small" class="mr-1">mdi-map-marker</v-icon>
-                          {{ event.location }}
-                        </div>
-                      </div>
-                    </v-card-text>
-                  </v-card>
-                </v-list-item>
-              </template>
-            </v-list>
-            
-            <v-btn
-              variant="outlined"
-              color="error"
-              block
-              class="mt-4"
-              @click="navigateTo('/member/events')"
-            >
-              View All Events
-            </v-btn>
-          </v-card-text>
-        </v-card>
-      </v-col>
+      <!-- Statistics Cards -->
+      <div class="bento-item bento-item--small">
+        <StatsCard
+          label="Total Points"
+          :value="memberPoints"
+          icon="mdi-star"
+          icon-color="warning"
+          :icon-background="'linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(245, 158, 11, 0.05))'"
+          :change="12"
+          suffix="pts"
+          :delay="100"
+          decoration-color="#f59e0b"
+        />
+      </div>
 
-      <!-- Payment Status -->
-      <v-col cols="12" lg="6">
-        <v-card elevation="2" class="h-100">
-          <v-card-title class="d-flex align-center">
-            <v-icon color="error" class="mr-2">mdi-credit-card</v-icon>
-            Payment Status
-          </v-card-title>
-          <v-card-subtitle>Membership and payment information</v-card-subtitle>
-          <v-card-text>
-            <!-- Current Membership -->
-            <v-card variant="outlined" class="mb-4">
-              <v-card-text>
-                <div class="d-flex justify-space-between align-center mb-3">
-                  <h4 class="text-body-1 font-weight-medium">Current Membership</h4>
-                  <v-chip
-                    color="success"
-                    size="x-small"
-                    variant="tonal"
-                  >
-                    <v-icon start size="x-small">mdi-check-circle</v-icon>
-                    Active
-                  </v-chip>
-                </div>
-                <div class="text-body-2">
-                  <div class="d-flex justify-space-between py-1">
-                    <span class="text-medium-emphasis">Plan:</span>
-                    <span class="font-weight-medium">{{ membershipType }}</span>
-                  </div>
-                  <div class="d-flex justify-space-between py-1">
-                    <span class="text-medium-emphasis">Next Payment:</span>
-                    <span class="font-weight-medium">{{ nextPaymentDate }}</span>
-                  </div>
-                  <div class="d-flex justify-space-between py-1">
-                    <span class="text-medium-emphasis">Amount:</span>
-                    <span class="font-weight-medium">${{ membershipAmount }}</span>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
+      <div class="bento-item bento-item--small">
+        <StatsCard
+          label="Events Attended"
+          :value="upcomingEvents.length"
+          icon="mdi-calendar-check"
+          icon-color="success"
+          :icon-background="'linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.05))'"
+          subtitle="This month"
+          :delay="200"
+          decoration-color="#22c55e"
+        />
+      </div>
 
-            <!-- Payment History -->
-            <v-card variant="outlined" class="mb-4">
-              <v-card-text>
-                <h4 class="text-body-1 font-weight-medium mb-3">Payment History</h4>
-                <div class="text-body-2">
-                  <div 
-                    v-for="payment in paymentHistory" 
-                    :key="payment.id"
-                    class="d-flex justify-space-between align-center py-1"
-                  >
-                    <span class="text-medium-emphasis">{{ payment.date }}</span>
-                    <div class="d-flex align-center gap-2">
-                      <span class="font-weight-medium">${{ payment.amount }}</span>
-                      <v-chip
-                        color="success"
-                        size="x-small"
-                        variant="outlined"
-                      >
-                        Paid
-                      </v-chip>
-                    </div>
-                  </div>
-                </div>
-              </v-card-text>
-            </v-card>
+      <div class="bento-item bento-item--small">
+        <StatsCard
+          label="Active Membership"
+          :value="membershipDays"
+          icon="mdi-crown"
+          icon-color="error"
+          :change="100"
+          suffix="days"
+          subtitle="Premium member"
+          :delay="300"
+        />
+      </div>
 
-            <v-btn
-              color="error"
-              variant="flat"
-              block
-              prepend-icon="mdi-credit-card"
-              @click="navigateTo('/member/payments')"
-            >
-              Update Payment Method
-            </v-btn>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+      <!-- Upcoming Events Card -->
+      <div class="bento-item bento-item--large">
+        <EventsCard 
+          :events="upcomingEvents"
+          @view-all="navigateTo('/member/events')"
+        />
+      </div>
 
-    <!-- Recent Activity -->
-    <v-card elevation="2" class="mt-6">
-      <v-card-title class="d-flex align-center">
-        <v-icon color="error" class="mr-2">mdi-history</v-icon>
-        Recent Activity
-      </v-card-title>
-      <v-card-subtitle>Your latest actions and updates</v-card-subtitle>
-      <v-card-text>
-        <v-timeline side="end" density="compact">
-          <v-timeline-item
-            v-for="activity in recentActivity"
-            :key="activity.id"
-            :dot-color="activity.color"
-            size="small"
+      <!-- Payment Status Card -->
+      <div class="bento-item bento-item--medium">
+        <PaymentCard
+          :membership-type="membershipType"
+          :next-payment-date="nextPaymentDate"
+          :membership-amount="membershipAmount"
+          :payment-history="paymentHistory"
+          @update-payment="navigateTo('/member/payments')"
+        />
+      </div>
+
+      <!-- Activity Timeline -->
+      <div class="bento-item bento-item--medium bento-item--tall">
+        <div class="glass-card activity-card">
+          <div class="card-header">
+            <v-icon color="error" size="20">mdi-history</v-icon>
+            <h3 class="card-title">Recent Activity</h3>
+          </div>
+          <ActivityTimeline 
+            :activities="formattedActivities"
+            :max-items="5"
+          />
+          <v-btn
+            variant="outlined"
+            color="error"
+            block
+            class="mt-4"
+            @click="navigateTo('/member/activity')"
           >
-            <template v-slot:icon>
-              <v-icon size="x-small">{{ activity.icon }}</v-icon>
-            </template>
-            <div>
-              <div class="text-body-2 font-weight-medium">{{ activity.description }}</div>
-              <div class="text-caption text-medium-emphasis">{{ activity.timestamp }}</div>
-            </div>
-          </v-timeline-item>
-        </v-timeline>
-        
-        <v-btn
-          variant="outlined"
-          color="error"
-          block
-          class="mt-4"
-          @click="navigateTo('/member/activity')"
-        >
-          View All Activity
-        </v-btn>
-      </v-card-text>
-    </v-card>
+            View All Activity
+          </v-btn>
+        </div>
+      </div>
+    </BentoGrid>
 
-    <!-- Quick Actions -->
-    <v-row class="mt-6">
-      <v-col cols="12">
-        <h3 class="text-h6 mb-3">Quick Actions</h3>
-      </v-col>
-      <v-col cols="6" sm="3">
-        <v-card 
-          elevation="1" 
-          class="text-center pa-4 cursor-pointer"
-          hover
-          @click="navigateTo('/member/events')"
-        >
-          <v-icon size="32" color="error" class="mb-2">mdi-calendar-plus</v-icon>
-          <div class="text-body-2">Register for Event</div>
-        </v-card>
-      </v-col>
-      <v-col cols="6" sm="3">
-        <v-card 
-          elevation="1" 
-          class="text-center pa-4 cursor-pointer"
-          hover
-          @click="navigateTo('/member/directory')"
-        >
-          <v-icon size="32" color="error" class="mb-2">mdi-account-group</v-icon>
-          <div class="text-body-2">Member Directory</div>
-        </v-card>
-      </v-col>
-      <v-col cols="6" sm="3">
-        <v-card 
-          elevation="1" 
-          class="text-center pa-4 cursor-pointer"
-          hover
-          @click="navigateTo('/member/resources')"
-        >
-          <v-icon size="32" color="error" class="mb-2">mdi-book-open-variant</v-icon>
-          <div class="text-body-2">Resources</div>
-        </v-card>
-      </v-col>
-      <v-col cols="6" sm="3">
-        <v-card 
-          elevation="1" 
-          class="text-center pa-4 cursor-pointer"
-          hover
-          @click="navigateTo('/member/support')"
-        >
-          <v-icon size="32" color="error" class="mb-2">mdi-help-circle</v-icon>
-          <div class="text-body-2">Get Support</div>
-        </v-card>
-      </v-col>
-    </v-row>
+
+    <!-- Quick Actions Section -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 20 }"
+      :enter="{ 
+        opacity: 1, 
+        y: 0,
+        transition: {
+          delay: 800,
+          duration: 600
+        }
+      }"
+      class="quick-actions-section"
+    >
+      <h3 class="section-title">Quick Actions</h3>
+      <div class="quick-actions-grid">
+        <QuickActionCard
+          v-for="(action, index) in quickActions"
+          :key="action.title"
+          :icon="action.icon"
+          :title="action.title"
+          :color="action.color"
+          :delay="900 + (index * 100)"
+          @click="navigateTo(action.route)"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import BentoGrid from '~/components/dashboard/BentoGrid.vue';
+import StatsCard from '~/components/dashboard/StatsCard.vue';
+import ProfileCard from '~/components/dashboard/ProfileCard.vue';
+import ActivityTimeline from '~/components/dashboard/ActivityTimeline.vue';
+import EventsCard from '~/components/dashboard/EventsCard.vue';
+import PaymentCard from '~/components/dashboard/PaymentCard.vue';
+import QuickActionCard from '~/components/dashboard/QuickActionCard.vue';
 
 definePageMeta({
   layout: 'member',
@@ -346,6 +213,17 @@ const memberPoints = ref(2450);
 const nextPaymentDate = ref('Feb 15, 2024');
 const membershipAmount = ref('99.00');
 
+// Calculate membership days
+const membershipDays = computed(() => {
+  if (memberData.value?.join_date) {
+    const joinDate = new Date(memberData.value.join_date);
+    const today = new Date();
+    const diffTime = Math.abs(today.getTime() - joinDate.getTime());
+    return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  }
+  return 365;
+});
+
 // Mock data - replace with actual API calls
 const upcomingEvents = ref([
   {
@@ -415,6 +293,43 @@ const recentActivity = ref([
   }
 ]);
 
+// Format activities for the timeline component
+const formattedActivities = computed(() => {
+  return recentActivity.value.map(activity => ({
+    ...activity,
+    title: activity.description.split(' ').slice(0, 3).join(' '),
+    description: activity.description
+  }));
+});
+
+// Quick actions data
+const quickActions = ref([
+  {
+    title: "View Events",
+    icon: "mdi-calendar",
+    color: "error",
+    route: "/member/events"
+  },
+  {
+    title: "Update Profile",
+    icon: "mdi-account-edit",
+    color: "primary",
+    route: "/member/profile"
+  },
+  {
+    title: "Payments",
+    icon: "mdi-credit-card",
+    color: "success",
+    route: "/member/payments"
+  },
+  {
+    title: "Resources",
+    icon: "mdi-book-open-variant",
+    color: "warning",
+    route: "/member/resources"
+  }
+]);
+
 // Helper functions
 const formatDate = (dateString: string) => {
   return new Date(dateString).toLocaleDateString('en-US', { 
@@ -450,24 +365,140 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped>
-.cursor-pointer {
-  cursor: pointer;
+<style scoped lang="scss">
+.member-dashboard {
+  padding: 2rem;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
+  
+  @media (max-width: 768px) {
+    padding: 1rem;
+  }
 }
 
-.gap-2 {
-  gap: 0.5rem;
+.dashboard-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2.5rem;
+  padding: 2rem;
+  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);
+  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;
+  }
 }
 
-.gap-3 {
-  gap: 0.75rem;
+.header-content {
+  flex: 1;
 }
 
-.h-100 {
+.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);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.title-name {
+  color: rgb(31, 41, 55);
+}
+
+.dashboard-subtitle {
+  font-size: 1.125rem;
+  color: rgb(107, 114, 128);
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  gap: 1rem;
+}
+
+.notification-btn {
+  text-transform: none;
+  font-weight: 500;
+}
+
+.dashboard-grid {
+  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%;
 }
 
-.w-100 {
-  width: 100%;
+.activity-card {
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+  
+  .card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: rgb(31, 41, 55);
+    margin: 0;
+  }
+}
+
+.quick-actions-section {
+  margin-top: 2rem;
+}
+
+.section-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: rgb(31, 41, 55);
+  margin-bottom: 1.5rem;
+}
+
+.quick-actions-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.25rem;
+  
+  @media (max-width: 640px) {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
 }
 </style>