diff --git a/static/css/styles.css b/static/css/styles.css
index a60c94b..56f595a 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -70,48 +70,47 @@ footer {
 }
 
 #books-container {
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1rem;
-    padding: 1rem 2%;
+    justify-content: center !important;
 }
 
 .book-card {
+    width: 100%; /* Wykorzystaj całą dostępną szerokość */
     height: 100%;
-    display: flex;
-    flex-direction: column;
     background: #1a1a1a;
     border: 1px solid #343434;
-    transition: transform 0.3s ease;
+    transition: all 0.3s ease;
 }
 
-.book-card:hover {
-    transform: translateY(-5px);
+.cover-container {
+    width: 100%;
+    aspect-ratio: 5/8; /* Nowoczesne podejście do proporcji */
+    overflow: hidden;
+    position: relative;
 }
 
 .book-cover {
     width: 100%;
-    height: 300px;
-    object-fit: contain;
-    padding: 15px;
+    height: 100%;
+    object-fit: cover;
+    object-position: center top;
+    transition: transform 0.3s ease;
 }
 
-.book-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 1rem;
-    background: linear-gradient(0deg, rgba(7,44,36,0.9) 0%, rgba(0,0,0,0) 100%);
+.book-cover:hover {
+    transform: scale(1.05);
 }
 
 .book-title {
     font-size: 1rem;
-    margin: 0;
-    color: #E3CB9A;
-}
-
-.book-cover:hover .book-overlay {
-    opacity: 1;
+    line-height: 1.3;
+    height: 3.2em; /* Na 2 linie tekstu */
+    margin: 0.5rem 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-align: center;
+    padding: 0 0.5rem;
 }
 
 .book-info {
diff --git a/static/index.html b/static/index.html
index b53a2fd..54019aa 100644
--- a/static/index.html
+++ b/static/index.html
@@ -50,11 +50,18 @@
     <main class="container py-5">
         <h2 class="text-center mb-5 neon-title">NOWOŚCI</h2>
 
-        <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4" id="books-container">
-            <!-- Dynamicznie ładowane książki -->
-            <div class="col-12 text-center">
-                <div class="spinner-border text-danger" role="status">
-                    <span class="visually-hidden">Ładowanie...</span>
+	    <div class="container-fluid">
+		<div class="row justify-content-center">
+		    <div class="col-12 col-xxl-10"> <!-- Adjust max width if needed -->
+			<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-4 justify-content-center" id="books-container">
+			    <!-- Dynamicznie ładowane książki -->
+			    <div class="col-12 text-center">
+				<div class="spinner-border text-danger" role="status">
+				    <span class="visually-hidden">Ładowanie...</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/static/js/main.js b/static/js/main.js
index cbf6113..a94e239 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -128,16 +128,18 @@ function renderBooks(books) {
     }
 
     container.innerHTML = books.map(book => `
-        <div class="col">
-            <div class="book-card">
-		<a href="https://athenaeum.sykorax.eu/book.html?id=${book.id}">
-			<img src="${book.obraz_url}" class="book-cover" alt="${book.tytul}">
-			<div class="book-body">
+	        <div class="col">
+		    <div class="book-card h-100">
+		    <a href="https://athenaeum.sykorax.eu/book.html?id=${book.id}">
+			<div class="cover-container">
+			    <img src="${book.obraz_url}" class="book-cover" alt="${book.tytul}">
+			</div>
+			<div class="book-body p-3">
 			    <h5 class="book-title">${book.tytul}</h5>
 			</div>
-		</a>
-            </div>
-        </div>
+		    </a>
+		    </div>
+		</div>
     `).join('');
 
     // Dodaj obsługę przycisków "Dodaj do koszyka"