diff --git a/myapp/templates/books.html b/myapp/templates/books.html
index 33d384e..69c07cd 100644
--- a/myapp/templates/books.html
+++ b/myapp/templates/books.html
@@ -1,39 +1,141 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Books</title>
+    <title>Moya Biblioteka</title>
     <style>
-        table,th,tr{
-            border: 1px solid black;              
+        /* Osnovnyye stili */
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f4f7f6;
+            margin: 0;
+            padding: 20px;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            color: #2c3e50;
+            margin-bottom: 10px;
+        }
+
+        /* Setka knig */
+        .book-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 30px;
+        }
+
+        /* Kartochka knigi */
+        .book-card {
+            background: #fff;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .book-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+        }
+
+        .book-cover {
+            width: 100%;
+            height: 320px;
+            object-fit: cover;
+            border-bottom: 1px solid #eee;
+        }
+
+        .book-info {
+            padding: 20px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .book-title {
+            font-size: 1.2rem;
+            font-weight: bold;
+            margin: 0 0 10px 0;
+            color: #2c3e50;
+            line-height: 1.3;
+        }
+
+        .book-author {
+            font-size: 0.9rem;
+            color: #7f8c8d;
+            margin-bottom: 15px;
+        }
+
+        /* Knopka podrobneye */
+        .btn-detail {
+            display: inline-block;
+            text-align: center;
             padding: 10px;
-            text-align: left;          
+            background-color: #3498db;
+            color: white;
+            text-decoration: none;
+            border-radius: 6px;
+            font-size: 0.9rem;
+            transition: background 0.2s;
+            margin-top: auto;
+        }
+
+        .btn-detail:hover {
+            background-color: #2980b9;
         }
-        table{
-            border-collapse: collapse;
+
+        /* Adaptivnost' dlya mobil'nykh */
+        @media (max-width: 480px) {
+            .book-grid {
+                grid-template-columns: 1fr;
+            }
         }
     </style>
 </head>
 <body>
-    <table>
-        <tr>
-            <th>T/B</th>
-            <th>Kitabyn ady</th>
-            <th>Awtory</th>
-            <th>Neshir edilen senesi</th>
-            <th>Sahypa sany</th>
-        </tr>
-        {% for i in books %}
-            <tr>
-                <th>{{forloop.counter}}</th>
-                <th>{{i.book_name}}</th>
-                <th>{{i.author}}</th>
-                <th>{{i.published_date}}</th>
-                <th>{{i.page_volume}}</th>
-            </tr>
+
+<div class="container">
+    <header>
+        <h1>Moya Kollektsiya</h1>
+        <p>Naydite svoyu sleduyushchuyu istoriyu</p>
+    </header>
+
+    <main class="book-grid">
+        {% for book in books %}
+        <article class="book-card">
+            {% if book.cover %}
+                <img src="{{ book.cover.url }}" alt="{{ book.title }}" class="book-cover">
+            {% else %}
+                <img src="https://via.placeholder.com/220x320?text=No+Cover" alt="Net oblozhki" class="book-cover">
+            {% endif %}
+            
+            <div class="book-info">
+                <h2 class="book-title">{{ book.title }}</h2>
+                <div class="book-author">Avtor: {{ book.author }}</div>
+                
+                <a href="{% url 'book_detail' book.id %}" class="btn-detail">Chitat' daleye</a>
+            </div>
+        </article>
+        {% empty %}
+            <p>V biblioteke poka net knig.</p>
         {% endfor %}
-    </table>
+    </main>
+</div>
+
 </body>
 </html>
\ No newline at end of file
