diff --git a/routes/index.tsx b/routes/index.tsx
index 8fc5e61..e2fdc65 100644
--- a/routes/index.tsx
+++ b/routes/index.tsx
@@ -3,10 +3,10 @@ import { AutoGrid } from ':components/AutoGrid.tsx'
 import { CohabitInfoTable } from ':components/CohabitInfoTable.tsx'
 import { Heros } from ':components/Heros.tsx'
 import { MachineCard, machineMock } from ':components/MachineCard.tsx'
-import { MemberCard, memberMock } from ':components/MemberCard.tsx'
 import { ProjectCard, projectMock } from ':components/ProjectCard.tsx'
 import { SponsorCards } from ':components/SponsorCards.tsx'
 import BlogCardList from ':islands/BlogCardList.tsx'
+import MemberCardList from ':islands/MemberCardList.tsx'
 
 export default function Home() {
 	return (
@@ -18,10 +18,12 @@ export default function Home() {
 			<section id='first-section'>
 				<h2>Nos actus</h2>
 				<AutoGrid columnWidth='15rem' style={{ alignItems: 'center' }}>
-					<>
-						<BlogCardList limit={4} usePlaceholder={true} useObserver={true} />
-						<a href='/blog' class='cta'>Voir plus</a>
-					</>
+					<BlogCardList
+						limit={4}
+						usePlaceholder={true}
+						useObserver={true}
+					/>
+					<a href='/blog' class='cta'>Voir plus</a>
 				</AutoGrid>
 			</section>
 			<section>
@@ -50,10 +52,12 @@ export default function Home() {
 			<section>
 				<h2>Nos membres</h2>
 				<AutoGrid columnWidth='15rem' style={{ alignItems: 'center' }}>
-					<>
-						{memberMock.slice(0, 4).map(MemberCard)}
-						<a href='/membres' class='cta'>Nous découvrir</a>
-					</>
+					<MemberCardList
+						limit={4}
+						usePlaceholder={true}
+						useObserver={true}
+					/>
+					<a href='/membres' class='cta'>Nous découvrir</a>
 				</AutoGrid>
 			</section>
 			<section>
diff --git a/routes/membres/[id]/index.tsx b/routes/membres/[id]/index.tsx
index 333e492..8a1fbd9 100644
--- a/routes/membres/[id]/index.tsx
+++ b/routes/membres/[id]/index.tsx
@@ -1,31 +1,19 @@
 import { PageProps } from '$fresh/server.ts'
 import { Markdown } from ':components/Markdown.tsx'
-import { MemberCard, memberMock } from ':components/MemberCard.tsx'
+import { MemberCard } from ':components/MemberCard.tsx'
+import { db } from ':src/db/mod.ts'
+import { fetchCarnet, userToMemberCardProps } from ':src/members/mod.ts'
 
-const db = [
-	'julien.oculi',
-]
+export default async function Member(_: Request, { params, url }: PageProps) {
+	const uuid = params.id as ReturnType<Crypto['randomUUID']>
+	const user = await db.ressource.user.get({ uuid }).catch(() => undefined)
 
-async function getCarnet(user: string): Promise<string> {
-	try {
-		const response = await fetch(
-			`https://git.cohabit.fr/${user}/.carnet/raw/branch/main/index.md`,
-		)
-		return response.text()
-	} catch (error) {
-		return 'Carnet introuvable\n```js\nString(error)\n```'
-	}
-}
-
-export default async function Member(_: Request, { params }: PageProps) {
-	const id = Number(params.id)
-	const Member = memberMock.at(id)
-
-	if (!Member) {
+	if (!user) {
 		return <h3>Membre inconnu, peut être serez vous le prochain</h3>
 	}
 
-	const carnet = await getCarnet(db.at(id)!)
+	const memberCardProps = await userToMemberCardProps(user)
+	const carnet = await fetchCarnet(user.login)
 
 	return (
 		<div
@@ -38,17 +26,27 @@ export default async function Member(_: Request, { params }: PageProps) {
 		>
 			<style>{'.markdown-body { max-width: 80dvw; }'}</style>
 			<div>
-				{MemberCard(Member)}
+				{MemberCard(memberCardProps)}
 				<br />
 				<a
-					href={`/membres/${id}/portfolio/index.html`}
+					href={`https://${
+						user.login.replace('.', '-')
+					}.portfolio.${url.hostname}`}
 					class='cta'
 					target='_blank'
 				>
 					Portfolio
 				</a>
 			</div>
-			<Markdown>{carnet}</Markdown>
+			<Markdown
+				options={{
+					baseUrl:
+						`https://git.cohabit.fr/${user.login}/.carnet/raw/branch/main/index.md`,
+					allowMath: true,
+				}}
+			>
+				{carnet}
+			</Markdown>
 		</div>
 	)
 }
diff --git a/routes/membres/index.tsx b/routes/membres/index.tsx
index 6286da0..8a3ac89 100644
--- a/routes/membres/index.tsx
+++ b/routes/membres/index.tsx
@@ -1,5 +1,5 @@
 import { AutoGrid } from ':components/AutoGrid.tsx'
-import { MemberCard, memberMock } from ':components/MemberCard.tsx'
+import MemberCardList from ':islands/MemberCardList.tsx'
 
 export default function Membres() {
 	return (
@@ -8,32 +8,34 @@ export default function Membres() {
 			<section>
 				<h2>Permanents</h2>
 				<AutoGrid columnWidth='15rem'>
-					{memberMock.slice(0, 5).map(MemberCard)}
+					<MemberCardList
+						filters={[['group', 'user.admin']]}
+						usePlaceholder={true}
+						useObserver={true}
+					/>
 				</AutoGrid>
 			</section>
 			<section>
 				<h2>Bénévoles</h2>
 				<AutoGrid columnWidth='15rem'>
-					{memberMock.slice(5, 10).map(MemberCard)}
+					<MemberCardList
+						filters={[['group', 'user.member']]}
+						usePlaceholder={true}
+						useObserver={true}
+					/>
 				</AutoGrid>
 			</section>
 			<section>
 				<h2>Service civique</h2>
-				<AutoGrid columnWidth='15rem'>
-					{memberMock.slice(10, 15).map(MemberCard)}
-				</AutoGrid>
+				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
 			</section>
 			<section>
 				<h2>Stage</h2>
-				<AutoGrid columnWidth='15rem'>
-					{memberMock.slice(15, 20).map(MemberCard)}
-				</AutoGrid>
+				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
 			</section>
 			<section>
 				<h2>Étudiants</h2>
-				<AutoGrid columnWidth='15rem'>
-					{memberMock.slice(0, 5).map(MemberCard)}
-				</AutoGrid>
+				{/* <AutoGrid columnWidth='15rem'></AutoGrid> */}
 			</section>
 		</>
 	)