diff --git a/src/app/components/create-author/create-author.css b/src/app/components/create-author/create-author.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/create-author/create-author.html b/src/app/components/create-author/create-author.html
deleted file mode 100644
index fcdfc69..0000000
--- a/src/app/components/create-author/create-author.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>create-author works!</p>
diff --git a/src/app/components/create-author/create-author.ts b/src/app/components/create-author/create-author.ts
deleted file mode 100644
index b159b63..0000000
--- a/src/app/components/create-author/create-author.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-author',
-  imports: [],
-  templateUrl: './create-author.html',
-  styleUrl: './create-author.css',
-})
-export class CreateAuthor {
-
-}
diff --git a/src/app/components/create-book/create-book.ts b/src/app/components/create-book/create-book.ts
index 9db0f01..c66796e 100644
--- a/src/app/components/create-book/create-book.ts
+++ b/src/app/components/create-book/create-book.ts
@@ -7,7 +7,7 @@ import {NzFlexDirective} from "ng-zorro-antd/flex";
   selector: 'app-create-book',
     imports: [NzFormModule, NzFlexDirective, ReactiveFormsModule],
   templateUrl: './create-book.html',
-  styleUrl: './create-book.css',
+  styleUrls: ['./create-book.css'],
 })
 export class CreateBook {
     createBookForm = new FormGroup({
diff --git a/src/app/components/create-loan/create-loan.css b/src/app/components/create-loan/create-loan.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/create-loan/create-loan.html b/src/app/components/create-loan/create-loan.html
deleted file mode 100644
index e46d0ba..0000000
--- a/src/app/components/create-loan/create-loan.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>create-loan works!</p>
diff --git a/src/app/components/create-loan/create-loan.ts b/src/app/components/create-loan/create-loan.ts
deleted file mode 100644
index bf86258..0000000
--- a/src/app/components/create-loan/create-loan.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-loan',
-  imports: [],
-  templateUrl: './create-loan.html',
-  styleUrl: './create-loan.css',
-})
-export class CreateLoan {
-
-}
diff --git a/src/app/components/create-user/create-user.css b/src/app/components/create-user/create-user.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/create-user/create-user.html b/src/app/components/create-user/create-user.html
deleted file mode 100644
index cec559f..0000000
--- a/src/app/components/create-user/create-user.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>create-user works!</p>
diff --git a/src/app/components/create-user/create-user.ts b/src/app/components/create-user/create-user.ts
deleted file mode 100644
index 981ad26..0000000
--- a/src/app/components/create-user/create-user.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-create-user',
-  imports: [],
-  templateUrl: './create-user.html',
-  styleUrl: './create-user.css',
-})
-export class CreateUser {
-
-}
diff --git a/src/app/components/update-author/update-author.css b/src/app/components/update-author/update-author.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/update-author/update-author.html b/src/app/components/update-author/update-author.html
deleted file mode 100644
index de32171..0000000
--- a/src/app/components/update-author/update-author.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>update-author works!</p>
diff --git a/src/app/components/update-author/update-author.ts b/src/app/components/update-author/update-author.ts
deleted file mode 100644
index 8ceb34d..0000000
--- a/src/app/components/update-author/update-author.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-author',
-  imports: [],
-  templateUrl: './update-author.html',
-  styleUrl: './update-author.css',
-})
-export class UpdateAuthor {
-
-}
diff --git a/src/app/components/update-loan/update-loan.css b/src/app/components/update-loan/update-loan.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/update-loan/update-loan.html b/src/app/components/update-loan/update-loan.html
deleted file mode 100644
index 19e9ba8..0000000
--- a/src/app/components/update-loan/update-loan.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>update-loan works!</p>
diff --git a/src/app/components/update-loan/update-loan.ts b/src/app/components/update-loan/update-loan.ts
deleted file mode 100644
index 5f77a71..0000000
--- a/src/app/components/update-loan/update-loan.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-loan',
-  imports: [],
-  templateUrl: './update-loan.html',
-  styleUrl: './update-loan.css',
-})
-export class UpdateLoan {
-
-}
diff --git a/src/app/components/update-user/update-user.css b/src/app/components/update-user/update-user.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/update-user/update-user.html b/src/app/components/update-user/update-user.html
deleted file mode 100644
index a74337a..0000000
--- a/src/app/components/update-user/update-user.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>update-user works!</p>
diff --git a/src/app/components/update-user/update-user.ts b/src/app/components/update-user/update-user.ts
deleted file mode 100644
index 81eea8c..0000000
--- a/src/app/components/update-user/update-user.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-update-user',
-  imports: [],
-  templateUrl: './update-user.html',
-  styleUrl: './update-user.css',
-})
-export class UpdateUser {
-
-}
diff --git a/src/app/interfaces/book.interfaces.ts b/src/app/interfaces/book.interfaces.ts
new file mode 100644
index 0000000..e2bc1f7
--- /dev/null
+++ b/src/app/interfaces/book.interfaces.ts
@@ -0,0 +1,5 @@
+export interface BookInfo {
+    title: string;
+    releaseYear: number;
+    author: string;
+}
\ No newline at end of file
diff --git a/src/app/pages/book/book.css b/src/app/pages/book/book.css
index e69de29..d850ca8 100644
--- a/src/app/pages/book/book.css
+++ b/src/app/pages/book/book.css
@@ -0,0 +1,7 @@
+.book-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    justify-items: center;
+    padding: 20px;
+}
diff --git a/src/app/pages/book/book.html b/src/app/pages/book/book.html
index feb0e32..d847891 100644
--- a/src/app/pages/book/book.html
+++ b/src/app/pages/book/book.html
@@ -1 +1,8 @@
-<p>book works!</p>
+<app-create-modal [content]="CreateBookComponent"></app-create-modal>
+
+<section class="book-grid">
+    @for (book of books; track $index) {
+        <app-book-card [bookInfo]="book"></app-book-card>
+    }
+</section>
+
diff --git a/src/app/pages/book/book.ts b/src/app/pages/book/book.ts
index 2332669..20360e0 100644
--- a/src/app/pages/book/book.ts
+++ b/src/app/pages/book/book.ts
@@ -1,11 +1,29 @@
 import { Component } from '@angular/core';
+import {BookInfo} from "../../interfaces/book.interfaces";
+import {BookCard} from "../../components/book-card/book-card";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {CreateModal} from "../../components/create-modal/create-modal";
+import {CreateBook} from "../../components/create-book/create-book";
 
 @Component({
   selector: 'app-book',
-  imports: [],
+    imports: [
+        BookCard,
+        NzModalComponent,
+        CreateModal
+    ],
   templateUrl: './book.html',
-  styleUrl: './book.css',
+  styleUrls: ['./book.css'],
 })
 export class Book {
+    CreateBookComponent = CreateBook;
 
+    books: BookInfo[] = [
+        { title: '1984', author: 'George Orwell', releaseYear: 1949 },
+        { title: 'Le Seigneur des Anneaux', author: 'J.R.R. Tolkien', releaseYear: 1954 },
+        { title: 'Dune', author: 'Frank Herbert', releaseYear: 1965 },
+        { title: 'Fahrenheit 451', author: 'Ray Bradbury', releaseYear: 1953 },
+        { title: 'Les Misérables', author: 'Victor Hugo', releaseYear: 1862 },
+        { title: 'Harry Potter à l’école des sorciers', author: 'J.K. Rowling', releaseYear: 1997 },
+    ];
 }