diff --git a/public/css/base.css b/public/css/base.css
new file mode 100644
index 0000000..c892667
--- /dev/null
+++ b/public/css/base.css
@@ -0,0 +1,16 @@
+/* Base styles */
+html, body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f8f9fa;
+  color: #212529;
+  min-height: 100vh;
+  line-height: 1.6;
+}
+
+/* Container utility */
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem 1.5rem;
+}
+
diff --git a/public/css/footer.css b/public/css/footer.css
new file mode 100644
index 0000000..3780397
--- /dev/null
+++ b/public/css/footer.css
@@ -0,0 +1,7 @@
+footer {
+  background: #f0f0f0;
+  padding: 1rem 0;
+  text-align: center;
+  border-top: 1px solid #ccc;
+}
+
diff --git a/public/css/header.css b/public/css/header.css
new file mode 100644
index 0000000..38b78bf
--- /dev/null
+++ b/public/css/header.css
@@ -0,0 +1,39 @@
+/* Header */
+header {
+  background-color: #2c3e50;
+  color: #ecf0f1;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+header .container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 1rem 0;
+}
+
+header h1 {
+  font-size: 1.8rem;
+  font-weight: 700;
+}
+
+header nav {
+  display: flex;
+  gap: 1rem;
+}
+
+header nav a {
+  color: #ecf0f1;
+  text-decoration: none;
+  font-weight: 600;
+  padding: 0.3rem 0.6rem;
+  border-radius: 3px;
+  transition: background-color 0.2s ease-in-out;
+}
+
+header nav a:hover,
+header nav a:focus {
+  background-color: #34495e;
+}
+
diff --git a/public/css/layout.css b/public/css/layout.css
new file mode 100644
index 0000000..50873d3
--- /dev/null
+++ b/public/css/layout.css
@@ -0,0 +1,16 @@
+/* Layout */
+.layout {
+  display: flex;
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1.5rem;
+  gap: 2rem;
+}
+
+/* Responsive layout */
+@media (max-width: 900px) {
+  .layout {
+    flex-direction: column;
+  }
+}
+
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..7b5cff9
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,42 @@
+/* Main content */
+main.container {
+  flex: 1;
+  background-color: #ffffff;
+  padding: 2rem;
+  border-radius: 6px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+}
+
+main h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #2c3e50;
+  padding-bottom: 0.3rem;
+}
+
+main article p {
+  font-size: 1rem;
+  color: #444;
+}
+
+/* Content area */
+main {
+  margin-left: 200px;
+  padding: 1rem;
+}
+
+/* Responsive main */
+@media (max-width: 900px) {
+  main.container {
+    margin: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  main {
+    margin-left: 0;
+    padding: 1rem 0.5rem;
+  }
+}
+
diff --git a/public/css/menu.css b/public/css/menu.css
new file mode 100644
index 0000000..781d695
--- /dev/null
+++ b/public/css/menu.css
@@ -0,0 +1,46 @@
+.menu-years,
+.menu-months,
+.menu-posts {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.menu-year {
+  margin-bottom: 1em;
+}
+
+.year-label {
+  font-weight: bold;
+  font-size: 1.2em;
+  display: block;
+  margin-bottom: 0.5em;
+}
+
+.menu-month {
+  margin-left: 1em;
+  margin-bottom: 0.5em;
+}
+
+.month-label {
+  font-weight: normal;
+  display: block;
+  margin-bottom: 0.3em;
+}
+
+.menu-posts {
+  margin-left: 1em;
+}
+
+.menu-posts li {
+  margin-bottom: 0.3em;
+}
+
+.menu-posts a {
+  text-decoration: none;
+  color: #007bff;
+}
+
+.menu-posts a:hover {
+  text-decoration: underline;
+}
diff --git a/public/css/nav.css b/public/css/nav.css
new file mode 100644
index 0000000..3febf81
--- /dev/null
+++ b/public/css/nav.css
@@ -0,0 +1,31 @@
+/* Navigation adjustments for small screens */
+@media (max-width: 600px) {
+  nav {
+    width: 100%;
+    height: auto;
+    float: none;
+    padding: 0.5rem;
+    text-align: center;
+    border-bottom: 1px solid #444;
+    background: #111;
+  }
+  nav ul {
+    display: block;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    padding: 0.5rem 0;
+    margin: 0;
+    list-style: none;
+  }
+  nav ul li {
+    margin: 0.25rem 0;
+    border: none;
+  }
+  nav ul li a {
+    padding: 0.5rem 1rem;
+    display: block;
+    border-radius: 0;
+  }
+}
+
diff --git a/public/css/reset.css b/public/css/reset.css
new file mode 100644
index 0000000..491e288
--- /dev/null
+++ b/public/css/reset.css
@@ -0,0 +1,7 @@
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
diff --git a/public/css/responsiveness.css b/public/css/responsiveness.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/css/responsiveness.css
diff --git a/public/css/sidebar.css b/public/css/sidebar.css
new file mode 100644
index 0000000..97aff11
--- /dev/null
+++ b/public/css/sidebar.css
@@ -0,0 +1,62 @@
+/* Sidebar */
+.sidebar {
+  width: 250px;
+  background-color: #f8f9fa;
+  border-right: 1px solid #e0e0e0;
+  padding: 1em;
+  font-size: 0.95rem;
+  font-family: Arial, sans-serif;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.sidebar .menu-year {
+  font-weight: 700;
+  font-size: 1.2rem;
+  color: #333333;
+  margin-bottom: 1rem;
+  border-bottom: 2px solid #2c3e50;
+  padding-bottom: 0.5rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.sidebar nav ul {
+  list-style: none;
+  padding-left: 0;
+}
+
+.sidebar .menu-month {
+  margin-bottom: 1rem;
+  font-weight: 600;
+  color: #555555;
+}
+
+.sidebar .menu-month ul {
+  list-style: none;
+  padding-left: 1rem;
+  margin-top: 0.3rem;
+}
+
+.sidebar .menu-month li a {
+  color: #2c3e50;
+  text-decoration: none;
+  display: block;
+  padding: 0.2rem 0;
+  transition: color 0.2s ease-in-out;
+}
+
+.sidebar .menu-month li a:hover {
+  color: #1a73e8;
+  text-decoration: underline;
+}
+
+/* Responsive sidebar */
+@media (max-width: 900px) {
+  .sidebar {
+    width: 100%;
+    border-right: none;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 1rem;
+  }
+}
+
diff --git a/public/css/styles.css b/public/css/styles.css
index 2721fd1..452d299 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,218 +1,10 @@
-/* Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
+@import url('reset.css');
+@import url('base.css');
+@import url('layout.css');
+@import url('header.css');
+@import url('sidebar.css');
+@import url('main.css');
+@import url('footer.css');
+@import url('responsive.css');
+@import url('menu.css');
 
-/* Base styles */
-html, body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  background-color: #f8f9fa;
-  color: #212529;
-  min-height: 100vh;
-  line-height: 1.6;
-}
-
-/* Container utility */
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  padding: 1rem 1.5rem;
-}
-/*
-nav {
-  width: 200px;
-  float: left;
-  background: #222;
-  color: #eee;
-  height: 100vh;
-  padding: 1rem;
-  box-sizing: border-box;
-}*/
-
-/* Content area */
-main {
-  margin-left: 200px;
-  padding: 1rem;
-}
-
-/* Header */
-header {
-  background-color: #2c3e50;
-  color: #ecf0f1;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-
-header .container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 0.5rem;
-  padding: 1rem 0;
-}
-
-header h1 {
-  font-size: 1.8rem;
-  font-weight: 700;
-}
-
-header nav {
-  display: flex;
-  gap: 1rem;
-}
-
-header nav a {
-  color: #ecf0f1;
-  text-decoration: none;
-  font-weight: 600;
-  padding: 0.3rem 0.6rem;
-  border-radius: 3px;
-  transition: background-color 0.2s ease-in-out;
-}
-
-header nav a:hover,
-header nav a:focus {
-  background-color: #34495e;
-}
-
-footer {
-  background: #f0f0f0;
-  padding: 1rem 0;
-  text-align: center;
-  border-top: 1px solid #ccc;
-}
-
-/* Layout */
-.layout {
-  display: flex;
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1.5rem;
-  gap: 2rem;
-}
-
-/* Sidebar */
-.sidebar {
-  width: 260px;
-  background-color: #ffffff;
-  border-right: 1px solid #e0e0e0;
-  padding: 1.5rem;
-  font-size: 0.95rem;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
-}
-.sidebar .menu-year {
-  font-weight: 700;
-  font-size: 1.2rem;
-  color: #333333;
-  margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
-  padding-bottom: 0.5rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.sidebar nav ul {
-  list-style: none; /* Remove default bullets */
-  padding-left: 0; /* Remove indent */
-}
-
-.sidebar .menu-month {
-  margin-bottom: 1rem;
-  font-weight: 600;
-  color: #555555;
-}
-
-.sidebar .menu-month ul {
-  list-style: none;
-  padding-left: 1rem;
-  margin-top: 0.3rem;
-}
-
-.sidebar .menu-month li a {
-  color: #2c3e50;
-  text-decoration: none;
-  display: block;
-  padding: 0.2rem 0;
-  transition: color 0.2s ease-in-out;
-}
-
-.sidebar .menu-month li a:hover {
-  color: #1a73e8;
-  text-decoration: underline;
-}
-/* Main content */
-main.container {
-  flex: 1;
-  background-color: #ffffff;
-  padding: 2rem;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
-}
-
-main h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1rem;
-  border-bottom: 2px solid #2c3e50;
-  padding-bottom: 0.3rem;
-}
-
-main article p {
-  font-size: 1rem;
-  color: #444;
-}
-
-/* Responsive */
-@media (max-width: 900px) {
-  .layout {
-    flex-direction: column;
-  }
-
-  .sidebar {
-    width: 100%;
-    border-right: none;
-    border-bottom: 1px solid #e0e0e0;
-    margin-bottom: 1rem;
-  }
-
-  main.container {
-    margin: 0;
-  }
-}
-/* Small screen adjustments */
-
-@media (max-width: 600px) {
-  nav {
-    width: 100%;
-    height: auto;
-    float: none;
-    padding: 0.5rem;
-    text-align: center;
-    border-bottom: 1px solid #444;
-    background: #111;
-  }
-  main {
-    margin-left: 0;
-    padding: 1rem 0.5rem;
-  }
-  nav ul {
-    display: block;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 1rem;
-    padding: 0.5rem 0;
-    margin: 0;
-    list-style: none;
-  }
-  nav ul li {
-    margin: 0.25rem 0;
-    border: none;
-    /* display: inline-block; */
-  }
-  nav ul li a {
-    padding: 0.5rem 1rem;
-    display: block;
-    border-radius: 0;
-  }
-}
diff --git a/src/middleware/formatHtml.js b/src/middleware/formatHtml.js
index 345367e..8c02422 100644
--- a/src/middleware/formatHtml.js
+++ b/src/middleware/formatHtml.js
@@ -4,19 +4,25 @@
 module.exports = function (req, res, next) {
   const originalSend = res.send;
 
-     res.send = function (body) {
-       if (
-         typeof body === "string" &&
-         res.get("Content-Type")?.includes("text/html")
-       ) {
-         body = beautify(body, {
-           indent_size: 2,
-           wrap_line_length: 80,
-           end_with_newline: true,
-         });
-       }
-       return originalSend.call(this, body);
-     };
+  res.send = function (body) {
+    const contentType = res.get("Content-Type") || "";
+    const isHTML = contentType.includes("text/html") || typeof body === "string" && body.trim().startsWith("<");
+
+    if (isHTML) {
+      try {
+        body = beautify(body, {
+          indent_size: 2,
+          wrap_line_length: 80,
+          end_with_newline: true,
+        });
+      } catch (e) {
+        console.error("Beautify error:", e);
+      }
+    }
+
+    return originalSend.call(this, body);
+  };
 
   next();
 };
+
diff --git a/src/views/partials/postsMenu.handlebars b/src/views/partials/postsMenu.handlebars
index 4504f99..11ed636 100644
--- a/src/views/partials/postsMenu.handlebars
+++ b/src/views/partials/postsMenu.handlebars
@@ -1,15 +1,18 @@
+{{!-- partials/postsMenu.handlebars --}}
 {{#each years}}
-  <div class="menu-year">{{year}}</div>
-  <ul>
-    {{#each months}}
-      <li class="menu-month">
-        {{formatMonth month}}
-        <ul>
-          {{#each posts}}
-            <li><a href="/post/{{../../year}}/{{../month}}/{{slug}}">{{title}}</a></li>
-          {{/each}}
-        </ul>
-      </li>
-    {{/each}}
-  </ul>
+  <section class="year-block">
+    <h3 class="menu-year">{{year}}</h3>
+    <ul class="months-list">
+      {{#each months}}
+        <li class="menu-month">
+          <h4>{{formatMonth month}}</h4>
+          <ul class="posts-list">
+            {{#each posts}}
+              <li><a href="/post/{{../../year}}/{{../month}}/{{slug}}">{{title}}</a></li>
+            {{/each}}
+          </ul>
+        </li>
+      {{/each}}
+    </ul>
+  </section>
 {{/each}}