diff --git a/back/src/oidc-client/oidc-client.controller.ts b/back/src/oidc-client/oidc-client.controller.ts
index 9d4b3b8..dee1e70 100644
--- a/back/src/oidc-client/oidc-client.controller.ts
+++ b/back/src/oidc-client/oidc-client.controller.ts
@@ -20,6 +20,7 @@ export class OidcClientController {
   async findAll() {
     return [
       {
+        id: 123,
         clientDescription: 'Description',
         clientId: 'clientId',
         clientSecret: 'ClientSecret',
@@ -34,6 +35,7 @@ export class OidcClientController {
   @Get('/:id')
   async find_by_id(@Param('id') id: string) {
     return {
+      id: 123,
       clientDescription: 'Description',
       clientId: 'clientId',
       clientSecret: 'ClientSecret',
@@ -57,7 +59,7 @@ export class OidcClientController {
         HttpStatus.BAD_REQUEST,
         {
           cause: error,
-        }
+        },
       );
     }
   }
diff --git a/back/src/oidc-client/oidc-client.dto.ts b/back/src/oidc-client/oidc-client.dto.ts
index 2912918..cf353dd 100644
--- a/back/src/oidc-client/oidc-client.dto.ts
+++ b/back/src/oidc-client/oidc-client.dto.ts
@@ -3,6 +3,9 @@ import { IsNotEmpty } from 'class-validator';
 export class CreateOidcClientDto {
   clientDescription: string | null;
 
+  @IsNotEmpty()
+  id: number;
+
   @IsNotEmpty()
   clientName: string;
 
diff --git a/front/src/providers/connectedSpaces/Dashboard.tsx b/front/src/providers/connectedSpaces/Dashboard.tsx
index b4bfb18..ac3abac 100644
--- a/front/src/providers/connectedSpaces/Dashboard.tsx
+++ b/front/src/providers/connectedSpaces/Dashboard.tsx
@@ -1,61 +1,40 @@
 import { Badge } from '@codegouvfr/react-dsfr/Badge';
 import Title1 from '../../titles/Title1';
 import { Card } from '@codegouvfr/react-dsfr/Card';
+import { useRouteLoaderData } from 'react-router-dom';
 
 export const Dashboard = () => {
+  const oidcClients = useRouteLoaderData('dashboard');
   return (
     <div className="fr-container fr-mb-10v">
       <Title1>Tableau de bord</Title1>
       <div className="fr-grid-row fr-grid-row--gutters">
-        <div className="container fr-col-6">
-          <Card
-            background
-            border
-            desc="Description text MD"
-            horizontal
-            enlargeLink
-            linkProps={{
-              to: '#',
-            }}
-            size="small"
-            start={
-              <ul className="fr-badges-group">
-                <li>
-                  <Badge>Clés de test</Badge>
-                  <Badge severity="info">DINUM</Badge>
-                </li>
-              </ul>
-            }
-            title="Test"
-            titleAs="h2"
-          />
-        </div>
-
-        {/* CARTE 2 !!  */}
-
-        <div className="container fr-col-6">
-          <Card
-            background
-            border
-            desc="Description text MD"
-            horizontal
-            enlargeLink
-            linkProps={{
-              to: '#',
-            }}
-            size="small"
-            start={
-              <ul className="fr-badges-group">
-                <li>
-                  <Badge>Clés de test</Badge>
-                  <Badge severity="info">ANCT</Badge>
-                </li>
-              </ul>
-            }
-            title="Test"
-            titleAs="h2"
-          />
-        </div>
+        {/* ERREUR DE TYPAGE A CORRIGER */}
+        {oidcClients.map((oidcClient) => (
+          <div className="container fr-col-6">
+            <Card
+              background
+              border
+              desc={oidcClient.clientDescription}
+              horizontal
+              enlargeLink
+              linkProps={{
+                to: `/dashboard/${oidcClient.id}`,
+              }}
+              size="small"
+              start={
+                <ul className="fr-badges-group">
+                  <li>
+                    <Badge>Clés de test</Badge>
+                    <Badge severity="info">DINUM</Badge>
+                  </li>
+                </ul>
+              }
+              title={oidcClient.clientName}
+              titleAs="h2"
+            />
+          </div>
+        ))}
       </div>
     </div>
   );
diff --git a/front/src/routes/Router.tsx b/front/src/routes/Router.tsx
index f0c156f..acc9c61 100644
--- a/front/src/routes/Router.tsx
+++ b/front/src/routes/Router.tsx
@@ -11,6 +11,7 @@ import { ProviderDetails } from '../providers/details/ProviderDetails';
 import { OidcClientFormProvider } from '../providers/details/oidc-client-form.context';
 import { EspaceDocumentation } from '../providers/documentation/EspaceDocumentation';
 import { Dashboard } from '../providers/connectedSpaces/Dashboard';
+import { OidcClient } from '../types';
 
 const router = createBrowserRouter([
   {
@@ -40,11 +41,13 @@ const router = createBrowserRouter([
   {
     path: '/dashboard',
     loader: async () => {
-      return backendClient.getDashboard();
+      const datas: OidcClient = await backendClient.getDashboard();
+      return datas;
     },
+    id: 'dashboard',
     element: (
       <PageLayout>
-        <Dashboard></Dashboard>
+        <Dashboard />
       </PageLayout>
     ),
   },
diff --git a/front/src/types.ts b/front/src/types.ts
index 3bb496f..dea509d 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -1,4 +1,5 @@
 export type OidcClient = {
+  id: number;
   clientName: string;
   clientDescription: string;
   clientId: string;
@@ -7,3 +8,5 @@ export type OidcClient = {
   postLogoutRedirectUris: string[];
   scope: string[];
 };
+
+export type OidcClients = OidcClient[];