diff --git a/frontend/src/components/JoinProjectModal.vue b/frontend/src/components/JoinProjectModal.vue
index 211ba3f..3b18599 100644
--- a/frontend/src/components/JoinProjectModal.vue
+++ b/frontend/src/components/JoinProjectModal.vue
@@ -1,76 +1,166 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { RouterLink } from 'vue-router'
 import { api, ApiError } from '@/api/client'
 import { useAuth } from '@/composables/useAuth'
-import type { Member } from '@/types/api'
+import type { Member, MemberRole, Paginated } from '@/types/api'
+import Avatar from './Avatar.vue'
 
 /**
- * Modal "Rejoindre le projet".
+ * Modal "Rejoindre le projet" — 2 modes :
+ *   - Membre existant : on choisit dans l'annuaire (exclut ceux déjà sur l'équipe)
+ *     + rôle. POST direct sur project_members.
+ *   - Nouveau membre  : on saisit nom + email, on crée le membre dans l'annuaire
+ *     puis on l'attache au projet. POST members + POST project_members.
  *
- * Stratégie V1 (sans auth user) :
- *  - Si admin connecté : POST /api/members (créé un membre "person") puis
- *    POST /api/projects/:slug/members pour l'attacher.
- *  - Sinon : affiche un avertissement + lien vers /admin/login. On ne fait
- *    pas de fake-auth ni de bypass du token.
- *
- * V2 prévue : auth OIDC Nextcloud -> l'utilisateur se rejoint lui-même
- * via un endpoint public dédié.
+ * V1 = token admin requis pour les 2 modes (cf. spec API).
  */
 
-const props = defineProps<{ projectSlug: string }>()
+const props = defineProps<{
+  projectSlug: string
+  /** Slugs des membres déjà sur l'équipe — pour les masquer de la liste "existant". */
+  excludeSlugs: string[]
+}>()
 const emit = defineEmits<{
   (e: 'close'): void
-  (e: 'joined', payload: { member: Member; role: string }): void
+  (e: 'joined', payload: { member: Member; role: MemberRole }): void
 }>()
 
 const { isAuthenticated } = useAuth()
+
+type Mode = 'existing' | 'new'
+const mode = ref<Mode>('existing')
+const role = ref<MemberRole>('contributor')
+
+// --- Mode "existing" ---
+const directory = ref<Member[]>([])
+const directoryLoading = ref(false)
+const directoryError = ref<string | null>(null)
+const directoryLoaded = ref(false)
+const selectedSlug = ref('')
+
+async function loadDirectory() {
+  if (directoryLoaded.value || directoryLoading.value) return
+  directoryLoading.value = true
+  directoryError.value = null
+  try {
+    const r = await api.get<Paginated<Member>>('/api/members', { query: { per_page: 100 } })
+    directory.value = r.data
+    directoryLoaded.value = true
+  } catch (e) {
+    // Surfacer l'erreur : sans ça, l'utilisateur voit "tous les membres déjà
+    // sur ce projet" alors que c'est en réalité l'API qui a échoué.
+    directoryError.value = e instanceof ApiError
+      ? (e.payload.message ?? e.code)
+      : "Impossible de charger l'annuaire."
+  } finally {
+    directoryLoading.value = false
+  }
+}
+
+// Lazy : on charge l'annuaire la première fois qu'on passe en mode "existing"
+// (qui est aussi le mode par défaut). Évite un GET /api/members?per_page=100
+// gratuit si l'admin clique direct sur "Nouveau membre".
+function switchMode(next: Mode) {
+  mode.value = next
+  resetErrors()
+  if (next === 'existing') loadDirectory()
+}
+onMounted(() => {
+  if (isAuthenticated.value && mode.value === 'existing') loadDirectory()
+})
+
+const availableMembers = computed(() =>
+  directory.value
+    .filter(m => !props.excludeSlugs.includes(m.slug))
+    .sort((a, b) => a.display_name.localeCompare(b.display_name, 'fr')),
+)
+
+const selectedMember = computed(() =>
+  availableMembers.value.find(m => m.slug === selectedSlug.value) ?? null,
+)
+
+// --- Mode "new" ---
 const name = ref('')
 const email = ref('')
+
 const submitting = ref(false)
 const error = ref<string | null>(null)
 const fieldErrors = ref<Record<string, string>>({})
 
-async function submit() {
+function resetErrors() {
   error.value = null
   fieldErrors.value = {}
-  if (!isAuthenticated.value) return
-  if (!name.value.trim()) {
-    fieldErrors.value.name = 'required'
+}
+
+async function submitExisting() {
+  resetErrors()
+  if (!selectedSlug.value) {
+    fieldErrors.value.member_slug = 'required'
+    return
+  }
+  submitting.value = true
+  try {
+    await api.post(`/api/projects/${encodeURIComponent(props.projectSlug)}/members`, {
+      member_slug: selectedSlug.value,
+      role: role.value,
+    })
+    const member = directory.value.find(m => m.slug === selectedSlug.value)
+    if (member) emit('joined', { member, role: role.value })
+    emit('close')
+  } catch (e) {
+    handleError(e)
+  } finally {
+    submitting.value = false
+  }
+}
+
+async function submitNew() {
+  resetErrors()
+  if (!name.value.trim()) {
+    fieldErrors.value.display_name = 'required'
     return
   }
-
   submitting.value = true
   try {
-    // 1) Crée le membre (idempotent côté slug : si collision, suffixe -2 etc.).
     const member = await api.post<Member>('/api/members', {
       display_name: name.value.trim(),
       kind: 'person',
       contact_email: email.value.trim() || undefined,
     })
-    // 2) L'attache au projet en rôle contributor.
-    await api.post<{ project_id: number; role: string }>(
-      `/api/projects/${encodeURIComponent(props.projectSlug)}/members`,
-      { member_slug: member.slug, role: 'contributor' },
-    )
-    emit('joined', { member, role: 'contributor' })
+    await api.post(`/api/projects/${encodeURIComponent(props.projectSlug)}/members`, {
+      member_slug: member.slug,
+      role: role.value,
+    })
+    emit('joined', { member, role: role.value })
     emit('close')
   } catch (e) {
-    if (e instanceof ApiError) {
-      if (e.status === 422) {
-        fieldErrors.value = e.fields
-      } else if (e.status === 409) {
-        error.value = e.payload.message ?? 'Ce membre fait déjà partie du projet.'
-      } else {
-        error.value = e.payload.message ?? e.code
-      }
-    } else {
-      error.value = 'Erreur réseau'
-    }
+    handleError(e)
   } finally {
     submitting.value = false
   }
 }
+
+function handleError(e: unknown) {
+  if (e instanceof ApiError) {
+    if (e.status === 422) {
+      fieldErrors.value = e.fields
+    } else if (e.status === 409) {
+      error.value = e.payload.message ?? 'Ce membre fait déjà partie du projet.'
+    } else if (e.status === 401) {
+      error.value = 'Session admin expirée. Reconnecte-toi.'
+    } else {
+      error.value = e.payload.message ?? e.code
+    }
+  } else {
+    error.value = 'Erreur réseau'
+  }
+}
+
+function submit() {
+  if (mode.value === 'existing') submitExisting()
+  else submitNew()
+}
 </script>
 
 <template>
@@ -81,8 +171,8 @@ async function submit() {
     <div class="bg-donut-surface rounded-2xl shadow-xl w-full max-w-md p-6">
       <div class="flex items-start justify-between gap-4 mb-4">
         <div>
-          <h2 class="text-xl font-semibold text-donut-text">Rejoindre le projet</h2>
-          <p class="text-sm text-donut-muted mt-1">Indique ton nom — tu seras ajouté en tant que contributeur.</p>
+          <h2 class="text-xl font-semibold text-donut-text">Ajouter à l'équipe</h2>
+          <p class="text-sm text-donut-muted mt-1">Choisis un membre existant ou crées-en un nouveau.</p>
         </div>
         <button
           type="button"
@@ -96,63 +186,136 @@ async function submit() {
         </button>
       </div>
 
-      <!-- Pas de token : avertissement + lien login. -->
+      <!-- Pas de token : avertissement -->
       <div v-if="!isAuthenticated" class="rounded-lg border border-amber-200 bg-amber-50 text-amber-800 px-4 py-3 text-sm">
         L'ajout de membres est réservé à l'admin en V1.
         <RouterLink :to="{ name: 'admin-login' }" class="underline font-medium ml-1">
           Se connecter
         </RouterLink>
-        — la V2 ouvrira l'auto-rejoint via Nextcloud.
       </div>
 
-      <!-- Form admin -->
-      <form v-else @submit.prevent="submit" class="space-y-3">
-        <div>
-          <label class="block text-sm font-medium text-donut-text mb-1">Nom *</label>
-          <input
-            v-model="name"
-            type="text"
-            placeholder="ex: Camille D."
-            class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
-            :class="fieldErrors.display_name || fieldErrors.name ? 'border-red-400' : ''"
-          />
-          <p v-if="fieldErrors.display_name || fieldErrors.name" class="text-xs text-red-600 mt-1">
-            Le nom est requis.
-          </p>
-        </div>
-        <div>
-          <label class="block text-sm font-medium text-donut-text mb-1">Email (optionnel)</label>
-          <input
-            v-model="email"
-            type="email"
-            placeholder="camille@example.org"
-            class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
-            :class="fieldErrors.contact_email ? 'border-red-400' : ''"
-          />
-          <p v-if="fieldErrors.contact_email" class="text-xs text-red-600 mt-1">Email invalide.</p>
-        </div>
-
-        <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm">
-          {{ error }}
-        </div>
-
-        <div class="flex items-center justify-end gap-2 pt-2">
+      <template v-else>
+        <!-- Tabs mode -->
+        <div class="flex items-center bg-gray-100 rounded-lg p-1 mb-4 text-sm">
           <button
             type="button"
-            class="text-sm px-3 py-2 rounded-lg hover:bg-gray-50 text-donut-text"
-            @click="emit('close')"
-          >
-            Annuler
-          </button>
+            :class="[
+              'flex-1 px-3 py-1.5 rounded-md transition-colors',
+              mode === 'existing'
+                ? 'bg-white shadow-sm font-medium text-donut-text'
+                : 'text-donut-muted hover:text-donut-text',
+            ]"
+            @click="switchMode('existing')"
+          >Membre existant</button>
           <button
-            type="submit"
-            :disabled="submitting"
-            class="text-sm px-4 py-2 rounded-lg bg-donut-text text-white hover:bg-black disabled:opacity-50"
-          >
-            {{ submitting ? 'Ajout…' : 'Rejoindre' }}
-          </button>
+            type="button"
+            :class="[
+              'flex-1 px-3 py-1.5 rounded-md transition-colors',
+              mode === 'new'
+                ? 'bg-white shadow-sm font-medium text-donut-text'
+                : 'text-donut-muted hover:text-donut-text',
+            ]"
+            @click="switchMode('new')"
+          >Nouveau membre</button>
         </div>
-      </form>
+
+        <form @submit.prevent="submit" class="space-y-3">
+          <!-- Mode existant : sélection dans annuaire -->
+          <template v-if="mode === 'existing'">
+            <div>
+              <label class="block text-sm font-medium text-donut-text mb-1">Membre</label>
+              <div v-if="directoryLoading" class="text-sm text-donut-muted">Chargement de l'annuaire…</div>
+              <div
+                v-else-if="directoryError"
+                class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm flex items-center justify-between gap-2"
+              >
+                <span>{{ directoryError }}</span>
+                <button type="button" class="underline font-medium" @click="directoryLoaded = false; loadDirectory()">Réessayer</button>
+              </div>
+              <div v-else-if="availableMembers.length === 0" class="text-sm text-donut-muted">
+                Tous les membres de l'annuaire sont déjà sur ce projet.
+              </div>
+              <select
+                v-else
+                v-model="selectedSlug"
+                class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+                :class="fieldErrors.member_slug ? 'border-red-400' : ''"
+              >
+                <option value="" disabled>Choisir un membre…</option>
+                <option v-for="m in availableMembers" :key="m.id" :value="m.slug">
+                  {{ m.display_name }} <template v-if="m.kind !== 'person'">— {{ m.kind === 'org' ? 'org' : 'collectif' }}</template>
+                </option>
+              </select>
+              <!-- Aperçu visuel du membre sélectionné -->
+              <div v-if="selectedMember" class="mt-2 flex items-center gap-2 text-sm text-donut-muted">
+                <Avatar
+                  :name="selectedMember.display_name"
+                  :initials="selectedMember.initials"
+                  :avatar-url="selectedMember.avatar_url"
+                  :size="28"
+                />
+                <span class="truncate">{{ selectedMember.bio ?? 'Aucune bio renseignée.' }}</span>
+              </div>
+            </div>
+          </template>
+
+          <!-- Mode nouveau : création -->
+          <template v-else>
+            <div>
+              <label class="block text-sm font-medium text-donut-text mb-1">Nom *</label>
+              <input
+                v-model="name"
+                type="text"
+                placeholder="ex: Camille D."
+                class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+                :class="fieldErrors.display_name ? 'border-red-400' : ''"
+              />
+              <p v-if="fieldErrors.display_name" class="text-xs text-red-600 mt-1">Le nom est requis.</p>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-donut-text mb-1">Email (optionnel)</label>
+              <input
+                v-model="email"
+                type="email"
+                placeholder="camille@example.org"
+                class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+                :class="fieldErrors.contact_email ? 'border-red-400' : ''"
+              />
+              <p v-if="fieldErrors.contact_email" class="text-xs text-red-600 mt-1">Email invalide.</p>
+            </div>
+          </template>
+
+          <!-- Rôle (toujours visible) -->
+          <div>
+            <label class="block text-sm font-medium text-donut-text mb-1">Rôle dans le projet</label>
+            <select
+              v-model="role"
+              class="w-full bg-white border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text"
+            >
+              <option value="admin">Admin — peut tout modifier</option>
+              <option value="contributor">Contributor — participe activement</option>
+              <option value="observer">Observer — accès lecture / suivi</option>
+            </select>
+          </div>
+
+          <div v-if="error" class="rounded-lg border border-red-200 bg-red-50 text-red-700 px-3 py-2 text-sm">
+            {{ error }}
+          </div>
+
+          <div class="flex items-center justify-end gap-2 pt-2">
+            <button
+              type="button"
+              class="text-sm px-3 py-2 rounded-lg hover:bg-gray-50 text-donut-text"
+              @click="emit('close')"
+            >Annuler</button>
+            <button
+              type="submit"
+              :disabled="submitting || (mode === 'existing' && availableMembers.length === 0)"
+              class="text-sm px-4 py-2 rounded-lg bg-donut-text text-white hover:bg-black disabled:opacity-50"
+            >{{ submitting ? 'Ajout…' : 'Ajouter à l’équipe' }}</button>
+          </div>
+        </form>
+      </template>
     </div>
   </div>
 </template>
diff --git a/frontend/src/pages/ProjectDetailPage.vue b/frontend/src/pages/ProjectDetailPage.vue
index 8e4a35f..25cd879 100644
--- a/frontend/src/pages/ProjectDetailPage.vue
+++ b/frontend/src/pages/ProjectDetailPage.vue
@@ -3,7 +3,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 import { api, ApiError } from '@/api/client'
 import { useAuth } from '@/composables/useAuth'
-import type { Discussion, ProjectDetail, Resource, RoadmapStep, Wrapped } from '@/types/api'
+import type { Discussion, Member, MemberRole, ProjectDetail, ProjectMemberEntry, Resource, RoadmapStep, Wrapped } from '@/types/api'
 
 import StatusBadge from '@/components/StatusBadge.vue'
 import CategoryBadge from '@/components/CategoryBadge.vue'
@@ -181,22 +181,53 @@ async function deleteProject() {
   }
 }
 
-function onJoined(payload: { member: { id: number; slug: string; display_name: string }; role: string }) {
-  // Optimiste : push dans la liste des membres locale.
+function onJoined(payload: { member: Member; role: MemberRole }) {
+  // Optimiste : push dans la liste des membres locale avec les vraies infos.
   if (!project.value) return
   project.value.members.push({
-    id: payload.member.id,
-    slug: payload.member.slug,
+    id:           payload.member.id,
+    slug:         payload.member.slug,
     display_name: payload.member.display_name,
-    initials: null,
-    kind: 'person',
-    avatar_url: null,
-    role: payload.role as 'contributor',
-    joined_at: new Date().toISOString(),
+    initials:     payload.member.initials,
+    kind:         payload.member.kind,
+    avatar_url:   payload.member.avatar_url,
+    role:         payload.role,
+    joined_at:    new Date().toISOString(),
   })
   project.value.counts.members = project.value.members.length
 }
 
+async function changeMemberRole(m: ProjectMemberEntry, newRole: MemberRole) {
+  if (!isAuthenticated.value || !project.value || newRole === m.role) return
+  const oldRole = m.role
+  m.role = newRole  // optimiste
+  try {
+    await api.patch(
+      `/api/projects/${encodeURIComponent(props.slug)}/members/${encodeURIComponent(m.slug)}`,
+      { role: newRole },
+    )
+  } catch (e) {
+    m.role = oldRole
+    if (e instanceof ApiError) alert(`Erreur : ${e.payload.message ?? e.code}`)
+    else alert('Erreur réseau')
+  }
+}
+
+async function removeMember(m: ProjectMemberEntry) {
+  if (!isAuthenticated.value || !project.value) return
+  if (!confirm(`Retirer « ${m.display_name} » de l'équipe ?\nLe membre reste dans l'annuaire.`)) return
+  try {
+    await api.delete(
+      `/api/projects/${encodeURIComponent(props.slug)}/members/${encodeURIComponent(m.slug)}`,
+    )
+    project.value.members = project.value.members.filter(x => x.id !== m.id)
+    project.value.counts.members = project.value.members.length
+  } catch (e) {
+    if (e instanceof ApiError) alert(`Erreur : ${e.payload.message ?? e.code}`)
+    else alert('Erreur réseau')
+  }
+}
+
 // Présentations dérivées
 const categoryColor = computed(() => project.value?.category?.color_hex ?? '#111827')
 const externalDomain = computed(() => {
@@ -603,13 +634,39 @@ const ROLE_LABEL = { admin: 'Admin', contributor: 'Contributor', observer: 'Obse
             <li
               v-for="m in project.members"
               :key="m.id"
-              class="flex items-center gap-3"
+              class="flex items-center gap-3 group"
             >
               <Avatar :name="m.display_name" :initials="m.initials" :avatar-url="m.avatar_url" :size="34" />
               <div class="flex-1 min-w-0">
                 <div class="text-sm font-medium text-donut-text truncate">{{ m.display_name }}</div>
-                <div class="text-xs text-donut-muted">{{ ROLE_LABEL[m.role] }}</div>
+                <!-- Lecture seule pour les visiteurs / édition inline pour les admins -->
+                <div v-if="!isAuthenticated" class="text-xs text-donut-muted">{{ ROLE_LABEL[m.role] }}</div>
+                <select
+                  v-else
+                  :value="m.role"
+                  class="text-xs text-donut-muted bg-transparent border-0 -ml-1 pl-1 pr-4 py-0.5 rounded hover:bg-gray-100 focus:bg-gray-100 focus:text-donut-text outline-none"
+                  @change="changeMemberRole(m, ($event.target as HTMLSelectElement).value as MemberRole)"
+                >
+                  <option value="admin">Admin</option>
+                  <option value="contributor">Contributor</option>
+                  <option value="observer">Observer</option>
+                </select>
               </div>
+              <!-- Sur desktop (group:hover supporté) : icône cachée par défaut, apparaît au survol.
+                   Sur touch : le bouton reste visible (opacity-60) pour rester atteignable.
+                   sm:opacity-0 ne s'applique qu'au-delà du breakpoint sm où le hover est fiable. -->
+              <button
+                v-if="isAuthenticated"
+                type="button"
+                class="opacity-60 sm:opacity-0 sm:group-hover:opacity-100 focus:opacity-100 transition-opacity text-donut-muted hover:text-red-500"
+                title="Retirer du projet"
+                aria-label="Retirer ce membre du projet"
+                @click="removeMember(m)"
+              >
+                <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+                  <path d="M18 6 6 18M6 6l12 12"/>
+                </svg>
+              </button>
             </li>
           </ul>
         </div>
@@ -620,6 +677,7 @@ const ROLE_LABEL = { admin: 'Admin', contributor: 'Contributor', observer: 'Obse
     <JoinProjectModal
       v-if="showJoinModal && project"
       :project-slug="project.slug"
+      :exclude-slugs="project.members.map(m => m.slug)"
       @close="showJoinModal = false"
       @joined="onJoined"
     />
diff --git a/public/index.php b/public/index.php
index e44d8e3..1b6a913 100644
--- a/public/index.php
+++ b/public/index.php
@@ -74,6 +74,7 @@ $router->patch ('/api/projects/:slug',                        [ProjectsControlle
 $router->delete('/api/projects/:slug',                        [ProjectsController::class,       'destroy']);
 
 $router->post  ('/api/projects/:slug/members',                [ProjectMembersController::class, 'store']);
+$router->patch ('/api/projects/:slug/members/:member_slug',   [ProjectMembersController::class, 'update']);
 $router->delete('/api/projects/:slug/members/:member_slug',   [ProjectMembersController::class, 'destroy']);
 
 $router->post  ('/api/projects/:slug/roadmap',                [RoadmapController::class,        'store']);
diff --git a/src/Controllers/ProjectMembersController.php b/src/Controllers/ProjectMembersController.php
index ca09f70..c661c6f 100644
--- a/src/Controllers/ProjectMembersController.php
+++ b/src/Controllers/ProjectMembersController.php
@@ -98,6 +98,51 @@ final class ProjectMembersController
         ], 201);
     }
 
+    public function update(Request $req, array $params): void
+    {
+        $p = ProjectsController::findOr404($params['slug']);
+        $member = Database::fetchOne(
+            'SELECT id, slug, display_name FROM members WHERE slug = :s',
+            [':s' => $params['member_slug']],
+        );
+        if ($member === null) {
+            throw new \ApiException(404, ['error' => 'not_found']);
+        }
+
+        $body = $req->json();
+        $v = new Validator($body);
+        $v->required('role')->in('role', ['admin', 'contributor', 'observer']);
+        $v->check();
+
+        $updated = Database::update(
+            'project_members',
+            ['role' => (string) $body['role']],
+            'project_id = :pid AND member_id = :mid',
+            [':pid' => (int) $p['id'], ':mid' => (int) $member['id']],
+        );
+        if ($updated === 0) {
+            // Soit la ligne pivot n'existe pas, soit le rôle est déjà le même.
+            // Vérifie pour distinguer 404 vs no-op.
+            $exists = Database::fetchValue(
+                'SELECT 1 FROM project_members WHERE project_id = :pid AND member_id = :mid',
+                [':pid' => (int) $p['id'], ':mid' => (int) $member['id']],
+            );
+            if ($exists === null) {
+                throw new \ApiException(404, ['error' => 'not_found']);
+            }
+        }
+
+        Response::json([
+            'project_id' => (int) $p['id'],
+            'member'     => [
+                'id'           => (int) $member['id'],
+                'slug'         => $member['slug'],
+                'display_name' => $member['display_name'],
+            ],
+            'role' => (string) $body['role'],
+        ]);
+    }
+
     public function destroy(Request $req, array $params): void
     {
         $p = ProjectsController::findOr404($params['slug']);