diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 3680bbf..ecf7759 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -20,7 +20,8 @@
       "mcp__context7__get-library-docs",
       "Bash(npm install:*)",
       "Bash(git add:*)",
-      "Bash(git push:*)"
+      "Bash(git push:*)",
+      "Bash(git commit:*)"
     ],
     "deny": [],
     "ask": []
diff --git a/components/ui/FloatingInput.vue b/components/ui/FloatingInput.vue
index c80afb7..c62bd6a 100644
--- a/components/ui/FloatingInput.vue
+++ b/components/ui/FloatingInput.vue
@@ -183,10 +183,10 @@ const clearInput = () => {
       border-color: #dc2626;
       box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
       transform: translateY(-1px);
-      
-      .floating-input--glass& {
-        background: rgba(255, 255, 255, 0.9);
-      }
+    }
+    
+    .floating-input--focused.floating-input--glass & {
+      background: rgba(255, 255, 255, 0.9);
     }
     
     // Error state
diff --git a/pages/members/mockup.vue b/pages/members/mockup.vue
new file mode 100644
index 0000000..b829648
--- /dev/null
+++ b/pages/members/mockup.vue
@@ -0,0 +1,883 @@
+<template>
+  <div class="members-mockup">
+    <!-- Header -->
+    <header class="members-header">
+      <div 
+        v-motion
+        :initial="{ opacity: 0, y: -20 }"
+        :enter="{ opacity: 1, y: 0 }"
+        class="members-header__content"
+      >
+        <h1 class="members-header__title">Members Directory</h1>
+        <p class="members-header__subtitle">Connect with {{ totalMembers }} MonacoUSA members worldwide</p>
+      </div>
+      
+      <div 
+        v-motion
+        :initial="{ opacity: 0, y: -20 }"
+        :enter="{ opacity: 1, y: 0, transition: { delay: 100 } }"
+        class="members-header__actions"
+      >
+        <MonacoButton variant="glass" icon="download">
+          Export Directory
+        </MonacoButton>
+        <MonacoButton variant="primary" icon="user-plus">
+          Invite Member
+        </MonacoButton>
+      </div>
+    </header>
+
+    <!-- Search and Filters -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, y: 20 }"
+      :enter="{ opacity: 1, y: 0, transition: { delay: 200 } }"
+      class="members-controls"
+    >
+      <div class="members-controls__search">
+        <FloatingInput 
+          v-model="searchQuery"
+          label="Search members by name, company, or skills..."
+          leftIcon="search"
+          variant="glass"
+          clearable
+        />
+      </div>
+      
+      <div class="members-controls__filters">
+        <select class="filter-select">
+          <option value="">All Roles</option>
+          <option value="board">Board Member</option>
+          <option value="executive">Executive</option>
+          <option value="member">Member</option>
+          <option value="honorary">Honorary</option>
+        </select>
+        
+        <select class="filter-select">
+          <option value="">All Industries</option>
+          <option value="tech">Technology</option>
+          <option value="finance">Finance</option>
+          <option value="real-estate">Real Estate</option>
+          <option value="hospitality">Hospitality</option>
+        </select>
+        
+        <select class="filter-select">
+          <option value="">Sort By</option>
+          <option value="name">Name (A-Z)</option>
+          <option value="recent">Recently Joined</option>
+          <option value="active">Most Active</option>
+        </select>
+      </div>
+    </div>
+
+    <!-- Stats Bar -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0, x: -20 }"
+      :enter="{ opacity: 1, x: 0, transition: { delay: 300 } }"
+      class="members-stats"
+    >
+      <div class="stat-chip">
+        <span class="stat-chip__value">{{ filteredMembers.length }}</span>
+        <span class="stat-chip__label">Results</span>
+      </div>
+      <div class="stat-chip">
+        <span class="stat-chip__value">{{ onlineCount }}</span>
+        <span class="stat-chip__label">Online Now</span>
+      </div>
+      <div class="stat-chip">
+        <span class="stat-chip__value">{{ newThisMonth }}</span>
+        <span class="stat-chip__label">New This Month</span>
+      </div>
+    </div>
+
+    <!-- View Toggle -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{ opacity: 1, transition: { delay: 350 } }"
+      class="view-controls"
+    >
+      <div class="view-toggle">
+        <button 
+          class="view-toggle__btn"
+          :class="{ 'view-toggle__btn--active': viewMode === 'grid' }"
+          @click="viewMode = 'grid'"
+        >
+          <span>⊞</span> Grid View
+        </button>
+        <button 
+          class="view-toggle__btn"
+          :class="{ 'view-toggle__btn--active': viewMode === 'list' }"
+          @click="viewMode = 'list'"
+        >
+          <span>☰</span> List View
+        </button>
+        <button 
+          class="view-toggle__btn"
+          :class="{ 'view-toggle__btn--active': viewMode === 'compact' }"
+          @click="viewMode = 'compact'"
+        >
+          <span>▦</span> Compact
+        </button>
+      </div>
+    </div>
+
+    <!-- Members Grid/List -->
+    <div 
+      class="members-container"
+      :class="`members-container--${viewMode}`"
+    >
+      <!-- Grid View -->
+      <template v-if="viewMode === 'grid'">
+        <MemberCard
+          v-for="(member, index) in filteredMembers"
+          :key="member.id"
+          :member="member"
+          :featured="member.featured"
+          :delay="index"
+          variant="glass"
+          @click="selectMember"
+          @connect="connectMember"
+          @message="messageMember"
+        />
+      </template>
+
+      <!-- List View -->
+      <template v-else-if="viewMode === 'list'">
+        <div
+          v-for="(member, index) in filteredMembers"
+          :key="member.id"
+          v-motion
+          :initial="{ opacity: 0, x: -20 }"
+          :enter="{ 
+            opacity: 1, 
+            x: 0,
+            transition: { delay: 400 + (index * 30) }
+          }"
+          class="member-list-item"
+          @click="selectMember(member)"
+        >
+          <div class="member-list-item__avatar">
+            <img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
+            <div v-else class="avatar-placeholder">{{ getInitials(member.name) }}</div>
+            <span 
+              v-if="member.status === 'online'" 
+              class="status-indicator"
+            />
+          </div>
+          
+          <div class="member-list-item__info">
+            <h3 class="member-list-item__name">{{ member.name }}</h3>
+            <p class="member-list-item__title">{{ member.title }} at {{ member.company }}</p>
+          </div>
+          
+          <div class="member-list-item__tags">
+            <span 
+              v-for="tag in member.tags?.slice(0, 2)" 
+              :key="tag"
+              class="tag"
+            >
+              {{ tag }}
+            </span>
+          </div>
+          
+          <div class="member-list-item__meta">
+            <span class="meta-text">Member since {{ member.joinDate }}</span>
+            <span v-if="member.connections" class="meta-text">{{ member.connections }} connections</span>
+          </div>
+          
+          <div class="member-list-item__actions">
+            <MonacoButton 
+              :variant="member.connected ? 'ghost' : 'primary'" 
+              size="sm"
+              @click.stop="connectMember(member)"
+            >
+              {{ member.connected ? 'Connected' : 'Connect' }}
+            </MonacoButton>
+            <MonacoButton 
+              variant="ghost" 
+              size="sm"
+              icon="message"
+              @click.stop="messageMember(member)"
+            >
+              Message
+            </MonacoButton>
+          </div>
+        </div>
+      </template>
+
+      <!-- Compact View -->
+      <template v-else>
+        <div class="compact-grid">
+          <div
+            v-for="(member, index) in filteredMembers"
+            :key="member.id"
+            v-motion
+            :initial="{ opacity: 0, scale: 0.9 }"
+            :enter="{ 
+              opacity: 1, 
+              scale: 1,
+              transition: { delay: 400 + (index * 20) }
+            }"
+            class="compact-card"
+            @click="selectMember(member)"
+          >
+            <div class="compact-card__avatar">
+              <img v-if="member.avatar" :src="member.avatar" :alt="member.name" />
+              <div v-else class="avatar-placeholder-small">{{ getInitials(member.name) }}</div>
+            </div>
+            <div class="compact-card__info">
+              <h4 class="compact-card__name">{{ member.name }}</h4>
+              <p class="compact-card__role">{{ member.title }}</p>
+            </div>
+            <button 
+              class="compact-card__connect"
+              :class="{ 'compact-card__connect--connected': member.connected }"
+              @click.stop="connectMember(member)"
+            >
+              {{ member.connected ? '✓' : '+' }}
+            </button>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <!-- Load More -->
+    <div 
+      v-motion
+      :initial="{ opacity: 0 }"
+      :enter="{ opacity: 1, transition: { delay: 800 } }"
+      class="load-more"
+    >
+      <MonacoButton variant="glass" icon="refresh" block>
+        Load More Members
+      </MonacoButton>
+    </div>
+
+    <!-- Floating Stats Widget -->
+    <GlassCard 
+      variant="glass"
+      class="network-widget"
+      :animated="true"
+      :delay="900"
+    >
+      <h4 class="network-widget__title">Your Network</h4>
+      <div class="network-stats">
+        <div class="network-stat">
+          <span class="network-stat__value">47</span>
+          <span class="network-stat__label">Connections</span>
+        </div>
+        <div class="network-stat">
+          <span class="network-stat__value">12</span>
+          <span class="network-stat__label">Pending</span>
+        </div>
+        <div class="network-stat">
+          <span class="network-stat__value">5</span>
+          <span class="network-stat__label">New Messages</span>
+        </div>
+      </div>
+      <MonacoButton variant="primary" size="sm" block>
+        View All Connections
+      </MonacoButton>
+    </GlassCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import GlassCard from '~/components/ui/GlassCard.vue'
+import MonacoButton from '~/components/ui/MonacoButton.vue'
+import FloatingInput from '~/components/ui/FloatingInput.vue'
+import MemberCard from '~/components/ui/MemberCard.vue'
+
+const searchQuery = ref('')
+const viewMode = ref('grid')
+const totalMembers = ref(1234)
+const onlineCount = ref(89)
+const newThisMonth = ref(23)
+
+const members = ref([
+  {
+    id: 1,
+    name: 'Alexandra Martin',
+    avatar: '/api/placeholder/150/150',
+    title: 'CEO',
+    company: 'Monaco Ventures',
+    role: 'Board Member',
+    status: 'online',
+    tags: ['Leadership', 'Strategy', 'Investment'],
+    joinDate: '2021',
+    connections: 234,
+    connected: false,
+    featured: true
+  },
+  {
+    id: 2,
+    name: 'Jean-Paul Rousseau',
+    avatar: '/api/placeholder/150/150',
+    title: 'Managing Director',
+    company: 'Riviera Capital',
+    role: 'Executive',
+    status: 'online',
+    tags: ['Finance', 'Real Estate', 'Banking'],
+    joinDate: '2020',
+    connections: 189,
+    connected: true,
+    featured: false
+  },
+  {
+    id: 3,
+    name: 'Sarah Chen',
+    avatar: '',
+    title: 'VP of Technology',
+    company: 'TechMonaco',
+    role: 'Member',
+    status: 'offline',
+    tags: ['Technology', 'AI', 'Innovation', 'Blockchain'],
+    joinDate: '2022',
+    connections: 156,
+    connected: false,
+    featured: false
+  },
+  {
+    id: 4,
+    name: 'Marcus Williams',
+    avatar: '/api/placeholder/150/150',
+    title: 'Partner',
+    company: 'Monaco Law Group',
+    role: 'Member',
+    status: 'away',
+    tags: ['Legal', 'Corporate Law', 'M&A'],
+    joinDate: '2021',
+    connections: 98,
+    connected: false,
+    featured: false
+  },
+  {
+    id: 5,
+    name: 'Isabella Romano',
+    avatar: '/api/placeholder/150/150',
+    title: 'Creative Director',
+    company: 'Romano Design Studio',
+    role: 'Member',
+    status: 'online',
+    tags: ['Design', 'Branding', 'Marketing'],
+    joinDate: '2023',
+    connections: 67,
+    connected: true,
+    featured: false
+  },
+  {
+    id: 6,
+    name: 'Thomas Anderson',
+    avatar: '',
+    title: 'Investment Manager',
+    company: 'Monte Carlo Holdings',
+    role: 'Honorary',
+    status: 'offline',
+    tags: ['Investment', 'Wealth Management', 'Private Equity'],
+    joinDate: '2019',
+    connections: 321,
+    connected: false,
+    featured: true
+  }
+])
+
+const filteredMembers = computed(() => {
+  if (!searchQuery.value) return members.value
+  
+  const query = searchQuery.value.toLowerCase()
+  return members.value.filter(member => 
+    member.name.toLowerCase().includes(query) ||
+    member.company?.toLowerCase().includes(query) ||
+    member.title?.toLowerCase().includes(query) ||
+    member.tags?.some(tag => tag.toLowerCase().includes(query))
+  )
+})
+
+const getInitials = (name: string) => {
+  return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)
+}
+
+const selectMember = (member: any) => {
+  console.log('Selected member:', member)
+}
+
+const connectMember = (member: any) => {
+  member.connected = !member.connected
+  console.log('Connect with:', member)
+}
+
+const messageMember = (member: any) => {
+  console.log('Message:', member)
+}
+</script>
+
+<style scoped lang="scss">
+.members-mockup {
+  padding: 2rem;
+  max-width: 1400px;
+  margin: 0 auto;
+  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
+  min-height: 100vh;
+  position: relative;
+}
+
+.members-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  
+  &__content {
+    flex: 1;
+  }
+  
+  &__title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #27272a;
+    margin: 0 0 0.5rem;
+  }
+  
+  &__subtitle {
+    font-size: 1.125rem;
+    color: #6b7280;
+    margin: 0;
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 1rem;
+  }
+}
+
+.members-controls {
+  display: flex;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+  
+  &__search {
+    flex: 1;
+    min-width: 300px;
+  }
+  
+  &__filters {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+}
+
+.filter-select {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  font-size: 0.875rem;
+  color: #27272a;
+  cursor: pointer;
+  transition: all 0.2s;
+  outline: none;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.8);
+    border-color: rgba(220, 38, 38, 0.2);
+  }
+  
+  &:focus {
+    border-color: #dc2626;
+    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+  }
+}
+
+.members-stats {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.stat-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 20px;
+  
+  &__value {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+  
+  &__label {
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+}
+
+.view-controls {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1.5rem;
+}
+
+.view-toggle {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20px);
+  border-radius: 12px;
+  
+  &__btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    color: #6b7280;
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      background: rgba(220, 38, 38, 0.05);
+    }
+    
+    &--active {
+      background: #dc2626;
+      color: white;
+    }
+  }
+}
+
+.members-container {
+  margin-bottom: 2rem;
+  
+  &--grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 1.5rem;
+  }
+  
+  &--list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  
+  &--compact {
+    .compact-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+      gap: 1rem;
+    }
+  }
+}
+
+.member-list-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+    transform: translateX(4px);
+  }
+  
+  &__avatar {
+    position: relative;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 10px;
+    overflow: hidden;
+    flex-shrink: 0;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  &__name {
+    margin: 0 0 0.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #27272a;
+  }
+  
+  &__title {
+    margin: 0;
+    font-size: 0.875rem;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  &__tags {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+  
+  &__meta {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    flex-shrink: 0;
+  }
+  
+  &__actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+  }
+}
+
+.avatar-placeholder,
+.avatar-placeholder-small {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
+  font-weight: 600;
+  color: #dc2626;
+}
+
+.avatar-placeholder {
+  font-size: 1.25rem;
+}
+
+.avatar-placeholder-small {
+  font-size: 0.875rem;
+}
+
+.status-indicator {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: #10b981;
+  border: 2px solid white;
+  border-radius: 50%;
+}
+
+.tag {
+  padding: 0.25rem 0.5rem;
+  background: rgba(220, 38, 38, 0.1);
+  color: #dc2626;
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-weight: 500;
+}
+
+.meta-text {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.compact-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  border-radius: 10px;
+  cursor: pointer;
+  transition: all 0.2s;
+  
+  &:hover {
+    background: rgba(255, 255, 255, 0.95);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    transform: translateY(-2px);
+  }
+  
+  &__avatar {
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+  
+  &__name {
+    margin: 0 0 0.125rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: #27272a;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  &__role {
+    margin: 0;
+    font-size: 0.75rem;
+    color: #6b7280;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  &__connect {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    background: #dc2626;
+    color: white;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s;
+    
+    &:hover {
+      background: #b91c1c;
+      transform: scale(1.1);
+    }
+    
+    &--connected {
+      background: rgba(16, 185, 129, 0.1);
+      color: #10b981;
+      
+      &:hover {
+        background: rgba(16, 185, 129, 0.2);
+      }
+    }
+  }
+}
+
+.load-more {
+  max-width: 400px;
+  margin: 2rem auto;
+}
+
+.network-widget {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  width: 280px;
+  z-index: 10;
+  
+  &__title {
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #dc2626;
+    text-align: center;
+  }
+}
+
+.network-stats {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.network-stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  
+  &__value {
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #dc2626;
+  }
+  
+  &__label {
+    font-size: 0.625rem;
+    color: #6b7280;
+    text-align: center;
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .members-header {
+    &__actions {
+      width: 100%;
+      
+      button {
+        flex: 1;
+      }
+    }
+  }
+  
+  .members-controls {
+    flex-direction: column;
+    
+    &__filters {
+      width: 100%;
+      
+      .filter-select {
+        flex: 1;
+      }
+    }
+  }
+  
+  .member-list-item {
+    flex-direction: column;
+    align-items: flex-start;
+    
+    &__tags,
+    &__meta {
+      display: none;
+    }
+  }
+  
+  .network-widget {
+    display: none;
+  }
+}
+</style>
\ No newline at end of file