diff --git a/.playwright-mcp/glass-dashboard-styled.png b/.playwright-mcp/glass-dashboard-styled.png
new file mode 100644
index 0000000..d7d25d0
Binary files /dev/null and b/.playwright-mcp/glass-dashboard-styled.png differ
diff --git a/pages/board/dashboard/glass.vue b/pages/board/dashboard/glass.vue
index 2b9c92d..90dabb2 100644
--- a/pages/board/dashboard/glass.vue
+++ b/pages/board/dashboard/glass.vue
@@ -1,78 +1,67 @@
 <template>
-  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-white">
+  <div class="glass-dashboard">
     <!-- Dashboard Content -->
-    <div class="p-6 space-y-6">
+    <div class="dashboard-container">
       <!-- Welcome Section -->
-      <div class="relative overflow-hidden rounded-3xl p-8 text-center shadow-lg border border-white/20" 
-           style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
-        <h2 class="text-3xl font-bold text-gray-800 mb-2">
-          Welcome back!
-        </h2>
-        <p class="text-gray-600">
+      <div class="welcome-card">
+        <h2 class="welcome-title">Welcome back!</h2>
+        <p class="welcome-subtitle">
           Here's an overview of MonacoUSA's current status and activities.
         </p>
       </div>
 
       <!-- Statistics Grid -->
-      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-        <div v-for="stat in stats" :key="stat.label" 
-             class="relative overflow-hidden rounded-2xl p-6 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
-             style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
-          <div class="flex items-center justify-between mb-4">
-            <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
-              <span class="text-red-600 text-xl">{{ stat.icon }}</span>
-            </div>
+      <div class="stats-grid">
+        <div v-for="stat in stats" :key="stat.label" class="stat-card">
+          <div class="stat-icon-wrapper">
+            <div class="stat-icon">{{ stat.icon }}</div>
           </div>
-          <p class="text-sm font-medium text-gray-500 uppercase tracking-wider mb-1">
+          <p class="stat-label">
             {{ stat.label }}
           </p>
-          <p class="text-3xl font-bold text-gray-800">
+          <p class="stat-value">
             {{ stat.prefix }}{{ stat.value }}{{ stat.suffix }}
           </p>
-          <p v-if="stat.change" class="text-sm text-green-600 mt-2">
+          <p v-if="stat.change" class="stat-change">
             {{ stat.change }}
           </p>
         </div>
       </div>
 
       <!-- Dues Management Section -->
-      <div class="space-y-4">
-        <div class="flex items-center justify-between">
-          <h3 class="text-xl font-semibold text-gray-800">Member Dues Overview</h3>
+      <div class="dues-section">
+        <div class="dues-header">
+          <h3 class="dues-title">Member Dues Overview</h3>
         </div>
 
         <!-- Dues Cards Grid - MAX 4 VISIBLE -->
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-          <div v-for="member in visibleDuesMembers" :key="member.id"
-               class="relative overflow-hidden rounded-2xl p-5 shadow-lg border border-white/20 transition-all duration-300 hover:shadow-xl"
-               style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
+        <div class="dues-grid">
+          <div v-for="member in visibleDuesMembers" :key="member.id" class="dues-card">
             <!-- Member Info -->
-            <div class="flex items-center gap-3 mb-4">
-              <div class="w-12 h-12 rounded-full bg-gray-200"></div>
+            <div class="member-info">
+              <div class="member-avatar"></div>
               <div>
-                <h4 class="font-semibold text-gray-800">{{ member.name }}</h4>
-                <p class="text-sm text-gray-500">Member #{{ member.id }}</p>
+                <h4 class="member-name">{{ member.name }}</h4>
+                <p class="member-id">Member #{{ member.id }}</p>
               </div>
             </div>
             
             <!-- Amount -->
-            <div class="flex items-center justify-between mb-3">
-              <span class="text-sm text-gray-600">Amount Due</span>
-              <span class="text-lg font-bold text-red-600">${{ member.dueAmount }}</span>
+            <div class="amount-row">
+              <span class="amount-label">Amount Due</span>
+              <span class="amount-value">${{ member.dueAmount }}</span>
             </div>
             
             <!-- Actions -->
-            <button class="w-full px-3 py-2 rounded-lg border border-red-200 text-red-600 text-sm font-medium transition-all duration-200 hover:bg-red-50"
-                    style="background: rgba(255, 255, 255, 0.5);">
+            <button class="btn-mark-paid">
               Mark Paid
             </button>
           </div>
         </div>
 
         <!-- View All Button -->
-        <div class="text-center">
-          <button class="px-6 py-2.5 rounded-xl border border-red-200 text-red-600 font-medium transition-all duration-200 hover:bg-red-50"
-                  style="background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px);">
+        <div class="view-all-container">
+          <button class="btn-view-all">
             View All Members →
           </button>
         </div>
@@ -147,5 +136,218 @@ const visibleDuesMembers = ref([
 </script>
 
 <style scoped>
-/* Glass dashboard styles */
+.glass-dashboard {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
+  padding: 1.5rem;
+}
+
+.dashboard-container {
+  max-width: 1280px;
+  margin: 0 auto;
+}
+
+/* Welcome Section */
+.welcome-card {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 1.5rem;
+  padding: 2rem;
+  text-align: center;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  margin-bottom: 1.5rem;
+}
+
+.welcome-title {
+  font-size: 1.875rem;
+  font-weight: bold;
+  color: #1f2937;
+  margin-bottom: 0.5rem;
+}
+
+.welcome-subtitle {
+  color: #4b5563;
+}
+
+/* Statistics Grid */
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.stat-card {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  padding: 1.5rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.stat-icon-wrapper {
+  margin-bottom: 1rem;
+}
+
+.stat-icon {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 0.75rem;
+  background: rgba(239, 68, 68, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.25rem;
+}
+
+.stat-value {
+  font-size: 1.875rem;
+  font-weight: bold;
+  color: #1f2937;
+}
+
+.stat-change {
+  font-size: 0.875rem;
+  color: #10b981;
+  margin-top: 0.5rem;
+}
+
+/* Dues Section */
+.dues-section {
+  margin-top: 1.5rem;
+}
+
+.dues-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.dues-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.dues-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.dues-card {
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 1rem;
+  padding: 1.25rem;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.dues-card:hover {
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
+}
+
+.member-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+.member-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background: #e5e7eb;
+}
+
+.member-name {
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.member-id {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+.amount-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.amount-label {
+  font-size: 0.875rem;
+  color: #4b5563;
+}
+
+.amount-value {
+  font-size: 1.125rem;
+  font-weight: bold;
+  color: #dc2626;
+}
+
+.btn-mark-paid {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.5);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #dc2626;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-mark-paid:hover {
+  background: rgba(254, 226, 226, 0.5);
+}
+
+.view-all-container {
+  text-align: center;
+}
+
+.btn-view-all {
+  padding: 0.625rem 1.5rem;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid rgba(239, 68, 68, 0.3);
+  color: #dc2626;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn-view-all:hover {
+  background: rgba(254, 226, 226, 0.5);
+}
 </style>
\ No newline at end of file