diff --git a/.vscode/settings.json b/.vscode/settings.json
index 60972d0..58ff454 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,4 +1,4 @@
 {
-  "typescript.tsdk": "node_modules/.pnpm/typescript@4.9.5/node_modules/typescript/lib",
+  "typescript.tsdk": "node_modules\\.pnpm\\typescript@4.9.5\\node_modules\\typescript\\lib",
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}
\ No newline at end of file
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index cb8cab1..fece35a 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,12 +1,42 @@
+import Card from '@/ui/Card';
+import CardTable from '@/ui/CardTable';
+
 export default function Page() {
   return (
     <div className="flex h-screen w-full">
-      <div className="m-auto">
-        <h1 className="text-center text-4xl font-bold">
-          Amuse toi avec <span className="rounded-md bg-white p-1 text-black ">Next.js</span> et{' '}
-          <span className="text-blue-500">Tailwindcss</span> !
-        </h1>
+      <div className="">
+        <h1 className="text-2xl font-bold tracking-tight">Statistique</h1>
+        <div className="flex flex-col space-x-0 md:flex-row md:space-x-9 pt-5">
+          <Card></Card>
+          <Card></Card>
+          <Card></Card>
+        </div>
+        <div className="flex flex-col space-x-0 md:flex-row md:space-x-[5%] pt-5 h-[60%]">
+          <div className='w-6/12 mb-9'>
+            <h1 className="text-2xl font-bold tracking-tight">Guide</h1>
+            <div className="flex flex-col space-x-0 md:flex-row md:space-x-[10%] pt-5 h-full ">
+              <div className="bg-dark rounded-lg shadow-md w-full h-full">
+                <div className="flex py-2 px-4 rounded-lg justify-between">
+                  <div className="my-auto">
+                    <p className="font-bold">Bold data</p>
+                    <p className="text-lg">Simple data</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className='w-6/12 mb-9'>
+            <h1 className="text-2xl font-bold tracking-tight">Dernières activités </h1>
+            <div className="flex flex-col space-x-0 md:flex-row md:space-x-[10%] pt-5 h-full">
+              <CardTable></CardTable>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
 }
+
+
+
+
diff --git a/ui/Card.tsx b/ui/Card.tsx
new file mode 100644
index 0000000..9be6e5c
--- /dev/null
+++ b/ui/Card.tsx
@@ -0,0 +1,12 @@
+export default function Card() {
+    return (
+        <div className="w-96 h-20 bg-dark rounded-lg shadow-md mb-9">
+            <div className="flex w-full h-full py-2 px-4 rounded-lg justify-between">
+              <div className="my-auto">
+                <p className="font-bold">Bold data</p>
+                <p className="text-lg">Simple data</p>
+              </div>
+            </div>
+          </div>
+    );
+  }
\ No newline at end of file
diff --git a/ui/CardTable.tsx b/ui/CardTable.tsx
new file mode 100644
index 0000000..5cb719a
--- /dev/null
+++ b/ui/CardTable.tsx
@@ -0,0 +1,202 @@
+export default function CardTable() {
+
+    return (
+        <div className="relative overflow-x-auto shadow-md sm:rounded-lg bg-dark border border-black w-full">
+            <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400 ">
+                <thead className="text-xs text-white uppercase bg-light-dark sticky sticky z-1 top-0">
+                    <tr>
+                        <th scope="col" className="px-6 py-3">
+                            Exercice
+                        </th>
+                        <th scope="col" className="px-6 py-3">
+                            Tentative
+                        </th>
+                        <th scope="col" className="px-6 py-3">
+                            Score
+                        </th>
+                        <th scope="col" className="px-6 py-3">
+                            Dernier essai
+                        </th>
+                        <th scope="col" className="px-6 py-3">
+                            <span className="sr-only">Reprendre</span>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr className=" border-b bg-dark dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            30
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark border-b  dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            40
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                    <tr className="bg-dark hover:bg-gray-50 dark:hover:bg-gray-600">
+                        <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                            Exercice 1
+                        </th>
+                        <td className="px-6 py-4">
+                            60
+                        </td>
+                        <td className="px-6 py-4">
+                            300
+                        </td>
+                        <td className="px-6 py-4">
+                            10/10/2010
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                            <a href="#" className="font-medium text-blue-600 dark:text-blue-500 hover:underline">Reprendre</a>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+
+}
+