diff --git a/src/network/html/FilesPage.html b/src/network/html/FilesPage.html
index ff114969..628e20c7 100644
--- a/src/network/html/FilesPage.html
+++ b/src/network/html/FilesPage.html
@@ -5,25 +5,47 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader - Files</title>
   <style>
+    :root {
+      --font-color: #333;
+      --bg: #f5f5f5;
+      --title-color: #2c3e50;
+      --card-bg: #FFF;
+      --label-color: #7f8c8d;
+      --border-color: #eee;
+      --accent-color: rgb(110, 154, 130);
+      --accent-color-10: rgba(110, 154, 130, 0.1);
+      --accent-hover-color: #5a8c73;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --font-color: #f5f5f5;
+        --bg: #333;
+        --title-color: #ecf0f1;
+        --card-bg: #444;
+        --label-color: #bdc3c7;
+        --border-color: #555;
+        color-scheme: dark;
+      }
+    }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       Oxygen, Ubuntu, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
-      background-color: #f5f5f5;
-      color: #333;
+      background-color: var(--bg);
+      color: var(--font-color);
     }
     h1 {
-      color: #2c3e50;
+      color: var(--title-color);
       margin-bottom: 5px;
     }
     h2 {
-      color: #34495e;
+      color: var(--title-color);
       margin-top: 0;
     }
     .card {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 20px;
       margin: 15px 0;
@@ -37,7 +59,7 @@
       gap: 15px;
       margin-bottom: 20px;
       padding-bottom: 15px;
-      border-bottom: 2px solid #3498db;
+      border-bottom: 2px solid var(--accent-color);
     }
     .page-header-left {
       display: flex;
@@ -46,11 +68,11 @@
       flex-wrap: wrap;
     }
     .breadcrumb-inline {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 1.1em;
     }
     .breadcrumb-inline a {
-      color: #3498db;
+      color: var(--accent-color);
       text-decoration: none;
     }
     .breadcrumb-inline a:hover {
@@ -58,26 +80,30 @@
     }
     .breadcrumb-inline .sep {
       margin: 0 6px;
-      color: #bdc3c7;
+      color: var(--border-color);
     }
     .breadcrumb-inline .current {
-      color: #2c3e50;
+      color: var(--title-color);
       font-weight: 500;
     }
     .nav-links {
       margin: 20px 0;
+      display: flex;
+      gap: 10px;
     }
     .nav-links a {
-      display: inline-block;
       padding: 10px 20px;
-      background-color: #3498db;
-      color: white;
+      color: var(--font-color);
       text-decoration: none;
       border-radius: 4px;
-      margin-right: 10px;
     }
-    .nav-links a:hover {
-      background-color: #2980b9;
+    .nav-links a.active {
+      background-color: var(--accent-color);
+      color: white;
+    }
+    .nav-links a:not(.active):hover {
+      background-color: var(--accent-hover-color);
+      color: white;
     }
     /* Action buttons */
     .action-buttons {
@@ -125,7 +151,7 @@
       display: flex;
     }
     .modal {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 25px;
       max-width: 450px;
@@ -134,7 +160,7 @@
     }
     .modal h3 {
       margin: 0 0 15px 0;
-      color: #2c3e50;
+      color: var(--title-color);
     }
     .modal-close {
       float: right;
@@ -142,11 +168,11 @@
       border: none;
       font-size: 1.5em;
       cursor: pointer;
-      color: #7f8c8d;
+      color: var(--label-color);
       line-height: 1;
     }
     .modal-close:hover {
-      color: #2c3e50;
+      color: var(--title-color);
     }
     .file-table {
       width: 100%;
@@ -156,27 +182,14 @@
     .file-table td {
       padding: 12px;
       text-align: left;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--border-color);
     }
     .file-table th {
-      background-color: #f8f9fa;
       font-weight: 600;
-      color: #7f8c8d;
+      color: var(--label-color);
     }
     .file-table tr:hover {
-      background-color: #f8f9fa;
-    }
-    .epub-file {
-      background-color: #e8f6e9 !important;
-    }
-    .epub-file:hover {
-      background-color: #d4edda !important;
-    }
-    .folder-row {
-      background-color: #fff9e6 !important;
-    }
-    .folder-row:hover {
-      background-color: #fff3cd !important;
+      background-color: var(--accent-color-10);
     }
     .epub-badge {
       display: inline-block;
@@ -200,12 +213,12 @@
       margin-right: 8px;
     }
     .folder-link {
-      color: #2c3e50;
+      color: var(--accent-color);
       text-decoration: none;
       cursor: pointer;
     }
     .folder-link:hover {
-      color: #3498db;
+      color: var(--accent-hover-color);
       text-decoration: underline;
     }
     .upload-form {
@@ -233,7 +246,7 @@
       cursor: not-allowed;
     }
     .file-info {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 0.85em;
       margin: 8px 0;
     }
@@ -267,11 +280,11 @@
     .contents-title {
       font-size: 1.1em;
       font-weight: 600;
-      color: #34495e;
+      color: var(--title-color);
       margin: 0;
     }
     .summary-inline {
-      color: #7f8c8d;
+      color: var(--label-color);
       font-size: 0.9em;
     }
     #progress-container {
@@ -295,7 +308,7 @@
       text-align: center;
       margin-top: 5px;
       font-size: 0.9em;
-      color: #7f8c8d;
+      color: var(--label-color);
     }
     .folder-form {
       margin-top: 10px;
@@ -455,7 +468,7 @@
     }
     .delete-item-name {
       font-weight: 600;
-      color: #2c3e50;
+      color: var(--title-color);
       word-break: break-all;
     }
     .delete-btn-confirm {
@@ -483,7 +496,7 @@
       margin-top: 10px;
     }
     .delete-btn-cancel:hover {
-      background-color: #7f8c8d;
+      background-color: var(--label-color);
     }
     .rename-btn-confirm {
       background-color: #3498db;
@@ -627,7 +640,7 @@
 <body>
 <div class="nav-links">
   <a href="/">Home</a>
-  <a href="/files">File Manager</a>
+  <a href="/files" class="active">File Manager</a>
   <a href="/settings">Settings</a>
 </div>
 
diff --git a/src/network/html/HomePage.html b/src/network/html/HomePage.html
index c8927357..e073e6d8 100644
--- a/src/network/html/HomePage.html
+++ b/src/network/html/HomePage.html
@@ -5,26 +5,47 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CrossPoint Reader</title>
     <style>
+      :root {
+        --font-color: #333;
+        --bg: #f5f5f5;
+        --title-color: #2c3e50;
+        --card-bg: #FFF;
+        --label-color: #7f8c8d;
+        --border-color: #eee;
+        --accent-color: rgb(110, 154, 130);
+        --accent-hover-color: #5a8c73;
+      }
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --font-color: #f5f5f5;
+          --bg: #333;
+          --title-color: #ecf0f1;
+          --card-bg: #444;
+          --label-color: #bdc3c7;
+          --border-color: #555;
+          color-scheme: dark;
+        }
+      }
       body {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           Oxygen, Ubuntu, sans-serif;
         max-width: 800px;
         margin: 0 auto;
         padding: 20px;
-        background-color: #f5f5f5;
-        color: #333;
+        background-color: var(--bg);
+        color: var(--font-color);
       }
       h1 {
-        color: #2c3e50;
-        border-bottom: 2px solid #3498db;
+        color: var(--title-color);
+        border-bottom: 2px solid var(--accent-color);
         padding-bottom: 10px;
       }
       h2 {
-        color: #34495e;
+        color: var(--title-color);
         margin-top: 0;
       }
       .card {
-        background: white;
+        background: var(--card-bg);
         border-radius: 8px;
         padding: 20px;
         margin: 15px 0;
@@ -33,18 +54,19 @@
       .info-row {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         padding: 8px 0;
-        border-bottom: 1px solid #eee;
+        border-bottom: 1px solid var(--border-color);
       }
       .info-row:last-child {
         border-bottom: none;
       }
       .label {
         font-weight: 600;
-        color: #7f8c8d;
+        color: var(--label-color);
       }
       .value {
-        color: #2c3e50;
+        color: var(--title-color);
       }
       .status {
         display: inline-block;
@@ -56,18 +78,22 @@
       }
       .nav-links {
         margin: 20px 0;
+        display: flex;
+        gap: 10px;
       }
       .nav-links a {
-        display: inline-block;
         padding: 10px 20px;
-        background-color: #3498db;
-        color: white;
+        color: var(--font-color);
         text-decoration: none;
         border-radius: 4px;
-        margin-right: 10px;
       }
-      .nav-links a:hover {
-        background-color: #2980b9;
+      .nav-links a.active {
+        background-color: var(--accent-color);
+        color: white;
+      }
+      .nav-links a:not(.active):hover {
+        background-color: var(--accent-hover-color);
+        color: white;
       }
     </style>
   </head>
@@ -75,7 +101,7 @@
     <h1>📚 CrossPoint Reader</h1>
 
     <div class="nav-links">
-      <a href="/">Home</a>
+      <a href="/" class="active">Home</a>
       <a href="/files">File Manager</a>
       <a href="/settings">Settings</a>
     </div>
diff --git a/src/network/html/SettingsPage.html b/src/network/html/SettingsPage.html
index 1d25403d..00ca4ea3 100644
--- a/src/network/html/SettingsPage.html
+++ b/src/network/html/SettingsPage.html
@@ -5,26 +5,49 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>CrossPoint Reader - Settings</title>
   <style>
+    :root {
+      --font-color: #333;
+      --bg: #f5f5f5;
+      --title-color: #2c3e50;
+      --card-bg: #FFF;
+      --label-color: #7f8c8d;
+      --border-color: #eee;
+      --accent-color: rgb(110, 154, 130);
+      --accent-hover-color: #5a8c73;
+      --toggle-bg: #ccc;
+    }
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --font-color: #f5f5f5;
+        --bg: #333;
+        --title-color: #ecf0f1;
+        --card-bg: #444;
+        --label-color: #bdc3c7;
+        --border-color: #555;
+        --toggle-bg: #666;
+        color-scheme: dark;
+      }
+    }
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
         Oxygen, Ubuntu, sans-serif;
       max-width: 800px;
       margin: 0 auto;
       padding: 20px;
-      background-color: #f5f5f5;
-      color: #333;
+      background-color: var(--bg);
+      color: var(--font-color);
     }
     h1 {
-      color: #2c3e50;
-      border-bottom: 2px solid #3498db;
+      color: var(--title-color);
+      border-bottom: 2px solid var(--accent-color);
       padding-bottom: 10px;
     }
     h2 {
-      color: #34495e;
+      color: var(--title-color);
       margin-top: 0;
     }
     .card {
-      background: white;
+      background: var(--card-bg);
       border-radius: 8px;
       padding: 20px;
       margin: 15px 0;
@@ -32,32 +55,36 @@
     }
     .nav-links {
       margin: 20px 0;
+      display: flex;
+      gap: 10px;
     }
     .nav-links a {
-      display: inline-block;
       padding: 10px 20px;
-      background-color: #3498db;
-      color: white;
+      color: var(--font-color);
       text-decoration: none;
       border-radius: 4px;
-      margin-right: 10px;
     }
-    .nav-links a:hover {
-      background-color: #2980b9;
+    .nav-links a.active {
+      background-color: var(--accent-color);
+      color: white;
+    }
+    .nav-links a:not(.active):hover {
+      background-color: var(--accent-hover-color);
+      color: white;
     }
     .setting-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding: 10px 0;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--border-color);
     }
     .setting-row:last-child {
       border-bottom: none;
     }
     .setting-name {
       font-weight: 500;
-      color: #2c3e50;
+      color: var(--label-color);
       flex: 1;
       min-width: 0;
       padding-right: 12px;
@@ -73,7 +100,7 @@
       border: 1px solid #ddd;
       border-radius: 4px;
       font-size: 0.95em;
-      background: white;
+      background: var(--card-bg);
     }
     .setting-control select {
       min-width: 160px;
@@ -101,7 +128,7 @@
       position: absolute;
       cursor: pointer;
       top: 0; left: 0; right: 0; bottom: 0;
-      background-color: #ccc;
+      background-color: var(--toggle-bg);
       border-radius: 26px;
       transition: 0.3s;
     }
@@ -117,7 +144,7 @@
       transition: 0.3s;
     }
     .toggle-switch input:checked + .toggle-slider {
-      background-color: #27ae60;
+      background-color: var(--accent-color);
     }
     .toggle-switch input:checked + .toggle-slider:before {
       transform: translateX(22px);
@@ -194,7 +221,6 @@
       }
       .nav-links a {
         padding: 8px 12px;
-        margin-right: 6px;
         font-size: 0.9em;
       }
       .setting-row {
@@ -205,7 +231,7 @@
       .setting-control input[type="text"],
       .setting-control input[type="password"] {
         min-width: 0;
-        width: 100%;
+        width: unset;
       }
     }
   </style>
@@ -216,7 +242,7 @@
   <div class="nav-links">
     <a href="/">Home</a>
     <a href="/files">File Manager</a>
-    <a href="/settings">Settings</a>
+    <a href="/settings" class="active">Settings</a>
   </div>
 
   <div id="message" class="message"></div>