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/badges/page.tsx b/app/dashboard/badges/page.tsx
index cb8cab1..6549a44 100644
--- a/app/dashboard/badges/page.tsx
+++ b/app/dashboard/badges/page.tsx
@@ -1,11 +1,21 @@
+import Badge from '@/ui/Badge';
+import Image from 'next/image';
 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="h-full w-f">
+      <div className="">
+        <h1 className="text-2xl font-bold tracking-tight ">Mes badges</h1>
+        <div className="flex flex-col pt-5">
+          <div className="bg-dark rounded-lg shadow-md mb-9  max-h-5/6 max-w-11/12">
+            <div className="flex py-2 px-4 rounded-lg justify-between">
+              <div className="flex flex-wrap   md:space-x-0 pt-3 pb-3 ">
+                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={""} alt={"je suis un alt"} />
+                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"esay"} alt={"je suis un alt"} />
+                <Badge title={"Je suis un teste"} path={"https://cdn-icons-png.flaticon.com/512/226/226777.png"} type={"hard"} alt={"je suis un alt"} />
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
index cc82104..b163cfd 100644
--- a/app/dashboard/layout.tsx
+++ b/app/dashboard/layout.tsx
@@ -13,4 +13,4 @@ export default function Layout({ children }: { children: ReactNode }) {
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/ui/Badge.tsx b/ui/Badge.tsx
new file mode 100644
index 0000000..e94ac20
--- /dev/null
+++ b/ui/Badge.tsx
@@ -0,0 +1,10 @@
+
+export default function Badge({ title, path, alt, type }: { title: string; path: string; alt: string; type: string }) {
+    return (
+        <div className='text-center  md:w-[9%] sm:w-[15%] w-[20%] pr-3 mt-3'>
+            <img src={path} alt={alt} className={`f-full w-full rounded-full border-2 lg:border-4 ${type === "hard" ? 'border-red-600' : type === 'easy' ? 'border-green-600' : 'border-yellow-600'}  `} />
+            <h2 className='pt-2'>{title}</h2>
+        </div>
+    );
+
+}
\ No newline at end of file