diff --git a/templates/Manga_catalog.html b/templates/Manga_catalog.html
new file mode 100644
index 0000000..566549b
--- /dev/null
+++ b/templates/Manga_catalog.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/templates/base_manga.html b/templates/base_manga.html
index b277523..27613f8 100644
--- a/templates/base_manga.html
+++ b/templates/base_manga.html
@@ -10,10 +10,10 @@
         <style>
             :root {
                 /* Масштабы */
-                --page-scale: 0.7;    /* Для страниц манги */
+                --page-scale: 0.8;    /* Для страниц манги */
                 /* Общие настройки */
                 --preview-scale: 0.9;       /* Масштаб превью (0.5-1.5) */
-                --grid-columns: 7;          /* Число столбцов */
+                --grid-columns: 5;          /* Число столбцов */
                 --grid-gap: 10px;           /* Фиксированный отступ (в пикселях) */
                 
                 /* Базовые размеры превью (до масштабирования) */
@@ -24,34 +24,36 @@
 </head>
 <body>
     <div class="main-container">
+        <div class="frame_content">
         <!-- Хедер -->
-        <header class="navigation-box">
-            <ul>
-                <li class="breadcrumb">
-                    <a href="/manga/111">Каталог</a>
-                    <span>-</span>
-                    <a href="/manga/111">{{ manga.original_title }}</a>
-                    {% block page_title %}{% endblock %}
-                </li>
-            </ul>
-        </header>
-
-        <!-- Основной контент -->
-        <main class="content-area">
-            {% block content %}{% endblock %}
-        </main>
-
-        <!-- Футер -->
-        <footer class="footer-navigation">
-            <div class="dropdown-box">
-                <select id="page-selector" onchange="changePage(this)">
-                    {% block page_options %}{% endblock %}
-                </select>
-            </div>
-            <div class="page-buttons">
-                {% block page_buttons %}{% endblock %}
-            </div>
-        </footer>
+            <header class="navigation-box">
+                <ul>
+                    <li class="breadcrumb">
+                        <a href="/manga/111">Каталог</a>
+                        <span>-</span>
+                        <a href="/manga/111">{{ manga.original_title }}</a>
+                        {% block page_title %}{% endblock %}
+                    </li>
+                </ul>
+            </header>
+    
+            <!-- Основной контент -->
+            <main class="content-area">
+                {% block content %}{% endblock %}
+            </main>
+    
+            <!-- Футер -->
+            <footer class="footer-navigation">
+                <div class="dropdown-box">
+                    <select id="page-selector" onchange="changePage(this)">
+                        {% block page_options %}{% endblock %}
+                    </select>
+                </div>
+                <div class="page-buttons">
+                    {% block page_buttons %}{% endblock %}
+                </div>
+            </footer>
+        </div>
     </div>
 
     <script>
diff --git a/templates/static/css/manga_view.css b/templates/static/css/manga_view.css
index 38ea7b0..1e131a0 100644
--- a/templates/static/css/manga_view.css
+++ b/templates/static/css/manga_view.css
@@ -9,22 +9,40 @@ body {
 }
 
 .main-container {
-    max-width: 1200px;
     margin: 0 auto;
-    padding: 20px;
     flex: 1;
     display: flex;
     flex-direction: column;
     width: 100%;
+    min-height: 100vh;
+    align-items: center;
+    background-color: green;
+    justify-content: center;
+
+
+}
+
+.frame_content{
+    min-height: 100vh;
+    width: 50%;
+    place-items: center;
+    background-color: white;
+    flex-direction: column;
+    border: dashed white;
+
 }
 
 /* Хедер */
 .navigation-box {
     padding: 15px 0;
-    margin-bottom: 20px;
+    margin-bottom: 0;
+    width: 100%;
+    border-bottom: dashed green;
+
 }
 
 .breadcrumb {
+    justify-content: center;
     display: flex;
     align-items: center;
     list-style: none;
@@ -51,14 +69,13 @@ body {
 /* Контейнер сетки */
 .manga-grid-container {
     width: 100%;
-    padding: 10px 0;
     overflow-x: auto; /* На случай узких экранов */
 }
 
 /* Сетка превью */
 .grid-container {
     width: 100%;
-    margin-bottom: 20px;
+    margin: 20px;
 }
 
 .manga-grid {
@@ -66,7 +83,6 @@ body {
     grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
     gap: var(--grid-gap); /* Фиксированный отступ */
     justify-items: center;
-    margin: 0 auto;
     max-width: calc(
         (var(--preview-base-width) * var(--preview-scale) * var(--grid-columns)) +
         (var(--grid-gap) * (var(--grid-columns) - 1))
@@ -94,12 +110,12 @@ body {
 }
 
 
-
 /* Страница манги */
 .image-scaling-container {
     width: 100%;
     display: flex;
     justify-content: center;
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }
 
 .scalable-image {
@@ -107,18 +123,19 @@ body {
     height: auto;
     max-width: 100%;
     object-fit: contain;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    box-shadow: 0 0 20px rgba(0,0,0,0.4);
 }
 /* Футер */
 .footer-navigation {
-    margin-top: auto;
-    padding: 20px 0;
-    border-top: 1px solid #eee;
+    margin-top: 0;
+    padding: 15px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     width: 100%;
+    border-top: dashed green;
+
 }
 
 .dropdown-box select {
diff --git a/templates/static/js/Manga_catalog.js b/templates/static/js/Manga_catalog.js
new file mode 100644
index 0000000..e69de29
