diff --git a/src/components/Card.astro b/src/components/Card.astro
new file mode 100644
index 0000000..edf2d34
--- /dev/null
+++ b/src/components/Card.astro
@@ -0,0 +1,39 @@
+---
+const { id, name } = Astro.props;
+---
+
+<div class="card">
+  <div class="image-wrapper">
+    <img src={`/img/logo/${id}.webp`} alt={`${name} logo`}" />
+  </div>
+  <div class="text">
+    <h1>{name}</h1>
+    <p><slot /></p>
+  </div>
+</div>
+
+<style>
+.card {
+  border: 1px solid black;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  width: 50%;
+  margin: 10px 0;
+}
+
+.text {
+  margin-left: 20px;
+}
+
+.image-wrapper {
+  height: 100px;
+  width: 100px;
+  text-align: center;
+}
+
+img {
+  height: 100%;
+  width: auto;
+}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2d14107..e857959 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-
+import Card from '../components/Card.astro'
 ---
 
 <html lang="en">
@@ -8,9 +8,20 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width" />
 		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
+		<title>Ahurac</title>
 	</head>
 	<body>
-		<h1>Astro</h1>
+		<main>
+			<Card id="test1" name="Bruh">Électrocardiogramme</Card>
+			<Card id="test2" name="Purasehoraderu">:)</Card>
+		</main>
 	</body>
 </html>
+
+<style>
+main {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+</style>
