diff --git a/caddy/errors/404.html b/caddy/errors/404.html
index 206fc24..9cb506b 100644
--- a/caddy/errors/404.html
+++ b/caddy/errors/404.html
@@ -3,49 +3,137 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>404 — Page Not Found</title>
+  <title>404 — Page Not Found — LibNovel</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      background: #09090b;
+    }
+
     body {
       min-height: 100svh;
       display: flex;
       flex-direction: column;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      color: #a1a1aa;
+    }
+
+    header {
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid #27272a;
+    }
+    .logo {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      text-decoration: none;
+    }
+    .logo span { color: #f59e0b; }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 1rem;
-      background: #09090b;
-      color: #a1a1aa;
-      font-family: ui-sans-serif, system-ui, sans-serif;
-      padding: 2rem;
+      padding: 3rem 2rem;
       text-align: center;
+      gap: 0;
     }
-    .code {
-      font-size: clamp(4rem, 20vw, 8rem);
+
+    .watermark {
+      font-size: clamp(5rem, 22vw, 9rem);
       font-weight: 800;
-      color: #27272a;
+      color: #18181b;
       line-height: 1;
       letter-spacing: -0.04em;
+      user-select: none;
+      margin-bottom: 2rem;
     }
-    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
-    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
-    a  {
-      margin-top: 0.5rem;
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1.25rem;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #71717a;
+    }
+    .status-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #71717a;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+      max-width: 38ch;
+      line-height: 1.65;
+      margin-bottom: 2rem;
+    }
+
+    .btn {
       display: inline-block;
-      padding: 0.6rem 1.4rem;
+      padding: 0.625rem 1.5rem;
       border-radius: 0.5rem;
       background: #f59e0b;
       color: #000;
       font-weight: 600;
       font-size: 0.875rem;
       text-decoration: none;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #d97706; }
+
+    footer {
+      padding: 1.5rem 2rem;
+      border-top: 1px solid #27272a;
+      text-align: center;
+      font-size: 0.8rem;
+      color: #3f3f46;
     }
-    a:hover { background: #d97706; }
   </style>
 </head>
 <body>
-  <div class="code">404</div>
-  <h1>Page Not Found</h1>
-  <p>The page you're looking for doesn't exist or has been moved.</p>
-  <a href="/">Go home</a>
+
+  <header>
+    <a class="logo" href="/">Lib<span>Novel</span></a>
+  </header>
+
+  <main>
+    <div class="watermark">404</div>
+
+    <div class="status-row">
+      <div class="dot"></div>
+      <span class="status-label">Page not found</span>
+    </div>
+
+    <h1>Nothing here</h1>
+    <p>The page you're looking for doesn't exist or has been moved.</p>
+
+    <a class="btn" href="/">Go home</a>
+  </main>
+
+  <footer>
+    &copy; LibNovel
+  </footer>
+
 </body>
 </html>
diff --git a/caddy/errors/502.html b/caddy/errors/502.html
index 74148be..0187409 100644
--- a/caddy/errors/502.html
+++ b/caddy/errors/502.html
@@ -3,49 +3,160 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>502 — Service Unavailable</title>
+  <title>502 — Service Unavailable — LibNovel</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      background: #09090b;
+    }
+
     body {
       min-height: 100svh;
       display: flex;
       flex-direction: column;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      color: #a1a1aa;
+    }
+
+    header {
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid #27272a;
+    }
+    .logo {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      text-decoration: none;
+    }
+    .logo span { color: #f59e0b; }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 1rem;
-      background: #09090b;
-      color: #a1a1aa;
-      font-family: ui-sans-serif, system-ui, sans-serif;
-      padding: 2rem;
+      padding: 3rem 2rem;
       text-align: center;
+      gap: 0;
     }
-    .code {
-      font-size: clamp(4rem, 20vw, 8rem);
+
+    .watermark {
+      font-size: clamp(5rem, 22vw, 9rem);
       font-weight: 800;
-      color: #27272a;
+      color: #18181b;
       line-height: 1;
       letter-spacing: -0.04em;
+      user-select: none;
+      margin-bottom: 2rem;
     }
-    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
-    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
-    a  {
-      margin-top: 0.5rem;
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1.25rem;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #f59e0b;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.4; transform: scale(0.75); }
+    }
+    .status-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #f59e0b;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+      max-width: 38ch;
+      line-height: 1.65;
+      margin-bottom: 2rem;
+    }
+
+    .btn {
       display: inline-block;
-      padding: 0.6rem 1.4rem;
+      padding: 0.625rem 1.5rem;
       border-radius: 0.5rem;
       background: #f59e0b;
       color: #000;
       font-weight: 600;
       font-size: 0.875rem;
       text-decoration: none;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #d97706; }
+
+    .refresh-note {
+      margin-top: 1.25rem;
+      font-size: 0.8rem;
+      color: #52525b;
+    }
+    #countdown { color: #71717a; }
+
+    footer {
+      padding: 1.5rem 2rem;
+      border-top: 1px solid #27272a;
+      text-align: center;
+      font-size: 0.8rem;
+      color: #3f3f46;
     }
-    a:hover { background: #d97706; }
   </style>
 </head>
 <body>
-  <div class="code">502</div>
-  <h1>Service Unavailable</h1>
-  <p>The server is temporarily unreachable. Please try again in a moment.</p>
-  <a href="/">Go home</a>
+
+  <header>
+    <a class="logo" href="/">Lib<span>Novel</span></a>
+  </header>
+
+  <main>
+    <div class="watermark">502</div>
+
+    <div class="status-row">
+      <div class="dot"></div>
+      <span class="status-label">Service unavailable</span>
+    </div>
+
+    <h1>Something went wrong</h1>
+    <p>The server is temporarily unreachable. This usually resolves itself quickly.</p>
+
+    <a class="btn" href="/">Try again</a>
+    <p class="refresh-note">Page refreshes automatically in <span id="countdown">20</span>s</p>
+  </main>
+
+  <footer>
+    &copy; LibNovel
+  </footer>
+
+  <script>
+    var s = 20;
+    var el = document.getElementById('countdown');
+    var t = setInterval(function () {
+      s--;
+      el.textContent = s;
+      if (s <= 0) { clearInterval(t); location.reload(); }
+    }, 1000);
+  </script>
+
 </body>
 </html>
diff --git a/caddy/errors/503.html b/caddy/errors/503.html
index 1080cf9..8b694ae 100644
--- a/caddy/errors/503.html
+++ b/caddy/errors/503.html
@@ -3,49 +3,163 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>503 — Maintenance</title>
+  <title>Under Maintenance — LibNovel</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      background: #09090b;
+    }
+
     body {
       min-height: 100svh;
       display: flex;
       flex-direction: column;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      color: #a1a1aa;
+    }
+
+    /* ── Header ── */
+    header {
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid #27272a;
+    }
+    .logo {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      text-decoration: none;
+    }
+    .logo span { color: #f59e0b; }
+
+    /* ── Main ── */
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 1rem;
-      background: #09090b;
-      color: #a1a1aa;
-      font-family: ui-sans-serif, system-ui, sans-serif;
-      padding: 2rem;
+      padding: 3rem 2rem;
       text-align: center;
+      gap: 0;
     }
-    .code {
-      font-size: clamp(4rem, 20vw, 8rem);
+
+    .watermark {
+      font-size: clamp(5rem, 22vw, 9rem);
       font-weight: 800;
-      color: #27272a;
+      color: #18181b;
       line-height: 1;
       letter-spacing: -0.04em;
+      user-select: none;
+      margin-bottom: 2rem;
     }
-    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
-    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
-    a  {
-      margin-top: 0.5rem;
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1.25rem;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #f59e0b;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.4; transform: scale(0.75); }
+    }
+    .status-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #f59e0b;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+      max-width: 38ch;
+      line-height: 1.65;
+      margin-bottom: 2rem;
+    }
+
+    .btn {
       display: inline-block;
-      padding: 0.6rem 1.4rem;
+      padding: 0.625rem 1.5rem;
       border-radius: 0.5rem;
       background: #f59e0b;
       color: #000;
       font-weight: 600;
       font-size: 0.875rem;
       text-decoration: none;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #d97706; }
+
+    .refresh-note {
+      margin-top: 1.25rem;
+      font-size: 0.8rem;
+      color: #52525b;
+    }
+    #countdown { color: #71717a; }
+
+    /* ── Footer ── */
+    footer {
+      padding: 1.5rem 2rem;
+      border-top: 1px solid #27272a;
+      text-align: center;
+      font-size: 0.8rem;
+      color: #3f3f46;
     }
-    a:hover { background: #d97706; }
   </style>
 </head>
 <body>
-  <div class="code">503</div>
-  <h1>Under Maintenance</h1>
-  <p>LibNovel is briefly offline for maintenance. We&rsquo;ll be back shortly.</p>
-  <a href="/">Try again</a>
+
+  <header>
+    <a class="logo" href="/">Lib<span>Novel</span></a>
+  </header>
+
+  <main>
+    <div class="watermark">503</div>
+
+    <div class="status-row">
+      <div class="dot"></div>
+      <span class="status-label">Maintenance in progress</span>
+    </div>
+
+    <h1>We'll be right back</h1>
+    <p>LibNovel is briefly offline for scheduled maintenance. No data is being changed — hang tight.</p>
+
+    <a class="btn" href="/">Try again</a>
+    <p class="refresh-note">Page refreshes automatically in <span id="countdown">30</span>s</p>
+  </main>
+
+  <footer>
+    &copy; LibNovel
+  </footer>
+
+  <script>
+    var s = 30;
+    var el = document.getElementById('countdown');
+    var t = setInterval(function () {
+      s--;
+      el.textContent = s;
+      if (s <= 0) { clearInterval(t); location.reload(); }
+    }, 1000);
+  </script>
+
 </body>
 </html>
diff --git a/caddy/errors/504.html b/caddy/errors/504.html
index 53faf9c..89e1528 100644
--- a/caddy/errors/504.html
+++ b/caddy/errors/504.html
@@ -3,49 +3,160 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>504 — Gateway Timeout</title>
+  <title>504 — Gateway Timeout — LibNovel</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      height: 100%;
+      background: #09090b;
+    }
+
     body {
       min-height: 100svh;
       display: flex;
       flex-direction: column;
+      font-family: ui-sans-serif, system-ui, sans-serif;
+      color: #a1a1aa;
+    }
+
+    header {
+      padding: 1.5rem 2rem;
+      border-bottom: 1px solid #27272a;
+    }
+    .logo {
+      font-size: 1.125rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      text-decoration: none;
+    }
+    .logo span { color: #f59e0b; }
+
+    main {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
       align-items: center;
       justify-content: center;
-      gap: 1rem;
-      background: #09090b;
-      color: #a1a1aa;
-      font-family: ui-sans-serif, system-ui, sans-serif;
-      padding: 2rem;
+      padding: 3rem 2rem;
       text-align: center;
+      gap: 0;
     }
-    .code {
-      font-size: clamp(4rem, 20vw, 8rem);
+
+    .watermark {
+      font-size: clamp(5rem, 22vw, 9rem);
       font-weight: 800;
-      color: #27272a;
+      color: #18181b;
       line-height: 1;
       letter-spacing: -0.04em;
+      user-select: none;
+      margin-bottom: 2rem;
     }
-    h1 { font-size: 1.25rem; font-weight: 600; color: #e4e4e7; }
-    p  { font-size: 0.9rem; max-width: 36ch; line-height: 1.6; }
-    a  {
-      margin-top: 0.5rem;
+
+    .status-row {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-bottom: 1.25rem;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #f59e0b;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.4; transform: scale(0.75); }
+    }
+    .status-label {
+      font-size: 0.75rem;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      color: #f59e0b;
+    }
+
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      color: #e4e4e7;
+      letter-spacing: -0.02em;
+      margin-bottom: 0.75rem;
+    }
+
+    p {
+      font-size: 0.9375rem;
+      max-width: 38ch;
+      line-height: 1.65;
+      margin-bottom: 2rem;
+    }
+
+    .btn {
       display: inline-block;
-      padding: 0.6rem 1.4rem;
+      padding: 0.625rem 1.5rem;
       border-radius: 0.5rem;
       background: #f59e0b;
       color: #000;
       font-weight: 600;
       font-size: 0.875rem;
       text-decoration: none;
+      transition: background 0.15s;
+    }
+    .btn:hover { background: #d97706; }
+
+    .refresh-note {
+      margin-top: 1.25rem;
+      font-size: 0.8rem;
+      color: #52525b;
+    }
+    #countdown { color: #71717a; }
+
+    footer {
+      padding: 1.5rem 2rem;
+      border-top: 1px solid #27272a;
+      text-align: center;
+      font-size: 0.8rem;
+      color: #3f3f46;
     }
-    a:hover { background: #d97706; }
   </style>
 </head>
 <body>
-  <div class="code">504</div>
-  <h1>Gateway Timeout</h1>
-  <p>The request took too long to complete. Please refresh and try again.</p>
-  <a href="/">Go home</a>
+
+  <header>
+    <a class="logo" href="/">Lib<span>Novel</span></a>
+  </header>
+
+  <main>
+    <div class="watermark">504</div>
+
+    <div class="status-row">
+      <div class="dot"></div>
+      <span class="status-label">Gateway timeout</span>
+    </div>
+
+    <h1>Request timed out</h1>
+    <p>The server took too long to respond. Please refresh and try again.</p>
+
+    <a class="btn" href="/">Try again</a>
+    <p class="refresh-note">Page refreshes automatically in <span id="countdown">20</span>s</p>
+  </main>
+
+  <footer>
+    &copy; LibNovel
+  </footer>
+
+  <script>
+    var s = 20;
+    var el = document.getElementById('countdown');
+    var t = setInterval(function () {
+      s--;
+      el.textContent = s;
+      if (s <= 0) { clearInterval(t); location.reload(); }
+    }, 1000);
+  </script>
+
 </body>
 </html>
