diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 9386e84..509b4d4 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -32,7 +32,9 @@
       "mcp__playwright__browser_close",
       "Bash(dir:*)",
       "mcp__playwright__browser_evaluate",
-      "mcp__playwright__browser_hover"
+      "mcp__playwright__browser_hover",
+      "mcp__playwright__browser_resize",
+      "mcp__playwright__browser_console_messages"
     ],
     "deny": [],
     "ask": []
diff --git a/.playwright-mcp/admin-dashboard-mobile.png b/.playwright-mcp/admin-dashboard-mobile.png
new file mode 100644
index 0000000..40637e9
Binary files /dev/null and b/.playwright-mcp/admin-dashboard-mobile.png differ
diff --git a/.playwright-mcp/admin-dashboard-tablet.png b/.playwright-mcp/admin-dashboard-tablet.png
new file mode 100644
index 0000000..7f1621e
Binary files /dev/null and b/.playwright-mcp/admin-dashboard-tablet.png differ
diff --git a/.playwright-mcp/admin-dashboard.png b/.playwright-mcp/admin-dashboard.png
new file mode 100644
index 0000000..d225630
Binary files /dev/null and b/.playwright-mcp/admin-dashboard.png differ
diff --git a/.playwright-mcp/board-dashboard.png b/.playwright-mcp/board-dashboard.png
new file mode 100644
index 0000000..3d22928
Binary files /dev/null and b/.playwright-mcp/board-dashboard.png differ
diff --git a/.playwright-mcp/dashboard-logged-in.png b/.playwright-mcp/dashboard-logged-in.png
new file mode 100644
index 0000000..d225630
Binary files /dev/null and b/.playwright-mcp/dashboard-logged-in.png differ
diff --git a/.playwright-mcp/homepage-initial.png b/.playwright-mcp/homepage-initial.png
new file mode 100644
index 0000000..ffcde23
Binary files /dev/null and b/.playwright-mcp/homepage-initial.png differ
diff --git a/.playwright-mcp/member-dashboard.png b/.playwright-mcp/member-dashboard.png
new file mode 100644
index 0000000..a1620b4
Binary files /dev/null and b/.playwright-mcp/member-dashboard.png differ
diff --git a/.playwright-mcp/user-management-page.png b/.playwright-mcp/user-management-page.png
new file mode 100644
index 0000000..1b69bf1
Binary files /dev/null and b/.playwright-mcp/user-management-page.png differ
diff --git a/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl b/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl
index a62d947..90bbfe6 100644
Binary files a/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl and b/.serena/cache/typescript/document_symbols_cache_v23-06-25.pkl differ
diff --git a/components/DuesActionCard.vue b/components/DuesActionCard.vue
index 90e3346..f0e6c72 100644
--- a/components/DuesActionCard.vue
+++ b/components/DuesActionCard.vue
@@ -21,15 +21,14 @@
     <v-card-text class="pa-4">
       <!-- Member Info Header -->
       <div class="d-flex align-center mb-3">
-        <v-avatar
-          :color="avatarColor"
-          size="40"
+        <ProfileAvatar
+          :member-id="member.member_id || member.Id"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          :member-name="member.FullName"
+          size="small"
           class="mr-3"
-        >
-          <span class="text-white font-weight-bold">
-            {{ memberInitials }}
-          </span>
-        </v-avatar>
+        />
         
         <div class="flex-grow-1">
           <h4 class="text-subtitle-1 font-weight-bold mb-1">
@@ -232,6 +231,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 // Extended member type for dues management
 interface DuesMember {
diff --git a/components/DuesOverdueBanner.vue b/components/DuesOverdueBanner.vue
index ef9ec72..ded9a42 100644
--- a/components/DuesOverdueBanner.vue
+++ b/components/DuesOverdueBanner.vue
@@ -41,15 +41,12 @@
                 class="overdue-member-item"
               >
                 <template #prepend>
-                  <v-avatar
-                    :color="member.isInactive ? 'grey' : 'warning'"
-                    size="32"
+                  <ProfileAvatar
+                    :member-id="member.memberId"
+                    :member-name="member.name"
+                    size="small"
                     class="mr-3"
-                  >
-                    <v-icon color="white" size="16">
-                      {{ member.isInactive ? 'mdi-account-off' : 'mdi-account-alert' }}
-                    </v-icon>
-                  </v-avatar>
+                  />
                 </template>
                 
                 <v-list-item-title class="font-weight-medium">
@@ -137,6 +134,8 @@
 </template>
 
 <script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
 interface OverdueMember {
   id: string;
   name: string;
diff --git a/layouts/admin.vue b/layouts/admin.vue
index 3e3c056..2511596 100644
--- a/layouts/admin.vue
+++ b/layouts/admin.vue
@@ -216,9 +216,14 @@
         <div class="pa-3">
           <v-card class="glass-profile-card pa-3">
             <div class="d-flex flex-column align-center">
-              <v-avatar size="small" class="mb-2">
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
-              </v-avatar>
+              <ProfileAvatar
+                :member-id="memberData?.member_id || memberData?.Id"
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :member-name="memberData?.FullName || user?.name"
+                size="small"
+                class="mb-2"
+              />
               <div class="text-center">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Administrator' }}</div>
                 <div class="text-caption text-medium-emphasis">{{ user?.email || 'admin@monacousa.org' }}</div>
@@ -437,6 +442,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
diff --git a/layouts/board.vue b/layouts/board.vue
index 9bb5f55..5902d9f 100644
--- a/layouts/board.vue
+++ b/layouts/board.vue
@@ -149,9 +149,14 @@
         <div class="pa-3">
           <v-card class="glass-profile-card pa-3">
             <div class="d-flex flex-column align-center">
-              <v-avatar size="small" class="mb-2">
-                <v-img src="https://randomuser.me/api/portraits/men/85.jpg" />
-              </v-avatar>
+              <ProfileAvatar
+                :member-id="memberData?.member_id || memberData?.Id"
+                :first-name="memberData?.first_name || user?.firstName"
+                :last-name="memberData?.last_name || user?.lastName"
+                :member-name="memberData?.FullName || user?.name"
+                size="small"
+                class="mb-2"
+              />
               <div class="text-center">
                 <div class="text-subtitle-2 font-weight-bold">{{ user?.name || 'Board Member' }}</div>
                 <div class="text-caption text-medium-emphasis">{{ user?.email || 'board@monacousa.org' }}</div>
@@ -325,6 +330,7 @@
 
 <script setup lang="ts">
 import type { Member } from '~/utils/types';
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
 
 const { user, logout } = useAuth();
 const drawer = ref(true);
diff --git a/pages/admin/users/index.vue b/pages/admin/users/index.vue
index 5c496d0..6ada595 100644
--- a/pages/admin/users/index.vue
+++ b/pages/admin/users/index.vue
@@ -81,10 +81,11 @@
       >
         <template v-slot:item.name="{ item }">
           <div class="d-flex align-center py-2">
-            <v-avatar size="40" class="mr-3">
-              <v-icon v-if="!item.avatar">mdi-account-circle</v-icon>
-              <v-img v-else :src="item.avatar" />
-            </v-avatar>
+            <ProfileAvatar
+              :member-name="item.name"
+              size="small"
+              class="mr-3"
+            />
             <div>
               <div class="font-weight-medium">{{ item.name }}</div>
               <div class="text-caption text-medium-emphasis">{{ item.email }}</div>
@@ -250,6 +251,8 @@
 </template>
 
 <script setup lang="ts">
+import ProfileAvatar from '~/components/ProfileAvatar.vue';
+
 definePageMeta({
   layout: 'admin',
   middleware: 'admin'