diff --git a/geneit_app/src/api/FamilyApi.ts b/geneit_app/src/api/FamilyApi.ts
index 3c471bc..9c26432 100644
--- a/geneit_app/src/api/FamilyApi.ts
+++ b/geneit_app/src/api/FamilyApi.ts
@@ -1,6 +1,6 @@
 import { APIClient } from "./ApiClient";
 
-export interface Family {
+interface FamilyAPI {
   user_id: number;
   family_id: number;
   name: string;
@@ -11,6 +11,49 @@ export interface Family {
   count_admins: number;
 }
 
+export class Family implements FamilyAPI {
+  user_id: number;
+  family_id: number;
+  name: string;
+  time_create: number;
+  is_admin: boolean;
+  invitation_code: string;
+  count_members: number;
+  count_admins: number;
+
+  constructor(f: FamilyAPI) {
+    this.user_id = f.user_id;
+    this.family_id = f.family_id;
+    this.name = f.name;
+    this.time_create = f.time_create;
+    this.is_admin = f.is_admin;
+    this.invitation_code = f.invitation_code;
+    this.count_members = f.count_members;
+    this.count_admins = f.count_admins;
+  }
+
+  /**
+   * Check if the current user user can leave a family
+   */
+  get CanLeave(): boolean {
+    return !this.is_admin || this.count_admins > 1;
+  }
+
+  /**
+   * Get application URL for family
+   */
+  URL(uri?: string): string {
+    return `/family/${this.family_id}/${uri ?? ""}`;
+  }
+
+  /**
+   * Get base family URL
+   */
+  get BaseURL(): string {
+    return this.URL("");
+  }
+}
+
 export enum JoinFamilyResult {
   TooManyRequests,
   InvalidCode,
@@ -65,14 +108,7 @@ export class FamilyApi {
         method: "GET",
         uri: "/family/list",
       })
-    ).data;
-  }
-
-  /**
-   * Check if the current user user can leave a family
-   */
-  static CanLeaveFamily(f: Family): boolean {
-    return !f.is_admin || f.count_admins > 1;
+    ).data.map((f: FamilyAPI) => new Family(f));
   }
 
   /**
diff --git a/geneit_app/src/routes/FamiliesListRoute.tsx b/geneit_app/src/routes/FamiliesListRoute.tsx
index fce943b..ef594b3 100644
--- a/geneit_app/src/routes/FamiliesListRoute.tsx
+++ b/geneit_app/src/routes/FamiliesListRoute.tsx
@@ -11,13 +11,15 @@ import {
   Typography,
 } from "@mui/material";
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { Family, FamilyApi } from "../api/FamilyApi";
 import { CreateFamilyDialog } from "../dialogs/CreateFamilyDialog";
 import { JoinFamilyDialog } from "../dialogs/JoinFamilyDialog";
-import { AsyncWidget } from "../widgets/AsyncWidget";
-import { TimeWidget } from "../widgets/TimeWidget";
-import { useConfirm } from "../widgets/ConfirmDialogProvider";
 import { useAlert } from "../widgets/AlertDialogProvider";
+import { AsyncWidget } from "../widgets/AsyncWidget";
+import { useConfirm } from "../widgets/ConfirmDialogProvider";
+import { RouterLink } from "../widgets/RouterLink";
+import { TimeWidget } from "../widgets/TimeWidget";
 
 export function FamiliesListRoute(): React.ReactElement {
   const loadKey = React.useRef(1);
@@ -181,14 +183,14 @@ function FamilyCard(p: {
   f: Family;
   onFamilyLeft: () => void;
 }): React.ReactElement {
-  const canLeave = FamilyApi.CanLeaveFamily(p.f);
   const confirm = useConfirm();
   const alert = useAlert();
+  const navigate = useNavigate();
 
   const leaveFamily = async () => {
     try {
       if (
-        !canLeave ||
+        !p.f.CanLeave ||
         !(await confirm.confirm(
           "Voulez-vous vraiment quitter la famille " + p.f.name + " ?"
         ))
@@ -211,27 +213,30 @@ function FamilyCard(p: {
   return (
     <Card style={{ margin: "5px" }}>
       <CardActionArea>
-        <CardContent>
-          <Typography gutterBottom variant="h5" component="div">
-            {p.f.name}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {p.f.count_members === 1
-              ? "1 membre"
-              : p.f.count_members + " membres"}{" "}
-            <br />
-            {p.f.count_admins === 1
-              ? "1 administrateur"
-              : p.f.count_admins + " administrateurs"}
-            <br />
-            Famille créée il y a <TimeWidget time={p.f.time_create} />
-          </Typography>
-        </CardContent>
+        {" "}
+        <RouterLink to={p.f.BaseURL}>
+          <CardContent>
+            <Typography gutterBottom variant="h5" component="div">
+              {p.f.name}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              {p.f.count_members === 1
+                ? "1 membre"
+                : p.f.count_members + " membres"}{" "}
+              <br />
+              {p.f.count_admins === 1
+                ? "1 administrateur"
+                : p.f.count_admins + " administrateurs"}
+              <br />
+              Famille créée il y a <TimeWidget time={p.f.time_create} />
+            </Typography>
+          </CardContent>{" "}
+        </RouterLink>
       </CardActionArea>
       <CardActions>
         <Tooltip
           title={
-            canLeave
+            p.f.CanLeave
               ? "Quitter la famille"
               : "Vous ne pouvez pas quitter cette famille, pour la retirer de cette liste vous devez la supprimer."
           }
@@ -240,7 +245,7 @@ function FamilyCard(p: {
             <Button
               size="small"
               color="primary"
-              disabled={!canLeave}
+              disabled={!p.f.CanLeave}
               onClick={leaveFamily}
             >
               Quitter