diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.css b/projects/ngx-cream-lib/src/lib/card/card.component.css
index 53ddfd3..3928e72 100644
--- a/projects/ngx-cream-lib/src/lib/card/card.component.css
+++ b/projects/ngx-cream-lib/src/lib/card/card.component.css
@@ -1,10 +1,43 @@
 .card {
     box-shadow: 0px 3px 6px #00000029;
     border-radius: 8px;
-    padding: 1rem;
     background-color: white;
+    max-width: 300px;
+}
+
+.card-content {
+    padding: 1rem;
 }
 
 h2 {
-    margin-bottom: 0.5rem;
-}
\ No newline at end of file
+    margin-bottom: 1rem;
+}
+
+a.link-button {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 1em;
+    width: fit-content;
+    text-decoration: none;
+    color: white;
+    background-color: rgb(92, 92, 173);
+    padding: 0.75rem 1.5rem;
+    border-radius: 2em;
+    margin-top: 1rem;
+  }
+  
+  a.link-button:hover {
+    background-color: rgb(7, 7, 158);
+  }
+
+  .picture {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .picture img {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
\ No newline at end of file
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.html b/projects/ngx-cream-lib/src/lib/card/card.component.html
index f0d463b..4c8136d 100644
--- a/projects/ngx-cream-lib/src/lib/card/card.component.html
+++ b/projects/ngx-cream-lib/src/lib/card/card.component.html
@@ -1,4 +1,15 @@
 <div class="card">
-    <h2>{{ title }}</h2>
-    <p><ng-content></ng-content></p>
+    <p class="picture">
+        <img [src]="'../../../../../assets/img/' + imageName" alt="">
+    </p>
+    <div class="card-content">
+    <!-- <c3m-h [titleLevel]="titleLevel">
+        {{ title }}
+      </c3m-h> -->
+      <h2>
+        {{ title }}
+      </h2>
+        <p><ng-content></ng-content></p>
+        <p><a class="link-button" [attr.href]="linkUrl">{{labelButton}}</a></p>
+    </div>
 </div>
diff --git a/projects/ngx-cream-lib/src/lib/card/card.component.ts b/projects/ngx-cream-lib/src/lib/card/card.component.ts
index e20d516..64f9604 100644
--- a/projects/ngx-cream-lib/src/lib/card/card.component.ts
+++ b/projects/ngx-cream-lib/src/lib/card/card.component.ts
@@ -7,4 +7,8 @@ import { Component, Input } from '@angular/core';
 })
 export class CardComponent {
   @Input() title: string = '';
+  @Input() titleLevel = '3';
+  @Input() imageName = '';
+  @Input() linkUrl = "";
+  @Input() labelButton = "";
 }
diff --git a/src/app/pages/card-page/card-page.component.html b/src/app/pages/card-page/card-page.component.html
index 7aee36a..e4b8988 100644
--- a/src/app/pages/card-page/card-page.component.html
+++ b/src/app/pages/card-page/card-page.component.html
@@ -3,7 +3,7 @@ <h3>Card component</h3>
 
     <c3m-tabs class="block-style" label="Demo and Code">
         <c3m-tab-panel class="block-style" tabTitle="Demo" [isActive]="true">
-            <c3m-card title="Card Title">
+            <c3m-card title="Card Title" titleLevel="2" imageName="illu.jpg" linkUrl="portal/card" labelButton="Découvrir">
               Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus natus quam maxime. 
               Repellat atque animi consequatur fugiat perferendis dicta cumque maiores minus rem facilis, 
               ex unde quo laborum sunt cupiditate.
diff --git a/src/assets/img/illu.jpg b/src/assets/img/illu.jpg
new file mode 100644
index 0000000..c41d1a7
Binary files /dev/null and b/src/assets/img/illu.jpg differ