diff --git a/src/app/components/book-card/book-card.css b/src/app/components/book-card/book-card.css
new file mode 100644
index 0000000..90f3d78
--- /dev/null
+++ b/src/app/components/book-card/book-card.css
@@ -0,0 +1,37 @@
+.book-card-container {
+    background: #f5f5f5;        /* fond clair */
+    padding: 20px;              /* espace autour de la carte */
+    border-radius: 12px;        /* coins arrondis */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ombre douce */
+    transition: transform 0.2s, box-shadow 0.2s; /* animation au survol */
+    width: 300px;
+    margin: 10px auto;          /* centre la carte dans le parent */
+}
+
+.book-card-container:hover {
+    transform: translateY(-5px); /* petit effet de “lift” au survol */
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ombre plus prononcée */
+}
+
+.book-card-container nz-card {
+    border-radius: 12px;        /* coins arrondis de la carte NZ */
+    background-color: #ffffff;  /* fond blanc */
+    padding: 16px;              /* espace intérieur */
+}
+
+.book-card-container p {
+    margin: 5px 0;              /* espace vertical entre les paragraphes */
+    color: #333;                /* texte gris foncé */
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.book-card-container a {
+    color: #1890ff;             /* bleu Ant Design */
+    text-decoration: none;
+    font-weight: 500;
+    cursor: pointer;
+}
+
+.book-card-container a:hover {
+    text-decoration: underline; /* souligne au survol */
+}
diff --git a/src/app/components/book-card/book-card.html b/src/app/components/book-card/book-card.html
new file mode 100644
index 0000000..bd93846
--- /dev/null
+++ b/src/app/components/book-card/book-card.html
@@ -0,0 +1,13 @@
+<div class="book-card-container">
+    <nz-card
+            [nzBordered]="false"
+            nzTitle="{{ bookInfo().title }}"
+            [nzExtra]="extraTemplate">
+        <p>{{ bookInfo().author }}</p>
+        <p>{{ bookInfo().releaseYear }}</p>
+    </nz-card>
+</div>
+
+<ng-template #extraTemplate>
+    <a>More</a>
+</ng-template>
diff --git a/src/app/components/book-card/book-card.ts b/src/app/components/book-card/book-card.ts
new file mode 100644
index 0000000..a54bdca
--- /dev/null
+++ b/src/app/components/book-card/book-card.ts
@@ -0,0 +1,17 @@
+import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
+import {BookInfo} from '../../interfaces/book.interfaces';
+import {NzCardComponent} from "ng-zorro-antd/card";
+import {NzFlexDirective} from "ng-zorro-antd/flex"; // Interface
+
+@Component({
+  selector: 'app-book-card',
+    imports: [
+        NzCardComponent,
+        NzFlexDirective
+    ],
+  templateUrl: './book-card.html',
+  styleUrl: './book-card.css',
+})
+export class BookCard {
+    bookInfo = input.required<BookInfo>();
+}
diff --git a/src/app/components/create-modal/create-modal.css b/src/app/components/create-modal/create-modal.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/create-modal/create-modal.html b/src/app/components/create-modal/create-modal.html
new file mode 100644
index 0000000..bdf8c99
--- /dev/null
+++ b/src/app/components/create-modal/create-modal.html
@@ -0,0 +1,13 @@
+<button nz-button nzType="primary" (click)="showModal()">
+    <span>Ajouter un livre</span> Ajouter
+</button>
+
+<nz-modal
+        [(nzVisible)]="isVisible"
+        nzTitle="Ajouter"
+        (nzOnCancel)="handleCancel()"
+        (nzOnOk)="handleOk()"
+        [nzOkLoading]="isOkLoading"
+>
+    <ng-container [ngComponentOutlet]="content"></ng-container>
+</nz-modal>
\ No newline at end of file
diff --git a/src/app/components/create-modal/create-modal.ts b/src/app/components/create-modal/create-modal.ts
new file mode 100644
index 0000000..852eeae
--- /dev/null
+++ b/src/app/components/create-modal/create-modal.ts
@@ -0,0 +1,32 @@
+import {Component, input, Type} from '@angular/core';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import {NgComponentOutlet} from "@angular/common";
+
+@Component({
+    selector: 'app-create-modal',
+    imports: [NzButtonModule, NzModalModule, NgComponentOutlet],
+    templateUrl: 'create-modal.html',
+    styleUrls: ['./create-modal.css'],
+})
+export class CreateModal {
+    content = input.required<Type<any>>();
+    isVisible = false;
+    isOkLoading = false;
+
+    showModal(): void {
+        this.isVisible = true;
+    }
+
+    handleOk(): void {
+        this.isOkLoading = true;
+        setTimeout(() => {
+            this.isVisible = false;
+            this.isOkLoading = false;
+        }, 3000); // 3 secondes
+    }
+
+    handleCancel(): void {
+        this.isVisible = false;
+    }
+}