diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 54e73ae..d0f94ca 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -10,6 +10,34 @@ interface Props {
 }
 
 export default function Card({ title, content, id, downloads }: Props) {
+    return (
+        <div className="bg-[#161718] w-lg p-5 flex flex-col gap-5 rounded-xl self-center">
+            <h1 className="text-white text-2xl font-bold" id={id?.toString()}>
+                <Mdown>{title}</Mdown>
+            </h1>
+            <div className=" flex flex-col space-y-1 text-[#9e9b97]">
+                <Mdown>{content}</Mdown>
+            </div>
+            {downloads != null ? (
+                <details className="text-[#9e9b97]">
+                    <summary>Téléchargments</summary>
+                    <ol className="list-disc list-inside pl-5">
+                        {downloads.map((e, i) => (
+                            <Download e={e} i={i} />
+                        ))}
+                    </ol>
+                </details>
+            ) : null}
+        </div>
+    )
+}
+
+interface DownloadProps {
+    e: CardDownloadType
+    i: number
+}
+
+function Download({ e, i }: DownloadProps) {
     const [isDownloading, setIsDownloading] = useState(false)
 
     function download(path: URL, fileName = 'file') {
@@ -37,38 +65,19 @@ export default function Card({ title, content, id, downloads }: Props) {
     }
 
     return (
-        <div className="bg-[#161718] w-lg p-5 flex flex-col gap-5 rounded-xl self-center">
-            <h1 className="text-white text-2xl font-bold" id={id?.toString()}>
-                <Mdown>{title}</Mdown>
-            </h1>
-            <div className=" flex flex-col space-y-1 text-[#9e9b97]">
-                <Mdown>{content}</Mdown>
-            </div>
-            {downloads != null ? (
-                <details className="text-[#9e9b97]">
-                    <summary>Téléchargments</summary>
-                    <ol className="list-disc list-inside pl-5">
-                        {downloads.map((e, i) => (
-                            <li>
-                                <a
-                                    key={i}
-                                    className={
-                                        isDownloading
-                                            ? 'text-gray-600 underline cursor-wait'
-                                            : 'text-sky-600 underline cursor-pointer'
-                                    }
-                                    onClick={() => download(e.link, e.filename)}
-                                >
-                                    {isDownloading
-                                        ? '[Téléchargement en cours ...] '
-                                        : null}{' '}
-                                    {e.title}
-                                </a>
-                            </li>
-                        ))}
-                    </ol>
-                </details>
-            ) : null}
-        </div>
+        <li>
+            <a
+                key={i}
+                className={
+                    isDownloading
+                        ? 'text-gray-600 underline cursor-wait'
+                        : 'text-sky-600 underline cursor-pointer'
+                }
+                onClick={() => download(e.link, e.filename)}
+            >
+                {isDownloading ? '[Téléchargement en cours ...] ' : null}{' '}
+                {e.title}
+            </a>
+        </li>
     )
 }