diff --git a/components/MemberCard.tsx b/components/MemberCard.tsx
index 477242d..62f1288 100644
--- a/components/MemberCard.tsx
+++ b/components/MemberCard.tsx
@@ -1,4 +1,4 @@
-type MemberCardProps = {
+export type MemberCardProps = {
 	id: string
 	icon: string
 	name: string
@@ -22,26 +22,3 @@ export function MemberCard(
 		</div>
 	)
 }
-
-export const memberMock: MemberCardProps[] = Array(50).fill(undefined).map(
-	(_, index) => {
-		return {
-			name: `Michel ${randomLastName()}`,
-			groups: ['FabManager', 'Étudiant'],
-			icon: `url("https://thispersondoesnotexist.com/")`,
-			id: String(index),
-		}
-	},
-)
-
-function randomLastName() {
-	const randomArray = Math.round(Math.random() * 1e8).toString().split('').map(
-		Number,
-	)
-
-	const [first, ...tail] = randomArray.map((number) =>
-		String.fromCodePoint(number + 97)
-	)
-
-	return [first.toLocaleUpperCase(), ...tail].join('')
-}
diff --git a/islands/MemberCardList.tsx b/islands/MemberCardList.tsx
new file mode 100644
index 0000000..4db3ade
--- /dev/null
+++ b/islands/MemberCardList.tsx
@@ -0,0 +1,60 @@
+import { MemberCard } from ':components/MemberCard.tsx'
+import CardList from ':islands/CardList.tsx'
+import type { Ref } from 'preact'
+
+export default function MemberCardList(
+    { limit, filters, usePlaceholder, useObserver }: {
+        filters?: [string, string][]
+        limit?: number
+        usePlaceholder?: boolean
+        useObserver?: boolean
+    },
+) {
+    const query = new URL('members/fetchAll', 'https://null/')
+    filters?.forEach((filter) => query.searchParams.set(...filter))
+
+    const apiRoute = `${query.pathname}${query.search}`
+
+    if (usePlaceholder) {
+        return (
+            <CardList
+                apiRoute={apiRoute}
+                builder={MemberCard}
+                limit={limit}
+                placeholder={Placeholder}
+                fallback={Fallback}
+                useObserver={useObserver}
+            />
+        )
+    }
+
+    return (
+        <CardList
+            apiRoute={apiRoute}
+            builder={MemberCard}
+            limit={limit}
+        />
+    )
+}
+
+function Placeholder({ ref }: { ref?: Ref<HTMLDivElement> | undefined }) {
+    return (
+        <div
+            // class='components__blog_block components__blog_block--card components__blog_block--placeholder'
+            ref={ref}
+        >
+            <h3>Chargement ...</h3>
+        </div>
+    )
+}
+
+function Fallback() {
+    return (
+        <div
+            // class='components__blog_block components__blog_block--card components__blog_block--fallback'
+            inert
+        >
+            <h3>Pas d'utilisateur</h3>
+        </div>
+    )
+}
diff --git a/src/members/mod.ts b/src/members/mod.ts
new file mode 100644
index 0000000..1ffceef
--- /dev/null
+++ b/src/members/mod.ts
@@ -0,0 +1,45 @@
+import { MemberCardProps } from ':components/MemberCard.tsx'
+import { db } from ':src/db/mod.ts'
+import { Db, Ref, User } from '@cohabit/ressources_manager/mod.ts'
+
+export async function fetchCarnet(login: string): Promise<string> {
+	try {
+		const response = await fetch(
+			`https://git.cohabit.fr/${login}/.carnet/raw/branch/main/index.md`,
+		)
+
+		if (!response.ok) {
+			throw new Error(`[${response.status}] "${response.statusText}"`)
+		}
+
+		return response.text()
+	} catch (error) {
+		return `# Carnet introuvable\n\`\`\`js\n${String(error)}\n\`\`\``
+	}
+}
+
+const resolver = Ref.dbResolver(db)
+
+export async function userToMemberCardProps(user: User) {
+	const groupNames = user.groups.map(async (group) => {
+		const resolved = await group.ref(resolver)
+		return resolved.name
+	})
+
+	return {
+		name: user.name,
+		groups: await Promise.all(groupNames),
+		icon: `url("${user.avatar}")`,
+		id: user.uuid,
+	}
+}
+
+export function dbToMemberCardProps(
+	db: Db,
+): AsyncIterableIterator<MemberCardProps> {
+	const memberList = db.ressource.user
+		.list()
+		.map(userToMemberCardProps)
+
+	return memberList as AsyncIterableIterator<MemberCardProps>
+}